@charset "utf-8";

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

#MAIN_CONTAINER {color:#fff;}


.section .section-desc{line-height: 1.75}
.post-slider .posts .post-item .img img{padding-top: 106.9767441860465%;height: 0;}

#header .header-container{padding: 30px 35px}
.scroll-down{bottom: 110px}
.home-slider-indices .indices li .index h4{font-weight: 400}

#ourBusiness .business-desc-box .desc h2 span.m_ico{display: none}
#ourBusiness .business-desc-box a.m_click{display: none}
#ourBusiness .business-desc-box .desc .links a.btn_outlink{padding-right: 1.8rem; margin-right: 20px;}
#ourBusiness .business-desc-box .desc .links a.btn_outlink i{
    position: absolute;
    background: url("../../img/common/ico_outlink_black.svg") 50% 50% no-repeat;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    -webkit-background-size: contain;
    background-size: contain;
    top: 50%;
    right: 4px;
    opacity: .5;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
#ourBusiness .business-desc-box .desc .links a.btn_outlink:hover i{right: 0;opacity: 1}

#nowOn.section .now-on-desc .section-desc{margin-top: 0}
#nowOn .now-on-body .now-on-desc .post-slider-nav{margin-top: 3.5rem}
#nowOn .post-slider .posts .post-item .img {border: 1px solid #e5e5e5};

#extraInfo .extra-info-box .btn{margin-top: 3.5rem;margin-bottom: 3.5rem}
#homeCarousel .home-carousel .carousel-nav{pointer-events:none}
#homeCarousel .home-carousel .carousel-nav .carousel-nav-btns a.btn{pointer-events: all}
#homeCarousel .home-carousel .carousel-nav .carousel-nav-btns a.btn span{display:none;}

#BAND_BANNER {position:relative; width:100%; height:104px; background:#fff; }
#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: #e35b0a;
    -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:100px; right:100px; z-index: 99; display: none; }
#MAIN_FLOATING>div {display: inline-block;vertical-align: top;}
#MAIN_FLOATING .contents {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{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 .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: #e35b0a;
    -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}



#now-on-news-link {display: block; width: 472px;}


@media screen and (max-width: 1380px) {
    .section .section-title-sm {font-size:3rem}
    #now-on-news-link {width: 472px;}
}


@media screen and (max-width: 1280px) {
    .section .section-title-sm {font-size:2.59rem}
    #now-on-news-link {width: 380px;}
}

@media screen and (max-width: 1080px) {
    .scroll-down{bottom: 66px}
    #now-on-news-link {width: 330px;}

    #ourBusiness .business-desc-box .desc h2{padding-right: 17px;display: inline-block;margin-bottom: 5px}
    #ourBusiness .business-desc-box .desc h2:before{content: '';position: absolute;width: 10px;height: 16px;background:url("../../img/common/ico_arrow_white_right.png") no-repeat center / contain;right: 0;top: 50%;transform: translateY(-50%)}
    #ourBusiness .business-desc-box a.m_click{display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1}
    #ourBusiness .business-desc-box .desc{width: 90%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #ourBusiness .business-desc-box .desc .links{right: inherit;left: 2rem}
    #ourBusiness .business-desc-box.isClick .desc{z-index: 2}
    #ourBusiness .business-desc-box.isClick .desc:before{width: 100%}
    #ourBusiness .business-desc-box.isClick .desc .links{opacity: 1;visibility: visible;right: inherit;left: 3rem}
    #ourBusiness .business-desc-box.isClick .desc .links a{color: #333}
    #ourBusiness .business-desc-box.isClick .desc .links a svg path{fill:#333}
    #ourBusiness .business-desc-box.isClick .desc .links a.btn_outlink i{opacity: 1}

    .no-mobile .business-desc-box .desc h2{top: 0}
    .no-mobile .business-desc-box .desc{height: inherit;padding: 2rem}
    .no-mobile .business-desc-box .desc .links{margin-top: 0}
    .no-mobile .business-desc-box:hover .desc:before{width: 0}
    .no-mobile .business-desc-box:hover .desc h2{color: #fff;top: 0;margin-top: 0}
    .no-mobile .business-desc-box:hover .links{visibility: hidden;opacity: 0}
}
@media screen and (max-width: 1023px) {
    #extraInfo .row.row-half .col:first-child{margin-bottom: 90px}
    #extraInfo.section h2.section-title-sm{margin-bottom: 50px;}
    #extraInfo.section .section-desc{margin-bottom: 50px;}
    #extraInfo .extra-info-box .btn{margin: 0 0 50px;}
    #ourBusiness .business-desc-box .desc .links a.btn_outlink:hover i{right: 4px}
    #ourBusiness .business-desc-box .desc .links a.btn_outlink i{opacity: 1;width: 14px;height: 14px}
}

@media screen and (max-width: 766px){
    .section .section-title-sm {font-size:1.8rem;}
    #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:10vh !important; /* right: -15% !important; transform: translateX(-50%); */ left: 0px; right: 0;}
    #MAIN_FLOATING .contents .title{font-size: 20px;line-height: 28px;}
    #MAIN_FLOATING .contents .desc{font-size: 13px;line-height: 22px; /* height: 200px; */}
    #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;}

    #header.fixed .header-container {
        background: rgba(255, 255, 255, 0.9);
    }

    #extraInfo .row.row-half .col:first-child{margin-bottom: 50px}
    #extraInfo.section h2.section-title-sm{margin-bottom: 1.846153846153846rem}
    #extraInfo.section .section-desc{margin-bottom: 1.846153846153846rem;}
    #extraInfo .extra-info-box .btn{margin: 0 0 1.846153846153846rem;}

    #ourBusiness .business-desc-box .desc{padding: 15px 0 15px 15px }
    #ourBusiness .business-desc-box .desc h2 {margin-bottom:8px;}
    #ourBusiness .business-desc-box .desc .links a{font-size: 12px}
    #ourBusiness .business-desc-box.isClick .desc .links{left: 15px}
    #now-on-news-link {width: 355px;}

}

@media screen and (max-width: 640px) {
  /*  #MAIN_FLOATING{right: -25% !important;}*/
}

@media screen and (max-width: 425px) {
 	/*#MAIN_FLOATING{right: -40% !important;}*/
}

@media screen and (max-width: 400px) {
	/*#MAIN_FLOATING{right: -45% !important;}*/
}

@media screen and (max-width: 360px) {
	/*#MAIN_FLOATING{right: -50% !important;}*/
}

@media screen and (max-width:335px) {
    .business-desc-box .desc .links a {margin-right:0;}
    #ourBusiness .business-desc-box .desc .links {left:15px;}
    #now-on-news-link {width: 236px;}
}