a:focus,input:focus{outline:none;}

/* key visual_ver.1 */
.gu_kv{position: relative;}
.gu_kv .sec_inner{position: relative;margin: 0 auto;height: 400px}
.gu_kv .sec_inner .copy_area{position: absolute;top:50%;left: 0;right:0;text-align: center;transform:translateY(-50%);z-index: 1}
.gu_kv .sec_inner .copy_area h2{font-size: 52px;color: #fff;letter-spacing: -1px;line-height: 58px;}
.gu_kv .sec_inner .copy_area .sub_copy{font-size: 16px;line-height:28px;color: #fff;margin-top: 30px;letter-spacing: -0.5px}
.gu_kv .sec_inner .copy_area .btn_area{margin-top: 48px;font-size: 0;}
.gu_kv .sec_inner .copy_area .btn_area .gu_kv_btn{display: inline-block;vertical-align: top;margin: 0 8px}
.gu_kv .kv_img_box{position:absolute; top:0; left:0; right:0; height:400px;}
.gu_kv .kv_img_area{position: absolute;top: 0;left: 0;right: 0;height:100%;}
.gu_kv .kv_img_area:before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.4)}
/* 구조

<div id="SUB_KEYVISUAL" class="gu_kv">
    <div class="sec_inner">
        <div class="copy_area">
            <h2 class="en_plain_b">타이틀</h2>
            <div class="sub_copy">서브카피 있을경우</div>
            <!-- 버튼이 있을때 : 1개일때는 a태그 한개만 사용 -->
            <!-- 버튼이 없을때는 아래 영역을 지워준다 -->
            <div class="btn_area">
                <a href="#" class="gu_kv_btn gu_btn_outlink" target="_blank" th:title="#{common.a.title.outlink}"><span>아웃링크 버튼명</span></a>
                <a href="#" class="gu_kv_btn gu_btn_down"><span>다운로드 버튼명</span></a>
            </div>

        </div>
    </div>
    <div class="kv_img_box">
        <div class="kv_img_area"></div>
    </div>
</div>
 */

/* key visual_ver.2 */
.gu_no_kv{position: relative;}
.gu_no_kv .sec_inner{position: relative;margin: 0 auto;height: 240px;background: #f5f5f5}
.gu_no_kv .sec_inner .copy_area{position: absolute;top:50%;left: 0;right:0;text-align: center;transform:translateY(-50%);z-index: 1}
.gu_no_kv .sec_inner .copy_area h2{font-size: 52px;color: #222;letter-spacing: -1px;line-height: 58px;}
/* 구조

<div id="SUB_KEYVISUAL" class="gu_no_kv">
    <div class="sec_inner">
        <div class="copy_area">
            <h2 class="en_plain_b">타이틀</h2>
        </div>
    </div>
</div>
 */

/* key visual_ver.video */
.gu_kv .kv_img_box.video{overflow:hidden;}
.gu_kv .kv_img_box.video video{width:100%;min-width:1600px; height:auto; position:absolute;top:50%;left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.gu_kv .kv_img_box.video:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4);}
/* 구조
<div id="SUB_KEYVISUAL" class="gu_kv">
    <div class="sec_inner">
        <div class="copy_area">
            <h2 class="en_plain_b">타이틀</h2>
            <div class="sub_copy">서브카피 있을경우</div>
            <!-- 버튼이 있을때 : 1개일때는 a태그 한개만 사용 -->
            <!-- 버튼이 없을때는 아래 영역을 지워준다 -->
            <div class="btn_area">
                <a href="#" class="gu_kv_btn gu_btn_outlink" target="_blank" th:title="#{common.a.title.outlink}"><span>아웃링크 버튼명</span></a>
                <a href="#" class="gu_kv_btn gu_btn_down"><span>다운로드 버튼명</span></a>
            </div>
        </div>
    </div>
    <div class="kv_img_box video">
        <video muted="true" autoplay="true" loop="true" playsinline="true" webkit-playsinline="true" preload="" src="비디오 경로" poster="포스터 경로"></video>
    </div>
</div>
*/


/* INDICATOR */
.gu_indicator{position: absolute;top: 30px;right: 36px;text-align: right; z-index:1;}
.gu_indicator .indicator_inner{overflow: hidden;letter-spacing: -.1px;}
.gu_indicator .indicator_inner a{display: inline-block;position: relative;font-size: 13px; line-height:15px;color:#555;margin: 0 8px;letter-spacing: -0.5px; margin:0 10px; transition: opacity 0.2s;}
.gu_indicator .indicator_inner a:hover, .gu_indicator .indicator_inner a:hover span{color:#aaa;}
.gu_indicator .indicator_inner a:before{content: '';display: inline-block;width:5px;height:5px;vertical-align: middle;pointer-events: none;position: absolute;left: -18px;top: 50%;border-top: 1px solid #222;border-right: 1px solid #222;transform: rotate(45deg) translateY(-50%)}
.gu_indicator .indicator_inner a:first-child:before{display: none}
.gu_indicator .indicator_inner a:last-child{margin-right: 0}

/* depth 3 tab_ver.1 */
.gu_tab_depth3{position: relative; text-align: center;margin:0 auto;background: #1a1a1a;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.gu_tab_depth3 ul{font-size: 0;width: 100%;height: 80px;position:relative;overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.gu_tab_depth3 ul li{display: inline-block;position: relative;vertical-align: top;margin-right: 28px;height: 80px;}
.gu_tab_depth3 ul li:last-child{margin-right:0;}
.gu_tab_depth3 ul li:before{content: '';display:inline-block;vertical-align:sub;width: 1px;height: 16px;background: rgba(255,255,255,.2);margin-right: 28px;line-height: 80px}
.gu_tab_depth3 ul li:first-child:before{display: none}
.gu_tab_depth3 ul li a{display: inline-block;position: relative;color: #999;font-size: 18px;line-height: 80px;transition: color 0.3s}
.gu_tab_depth3 ul li a:before{content: '';position: absolute;bottom: 0;left: 0;right: 0;width: 0;height: 4px;background: #da450d;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}
.gu_tab_depth3 ul li.on a{color: #fff}
.gu_tab_depth3 ul li.on a:before{width: 100%}
.gu_tab_depth3 ul li a:hover:before{width: 100%}
.gu_tab_depth3 ul li a:hover{color: #fff}

.gu_tab_depth3:before{content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 80px; z-index: 9;pointer-events:none;
    background: -webkit-linear-gradient(to right, rgba(34,34,34,1), rgba(34,34,34,0));
    background: -moz-linear-gradient(to right, rgba(34,34,34,1), rgba(34,34,34,0));
    background: -ms-linear-gradient(to right, rgba(34,34,34,1), rgba(34,34,34,0));
    background: -o-linear-gradient(to right, rgba(34,34,34,1), rgba(34,34,34,0));
    background: linear-gradient(to right, rgba(34,34,34,1), rgba(34,34,34,0));}
.gu_tab_depth3:after{content: ''; position: absolute; top: 0; right: 0; width: 20px; height: 80px; z-index: 9;pointer-events:none;
    background: -webkit-linear-gradient(to left, rgba(34,34,34,1), rgba(34,34,34,0));
    background: -moz-linear-gradient(to left, rgba(34,34,34,1), rgba(34,34,34,0));
    background: -ms-linear-gradient(to left, rgba(34,34,34,1), rgba(34,34,34,0));
    background: -o-linear-gradient(to left, rgba(34,34,34,1), rgba(34,34,34,0));
    background: linear-gradient(to left, rgba(34,34,34,1), rgba(34,34,34,0));}
/* 구조
<div class="gu_tab_depth3">
    <ul>
        <li class="on"><a href="javascript:;">메뉴1</a></li>
        <li><a href="javascript:;">메뉴22</a></li>
        <li><a href="javascript:;">메뉴333</a></li>
        <li><a href="javascript:;">메뉴4444</a></li>
    </ul>
</div>
 */

/* depth 3 tab_ver.2 */
.gu_tab_depth3.gu_ver_white{background: #f5f5f5;}
.gu_tab_depth3.gu_ver_white ul li:before{background: rgba(0,0,0,.2);}
.gu_tab_depth3.gu_ver_white ul li a{color: #666;}
.gu_tab_depth3.gu_ver_white ul li.on a{color: #222}
.gu_tab_depth3.gu_ver_white ul li a:hover{color: #222}

.gu_tab_depth3.gu_ver_white:before{
    background: -webkit-linear-gradient(to right, rgba(245,245,245,1), rgba(245,245,245,0));
    background: -moz-linear-gradient(to right, rgba(245,245,245,1), rgba(245,245,245,0));
    background: -ms-linear-gradient(to right, rgba(245,245,245,1), rgba(245,245,245,0));
    background: -o-linear-gradient(to right, rgba(245,245,245,1), rgba(245,245,245,0));
    background: linear-gradient(to right, rgba(245,245,245,1), rgba(245,245,245,0));}
.gu_tab_depth3.gu_ver_white:after{
    background: -webkit-linear-gradient(to left, rgba(245,245,245,1), rgba(245,245,245,0));
    background: -moz-linear-gradient(to left, rgba(245,245,245,1), rgba(245,245,245,0));
    background: -ms-linear-gradient(to left, rgba(245,245,245,1), rgba(245,245,245,0));
    background: -o-linear-gradient(to left, rgba(245,245,245,1), rgba(245,245,245,0));
    background: linear-gradient(to left, rgba(245,245,245,1), rgba(245,245,245,0));}
/* 구조
<div class="gu_tab_depth3 gu_ver_white">
    <ul>
        <li class="on"><a href="javascript:;">메뉴1</a></li>
        <li><a href="javascript:;">메뉴22</a></li>
        <li><a href="javascript:;">메뉴333</a></li>
        <li><a href="javascript:;">메뉴4444</a></li>
    </ul>
</div>
 */



/* 4뎁스 텝 */
.gu_tab_depth4{position: relative;text-align: center; margin:0 auto 60px;width: 100%}
.gu_tab_depth4:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #d2d2d2;
    bottom: 0;
    left: 0;
}
.gu_tab_depth4 ul li{position: relative; vertical-align: middle;height: 68px;line-height: 68px; float:left;}
.gu_tab_depth4 ul:after{content:''; display:block; clear:both;}

.gu_tab_depth4 ul li a{display: block;position: relative;color: rgba(0,0,0,.42);font-size: 18px;width: 100%;height: 100%;transition: all .2s; padding-bottom: 28px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.gu_tab_depth4 ul li.line2 a{line-height: 20px;padding-top: 12px; letter-spacing:-0.5px;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -ms-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}
.gu_tab_depth4 ul li a:before{content: '';position: absolute;bottom: 0;left: 0;right: 0;width: 0%;height: 4px;background: #da450d;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}
.gu_tab_depth4 ul li.on a{color: #222;}
.gu_tab_depth4 ul li.on a:before{width: 100%}
.gu_tab_depth4 ul li a:hover{color: #222}
/*
 그라데이션
.gu_tab_depth4:before{content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 68px; z-index: 9;pointer-events:none;
    background: -webkit-linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    background: -moz-linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    background: -ms-linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    background: -o-linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));}
.gu_tab_depth4:after{content: ''; position: absolute; top: 0; right: 0; width: 20px; height: 68px; z-index: 9;pointer-events:none;
    background: -webkit-linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    background: -moz-linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    background: -ms-linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    background: -o-linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));}
*/


/* 구조 : .gu_tab_depth4 ul li의 width는 li의 갯수에 맞게 조정 / li가 2줄일때 line2클래스 추가 / a href는 풀주소 입력
<div class="gu_tab_depth4">
    <ul>
        <li class="hash_depth4도메인참고1 on"><a th:href="#depth4 도메인참고1">탭1</a></li>
        <li class="hash_depth4도메인참고2 line2"><a th:href="#depth4 도메인참고2">탭2</a></li>
        <li class="hash_depth4도메인참고3 "><a th:href="#depth4 도메인참고3">탭3</a></li>
    </ul>
</div>
 */

/* depth4 contents */
.gu_contents_depth4_area{}
.gu_contents_depth4_area .gu_contents_depth4{display: none}
.gu_contents_depth4_area .gu_contents_depth4.on{display: block}
/*  구조
<div class="gu_contents_depth4_area">
    <div class="gu_contents_depth4 depth4 도메인참고1 on"></div>
    <div class="gu_contents_depth4 depth4 도메인참고2"></div>
    <div class="gu_contents_depth4 depth4 도메인참고3"></div>
</div>

*/




/* 탭 스크롤바 */
.gu_tab_depth3 ul::-webkit-scrollbar,.gu_tab_depth4 ul::-webkit-scrollbar{width:0;height:5px;}
.gu_tab_depth3 ul::-webkit-scrollbar-track,.gu_tab_depth4 ul::-webkit-scrollbar-track{background-color: transparent;}
.gu_tab_depth3 ul::-webkit-scrollbar-track-piece,.gu_tab_depth4 ul::-webkit-scrollbar-track-piece{background-color: transparent;}
.gu_tab_depth3 ul::-webkit-scrollbar-thumb{background-color: transparent;border-bottom:4px solid rgba(255,255,255,0.5);}
.gu_tab_depth4 ul::-webkit-scrollbar-thumb{background-color: transparent;border-bottom:4px solid rgba(0,0,0,0.2);}
.gu_tab_depth3 ul::-webkit-scrollbar-button:start,.gu_tab_depth4 ul::-webkit-scrollbar-button:start{background-color: transparent;}
.gu_tab_depth3 ul::-webkit-scrollbar-button:end,.gu_tab_depth4 ul::-webkit-scrollbar-button:end{background-color: transparent;}
.gu_tab_depth3 ul,.gu_tab_depth4 ul{
    /* ie */
    scrollbar-face-color: #dfdfdf;
    scrollbar-base-color: #fff;
    scrollbar-track-color: #fff;
    scrollbar-arrow-color: #fff;
    scrollbar-highlight-color: #fff;
    scrollbar-3dlight-color: #fff;
    scrollbar-shadow-color: #fff;
    scrollbar-darkshadow-color: #fff;
}


/* contents area */
.gu_sub_wrapper{overflow:hidden; }
.gu_sub_wrapper .gu_sub_contents{position: relative;}
.gu_sub_wrapper .gu_sub_contents .contents_inner{max-width: 960px;margin: 0 auto;padding-top: 60px}
.container .container_inner .gu_sub_wrapper .gu_sub_contents .contents_inner.except{max-width:100%;}
.gu_sub_wrapper .gu_sub_contents .contents_inner.except .section,
.gu_sub_wrapper .gu_sub_contents .contents_inner.except .section_top{max-width:1116px; margin:0 auto;}
.gu_sub_wrapper .gu_sub_contents .contents_inner.except.video .video_box .gu_video_box{max-width:960px; margin:0 auto;}
.gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table,
.gu_sub_wrapper .gu_sub_contents .contents_inner.except.video .video_box{max-width:100%; background:#f5f5f5;}
.gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner{max-width:1116px; margin:0 auto;}
.gu_sub_wrapper .gu_sub_contents .contents_inner.except.video .video_box > p{padding:120px 0 60px; margin-top:160px;}
.gu_sub_wrapper .gu_sub_contents .contents_inner .contents_title{margin-top: 100px;margin-bottom: 60px;text-align: center;font-size: 40px;line-height: 46px;letter-spacing: -1px}
.gu_sub_wrapper .gu_sub_contents .contents_inner .contents_sub_copy{font-size: 18px;line-height: 28px;}
.gu_sub_wrapper .gu_sub_contents .contents_inner .contents_sub_text{font-size: 16px;line-height: 30px;}
.gu_sub_wrapper .gu_sub_contents .contents_inner .contents_img{margin: 100px auto}
.gu_sub_wrapper .gu_sub_contents .contents_inner img.img_m{display:none;}
.gu_sub_wrapper .gu_sub_contents .contents_inner .contents_img > img{width:100%;}


/* -----------------------------------------------------------------------------------------
 기능 guide
 */

/* swiper */
.gu_swiper{margin-top: 60px}
.gu_swiper .swiper-container .swiper-slide {opacity:0 !important;}
.gu_swiper .swiper-container .swiper-slide-active, .gu_swiper .swiper-container .swiper-slide-active .swiper-slide-active {opacity:1 !important;}
.gu_swiper .swiper-container .swiper-slide > div{height:100%;}
.gu_swiper .swiper-container .swiper-slide .title{font-size: 20px;line-height: 34px; margin-top: 40px; padding-top: 40px; background:#fff;}
.gu_swiper .swiper-container .direction_area{position: absolute;width: 100%;font-size: 0;top: 0;}

.gu_swiper .swiper-container .direction_area img{width: 100%;}
.gu_swiper .swiper-container .direction_area>li{display:inline-block; vertical-align:middle;}
.gu_swiper .swiper-container .direction_area .slide_empty {position:relative; margin-bottom: 44px; width:100%;}
.gu_swiper .swiper-container .direction_area .slide_empty .over_area {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; padding:15px; box-sizing: border-box; font-size:0;}
.gu_swiper .swiper-container .direction_area .slide_empty .over_area a {display: inline-block; width:50%; height:100%; font-size:0;}
.gu_swiper .swiper-container .direction_area .slide_empty .over_area a.over_r {left:50%;}

.gu_swiper .swiper-container .direction_area .slide_empty .over_area a.over_l:hover {cursor:url("../../img/common/btn_gallery_slide_prev.jpg") 20 20, auto; }
.gu_swiper .swiper-container .direction_area .slide_empty .over_area a.over_r:hover {cursor:url("../../img/common/btn_gallery_slide_next.jpg") 20 20, auto;}

.gu_swiper .swiper-container .direction_area .swiper-pagination{position: relative;width: 50px;padding-right: 50px;font-size: 14px;color: #949494;}
.gu_swiper .swiper-container .direction_area .swiper-pagination .swiper-pagination-current{color:#000;}

.gu_swiper .swiper-container .direction_area .swiper-progress{height: 2px;position: relative;width: calc(100% - 214px);border-radius: 0;background: rgba(0, 0, 0, 0.1);overflow: hidden;margin-top: -15px;}
.gu_swiper .swiper-container .direction_area .swiper-progress .progress_thumb{background:#000;height:100%;width:0;}

.gu_swiper .swiper-container .direction_area .btn_arrow{margin-top: -15px;}

.gu_swiper .swiper-container .direction_area .btn_arrow > div{width: 10px;height: 16px;position: relative;margin-top: 0;display: inline-block;vertical-align: middle;top: 0;left: 0;outline:none;}
.gu_swiper .swiper-container .direction_area .btn_arrow > div:before{content: ''; position: absolute; top: 50%; left: 50%; padding: 20px; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.gu_swiper .swiper-container .direction_area .swiper-button-prev{margin-left: 50px;background: url('../../img/common/ico_arrow_black_right.png') no-repeat center / contain;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}

.gu_swiper .swiper-container .direction_area .swiper-button-next{background: url('../../img/common/ico_arrow_black_right.png') no-repeat center / contain;margin-left: 44px;}
.gu_swiper .swiper-container .btn_cursor{position: fixed; pointer-events: none; z-index: 2;width:40px;height:40px;}
.gu_swiper .swiper-container .direction_area .swiper-pagination {font-size: 16px}
.gu_swiper .swiper-container .direction_area .swiper-pagination .pagination_etc{margin: 0 10px}

.visual_area.attachment{text-align:center;}
.visual_area.attachment .gu_swiper{max-height:480px;}
.visual_area.attachment .gu_swiper .swiper-container{height:100%;}
.visual_area.attachment .gu_swiper .swiper-container .swiper-wrapper{width:100%; height:100%;}
.visual_area.attachment .gu_swiper .swiper-container .swiper-wrapper:before{background:transparent;}
.visual_area.attachment .gu_swiper .swiper-container .swiper-wrapper .swiper-slide{height:100%;}
.visual_area.attachment .gu_swiper .swiper-container .swiper-wrapper .swiper-slide > div{background-repeat: no-repeat; background-size: contain; background-position-x: 50%; background-color:#f5f5f5;}
.visual_area.attachment .gu_swiper .swiper-container .direction_area{}
.visual_area.attachment .gu_swiper .swiper-container .direction_area > li{}
.visual_area.attachment .gu_swiper .swiper-container .direction_area .slide_empty{}
.visual_area.attachment .gu_swiper .swiper-container .direction_area .slide_empty img{max-width:1600px;}
.visual_area.attachment .gu_swiper .swiper-container .direction_area .btn_arrow{width:100%;}
.visual_area.attachment .gu_swiper .slider-pagination{left:0; bottom:30px;}
.visual_area.attachment .gu_swiper .slider-pagination > div{border:solid 1px #999;}


/* 구조
<div class="gu_swiper">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img class="mot3" th:src="@{/images/}" alt="{}"/>
                <div class="title kr_sd_700"></div>
            </div>
            <div class="swiper-slide">
                <img class="mot3" th:src="@{/images/}" alt="{intro.brand.brand-performance.swiper.slide}"/>
                <div class="title kr_sd_700"></div>
            </div>
        </div>
        <ul class="direction_area">
            <li class="slide_empty"><img th:src="@{/images/common/slide_empty.png}"></li>
            <li class="swiper-pagination en_plain_r"></li>
            <li class="swiper-progress"><div class="progress_thumb"></div></li>
            <li class="btn_arrow">
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </li>
        </ul>
    </div>
</div>
*/

/* video button */
.gu_video_box{position:relative; margin-top:60px;}
.gu_video_box img{width:100%;}
.gu_video_box iframe{display: block;width: 100%; height:100%;position:absolute;top:0; left:0;}
.gu_video_box video{display: block;height:100%; width:auto;max-width:100%;max-height:100%;position:absolute;top:50%; left:50%;transition:all 0.2s;transform: translate(-50%,-50%)}
.gu_video_box .video_btn{position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; background:url("../../img/common/btn_video_bg.png") no-repeat center / contain; cursor:pointer;z-index: 1}
.gu_video_box .video_btn:before, .gu_video_box .video_btn:after{position:absolute; top:50%; left:50%; display:block; content:''; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);transition: all 0.3s}
.gu_video_box .video_btn:before{width:62px; height:62px; background:#fff; z-index:1;}
.gu_video_box .video_btn:after{width: 0; height: 0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:14px solid #222; z-index:2;}
.gu_video_box.on .video_btn{display:none;}
.gu_video_box .video_btn:hover:before{background-color:#E35B0A;}
.gu_video_box .video_btn:hover:after{border-left: 14px solid #fff;}

/* 구조
<div class="gu_video_box">
    <div class="video_btn"></div>
    <video></video>
</div>
*/


/* 하단 버튼 */
.gu_bottom_btn_area .btn_box{position:relative; display:block; float:left; box-sizing: border-box; width:50%; height:237px; padding:60px 10%; background:#da450d;
    transition:all 0.2s;
    -webkit-transition:all 0.2s;
}
.gu_bottom_btn_area .btn_box:last-child{background:#333;}
.gu_bottom_btn_area .btn_box:hover{background:#d73407;}
.gu_bottom_btn_area .btn_box:last-child:hover{background:#202020;}
.gu_bottom_btn_area .btn_box p{float:left; width:calc(100% - 40px); font-size:18px; color:#fff; padding-left:42px;}
.gu_bottom_btn_area .btn_box p.name{font-size:34px; letter-spacing:-1px; padding-bottom:24px;}
.gu_bottom_btn_area .btn_box span{position:absolute; top:50%; right:12%; display:inline-block; float:right; transform:translateY(-50%);
    transition:all 0.4s cubic-bezier(.51,-0.39,.09,1.29);
    -webkit-transition:all 0.4s cubic-bezier(.51,-0.39,.09,1.29);
}
.gu_bottom_btn_area .btn_box:hover span{right:calc(12% - 36px);}
/*--- IE10이상 ---*/
@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.gu_bottom_btn_area .btn_box:hover span{right:12%;}}
/*--- Edge ---*/
@supports (-ms-ime-align:auto){.gu_bottom_btn_area .btn_box:hover span{right:12%;}}


/* -----------------------------------------------------------------------------------------
 샐랙트박스 + 나노스크롤
 */
.fclear .gu_sort_area {float:right;margin-bottom:50px;}
.gu_sort_area {font-size: 0; position:relative;}
.gu_sort_area>div {display: inline-block;vertical-align: bottom;position: relative;}
.gu_sort_area .gu_sort_name_empty {width: 184px;height: 100%; position:relative;}
.gu_sort_area .gu_sort_name {width: 184px;height: 100%; position:relative;}

.gu_sort_area .gu_sort_name:before {content: '';position: absolute;width: 16px;height: 16px;right: 0;bottom:20px;background: url("../../img/common/ico_arrow_black_bottom.png") no-repeat 0 0 / contain;}
.gu_sort_area .gu_sort_name a {display: block;font-size: 18px;position: relative;max-width:100%;height: 100%;color:#999;white-space: nowrap; -ms-text-overflow: ellipsis;-o-text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden;padding-right: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.gu_sort_area .gu_sort_name a:before {content:''; position:absolute;width:100%;height:1px;left:0;bottom:0;background:#ccc;}
.gu_sort_area .gu_sort_name a:after {content:''; position:absolute;width:0;height:1px;left:0;bottom:0;background:#e35b0a;-webkit-transition: width 0.3s;-moz-transition: width 0.3s;-ms-transition: width 0.3s;-o-transition: width 0.3s;transition: width 0.3s;}
.gu_sort_area .gu_sort_name a:hover:after {width:100%;}
.no-mobile .gu_sort_area .gu_sort_name a:hover:after {width:100%;}

.gu_sort_area .gu_selectbox {position:absolute;top:0;left:0;z-index:2;min-width:184px;width:auto; height:280px; max-height:280px; background-color:#e35b0a;color:#fff; visibility: hidden; opacity:0;}
.gu_sort_area .gu_selectbox.on {visibility: visible; opacity:1;}
.gu_sort_area .gu_selectbox .gu_selectbox_inner {position:relative; width:100%; height:100%;}
.gu_sort_area .gu_selectbox .gu_selectbox_inner a {font-size:16px; display: block; width:100%; height:40px; line-height:40px; padding-left:17px; font-weight:500;white-space:nowrap;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.gu_sort_area .gu_selectbox .gu_selectbox_inner a span {position:relative;display:inline-block;line-height:1;white-space:nowrap}
.gu_sort_area .gu_selectbox .gu_selectbox_inner a.on span:before {content:''; position:absolute; left:0;bottom:-6px;width:100%;height:1px;background:#fff;}
.gu_sort_area .gu_selectbox .gu_selectbox_inner a:hover {background:#e66c23;}
.no-mobile .gu_sort_area .gu_selectbox .gu_selectbox_inner a:hover {background:#e66c23;}

/* 커스텀 내부 스크롤 */
.gu_custom_scroll {position:relative; width:100%; height:100%;min-height:48px; display:block;overflow:hidden;}
.gu_custom_scroll .custom_scroll_content {position:relative; overflow:scroll; overflow-x:hidden; top:0; right:0; bottom:0; left: 0;width:120%; height:100%;-webkit-overflow-scrolling: touch;}
.gu_custom_scroll .custom_scroll_content::-webkit-scrollbar {visibility: hidden;}
.gu_custom_scroll.has-scrollbar .custom_scroll_content::-webkit-scrollbar {visibility: visible;}
.gu_custom_scroll > .pane {position:absolute; width:5px; right:6px; top:0; bottom:0; visibility:hidden; opacity:1; -webkit-transition: .2s; -moz-transition : .2s; -o-transition : .2s; transition: .2s;}
.gu_custom_scroll > .pane > .slider {position: relative; margin: 0 1px; padding:5px 0;  box-sizing: border-box;}
.gu_custom_scroll > .pane > .slider:after {content:""; display: block; width:100%; height:96%; background:rgba(255,255,255,0.6);}
.no-mobile .gu_custom_scroll:hover > .pane, .pane.active, .pane.flashed {visibility : visible; opacity: 0.99;}
/*
구조

<div class="gu_sort_area">
    <div class="gu_sort_name"><a href="javascript:;">전체</a></div>
    <div class="gu_selectbox">
        <div class="gu_selectbox_inner">
            <div class="gu_custom_scroll ">
                <div class="custom_scroll_content " >
                    <a href="javascript:;" class="on"><span>전체</span></a>
                    <a href="javascript:;"><span>옵션1</span></a>
                </div>
            </div>
        </div>
    </div>
</div>
*/



/* -----------------------------------------------------------------------------------------
 btn guide
 */

/* no icon (기본) */
.gu_btn{font-size: 16px;display: inline-block;padding: 13px 20px;background: #fff;transition: all 0.3s;border:solid 1px #222;min-width:140px; vertical-align: top;
    text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; line-height:21px;}
.gu_btn span{position: relative;display: inline-block;}
.gu_btn:hover{color: #fff;background: #e35b0a;border-color:#e35b0a; }

/* out link + icon */
.gu_btn_outlink{font-size: 16px;display: inline-block;padding:16px 60px;background: #fff;transition: all 0.3s}
.gu_btn_outlink span{position: relative;display: inline-block;padding-right: 28px}
.gu_btn_outlink span:before{content: '';background: url("../../img/common/icon/ico_outlink_black.png") no-repeat 0 0 / contain;width: 16px;height: 16px;position:absolute;top: 50%;transform: translateY(-50%);right: 0;transition: all 0.3s;display: block}
.gu_btn_outlink:hover{color: #fff;background: #e35b0a}
.gu_btn_outlink:hover span:before{background-image: url("../../img/common/icon/ico_outlink_white.png")}
/* 구조
    <a href="#" class="gu_btn_outlink" target="_blank" th:title="#{common.a.title.outlink}"><span>아웃링크 카피</span></a>
 */


/* btn - out link + icon (not box) */
.gu_btn_outlink_line span{ position:relative; display:inline-block;padding-right:22px; margin-bottom:10px;}
.gu_btn_outlink_line span:before{content:''; position:absolute;right:0;top:55%;width:14px; height:14px;background:url('../../img/common/icon/ico_outlink_white.png') no-repeat center center / contain; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}
/* 구조
    <a href="#" class="gu_btn_outlink" target="_blank" th:title="#{common.a.title.outlink}"><span>아웃링크 카피</span></a>
 */

/* out down + icon (박스 형태) */
.gu_btn_down{font-size: 16px;display: inline-block;padding: 16px 30px;background: #fff;transition: all 0.3s}
.gu_btn_down span{position: relative;display: inline-block;padding-right: 28px}
.gu_btn_down span:before{content: '';background: url("../../img/common/icon/ico_down_black_box.png") no-repeat 0 0 / contain;width: 16px;height: 16px;position:absolute;top: 50%;transform: translateY(-50%);right: 0;transition: all 0.3s;display: block}
.gu_btn_down:hover{color: #fff;background: #e35b0a}
.gu_btn_down:hover span:before{background-image: url("../../img/common/icon/ico_down_white_box.png")}
/* 구조
    <a href="#" class="gu_kv_btn gu_btn_down"><span>다운로드 버튼</span></a>
 */

/* out down + icon (텍스트 + 라인 + 아이콘) */
.gu_btn_down_line{font-size: 16px;display: inline-block;background: #fff;transition: all 0.3s}
.gu_btn_down_line span{position: relative;display: inline-block;padding-right: 28px}
.gu_btn_down_line span:before{content: '';background: url("../../img/common/icon/ico_down_black.png") no-repeat 0 0 / contain;width: 16px;height: 16px;position:absolute;top: 50%;transform: translateY(-50%);right: 0;display: block}
.gu_btn_down_line span:after{content: ''; position: absolute; bottom: -10px; left: 0; width: 0; height: 1px; background: #222; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s;}
.gu_btn_down_line:hover span:after{width:100%; }
.gu_btn_down_line:hover span:before{background-image: url("../../img/common/icon/ico_down_orange.png");}
/* 구조
    <a href="#" class="gu_kv_btn gu_btn_down_line"><span>다운로드 버튼</span></a>
 */

/* ico arrow right + hover move right */
.gu_btn_arrow_right{font-size: 16px;display: inline-block;background: #fff; margin-left:12px;}
.gu_btn_arrow_right span{position: relative;display: inline-block; padding-right:24px}
.gu_btn_arrow_right span:before{content: '';background: url("../../img/common/icon_arrow_right_black.png") no-repeat 0 0 / contain;width: 16px;height: 14px;position:absolute;top: 50%;transform: translateY(-50%);right: 0;display: block;transition: right 0.3s}
.gu_btn_arrow_right:hover{background-color: #e35b0a;color: #fff;border-color: #e35b0a}
.gu_btn_arrow_right:hover span:before{right: -4px; background: url("../../img/common/icon_arrow_right_white.png") no-repeat 0 0 / contain;}
/* 구조
    <a href="#" class="gu_btn gu_btn_arrow_right"><span>Submit</span></a>
 */

/* ico arrow left + hover move left */
.gu_btn_arrow_left{font-size: 16px;display: inline-block;background: #fff; margin-right:12px;}
.gu_btn_arrow_left span{position: relative;display: inline-block; padding-left:24px}
.gu_btn_arrow_left span:before{content: '';background: url("../../img/common/icon_arrow_left_black.png") no-repeat 0 0 / contain;width: 16px;height: 14px;position:absolute;top: 50%;transform: translateY(-50%);left: 0;display: block;transition: left 0.3s}
.gu_btn_arrow_left:hover{background-color: #e35b0a;color: #fff;border-color: #e35b0a}
.gu_btn_arrow_left:hover span:before{left: -4px; background: url("../../img/common/icon_arrow_left_white.png") no-repeat 0 0 / contain;}
/* 구조
    <a href="#" class="gu_btn gu_btn_arrow_left"><span>Submit</span></a>
 */

/* 위 버튼이 하나만 있는경우 - one 클래스를 추가시키기 */
.gu_btn_arrow_right.one, .gu_btn_arrow_left.one{margin-left:0; margin-right:0;}




/* 페이징 */
.gu_paging {text-align:center; font-size:0; margin-top:56px;}
.gu_paging .btn_arrow {display:inline-block; width:8px; vertical-align:middle; margin-top:-10px; position:relative;}
.gu_paging .btn_arrow:before {content:'';background:url(../../img/common/ico_arrow_black_right.png) no-repeat 0 0 / contain;width:10px;height:16px; display:inline-block;}
.gu_paging .btn_arrow.prev {margin-right:35px;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);}
.gu_paging .btn_arrow.next {margin-left:35px;}
.gu_paging .btn_arrow.disabled {opacity:0.42;}
.gu_paging a {margin:0 12px; display:inline-block;}
.gu_paging a.paging_ellipsis {font-size:16px;color:#000;margin:0 11px;}
.gu_paging a>span {position:relative;display:inline-block; padding:0 2px 9px; font-size:16px;color:rgba(0,0,0,0.57);}
.gu_paging a>span:before {content: '';position: absolute;bottom: 0;left: 0;right: 0;width: 100%;height: 0;background: #e35b0a;
    -webkit-transition: height 0.2s;
    -moz-transition: height 0.2s;
    -ms-transition: height 0.2s;
    -o-transition: height 0.2s;
    transition: height 0.2s;}
.gu_paging a:hover>span {color:#222;}
.gu_paging a.on>span {color:rgba(0,0,0,1);}
.gu_paging a.on>span:before {height:2px;}

/* ico_drag */
.ico_drag {display: none;}



/* 팝업 */
body.stop{overflow-y:hidden;}
.gu_popup {position: fixed;left: 0;right: 0;top: 0;bottom: 0;overflow-y: auto; display: none; z-index: 9999;}
.gu_popup.show {display: block;}
.gu_popup .dim {position: fixed; width: 100%;height: 100vh;left: 0;top: 0;background: rgba(0, 0, 0, .8);}
.gu_popup .pop_contents {position: relative; padding:120px 128px 0; margin: 20px auto;background-color: #fff;text-align: left;min-height: 100vh;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.gu_popup .pop_inner {width: 100%;position: relative;left: 0;right: 0;top: 50%; padding:70px 0;}
.gu_popup .pop_inner.active {opacity: 1}
.gu_popup .pop_inner .popup_click_bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.gu_popup .pop_inner .btn_close_pop, .gu_popup .pop_inner .btn_unselected {position: absolute; z-index: 2}
.gu_popup .pop_inner .btn_close_pop{width: 20px;height: 20px; top:36px; right:36px;}
.gu_popup .pop_inner .btn_close_pop img {width: 100%}

/* 구조
<div id="POP_SHARE" class="gu_popup">
    <div class="dim"></div>
    <div class="pop_inner">
        <div class="popup_click_bg"></div>
        <div class="pop_contents">
            <a href="javascript:;" class="btn_close_pop " title="닫기"><img th:src="@{/emerging/img/common/ico_close_black.png}" alt=""></a>
            <div class="pop_cnt_inner fclear"></div>
        </div>
    </div>
</div>
*/

/* 스크립트
Common.showPop(id);
Common.closePop();
*/


/* 레이아웃, 타이틀 */
.gu_content {position:relative;max-width:960px; width:100%; margin:0 auto;*zoom:1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.gu_content:after {display:block;content:"";clear:both;}
.gu_content h2.gu_title {font-size:32px; font-weight:700; line-height:46px; color:#222;text-align:center; padding-bottom:55px;}
.gu_content h2.gu_title_en {font-size:56px; line-height:70px; color:#222; text-align:center; padding-bottom:55px; font-family: "Plain",sans-serif;font-weight:700;}
.gu_content .gu_sub_title {font-size:20px; line-height:34px;color:#222; text-align:center; margin-bottom:55px;}
.gu_content .gu_sub_title.gu_desc {margin-top:-50px; text-align:center !important;}
.gu_content .gu_sub_title_en {font-size:24px; line-height:40px; color:#222; text-align:center; font-family: "Plain",sans-serif;font-weight:500;}
.gu_content .gu_box_title {font-size:20px; line-height:34px;color:#222; font-weight:700; margin-bottom:55px;}
.gu_content .gu_text {font-size:16px; line-height:30px;}
.gu_content .gu_box_sub_title {font-size:18px; line-height:28px; color:#222; font-weight:700;}
.gu_content .gu_box_desc {font-size:18px; line-height:30px;color:#222}

/* 테이블 - 가로스크롤 아이콘 */
.gu_ico_drag {display:block;position:absolute;width:100%;height:100%;top:20%;left:0;z-index:9999;pointer-events:none;opacity:0;visibility:hidden; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s;}
.gu_ico_drag.active {opacity:1;visibility:visible}
.gu_ico_drag img {width: 68px !important; min-width:68px !important; height: 68px;position: absolute;left: 50%;transform: translate3d(-64px, 0, 0);animation:guide 1.3s ease-in-out infinite;-ms-animation:guide 1.3s ease-in-out infinite;-webkit-animation-delay:1s;-moz-animation-delay:1s;-o-animation-delay:1s;animation-delay:0.5s;animation-direction: alternate;}
#POP_SHARE .gu_ico_drag{top:0;height:100vh;}
#POP_SHARE .gu_ico_drag img{top:45%;}
.table_overflow{padding-right:0 !important; margin-right:0 !important;}


/* =================================== 라인 =================================== */
.gu_line {width:100%;height:1px;background:#e8e8e8;margin:100px auto;}




/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) {
    .contents_inner .section,.contents_inner .section_top{margin:0 36px;}

    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section, .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section_top{max-width:inherit; margin:0 36px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except.video .video_box{padding:0 36px; margin:100px 0 0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner, .gu_sub_wrapper .gu_sub_contents .contents_inner.except.video .video_box .gu_video_box{max-width:inherit;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table{padding:0 36px; margin:0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner > *{margin:0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner table{padding:0 36px;}
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    #FOOTER-MENU_NOTIFY .agree_area .agree_box_inner .textarea .gu_box_sub_title,.gu_content .gu_text{font-size:14px; line-height:24px;}
    .contents_inner .section,.contents_inner .section_top{margin:0 50px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section, .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section_top{margin:0 50px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except.video .video_box{padding:0 50px; }

    /* contents area */
    .gu_sub_wrapper .gu_sub_contents .contents_inner{max-width:inherit; padding:30px 0 0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner br{display:none;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_title{font-size:32px; line-height:35px; margin:90px 0 50px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_sub_copy{font-size:15px; line-height:23px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_img{margin-bottom:80px;}

    /* key visual */
    .gu_kv .sec_inner,.gu_kv .kv_img_box{height:325px;}
    .gu_kv .sec_inner .copy_area h2{font-size:42px; line-height:inherit;}
    .gu_kv .sec_inner .copy_area .sub_copy{font-size:15px; line-height:23px; letter-spacing:-0.5px;}
    .gu_kv .sec_inner .copy_area .btn_area .gu_kv_btn{font-size:13px;padding: 14px 50px;}
    .gu_kv .sec_inner .copy_area .sub_copy{margin-top:14px;}
    .gu_kv .sec_inner .copy_area .btn_area {margin-top: 24px;}

    /* indicator */
    .gu_indicator{display:none;}

    /* depth 3 tab */
    .gu_tab_depth3 ul{padding:0 25px; white-space:nowrap;}
    .gu_tab_depth3 ul,.gu_tab_depth3 ul li,.gu_tab_depth3 ul li a,.gu_tab_depth3:before,.gu_tab_depth3:after{height:65px;}
    .gu_tab_depth3 ul li a{font-size:15px; line-height:65px; letter-spacing:-0.25px;}
    .gu_tab_depth3 ul li:before{line-height:65px;}
    .gu_tab_depth3 ul li a:hover:before{width: 0}
    .gu_tab_depth3 ul li a:hover{color:#999}


    /* depth 4 tab */
    .gu_tab_depth4 ul li a{font-size:13px; padding:0 15px;}
    .gu_tab_depth4 ul li a:before{height:3px;}
    .gu_tab_depth4 ul li a br{display:block; content:inherit;}
    .mobile .gu_tab_depth3 ul::-webkit-scrollbar, .mobile .gu_tab_depth4 ul::-webkit-scrollbar{height:0;}
    .gu_contents_depth4_area .gu_contents_depth4 img{display:block; width:100%;}


    /* contents area */
    .gu_sub_wrapper .gu_sub_contents .contents_inner{max-width:inherit; padding:30px 0 0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner br{display:none;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_title{font-size:32px; line-height:35px; margin:90px 0 50px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_sub_copy{font-size:15px; line-height:23px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_img{margin-bottom:80px;}


    /* swiper */
    .gu_swiper{margin-top:50px;}
    .gu_swiper .swiper-container .swiper-slide .title{margin-top:40px; padding-top:30px; font-size: 16px; line-height:26px;}
    .gu_swiper .swiper-container .direction_area .slide_empty{margin-bottom:40px;}
    .gu_swiper .swiper-container .direction_area .swiper-pagination-custom{font-size:13px}
    .gu_swiper .swiper-container .direction_area .swiper-progress{z-index:1;}
    .gu_swiper .swiper-container .direction_area .btn_arrow > div{width:7px; height:13px;}

    #INDICATOR{display:none;}

    /* 테이블 */
    .gu_table table tr {font-size: 15px;}
    .gu_table .sec_inner {padding-bottom: 80px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner > *{margin:0;}

    /* no icon (기본) */
    .gu_btn{font-size: 12px; padding: 14px 38px; transition: all 0.3s; min-width:94px;}
    .gu_btn:hover { color: #222; background: #fff; border-color:#222;}

    /* btn - out link + icon */
    .gu_btn_outlink span{padding-right:24px;}
    .gu_btn_outlink span:before{width:14px; height:14px;}
    .gu_btn_outlink:hover{color: #222; background: #fff;}
    .gu_btn_outlink:hover span:before{background-image: url("../../img/common/icon/ico_outlink_black.png")}

    /* out down + icon (박스 형태) */
    .gu_btn_down span{padding-right:24px;}
    .gu_btn_down span:before{width:14px; height:14px;}
    .gu_btn_down:hover{color: #222; background: #fff;}
    .gu_btn_down:hover span:before{background-image: url("../../img/common/icon/ico_down_black_box.png")}


    /* ico arrow right + hover move right */
    .gu_btn_arrow_right{font-size: 13px; margin-left:5px;}
    .gu_btn_arrow_right:hover{background-color:transparent; color: #222; border-color: #222;}
    .gu_btn_arrow_right:hover span:before{right:0; background: url("../../img/common/icon_arrow_right_black.png") no-repeat 0 0 / contain;}

    /* ico arrow left + hover move left */
    .gu_btn_arrow_left{font-size: 13px;  margin-right:5px;}
    .gu_btn_arrow_left:hover{background-color:transparent; color: #222; border-color: #222;}
    .gu_btn_arrow_left:hover span:before{left:0; background: url("../../img/common/icon_arrow_left_black.png") no-repeat 0 0 / contain;}

    /* out down + icon (텍스트 + 라인 + 아이콘) */
    .gu_btn_down_line{font-size: 13px;}
    .gu_btn_down_line span{padding-right:29px}
    .gu_btn_down_line span:before{width: 14px; height: 14px;}
    .gu_btn_down_line span:after{bottom:0; height: 0; }
    .gu_btn_down_line:hover span:after{width:0;}
    .gu_btn_down_line:hover span:before{background-image: url("../../img/common/icon/ico_down_black.png");}

    /* video button */
    .gu_video_box .video_btn:before{width:50px; height:50px;}
    .gu_video_box .video_btn:after {
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 10px solid #222;
    }
    .gu_video_box{margin-top:50px;}
    .gu_video_box .video_btn:hover:before{background-color:#fff;}
    .gu_video_box .video_btn:hover:after{border-left: 10px solid #222;}

    /* 샐랙트박스 + 나노스크롤 */
    .gu_sort_area .gu_sort_name:before{width:14px; height:14px;}


    /* 하단 button */
    .gu_bottom_btn_area .btn_box{padding:54px 50px 50px;}
    .gu_bottom_btn_area .btn_box p{width: calc(100% - 60px);}
    .gu_bottom_btn_area .btn_box p.name{font-size:30px;}

    /* key visual_ver.2 */
    .gu_no_kv .sec_inner {height: 196px;}
    .gu_no_kv .sec_inner .copy_area h2 {font-size: 42px; line-height:42px; }

    /* out down + icon (텍스트 + 라인 + 아이콘) */
    .gu_btn_down_line:hover span:after {width: 0;}

    /* ico_drag */
    .ico_drag {
        display:block;
        position:relative;
        z-index:10;
    }

    .ico_drag img {
        width: 68px;
        height: 68px;
        position: absolute;
        left: 50%;
        transform: translate3d(-64px, 0, 0);
        animation:guide 1.3s ease-in-out infinite;
        -ms-animation:guide 1.3s ease-in-out infinite;
        -webkit-animation-delay:1s;
        -moz-animation-delay:1s;
        -o-animation-delay:1s;
        animation-delay:0.5s;
        animation-direction: alternate;}

    @keyframes guide {
        0% {
            transform: translate3d(-64px, 0, 0);
        }
        100% {
            transform: translate3d(0px, 0, 0);
        }
    }

    .gu_sort_area .gu_sort_name a{font-size: 15px;}
    .gu_sort_area .gu_selectbox .gu_selectbox_inner a{font-size: 15px}
    
    #IDENTITY_SLOGAN .gu_text br{display:block;}
}

@media all and (max-width:1023px){
    .gu_popup .pop_inner{padding:52px 0;}
    
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    #FOOTER-MENU_NOTIFY .agree_area .agree_box_inner .textarea .gu_box_sub_title,.gu_content .gu_text{font-size:12px; line-height:22px;}

    /* contents area */
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_title{font-size:24px; line-height:32px; margin:30px 0;}
    .gu_tab_depth4 ul li.line2 a{line-height:inherit; padding-top:inherit; letter-spacing:0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_sub_copy{font-size:12px; line-height:18px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section{padding:0 20px;}
    .contents_inner .section, .contents_inner .section_top{margin:0 20px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section{padding:0 20px; margin:0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section, .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section_top{max-width:inherit; margin-left:0; margin-right:0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table, .gu_sub_wrapper .gu_sub_contents .contents_inner.except.video .video_box{padding:0 20px; margin:100px 0 0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_img{margin:30px auto 60px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner img.img_w{display:none;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner img.img_m{display:inline-block;}
    .contents_inner .section .sec_inner .sec_tit{margin:60px auto 30px;}

    /* key visual_ver.1 */
    .gu_kv .sec_inner .copy_area{padding:0 20px;}
    .gu_kv .sec_inner .copy_area h2{font-size:34px;}
    .gu_kv .sec_inner .copy_area .sub_copy{font-size:14px; margin-top:18px;}
    .gu_kv .sec_inner .copy_area .sub_copy br{display:none;}
    .gu_kv .sec_inner .copy_area .btn_area{margin-top:28px;}
    .gu_kv .sec_inner .copy_area .btn_area .gu_kv_btn{margin:0 6px 12px;padding:15px 20px;font-size: 12px; min-width:182px;max-width: 235px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    /* key visual_ver.2 */
    .gu_no_kv .sec_inner{height:140px;}
    .gu_no_kv .sec_inner .copy_area h2 {font-size:34px;}

    /* depth 3 tab */
    .gu_tab_depth3 ul{padding:0 20px;}
    .gu_tab_depth3 ul li{margin-right:20px;}
    .gu_tab_depth3 ul li a{font-size:14px; line-height:56px;}
    .gu_tab_depth3 ul li a:before{height:3px;}
    .no-mobile .gu_tab_depth3 ul li a:before{height:8px;}
    .gu_tab_depth3 ul, .gu_tab_depth3 ul li, .gu_tab_depth3 ul li a, .gu_tab_depth3:before, .gu_tab_depth3:after{height:56px;}

    /* depth 4 tab */
    .gu_tab_depth4 ul{overflow-x:auto; overflow-y:hidden; white-space:nowrap; -webkit-overflow-scrolling: touch;margin:0 auto 50px;font-size: 0}
    .gu_tab_depth4 ul li{float:none; display:inline-block; width:auto !important; margin: 0 15px}
    /*.gu_tab_depth4 ul li a{padding: 0 20px;}*/
    .gu_tab_depth4 ul li a{padding: 0}
    .gu_tab_depth4 ul li a:before{height:3px;}


    /* ico arrow right + hover move right */
    .gu_btn_arrow_right{font-size: 12px;}
    .gu_btn_arrow_right span{padding-right:20px}
    .gu_btn_arrow_right span:before{width: 12px; height: 10px;}
    .gu_btn_arrow_right:hover span:before{width: 12px; height: 10px;}

    /* ico arrow left + hover move left */
    .gu_btn_arrow_left{font-size: 12px;}
    .gu_btn_arrow_left span{padding-left:20px}
    .gu_btn_arrow_left span:before{width: 12px; height: 10px;}
    .gu_btn_arrow_left:hover span:before{width: 12px; height: 10px;}

    /* out down + icon (텍스트 + 라인 + 아이콘) */
    .gu_btn_down_line{font-size: 12px;}


    /* video button */
    .gu_video_box .video_btn:before{width:42px; height:42px;}
    .gu_video_box .video_btn:after {
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 9px solid #222;
    }
    .gu_video_box .video_btn:hover:after{border-left: 9px solid #222;}

    .gu_btn_down{padding: 14px 20px}

    /* swiper */
    .gu_swiper .swiper-container .swiper-slide .title{margin-top:30px; padding-top:40px;}
    .visual_area.attachment .gu_swiper .slider-pagination{bottom:20px;}

    /* popup */
    .gu_popup .pop_inner .btn_close_pop{top:20px; right:20px;}
}

@media all and (max-width:480px){
    .gu_popup .pop_inner{padding:42px 0;}
}

@media all and (max-width:374px){
    .container_inner .gu_product_top > div p.name{width:100%; max-width:inherit;}
}