/*.container *{color:#222;}*/

/* 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;}
.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%;background: url("") no-repeat center / cover;}
.gu_kv .kv_img_area:before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.5)}
/* 구조



/* 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; padding:0;}
/* 구조



/* 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);}


/* INDICATOR */
.gu_indicator{position: absolute;top: 30px;right: 36px;text-align: right}
.gu_indicator .indicator_inner{}
.gu_indicator .indicator_inner a{display: inline-block;position: relative;font-size: 15px;line-height:13px;color:#222;margin: 0 10px;letter-spacing: -0.5px}
.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 #555; border-right: 1px solid #555; transform: rotate(45deg) translateY(-50%);margin-top: -2px}
.gu_indicator .indicator_inner a:first-child:before{display: none}
.gu_indicator .indicator_inner a:last-child{margin-right: 0}


/* 레이아웃, 타이틀 */
h2.gu_title {font-size:32px; font-weight:700; line-height:46px; color:#222; text-align:center; padding-bottom:55px;}
h2.gu_title_en {
    font-size: 52px;
    line-height: 50px;
    color: #222;
    text-align: center;
    padding-bottom: 100px;
    font-family: "Plain",sans-serif;
    font-weight: 700;
}
.gu_box_desc {font-size: 18px; line-height: 30px; color: #222;}
.gu_text {font-size: 16px; line-height: 26px;}
.gu_box_title {
    font-size: 20px;
    line-height: 34px;
    color: #222;
    font-weight: 700;
    margin-bottom: 55px;
}
.gu_box_sub_title {
    font-size: 18px;
    line-height: 28px;
    color: #222;
    font-weight: 700;
}
.gu_sub_title {
    font-size: 18px;
    line-height: 28px;
    color: #222;
    text-align: center;
    margin-bottom: 60px;
}

.gu_contents_title{font-size:38px; line-height:41px; color:#222; text-align:center; margin:100px 0 60px;}


/* 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: #006cb5;
    -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));}




/* 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: #666;font-size: 16px;width: 100%;height: 100%;line-height: 68px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.gu_tab_depth4 ul li.line2 a{line-height: 20px;padding-top: 12px;
    -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: #007ACC;
    -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}


/* 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}


/* 탭 스크롤바 */
.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,
.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.wide .section,
.gu_sub_wrapper .gu_sub_contents .contents_inner.except.wide .section_top,
.gu_sub_wrapper .gu_sub_contents .contents_inner.except.wide .section.gu_table .sec_inner,
.gu_sub_wrapper .gu_sub_contents .contents_inner.except.video.wide .video_box .gu_video_box{max-width:1116px; 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:960px; padding-bottom:160px; 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%;}



/* ----------------------------------  그리드박스  -----------------------------------------*/
.gu_grid_box {font-size:0;}
.gu_grid_box li {width:calc(50% - 12px); float:left; border-top:2px solid #666; padding:34px 0 60px; text-align:center;}
.gu_grid_box li:nth-of-type(odd) {margin-right:12px;}
.gu_grid_box li:nth-of-type(even) {margin-left:12px;}
.gu_grid_box li .top .gu_box_sub_title {padding-bottom:20px; display:block;}
.gu_grid_box li .top .img {margin:30px 0 50px;}
.gu_grid_box li .bottom {background-color:#f2f2f2; border-top:1px solid #dcdcdc; height:220px; box-sizing:border-box; position:relative;}
.gu_grid_box li .bottom p {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: 80%;}
.gu_grid_box:after {content:''; display:block; clear:both;}





/* -----------------------------------------------------------------------------------------
 기능 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 img{width:100%;cursor:pointer;}
.gu_swiper .swiper-container .swiper-slide img:hover{opacity:0.9;}

.gu_swiper .swiper-container .swiper-slide .title{font-size: 18px;line-height: 30px; margin-top: 50px; padding-top: 45px; 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/gallery_slide_prev.cur") 20 20, auto; }
.gu_swiper .swiper-container .direction_area .slide_empty .over_area a.over_r:hover {cursor:url("../../img/common/gallery_slide_next.cur") 20 20, auto;}


.gu_swiper .swiper-container .direction_area .swiper-pagination{position: relative;width: 70px;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:#007acc;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('../images/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('../images/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}

/* 구조
<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("../images/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:#007acc;}
.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>
*/


/* -----------------------------------------------------------------------------------------
 샐랙트박스 + 나노스크롤
 */
.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 {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("../images/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;*/ color:#000; white-space: nowrap; -ms-text-overflow: ellipsis;-o-text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden; padding: 3px 25px 17px 0;
    -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:#007acc;-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:#007acc;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; font-weight:300;}
.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:#006cb5;}
.no-mobile .gu_sort_area .gu_selectbox .gu_selectbox_inner a:hover {background:#006cb5;}

.gu_table.sort_table {display:none;}
.gu_table.sort_table.on {display:block;}

/* 커스텀 내부 스크롤 */
.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:100%; 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: #007acc;border-color:#007acc; }

/* out link + icon */
.gu_btn_outlink{font-size: 16px;display: inline-block;padding: 14px 30px;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("../images/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: #007acc}
.gu_btn_outlink:hover span:before{background-image: url("../images/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;}
.gu_btn_outlink_line span:before{content:''; position:absolute;right:0;top:55%;width:14px; height:14px;background:url('../images/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: 13px 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("../images/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: #007acc}
.gu_btn_down:hover span:before{background-image: url("../images/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("../images/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("../images/ico_down_blue.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("../images/icon_arrow_right_black.png") no-repeat 0 0 / contain;width: 16px;height: 14px;position:absolute;top: 50%;transform: translateY(-50%);right: 0px;display: block;transition: right 0.3s}
.gu_btn_arrow_right:hover{background-color: #007acc;color: #fff;border-color: #007acc}
.gu_btn_arrow_right:hover span:before{right: -4px; background: url("../images/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("../images/icon_arrow_left_black.png") no-repeat 0 0 / contain;width: 16px;height: 14px;position:absolute;top: 50%;transform: translateY(-50%);left: 0px;display: block;transition: left 0.3s}
.gu_btn_arrow_left:hover{background-color: #007acc;color: #fff;border-color: #007acc}
.gu_btn_arrow_left:hover span:before{left: -4px; background: url("../images/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(../images/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: #007acc;
    -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 */
.gu_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; 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:100px 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_table_wrap{overflow: auto; position:relative;}
.gu_table_wrap table{width:100%; display:table; white-space:nowrap; -webkit-overflow-scrolling: touch;}
.gu_table table tr {font-size: 15px; border-top: solid 1px #999; color:#2d2d2d; line-height:22px;}
.gu_sub_wrapper .gu_sub_contents .contents_inner table br {display:block;}
.gu_table table tr th, table tr td{word-break:keep-all;}
.gu_table table{position:relative; width:100%; margin-bottom:100px;}
.gu_table table:last-child{margin-bottom:0;}
.gu_table table tr th{text-align:left; letter-spacing:-1px;}
.gu_table table tr th, table tr td{padding:20px 18px 20px 5px;word-break:break-all;}
.gu_table table tr th:last-child, table tr td:last-child{padding-right:0;}
/* 구조
<div class="gu_table_wrap">
    <div class="gu_table scrollX">
        <table>
            <caption></caption>
            <colgroup>
                <col style="width:60%">
            </colgroup>
            <tr>
                <th class="kr_sd_700" th:utext="#{}"></th>
            </tr>
        </table>
    </div>
</div>
*/
/*
스크립트 : 개별 페이지.js 에
Common.setScrollIcon();
*/



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

    /* 배경 있는 컨텐츠 */
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except.wide .section, .gu_sub_wrapper .gu_sub_contents .contents_inner.except.wide .section_top,
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except.wide .section.gu_table .sec_inner{width:100%; max-width:inherit; padding:0 36px; margin:0;}
    .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{padding:0; margin:0 0 0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner table{width:calc(100% - 72px); padding:0 36px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except.wide .section.gu_table .sec_inner table{width:100%; max-width:inherit;}
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    .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,
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except.video .video_box .gu_video_box{max-width:inherit; padding:0 50px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except.wide .section{padding:0 50px; margin:0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except.wide .section.gu_table .sec_inner{padding:0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner{padding-bottom:120px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner table{width:100%;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner > *{margin:0;}


    /* 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:14px; line-height:25px; letter-spacing:-0.5px;}
    .gu_kv .sec_inner .copy_area .btn_area .gu_kv_btn{font-size:13px;padding: 14px 25px}
    .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{height: 48px; line-height: 48px;}
    .gu_tab_depth4 ul li a{font-size:13px; padding:0 15px; line-height:48px;}
    .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:block;}
    .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;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner{max-width:inherit; margin:0 50px;}

    /* 레이아웃 */
    h2.gu_title {font-size: 24px; line-height: 32px; padding-bottom: 50px; }
    h2.gu_title_en{font-size: 37px; line-height: 20px; padding-bottom:50px;}
    .gu_box_title {font-size: 18px; line-height: 26px; margin-bottom: 50px;}
    .gu_text {font-size: 14px; line-height: 24px;}
    .gu_box_sub_title{font-size: 14px; line-height: 24px;}
    .gu_sub_title{margin-bottom:50px; font-size:14px; line-height:23px;}
    .gu_box_desc {font-size: 15px; line-height: 25px;}
    .gu_contents_title{font-size:30px; margin:90px 0 50px;}


    /* swiper */
    .gu_swiper{margin-top:50px;}
    .gu_swiper .swiper-container .swiper-slide .title{margin-top:40px; padding-top:30px;}
    .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: 14px;}
    .gu_table .sec_inner {padding-bottom: 80px;}
    .gu_table table tr th, table tr td {padding: 18px 18px 18px 7px;}
    .mobile .gu_table_wrap::-webkit-scrollbar{display:none;}



    /* no icon (기본) */
    .gu_btn{font-size: 12px; padding:13px 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("../images/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("../images/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: #B2B2B2;}
    .gu_btn_arrow_right:hover span:before{right:0px; background: url("../images/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:0px; background: url("../images/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:23px}
    .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("../images/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;}

    /* 테이블 - 가로스크롤 아이콘 */
    .gu_ico_drag {display:block;position:absolute;width:100%;height:100%;top:0;left:0; 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; z-index:9;}
    .gu_ico_drag.active {opacity:1;visibility:visible}
    .gu_ico_drag img {width: 68px;height: 68px;position: absolute;top:20%;left: 50%;transform: translate3d(-68px, 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%;}

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

    /* 셀렉트박스 */
    .gu_sort_area .gu_sort_name a {font-size: 14px; height: 36px; padding: 8px 20px 14px 0;}
    .gu_sort_area .gu_sort_name:before{bottom:13px;}
    .gu_sort_area .gu_selectbox .gu_selectbox_inner a{font-size: 15px}



    /* ----------------------------------  그리드박스  -----------------------------------------*/
    .gu_grid_box li .top .img {margin: 20px 0 40px;}
    .gu_grid_box li .bottom{height:150px;}



}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    .contents_inner .section,.contents_inner .section_top{margin:0 20px;width: inherit;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except.wide .section{padding:0 20px;}

    /* 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{max-width:500px; font-size:14px; margin:18px auto 0;}
    .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:14px 20px;font-size: 12px;width: 100%;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, .gu_tab_depth3 ul li, .gu_tab_depth3 ul li a, .gu_tab_depth3:before, .gu_tab_depth3:after{height:56px; line-height:56px;}
    .gu_tab_depth3 ul{padding:0 20px;}
    .gu_tab_depth3 ul li{margin-right:20px;}
    .gu_tab_depth3 ul li a{font-size:14px;}
    .gu_tab_depth3 ul li a:before{height:3px;}
    .no-mobile .gu_tab_depth3 ul li a:before{height:8px;}

    /* 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}
    .gu_tab_depth4 ul li a:before{height:3px;}

    /* contents area */
    .gu_sub_wrapper .gu_sub_contents .contents_inner{padding: 30px 0 0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_title{font-size:24px; line-height:32px; margin:30px 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; 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;}

    /* 레이아웃 */
    .gu_box_title{margin-bottom:30px;}
    .gu_text {font-size: 12px; line-height: 20px;}
    .gu_box_sub_title {font-size: 12px; line-height: 15px;}
    h2.gu_title {padding-bottom: 40px;}
    h2.gu_title_en {font-size: 28px; line-height: 38px; padding-bottom: 30px;}
    .gu_sub_title {font-size: 12px; line-height: 20px; margin-bottom:30px;}
    .gu_content .gu_box_desc {font-size: 13px; line-height: 24px;}
    .gu_contents_title {font-size: 26px; margin: 30px 0 30px;}
    .gu_box_desc { font-size: 12px; line-height: 18px;}


    /* 테이블 */
    .gu_table table tr {font-size: 12px;}
    .gu_table .sec_inner {padding-bottom:60px;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner.except .section.gu_table .sec_inner{padding-bottom:60px; margin:0;}
    .gu_table table tr th, table tr td {padding: 14px 14px 14px 5px;}

    /* no icon (기본) */
    .gu_btn{font-size: 12px; padding:13px 20px; }

    /* 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;}

    /* 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:13px 20px}

    /* swiper */
    .gu_swiper .swiper-container .swiper-slide .title{margin-top:30px; padding-top:40px;}

    /* 셀렉트박스 */
    .gu_sort_area .gu_selectbox .gu_selectbox_inner a {font-size: 12px; }




    /* ------------------------------  그리드박스  --------------------------------*/

    .gu_grid_box li {width:100%; margin-bottom: 30px; padding-top:20px;}
    .gu_grid_box li:nth-of-type(odd){margin-left:0; margin-right:0;}
    .gu_grid_box li:nth-of-type(even){margin-left:0; margin-right:0;}
    .gu_grid_box li .top .img {margin: 10px 0 30px;}
    .gu_grid_box li .bottom {height: auto; }
    .gu_grid_box li .bottom p{position:static; width: 100%; transform: none; padding:20px 36px; box-sizing: border-box;}





}