#HEADER {overflow:hidden;} #HEADER.finish {overflow: visible;} #HEADER #GNB .gnb_inner .depth1_area ul.depth1_ul>li>a{color: #000} /* ================================== desktop css ================================== */ .container{max-width: 100%} #BAND_BANNER {position:relative; width:100%; height:100px;} #BAND_BANNER .banner_inner {display: block; width:100%; height:100%; margin:0 auto; } #BAND_BANNER .banner_inner .thumb {position:relative; display: block; width:100%; height:100%;} #BAND_BANNER .btn_close {display: block; position:absolute; top:35px; right:80px;} #MAIN_KEYVISUAL{height: calc(100vh - 88px);min-height: 768px} #MAIN_KEYVISUAL .sec_inner{position: relative} #MAIN_KEYVISUAL .main_keyvisual{height: calc(100% - 112px);margin: 0 36px;min-height:656px } #MAIN_KEYVISUAL .main_keyvisual .sec_inner{height: 100%;min-height:656px;overflow: hidden;width: 100%;margin: 0 auto;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item {position:absolute; top:0; left:0; width:100%; height:100%;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box {position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; background-color:rgba(0,0,0,0.1);} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .box_img {position:absolute; top:0; left:0; width:100%; height:100%;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .box_img .bg_box_inner {position:absolute; top:0; left:0; width:100%; height:100%;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .box_img .video_area {} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .box_img .video_area:before {content: '';position: absolute;top: 0;left: 0;width:calc(100% + 16px);;height: 100%;background: rgba(0,0,0,.1);z-index: 1} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .box_img .video_area video{ position: absolute;top: 50%;left: 50%;width: auto;height: auto;max-height: none;max-width: none;min-height: 100%;min-width: 100%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .title {position:absolute; top:112px; left:120px; font-size:56px; line-height:72px; color:#fff;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .content {position:absolute; bottom:0; right:64px; width:480px; height:218px; font-size:24px; line-height:40px; color:#fff;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .rectangle_box {position:absolute; bottom:90px; right:368px; width:256px; height:256px;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .rectangle_box .rectangle {position:absolute; top:0; left:0; width:100%; height:100%;} /* main set inmotion */ #GNB .gnb_inner .logo_area > a {transform:translate(0,88px); opacity:0;} #GNB .gnb_inner .depth1_area ul li {transform:translate(0,88px); opacity:0;} #GNB .gnb_inner .other_services .language_area {transform:translate(0,88px); opacity:0;} #GNB .gnb_inner .other_services .clear_line {transform:translate(0,88px); opacity:0;} #GNB .gnb_inner .other_services .search_area {transform:translate(0,88px); opacity:0;} #GNB .gnb_inner .other_services .other_menu {transform:translate(0,88px); opacity:0;} #GNB.start_in .gnb_inner .logo_area > a {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s;} #GNB.start_in .gnb_inner .depth1_area ul li {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s;} #GNB.start_in .gnb_inner .depth1_area ul li:nth-of-type(1) {transition-delay:0.1s;} #GNB.start_in .gnb_inner .depth1_area ul li:nth-of-type(2) {transition-delay:0.15s;} #GNB.start_in .gnb_inner .depth1_area ul li:nth-of-type(3) {transition-delay:0.2s;} #GNB.start_in .gnb_inner .depth1_area ul li:nth-of-type(4) {transition-delay:0.25s;} #GNB.start_in .gnb_inner .depth1_area ul li:nth-of-type(5) {transition-delay:0.3s;} #GNB.start_in .gnb_inner .other_services .language_area {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s; transition-delay:0.35s;} #GNB.start_in .gnb_inner .other_services .clear_line {transform:translate(0,0); opacity:1; transition:transform 0.81s, opacity 1s; transition-delay:0.4s;} #GNB.start_in .gnb_inner .other_services .search_area {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s; transition-delay:0.45s;} #GNB.start_in .gnb_inner .other_services .other_menu {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s; transition-delay:0.5s;} #MAIN_FLOATING {position:absolute; top:0; left:0; z-index: 99;} #MAIN_FLOATING>div {display: inline-block;vertical-align: top;width:350px} #MAIN_FLOATING .contents {width:100%; background-color:#fff; display: inline-block;padding:0 16px;overflow: hidden;margin: 30px 10px;vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #MAIN_FLOATING .contents .title {text-align: left; width:100%;line-height:32px; font-size:24px; color:#000;padding: 35px 10px 15px; box-sizing: border-box;} #MAIN_FLOATING .contents .desc{height: auto;font-size: 16px;line-height: 28px;color: #444;overflow: hidden;position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #MAIN_FLOATING .contents .desc .custom_scroll_content{ position: relative;overflow: auto;overflow-x: hidden;top: 0;right: 0;bottom: 0;left: 0;width: 95%;height: 97%;padding: 0 10px 10px 10px} #MAIN_FLOATING .contents .desc .pane {display:none; visibility:hidden; position: absolute;width: 5px;right: 0;top: 0;bottom: 0;opacity: 1; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s;} #MAIN_FLOATING .contents .desc .pane > .slider{position: relative; margin: 0 1px; padding:5px 0; box-sizing: border-box;} #MAIN_FLOATING .contents .desc .pane > .slider:after{content:""; display: block; width:100%; height:100%; background:rgba(0,0,0,0.6);} #MAIN_FLOATING .contents .desc .custom_scroll_content:hover > .pane, #MAIN_FLOATING .contents .desc .pane.active, #MAIN_FLOATING .contents .desc .pane.flashed{visibility : visible; opacity: 0.99;} @media all and (max-width: 766px) { #MAIN_FLOATING>div {width:320px;margin-left:-20px} /* #MAIN_FLOATING .contents .desc{height:230px} */ } /*#MAIN_FLOATING .contents .desc img {width:100%;}*/ #MAIN_FLOATING .contents .btns {width:100%; text-align: right; height:55px; line-height:55px; border-top:1px solid rgba(0,0,0,.1); font-size:0;padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #MAIN_FLOATING .contents .btns a {display: inline-block; font-size:14px;} #MAIN_FLOATING .contents .btns a.btn_notToday{float: left;color: #666;padding-left: 28px;position: relative} #MAIN_FLOATING .contents .btns a.btn_notToday:before{content: '';position:absolute;top:50%;left:0;margin-top:-10px;display: inline-block;vertical-align: middle;width: 18px;height: 18px;border: 1px solid rgba(0,0,0,.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #MAIN_FLOATING .contents .btns a.btn_close{float: right;} #MAIN_FLOATING .contents .btns a.btn_close:before {content:""; display: inline-block; ;width: 15px;height: 15px;background:url("../../images/common/ico_close_black.png") no-repeat 0 0 / contain; margin-left:5px;vertical-align: text-top;margin-top: -1px} #MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a{font-size: 14px;line-height: 28px;color: #444} #MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a span{padding-right: 25px} #MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a span:before{width: 18px;height: 18px;margin-top: -9px} /* item set */ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item {visibility: hidden; opacity:0;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box {width:0; transition:width 1s 0.3s cubic-bezier(.39,0,.12,.99);} /*#MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .bg_box_inner {transform:scale(1);}*/ /*#MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .bg_box_inner {*/ /*-webkit-animation: img-motion2 1s;*/ /*-o-animation: img-motion2 1s;*/ /*animation: img-motion2 1s;*/ /*animation-delay : 5s*/ /*}*/ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .box_img {transform:scale(1.2); transition:transform 1.5s; transform-origin:100% 50%;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .box_img .bg_box_inner{transform-origin:50% 50%;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .rectangle_box {transition:transform 4s 0.3s cubic-bezier(.3,0,.07,.99);} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .rectangle_box .rectangle {width:0; transition:width 0.5s, background-color 1s 0.5s;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .title {transform:translate(0, 50px); opacity:0; transition:all 0.8s 0.7s;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .content {transform:translate(0, 50px); opacity:0; transition:all 0.8s 0.9s;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(1) .rectangle_box {transform:rotate(0deg);} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(2) .rectangle_box {transform:rotate(5deg);} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(3) .rectangle_box {transform:rotate(-2deg);} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(1) .rectangle_box .rectangle {background-color:#0088ce;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(2) .rectangle_box .rectangle {background-color:#00ad83;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(3) .rectangle_box .rectangle {background-color:#0d28bd;} /* item on */ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on {visibility:visible; opacity:1;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on .bg_box {width:100%; } /*#MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on .bg_box .bg_box_inner {transform:scale(1.05);transition-delay: 1.5s}*/ /*#MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on .bg_box .bg_box_inner {*/ /*-webkit-animation: img-motion 10s cubic-bezier(.39,0,.12,.99);*/ /*-o-animation: img-motion 10s cubic-bezier(.39,0,.12,.99);*/ /*animation: img-motion 10s cubic-bezier(.39,0,.12,.99);*/ /*animation-delay : 1s*/ /*}*/ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on .bg_box .box_img {transform:scale(1);} /* #WRAP.none_ie #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on .bg_box .box_img .bg_box_inner{transform:scale(1.1); transition:transform 20s; transition-delay: 1s} */ /* keframes for main scale animation*/ @keyframes slide_animation {0% {transform: scale(1);} 100% {transform: scale(1.1);}} @-webkit-keyframes slide_animation {0% {transform: scale(1);} 100% {transform: scale(1.1);}} @-moz-keyframes slide_animation {0% {transform: scale(1);} 100% {transform: scale(1.1);}} @-ms-keyframes slide_animation {0% {transform: scale(1);} 100% {transform: scale(1.1);}} @-o-keyframes slide_animation {0% {transform: scale(1);} 100% {transform: scale(1.1);}} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on .bg_box .box_img .bg_box_inner { -webkit-animation: slide_animation 20s 1s; -moz-animation: slide_animation 20s 1s; -ms-animation: slide_animation 20s 1s; -o-animation: slide_animation 20s 1s; animation: slide_animation 20s 1s; } #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on .rectangle_box .rectangle {width:100%;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on .title {transform:translate(0, 0); opacity:1;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on .content {transform:translate(0, 0); opacity:1;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(1).on .rectangle_box {transform:rotate(18deg);} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(2).on .rectangle_box {transform:rotate(-4deg);} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(3).on .rectangle_box {transform:rotate(6deg);} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(1).on .rectangle_box .rectangle { background-color:#0d28bd;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(2).on .rectangle_box .rectangle { background-color:#0088ce;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(3).on .rectangle_box .rectangle { background-color:#00ad83;} /* item off */ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.off .bg_box {width:0; right:0; left:auto; transition:width 1s cubic-bezier(.95,.01,.65,.99);} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.off .bg_box .box_img {right:0; left:auto; transform:scale(1.1); transform-origin: 0% 50%;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.off .rectangle_box .rectangle {width:0; right:0; left:auto;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.off .title {transform:translate(0, -50px); opacity:0; transition-delay:0s;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.off .content {transform:translate(0, -50px); opacity:0; transition-delay:0.1s;} @keyframes img-motion { 0%{transform:scale(1);} 100%{transform:scale(1.05);} } @keyframes img-motion2 { 0%{transform:scale(1.05);} 100%{transform:scale(1);} } /* cursor */ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over {position:absolute; top:0; left:0; width:100%; height:100%; cursor:none;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over a {display: block; position:absolute; top:0; left:0; width:50%; height:100%; cursor: none;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over a.mouse_over_r {left:50%;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over .cursor {position:absolute; top:0; left:0; opacity:0; transition:opacity 0.3s; pointer-events: none; mix-blend-mode: exclusion;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over .cursor.left:before {opacity:1;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over .cursor.left:after {opacity:0;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over .cursor.right:before {opacity:0;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over .cursor.right:after {opacity:1;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over .cursor:before {content:""; position:absolute; top:-40px; left:-40px; width:80px; height:80px; background:url("../../images/main/main_cursor_l.svg") no-repeat 0 0; background-size:80px; opacity:0;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over .cursor:after {content:""; position:absolute; top:-40px; left:-40px; width:80px; height:80px; background:url("../../images/main/main_cursor_r.svg") no-repeat 0 0; background-size:80px; opacity:1;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over:hover .cursor {opacity:1;} /* carousel */ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel {position:absolute; bottom:40px; left:120px;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .carousel_inner{display: inline-block;vertical-align: top} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .carousel_inner a {position:relative; display: inline-block; width:80px; height:4px; background-color:rgba(255,255,255,0.55); margin-right:6px;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .carousel_inner a.on:after {width:100%; transition:width 5s linear;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .carousel_inner a:before {content:""; position:absolute; top:-25px; left:0; width:100%; height:50px;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .carousel_inner a:after {content:""; display:block; width:0; height:100%; background-color:#fff;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel.paused .carousel_inner a.on:after {width:100%; transition:width 0.3s;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .btn_playStop{position: relative;display: inline-block;width: 24px;height: 24px;top: -1px;left: 6px;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .btn_playStop:before {content: "";position: relative;width: 100%;height: 100%;display: block;background: url("../../images/main/ico_kv_pause.png") no-repeat 0 0 / contain;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .btn_playStop:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: block;background: url("../../images/main/ico_kv_play.png") no-repeat 0 0 / contain;opacity: 0;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .btn_playStop.on:before {opacity: 0;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .btn_playStop.on:after {opacity: 1;} #MAIN_KEYVISUAL .mobile-only {display: none;} #MAIN_KEYVISUAL .pc-only {display: block;} /* main quick menu */ #MAIN_KEYVISUAL .main_quick{margin: 0 auto;max-width: 1920px;padding: 0 96px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #MAIN_KEYVISUAL .main_quick ul {font-size: 0;} #MAIN_KEYVISUAL .main_quick ul li {width:25%;height:112px;display: inline-block; vertical-align: middle;} #MAIN_KEYVISUAL .main_quick ul li a{display: block;width: 100%;height: 112px;line-height: 112px;text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #MAIN_KEYVISUAL .main_quick ul li .ico_img{display: inline-block;vertical-align: middle;position: relative;margin-right: 25px;} #MAIN_KEYVISUAL .main_quick ul li .ico_img img{display: inline-block;vertical-align: middle;width: 64px; -webkit-transition: opacity 0.1s; -moz-transition: opacity 0.1s; -ms-transition: opacity 0.1s; -o-transition: opacity 0.1s; transition: opacity 0.1s; } #MAIN_KEYVISUAL .main_quick ul li .ico_img img.on{position: absolute;top: 50%;left: 0;transform:translateY(-50%);opacity: 0} #MAIN_KEYVISUAL .main_quick ul li .ico_img img.mob{display: none} #MAIN_KEYVISUAL .main_quick ul li .txt { display: inline-block; position:relative;vertical-align: middle} #MAIN_KEYVISUAL .main_quick ul li .txt.link_out:after {content:''; position:absolute;right:-20px;top:50%;background:url(../../images/common/ico_outlink_quick.png) no-repeat center center / contain;width:12px;height:12px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);} #MAIN_KEYVISUAL .main_quick ul li .txt .title { font-size: 24px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -ms-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; } #MAIN_KEYVISUAL .main_quick ul li a:hover .ico_img img.off{opacity: 0} #MAIN_KEYVISUAL .main_quick ul li a:hover .ico_img img.on{opacity: 1} #MAIN_KEYVISUAL .main_quick ul li a:hover .txt .title{color: #0e2ac9} #MAIN_KEYVISUAL .main_quick ul li a:hover .txt.link_out:after {background-image:url(../../images/common/ico_outlink_quick_hov.png);} /* set inmotion quick menu */ #MAIN_KEYVISUAL .main_quick{transform:translate(0,112px); opacity:0;} #MAIN_KEYVISUAL .main_quick.start_in{transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay:0.65s;} /*2022 신규 ci 키비주얼용 임시 css*/ /* :lang(ko) #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item.on .bg_box .box_img .bg_box_inner {-webkit-animation: none;-moz-animation: none;-ms-animation: none;-o-animation: none;animation: none;} */ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-of-type(1).on .rectangle_box .rectangle { display: none;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-child(1) .content {top: 57%;left: 55%;transform: translate(-50%, -50%);width: auto;opacity:0;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .title {color: #333;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .mouse_over, #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel,#MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .btn_playStop{} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-child(1).on .content { -webkit-animation: newCI 6s 1.5s; -moz-animation: newCI 6s 1.5s; -ms-animation: newCI 6s 1.5s; -o-animation: newCI 6s 1.5s; animation: newCI 6s 1.5s; transition: opacity 0s 7.5s } @media (min-width: 767px){ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-child(1).on .content {opacity:1;} } @media (max-width: 766px){ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-child(1) .content {display: block;width: calc(100% - 32px);padding: 0 20px;margin: 0 16px;box-sizing: border-box;top: 50%;left: 0;transform: translate(0, 0);} :lang(en) #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-child(1) .content {top: 60%} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item:nth-child(1).on .content {opacity:1;} } @keyframes newCI {0% {opacity:0;} 70% {opacity: .5;} 100% {opacity: 1;}} @-webkit-keyframes newCI {0% {opacity:0;} 70% {opacity: .5;} 100% {opacity: 1;}} @-moz-keyframes newCI {0% {opacity:0;} 70% {opacity: .5;} 100% {opacity: 1;}} @-ms-keyframes newCI {0% {opacity:0;} 70% {opacity: .5;} 100% {opacity: 1;}} @-o-keyframes newCI {0% {opacity:0;} 70% {opacity: .5;} 100% {opacity: 1;}} /* main news */ #MAIN_NEWS {margin-top: 96px; } #MAIN_NEWS .news_wrap {margin: 0 96px 200px} #MAIN_NEWS .news_wrap .news_title{font-size: 48px;margin-bottom: 72px} #MAIN_NEWS .news_wrap ul {font-size: 0;} #MAIN_NEWS .news_wrap ul li {display: inline-block;vertical-align:top;width: calc(33.33% - 18px);margin-left: 24px;position: relative;margin-bottom: 32px; visibility: hidden;opacity: 0; -webkit-transform: translateY(200px); -moz-transform: translateY(200px); -ms-transform: translateY(200px); -o-transform: translateY(200px); transform: translateY(200px); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #MAIN_NEWS .news_wrap ul li:nth-child(3n+1){margin-left: 0;} #MAIN_NEWS .news_wrap ul li a{display: block} #MAIN_NEWS .news_wrap ul li a .inner{position: relative} #MAIN_NEWS .news_wrap ul li .img_area{position: relative;overflow: hidden} #MAIN_NEWS .news_wrap ul li .img_area:after {content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 5px;padding-left: 24px;font-size: 16px;color: #fff;line-height: 64px;z-index: 2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} #MAIN_NEWS .news_wrap ul li .img_area:before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url("../../images/main/news_shadow.png") no-repeat 0 0 / contain;z-index: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} #MAIN_NEWS .news_wrap ul li .img img{width: 100%} #MAIN_NEWS .news_wrap ul li .img{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;} #MAIN_NEWS .news_wrap ul li.type_news .img_area:after{background: #00AD83} #MAIN_NEWS .news_wrap ul li.type_yt .img_area:after{background: #005EB8} #MAIN_NEWS .news_wrap ul li a:hover{} #MAIN_NEWS .news_wrap ul li a:hover .img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #MAIN_NEWS .news_wrap ul li a:hover .img_area:before{visibility: visible;opacity: 1} #MAIN_NEWS .news_wrap ul li a:hover .img_area:after {height: 136px;} #MAIN_NEWS .news_wrap ul li.type_news a .icon_yt {display: none} #MAIN_NEWS .news_wrap ul li.type_news a .icon_more_arrow {display: block} #MAIN_NEWS .news_wrap ul li.type_yt a .icon_yt {display: block} #MAIN_NEWS .news_wrap ul li.type_yt a .icon_more_arrow {display: none} #MAIN_NEWS .news_wrap ul li a .icon_yt {position: absolute;top:50%;left:50%;margin-left:-32px;margin-top:-72px;width:64px;height:64px;background:rgba(0,0,0,.7);display: inline-block;vertical-align: middle;z-index: 3; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; transition: background 0.3s; } #MAIN_NEWS .news_wrap ul li a .icon_yt img {display: inline-block;padding:21px;width: 22px} #MAIN_NEWS .news_wrap ul li a .icon_more_arrow {position: absolute;right: 40px;width: 28px;display: inline-block;vertical-align: middle;z-index: 3;opacity: 0;top: 50%;transform: translateY(-50%); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } #MAIN_NEWS .news_wrap ul li a .icon_more_arrow img {display: inline-block;vertical-align: middle;width: 28px;} #MAIN_NEWS .news_wrap ul li.type_news a:hover .img_area:after {background-color: #00AD83} #MAIN_NEWS .news_wrap ul li.type_yt a:hover .img_area:after {background: #005EB8} #MAIN_NEWS .news_wrap ul li.type_news a:hover .icon_more_arrow {opacity: 1} #MAIN_NEWS .news_wrap ul li.type_yt a:hover .icon_yt {background-color: #005EB8} #MAIN_NEWS .news_wrap ul li .copy_box_in{position: absolute;bottom: 0;width: 100%;height: 136px;line-height: 136px;z-index: 2} #MAIN_NEWS .news_wrap ul li .copy_box_in .inner{padding: 32px 94px 32px 24px;width: 100%;position: absolute;top:50%;transform: translateY(-50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #MAIN_NEWS .news_wrap ul li.type_yt .copy_box_in .inner{padding: 32px 24px} #MAIN_NEWS .news_wrap ul li .copy_box_in .type{display:none;font-size: 18px;color: #666;margin-bottom: 18px;} #MAIN_NEWS .news_wrap ul li .copy_box_in .title{font-size: 22px;line-height: 36px;max-height:72px;-webkit-line-clamp: 2;color: #fff;} #MAIN_NEWS .news_wrap ul li .copy_box_in .date{display:none;font-size: 16px;color: #666} #MAIN_NEWS .news_wrap ul li:nth-last-child(-n+3) {margin-bottom: 0;} #MAIN_NEWS .news_wrap .btn_area {text-align: center;display: none} #MAIN_NEWS .news_wrap .btn_area a {position: relative; padding-right: 20px; font-weight: 600; font-size: 24px;} #MAIN_NEWS .news_wrap .btn_area a img {margin-top: 15px; margin-left: 16px;} /* set inmotion main news */ /*#MAIN_NEWS .news_wrap ul.on li{ visibility: visible;opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); transition-delay: 0.5s; }*/ #MAIN_NEWS .news_wrap ul li.on {visibility: visible;opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #MAIN_NEWS .news_wrap .btn_more_news{display: none} /* main search */ #MAIN_SEARCH {margin: 0 36px;position: relative;overflow: hidden} /*#MAIN_SEARCH .bg { width: 100%; height: 100%;}*/ /*#MAIN_SEARCH .bg img { position: absolute;width: 100%;min-width:1380px;}*/ #MAIN_SEARCH .bg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: #005EB8;} #MAIN_SEARCH .search_wrap {position: relative;max-width: 1920px;width :100%;margin: 0 auto; height: 440px;overflow: hidden;} #MAIN_SEARCH .search_wrap .txt { width: 100%;height: 100%;padding: 0 60px;vertical-align: middle;box-sizing:border-box;color: #ffffff; font-size: 0;margin: 0 36px} #MAIN_SEARCH .search_wrap .txt>div { display: inline-table;height: 100%; vertical-align: top; font-size: 15px;} #MAIN_SEARCH .search_wrap .txt>div.left {width:49%;margin-right: 70px;box-sizing: border-box;} #MAIN_SEARCH .search_wrap .txt>div.left .left_inner{display: table-cell;vertical-align: middle} #MAIN_SEARCH .search_wrap .txt>div.left .title { font-size: 48px; margin-bottom: 68px;color: #fff;line-height: 1} #MAIN_SEARCH .search_wrap .txt>div.left .input_box { position: relative; } #MAIN_SEARCH .search_wrap .txt>div.left .input_box input { width: 100%;border:0;background:#fff; font-size: 22px; line-height:1; padding: 21px 72px 20px 24px;outline:none;box-sizing: border-box;} #MAIN_SEARCH .search_wrap .txt>div.left .input_box input::placeholder {color:rgba(0,0,0,.4);} #MAIN_SEARCH .search_wrap .txt>div.left .input_box a { position: absolute;right:8px;top:0; padding: 16px;display: block;width: 32px;height: 32px;} #MAIN_SEARCH .search_wrap .txt>div.left .input_box a:after {content:'';background:url(../../images/common/btn_search_arrow_black.png) no-repeat center / contain; position:absolute; width:32px; height:32px;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-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s;} #MAIN_SEARCH .search_wrap .txt>div.left .input_box a:hover:after{background-image:url(../../images/common/btn_search_arrow_blue.png); margin-left:6px;} #MAIN_SEARCH .search_wrap .txt>div.left .input_box a.on:after{background-image:url(../../images/common/btn_search_arrow_blue.png); margin-left:6px;} #MAIN_SEARCH .search_wrap .txt>div.right { width:calc(51% - 70px);font-size: 0;padding-top: 22px} #MAIN_SEARCH .search_wrap .txt>div.right .recommend {text-align: center;display: table-cell;vertical-align: middle} #MAIN_SEARCH .search_wrap .txt>div.right .recommend .desc { font-size: 16px; font-weight: 600;margin-bottom: 30px;} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a { position: relative; display: inline-block; padding: 16px 40px 16px 16px;background:rgba(0,0,0,.25); font-size: 18px;margin-right: 9px; margin-bottom: 10px;} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a:after { content: ''; position: absolute;background:url(../../images/common/ico_arrow_white.png) no-repeat center / contain; width:7px;height:12px;top:50%;margin-top:-7px;right:16px;} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a:hover {background:#fff;color:#222;} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a:hover:after {background:url(../../images/common/ico_arrow_blue.png) no-repeat center / contain;} /* set inmotion main search */ #MAIN_SEARCH .bg:before{content: '';position: absolute;width: 100%;height: 100%;background: #fff;top: 0;right: 0;transition:width 0.5s 0.3s ease-in-out;} #MAIN_SEARCH .search_wrap .txt>div.left .title{transform:translate(0,20px); opacity:0;} #MAIN_SEARCH .search_wrap .txt>div.left .input_box{transform:translate(0,20px); opacity:0;} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a{transform:translate(0,20px);opacity:0;} #MAIN_SEARCH.start_in .bg:before{width: 0%} #MAIN_SEARCH.start_in .search_wrap .txt>div.left .title{transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s;transition-delay: 0.5s} #MAIN_SEARCH.start_in .search_wrap .txt>div.left .input_box{transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s;transition-delay: 0.65s} #MAIN_SEARCH.start_in .search_wrap .txt>div.right .recommend a{transform:translate(0,0); opacity:1; transition:transform 0.8s,opacity 1s;transition-delay: 0.85s} /* main set inmotion */ /* #GNB .gnb_inner .logo_area > a {transform:translate(0,88px); opacity:0;} #GNB .gnb_inner .depth1_area ul li {transform:translate(0,88px); opacity:0;} #GNB .gnb_inner .other_services .language_area {transform:translate(0,88px); opacity:0;} #GNB .gnb_inner .other_services .clear_line {transform:translate(0,88px); opacity:0;} #GNB .gnb_inner .other_services .search_area {transform:translate(0,88px); opacity:0;} #GNB .gnb_inner .other_services .other_menu {transform:translate(0,88px); opacity:0;} #GNB.start_in .gnb_inner .logo_area > a {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s;} #GNB.start_in .gnb_inner .depth1_area ul li {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s;} #GNB.start_in .gnb_inner .depth1_area ul li:nth-of-type(1) {transition-delay:0.1s;} #GNB.start_in .gnb_inner .depth1_area ul li:nth-of-type(2) {transition-delay:0.15s;} #GNB.start_in .gnb_inner .depth1_area ul li:nth-of-type(3) {transition-delay:0.2s;} #GNB.start_in .gnb_inner .depth1_area ul li:nth-of-type(4) {transition-delay:0.25s;} #GNB.start_in .gnb_inner .depth1_area ul li:nth-of-type(5) {transition-delay:0.3s;} #GNB.start_in .gnb_inner .other_services .language_area {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s; transition-delay:0.35s;} #GNB.start_in .gnb_inner .other_services .clear_line {transform:translate(0,0); opacity:1; transition:transform 0.81s, opacity 1s; transition-delay:0.4s;} #GNB.start_in .gnb_inner .other_services .search_area {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s; transition-delay:0.45s;} #GNB.start_in .gnb_inner .other_services .other_menu {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 1s; transition-delay:0.5s;} */ #MAIN_KEYVISUAL .main_bg .gallery_item {width:0; transition:width 0.8s;} #MAIN_KEYVISUAL .main_bg .gallery_item.on {width:100%;} #FOOTER .btn_top a img.btn_ver_b{display: none} #FOOTER .btn_top a img.btn_ver_w{display: inline-block} #MAIN_FLOATING #FLOATING_POP1 .btn_down_ko.out_link a span:before {width:15px; height:15px; background: url(../../images/common/ico_outlink.png) no-repeat 0 0 / contain;} @media all and (max-width: 1500px) { #MAIN_KEYVISUAL .main_quick ul li .txt .title { font-size: 21px;letter-spacing:-1px} } /* ================================== Laptop css ================================== */ @media all and (max-width: 1280px) { #MAIN_KEYVISUAL .main_keyvisual{margin: 0 32px;height: calc(100% - 96px);min-height: 672px} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .title{top: 88px;left: 56px} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .rectangle_box{width: 232px;height: 232px} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .content{width: 500px;height: 200px} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel{left: 56px} #MAIN_KEYVISUAL .main_quick{margin: 0 32px;padding: 0 60px} #MAIN_KEYVISUAL .main_quick ul li{height: 96px;} #MAIN_KEYVISUAL .main_quick ul li a{height: 96px;line-height: 96px;} #MAIN_KEYVISUAL .main_quick ul li .ico_img{margin-right: 5%} #MAIN_NEWS{margin-top: 80px} #MAIN_NEWS .news_wrap{margin:0 60px 152px} #MAIN_NEWS .news_wrap ul li a .icon_yt{margin-top: -75px} #MAIN_NEWS .news_wrap ul li .copy_box_in{height: 116px} #MAIN_NEWS .news_wrap ul li .copy_box_in .inner{padding: 22px 94px 22px 24px;vertical-align: baseline} #MAIN_NEWS .news_wrap ul li.type_yt .copy_box_in .inner{padding: 22px 24px ;} #MAIN_NEWS .news_wrap ul li a:hover .img_area:after{height: 105px} #MAIN_NEWS .news_wrap ul li .copy_box_in .title{font-size: 20px;line-height: 32px;max-height: 64px;-webkit-line-clamp: 2;} /*#MAIN_NEWS .news_wrap .news_title{}*/ /*#MAIN_NEWS .news_wrap ul{margin-bottom: 40px}*/ /*#MAIN_NEWS .news_wrap ul li{width: calc(33% - 6px);margin-left: 13px;margin-bottom: 20px}*/ /*#MAIN_NEWS .news_wrap ul li:nth-child(4n+1){margin-left: 13px}*/ /*#MAIN_NEWS .news_wrap ul li:nth-child(3n+1){margin-left: 0}*/ /*#MAIN_NEWS .news_wrap ul li:nth-child(7){display: none}*/ /*#MAIN_NEWS .news_wrap ul li:nth-child(8){display: none}*/ #MAIN_SEARCH{margin: 0 32px;} #MAIN_SEARCH .search_wrap .txt{margin: 0;} #MAIN_SEARCH .search_wrap .txt>div.left{margin-right: 1%} #MAIN_SEARCH .search_wrap .txt>div.right{width: 50%} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a{display: none !important;} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a:nth-child(-n+11){display: inline-block !important;} /*#MAIN_SEARCH .search_wrap .txt>div.right .recommend a:nth-child(11){display: none}*/ /*#MAIN_SEARCH .search_wrap .txt>div.right .recommend a:nth-child(12){display: none}*/ /*#MAIN_SEARCH .search_wrap .txt>div.right .recommend a:nth-child(13){display: none}*/ #MAIN_KEYVISUAL .main_quick ul li .txt .title { font-size: 16px} } /* ================================== Tablet css ================================== */ @media all and (max-width: 1080px) { #BAND_BANNER .btn_close{right: 40px} /*#FOOTER .btn_top {top:-395px;}*/ /* #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .box_img .video_area video{ position: absolute;top:0;left: 0;width: 100%;height: 100%;max-height: none;max-width: none;min-height:auto;min-width:auto; transform: none; object-fit: cover; } */ #MAIN_KEYVISUAL{min-height: 564px} #MAIN_KEYVISUAL .main_keyvisual{margin: 0 16px;height: calc(100% - 80px);min-height: 484px} #MAIN_KEYVISUAL .main_keyvisual .sec_inner{min-height: 100%} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .title{top: 68px;left: 35px;font-size: 40px;line-height: 52px;right: 35px;word-break: keep-all} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .rectangle_box{width: 176px;height: 176px;right: 240px;bottom: 85px} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .content{width: 312px;height: 192px;font-size: 16px;line-height: 28px;letter-spacing: -0.2px} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel{left: 35px;bottom:22px;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .carousel_inner a{width: 64px;height: 3px;margin-right: 7px;} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel .btn_playStop{top: -2px;left: 2px} #MAIN_KEYVISUAL .main_quick{margin: 0 16px;padding: 0 34px;} #MAIN_KEYVISUAL .main_quick ul li{height: 80px;} #MAIN_KEYVISUAL .main_quick ul li a{height: 80px;line-height: 80px;} #MAIN_KEYVISUAL .main_quick ul li img{} #MAIN_KEYVISUAL .main_quick ul li .txt .title{font-size: 16px} #MAIN_KEYVISUAL .main_quick ul li .ico_img img{width: 44px;height: 44px;} #MAIN_KEYVISUAL .main_quick ul li .ico_img img.on{display: none !important;} #MAIN_KEYVISUAL .main_quick ul li a:hover .ico_img img.off{opacity: 1} #MAIN_KEYVISUAL .main_quick ul li a:hover .ico_img img.on{opacity: 0} #MAIN_KEYVISUAL .main_quick ul li a:hover .txt .title{color: #000} #MAIN_NEWS{margin-top: 136px;} #MAIN_NEWS .news_wrap{margin: 0 34px 88px;} #MAIN_NEWS .news_wrap .news_title{font-size: 28px;margin-bottom: 39px;} #MAIN_NEWS .news_wrap ul li {margin-bottom: 20px;width: calc(50% - 8px);} #MAIN_NEWS .news_wrap ul li:nth-child(odd){margin-left: 0;margin-right: 8px} #MAIN_NEWS .news_wrap ul li:nth-child(even){margin-right: 0;margin-left: 8px;} #MAIN_NEWS .news_wrap ul li a .icon_yt{width:48px;height:48px;margin-top: -24px;margin-left: -24px} #MAIN_NEWS .news_wrap ul li a .icon_yt img{width: 16px;padding: 16px 15px 16px 17px } #MAIN_NEWS .news_wrap ul li .copy_box_in .inner{padding: 22px 20px;} #MAIN_NEWS .news_wrap ul li.type_yt .copy_box_in .inner{padding: 22px 20px;} #MAIN_NEWS .news_wrap ul li .copy_box_in .title{font-size: 16px;line-height: 26px; max-height: 52px;-webkit-line-clamp: 2;;} #MAIN_NEWS .news_wrap ul li a:hover .img{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #MAIN_NEWS .news_wrap ul li .img_area:after{height: 5px} #MAIN_NEWS .news_wrap ul li a:hover .img_area:after{height: 5px} #MAIN_NEWS .news_wrap ul li.type_news a:hover .img_area:after{background: #00bf8f} #MAIN_NEWS .news_wrap ul li.type_yt a:hover .img_area:after {background: #1634db} #MAIN_NEWS .news_wrap ul li.type_yt a:hover .icon_yt{background-color: rgba(0,0,0,.7)} #MAIN_NEWS .news_wrap ul li a:hover .icon_yt img.off {opacity: 1} #MAIN_NEWS .news_wrap ul li.type_news a:hover .icon_more_arrow {opacity: 0} #MAIN_NEWS .news_wrap ul li:nth-last-child(n+1) {margin-bottom: 20px;} #MAIN_NEWS .news_wrap ul li:nth-last-child(-n+2) {margin-bottom: 0;} #MAIN_SEARCH{margin: 0 16px} #MAIN_SEARCH .search_wrap{height: 100%} #MAIN_SEARCH .search_wrap .txt{padding: 0 34px} #MAIN_SEARCH .search_wrap .txt>div{display: block} #MAIN_SEARCH .search_wrap .txt>div.left .left_inner{display: block;padding: 59px 0 28px} #MAIN_SEARCH .search_wrap .txt>div.left .title{font-size: 28px;margin-bottom: 41px} #MAIN_SEARCH .search_wrap .txt>div.left{width: 100%;padding: 0;margin-bottom: 28px} #MAIN_SEARCH .search_wrap .txt>div.left .input_box input{font-size: 14px;height: 44px;padding: 0 48px 0 16px} #MAIN_SEARCH .search_wrap .txt>div.left .input_box a{padding: 14px 16px;width: 16px;height: 16px;right: 0} #MAIN_SEARCH .search_wrap .txt>div.left .input_box a:after{width:20px;height:20px;background-image:url(../../images/common/m_btn_search_arrow_black.png);} #MAIN_SEARCH .search_wrap .txt>div.right{width: 100%;padding-top: 0;padding-bottom: 38px} #MAIN_SEARCH .search_wrap .txt>div.right .recommend{text-align: left;display: block} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a{font-size: 14px;height: 36px;line-height: 36px;padding: 0 12px;margin-bottom: 7px;margin-right: 6px;display: inline-block} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a:after{display: none} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a{display: inline-block !important;} } /* ================================== Mobile css ================================== */ @media all and (max-width: 766px) { #BAND_BANNER{height: 80px} #BAND_BANNER .btn_close{width: 18px;height: 18px;top: 50%;margin-top: -9px;right: 16px;} #MAIN_KEYVISUAL {position: relative;height: calc(100vh - 64px);min-height: 400px} #MAIN_KEYVISUAL .main_keyvisual{height: calc(100% - 26px);min-height: 380px} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .title{top: 44px;left: 20px;font-size: 36px;line-height: 48px;right: 20px} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .rectangle_box{display: none} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .content{display: none} #MAIN_KEYVISUAL .main_keyvisual .sec_inner .main_carousel{display:none; left: 0;width: 100%;text-align: center} #MAIN_KEYVISUAL .mobile-only {display: block;} #MAIN_KEYVISUAL .pc-only {display: none;} #MAIN_KEYVISUAL .main_quick{position: absolute;bottom: 40px;left:0;right:0;padding: 0 20px; z-index:99;} #MAIN_KEYVISUAL .main_quick .sec_inner{width: 100%;height: 100%;background: rgba(255,255,255,.85);border-radius: 5px;max-width: 304px;margin: 0 auto} #MAIN_KEYVISUAL .main_quick ul li{width: 33.33%;height: 72px} #MAIN_KEYVISUAL .main_quick ul li:nth-child(4){display: none} #MAIN_KEYVISUAL .main_quick ul li a{height: 72px;line-height: 1;text-align: center;padding-top: 5px} #MAIN_KEYVISUAL .main_quick ul li .ico_img{display: block;text-align: center;margin-right: 0} #MAIN_KEYVISUAL .main_quick ul li .ico_img img{width: 40px;height: 40px} #MAIN_KEYVISUAL .main_quick ul li .ico_img img.off{display: none} #MAIN_KEYVISUAL .main_quick ul li .ico_img img.on{display: none} #MAIN_KEYVISUAL .main_quick ul li .ico_img img.mob{display: inline-block} #MAIN_KEYVISUAL .main_quick ul li .txt{display: block;text-align: center;padding-top:5px} #MAIN_KEYVISUAL .main_quick ul li .txt .title{font-size: 12px;} #MAIN_KEYVISUAL .main_quick ul li .txt.link_out .title {margin-left: -10%;} #MAIN_KEYVISUAL .main_quick ul li .txt.link_out:after {left:90%; top: 69%;width:9px;height:9px;} #MAIN_NEWS{margin-top: 47px} #MAIN_NEWS .news_wrap{margin: 0 auto 68px} #MAIN_NEWS .news_wrap ul{margin-bottom: 0} #MAIN_NEWS .news_wrap ul li{width: 100%;margin-left: 0 !important;margin-right: 0 !important;margin-bottom: 20px} #MAIN_NEWS .news_wrap ul li .copy_box_in .inner{padding: 23px 15px} #MAIN_NEWS .news_wrap ul li .copy_box_in .title{font-size: 16px;line-height: 26px;max-height: 52px;-webkit-line-clamp: 2;;} #MAIN_NEWS .news_wrap ul li a .icon_yt{margin-top: -54px} #MAIN_NEWS .news_wrap ul li.show{display: block;} #MAIN_NEWS .news_wrap ul li:nth-last-child(n+1) {margin-bottom: 20px;} #MAIN_NEWS .news_wrap ul li:nth-last-child(1) { margin-bottom: 0;} #MAIN_NEWS .news_wrap .btn_more_news{display: none;text-align: center;margin-bottom: 57px} #MAIN_NEWS .news_wrap .btn_more_news a{display: inline-block;margin: 0 auto;font-size: 16px;line-height: 26px;} #MAIN_NEWS .news_wrap .btn_more_news a span{position: relative;display: block} #MAIN_NEWS .news_wrap .btn_more_news a span:before{content: '';position: absolute;left: 0;right: 0;width: 100%;height: 1px; background: #000;bottom: 0} #MAIN_SEARCH .search_wrap .txt{padding: 0 28px} #MAIN_SEARCH .search_wrap .txt>div.left{margin-bottom: 0} #MAIN_SEARCH .search_wrap .txt>div.left .left_inner{padding: 55px 0 32px;} #MAIN_SEARCH .search_wrap .txt>div.left .title{font-size: 28px;margin-bottom: 40px;line-height: 36px} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a{display: none !important;} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a:nth-child(-n+11){display: none !important;} #MAIN_SEARCH .search_wrap .txt>div.right .recommend a:nth-child(-n+9){display: inline-block !important;} #MAIN_FLOATING{top:10vh !important; left: 50% !important;;transform: translateX(-50%);} #MAIN_FLOATING .contents .title{font-size: 20px;line-height: 28px;} #MAIN_FLOATING .contents .desc{font-size: 13px;line-height: 22px} #MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a{font-size: 12px;line-height: 23px} #MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a span{padding-right: 20px} #MAIN_FLOATING .custom_scroll_content .btn_down_ko.gu_btn_down_pdf a span:before{width: 16px;height: 16px;margin-top: -8px;} /* 모바일 영상 슬라이드 흔들림 수정 */ #MAIN_KEYVISUAL .main_keyvisual .sec_inner .gallery_item .bg_box .box_img {position:relative; transform:none !important;} } /* CES 2022 */ #MAIN_KEYVISUAL .main_quick ul li .ico_img.ces2022 img {width:auto;} @media all and (max-width: 1080px) { #MAIN_KEYVISUAL .main_quick ul li .ico_img.ces2022 img {height:40px;} }