@charset "utf-8";

@import url(contents/btn.css);
@import url(contents/grid.css);
@import url(contents/layout.css);
@import url(contents/section.css);
@import url(contents/home-category.css);
@import url(contents/home-category-spec.css);
@import url(contents/home-slider.css);
@import url(contents/page-home.css);
@import url(contents/post-slider.css);
@import url(contents/anim-layout.css);

#MAIN_CONTAINER {color:#fff;background-color: #141414;}

#header .header-container{background-color: transparent}
#WRAP.isTopBanner #header {top:100px; position:absolute;}
#WRAP.isTopBanner.gnbFix #header {top:0; position:fixed;}

.container{margin-top: 0}

#BAND_BANNER {position:relative; width:100%; height:104px; background:#fff; display:none;}
#BAND_BANNER .banner_inner {position:relative; display: block; width:100%; height:100%; margin:0 auto; max-width:1600px; }
#BAND_BANNER .banner_inner .thumb {position:relative; display: block; width:100%; height:100%;}
#BAND_BANNER .btns {display: block; position:absolute; right:38px; top:50%; transform:translateY(-50%);}
#BAND_BANNER .btns a.btn_notToday{color: #666;padding-left: 28px; font-size:14px; line-height:40px;}
#BAND_BANNER .btns a.btn_notToday:before{content: '';position:absolute; top:50%; transform:translateY(-50%); left:0; display: inline-block;vertical-align: middle;width: 18px;height: 18px;border: 1px solid rgba(0,0,0,.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#BAND_BANNER .btns a.btn_notToday.on:after{content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    left: 4px;
    top: 50%;
    background: #007acc;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);}
#BAND_BANNER .btns:after{content: "";
    position: relative;
    top: 0;
    display: inline-block;
    width: 1px;
    height: 40px;
    background-color: #bababa;
    vertical-align: top;
    margin: 0 44px 0 30px;}

#BAND_BANNER .btns a.btn_close{width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);}
#BAND_BANNER .btns a.btn_close img{width:100%;}

#MAIN_FLOATING {position:absolute; top:0; left:0; z-index: 99; display: none;}
#MAIN_FLOATING>div {display: inline-block;vertical-align: top;}
#MAIN_FLOATING .contents {/* width:320px; */ background-color:#fff; display: inline-block;padding:0 16px;overflow: hidden;margin: 30px 10px;vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#MAIN_FLOATING .contents .title {text-align: left; width:100%;line-height:32px; font-size:24px; color:#000;padding: 35px 10px 15px; box-sizing: border-box;}
#MAIN_FLOATING .contents .title a {color:inherit;}
#MAIN_FLOATING .contents .desc{/* height: 180px; */ text-align: left; font-size: 16px;line-height: 28px;color: #444;overflow: hidden;position: relative;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0 10px;}
#MAIN_FLOATING .contents .desc .custom_scroll_content{ position: relative;overflow: scroll;overflow-x: hidden;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 97%;}
#MAIN_FLOATING .contents .desc a.link{display:inline-block; width:14px; height:14px; background:url('../../img/common/icon/ico_outlink_black.png') no-repeat center / cover; margin-left:8px; vertical-align: middle;}
#MAIN_FLOATING .contents .desc .pane { position: absolute;width: 5px;right: 0;top: 0;bottom: 0;opacity: 1; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s;}
#MAIN_FLOATING .contents .desc .pane > .slider{position: relative; margin: 0 1px; padding:5px 0;  box-sizing: border-box;}
#MAIN_FLOATING .contents .desc .pane > .slider:after{content:""; display: block; width:100%; height:100%; background:rgba(0,0,0,0.6);}
#MAIN_FLOATING .contents .desc .custom_scroll_content:hover > .pane,
#MAIN_FLOATING .contents .desc .pane.active,
#MAIN_FLOATING .contents .desc .pane.flashed{visibility : visible; opacity: 0.99;}
#MAIN_FLOATING .contents .btns {width:100%; text-align: right; height:55px; line-height:55px; border-top:1px solid rgba(0,0,0,.1); font-size:0;padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#MAIN_FLOATING .contents .btns a {display: inline-block; font-size:14px;}
#MAIN_FLOATING .contents .btns a.btn_notToday{float: left;color: #666;padding-left: 28px;position: relative}
#MAIN_FLOATING .contents .btns a.btn_notToday:before{content: '';position:absolute;top:50%;left:0; transform: translateY(-50%); display: inline-block;vertical-align: middle;width: 18px;height: 18px;border: 1px solid rgba(0,0,0,.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#MAIN_FLOATING .contents .btns a.btn_notToday.on:after{content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    left: 4px;
    top: 50%;
    background: #007acc;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
#MAIN_FLOATING .contents .btns a.btn_close{float: right;}
#MAIN_FLOATING .contents .btns a.btn_close:before {content:""; display: inline-block; ;width: 15px;height: 15px;background:url("../../img/main/ico_close_black.png") no-repeat 0 0 / contain; margin-left:5px;vertical-align: text-top;margin-top:2px}
#MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a{font-size: 14px;line-height: 28px;color: #444}
#MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a span{padding-right: 25px}
#MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a span:before{width: 18px;height: 18px;margin-top: -9px}

#VIDEO_POPUP .pop_contents {padding:0; margin:0 auto; max-width:1318px; width:100%; min-height:inherit; background-color:transparent;}
#VIDEO_POPUP .pop_contents .pop_video_mp4 {padding:0 50px;}
#VIDEO_POPUP .pop_contents .pop_video_mp4 video {width:100%;}
#VIDEO_POPUP .pop_contents .pop_video_youtube {position:relative; width:100%; height:100%; padding-bottom:56.25%;}
#VIDEO_POPUP .pop_contents .pop_video_youtube iframe {position:absolute; top:0; left:50px; width:calc(100% - 100px); height:100%;}
#VIDEO_POPUP .pop_inner .btn_close_pop {top:0; right:20px;}

#specialMedia .row .col-12 {width:100%;}

.post-slider .posts .post-item .img{background-color:transparent; border: 1px solid #e5e5e5;}

/*popSwiper*/
#MAIN_FLOATING .contents{margin:0;}
#MAIN_FLOATING .contents .desc{padding: 10px 10px 0px;}
#MAIN_FLOATING .contents .title{padding:10px 10px 15px;}
#MAIN_FLOATING .contents .btns{height:40px; line-height:1; border-top:0; padding:0 20px; display:flex; flex-wrap:wrap; justify-content: end;}
#MAIN_FLOATING .contents .btns .area{display:flex; flex-wrap:wrap; align-items:center; flex:0 0 50%; gap:20px;}
#MAIN_FLOATING .contents .btns .area + .area{justify-content:right;}
#MAIN_FLOATING .contents .btns a{display:flex; flex-wrap:wrap; align-items:center;}
#MAIN_FLOATING .contents .btns a.btn_close span{color:#000;}
#MAIN_FLOATING .contents .btns a.btn_close:before{margin-top:0; margin-left:0; margin-right:5px; width:18px; height:18px;}
#MAIN_FLOATING .swiper.popSwiper .swiper {width:100%; height:auto;}
#MAIN_FLOATING .swiper.popSwiper .swiper-slide{text-align: center; font-size: 18px; background:#fff; display: flex; justify-content: center; align-items: center;}
#MAIN_FLOATING .swiper.popSwiper .swiper-slide img { display:block; width:100%; height:100%; object-fit:cover; }
#MAIN_FLOATING .btns .swiper-pagination-bullet {width:12px; height:12px; }
#MAIN_FLOATING .btns .swiper-pagination-bullet-active {background:#000; }
#MAIN_FLOATING .btns .swiper-pagination {width:auto; position:relative; bottom:0;}
#MAIN_FLOATING .btns button{width:16px; height:16px;}
#MAIN_FLOATING .btns button[aria-pressed="true"] {background:url('../../img/main/ico_popswiper_stop.png') 50% no-repeat;}
#MAIN_FLOATING .btns button[aria-pressed="false"] {background:url('../../img/main/ico_popswiper_play.png') 50% no-repeat;}
#MAIN_FLOATING .contents .btns a.btn_notToday,
#MAIN_FLOATING .contents .btns a.btn_close{float:none; clear:both;}
					  

@media all and (max-width: 1080px) {
    #BAND_BANNER .btn_close{right: 40px}

}

@media all and (max-width: 766px) {
    #BAND_BANNER{height:100px;}
    #BAND_BANNER .banner_inner{height:100px;}
    #BAND_BANNER .btns{position:absolute; text-align:right; right:30px; bottom:8px; top:inherit; transform:none;}
    #BAND_BANNER .btns:after{height:15px; margin: 0 27px 0 13px; vertical-align:middle;}
    #BAND_BANNER .btn_close{width: 12px;height: 12px;top: 50%; right: 16px; display:inline-block;}
    #BAND_BANNER .btn_close img {width:100%;}
    #BAND_BANNER .btns a.btn_notToday{font-size:11px; padding-left:24px;  position: relative; line-height:24px;}
    #BAND_BANNER .btns a.btn_notToday:before{width:16px;height:16px; }
    #BAND_BANNER .btns a.btn_notToday.on:after{width:8px; height:8px; }

    #MAIN_FLOATING{top:25vh !important; left:2.5vw !important;/* left: 50% !important;;transform: translateX(-50%); */}
    #MAIN_FLOATING .contents .title{font-size: 20px;line-height: 28px;}
    #MAIN_FLOATING .contents .desc{font-size: 13px;line-height: 22px}
    #MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a{font-size: 12px;line-height: 23px}
    #MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a span{padding-right: 20px}
    #MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a span:before{width: 16px;height: 16px;margin-top: -8px;}
    #MAIN_FLOATING .contents .btns a {font-size:11px;}

    #VIDEO_POPUP .pop_contents .pop_video_mp4 {padding:0 32px;}
    #VIDEO_POPUP .pop_contents .pop_video_youtube iframe {left:16px; width:calc(100% - 32px)}
    #VIDEO_POPUP .pop_inner .btn_close_pop {top:-30px; right:30px;}
    
    #MAIN_FLOATING .contents .btns .area{flex:0 0 auto;}
    #MAIN_FLOATING .contents .desc{width:95vw;}
    #MAIN_FLOATING .contents .desc .custom_scroll_content{display:block; height:330px;}
    #MAIN_FLOATING .contents .desc .custom_scroll_content p{overflow-wrap:break-word; white-space:normal;}
}