@charset "UTF-8";

#header {width: 100%; background: var(--white); box-shadow: var(--shadow); position: sticky; top: 0; left: 0; right: 0; z-index: 100;}

#header .menu-bar {position: relative; width: 100%; height: var(--header-height); margin: 0 auto; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}

#header .logo-area {display: block; width: fit-content; height: 27px; margin-right: auto;}
#header .logo-area .logo,
#header .logo-area .logo-white {
    display: block; width: 100%; height: 100%; object-fit: contain;
}
#header .logo-area .logo {display: block;}
#header .logo-area .logo-white {display: none;}

#header .logo-area2 {width: 150px; height: 20px; display: block; margin-right: 30px;}
#header .logo-area2 .logo {display: block; width: 100%; height: 100%;}
#header .logo-area2 .logo.portrait {display: none;}

#header .menu {display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}

#header .gnb .ul-main-menu {position: relative; display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 12px;}
#header .gnb .ul-main-menu>.item {position: relative;}
#header .gnb .ul-main-menu>.item .main-menu {width: 7.5rem; padding: 10px 8px; color: var(--gray80); font-size: 1rem; font-weight: 500; line-height: 160%; letter-spacing: var(--ls); text-align: center;}
#header .gnb .ul-main-menu>.item .main-menu:hover {font-weight: 700;}
#header .gnb .ul-main-menu>.item .main-menu span {display: inline-block;}
#header .gnb .ul-main-menu>.item .main-menu i {margin-left: 30px;}

#header .gnb .ul-main-menu>.item:hover .ul-sub-menu {display: block;}
#header .gnb .ul-sub-menu {position: absolute; top: 100%; left: 0; min-width: 200px; width: max-content; padding: 10px 0; background: var(--white); border-radius: 15px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.06); display: none;}
#header .gnb .ul-sub-menu>.item,
#header .gnb .third-menu_ul>.item {
    padding: 10px 30px; position: relative; line-height: 1.5;
}
#header .gnb .ul-sub-menu>.item .sub-menu,
#header .gnb .third-menu_ul>.item .third-menu {
    font-weight: 500; font-size: 0.938rem; display: inline-block;
}
#header .gnb .ul-sub-menu>.item .sub-menu {color: var(--gray60);}
#header .gnb .ul-sub-menu>.item .sub-menu::after,
#header .gnb .third-menu_ul>.item .third-menu::after {
    display: block; content: ''; transform: scaleX(0); transform-origin: 0% 50%; transition: transform 250ms ease-in-out;
}
#header .gnb .ul-sub-menu>.item .sub-menu::after {border-bottom: 1px solid var(--gray60);}
#header .gnb .ul-sub-menu>.item .sub-menu:hover::after,
#header .gnb .third-menu_ul>.item .third-menu:hover::after {
    transform: scaleX(1);
}
#header .gnb .ul-sub-menu>.item .sub-menu .arrow {position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-size: 12px;}
#header .gnb .ul-sub-menu>.item:hover .third-menu_ul {display: block;}

#header .gnb .third-menu_ul {position: absolute; top: 0; left: 100%; min-width: 200px; width: max-content; padding: 10px 0; background: var(--white); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.06); display: none;}
#header .gnb .third-menu_ul>.item .third-menu {color: var(--gray40);}
#header .gnb .third-menu_ul>.item .third-menu::after {border-bottom: 1px solid var(--gray40);}

#header .member-menu {margin-left: clamp(0px, 13.02083333333vw, 250px); display: flex; justify-content: end; align-items: center; gap: 4px;}
#header .user {flex-shrink: 0; padding: 8px 10px; border-radius: 8px; background: var(--purple0); color: var(--highlight); font-size: 1rem; font-weight: 700; line-height: 140%; letter-spacing: var(--ls);}
#header .user strong {font-weight: 700;}
#header :is(.btn-login, .btn-logout) {flex-shrink: 0; padding: 8px 10px; color: var(--gray40); font-size: 1rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls);}

#header .btn-m-menu {color: var(--gray90); font-size: 1.625rem;}

#header.shrink {background: var(--white);}

#header.shrink>.hd_pop {opacity: 0; display: none !important;}

.hd_pop {width: 100%; height: 80px; background-image: url('../img/popup/hd_pop.jpg'); background-repeat: no-repeat; background-size: cover; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; opacity: 1; display: block;}
.hd_pop .pop_wrap {width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; position: relative;}
.hd_pop_btn {position: absolute; right: 5px; top: 5px; font-size: 15px; color: var(--white); display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.hd_pop_btn.chk_box input[type="checkbox"] + label {color: var(--white);}
.hd_pop_close {display: block; margin-left: 10px;}
.hd_pop_close img {width: 19px; display: block;}
.hd_pop_btn.chk_box.colorBlack input[type="checkbox"] + label {color: #111;}
.hd_pop .btn_view {display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 220px; padding: 12px 0; border-radius: 999px; background: #715b2f; color: var(--white); font-size: 1.25em; font-weight: bold; position: absolute; top: 50%; right: 200px; transform: translateY(-50%);}
.hd_pop_margin {margin-top: 80px;}




#footer {position: relative; width: 100%; padding: 48px 0 32px; background: #F3F5F8; color: var(--gray40);}
#footer .inner {max-width: 1200px;}

#footer .top-bar {width: 100%; padding: 22px 142px; border-top: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF;}
#footer .list-wrap {display: -webkit-flex; display: flex; justify-content: start; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
#footer .top-bar .list-wrap .list-site {display: -webkit-flex; display: flex; justify-content: start; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
#footer .top-bar .list-wrap .tit {margin-right: 90px; font-weight: 400;}
#footer .top-bar .list-wrap .list-site .item {margin-right: 40px;}
#footer .top-bar .list-wrap .list-site .item:last-child {margin-right: 0;}
#footer .top-bar .list-wrap .list-site .item a {display: block; width: fit-content; height: 25px;}
#footer .top-bar .list-wrap .list-site .item a img {display: block; width: 100%; height: 100%; object-fit: contain; object-position: left;}
#related + .related-label {cursor: default;}
#related + .related-label::before {display: none;}

#footer .corporation {color: var(--gray60); font-size: 1rem; font-weight: 700; line-height: 140%; letter-spacing: var(--ls); margin-bottom: 16px;}

#footer address {color: var(--gray40); font-size: 0.875rem; font-weight: 500; line-height: 160%; letter-spacing: var(--ls); margin-bottom: 40px;}
#footer address * {color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit;}
#footer address p>* + *::before {display: inline-block; content: ''; width: 1px; height: 12px; background: var(--gray40); margin: 0 6px;}

#footer .copy-wrap {display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--gray20); font-weight: 500;}
#footer .copy-wrap .util {display: flex; justify-content: start; align-items: center; gap: 8px;}
#footer .copy-wrap .util>*, 
#footer .copy {color: var(--gray40); font-size: 0.875rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls);}

#channel_add_button {position: fixed; bottom: 4%; right: 3%; z-index: 555;}
#channel_add_button img {display: block;}





@media screen and (min-width:1201px){
    .popup-policies {min-width: 1000px;}
}

@media screen and (max-width:1200px){
    #header .member-menu {margin-left: clamp(0px, 8.5vw, 102px);}

    .hd_pop {background-position: 36% 50%;}
    .hd_pop .pop_wrap {padding: 0 10px;}
    .hd_pop .btn_view {right: 20px; width: 200px; padding: 7px 0; font-size: 1.125em; top: auto; bottom: 10px; transform: none;}
    .hd_pop_close img {width: 17px;}
}

@media screen and (min-width:993px){
    .mobile {display: none;}
}

@media screen and (max-width:992px){
    .pc {display: none;}
    .mobile {display: block;}

    #header .menu {display: none;}


    #footer .top-bar {padding: 20px 50px 0; border: 0; border-top: var(--border-solid);}
    #footer .list-wrap {width: 100%; cursor: pointer; position: relative;}
    #related + .related-label {width: 100%; cursor: pointer; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
    #related + .related-label::after {content: '\f078'; font-weight: 900; font-family: "Font Awesome 6 Free"; font-size: 20px; color: var(--highlight); line-height: 1; position: absolute; top: 7px; right: 20px;}
    #related:checked + .related-label::after {content: '\f077';}
    #footer .top-bar .list-wrap .tit {width: 100%; padding: 10px 16px; margin: 0; border: var(--border-solid); background: var(--white);}
    #footer .top-bar .list-wrap .list-site {position: absolute; top: 36.88px; width: 100%; transform: scaleY(0); transform-origin: top; transition: all 0.3s; border-left: var(--border-solid); border-right: var(--border-solid); background: var(--white);}
    #related:checked + .related-label .list-site {transform: scaleY(1);}
    #footer .top-bar .list-wrap .list-site .item {width: 100%; margin: 0; padding: 10px 16px; border-bottom: var(--border-solid);}
    #footer .top-bar .list-wrap .list-site .item a {width: 100%; height: 20px;}

    .popup-policies {min-width: calc(100% - 100px);}
}

@media screen and (max-width:768px){
    .hd_pop {background-image: url('../img/popup/hd_pop_t@2x.jpg');}
    .hd_pop .btn_view {width: 150px; padding: 5px 0; font-size: 1em; bottom: 6px;}
    .hd_pop_btn {right: 5px;top: 0;font-size: 1.8229vw;}
    .hd_pop_btn.chk_box input[type="checkbox"] + label {margin-right: 1.5625vw; padding-left: 3.1250vw;}
    .hd_pop_btn.chk_box input[type="checkbox"] + label span {width: 2.2135vw; height: 2.2135vw;}
    .hd_pop_btn.chk_box input[type="checkbox"]:checked + label span {background-size: 1.5625vw;}
    .hd_pop .hd_pop_close img {width: 2.4740vw;}

    
    #footer .copy-wrap {padding-top: 24px; flex-direction: column; align-items: flex-start; gap: 8px;}
    #footer address * {display: block;}
    #footer address p>* + *::before {display: none;}
}

@media screen and (max-width:480px){
    .hd_pop {background-image: url('../img/popup/hd_pop_m@2x.jpg');}
    .hd_pop .btn_view {left: 50%; right: auto; bottom: 10px; transform: translateX(-50%);}


    footer{font-size: 14px;}
}

@media screen and (max-width:400px){
    #header .logo-area2 {width: 66px; height: 32px;}
    #header .logo-area2 .logo.landscape {display: none;}
    #header .logo-area2 .logo.portrait {display: block;}
}