@charset "utf-8";

body {position: relative; margin:0 auto; padding:0; width: 100%; height: 100%; color:#0c0c0c; background: #f6f6f6;}

/****************************************************************************************************************************************
Header
*****************************************************************************************************************************************/
header {position: fixed; top:0; z-index: 999; width: 100%; box-shadow: 0 1px 6px rgba(12,12,12,0.06);}
/* hd-top  */
.hd-top {position: relative; margin:0; padding:0 25px; width: 100%; height: 70px; display: flex; justify-content:space-between; align-items: center; background: #fff;}

.hd-bar {position: relative; z-index: 9999; padding: 7px 7px 7px 0; width: 44px; display: flex; flex-direction: column; cursor: pointer;}
.hd-bar > i {font-size:28px; color: #0C0C0C; cursor: pointer;}

.hd-logo {position: absolute; left: 0; right: 0;  margin: 0 auto; width: 250px; display: flex; justify-content: center; align-items: center;}
.hd-logo > img {width: 100px; cursor: pointer;}

/* 로그인전 */
.before-tnb {position:relative; display: flex; gap:8px; align-items: center; justify-content: flex-end;}
.before-tnb > button {padding:0 50px; min-width:140px; height: 40px; display: flex;justify-content: center; align-items: center; font-weight: 600; border-radius: 100px;}
.btn-borderB {color: #0c0c0c; background:#fff; border: 2px solid #0C0C0C;}
.btn-pink {color: #fff;background:#fe139c; border: 2px solid #fe139c;}

@media (hover: hover) and (pointer: fine) {
    .btn-borderB:hover {color:#fff; background:#0C0C0C}
    .btn-pink:hover {color: #fe139c; background:#fff;}
}

/* 로그인 후 */
.after-tnb {position:relative; display: none;}
ul.tnb-info {position: relative; margin:0; padding:0; width: 100%; display: flex; gap:15px; justify-content: flex-end; align-items: center;}
ul.tnb-info > li {margin:0; padding:8px 0; font-weight: 600; color: #0c0c0c;}
ul.tnb-info > li > span {margin-left: 5px; font-weight: 600; color:#4360ff;}
ul.tnb-info > li > button {margin:0 auto; padding:0 20px; line-height: 35px; font-weight: 600; border-radius: 100px;}

/* nav */
.nav {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center; background: #fff; transition: 0.3s;}
ul.main-menu {position: relative; margin:0 auto; padding:0; width: 100%; height: 65px; display: flex; gap:10px; justify-content: center; align-items: center;}
ul.main-menu > li {margin:0; padding:0 20px; line-height: 33px; font-size:15px; font-weight: 600; color: #0c0c0c; background: #e4e4e4; border-radius: 50px; cursor: pointer;}
ul.main-menu > li.active {color:#fff; background: #fe139c;}

@media (hover: hover) and (pointer: fine) {
    ul.main-menu > li:hover {color:#fff; background: #fe139c;}
}

/* sticky */
.sticky {background: #fff; box-shadow: 0 1px 6px rgba(12, 12, 12, 0.059);}
.sticky .nav {top: -70px; z-index: -1;}
.sticky ul.main-menu {height: 0;}

/****************************************************************************************************************************************
aside
*****************************************************************************************************************************************/
aside.active {position: fixed; left:0; right:0; top:0; bottom: 0; z-index: 9999; width: 100%; height: 100%; background: rgba(12, 12, 12, 0.7);}
.aside-inner {position: fixed; left:-300px; top:0; bottom:0; z-index: 9999; padding:30px 30px; width: 300px; height: 100%; background: #fff; transition: all 0.3s; overflow-y: auto;}
.aside-inner.active {left:0;}

.aside-close {position: relative; margin: 0 auto; padding:0; text-align: right;}
.aside-close > i {font-size: 25px; color: #0C0C0C; cursor: pointer;}

.aside-logo {position: relative; margin:0 auto; padding:0; width:100%; text-align: center;}
.aside-logo > img {width: 100px;}

/* aside-after */
ul.aside-after {position: relative; margin:50px auto 0 auto; padding:0; width: 100%;}
ul.aside-after > li {margin:0; padding:8px 0; font-size:15px; font-weight: 600; color: #0c0c0c;}
ul.aside-after > li > span {margin-left: 5px; font-weight: 600; color:#4360ff;}
ul.aside-after > li > button {margin:0 auto; padding:0; width: 100%; line-height: 35px; font-size: 15px; font-weight: 600; border-radius: 100px;}

/* aside-menu */
ul.aside-menu {position: relative; margin:0 auto; padding:0; width: 100%;}
ul.aside-menu > li {margin:0; padding:10px 0; font-size:15px; font-weight: 600; color: #0c0c0c; cursor: pointer;}
ul.aside-menu > li > i {margin-right:5px;}
ul.aside-menu > li.active {color:#fe139c;}

/* aside-hr */
.aside-hr {margin: 43px 0; width: 100%; height: 1px; background: #0c0c0c;}

/* aside-before */
.aside-before {position: relative; margin:0 auto; padding:0; width: 100%;}
.aside-before > button {margin:5px auto; padding:0; width: 100%; line-height: 45px; font-size: 15px; font-weight: 600; border-radius: 100px;}

@media (hover: hover) and (pointer: fine) {
    ul.aside-menu > li:hover {color:#fe139c;}
}


/****************************************************************************************************************************************
페이지 공통
*****************************************************************************************************************************************/
.container {position: relative; margin:0 auto; padding:0 15px; width: 1700px; text-align: center;}


/****************************************************************************************************************************************
footer
*****************************************************************************************************************************************/
footer {position:relative; margin:0 auto; padding:0; width: 100%;}
.ft-logo {position:relative; margin:0 auto; padding:0; width: 100%; text-align: center; background: #f6f6f6;}

ul.provider {position: relative; margin:0 auto; padding:50px 15px; width: 1700px; display: flex; flex-wrap: wrap; gap:10px; justify-content:center; align-items: center;}
ul.provider > li {position: relative; padding: 10px 10px; width: calc(100% / 10 - 10px); height: 90px; background: #eeeded; border-radius: 5px; cursor: pointer;}
ul.provider > li > img {width: 80%; height:80%; object-fit: contain;}

.copyright {position: relative; margin:0 auto; padding:20px 15px; width: 100%; text-align: center; background: #fff;}
.copyright > img {display: block; margin:20px auto; padding:0; width: 100px;}
.copyright > p {font-size: 13px;}

/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 1730px) {    
    .container,
    ul.provider {width: 100%;}
    .container {padding:0 10px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 992px) {    
    .before-tnb {position: fixed; left: 0; right:0; bottom:0; z-index: 1; width: 100%; gap:0;}
    .before-tnb > button {min-width:50%; height:60px; border-radius: 0; border: none;}
    .btn-borderB:hover {color:#0c0c0c; background:#fff}
    .btn-pink:hover {color: #fff;background:#fe139c;}
    
    .after-tnb {display: none;}

    footer {padding:0 0 70px 0;}
    ul.provider {display: none;}
}/* 미디어쿼리문 끝 */

@media (max-width: 820px) { 
    .hd-logo > img {width: 80px;}
    .aside-logo > img {width: 80px;}
    ul.aside-after {margin: 30px auto 0 auto;}

    .hd-top {padding:0 10px;}  
    .nav {display: none;}

    .copyright > img {width: 60px;}
}/* 미디어쿼리문 끝 */