@charset "UTF-8";

/*-------------------------------------------------------------------
    공통
-------------------------------------------------------------------*/
/* body.fixed{position: fixed;} */

[data-mode="dark"]{background-color: #1E2124;}

.blind{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}

#wrap{transition: padding-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);}
body.banner_open #wrap{padding-top: 12rem;}

/*-------------------------------------------------------------------
    header
-------------------------------------------------------------------*/
#slide_map{display: none; opacity: 0; visibility: hidden; flex-wrap: wrap; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; z-index: -999; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.4); /*display: none; opacity: 0; visibility: hidden; */ -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}

#slide_map.on{display: flex; opacity: 1; visibility: visible; z-index: 999;}
#slide_map .inner{position:relative; background:#fff; padding:8rem 4rem 6rem; box-shadow: 2px 2px 8px rgba(0,0,0,0.1);}
#slide_map .inner .binds{overflow-y: auto; width: 100%; max-width: calc(1920px - 2rem); max-height: 100%; font-size:1.6rem;}
#slide_map .close_btn{position: absolute; top:14px; right:2rem; width: 40px; height: 40px; border-radius: 50%; background:#8E153F; transition: all .45s; }
#slide_map .close_btn:before,
#slide_map .close_btn:after{content: ""; display: block; position: absolute; left: 50%; top: 50%; background-color: #fff; width: 2.4rem; height: 2px; border-radius: 3px; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
#slide_map .close_btn:before{-webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);}
#slide_map .close_btn:after{-webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);}
#slide_map .close_btn:hover{transform: rotate(0.5turn);}
#slide_map .inner .tmenu_ti{display:none;}
#slide_map .inner .tmenu_ti{display:none;}

#slide_map .inner .binds > ul > li > div > ul > li{position:relative; padding-left: 1.6rem;}
#slide_map .inner .binds > ul > li > div > ul > li > a{display:block;}
#slide_map .inner .binds > ul > li > div > ul > li > a:hover{color:#ED164C;}
#slide_map .inner .binds > ul > li > div > ul > li > a::before{content:""; display:block; position:absolute; left:0.4rem; top:1rem; width:0.3rem; height:0.3rem; background:#121212; border-radius: 50%;}
#slide_map .inner .binds > ul > li > div > ul > li > a:hover::before{background:#ED164C;}
#slide_map .inner .binds > ul > li > div > ul > li > ul{display:none;}
/* #slide_map .inner .binds > ul > li:last-child{display:none;} */

@media all and (min-width:1024px){
    #slide_map .inner{width:85%; border-radius: 1.2rem;}
    #slide_map .inner .binds > ul{display:grid; grid-template-columns: repeat(4,1fr); gap:2.8rem;}
    #slide_map .inner .binds > ul > li{}
    #slide_map .inner .binds > ul > li > a{display:block; padding:0.8rem 1.6rem; margin-bottom:1.2rem; border-radius: 0.8rem; background:#f5f5f5; font-size:1.8rem; font-weight:600; transition: all .35s;}
    #slide_map .inner .binds > ul > li:hover > a{color:#fff; background:#0076A3;}
    #slide_map .inner .binds > ul > li > div{}
    #slide_map .inner .binds > ul > li > div > ul{}
    #slide_map .inner .binds > ul > li > div > ul > li > ul{display:none !important;}
}
@media all and (max-width:1025px){
    #slide_map .inner{width:400px; height:100%; margin-left:auto; padding:65px 0 0; background:#B62B5B;}
    #slide_map .inner .binds{height:100%; background:#fff;}
    #slide_map .inner .binds::before{content:""; display:block; position:absolute; left:20px; top:15px; width:150px; height:30px; background:url("../../../images/site/layout/logo.svg") no-repeat 50% 50% / 100% auto;}
    #slide_map .inner .binds > ul{position:relative; height:100%; padding:0 20px;}
    #slide_map .inner .binds > ul > li > a{display:block; position:relative; padding:14.5px 0; border-bottom:1px solid #ddd; color:#333; font-size:18px; font-weight:700;}
    #slide_map .inner .binds > ul > li > a::after{content:""; display:block; position:absolute; right:8px; top:50%; width:10px; height:10px; border-left:2px solid #333; border-bottom:2px solid #333; transform:translateY(-50%) rotate(315deg);}
    #slide_map .inner .binds > ul > li > a.on{color:#B62B5B; border-bottom-color:#B62B5B;}
    #slide_map .inner .binds > ul > li > a.on::after{transform: translateY(-50%) rotate(135deg); border-color:#B62B5B;}
    #slide_map .inner .binds > ul > li > div{display:none; height:auto !important;}
    #slide_map .inner .binds > ul > li > a.on + div{display:block; padding:8px 0;}
    #slide_map .inner .binds > ul > li > div > ul > li{padding-left:0;}
    #slide_map .inner .binds > ul > li > div > ul > li > a{padding:8px 0; color:#464C53; font-size:16px; font-weight:500; line-height:1;}
    #slide_map .inner .binds > ul > li > div > ul > li.on > a{border-color:#B62B5B;}
    #slide_map .inner .binds > ul > li > div > ul > li > a.show{border-color:#B62B5B; color:#B62B5B;}
    #slide_map .inner .binds > ul > li > div > ul > li > a.arrow{position:relative;}
    #slide_map .inner .binds > ul > li > div > ul > li > a.arrow::after{content:""; display:block; position:absolute; right:1.6rem; top:50%; transform: translateY(-50%) rotate(45deg); width:8px; height:8px; border-right:1px solid #000; border-bottom:1px solid #000; transition: all .35s;}
    #slide_map .inner .binds > ul > li > div > ul > li > a.arrow.show::after{transform: translateY(-50%) rotate(225deg); border-right-color:#0076A3; border-bottom-color:#0076A3;}
    #slide_map .inner .binds > ul > li > div > ul > li > a:hover{color:#B62B5B;;}
    #slide_map .inner .binds > ul > li > div > ul > li > a::before{display:none;}
    #slide_map .inner .binds > ul > li > div > ul > li > ul{background:#F5F5F5; padding:16px 20px;}
    #slide_map .inner .binds > ul > li > div > ul > li > ul > li + li{margin-top:1.2rem;}
    #slide_map .inner .binds > ul > li > div > ul > li > ul > li > a{display:block; position:relative; padding-left:14px; font-size:15px;}
    #slide_map .inner .binds > ul > li > div > ul > li > ul > li > a::before{content:"•"; position:absolute; left:0; top:-1px; padding-right:8px;}
}
@media all and (max-width:768px){
    #slide_map .inner{width:350px;}
}
@media all and (max-width:375px){
    #slide_map .inner{width:100%;}
}

.hd_wrap{position: fixed; top: 0; left: 0; width: 100%;}

#headerBanner{position: relative; top: 0; left: 0; width: 100%; background-color: #2D3037; color: #fff; z-index: 12; transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: visible;}
#headerBanner.closed{height: 0;}
#headerBanner .banner_inner{max-width:calc(1440px + 40px + 140px); margin: 0 auto; padding: 0 20px;}
#headerBanner .banner_slide_wrap{display:flex; align-items: center; justify-content: center; position:relative; height: 12rem; overflow: hidden;}
#headerBanner .banner_slide{width: calc(100% - 18rem); overflow: hidden;}
#headerBanner .banner_slide .swiper-slide{height: 100%;}
#headerBanner .banner_content{padding:0 4rem;}
#headerBanner .banner_content .banner_text{display:block; position:relative; padding-left: 7rem;}
#headerBanner .banner_content .banner_text::before{content:""; display:block; position:absolute; left:0; top:50%; transform: translateY(-50%); width:5rem; height:6rem; background:url("../../../images/site/layout/symbol.svg") no-repeat 50% 50% / auto 92%;}
#headerBanner .banner_content .title{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; margin-bottom:0.6rem; font-size:1.7rem; font-weight:600;}
#headerBanner .banner_content .date{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.50); font-size:1.6rem;}
#headerBanner .banner_link{color: #EC6D3E; font-size: 1.6rem; font-weight: 500; text-decoration: none;}
#headerBanner .banner_link::after{content:""; display:inline-block; vertical-align: middle; width:1.2rem; height:1.2rem; margin-left:1rem; background:url("../../../images/site/layout/ico_banner_link.svg") no-repeat 50% 50% / auto 100%;}
#headerBanner .banner_link:hover{text-decoration: underline;}
#headerBanner .banner_slide_wrap .banner_prev_btn,
#headerBanner .banner_slide_wrap .banner_next_btn{position:absolute; top:50%; display:block; width:7rem; height:7rem; border-radius: 50%; border:1px solid rgba(255, 255, 255, 0.10); background:rgba(255, 255, 255, 0.10) url("../../../images/site/layout/ico_banner_arr.svg") no-repeat 50% 50% / cover; transform: translateY(-50%); transition: all .3s;}
#headerBanner .banner_slide_wrap .banner_prev_btn{left:0;}
#headerBanner .banner_slide_wrap .banner_next_btn{right:0; transform: translateY(-50%) rotate(0.5turn);}
#headerBanner .banner_slide_wrap .banner_prev_btn:hover,
#headerBanner .banner_slide_wrap .banner_next_btn:hover{background-color:#222;}

#headerBanner .banner_control{position:relative; display:flex; align-items: center; justify-content: flex-end; gap:1rem; padding:1rem 0; color:#aaa; font-size:1.7rem;}
#headerBanner .banner_control::after{content:""; display:block; position:absolute; left:50%; top:50%; width:100vw; height:100%; background:#111; transform: translate(-50%, -50%); z-index: -1;}
#headerBanner .banner_control input[type="checkbox"]{position:absolute; top:0; left:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); visibility: hidden; opacity: 0;}
#headerBanner .banner_control input[type="checkbox"] + label{position:relative; padding-left:3.2rem;}
#headerBanner .banner_control input[type="checkbox"] + label::before{content:""; display:block; position:absolute; left:0; top:50%; transform: translateY(-50%); width:2.4rem; height:2.4rem; border-radius: 0.4rem; border:1px solid #aaa; background:#fff;}
#headerBanner .banner_control input[type="checkbox"]:checked + label::before{border-color:#B62B5B; background:#B62B5B url("../../../images/site/layout/ico_check.svg") no-repeat 50% 50% / 2rem;}
#headerBanner .banner_control .banner_close{width:3.4rem; height:3.4rem; border-radius: 50%; background:url("../../../images/site/layout/ico_close.svg") no-repeat 50% 50% / 2.8rem; transition: all .35s;}
#headerBanner .banner_control .banner_close:hover{background-color:#222;}

#header .btn_banner_toggle{display:flex; align-items: center; justify-content: flex-end; position:absolute; right:0; top:0; width:100%; height:4rem; margin-left:-5rem; padding: 0 4rem; font-size: 1.6rem; font-weight: 500; background-color: #33363D; color: #fff; border: none; cursor: pointer; z-index: 15;}
#header .btn_banner_toggle::before{content:""; display:inline-block; vertical-align: middle; width:2.4rem; height:2.4rem; margin-right:0.6rem; background:url("../../../images/site/layout/ico_banner_close.svg") no-repeat 50% 50% / cover;}
#header .btn_banner_toggle.open::before{background:url("../../../images/site/layout/ico_banner_open.svg") no-repeat 50% 50% / cover;}

#header{position: sticky; top: 0; left: 0; width: 100%; z-index: 11; height:8.4rem; padding:0 2rem; background:#B62B5B; transition: top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);}
#header .inner{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; height:100%; width:100%; max-width:144rem; margin:0 auto;}
#header #logo{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; height: 100%;}
#header #logo>a{display: block; width:22.9rem; height:3.6rem; background:url("../../../images/site/layout/logo.svg") no-repeat 50% 50% / 100% auto;}
#header #nav{flex:1; overflow: hidden; height: 10rem;}
#header #nav #blind{position: absolute; top: 100%; left: 0; z-index: -1; width: 100vw; height: 0; background-color: #fff;}

#header #nav #gnb{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; height: 8.4rem;}
#header #nav #gnb>ul{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; width:100%; height: 100%;}
#header #nav #gnb>ul>li{position:relative; height: 100%;}
/* #header #nav #gnb>ul>li:last-child{display:none;} */
#header #nav #gnb>ul>li>a{position:relative; display:inline-block; height: 100%;}
#header #nav #gnb>ul>li>a::after{content:""; display:block; position:absolute; bottom:0; left:50%; transform: translateX(-50%); width:0%; height:0.2rem; background-color:#ED164C;}
#header #nav #gnb>ul>li>a>span{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; padding:0 3rem; color:#fff; font-size: 2rem; font-weight:600;}
#header #nav #gnb>ul>li>a.on>span{background:#fff; color:#333;}
#header #nav #gnb>ul>li>div{opacity: 0; position: absolute; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; top: calc(100% - 1px); left: 50%; width: 100%; border-top:1px solid #B62B5B; background:#fff; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
#header #nav #gnb>ul>li>div>ul{width:100%; padding:1.2rem;}
#header #nav #gnb>ul>li>div>ul>li{position: relative; z-index: 1;}
#header #nav #gnb>ul>li>div>ul>li>a{display:block; width:100%; padding:0.8rem 0; color: #333; font-size: 1.8rem; font-weight: 600; letter-spacing: 0.18px; text-align: center; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
#header #nav #gnb>ul>li>div>ul>li>a.on,
#header #nav #gnb>ul>li>div>ul>li>a:hover,
#header #nav #gnb>ul>li>div>ul>li>a:active{ color: #B62B5B;}
#header #nav #gnb>ul>li>div>ul>li>a[target="_blank"]::after{content:""; display:inline-block; vertical-align: middle; width:2rem; height:2rem; margin-left:0.4rem; background:url("../../../images/site/layout/ico_link1.svg") no-repeat 50% 50% / auto 100%;}
#header #nav #gnb>ul>li>div>ul>li>a[target="_blank"].on::after,
#header #nav #gnb>ul>li>div>ul>li>a[target="_blank"]:hover::after,
#header #nav #gnb>ul>li>div>ul>li>a[target="_blank"]:active::after{background:url("../../../images/site/layout/ico_link.svg") no-repeat 50% 50% / auto 100%;}
#header #nav #gnb>ul>li>div>ul>li>ul{width:100%; padding: 1.6rem 2rem 0;}
#header #nav #gnb>ul>li>div>ul>li>ul:after{content: ""; display: block; clear: both;}
#header #nav #gnb>ul>li>div>ul>li>ul>li{position:relative; padding-left:1.5rem;}
#header #nav #gnb>ul>li>div>ul>li>ul>li + li{margin-top:1rem;}
#header #nav #gnb>ul>li>div>ul>li>ul>li>a::before{content:""; display:block; position:absolute; left:0; top:0.9rem; width:0.4rem; height:0.4rem; border-radius: 50%; background:#58595B;}
#header #nav #gnb>ul>li>div>ul>li>ul>li>a{color: #464646; font-size: 1.6rem; font-weight:500; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
#header #nav #gnb>ul>li>div>ul>li>ul>li>a.on,
#header #nav #gnb>ul>li>div>ul>li>ul>li>a:hover,
#header #nav #gnb>ul>li>div>ul>li>ul>li>a:active{color: #ED164C;}
#header #nav #gnb>ul>li>div>ul>li>ul>li>a.on::before,
#header #nav #gnb>ul>li>div>ul>li>ul>li>a:hover::before,
#header #nav #gnb>ul>li>div>ul>li>ul>li>a:active::before{background-color: #ED164C;}
#header #nav #gnb>ul>li>div>ul>li>ul>li>a.on>span{text-decoration: underline;}
#header #nav #gnb>ul>li>div>ul>li>ul>li>a:hover>span{text-decoration: underline;}
#header #nav #gnb>ul>li>div>ul>li>ul>li>ul{display: none;}
#header #nav #gnb>ul>li>div>ul>li>ul>li>ul>li>ul{display: none;}

#header .toputil_control{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 2.4rem; height: 100%; padding-left: 2rem;}
#header .toputil_control .sns_list{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.8rem;}
#header .toputil_control .sns_list li{display: block; width: 3.2rem; height: 3.2rem;}
#header .toputil_control .sns_list li a{display: block; width: 100%; height: 100%; border-radius: 50%; background: url(../../../images/site/layout/h_img01.svg) no-repeat center center / 100% auto; text-indent: -9999px; transition: transform .3s ease, box-shadow .3s ease;}
#header .toputil_control .sns_list li a.sns_youtube{background-image: url(../../../images/site/layout/h_img02.svg);}
#header .toputil_control .sns_list li a.sns_insta{background-image: url(../../../images/site/layout/h_img03.svg);}
#header .toputil_control .sns_list li a.sns_facebook{background-image: url(../../../images/site/layout/h_img04.svg);}
#header .toputil_control .sns_list li a:hover{transform: translateY(-0.4rem); box-shadow: 0 8px 20px rgba(255, 255, 255, .2);}
#header .toputil_control .search_btn{display: block; position: relative; width: 2.4rem; height: 2.4rem; text-indent: -9999px; background: url(../../../images/site/layout/h_img06.svg) no-repeat center center / 100% auto; transition: .3s ease;}
#header .toputil_control .search_btn:hover{transform: scale(1.1) rotate(8deg);}

#header .toputil_control .lang_btn{display: block; position: relative; width: 3.3rem; height: 2.4rem; text-indent: -9999px;}
#header .toputil_control .lang_btn:before{content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 100%; transform: translateY(-50%) rotate(0deg); background: url(../../../images/site/layout/h_img08.svg) no-repeat center center / 100% auto; transition: transform .8s cubic-bezier(.22, 1, .36, 1);}
#header .toputil_control .lang_btn::after{content: ""; opacity: 0; position: absolute; top: 50%; left: -0.4rem; width: 100%; height: 100%; border-radius: 50%; transform: translateY(-50%) scale(.7) rotate(0deg); transition: opacity .35s ease, transform .8s cubic-bezier(.22, 1, .36, 1);}
#header .toputil_control .lang_btn:hover:after{opacity: 1; transform: translateY(-50%) scale(1.15) rotate(180deg);}
#header .toputil_control .allmenu_btn_open{display: inline-flex; align-items: center; justify-content: center; position: relative; width:4.8rem; height:4.8rem; border-radius: 50%; background:#8E153F; color: #000; font-weight: 600; text-decoration: none; text-indent: -9999px;}
#header .toputil_control .allmenu_btn_open span{display: block; position: relative; width: 2.4rem; height: 2.4rem; font-size: 0;}
#header .toputil_control .allmenu_btn_open span:before,
#header .toputil_control .allmenu_btn_open span:after,
#header .toputil_control .allmenu_btn_open span i{content: ""; position: absolute; right: 0; height: 2px; background-color: #fff; border-radius: 2rem; transition: width .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1), background .35s ease, box-shadow .35s ease;}
#header .toputil_control .allmenu_btn_open span:before{top: 0.4rem; width: 80%;}
#header .toputil_control .allmenu_btn_open span i{top: 50%; right: 0; width: 100%; transform: translateY(-50%);}
#header .toputil_control .allmenu_btn_open span:after{bottom: 0.5rem; width: 50%;}
#header .toputil_control .allmenu_btn_open:hover span:before{width: 80%;}
#header .toputil_control .allmenu_btn_open:hover span i{width: 50%;}
#header .toputil_control .allmenu_btn_open:hover span:after{width: 90%;}

/* header is_open (1024px 이상 전체메뉴 열림) */
#header.is_open{background:#fff; color:#151515;}
#header.is_open #blind{box-shadow:2px 14px 14px rgba(0,0,0,0.03);}
#header.is_open #logo>a{background-image:url("../../../images/site/layout/logo_color.svg");}
#header.is_open #nav #gnb>ul>li>a>span{justify-content: flex-start; width:20rem; color:#1a1a1a;}
#header.is_open #nav #gnb>ul>li>div{top: calc(100% - 24px); border-top:0;}
#header.is_open #nav #gnb>ul>li>div::before{content:""; display:block; position:absolute; bottom:0; width:1px; height:calc(100% + 3rem); background:#DDD;}
#header.is_open #nav #gnb>ul>li>div>ul{padding:1.2rem 3rem;}
#header.is_open #nav #gnb>ul>li>div>ul>li>a{padding:0.6rem 0; font-size:1.6rem; font-weight:500; text-align: left;}
#header.is_open .toputil_control .allmenu_btn_open{background:#fff; border:1px solid #151515;}
#header.is_open .toputil_control .allmenu_btn_open span{width:2rem; height:2rem;}
#header.is_open .toputil_control .allmenu_btn_open span:before,
#header.is_open .toputil_control .allmenu_btn_open span:after{top: 50%; width:100%; background-color: #151515;}
#header.is_open .toputil_control .allmenu_btn_open span:before{transform: translateY(-50%) rotate(45deg);}
#header.is_open .toputil_control .allmenu_btn_open span:after{transform: translateY(-50%) rotate(-45deg);}
#header.is_open .toputil_control .allmenu_btn_open span i{display:none;}

/*-------------------------------------------------------------------
    header_search (헤더 검색 영역)
-------------------------------------------------------------------*/
#header .header_search{position: absolute;top: 100%;left: 0;width: 100%;height: 0;overflow: hidden;background-color: #fff;border-bottom: 0 solid rgba(255, 255, 255, 0.08);transition: height 0.3s ease, border-bottom-width 0.3s ease;z-index: 99}
#header .header_search.active{height: 12rem;border-bottom-width: 1px}
#header .header_search .inner{display: flex;align-items: center;justify-content: center;height: 100%;max-width: calc(1440px + 4rem);margin: 0 auto;padding: 0 2rem;position: relative;}
#header .header_search .sch_box{display: flex;align-items: center;width: 60rem;height: 5.6rem;border-bottom: 2px solid #151515;}
#header .header_search input[type="text"]{flex: 1;height: 100%;background: transparent;border: none;outline: none;color: #151515;font-size: 2rem;font-weight: 500;padding: 0 1rem}
#header .header_search input[type="text"]::placeholder{color: rgba(255, 255, 255, 0.4)}
#header .header_search .btn_sch_submit{width: 3.2rem;height: 3.2rem;background: url(../../../images/site/layout/ico_search.svg) no-repeat center center / contain;text-indent: -9999px;cursor: pointer;border: none;outline: none}
#header .header_search .btn_sch_submit:focus{outline:2px solid #151515;outline-offset: 5px;}
#header .header_search .btn_sch_close{position: absolute;right: 4rem;top: 50%;transform: translateY(-50%);width: 3.2rem;height: 3.2rem;text-indent: -9999px;cursor: pointer;background: transparent;border: none;outline: none;transition: transform 0.3s ease}
#header .header_search .btn_sch_close::before,
#header .header_search .btn_sch_close::after{content: "";position: absolute;left: 50%;top: 50%;width: 2.4rem;height: 2px;background-color: #151515}
#header .header_search .btn_sch_close::before{transform: translate(-50%, -50%) rotate(45deg)}
#header .header_search .btn_sch_close::after{transform: translate(-50%, -50%) rotate(-45deg)}
#header .header_search .btn_sch_close:hover{transform: translateY(-50%) rotate(90deg)}
#header .header_search .btn_sch_close:focus{outline:2px solid #151515;outline-offset: 5px;}

@media (max-width: 1080px){
    #header .header_search.active{height: 10rem}
    #header .header_search .sch_box{width: 100%;max-width: 50rem;height: 4.8rem}
    #header .header_search input[type="text"]{font-size: 1.6rem}
    #header .header_search .btn_sch_close{right: 2rem}
}
@media (max-width: 640px){
    #header .header_search .inner{padding: 0 6rem 0 2rem}
    #header .header_search .sch_box{max-width: 100%}
    #header .header_search .btn_sch_close{right: 1.6rem}
}


/* header mouseover */

/* Container */
#container{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; position: relative; width: 100%; max-width: calc(1440px + 4rem); margin: 0 auto; padding: 0 20px;}

#container #remote{width: 24rem;}

#container #remote h2{width: 100%; line-height: 36px; padding: 35px 0; font-size: 30px; text-align: center; color: #fff; background: gray;}

#container #remote #lnb ul{width: 100%;}

#container #remote #lnb ul li{border-bottom: 1px solid #ebebeb;}

#container #remote #lnb ul li a{position: relative; display: block; padding: 17px 30px 17px 25px; text-decoration: none; font-size: 16px; color: #222;}

#container #remote #lnb ul li ul{display: none; padding: 20px 25px; background: #f7f7f7; box-sizing: border-box;}

#container #remote #lnb ul li ul li{margin-top: 7px; border-bottom: 0;}

#container #remote #lnb ul li ul li:first-child{margin-top: 0;}

#container #remote #lnb ul li ul li a{position: relative; display: inline-block; line-height: 19px; padding: 0 0 0 12px; border: 0; font-size: 15px; color: #222;}

#container #path{position: absolute; right: 0; margin-right: 0; height: 60px; top: -60px; z-index: 10; background: lightgray; width: 100%; padding: 0 2rem;}

#container #path:before{content: ""; display: block; width: 100%; height: 100%; background: lightgray; position: absolute; right: -100%; top: 0;}

#container #path:after{content: ""; display: block; width: 100%; height: 100%; background: lightgray; position: absolute; left: -100%; top: 0; clear: both;}

#container #path .navi{height: 100%; line-height: 60px;}

#container #path .navi:after{content: ""; display: block; clear: both;}

#container #path .navi > li{float: left; height: 100%;}

#container #path .navi > li.home{margin-right: 25px;}

#container #path .navi > li.home > a{height: 100%; width: 60px; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.2);}

#container #content{position: relative; width: 100%;}

#container #content #txt{height: auto; padding:4rem 0 11.4rem; color:#333; font-size: 1.7rem; line-height:1.5;}

#container #content #txt:has(.bottom_item){padding-bottom: 0;}

/* Footer */
#footer{position: relative; z-index: 2; padding: 0;}

#footer .bottom{background: #222; color:#fff;}
#footer .bottom .inner{width: 100%; max-width: calc(1440px + 4rem); margin: 0 auto; padding: 0 2rem; font-size:1.6rem;}

#footer .top{background:#fff; padding: 1rem 0; border-top:1px solid #ddd;}
#footer .top .inner{max-width:calc(144rem + 4rem); margin:0 auto; padding: 0 2rem;}

.site_slide_wrap{display: flex; align-items: center; width: 100%;}
.site_slide_header{display: flex; align-items: center; flex-shrink: 0;}
.site_slide_header .title{font-size: 1.6rem; font-weight: 700; color: #151515; margin-right: 2.4rem;}
.site_slide_ctrl{display: flex; align-items: center; gap: 0.6rem; margin-right: 2rem; flex-shrink: 0;}
.site_slide_ctrl button{display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; border:1px solid #E6E8EA; background-repeat: no-repeat; background-position:50% 50%; background-size:2rem; cursor: pointer; transition: all 0.2s ease; padding: 0; position: relative;}
.site_slide_ctrl .site_prev_btn{background-image: url(../../../images/site/layout/ico_prev_black.svg);}
.site_slide_ctrl .site_next_btn{background-image: url(../../../images/site/layout/ico_next_black.svg);}
.site_slide_ctrl .pause{background-image: url(../../../images/site/layout/ico_pause_black.svg);}
.site_slide_ctrl .play{background-image: url(../../../images/site/layout/ico_play_black.svg);}
.site_slide_ctrl button:hover{border-color: #333;}
 
.site_slide{flex: 1; min-width: 0; overflow: hidden;}
.site_slide .swiper-slide{width:auto;}
.site_slide .swiper-slide a{display: flex; align-items: center; justify-content: center; height: 4.6rem; background-color: #fff; text-align: center;}
.site_slide .swiper-slide a img{max-width:100%; max-height:100%; object-fit: cover;}

/* Responsive */
@media screen and (max-width: 768px){
    #footer .top{padding: 1.2rem 0;}
    /* .site_slide_wrap{flex-direction: column; align-items: stretch; gap: 1.2rem;} */
    /* .site_slide_header{justify-content: space-between; width: 100%;} */
    .site_slide_header .title{display:none;}
    .site_slide .swiper-slide a img{max-width:90%; object-fit: cover;}
    .site_slide_ctrl{margin-right: 0;}
}

#footer .bottom .inner .inner_t{display:flex; align-items: center; justify-content: space-between; padding:4rem 0 0;}
#footer .bottom .inner .inner_t::before{content:""; display:block; width:21rem; height:3.3rem; background:url("../../../images/site/layout/f_logo.png") no-repeat 50% 50% / auto 100%;}
#footer .bottom .inner .inner_t .menu_link{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 1rem 2.8rem; height: auto;}
#footer .bottom .inner .inner_t .menu_link >li{position:relative;}
#footer .bottom .inner .inner_t .menu_link >li:not(:last-child)::after{content:""; display:block; position:absolute; top:50%; right:-1.4rem; width:1px; height:1rem; background:rgba(255, 255, 255, 0.25); transform: translateY(-50%);}
#footer .bottom .inner .inner_t .menu_link >li:first-child{color:#FFA787;}
#footer .bottom .inner .inner_t .menu_link >li a:hover, 
#footer .bottom .inner .inner_t .menu_link >li:focus{text-decoration: underline;}
#footer .bottom .inner .inner_t .family_site{position: relative; width: 26rem; z-index: 100;}
#footer .bottom .inner .inner_t .family_site>a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; height: 4.8rem; padding: 0.8rem 1.2rem; border-radius: 0.6rem; border:1px solid #666666; font-size: 1.6rem; color: #fff}
#footer .bottom .inner .inner_t .family_site>a:after{content: ""; width:2rem; height:2rem; margin-left:auto; background:url("../../../images/site/layout/sel_icon.png") no-repeat 50% 50% / cover; opacity: 0.5;}
#footer .bottom .inner .inner_t .family_site>a.active:after{transform: rotate(180deg);}
#footer .bottom .inner .inner_t .family_site>ul{opacity: 0; visibility: hidden; overflow-y: auto; position: absolute; bottom: calc(100% + 4px); left: 0; width: 100%; height: auto; max-height: 14rem; background-color: #222; border: 1px solid #000; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; z-index: 1;}
#footer .bottom .inner .inner_t .family_site>a.active+ul{opacity: 1; visibility: visible; padding:0.8rem;}
#footer .bottom .inner .inner_t .family_site>ul>li:not(:first-child){margin-top: 0.6rem;}
#footer .bottom .inner .inner_t .family_site>ul>li>a{display: block; font-size: 1.6rem;}

#footer .bottom .inner .inner_b{padding:3.2rem 0 6rem;}
#footer .bottom .inner .inner_b .site_info{flex:1; position:relative;}
#footer .bottom .inner .inner_b .site_info > li{color:#8E9EAD; font-size:1.5rem;}
#footer .bottom .inner .inner_b .copy{margin-top:1.2rem; color:#6D7882;}

.bt_top{position:absolute;top:11rem;right:4rem;z-index:99;display:flex;align-items:center;justify-content:center; width:4.8rem; height:4.8rem;background:#B62B5B url("../../../images/site/layout/ico_top.svg") no-repeat 50% 50% /auto; border-radius:50%;font-size:1.2rem;font-weight:600;color:#fff;cursor:pointer;box-shadow: 0 0.4rem 1.2rem rgba(182, 43, 91, 0.5); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;}
.bt_top.is_show{opacity:1; visibility:visible; pointer-events:auto;}
.bt_top:hover{transform: translateY(-3px);}

@media screen and (min-width: 2000px){
    /* #header #nav #gnb>ul{gap:6rem;} */
}
@media screen and (max-width: 1620px){
    #headerBanner .banner_inner{padding:0 2rem;}
    #headerBanner .banner_content{padding:0 2.8rem;}
    #headerBanner .banner_content .date{font-size:1.6rem;}
    #headerBanner .banner_slide{width: calc(100% - 12rem);}
    #headerBanner .banner_slide_wrap .banner_prev_btn, #headerBanner .banner_slide_wrap .banner_next_btn{width:5rem; height:5rem;}

     .bt_top{top:5rem; right:2rem; width:48px; height:48px; background-size:50%;}
}
@media screen and (max-width: 1440px){
    #header{padding:0 2rem;}
    #header .toputil_control{gap:1.6rem;}
    #header .btn_banner_toggle{padding:0 2rem;}
}
@media screen and (max-width: 1024px){
    #header h1{left: 30px; margin-left: 0;}

    #header .toputil_control{right: 30px; margin-right: 0;}

    #header #nav #gnb{display: none;}

    #container #remote{display: none;}

    #container #content{padding-left: 0; min-height: auto;}

    #container #content #txt{padding-bottom:6rem;}

    #txt{min-height: 400px;}
}
@media screen and (max-width: 768px){
    /* #headerBanner{height:8.2rem;} */
    #headerBanner .banner_slide_wrap{height:8.2rem;}
    #headerBanner .banner_content .banner_text{padding-left:44px;}
    #headerBanner .banner_content .banner_text::before{width:30px; height:36px;}
    #headerBanner .banner_content .banner_text::after{content:"자세히보기+"; color:#fff; font-size:13px; opacity: 0.8;}
    #headerBanner .banner_content .title{margin-bottom:0; font-size:15px;}
    #headerBanner .banner_content .date{display:none;}
    #headerBanner .banner_slide_wrap .banner_prev_btn,
    #headerBanner .banner_slide_wrap .banner_next_btn{width:30px; height:40px; background-color:rgba(0,0,0,0); background-size:60px; border:none; opacity: 0.6;}
    #headerBanner .banner_slide_wrap .banner_prev_btn:hover,
    #headerBanner .banner_slide_wrap .banner_next_btn:hover{background-color:rgba(0,0,0,0);}
    #headerBanner .banner_control{padding:0.4rem 0;}
    #headerBanner .banner_control input[type="checkbox"] + label{font-size:14px;}
    #headerBanner .banner_control input[type="checkbox"] + label::before{width:16px; height:16px;}

    #header{height:64px;}
    #header #logo>a{width:150px; height:30px;}
    
    #headerBanner .banner_content{padding:0 0.4rem;}
    #headerBanner .banner_content .banner_text{display:block; margin-bottom:0.4rem;}
    #headerBanner .banner_slide{width:calc(100% - 10rem);}
    
    /* #footer{margin-top:60px;} */
    .site_slide{flex:none; width:100%;}
}
@media screen and (max-width: 678px){
    #footer .bottom .inner .inner_t{display:block; padding-top:24px;}
    #footer .bottom .inner .inner_t .family_site{width:100%; margin-top:2rem;}
    #footer .bottom .inner .inner_t .family_site>a{font-size:15px;}
    #footer .bottom .inner .inner_t .family_site>ul>li>a{font-size:14px;}
    #footer .bottom .inner .inner_b .site_info > li{font-size:15px;}
    #footer .bottom .inner .inner_b .copy{font-size:13px;}

    #helper_chat{right:0; bottom:0;  max-height: calc(100vh - 10rem); border-radius: 10px 10px 0 0;}
}

/*-------------------------------------------------------------------
    Sub Page Layout Styles (Only applied on .sub_page)
-------------------------------------------------------------------*/
.sub_page #wrap{padding-top: 8rem;}
.sub_page #header{height:8rem;padding-top:0;background-color: #ffffff;}
.sub_page #header #logo>a{background-image:url("../../../images/site/layout/logo_gray.svg");}
.sub_page #header .toputil_control .search_btn,
.sub_page #header .toputil_control .lang_btn:before{filter: brightness(0) invert(8%);}
.sub_page #header .toputil_control .allmenu_btn_open span:before,
.sub_page #header .toputil_control .allmenu_btn_open span:after,
.sub_page #header .toputil_control .allmenu_btn_open span i{background-color: #151515}