/*** guide 로 사용되는 클래스는 gu_를 붙힘 *****/

/**********************************************************************************************************************************************************************************************************

*/

/* GNB */
#header #nav .gnb li.on a:before {content: '';background-color: #222;height: 2px;position: absolute;left: 0;bottom: 0%;width: 100%; z-index:3;}
#header #nav .gnb li.inactive.on a {opacity:1;}
#header #nav .gnb li.inactive.on a:before {width:0;}
#header .gnb-sub-menus .menus .sub-menu li.on a span:after {content: ''; position: absolute; background: #333; left: 0; width: 100%; height: 1px; top: 1.15rem;}
#header.small #nav .gnb li.on a:before {opacity:0;transition:all .3s;transition-delay:.3s;}


/* 서브페이지 키비쥬얼 */
#SUB_KEYVISUAL {}
#SUB_KEYVISUAL .kv_inner {position: relative}
#SUB_KEYVISUAL .gu_sub_top {position: relative;}
#SUB_KEYVISUAL .gu_sub_top .sec_inner {position: relative;margin: 0 auto;height: 320px}
/* 기존 */
#SUB_KEYVISUAL .gu_sub_top h1 {font-size: 56px;color: #fff;letter-spacing:-1.12px; text-align:center; width:100%;position: absolute;top:50%;left: 50%;z-index: 1; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
#SUB_KEYVISUAL .gu_sub_top h1 span {font-size:20px; line-height:40px;letter-spacing:-0.5px; font-weight:400;display:block;}
#SUB_KEYVISUAL .gu_sub_top .kv_img_box {position:absolute; top:0; left:0; right:0; height:320px; overflow:hidden;}
#SUB_KEYVISUAL .gu_sub_top .kv_img_box:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.1);}
#SUB_KEYVISUAL .gu_sub_top .kv_img_box video {width: 100%; min-width: 1600px; height: auto; position: absolute; top: 50%; left: 50%; z-index:-1;-webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
#SUB_KEYVISUAL .gu_sub_top .kv_img_area {position: absolute;top: 0;left: 0;right: 0;height:100%;background: url("../../img/company/brand/KV_company_brand.jpg") no-repeat center / cover;z-index:-1;transform: scale(1.15);opacity: 0;}
#SUB_KEYVISUAL .gu_sub_top .kv_img_area.on {transform:scale(1); opacity:1; transition:all 0.9s cubic-bezier(.39,0,.12,.99);}
#SUB_KEYVISUAL .gu_sub_top .kv_img_area.active {transform:scale(1); opacity:1; transition:none;}

/* INDICATOR */
#INDICATOR {position: relative;z-index: 2; text-align:right;padding: 30px 36px 0; font-size:0;}
#INDICATOR .indicator_inner {overflow: hidden;letter-spacing:-.1px;}
#INDICATOR .indicator_inner a {display: inline-block;position: relative;font-size: 13px;margin: 0 10px;transition:opacity 0.2s;}
#INDICATOR .indicator_inner a:hover {opacity:0.6;}
#INDICATOR .indicator_inner a:before {content: '';pointer-events: none;position: absolute;left: -12px;top: 1px;background:url(../../img/common/ico_arrow_indicator.png) no-repeat center center / contain;width:4px; height:12px;}
#INDICATOR .indicator_inner a:first-child:before {display: none}
#INDICATOR .indicator_inner a:last-child {margin-right: 0}

/* 레이아웃, 타이틀 */
.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; word-break: break-word;}
.gu_content h2.gu_title_en {font-size:56px; line-height:70px; color:#222; text-align:center; padding-bottom:55px; font-family: "HDFont",sans-serif;font-weight:700;}
.gu_content .gu_sub_title {font-size:20px;line-height:34px;color:#222; text-align:center; margin-bottom:55px; word-break: break-word;}
.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: "HDFont",sans-serif;font-weight:500;}
.gu_content .gu_main_title {font-size:24px; line-height:40px;color:#222; font-weight:700;  margin: 40px 0 20px;}
.gu_content .gu_main_title.gu_desc {font-size:16px; font-weight:400;line-height:30px;}
.gu_content .gu_main_title_en {font-size:24px; line-height:40px;font-family: "HDFont",sans-serif;font-weight:700;    margin: 40px 0 20px; }
.gu_content .gu_box_title {font-size:20px; line-height:34px;color:#222; font-weight:700; margin-bottom:55px;}
.gu_content .gu_main_text {font-size:18px; line-height:30px;}
.gu_content .gu_main_text_en {font-size:18px; line-height:30px; font-family: "HDFont", sans-serif; font-weight:400;}
.gu_content .gu_text {font-size:16px; line-height:30px;}
.gu_content .gu_text_en {font-size:16px; line-height:30px; font-family: "HDFont", sans-serif; font-weight:400;}
.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_content .short_content{font-size : 18px;}

.gu_grid {position:relative;margin-top:100px;}
.gu_grid:first-child {margin-top:0;}


/* =================================== 탭 =================================== */
/* 3뎁스 탭 */
.gu_tab_depth3 {position: relative;text-align: center;margin:0 auto;z-index:2;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.gu_tab_depth3 ul {font-size: 0;width: 100%;height: 72px;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; position:relative;background:#222;}
.gu_tab_depth3 ul li {display: inline-block;position: relative;vertical-align: top;margin: 0 28px;height: 72px;}
.gu_tab_depth3 ul li a:after {content:''; position:absolute;width:1px;height:14px;background:rgba(255,255,255,.42);top:50%;right:-28px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}
.gu_tab_depth3 ul li:last-child a:after {display:none;}
.gu_tab_depth3 ul li a {display: inline-block;position: relative;font-family: "HDFont",sans-serif;color: rgba(255,255,255,.42);font-size: 18px; font-weight:500; line-height:72px;
transition: color 0.3s}
.gu_tab_depth3 ul li a:before {content: '';position: absolute;bottom: 20px;left: 0;right: 0;width: 100%;height: 0;background: #fff;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;}
.gu_tab_depth3 ul li.on a {color: #fff}
.gu_tab_depth3 ul li.on a:before {height: 1px}
.gu_tab_depth3 ul li a:hover{color: #fff}

/* 4뎁스 텝 */
.gu_tab_depth4 {position: relative;text-align: center; margin:0 auto 100px; z-index:2;}
.gu_tab_depth4:before {content: ''; position: absolute; width: 100%; height: 1px; background: #c8c8c8; left: 0; bottom: 0;}
.gu_tab_depth4 ul {font-size: 0;max-width:960px;margin:0 auto;}
.gu_tab_depth4 ul li {min-width:calc(100% / 5);display: inline-block;position: relative;vertical-align: bottom;}
                   /* width는 탭 갯수에 따라 개별 변경 */
.gu_tab_depth4 ul li a {display: inline-block;position: relative;font-family: "HDFont",sans-serif;color: rgba(0,0,0,.42); width:100%;padding-bottom: 28px;font-size: 18px;line-height:1; -webkit-transition:all .2s; -moz-transition:all .2s; -ms-transition:all .2s; -o-transition:all .2s; transition:all .2s;}
.gu_tab_depth4 ul li a:before {content: '';position: absolute;bottom: 0;left: 0;right: 0;width:0;height:4px;background: #222;
    -webkit-transition: all 250ms ease-out;
    -moz-transition: all 250ms ease-out;
    -ms-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;}
.gu_tab_depth4 ul li.on a {color: #000;}
.gu_tab_depth4 ul li.on a:before {width:100%;}
.no-mobile .gu_tab_depth4 ul li a:hover {color: #000}

/* 탭 스크롤바 */
.gu_tab_depth3 ul::-webkit-scrollbar {width: 0;height: 0;}
.gu_tab_depth3 ul::-webkit-scrollbar-track {background-color: #fff;}
.gu_tab_depth3 ul::-webkit-scrollbar-track-piece {background-color: #fff;}
.gu_tab_depth3 ul::-webkit-scrollbar-thumb {background-color: #fff;}
.gu_tab_depth3 ul::-webkit-scrollbar-button {background-color: #fff;width: 0;height: 0;}
.gu_tab_depth3 ul {overflow: -moz-scrollbars-none;}
.gu_tab_depth3 ul {
    /* ie */
    scrollbar-3dLight-Color: #fff;
    scrollbar-face-color: #e1e1e1;
    scrollbar-base-color: #fff;
    scrollbar-track-color: #fff;
    scrollbar-arrow-color: #fff;
    scrollbar-highlight-color: #fff;
    scrollbar-3dlight-color: #fff;
    scrollbar-DarkShadow-Color: #fff;
    scrollbar-shadow-color: #fff;
    scrollbar-darkshadow-color: #fff;
}

.gu_tab_depth4 ul::-webkit-scrollbar {width: 0;height: 15px;}
.gu_tab_depth4 ul::-webkit-scrollbar-track {background-color: #fff;}
.gu_tab_depth4 ul::-webkit-scrollbar-track-piece {background-color: #fff;}
.gu_tab_depth4 ul::-webkit-scrollbar-thumb {background-color: #e1e1e1;border-bottom:6px solid #fff;border-top:6px solid #fff;}
.gu_tab_depth4 ul::-webkit-scrollbar-button:start {background-color: #fff;}
.gu_tab_depth4 ul::-webkit-scrollbar-button:end {background-color: #fff;}
.gu_tab_depth4 ul {
    /* ie */
    scrollbar-face-color: #e1e1e1;
    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;
}

/* 4뎁스 컨텐츠 */
.gu_contents_depth4 {display:none;}
.gu_contents_depth4.on {display:block;}



/* =================================== 스와이퍼 =================================== */
/* swiper */
.gu_swiper {margin-top:80px;}
.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:move;}
.no-mobile .gu_swiper .swiper-container .swiper-slide img:hover {opacity:0.9;}

.gu_swiper .swiper-container .swiper-slide .title {font-size: 20px;line-height: 34px; margin-top: 40px; padding-top: 40px; background:#fff;color:#222;}

.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: 42px; 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%;}

.no-mobile .gu_swiper .swiper-container .direction_area .slide_empty .over_area a.over_l:hover {cursor:url("../../img/common/gallery_slide_prev.cur");}
.no-mobile .gu_swiper .swiper-container .direction_area .slide_empty .over_area a.over_r:hover {cursor:url("../../img/common/gallery_slide_next.cur");}


.gu_swiper .swiper-container .direction_area .swiper-pagination {position: relative;width: 60px;padding-right: 35px;font-size: 16px;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% - 216px);border-radius: 0;background: #e5e5e5;overflow: hidden;margin-top: -16px;z-index:2;}
.gu_swiper .swiper-container .direction_area .swiper-progress .progress_thumb {background:#64b6c9;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_btn_area {font-size:0;}
.gu_btn_area .gu_btn {-webkit-appearance: none;-moz-appearance: none;appearance: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;height: 56px;border: 1px solid #bcbcbc;background: transparent;cursor: pointer;position: relative;display: inline-block;text-align: center;font-size: 0;padding: 0 30px;color:#222;
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);}
.gu_btn_area .gu_btn.btn_white {background: #fff;border-color: #b2b2b2;}
.gu_btn_area .gu_btn.btn_arrow .arrow {position:absolute;background: url(../../img/common/icon/icon-arrowright.svg) 50% 50% no-repeat;display: inline-block;vertical-align: middle;width: 16px;height: 16px;-webkit-background-size: contain;background-size: contain;top: 50%;right:30px;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);-ms-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);-o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);}
.gu_btn_area .gu_btn.btn_arrow .outlink {position:absolute;background: url(../../img/common/ico_outlink_black.svg) 50% 50% no-repeat;display: inline-block;vertical-align: middle;width: 16px;height: 16px;-webkit-background-size: contain;background-size: contain;top: 50%;right:30px;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);-ms-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);-o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);}
.gu_btn_area .gu_btn .label {font-size: 16px;position: relative;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);overflow: hidden;display: inline-block;vertical-align: top;line-height:1.1;}
.gu_btn_area .gu_btn.btn_arrow .label {padding-right:28px;}
.no-mobile .gu_btn_area .gu_btn.btn_arrow:hover .arrow {right:26px;}

.gu_btn_area .gu_btn:before {content:''; position:absolute;background:#222;color:#fff;border-color:#222;width:0;height:calc(100% + 2px);left:-1px;top:-1px;
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);}
.gu_btn_area .gu_btn.btn_white:hover {color:#fff;}
.gu_btn_area .gu_btn.btn_arrow.btn_white:hover .arrow {background-image:url(../../img/common/icon/icon-arrowright-w.svg);}
.gu_btn_area .gu_btn.btn_arrow.btn_white:hover .outlink {background-image:url(../../img/common/ico_outlink_white.svg);}
.gu_btn_area .gu_btn:hover:before {width:calc(100% + 2px);}
.gu_outlink{content: ''; width: 16px; height: 16px; position:absolute; top: 10%; display: block; background-image:url(../../img/common/ico_outlink_white.svg);}

/* 다운로드 버튼 */
.gu_btn_down {position: relative; text-align:right;}
.gu_btn_down a {display: inline-block; font-size: 16px; position: relative; color:#222;}
.gu_btn_down a:before {content:''; position:absolute; width:0; height:1px; background:#222; left:0; bottom:-10px;
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);}
#footer .gu_btn_down a:before{content:''; position:absolute; width:0; background:#222; left:0; bottom:-10px; right: -24px;}
.gu_btn_down a span {position: relative; padding-right: 29px; display: inline-block;}
.gu_btn_down a span:before {content: '';background: url("../../img/common/ico_download.png") no-repeat 0 0 / contain; width: 18px;height: 18px;position: absolute;top: 50%;right: 0; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);}


.no-mobile .gu_btn_down a:hover:before {width:100%;}
.no-mobile .gu_btn_down a:hover span:before {background-image: url("../../img/common/ico_download_hov.png")}

.footer-menu li a span img.download{ padding-left:7px; width:13px; height: 13px;}
    
#MEDIA .gu_btn_down {
    position: relative;
    height: 48px;
    border-style: solid;
	margin-top: -90px;
    margin-bottom: 40px;
    text-align: center;
    vertical-align: middle;
}

#MEDIA .gu_btn_down a {
    display: inline-block;
    font-size: 16px;
    color: #222;
    padding-right: 22px;
    background: #fff;
}

#video_download{
	margin-top:66px;
}

#removed-select-box{
	margin-top:66px;
}

#MEDIA .gu_btn_down a span {
    padding-right: 29px;
    padding: 15px 26px 12px 22px;
    background: white;
}

#MEDIA .gu_btn_down a:before{
	height:0;
}


#zh_integrated img.download {
    padding-left: 7px;
    width: 13px;
    height: 13px;
    margin-top: 3px;
}

#en_company img.download {
    padding-left: 7px;
    width: 13px;
    height: 13px;
    margin-top: 3px;
}
#en_integrated img.download {
    padding-left: 7px;
    width: 13px;
    height: 13px;
    margin-top: 3px;
}
/* =================================== 테이블 =================================== */
/* 리스트 */
.gu_table {position:relative;}
.gu_table table {width:100%; text-align:center;border-top:2px solid #444;border-bottom:1px solid #444;}
.gu_table thead {background:#fafafa;}
.gu_table thead th {font-size:16px; line-height:24px; font-weight:700; vertical-align:middle; padding: 16px 12px;color:#222;}
.gu_table thead th:first-child {padding-left: 24px;}
.gu_table thead th:last-child {padding-right: 24px;}
.gu_table tbody tr {border-top:1px solid #e1e1e1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;}
.gu_table tbody td {font-size: 16px;line-height: 28px;vertical-align: middle;padding: 20px 12px;color: #444;}
.gu_table tbody td:first-child {padding-left: 24px;}
.gu_table tbody td:last-child {padding-right:15px;}
.gu_table tbody td.left {text-align:left;}
.gu_table tbody td.title {font-size:18px;text-align:left;}
.gu_table tbody td.title a {display:inline-block; width:100%;}
.no-mobile .gu_table tbody tr:hover {background:#eef8f8;}

.gu_table tbody td a{display:inline-block;}
.gu_table tbody td span.down_icon{position:relative; display:inline-block; padding-right:10px;}
.gu_table tbody td span.down_icon:before{content:''; position:absolute; width:18px; height:18px; top:50%; right:-20px;
    transform:translateY(-50%); background:url('../../img/common/ico_download.png') no-repeat center center / contain;}
.gu_table tbody td span.down_icon:hover:before{background:url('../../img/common/ico_download_hov.png') no-repeat center center / contain; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
.gu_table .noti {font-size: 16px;line-height: 28px;vertical-align: middle;padding: 20px 0 0 80px;color: #444;}
.gu_table .noti a:hover {opacity: .6;border-bottom: 1px solid #a5a5a5;}

/* 페이징 */
.gu_paging {text-align:center; font-size:0;font-family:"HDFont", sans-serif;font-weight: 400; 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: #000;
    -webkit-transition: height 0.2s;
    -moz-transition: height 0.2s;
    -ms-transition: height 0.2s;
    -o-transition: height 0.2s;
    transition: height 0.2s;}
.no-mobile .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;}

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

.gu_caption_area {width:100%;margin-top:25px;*zoom:1; text-align:right;color:#999; font-size:16px;}
.gu_caption_area:after {display:block;content:"";clear:both;}
.gu_caption_area .right_caption{display:inline-block;}

/*caption add*/
.gu_caption_area.left{text-align:left;}
.gu_caption_area.left p{color:#222; margin-bottom:60px;}
.gu_caption_area.d_flex{display:flex; justify-content:space-between;}
.gu_caption_area .left_box,
.gu_caption_area .right_box{flex:1 0 auto;}
.gu_caption_area .left_caption {text-align:left; color:#222;}

.gu_ico_drag {display:none;}


/* =================================== 디테일 페이지 =================================== */
/* 리스트-디테일 */
.gu_detail_view {position:relative;}
.gu_detail_view .gu_detail_top {border-bottom:1px solid #e5e5e5;padding-bottom:60px; text-align:center;}
.gu_detail_view .gu_detail_top .gu_title {padding-bottom:30px;}
.gu_detail_view .gu_detail_top .date {color:#222; display:inline-block; vertical-align:bottom;}
.gu_detail_view .gu_detail_top .new {color:#222; display:inline-block; vertical-align:bottom; margin-left:15px;}

.gu_detail_view .gu_detail_middle {padding:60px 0 110px;word-break:break-all;}
.gu_detail_view .gu_detail_middle .img_area {margin-bottom:60px; text-align:center;}
.gu_detail_view .gu_detail_middle .img_area .caption {padding:30px 25px;background:#f5f5f5;margin:0 auto;box-sizing:border-box}
.gu_detail_view .gu_detail_middle img {max-width:100%;}

.gu_detail_view .gu_detail_file {padding:25px 40px 5px; border-top:1px solid #e5e5e5;font-size:0;}
.gu_detail_view .gu_detail_file > * {display:inline-block; vertical-align:top;}
.gu_detail_view .gu_detail_file > span {color:#999;margin-right:40px; line-height:1;}
.gu_detail_view .gu_detail_file > .gu_btn_down {width:calc(100% - 100px); text-align:left;}
.gu_detail_view .gu_detail_file > .gu_btn_down a {margin-right:20px;margin-bottom:20px;}
.gu_detail_view .gu_detail_file > .gu_btn_down a:last-child {margin-right:0;}
.gu_detail_view .gu_detail_file > .gu_btn_down a span {padding-right:0; padding-left:29px;}
.gu_detail_view .gu_detail_file > .gu_btn_down a span:before {right:auto;left:0;}

.gu_detail_view .gu_detail_bottom {}
.gu_detail_view .gu_detail_bottom .gu_detail_btn_area {border-top:1px solid #444; border-bottom:1px solid #444;}
.gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div {color:#222;}
.gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div.no_data {padding:25px 38px;}
.gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div:first-child {border-bottom:1px solid #e1e1e1;}
.gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div a {display:inline-block; padding:25px 38px; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

.gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div img {vertical-align:middle; width:16px; height:16px; padding-right:38px;}
.gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div span {vertical-align:middle;max-width:calc(100% - 54px); display:inline-block; vertical-align:middle;}
.gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div.no_data span {color:#999;}
.gu_detail_view .gu_detail_bottom .gu_btn_area {text-align:right; margin-top:40px;}



/* =================================== 셀렉트박스 =================================== */
/* 셀렉트박스 */
.fclear .gu_sort_area {float:right;margin-bottom:40px;}
.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("../../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: 40px;color:#222;font-weight:500;white-space: nowrap; padding:3px 25px 17px 0;-ms-text-overflow: ellipsis;-o-text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden;-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:2px;left:0;bottom:0;background:rgba(0,0,0,.15);}
.gu_sort_area .gu_sort_name a:after {content:''; position:absolute;width:0;height:2px;left:0;bottom:0;background:#222222;-webkit-transition: width 0.3s;-moz-transition: width 0.3s;-ms-transition: width 0.3s;-o-transition: width 0.3s;transition: width 0.3s;}
.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:100%;width:auto; height:280px; max-height:280px; background-color:#222;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;}
.no-mobile .gu_sort_area .gu_selectbox .gu_selectbox_inner a:hover {background:#393939;}
.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_search_box .gu_sort_area .gu_selectbox {min-width:184px;}
.gu_sort_area .gu_inputbox .gu_inputbox_inner {border-bottom:2px solid #d9d9d9; margin-left:16px; width:200px; height:56px;display:inline-block; vertical-align:bottom; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.gu_sort_area .gu_inputbox .gu_inputbox_inner input {width:100%; height:100%; font-size:16px;}
.gu_sort_area .gu_inputbox a.btn_search {width:48px; height:48px;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;background:#333; display:inline-block; margin-left:24px;}
.gu_sort_area .gu_inputbox a.btn_search img {width:18px;height:18px; vertical-align:middle; padding:15px;}

/* 커스텀 내부 스크롤 */
.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%;}
.gu_custom_scroll .custom_scroll_content::-webkit-scrollbar {visibility: hidden;}
.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:0; -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;}


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


/* =================================== 그리드박스 =================================== */
.gu_grid_box {font-size:0;}
.gu_grid_box li {width:calc(50% - 12px); float:left; border-top:2px solid #64B6C9; padding:24px 0 60px; text-align:center;}
.gu_grid_box li.left {margin-right:24px;}
.gu_grid_box li .top .gu_box_sub_title {padding-bottom:24px; display:block;}
.gu_grid_box li .top .img {margin:30px 0 60px; display:inline-block;}
.gu_grid_box li .bottom {background-color:#f2f2f2; border-top:1px solid #dcdcdc; height:180px; box-sizing:border-box; position:relative;}
.gu_grid_box li .bottom p {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: 70%;}
.gu_grid_box:after {content:''; display:block; clear:both;}


/* 구조 */
/*

<ul class="gu_grid_box">
    <li class="left">
        <div class="top">
            <span class="gu_box_sub_title" th:utext="# {}"></span>
            <p class="img">
                <img th:src="@ {}" th:alt="# {}"/>
            </p>
        </div>
        <div class="bottom">
            <p class="gu_text" th:utext="# {}"></p>
        </div>
    </li>
    <li class="right">
        <div class="top">
            <span class="gu_box_sub_title" th:utext="# {}"></span>
            <p class="img">
                <img th:src="@ {}" th:alt="# {}"/>
            </p>
        </div>
        <div class="bottom">
            <p class="gu_text" th:utext="# {}"></p>
        </div>
    </li>
</ul>

*/

/* =================================== 심플그리드박스 =================================== */

.gu_simple_grid_box {margin-top:60px;}
.gu_simple_grid_box li {height:150px; border-top:2px solid #64b6c9; border-bottom:2px solid #bdbdbd;
box-sizing:border-box; margin-right:21px; width:calc(25% - 16px); float:left; position:relative;}
.gu_simple_grid_box li:last-child {margin-right:0;}
.gu_simple_grid_box li div {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%;}
.gu_simple_grid_box li div p {text-align:center;}
.gu_simple_grid_box:after {content:''; display:block; clear:both;}

/* 구조 */
/*
<ul class="gu_simple_grid_box">
    <li>
        <div>
            <p class="gu_box_sub_title" th:utext="# {}"></p>
            <p class="gu_box_desc" th:utext="# {}"></p>
        </div>
    </li>
    <li>
        <div>
            <p class="gu_box_sub_title" th:utext="# {}"></p>
            <p class="gu_box_desc" th:utext="# {}"></p>
        </div>
    </li>
</ul>
*/


/* =================================== 다이어그램 circle =================================== */

.gu_diagram {margin:80px auto 60px;text-align:center;}
.gu_diagram .circle {border: 2px solid #64b6c9; border-radius: 100%; position: relative; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin-right:40px;}
.gu_diagram .circle:last-child {margin-right:0 !important;}
.gu_diagram .circle:before {content: ''; position: absolute; border: 1px solid #c8c8c8; border-radius: 100%; 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%); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:calc(100% - 5px);height:calc(100% - 5px);}
.gu_diagram .circle {width: 210px; height: 210px;}
.gu_diagram .circle:last-child:after {display:none;}
.gu_diagram .circle .circle_inner {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:80%;}
.gu_diagram .circle .circle_inner p {font-size:18px;color:#222; display: inline-block; }


/*
<div class="gu_diagram fclear">
    <div class="circle">
        <div class="circle_inner">
            <p class="kr_sd_700" th:utext="# {}"></p>
        </div>
    </div>
</div>

*/

/* =================================== 브랜드 커뮤니케이션, 이노베이션 overview 지그재그 컨텐츠 구조 =================================== */

.gu_content_wrap{max-width: 1600px; min-height:440px; margin:0 auto 8%; position:relative;}
.gu_content_wrap .img{position:absolute; left:0; top:0; width:50%; max-width:680px }
.gu_content_wrap .img img{width:100%;}
.gu_content_wrap .gu_content{text-align:right;}
.gu_content_wrap .gu_content .text_area{position:relative; max-width:50%; float:right; margin-top: -45px;}
.gu_content_wrap .gu_content .text_area .number{font-size:200px; line-height:200px; color:#222; opacity:.05; font-family:"HDFont", sans-serif; font-weight:700;}
.gu_content_wrap .gu_content .text_area .title{font-size:32px; line-height:42px; color:#222; font-weight:700; margin-top:-80px;}
.gu_content_wrap .gu_content .text_area .gu_text{padding-top:40px; padding-left:50px;}
.gu_content_wrap:nth-of-type(odd) .gu_content .text_area .gu_text{padding-left:0px; padding-right:50px;}
.gu_content_wrap:nth-of-type(odd) .gu_content .text_area{float:left;}
.gu_content_wrap:nth-of-type(odd) .img{right:0; left:inherit;}
.gu_content_wrap:nth-of-type(odd) .gu_content {text-align: left;}
.gu_content_wrap:nth-of-type(odd) .gu_content .text_area .title{right:inherit; left:0;}
.gu_content_wrap .gu_content .text_area .btn{margin-top:40px;}
.gu_content_wrap:nth-of-type(odd) .gu_content:after{content:''; display:block; clear:both;}

/* 구조
<div class="gu_content_wrap">
    <div class="img">
        <img th:src="@{/img/}" th:alt="#{}"/>
    </div>
    <div class="gu_content">
        <div class="text_area">
            <div class="number">03</div>
            <div class="title" th:utext="#{}"></div>
            <div class="gu_text" th:utext="#{}"></div>
            <a href="javascript:;" class="btn btn-arrow">
                <span class="label" th:utext="#{main.btn.more}"></span>
                <i class="arrow"></i>
            </a>
        </div>
    </div>
</div>
*/

/*/!* ================================== Laptop css ================================== *!/*/
@media all and (max-width: 1280px) {

    .gu_content_wrap{min-height:450px; margin-bottom:5%;}
}




/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {



    /* 키비쥬얼 */
    #SUB_KEYVISUAL .gu_sub_top {padding:0 20px;}
    #SUB_KEYVISUAL .gu_sub_top .sec_inner {height:200px;}
    #SUB_KEYVISUAL .gu_sub_top .kv_img_box {height:200px;}
    #SUB_KEYVISUAL .gu_sub_top .kv_img_box video {min-height:100%;width:auto;}
    #SUB_KEYVISUAL .gu_sub_top h1 {font-size:40px; line-height:50px;}
    #SUB_KEYVISUAL .gu_sub_top h1 span {font-size:16px; line-height:24px;}

    /* 인디케이터 */
    #INDICATOR {display:none;}

    /* 레이아웃, 타이틀 */
    .gu_content h2.gu_title {font-size:24px; line-height:32px; padding-bottom:45px;}
    .gu_content h2.gu_title_en {font-size:28px; line-height:38px; padding-bottom:45px;}
    .gu_content .gu_sub_title {font-size:16px; line-height:26px; margin-bottom:45px;}
    .gu_content .gu_sub_title.gu_desc {margin-top:-35px;}
    .gu_content .gu_box_title {font-size:18px; line-height:26px;margin-bottom:45px;}
    .gu_content .gu_text {font-size:14px; line-height:24px;}
    .gu_content .gu_text_en{font-size:14px; line-height:24px;}
    .gu_content .gu_main_title {font-size:16px; line-height:26px; margin-bottom:45px;}
    .gu_content .gu_main_title_en {font-size:16px; line-height:26px; margin-bottom:45px;}
    .gu_content .gu_main_title.gu_desc {margin-top:-35px;}
    .gu_content .gu_main_text {font-size:16px; line-height:24px;}
    .gu_content .gu_main_text_en{font-size:16x; line-height:24px;}

    .gu_grid {margin-top:60px;}

    /* 네모 버튼 (자세히 보기 등) */
    .gu_btn_area .gu_btn {height: 42px;padding: 0 14px;}
    .gu_btn_area .gu_btn.btn_arrow .arrow {width: 14px;height: 14px;right:16px;}
    .gu_btn_area .gu_btn.btn_arrow .outlink {width: 14px;height: 14px;right:16px;}
    .gu_btn_area .gu_btn .label {font-size: 12px;}
    .gu_btn_area .gu_btn.btn_arrow .label {padding-right:26px;}
    .no-mobile .gu_btn_area .gu_btn.btn_arrow:hover .arrow {right:16px;}
    .gu_btn_area .gu_btn:before {background: #fff; color:#222; border-color: #b2b2b2; width: 100%; height: calc(100% + 2px); position:static; pointer-events:none; }
    .gu_btn_area .gu_btn.btn_white:hover {color: #222;}
    .gu_btn_area .gu_btn.btn_arrow.btn_white:hover .arrow {background-image: url(../../img/common/icon/icon-arrowright.svg);}
    .gu_btn_area .gu_btn.btn_arrow.btn_white:hover .outlink {background-image: url(../../img/common/ico_outlink_black.svg);}


    /* 다운로드 버튼 */
    .gu_btn_down {text-align:left;}
    .gu_btn_down a {font-size: 12px;}
    .gu_btn_down a span {padding-right: 23px;}
    .gu_btn_down a span:before {width: 14px;height: 14px;}

    /*  테이블 안 다운로드 버튼 */
    .gu_table tbody td span.down_icon:before{width:14px; height:14px; right:-23px; background:url('../../img/common/ico_download.png') no-repeat center center / contain;}
    .gu_table tbody td span.down_icon:hover:before{background:url('../../img/common/ico_download.png') no-repeat center center / contain;}

    /* 셀렉트박스 */
    .gu_sort_area .gu_sort_name {width: 136px;height: 100%; position:relative;}
    .gu_sort_area .gu_sort_name:before {width: 14px;height: 14px;bottom:15px;}
    .gu_sort_area .gu_sort_name a {font-size: 14px;height: 36px;padding:8px 20px 14px 0;}
    .gu_sort_area .gu_selectbox {max-height:180px;}
    .gu_sort_area .gu_selectbox .gu_selectbox_inner a {font-size:14px; height:36px; line-height:36px; padding-left:14px;}
    .gu_sort_area .gu_inputbox .gu_inputbox_inner {height:44px; margin-left:12px;}
    .gu_sort_area .gu_inputbox .gu_inputbox_inner input {font-size:14px;}
    .gu_sort_area .gu_inputbox a.btn_search {width:44px;height:44px; margin-left:12px;}
    .gu_sort_area .gu_inputbox a.btn_search img {padding:13px;}
    .gu_custom_scroll > .pane {visibility:visible;opacity:1}
    .gu_custom_scroll > .pane > .slider:after {height:90%;}

    .gu_search_box .gu_sort_area .gu_selectbox {min-width:136px;}

    /* 3뎁스 탭 */
    .gu_tab_depth3 ul {width: 100%; height: 56px;}
    .gu_tab_depth3 ul li {margin: 0 21px;height: 56px;}
    .gu_tab_depth3 ul li a {font-size: 14px; line-height:56px;}
    .gu_tab_depth3 ul li a:before {bottom: 15px;}
    .gu_tab_depth3 ul li a:after {width:1px;height:14px;right:-21px;}
    .gu_tab_depth3 ul li a:hover{color: rgba(255,255,255,.42)}

    /* 4뎁스 텝 */
    .gu_tab_depth4 {margin:0 0 60px;}
    .gu_tab_depth4 ul {width: 100%;}
    .gu_tab_depth4 ul li a {font-size: 13px !important; padding:0 20px 18px !important; line-height:1 !important; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
    .gu_tab_depth4 ul li.on a {color: #000;}
    .gu_tab_depth4 ul li.on a:before {height: 3px;}
    .no-mobile .gu_tab_depth4 ul li a:hover {color: rgba(0,0,0,.42);}

    /* 3뎁스 스크롤 */
    .gu_tab_depth3 {height: 56px; overflow: hidden;}
    .gu_tab_depth3 ul {text-align: center; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; box-sizing: border-box; font-size: 0; height: 62px;}
    .gu_tab_depth3 ul li {display: inline-block; vertical-align: top; line-height: 1; height:56px;}

    /* 4뎁스 스크롤 */
    .gu_tab_depth4 {height: 42px; overflow: hidden;}
    .gu_tab_depth4:before {bottom:10px;}
    .gu_tab_depth4 ul {text-align: center; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; box-sizing: border-box; font-size: 0; height: 46px;}
    .gu_tab_depth4 ul li {display: inline-block; vertical-align: top; line-height: 1; height: 32px;width:auto !important;}
    .gu_tab_depth4 ul li a:before {bottom: -1px;}
    .gu_tab_depth4.mobile {height: 32px;}
    .gu_tab_depth4.mobile:before {bottom:0;}

    /* swiper */
    .gu_swiper .swiper-container .swiper-slide .title {margin-top:30px; padding-top:30px; font-size:16px; line-height:26px;}
    .gu_swiper .swiper-container .direction_area .slide_empty {margin-bottom:30px;}
    .gu_swiper .swiper-container .direction_area .swiper-pagination {font-size:13px; line-height:24px;}

    /* 테이블 */
    .gu_table {overflow:scroll;}
    .gu_table thead th {font-size:14px; line-height:24px;padding: 14px 6px;}
    .gu_table thead th:first-child {padding-left: 12px;}
    .gu_table thead th:last-child {padding-right: 12px;}
    .gu_table tbody td {font-size: 14px;line-height: 24px;padding: 18px 6px;color: #444;}
    .gu_table tbody td:first-child {padding-left: 12px;}
    .gu_table tbody td:last-child {padding-right:12px;}
    .gu_caption_area {margin-top:15px;font-size:13px;}
    .no-mobile .gu_table tbody tr:hover {background:#fff;}
	.gu_table .noti {font-size: 14px;line-height: 24px;padding: 18px 0 0 60px;color: #444;}

    /* 라인 */
    .gu_line {margin:55px auto;}

    /* 다이어그램 circle */
    .gu_diagram {margin:50px auto 60px;max-width:652px !important;}
    .gu_diagram .circle .circle_inner p {font-size:13px; line-height:24px;}

    /* 그리드박스 */
    .gu_grid_box li {padding:20px 0 30px;}
    .gu_grid_box li .top .gu_box_sub_title {padding-bottom:20px;}

    /* 심플 그리드박스 */
    .gu_simple_grid_box {margin-top:50px;}
    .gu_simple_grid_box li {height:100px;}

    /* 리스트-디테일 */
    .gu_detail_view .gu_detail_top .gu_title {padding-bottom:15px;}
    .gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div a {padding:20px;}
    .gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div.no_data {padding:20px;}
    .gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div img {padding-right:20px;}
    .gu_detail_view .gu_detail_bottom .gu_detail_btn_area>div span {max-width:calc(100% - 36px);}
    .gu_detail_view .gu_detail_bottom .gu_btn_area {margin-top: 28px;}


    /* 페이징 */
    .gu_paging {margin-top:35px;}
    #video_download{font-size:12px !important; margin-top:42px;}
    #removed-select-box{font-size:12px !important; margin-top:42px;}


    /* =================================== 브랜드 커뮤니케이션, 이노베이션 overview 지그재그 컨텐츠 구조 =================================== */
    .gu_content_wrap{min-height:250px; margin-bottom:10%;}
    .gu_content_wrap .gu_content {padding: 0 50px;}
    .gu_content_wrap .gu_content .text_area{margin-top: -30px;}
    .gu_content_wrap .gu_content .text_area .number{font-size:150px; line-height:150px;}
    .gu_content_wrap .gu_content .text_area .title{font-size:24px; line-height:32px; margin-top: -60px;}
    .gu_content_wrap .gu_content .text_area .gu_text {padding-top: 70px; }
    .gu_content_wrap .gu_content .text_area .btn {margin-top: 30px;}



	#MEDIA .gu_btn_down {
	margin-top: -64px;
    margin-bottom: 15px;
		}

	#MEDIA .gu_btn_down a {
    font-size: 14px;
	}
	
	
	#footer .footer-menu li a span img.download{width:13px; height:13px;}
	
		#zh_integrated img.download {
    padding-left: 7px;
    width: 13px;
    height: 13px;
    margin-top: -3px;
	}
	#zh_company img.download {
    padding-left: 7px;
    width: 13px;
    height: 13px;
    margin-top: -3px;
	}

	#en_company img.download {
    padding-left: 7px;
    width: 13px;
    height: 13px;
    margin-top: -3px;
	}
	#en_integrated img.download {
    padding-left: 7px;
    width: 13px;
    height: 13px;
    margin-top: -3px;
	}
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {


    /* 키비쥬얼 */
    #SUB_KEYVISUAL .gu_sub_top h1 {font-size:36px; line-height:45px;}

    /* 레이아웃, 타이틀 */
    .gu_content h2.gu_title {padding-bottom:40px;}
    .gu_content h2.gu_title_en {font-size:28px; line-height:38px; padding-bottom:40px;}
    .gu_content .gu_sub_title {font-size:14px; line-height:26px; margin-bottom:40px;}
    .gu_content .gu_sub_title.gu_desc {margin-top:-35px;}
    .gu_content .gu_box_title {margin-bottom:35px;}
    .gu_content .gu_text {font-size:13px; line-height:24px;}
    .gu_content .gu_box_sub_title {font-size:16px; line-height:24px;}
    .gu_content .gu_box_desc {font-size:13px; line-height:24px;}

    /* 네모 버튼 (자세히 보기 등) */
    .gu_btn_area .gu_btn.btn_arrow .arrow {width: 12px; height: 12px;}
    .gu_btn_area .gu_btn.btn_arrow .label {padding-right:23px;}

    /* 4뎁스 텝 */
    .gu_tab_depth4 ul li {min-width:auto !important;}

    /* 그리드 박스 */
    .gu_grid_box li {width:100%;margin-right:0; padding:20px 0;}
    .gu_grid_box li .top .img {margin:10px 0 45px;}
    .gu_grid_box li .bottom {height:100% !important; padding:35px 30px;}
    .gu_grid_box li .bottom p {position:relative; width:100%; left:auto;top:auto; margin:0 auto;-webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none;}

    /* swiper */
    .gu_swiper {margin-top:50px;}
    .gu_swiper .swiper-container .direction_area .swiper-pagination {font-size:12px; padding-right:22px;width:45px;}
    .gu_swiper .swiper-container .direction_area .swiper-progress {width:calc(100% - 155px);}
    .gu_swiper .swiper-container .direction_area .btn_arrow > div {width:8px;height:13px;}
    .gu_swiper .swiper-container .direction_area .btn_arrow > div:before {padding:15px;}
    .gu_swiper .swiper-container .direction_area .swiper-button-prev {margin-left:35px;}
    .gu_swiper .swiper-container .direction_area .swiper-button-next {margin-left:35px;}

    /* 다이어그램 circle */
    .gu_diagram {margin:40px auto 40px;}
    .gu_diagram .circle {width:135px !important;height:135px !important;margin-right:0 !important;margin-bottom:10px !important;}
    .gu_diagram .circle:nth-child(odd) {margin-right:10px !important;}
    .gu_diagram .circle:nth-last-child(1), .gu_diagram .circle:nth-last-child(2) {margin-bottom:0 !important;}

    /* 스크롤 + 검색란 */
    .fclear .gu_sort_area {margin-bottom:30px;}
    .gu_search_box .gu_sort_area .gu_inputbox {margin-left:16px;}
    .gu_sort_area .gu_inputbox .gu_inputbox_inner {margin-left:0;width:calc(100% - 44px);}
    .gu_sort_area .gu_inputbox a.btn_search {margin-left:0;}

    /* 리스트-디테일 */
    .gu_detail_view .gu_detail_top .gu_title {font-size:18px; line-height:26px;}

    /* 테이블 */
    .gu_table tbody td {font-size:13px;}
	.gu_table .noti {font-size: 13px;padding: 15px 0 0 10px;}

    /* 테이블 - 가로스크롤 아이콘 */
    .gu_ico_drag {display:block;position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;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;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;}

    /*  테이블 안 다운로드 버튼 */
    .gu_table tbody td span.down_icon:before{right:-10px;}

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

    /* 테이블 - 모바일 가로스크롤 */
    .gu_table.scrollX {overflow:auto;}
    .gu_table.scrollX table {min-width:500px;}
    .gu_table.scrollX.x_800 table {min-width:800px;}
    .gu_table.scrollX.x_700 table {min-width:700px;}
    .gu_table.scrollX.x_600 table {min-width:600px;}
    .gu_table.scrollX.x_500 table {min-width:500px;}
    .gu_table.scrollX.x_400 table {min-width:400px;}

    /* =================================== 디테일 페이지 =================================== */
    /* 리스트-디테일 */
    .gu_detail_view .gu_detail_middle .img_area .caption {padding: 18px 17px; }
    .gu_detail_view .gu_detail_middle .img_area {margin-bottom: 35px;}



    /* =================================== 브랜드 커뮤니케이션, 이노베이션 overview 지그재그 컨텐츠 구조 =================================== */
    .gu_content_wrap .gu_content {padding: 0 20px;}
    .gu_content_wrap .img{position:static; width:calc(100% - 20px);}
    .gu_content_wrap .gu_content .text_area {margin-top: 0px; max-width:100%;}
    .gu_content_wrap .gu_content .text_area .gu_text {padding-top: 50px; padding-left: 0%; }
    .gu_content_wrap:nth-of-type(odd) .gu_content .text_area .gu_text {padding-right: 0%;}
    .gu_content_wrap .gu_content .text_area .btn{margin-bottom:80px;}

    /* 페이징 */
    .gu_paging a {margin:0 5px;}
    .gu_paging a.paging_ellipsis {margin:0 5px;}
    .gu_paging .btn_arrow.next {margin-right:15px;}
    .gu_paging .btn_arrow.right {margin-right:15px;}
    
	#MEDIA .gu_btn_down {
		margin-top: -64px;
    	margin-bottom: 15px;
		}

	#MEDIA .gu_btn_down a {
    font-size: 11px;
	}
	
	.footer-menu li a span img.download{width:12px; height:12px;}
	
	#zh_integrated img.download {
    padding-left: 7px;
    width: 12px;
    height: 12px;
    margin-top: -2px;
	}
	#zh_company img.download {
    padding-left: 7px;
    width: 12px;
    height: 12px;
    margin-top: -3px;
	}

	#en_company img.download {
    padding-left: 7px;
    width: 12px;
    height: 12px;
    margin-top: -2px;
	}
	#en_integrated img.download {
    padding-left: 7px;
    width: 12px;
    height: 12px;
    margin-top: -2px;
	}
	
	#ko_company img.download {
    padding-left: 7px;
    width: 12px;
    height: 12px;
    margin-top: -1px;
	}
	#ko_integrated img.download {
    padding-left: 7px;
    width: 12px;
    height: 12px;
    margin-top: -1px;
	}
	
	#video_download{font-size:12px !important; margin-top:43px;}
	#removed-select-box{font-size:12px !important; margin-top:43px; margin-left:-95px;}

}