.section .top_copy h2 {font-size:60px; line-height:1.2; vertical-align: top;} .section .top_copy .ico {display: inline-block;} .minHeight_full {min-height:750px;} .minHeight_navi {min-height:637px;} #MAIN .dumpDiv {position:relative; width:100%; height:100vh;} #MAIN .gu_no_title{ position:absolute;left:-9999px;top:-9999px; } /* show / hide gate */ #GNB {visibility: hidden; opacity:0;} #GNB.fix {position:fixed; top:-43px;} #GNB.fixBanner {position:fixed; top:-143px;} #GNB.fixBanner.on {position:fixed; top:-113px;} #FOOTER {display: none;} #MAIN_GATE {display: none;} #MAIN_SUB_CONTENTS {height:0; overflow: hidden;} #MAIN_KEYVISUAL {display: none;} #MAIN_STORE_INFO {display: none;} body.showGate #MAIN {margin-top:0;} body.showGate #MAIN_GATE {display: block;} body.showGate #MAIN_STORE_INFO {visibility: hidden; opacity:0;} body.showGate #MAIN_KEYVISUAL {visibility: hidden; opacity:0;} body.showGate #MAIN_SUB_CONTENTS {visibility: hidden; opacity:0;} body.hideGate #GNB {visibility:visible; opacity: 1;} body.hideGate #FOOTER {display: block;} body.hideGate #MAIN_GATE {visibility:hidden; opacity:0; display: block; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; } body.hideGate #MAIN_KEYVISUAL {display: block;} body.hideGate #MAIN_STORE_INFO {display: block;} body.hideGate #MAIN_SUB_CONTENTS {height:auto;} body.hideGate .dumpDiv {display: none;} body.hideGate #MAIN_KEYVISUAL {visibility: visible; opacity:1;} body.hideGate #MAIN_SUB_CONTENTS {visibility: visible; opacity:1;} /* MAIN TOP CONTENTS */ #MAIN_TOP_CONTENTS {position:fixed; top:0; left:0; width:100%; height:100vh; z-index:1000; display: none;} #MAIN_TOP_CONTENTS.on {display: block;} /* SELECT STORE */ #MAIN_SELECT_STORE {position:absolute; top:50%; left:50%; z-index:2; -webkit-transition: left 0.8s, transform 0.8s, opacity 0.8s, visibility 0.8s; -moz-transition: left 0.8s, transform 0.8s, opacity 0.8s, visibility 0.8s; -ms-transition: left 0.8s, transform 0.8s, opacity 0.8s, visibility 0.8s; -o-transition: left 0.8s, transform 0.8s, opacity 0.8s, visibility 0.8s; transition: left 0.8s, transform 0.8s, opacity 0.8s, visibility 0.8s; } #MAIN_SELECT_STORE .select_store_inner {position:relative;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore {position:relative; display: block; width:156px; height:150px; text-align: center; line-height: 150px; margin:-75px 0 0 -78px;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore > span {position:relative; display: inline-block; font-size:15px; color:#fff; margin-left:5px;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore > span:after {content:""; position:relative; display:inline-block; width:7px; height:4px; background:url("../../img/main/ico_gate_arrow.png") 0 0 no-repeat; vertical-align: middle; margin-left:6px;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore .line {position:absolute; top:0; left:0; width:100%; height:100%;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore .line > span {position:absolute; top:0; left:0; width:100%; height:100%; display: block;} #MAIN_SELECT_STORE .gu_selectStore {position:absolute; top:0; left:-78px; width:156px; height:230px; background:none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;} #MAIN_SELECT_STORE .gu_selectStore .gu_select_store_inner {margin-top:110px; background-color:#fff;} #MAIN_SELECT_STORE .gu_selectStore .custom_scroll_content a {padding:12px 0; width:156px;} #MAIN_SELECT_STORE .gu_selectStore .custom_scroll_content a:first-child {margin-top:0;} #MAIN_SELECT_STORE .gu_selectStore .custom_scroll_content a:last-child {margin-bottom:20px;} #MAIN_SELECT_STORE .select_store_inner.on .btn_changeStore .line:before {height:100%;} #MAIN_SELECT_STORE .select_store_inner.on .btn_changeStore > span {opacity:1; color:#333333; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } #MAIN_SELECT_STORE.side {opacity:1; -ms-transform: translate(0, 0); transform: translate(0, 0); -ms-transition-delay: 0s; transition-delay: 0s; } #MAIN_SELECT_STORE.on {visibility: visible; opacity:1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } #MAIN_SELECT_STORE.off {visibility: hidden; opacity:0; -webkit-transform: translate(462px, 0); -moz-transform: translate(462px, 0); -ms-transform: translate(462px, 0); -o-transform: translate(462px, 0); transform: translate(462px, 0); } #MAIN_SELECT_STORE.side .select_store_inner {opacity:1; -ms-transform:translate(0,0); transform:translate(0,0);} #MAIN_SELECT_STORE.on .select_store_inner {opacity:1; -ms-transform:translate(0,0); transform:translate(0,0);} #MAIN_SELECT_STORE.off .select_store_inner {opacity:1; -ms-transform:translate(0,0); transform:translate(0,0);} #MAIN_SELECT_STORE.direct {transition:none;} #MAIN_SELECT_STORE.directPos {left:auto; right:462px;} /* STORE INFO */ #MAIN_STORE_INFO {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display: none; opacity:0; visibility:hidden; -webkit-transition: opacity 1s, visibility 1s; -moz-transition: opacity 1s, visibility 1s; -ms-transition: opacity 1s, visibility 1s; -o-transition: opacity 1s, visibility 1s; transition: opacity 1s, visibility 1s; } #MAIN_STORE_INFO .bg {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);} #MAIN_STORE_INFO .side_info_inner { position:absolute; top:0; right:0; width:540px; height:100%; background-color:#2d2d2d; display: table; opacity:0; -webkit-transform: translate(540px, 0); -moz-transform: translate(540px, 0); -ms-transform: translate(540px, 0); -o-transform: translate(540px, 0); transform: translate(540px, 0); -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; } #MAIN_STORE_INFO .side_info_inner .info_box {display: table-cell; vertical-align: middle; color:#e2e2e2;} #MAIN_STORE_INFO .side_info_inner .info_box > div {position:relative; width:295px; margin-left:135px;} #MAIN_STORE_INFO .side_info_inner .info_box .btn_side_close {position:absolute; top:25px; right:35px;opacity:1;} /* #MAIN_STORE_INFO .side_info_inner .info_box .btn_side_close:hover {opacity:0.4;} 접근성 */ #MAIN_STORE_INFO .side_info_inner .info_box ul.top .ico {position:absolute; top:20px; right:0;} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .weather {line-height:60px; margin-bottom:20px; margin-left:-2px;} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .weather span {font-size:28px; vertical-align: top; position:relative; margin:0 5px 0 10px; color:#e2e2e2;} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .weather img {vertical-align: top; } #MAIN_STORE_INFO .side_info_inner .info_box ul.top .weather img:last-child {position:relative; top:21px;} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .condition {position:relative; color:#e2e2e2;} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .condition span {display:inline-block; vertical-align: top;} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .condition span.semi {font-size:40px; text-indent:22px; margin-left:-24px; color:#888;} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .condition span.copy {font-size:17px; margin:6px 0 0 5px; line-height:27px;} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .info {font-size:28px; line-height:38px; color:#e2e2e2; padding:40px 0 60px;} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .info > span {color:#bea36b;} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .line {width:100%; height:1px; background-color:rgba(191,191,191,0.2);} #MAIN_STORE_INFO .side_info_inner .info_box ul.top .line:after {content:""; display: block; width:70%; height:1px; background-color:#bea36b;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom {position:relative; width:100%; margin-top:60px;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li {width:100%; font-size:0; margin-bottom:50px;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li:last-child {margin-bottom:0;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li.ico {position:absolute; top:0; right:0; width:auto; margin:0;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li > span {display: inline-block; font-size:14px; vertical-align: top;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li > span.dt {color:#fff;/*#888 접근성*/ width:100px; line-height:20px;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li > span.dt a {display:inline-block; line-height:1; vertical-align: top;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li > span.dt a:after {background-color:#666;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li > span.dd {color:#e2e2e2; width:195px;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li > span.dd > span {display: block; margin-bottom:18px; line-height:20px;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li > span.dd > span:last-child {margin-bottom:0;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li.btns > span {width:auto;} #MAIN_STORE_INFO .side_info_inner .info_box ul.bottom li.btns > span a {margin-right:15px;} #MAIN_STORE_INFO.on {opacity:1; visibility: visible;} #MAIN_STORE_INFO.on .side_info_inner {opacity:1; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } /* MAIN GATE */ #MAIN_GATE {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;} #MAIN_GATE .gate_bg {position:absolute; top:0; left:0; width:100%; height:100%; background:url("../../img/main/gate_bg.jpg") no-repeat center center / cover} #MAIN_GATE .gate_inner {position:relative; width:100%; height:100%; display: table;} #MAIN_GATE .gate_inner .gate_copy_box {display: table-cell; vertical-align: middle; text-align: center;} #MAIN_GATE .gate_inner .gate_copy_box .title {display: block; color:#fff; font-size:30px; line-height:45px; margin-top:-100px;} #MAIN_GATE .gate_inner .gate_copy_box .title span {display: inline-block;} #MAIN_GATE .gate_inner .gate_copy_box .subtitle {margin:27px 0 250px 0; font-size:14px; line-height:1; color:rgba(255,255,255,0.6);} #MAIN_GATE .gate_inner .gate_copy_box .subtitle.off {opacity:0 !important; visibility: hidden !important; transition:all 0.3s 0s !important;} #MAIN_GATE .gate_inner .gate_copy_box .btn_enter {display: inline-block; color:#fff; font-size:15px;} #MAIN_GATE .gate_inner .gate_copy_box .btn_enter:after {background-color:#fff;} /* MAIN KEYVISUAL */ #MAIN_KEYVISUAL {position:relative; width:100%; height:calc(100vh - 113px);} .container.isTopBanner #MAIN_KEYVISUAL {height:calc(100vh - 183px);} #MAIN_KEYVISUAL .btn_floating_info {position:absolute; bottom:0; right:0; width:156px; height:150px; background-color:#2d2d2d; text-align: center; z-index:2; -webkit-transform: translate(156px, 0); -moz-transform: translate(156px, 0); -ms-transform: translate(156px, 0); -o-transform: translate(156px, 0); transform: translate(156px, 0); -webkit-transition: transform 0.6s; -moz-transition: transform 0.6s; -ms-transition: transform 0.6s; -o-transition: transform 0.6s; transition: transform 0.6s; } #MAIN_KEYVISUAL .btn_floating_info.on { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } #MAIN_KEYVISUAL .btn_floating_info.fix {position:fixed; top:70px; bottom:auto;} #MAIN_KEYVISUAL .btn_floating_info > span {display: block;} #MAIN_KEYVISUAL .btn_floating_info .store {line-height:1; font-size:14px; color:#fff; margin-top:60px; text-indent:8px;} #MAIN_KEYVISUAL .btn_floating_info .store:after {content:""; display:inline-block; position:relative; top:-1px; width:13px; height:13px; background:url("../../img/main/ico_gate_arrow_black.png") no-repeat 0 0; vertical-align: middle; margin-left:6px;} #MAIN_KEYVISUAL .btn_floating_info .copy {font-size:12px; color:#bea36b; line-height:1; margin-top:15px;} #MAIN_KEYVISUAL .bg_container {position:relative; width:100%; height:100%; z-index:0;} #MAIN_KEYVISUAL .bg_container > ul {position:absolute;top:0; left:0; height:100%;} #MAIN_KEYVISUAL .bg_container .next_box {width:50%; z-index:1;} #MAIN_KEYVISUAL .bg_container .next_box li {position:absolute; top:0; left:0; width:15%; height:100%; visibility: hidden; opacity:0; z-index:0;} #MAIN_KEYVISUAL .bg_container .next_box li.prev {z-index:2; visibility: visible; opacity:1;} #MAIN_KEYVISUAL .bg_container .next_box li.next {z-index:2; visibility: visible; opacity:1;} #MAIN_KEYVISUAL .bg_container .next_box li.on {z-index:1; visibility: visible; opacity:1;} #MAIN_KEYVISUAL .bg_container .next_box li .bg_contents {position:absolute; top:0; right:0; width:100%; height:100%;} #MAIN_KEYVISUAL .bg_container .next_box li .bg_contents .bg {width:100%; height:100%; opacity:0.2;} #MAIN_KEYVISUAL .bg_container .next_box li .bg_contents.notColor .bg {opacity:0.6;} #MAIN_KEYVISUAL .bg_container .next_box li .bg_contents .bg .color_cover {width:100%; height:100%; opacity:0.7;} #MAIN_KEYVISUAL .bg_container .current_box {width:100%; z-index:0;} #MAIN_KEYVISUAL .bg_container .current_box li {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; visibility: hidden; opacity:0; z-index:0;} #MAIN_KEYVISUAL .bg_container .current_box .type_half > div {position:relative; float:left; width:50%; height:100%;} #MAIN_KEYVISUAL .bg_container .current_box .type_half .left .bg {position:absolute; top:0; left:14%; width:87%; height:100%;} #MAIN_KEYVISUAL .bg_container .current_box .type_half .right {width:50%;} #MAIN_KEYVISUAL .bg_container .current_box .type_half .right .bg_thumb {width:100%; height:100%;} #MAIN_KEYVISUAL .bg_container .current_box .type_big .bg_thumb {width:100%; height:100%;} #MAIN_KEYVISUAL .bg_container .current_box li > div {position:absolute; top:0; left:0; width:50%; height:100%; overflow:hidden;} #MAIN_KEYVISUAL .bg_container .current_box li > div.left {width:calc(50% + 1px);} #MAIN_KEYVISUAL .bg_container .current_box li > div.right {left:50%;} #MAIN_KEYVISUAL .bg_container .current_box li > div .bg_contents {position:absolute; top:0; right:0; width:100%; height:100%; overflow:hidden;} #MAIN_KEYVISUAL .bg_container .current_box li > div .bg_contents .bg {position:absolute; top:0; right:0; width:50vw; height:100%;} #MAIN_KEYVISUAL .bg_container .current_box li > div .bg_contents .bg > div {position:relative; width:100%; height:100%; } #MAIN_KEYVISUAL .bg_container .current_box li > div .bg_contents .bg > div canvas {width:100%; height:100%;} /* 접근성 */ #MAIN_KEYVISUAL .bg_container .current_box li > div .bg_contents .bg > div.left_box, #MAIN_KEYVISUAL .bg_container .current_box li > div .bg_contents .bg > div.right_box { text-indent:-9999px; font-size:0; } #MAIN_KEYVISUAL .bg_container .current_box li.fullsize > div.left {width:100%;} #MAIN_KEYVISUAL .bg_container .current_box li.fullsize > div .bg_contents .bg {width:100vw; min-width:1120px; } #MAIN_KEYVISUAL .bg_container .current_box li.fullsize > div.left .bg_contents .bg video {position:absolute; top:50%; left:50%; width:auto; height:auto; min-width:100%; min-height:100%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);} #MAIN_KEYVISUAL .bg_container .current_box li.prev {z-index:2; visibility: visible; opacity:1;} #MAIN_KEYVISUAL .bg_container .current_box li.next {z-index:2; visibility: visible; opacity:1;} #MAIN_KEYVISUAL .bg_container .current_box li.on {z-index:1; visibility: visible; opacity:1;} #MAIN_KEYVISUAL .bg_container .current_box li.typeVideo .left .bg_contents:after{content:'';position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);} #MAIN_KEYVISUAL .bg_container .current_box li.typeVideo .right .bg_contents:after{content:'';position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);} #MAIN_KEYVISUAL .ui_main_slide {position:absolute; top:0; left:14%; width:80%; height:100%; display: table;} #MAIN_KEYVISUAL .ui_main_slide ul {display: table-cell; vertical-align: middle; color:#fff;} #MAIN_KEYVISUAL .ui_main_slide .btns_num {margin-top:-112px;} #MAIN_KEYVISUAL .ui_main_slide .btns_num .btns_num_box {display: inline-block;} #MAIN_KEYVISUAL .ui_main_slide .btns_num .btns_num_box a {position:relative; display: inline-block; width:70px; opacity:0.5; line-height:1; font-size:14px; text-indent: 9px;} /* #MAIN_KEYVISUAL .ui_main_slide .btns_num .btns_num_box a {position:relative; display: inline-block; width:70px; opacity:0.3; line-height:1; font-size:14px; text-indent: 9px;} 접근성 opacity*/ #MAIN_KEYVISUAL .ui_main_slide .btns_num .btns_num_box a:before {content:""; position:absolute; bottom:0; left:0; display: block; width:100%; height:2px; margin-top:30px; background-color:#fff;} #MAIN_KEYVISUAL .ui_main_slide .btns_num .btns_num_box a:after {content:""; display: block; width:0; height:2px; margin-top:30px; background-color:#fff;} #MAIN_KEYVISUAL .ui_main_slide .btns_num .btns_num_box a.on {opacity:1;} #MAIN_KEYVISUAL .ui_main_slide .btns_num .btns_num_box a.on:before {background-color:rgba(255,255,255,0.3);} #MAIN_KEYVISUAL .ui_main_slide .btns_num .btns_num_box a.on:after { width:100%; -ms-transition:width 5s linear; transition:width 5s linear; } #MAIN_KEYVISUAL .ui_main_slide .btns_num .btns_num_box.paused a.on:after { width:100%; -ms-transition:width 0.3s; transition:width 0.3s; } #MAIN_KEYVISUAL .ui_main_slide .btns_num .btn_playStop {position:relative; display: inline-block; width:7px; height:10px; top:36px; left:20px;} #MAIN_KEYVISUAL .ui_main_slide .btns_num .btn_playStop:before {content:""; position:relative; width:100%; height:100%; display:block; background:url("../../img/main/ico_kv_pause.png") no-repeat 0 0; } #MAIN_KEYVISUAL .ui_main_slide .btns_num .btn_playStop:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; display:block; background:url("../../img/main/ico_kv_play.png") no-repeat 0 0; opacity:0;} #MAIN_KEYVISUAL .ui_main_slide .btns_num .btn_playStop.on:before {opacity:0;} #MAIN_KEYVISUAL .ui_main_slide .btns_num .btn_playStop.on:after {opacity:1;} #MAIN_KEYVISUAL .ui_main_slide .title {position:relative; margin:60px 0 0 50px; font-size:56px; line-height:86px; height:240px;} #MAIN_KEYVISUAL .ui_main_slide .title > div {position:absolute; top:0; left:0; transform:translate(50px, 0); visibility: hidden; opacity:0; transition:all 0.5s;} #MAIN_KEYVISUAL .ui_main_slide .title > div.on {transform:translate(0,0); visibility: visible; opacity:1; transition:all 1s;} #MAIN_KEYVISUAL .ui_main_slide .title > div.big {font-size:80px; line-height: 90px;} #MAIN_KEYVISUAL .ui_main_slide .btns_viewmore {margin:0 0 0 60px;} #MAIN_KEYVISUAL .ui_main_slide .btns_viewmore > a {transform:translate(-25px,0); } #MAIN_KEYVISUAL .ui_main_slide .btns_viewmore > a.hide {visibility: hidden; opacity:0;} #MAIN_KEYVISUAL .ui_main_slide .btns_viewmore > a:after {background-color:#fff;} #MAIN_KEYVISUAL .ui_main_slide .btns_viewmore .btns_arrow {display:inline-block; vertical-align: top; margin:10px 0 0 140px;} #MAIN_KEYVISUAL .ui_main_slide .btns_viewmore .btns_arrow > a {display: block;} #MAIN_KEYVISUAL .ui_main_slide .btns_viewmore .btns_arrow > a:first-child {margin-bottom:20px;} #MAIN_KEYVISUAL .ui_main_slide .scroll_info {position:absolute; bottom:0; left:55px;} #MAIN_KEYVISUAL .ui_main_slide .scroll_info span {display: block;} #MAIN_KEYVISUAL .ui_main_slide .scroll_info .copy { color:#fff; font-size:14px; line-height:1; margin-bottom:20px; letter-spacing:1.5px;margin-left: -1px} #MAIN_KEYVISUAL .ui_main_slide .scroll_info .line {position:relative; width:2px; height:86px; margin-bottom:30px; opacity:0.8;} #MAIN_KEYVISUAL .ui_main_slide .scroll_info .line:before {content:""; position:absolute; top:0; left:0; width:1px; height:0; background-color:#fff; animation:scroll_motion 2.5s infinite;} #MAIN_KEYVISUAL .ui_main_slide .scroll_info .line:after {content:""; position:absolute; bottom:0; left:-4px; width:8px; height:8px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(140deg);} /* MAIN NOTICE */ #MAIN_NOTICE {width:100%; border-bottom:1px solid #e1e0e1;} #MAIN_NOTICE .notice_inner ul {width:100%;} #MAIN_NOTICE .notice_inner a {display: block; padding:27px 0 22px 15%;} #MAIN_NOTICE .notice_inner a .copy {position:relative; font-size:14px; color:#666666; display: inline-block; vertical-align: top; line-height:20px;} #MAIN_NOTICE .notice_inner a .copy:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#8a8a8a; opacity:0;} #MAIN_NOTICE .notice_inner a .copy .bold {font-size:16px; color:#222222;} #MAIN_NOTICE .notice_inner a .arrow {position:relative; display: inline-block; height:20px; margin-left:12px; top:1px;} #MAIN_NOTICE .notice_inner a .arrow:before {content:""; position:absolute; top:50%; left:0; margin-top:-9px; display: block; width:17px; height:17px; background:url("../../img/main/ico_arrow_notice.png") no-repeat 0 0; background-size:17px;} #MAIN_NOTICE .notice_inner a .arrow:after {content:""; position:absolute; top:50%; left:0; margin-top:-9px; display: block; width:17px; height:17px; background:url("../../img/main/ico_arrow_notice_on.png") no-repeat 0 0; background-size:17px; opacity:0;} #MAIN_NOTICE .notice_inner a:hover .copy:after {opacity:1;} #MAIN_NOTICE .notice_inner a:hover .arrow:after {opacity:1;} /* MAIN NEW EVENT */ #MAIN_NEW_EVENT {padding-top:180px; padding-bottom:180px;} #MAIN_NEW_EVENT .top_copy {text-align: center;} #MAIN_NEW_EVENT .top_copy .copy {margin-top:53px; line-height:60px;position: relative} #MAIN_NEW_EVENT .top_copy .copy .info {display: inline-block; margin-left:5px; font-size:16px; color:#666666;} #MAIN_NEW_EVENT .top_copy .copy .info span {color:#222; font-size: 17px;} #MAIN_NEW_EVENT .top_copy .copy .info small {font-size: 12px;display: block;color: #767676;text-align: center;position: absolute;bottom: -30px;left: 0;right: 0} #MAIN_NEW_EVENT .top_copy .copy .info a {position:relative; top:0; color:#8b714c; vertical-align: middle; margin-left:2px; font-size: 15px;} #MAIN_NEW_EVENT .top_copy .copy .info a:after {background-color:#b69d69;} #MAIN_NEW_EVENT .list {margin-top:60px; text-align: center;} #MAIN_NEW_EVENT .list ul {font-size:0; text-align: left;} #MAIN_NEW_EVENT .list ul li {display: inline-block; width:31%; margin-left:3%; margin-bottom:73px; text-align: left; vertical-align: top;} #MAIN_NEW_EVENT .list ul li:nth-child(3n+1) {margin-left:0;} #MAIN_NEW_EVENT .list ul li .list_box a {display: block;} #MAIN_NEW_EVENT .list ul li .list_box .thumb {margin-bottom:30px; border:1px solid #e5e5e5; box-sizing: border-box;} #MAIN_NEW_EVENT .list ul li .list_box .thumb img {width:100%;} #MAIN_NEW_EVENT .list ul li .list_box .type {font-size: 14px; color: #8b714c; margin: 0 20px 10px 10px;} #MAIN_NEW_EVENT .list ul li .list_box .title {font-size:18px; margin-bottom:10px;padding:0 20px 0 10px; line-height:28px;} #MAIN_NEW_EVENT .list ul li .list_box .desc {font-size:14px; color:#888; line-height: 24px;padding:0 20px 0 10px;} #MAIN_NEW_EVENT .list .btn_viewmore {margin-top:-20px;} #MAIN_NEW_EVENT .list .btn_viewmore:after {background-color:#f22c2d;} /* HOT & NEW */ #HOT_NEW {padding-bottom:180px;} #HOT_NEW img {width:100%;} #HOT_NEW .top_copy {width:100%; text-align: center;} #HOT_NEW .list {font-size:0; margin-top:60px;} #HOT_NEW .list li {position:relative; width:22.75%; display: inline-block; margin-left:3%; overflow: hidden;} #HOT_NEW .list li:first-child {margin-left:0;} #HOT_NEW .list li a {display: block;} #HOT_NEW .list li .copy {position:absolute; bottom:0; left:0; width:100%;} #HOT_NEW .list li .copy .copy_inner {padding:30px 26px 40px; background-color:rgba(0,0,0,0.8); box-sizing: border-box; -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transition: transform 0.4s; -moz-transition: transform 0.4s; -ms-transition: transform 0.4s; -o-transition: transform 0.4s; transition: transform 0.4s; } #HOT_NEW .list li .copy .copy_inner:before {content:""; position:absolute; top:-2px; left:0; width:100%; height:2px; background-color:#f22c2d;} #HOT_NEW .list li .copy .btn_blog {font-size:14px; color:#bea36b; display: block;} #HOT_NEW .list li .copy .btn_blog:after {content:""; position:relative; top:-2px; display: inline-block; width:12px; height:12px; background:url("../../img/main/ico_hotnew_link.png") no-repeat 0 0; vertical-align: middle; margin-left:6px;} #HOT_NEW .list li .copy .desc {font-size:18px; color:#fff; display: block; padding:15px 0 25px; line-height:28px;} #HOT_NEW .list li .copy .btn_more {font-size:14px; color:#bbbbbb; display: block;} #HOT_NEW .list li .copy .btn_more:after {content:""; display: inline-block; width:4px; height:6px; background:url("../../img/main/ico_hotnew_more.png") no-repeat 0 0; vertical-align: middle; margin-left:5px;} #HOT_NEW .list li:hover .copy .copy_inner, #HOT_NEW .list li.on .copy .copy_inner, #HOT_NEW .list li a:focus .copy .copy_inner { -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } #HOT_NEW .btns_sns_container {width:100%; text-align: center;} #HOT_NEW .btns_sns_container div.title {font-size:18px; color:#444444; line-height:1; padding:60px 0 15px; position:relative; left:2px;} #HOT_NEW .btns_sns_container div.title a {display: block;} #HOT_NEW .btns_sns_container div.title a span {position:relative; display: inline-block; width:15px; height:15px; vertical-align: middle; top:-2px; margin-left:6px;} #HOT_NEW .btns_sns_container div.title a span:before {content:""; position:absolute; top:0; left:0; width:15px; height:15px; background:url("../../img/main/ico_channel_off.png") no-repeat 0 0; background-size:15px;} #HOT_NEW .btns_sns_container div.title a span:after {content:""; position:absolute; top:0; left:0; width:15px; height:15px; background:url("../../img/main/ico_channel_on.png") no-repeat 0 0; background-size:15px; opacity:0;} #HOT_NEW .btns_sns_container div.title a:hover span:after {opacity:1;} #HOT_NEW .btns_sns_container div.desc {font-size:14px; color:#666666; line-height:1; margin-bottom:30px;} /* MAIN ART CULTURE */ #MAIN_ART_CULTURE {padding-bottom:150px;} #MAIN_ART_CULTURE .top_copy {text-align: right;} #MAIN_ART_CULTURE .top_copy h2 {text-align: center;} #MAIN_ART_CULTURE .list {font-size:0; margin-top:50px;} #MAIN_ART_CULTURE .list > div {position:relative; width:50%; height:530px; float:left;} #MAIN_ART_CULTURE .list .bg_box {position:absolute; top:0; right:-140px; height:480px; width:2000px;} #MAIN_ART_CULTURE .list .bg_box li {position:absolute; top:0; right:0; width:100%; height:100%; display: none;} #MAIN_ART_CULTURE .list .bg_box li.on {display:block;} #MAIN_ART_CULTURE .list .bg_box li .bg {width:100%; height:100%;} #MAIN_ART_CULTURE .list .left .copy_box {position:relative; margin-top:112px; padding:0 40px;} #MAIN_ART_CULTURE .list .left .copy_box ul li {position:relative; display: none;} #MAIN_ART_CULTURE .list .left .copy_box ul li.on {display: block;} #MAIN_ART_CULTURE .list .left .copy_box ul li span {display: block;} #MAIN_ART_CULTURE .list .left .copy_box ul li .type {font-size:18px; color:#e0c799; margin:25px 5px;letter-spacing: 1px;} #MAIN_ART_CULTURE .list .left .copy_box ul li .desc {font-size:36px; color:#fff; line-height:56px;} #MAIN_ART_CULTURE .list .left .copy_box .btn_viewmore {color:#fff; margin-top:43px; transform:translate(-14px,0); } #MAIN_ART_CULTURE .list .left .copy_box .btn_viewmore:after {background-color:#fff;} #MAIN_ART_CULTURE .list .left .btn_control {position:absolute; bottom:107px; right:58px;} #MAIN_ART_CULTURE .list .left .btn_control .count {font-size:16px; display: inline-block; vertical-align: top; line-height:40px; color:rgba(255,255,255,0.3); margin-right:65px;} #MAIN_ART_CULTURE .list .left .btn_control .count span {color:#fff;opacity:.3;} #MAIN_ART_CULTURE .list .left .btn_control .count span.current {opacity:1;} #MAIN_ART_CULTURE .list .left .btn_control .btns_arrow {display: inline-block; vertical-align: top;} #MAIN_ART_CULTURE .list .left .btn_control .btns_arrow a {margin-left:10px;} #MAIN_ART_CULTURE .list .left .btn_control .btns_arrow a:first-child {margin-left:0;} #MAIN_ART_CULTURE .list .right {position:relative; margin-top:50px;} #MAIN_ART_CULTURE .list .right:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%;} #MAIN_ART_CULTURE .list .right > div {position:relative; width:1520px; overflow:hidden;} #MAIN_ART_CULTURE .list .right ul {white-space: nowrap; font-size:0;} #MAIN_ART_CULTURE .list .right ul li {display: inline-block; width:480px; height:480px; margin-right:40px;} /* MAIN BRAND */ #MAIN_BRAND {padding-bottom:180px;} #MAIN_BRAND .top_copy {width:100%; text-align: center;} #MAIN_BRAND .gu_link_hover a .gu_img_area{border: 0} #MAIN_BRAND .list .tab_box {position:relative; left:50%; width:1280px; font-size:0; margin:35px 0 40px -640px; overflow:hidden;} #MAIN_BRAND .list .tab_box .btns_tab .btns_tab_inner {white-space: nowrap;} #MAIN_BRAND .list .tab_box .btns_tab .btns_tab_inner:after {content:""; position:absolute; top:0; left:0; width:100%; height:60px;} #MAIN_BRAND .list .tab_box .btns_tab .btns_tab_inner .slide_item {display: inline-block; width:390px; padding:0 18.5px; text-align: center; height:124px; line-height:124px;opacity:.2;} #MAIN_BRAND .list .tab_box .btns_tab .btns_tab_inner .slide_item.slick-current + .slide_item {opacity:1;} #MAIN_BRAND .list .tab_box .btn_tabArrow {position:absolute; top:40px;} #MAIN_BRAND .list .tab_box .btn_tabArrow_l {left:406px;} #MAIN_BRAND .list .tab_box .btn_tabArrow_r {right:406px;} #MAIN_BRAND .list .tab_box .count {width:100%; text-align: center; margin-top:20px;} #MAIN_BRAND .list .tab_box .count > span {font-size:16px; color:#888888;} #MAIN_BRAND .list .tab_box .count > span > span {color:#222;opacity:0.5;} #MAIN_BRAND .list .tab_box .count > span > span.current {opacity:1;} #MAIN_BRAND .list .list_box ul {font-size:0;border: 1px solid #e5e5e5; position:absolute;top:-9999px;} #MAIN_BRAND .list .list_box ul.on { position:relative;top:0; } #MAIN_BRAND .list .list_box ul li {position:relative; width:33.333%; display: inline-block; vertical-align:top;box-sizing: border-box;} #MAIN_BRAND .list .list_box ul li > a {display: block;} #MAIN_BRAND .list .list_box ul li > a:focus {border:1px dotted #000;} #MAIN_BRAND .list .list_box ul li > a video {position:absolute; top:0; left:0; width:100%; height:100%;} #MAIN_BRAND .list .list_box ul li img {width:100%;} #MAIN_BRAND .list .list_box .info_box {position:relative; background-color:#ffffff;} #MAIN_BRAND .list .list_box .info_box .copy_container {position:absolute; top:0; left:0; width:100%; height:100%; text-align: center;} #MAIN_BRAND .list .list_box .info_box .copy_container .copy_inner {position:absolute; top:0; left:0; width:100%; height:100%; display: table; color:#222222; padding:0 10%; box-sizing: border-box;} #MAIN_BRAND .list .list_box .info_box .copy_container .copy_inner > .copy {display: table-cell; vertical-align: middle;} #MAIN_BRAND .list .list_box .info_box .copy_container .copy_inner > .copy .title {font-size:22px; margin-bottom:30px; line-height:32px;} #MAIN_BRAND .list .list_box .info_box .copy_container .copy_inner > .copy .desc {font-size:14px; color:#666666; margin-bottom:50px; line-height:28px;} #MAIN_BRAND .list .list_box .info_box .copy_container .copy_inner > .copy .btn_detail {color:#666666;} #MAIN_BRAND .list .list_box .info_box .copy_container .copy_inner > .copy .btn_detail:after {background-color:#888888;} #MAIN_BRAND .list .list_box .info_box.type_black {background-color:#111111;} #MAIN_BRAND .list .list_box .info_box.type_black .copy_container .copy_inner {color:#fff;} #MAIN_BRAND .list .list_box .info_box.type_black .copy_container .copy_inner .copy .desc {color:#999999; } #MAIN_BRAND .list .list_box .info_box.type_black .copy_container .copy_inner .copy .btn_detail {color:#999;} #MAIN_BRAND .list .list_box .info_box.type_black .copy_container .copy_inner .copy .btn_detail:after {background-color:#888;} #MAIN_BRAND .list .btn_viewmore {text-align: center; margin-top:60px;} #MAIN_BRAND .list .btn_viewmore a:after {background-color:#f22c2d;} /* MAIN MAGAZINE */ #MAIN_MAGAZINE {padding:0 30px 200px 50px;} #MAIN_MAGAZINE img {width:100%;} #MAIN_MAGAZINE .top_copy {width:100%; text-align: center;} #MAIN_MAGAZINE .list {font-size:0; margin-top:60px;} #MAIN_MAGAZINE .list > div {display: inline-block; vertical-align: top;} #MAIN_MAGAZINE .list .poster {position:relative; width:31%; text-align: center;} #MAIN_MAGAZINE .list .poster .poster_inner {position:absolute; top:0; width:100%; padding-right:40px; box-sizing: border-box; } #MAIN_MAGAZINE .list .poster .poster_inner a {display: block;} #MAIN_MAGAZINE .list .poster .poster_inner.fix {position:fixed; top:105px !important; transition:none !important;} #MAIN_MAGAZINE .list .poster span {display: block;} #MAIN_MAGAZINE .list .poster .copy1 {font-size:14px; color:#666666; text-transform: uppercase; margin:30px 0 20px; letter-spacing: 1.2px;} #MAIN_MAGAZINE .list .poster .copy2 {font-size:30px; color:#222222; line-height:40px;} #MAIN_MAGAZINE .list .list_box {position:relative; width:69%;} #MAIN_MAGAZINE .list .list_box .grid_box {position:relative;} #MAIN_MAGAZINE .list .list_box .grid_box .grid {width:100%; display: inline-block; padding:100px 20px 0; box-sizing: border-box; vertical-align: top; display: none;} #MAIN_MAGAZINE .list .list_box .grid_box .grid ul {width:100%;padding:30px 20px 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #MAIN_MAGAZINE .list .list_box .grid_box .grid ul .type {font-size:0; display: block; color:#666666; line-height:1; text-transform: uppercase; margin-top:20px; margin-bottom:10px;letter-spacing: .5px;display: none} #MAIN_MAGAZINE .list .list_box .grid_box .grid ul .type span {font-size:12px; display: inline-block; margin-right:6px;} #MAIN_MAGAZINE .list .list_box .grid_box .grid ul .type span:after {content:""; display: inline-block; width:100%; height:1px; background-color:#bea36b; vertical-align: top; margin-top:4px;} #MAIN_MAGAZINE .list .list_box .grid_box .grid ul .title {font-size:17px; line-height: 26px; display: inline; padding-bottom: 1px;} #MAIN_MAGAZINE .list .list_box .grid_box .grid ul .title:before {content:'';display: block;} #MAIN_MAGAZINE .list .list_box .grid_box .grid a:hover ul .title {border-bottom:1px solid #222;} #MAIN_MAGAZINE .list .list_box .grid_box .grid ul .desc { margin-top:10px;font-size:14px; color:#666666; line-height:24px;} #MAIN_MAGAZINE .list .list_box .grid_box .new_grid_container > div {display: inline-block; width:33.33%; font-size:0; vertical-align: top; box-sizing: border-box;} #MAIN_MAGAZINE .list .list_box .grid_box .new_grid_container > div .grid {display: block;} #MAIN_MAGAZINE .list .list_box .grid_box .new_grid_container > div:nth-child(1) .grid:first-child {padding-top:0;} #MAIN_MAGAZINE .list .list_box .grid_box .new_grid_container > div:nth-child(2) .grid:first-child {padding-top:0;} #MAIN_MAGAZINE .list .list_box .grid_box .new_grid_container > div:nth-child(3) .grid:first-child {padding-top:0;} #MAIN_MAGAZINE .list .list_box .line_box {position:absolute; top:0; left:0; width:100%; height:100%;} #MAIN_MAGAZINE .list .list_box .line_box > div {position:absolute; top:0; left:0; display:inline-block; width:33.33%; height:100%; font-size:0; border-left:1px solid #e1e0e1; box-sizing: border-box;} #MAIN_MAGAZINE .list .list_box .line_box > div:nth-child(2) {left:33.33%;} #MAIN_MAGAZINE .list .list_box .line_box > div:nth-child(3) {left:66.66%;} #MAIN_MAGAZINE .list .btn_viewmore {width:100%; text-align: center; margin-top:70px;} #MAIN_MAGAZINE .list .btn_viewmore a {color:#222;} #MAIN_MAGAZINE .list .btn_viewmore a:after {background-color:#f22c2d;} body.stop {overflow-y: hidden;} #brand_detail_pop .pop_contents {width:1020px; font-size:0;} #brand_detail_pop .pop_contents > div {display:inline-block; vertical-align: top;} #brand_detail_pop .pop_contents .pop_img {position:relative; width:570px; height:570px;} #brand_detail_pop .pop_contents .pop_img .pop_img_area {width:100%; height:100%;} #brand_detail_pop .pop_contents .pop_img .pop_img_area video {width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #brand_detail_pop .pop_contents .pop_img > a {position:absolute; display: block; top:50%; width:30px; height:30px; margin-top:-15px; border-radius: 100%; opacity:0; visibility:hidden; transition:all 0.3s;} #brand_detail_pop .pop_contents .pop_img .carousel_arrow_l {left:15px; background:rgba(255,255,255,.5) url('../../img/common/btn_arrow_prev_black.png') no-repeat center / 30px;} #brand_detail_pop .pop_contents .pop_img .carousel_arrow_r {right:15px; background:rgba(255,255,255,.5) url('../../img/common/btn_arrow_next_black.png') no-repeat center / 30px;} #brand_detail_pop .pop_contents .pop_img .carousel_dots {position:absolute; bottom:20px; left:0; width:100%; text-align: center; visibility: hidden; opacity:0;} #brand_detail_pop .pop_contents .pop_img .carousel_dots a {display: inline-block; width: 6px; height: 6px; background-color: rgba(136,136,136,.5); margin: 0 3px; border-radius: 100%;} #brand_detail_pop .pop_contents .pop_img .carousel_dots a.on {background-color:#f22c2d;} #brand_detail_pop .pop_contents .pop_img.isHover .carousel_dots {visibility: visible; opacity:1;} #brand_detail_pop .pop_contents .pop_img.isHover:hover > a {opacity:1; visibility: visible;} #brand_detail_pop .pop_contents .pop_info {width:450px; padding:60px 50px; box-sizing: border-box;} #brand_detail_pop .pop_contents .pop_info .pop_info_tit {font-size:20px; color:#000; margin-bottom:12px; word-break: break-all; line-height:28px;} #brand_detail_pop .pop_contents .pop_info .pop_info_time {font-size:12px; color:#999999; padding-bottom:20px;} #brand_detail_pop .pop_contents .pop_info .pop_info_text {position:relative; height:373px; overflow:hidden; border-top:1px solid #ebebeb; } #brand_detail_pop .pop_contents .pop_info .pop_info_text .gu_custom_scroll {position:relative; width:100%; height:353px; margin-top:20px;} #brand_detail_pop .pop_contents .pop_info .pop_info_text .pop_info_text_inner {font-size:14px; color:#000; line-height:21px; padding-right:20px; word-break:break-all;} #brand_detail_pop .pop_contents .pop_info .pop_info_text .pop_info_text_inner .btns_hash {margin-top:20px; line-height:23px;} #brand_detail_pop .pop_contents .pop_info .pop_info_text .pop_info_text_inner .btns_hash a {display: inline-block; color:#003468; margin-right:5px;} #brand_detail_pop .pop_contents .gu_btn_arrow {position:absolute; top:50%; margin-top:-20px;} #brand_detail_pop .pop_contents .pop_btn_arrow_l {left:-60px;} #brand_detail_pop .pop_contents .pop_btn_arrow_r {right:-60px;} /* MAIN FLOATING */ #MAIN_FLOATING {position:absolute; top:0; right:0; z-index: 999; visibility: visible; opacity:0;} #MAIN_FLOATING .contents {width:340px; background-color:#fff; display: block;} #MAIN_FLOATING .contents .title {text-align: center; width:100%; height:56px; line-height:56px; font-size:16px; color:#bea36b; background-color:#2d2d2d; padding: 0 20px; box-sizing: border-box;} #MAIN_FLOATING .contents .desc img {width:100%;} #MAIN_FLOATING .contents .btns {width:100%; text-align: right; height:35px; line-height:35px; border-top:1px solid #e5e5e5; font-size:0;} #MAIN_FLOATING .contents .btns a {display: inline-block; font-size:12px;} #MAIN_FLOATING .contents .btns a:after {content:""; display: inline-block; width:7px; height:7px; background:url("../../img/main/ico_float_x.png") no-repeat 0 0; background-size:7px; margin-left:5px;} #MAIN_FLOATING .contents .btns a:last-child {margin-right:14px;} #MAIN_FLOATING .contents .btns a:last-child:before {content:"·"; display: inline-block; color:#c4c4c4; padding:0 9px;} body.hideGate #MAIN_FLOATING {visibility: visible; opacity:1;} /* IN MOTION */ /* gnb in motion set */ /* #GNB > .top {overflow: hidden; border:none;} #GNB > .top:after {content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background-color:#e1e0e1;} #GNB > .top .top_inner {transform: translate(0,100%); oapcity:0;} #GNB .navi {overflow: hidden; border:none;} #GNB .navi:after {content:""; position:absolute; bottom:0; right:0; width:0; height:1px; background-color:#e1e0e1;} #GNB .navi .navi_inner {transform: translate(0,100%); oapcity:0; z-index:1; background-color:transparent; border-bottom:none;} gnb in motion play #GNB.on .navi .navi_inner {transform: translate(0,0); oapcity:1; transition:all 0.7s 0.6s;} #GNB.on > .top .top_inner {transform: translate(0,0); oapcity:1; transition:all 0.7s 0.5s;} #GNB.on > .top:after {width:100%; -ms-transition:width 0.7s 0.3s; transition:width 0.7s 0.3s;} #GNB.on .navi:after {width:100%; -ms-transition:width 0.7s 0.3s; transition:width 0.7s 0.3s;} */ /********************** keyvisual in motion set *******************************/ #MAIN_KEYVISUAL .bg_container .current_box li:nth-child(1) .left:before {content:""; display:block; position:absolute; top:0; left:15%; width:1px; height:0; background-color:#e1e0e1;} #MAIN_KEYVISUAL .bg_container .current_box li:nth-child(1) .left .bg_contents {opacity:0;} #MAIN_KEYVISUAL .bg_container .current_box li:nth-child(1) .right:before {content:""; display:block; position:absolute; bottom:0; left:0; width:1px; height:0; background-color:#e1e0e1;} #MAIN_KEYVISUAL .bg_container .current_box li:nth-child(1) .right .bg_contents {opacity:0; transform:translate(-200px, 0);} #MAIN_KEYVISUAL .bg_container .next_box li:nth-child(1) .bg_contents {opacity:0;} /* keyvisual in motion play */ #MAIN_KEYVISUAL.on .bg_container .current_box li:nth-child(1) .left:before {height:100%; transition:height 0.4s 0.5s;} #MAIN_KEYVISUAL.on .bg_container .next_box li:nth-child(1) .bg_contents {opacity:1; transition:opacity 0.8s 0.9s;} #MAIN_KEYVISUAL.on .bg_container .current_box li:nth-child(1) .right:before {height:100%; transition:height 0.4s 0.8s;} #MAIN_KEYVISUAL.on .bg_container .current_box li:nth-child(1) .left .bg_contents {opacity:1; transition:opacity 1s 1.2s;} #MAIN_KEYVISUAL.on .bg_container .current_box li:nth-child(1) .right .bg_contents {opacity:1; transform:translate(0,0); transition:transform 1s 0.8s, opacity 1s 1.1s;} #MAIN_KEYVISUAL.motComplete .bg_container .current_box li:nth-child(1) .left:before {content:none;} #MAIN_KEYVISUAL.motComplete .bg_container .current_box li:nth-child(1) .right:before {content:none;} /********************** gate in motion set *******************************/ #MAIN_GATE .gate_bg {opacity:0; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);} #MAIN_GATE .gate_inner .gate_copy_box .title span {opacity:0; transform:translate(0, 10px); -ms-transform:translate(0, 10px);} #MAIN_GATE .gate_inner .gate_copy_box .subtitle {opacity:0; transform:translate(0, 20px); -ms-transform:translate(0, 20px);} #MAIN_GATE .gate_inner .gate_copy_box .btn_enter {opacity: 0; transform:translate(0, 30px); -ms-transform:translate(0, 30px);} /* gate in motion play */ #MAIN_GATE.on .gate_bg { opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 2s 0.5s; -moz-transition: all 2s 0.5s; -ms-transition: all 2s 0.5s; -o-transition: all 2s 0.5s; transition: all 2s 0.5s;} #MAIN_GATE.on .gate_inner .gate_copy_box .title span {opacity:1; transform:translate(0, 0); -ms-transform:translate(0, 0); transition:all 1.5s; -ms-transition:all 1.5s;} #MAIN_GATE.on .gate_inner .gate_copy_box .title span:nth-of-type(1) {transition-delay: 1s; -ms-transition-delay: 1s;} #MAIN_GATE.on .gate_inner .gate_copy_box .title span:nth-of-type(2) {transition-delay: 1.1s; -ms-transition-delay: 1.1s;} #MAIN_GATE.on .gate_inner .gate_copy_box .title span:nth-of-type(3) {transition-delay: 1.2s; -ms-transition-delay: 1.2s;} #MAIN_GATE.on .gate_inner .gate_copy_box .title span:nth-of-type(4) {transition-delay: 1.3s; -ms-transition-delay: 1.3s;} #MAIN_GATE.on .gate_inner .gate_copy_box .title span:nth-of-type(5) {transition-delay: 1.4s; -ms-transition-delay: 1.4s;} #MAIN_GATE.on .gate_inner .gate_copy_box .title span:nth-of-type(6) {transition-delay: 1.5s; -ms-transition-delay: 1.5s;} #MAIN_GATE.on .gate_inner .gate_copy_box .title span:nth-of-type(7) {transition-delay: 1.6s; -ms-transition-delay: 1.6s;} #MAIN_GATE.on .gate_inner .gate_copy_box .subtitle {opacity:1; transform:translate(0, 0); -ms-transform:translate(0, 0); transition:all 1.5s 2s; -ms-transition:all 1.5s 2s;} #MAIN_GATE.on .gate_inner .gate_copy_box .btn_enter {opacity:1; transform:translate(0, 0); -ms-transform:translate(0, 0); transition:all 1s 3.2s; -ms-transition:all 1s 3.2s;} /********************** select store in motion set *******************************/ #MAIN_SELECT_STORE .select_store_inner .btn_changeStore > span {opacity:0; transform:translate(0, 20px); -ms-transform:translate(0, 20px);} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore .line {top:auto; bottom:0; left:50%; width:0; height:0; background-color:rgba(0,0,0,0.2);} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore .line:before {content:""; position:absolute; bottom:0; left:0; width:100%; height:0; background-color:#fff;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore .line span:before {content:""; position:absolute; width:100%; height:1px; background-color:#fff;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore .line span:after {content:""; position:absolute; width:1px; height:100%; background-color:#fff;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore .line span:nth-of-type(1):before {bottom:0; left:0;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore .line span:nth-of-type(1):after {bottom:0; right:0;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore .line span:nth-of-type(2):before {top:0; right:0;} #MAIN_SELECT_STORE .select_store_inner .btn_changeStore .line span:nth-of-type(2):after {top:0; left:0;} /* select store in motion play */ #MAIN_SELECT_STORE .select_store_inner.motion .btn_changeStore > span {opacity:1; transform:translate(0, 0); -ms-transform:translate(0, 0); transition:opacity 0.3s 3s, transform 0.7s 3s, color 0.3s;} #MAIN_SELECT_STORE .select_store_inner.motion .btn_changeStore .line {left:0; width:100%; height:100%; transition:left 0.8s 2s, width 0.8s 2s, height 0.8s 2.8s;} #MAIN_SELECT_STORE .select_store_inner.motion .btn_changeStore .line:before {transition:height 0.5s;} #MAIN_SELECT_STORE.side .select_store_inner .btn_changeStore .line {left:0; width:100%; height:100%;} #MAIN_SELECT_STORE.side .select_store_inner .btn_changeStore .line:before {height:100%;} #MAIN_SELECT_STORE.side .select_store_inner .btn_changeStore > span {opacity:1; transform:translate(0,0); -ms-transform:translate(0,0); color:#333333;} #MAIN_SELECT_STORE .select_store_inner.motion:hover .btn_changeStore > span {color:#333333;} #MAIN_SELECT_STORE .select_store_inner.motion:hover .btn_changeStore .line:before {height:100%;} /********************** store info in motion set *******************************/ #MAIN_STORE_INFO .side_info_inner .info_box > div > ul li {opacity:0; transform:translate(100px, 0); -ms-transform:translate(100px, 0); transition:all 0.6s; -ms-transition:all 0.6s;} #MAIN_STORE_INFO .side_info_inner .info_box > div > ul li.condition .copy > span {opacity:0; transform:translate(0,10px); display: inline-block;} #MAIN_STORE_INFO .side_info_inner .info_box > div > ul:nth-child(1) li:nth-child(1) {transition-delay:0.1s; } #MAIN_STORE_INFO .side_info_inner .info_box > div > ul:nth-child(1) li:nth-child(2) {transition-delay:0.1s; } #MAIN_STORE_INFO .side_info_inner .info_box > div > ul:nth-child(1) li:nth-child(3) {transition-delay:0.2s; } #MAIN_STORE_INFO .side_info_inner .info_box > div > ul:nth-child(1) li:nth-child(4) {transition-delay:0.3s; } #MAIN_STORE_INFO .side_info_inner .info_box > div > ul:nth-child(1) li:nth-child(5) {transition-delay:0.4s; } #MAIN_STORE_INFO .side_info_inner .info_box > div > ul:nth-child(2) li:nth-child(1) {transition-delay:0.5s; } #MAIN_STORE_INFO .side_info_inner .info_box > div > ul:nth-child(2) li:nth-child(2) {transition-delay:0.5s; } #MAIN_STORE_INFO .side_info_inner .info_box > div > ul:nth-child(2) li:nth-child(3) {transition-delay:0.6s; } #MAIN_STORE_INFO .side_info_inner .info_box > div > ul:nth-child(2) li:nth-child(4) {transition-delay:0.7s; } #MAIN_STORE_INFO .side_info_inner .info_box > div > ul:nth-child(2) li:nth-child(5) {transition-delay:0.8s; } /* store info in motion play */ #MAIN_STORE_INFO.on .side_info_inner .info_box > div > ul li {opacity:1; -ms-transform: translate(0, 0); transform: translate(0, 0); } #MAIN_STORE_INFO.on .side_info_inner .info_box > div > ul li.condition .copy > span {opacity:1; transform: translate(0, 0); transition:opacity 1s, transform 1s;} #MAIN_STORE_INFO.on .side_info_inner .info_box > div > ul li.condition .copy > span:nth-of-type(1) {opacity:1; transition-delay: 0.8s;} #MAIN_STORE_INFO.on .side_info_inner .info_box > div > ul li.condition .copy > span:nth-of-type(2) {opacity:1; transition-delay: 0.9s;} #MAIN_STORE_INFO.on .side_info_inner .info_box > div > ul li.condition .copy > span:nth-of-type(3) {opacity:1; transition-delay: 1s;} #MAIN_STORE_INFO.on .side_info_inner .info_box > div > ul li.condition .copy > span:nth-of-type(4) {opacity:1; transition-delay: 1.1s;} #MAIN_STORE_INFO.on .side_info_inner .info_box > div > ul li.condition .copy > span:nth-of-type(5) {opacity:1; transition-delay: 1.2s;} /********************** shopping news in motion set *******************************/ #MAIN_NEW_EVENT .top_copy h2 {transform:translate(0,100px); opacity:0;} #MAIN_NEW_EVENT .top_copy .copy {transform:translate(0,100px); opacity:0;} #MAIN_NEW_EVENT .list ul li {transform:translate(0,100px); opacity:0;} #MAIN_NEW_EVENT .list .btn_viewmore {transform:translate(0,100px); opacity:0;} /* shopping news in motion play */ #MAIN_NEW_EVENT.on .top_copy h2 {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s;} #MAIN_NEW_EVENT.on .top_copy .copy {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay: 0.1s;} #MAIN_NEW_EVENT.on .list ul li {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 0.8s;} #MAIN_NEW_EVENT.on .list ul li:nth-child(1) {transition-delay: 0.3s;} #MAIN_NEW_EVENT.on .list ul li:nth-child(2) {transition-delay: 0.4s;} #MAIN_NEW_EVENT.on .list ul li:nth-child(3) {transition-delay: 0.5s;} #MAIN_NEW_EVENT.on .list ul li:nth-child(4) {transition-delay: 0.6s;} #MAIN_NEW_EVENT.on .list ul li:nth-child(5) {transition-delay: 0.7s;} #MAIN_NEW_EVENT.on .list ul li:nth-child(6) {transition-delay: 0.8s;} #MAIN_NEW_EVENT.on .list ul li:nth-child(7) {transition-delay: 0.9s;} #MAIN_NEW_EVENT.on .list ul li:nth-child(8) {transition-delay: 1s;} #MAIN_NEW_EVENT.on .list ul li:nth-child(9) {transition-delay: 1.1s;} #MAIN_NEW_EVENT.on .list .btn_viewmore {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 0.8s; transition-delay: 1.2s;} /********************** shinsegae new in motion set *******************************/ #HOT_NEW .top_copy h2 {transform:translate(0,100px); opacity:0;} #HOT_NEW .top_copy .copy {transform:translate(0,100px); opacity:0;} #HOT_NEW .list li {transform:translate(0,100px); opacity:0;} #HOT_NEW .btns_sns_container .title {transform:translate(0,100px); opacity:0;} #HOT_NEW .btns_sns_container .desc {transform:translate(0,100px); opacity:0;} #HOT_NEW .btns_sns_container .btns_sns a {transform:translate(50px,0); opacity:0;} /* shinsegae new in motion play */ #HOT_NEW.on .top_copy h2 {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s;} #HOT_NEW.on .top_copy .copy {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay:0.1s;} #HOT_NEW.on .list li {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 0.8s;} #HOT_NEW.on .list li:nth-child(1) {transition-delay: 0.3s;} #HOT_NEW.on .list li:nth-child(2) {transition-delay: 0.4s;} #HOT_NEW.on .list li:nth-child(3) {transition-delay: 0.5s;} #HOT_NEW.on .list li:nth-child(4) {transition-delay: 0.6s;} #HOT_NEW.on .btns_sns_container .title {transform:translate(0,0); opacity:1; transition:transform 0.7s, opacity 0.7s; transition-delay:0.8s;} #HOT_NEW.on .btns_sns_container .desc {transform:translate(0,0); opacity:1; transition:transform 0.7s, opacity 0.7s; transition-delay:0.9s;} #HOT_NEW.on .btns_sns_container .btns_sns a {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s;} #HOT_NEW.on .btns_sns_container .btns_sns a:nth-child(1) {transition-delay: 1.1s;} #HOT_NEW.on .btns_sns_container .btns_sns a:nth-child(2) {transition-delay: 1.2s;} #HOT_NEW.on .btns_sns_container .btns_sns a:nth-child(3) {transition-delay: 1.3s;} #HOT_NEW.on .btns_sns_container .btns_sns a:nth-child(4) {transition-delay: 1.3s;} #HOT_NEW.on .btns_sns_container .btns_sns a:nth-child(5) {transition-delay: 1.4s;} #HOT_NEW.on .btns_sns_container .btns_sns a:nth-child(6) {transition-delay: 1.5s;} #HOT_NEW.on .btns_sns_container .btns_sns a:nth-child(7) {transition-delay: 1.6s;} /********************** art & culture in motion set *******************************/ #MAIN_ART_CULTURE .top_copy h2 {transform:translate(0,100px); opacity:0;} #MAIN_ART_CULTURE .list .left {transform:translate(-100px,0); opacity:0;} #MAIN_ART_CULTURE .list .left .copy_box {transform:translate(-100px,0); opacity:0;} #MAIN_ART_CULTURE .list .left .btn_control {transform:translate(0,100px); opacity:0;} #MAIN_ART_CULTURE .list .right ul li:nth-child(2), #MAIN_ART_CULTURE .list .right ul li:nth-child(3), #MAIN_ART_CULTURE .list .right ul li:nth-child(4) {transform:translate(100px,0); opacity:0;} /* art & culture in motion play */ #MAIN_ART_CULTURE.on .top_copy h2 {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s;} #MAIN_ART_CULTURE.on .list .left {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay: 0.1s;} #MAIN_ART_CULTURE.on .list .left .copy_box {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay:0.3s;} #MAIN_ART_CULTURE.on .list .left .btn_control {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay:0.3s;} #MAIN_ART_CULTURE.on .list .right ul li {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s;} #MAIN_ART_CULTURE.on .list .right ul li:nth-child(2) {transition-delay: 0.5s;} #MAIN_ART_CULTURE.on .list .right ul li:nth-child(3) {transition-delay: 0.6s;} #MAIN_ART_CULTURE.on .list .right ul li:nth-child(4) {transition-delay: 0.7s;} /********************** shinsegae brand in motion set *******************************/ #MAIN_BRAND .top_copy h2 {transform:translate(0,100px); opacity:0;} #MAIN_BRAND .list .tab_box {transform:translate(0,100px); opacity:0;} #MAIN_BRAND .list .tab_box .count {transform:translate(0,100px); opacity:0;} #MAIN_BRAND .list .list_box ul li {transform:translate(0,100px); opacity:0;} #MAIN_BRAND .list .btn_viewmore {transform:translate(0,100px); opacity:0;} /* art & culture in motion play */ #MAIN_BRAND.on .top_copy h2 {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s;} #MAIN_BRAND.on .list .tab_box {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay:0.1s;} #MAIN_BRAND.on .list .tab_box .count {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay:0.2s;} #MAIN_BRAND.on .list .list_box ul li {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 0.8s;} #MAIN_BRAND.on .list .list_box ul li:nth-child(1) {transition-delay:0.3s;} #MAIN_BRAND.on .list .list_box ul li:nth-child(2) {transition-delay:0.4s;} #MAIN_BRAND.on .list .list_box ul li:nth-child(3) {transition-delay:0.5s;} #MAIN_BRAND.on .list .list_box ul li:nth-child(4) {transition-delay:0.6s;} #MAIN_BRAND.on .list .list_box ul li:nth-child(5) {transition-delay:0.7s;} #MAIN_BRAND.on .list .list_box ul li:nth-child(6) {transition-delay:0.8s;} #MAIN_BRAND.on .list .btn_viewmore {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay:0.9s;} /********************** magazine in motion set *******************************/ #MAIN_MAGAZINE .top_copy h2 {transform:translate(0,100px); opacity:0;} #MAIN_MAGAZINE .list .poster .poster_inner {transform:translate(0,100px); opacity:0;} #MAIN_MAGAZINE .list .list_box .line_box div {opacity:0;} #MAIN_MAGAZINE .list .new_grid_container .grid {transform:translate(0,100px); opacity:0;} #MAIN_MAGAZINE .list .btn_viewmore {transform:translate(0,100px); opacity:0;} /* magazine in motion play */ #MAIN_MAGAZINE.on .top_copy h2 {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s;} #MAIN_MAGAZINE.on .list .poster .poster_inner {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay:0.1s;} #MAIN_MAGAZINE.on .list .list_box .line_box div {opacity:1; transition:opacity 1s; transition-delay:0.4s;} #MAIN_MAGAZINE.on .list .list_box .line_box div:nth-child(1) {transition-delay: 0.3s;} #MAIN_MAGAZINE.on .list .list_box .line_box div:nth-child(2) {transition-delay: 0.4s;} #MAIN_MAGAZINE.on .list .list_box .line_box div:nth-child(3) {transition-delay: 0.5s;} #MAIN_MAGAZINE.on .list .btn_viewmore {transform:translate(0,0); opacity:1; transition:transform 1s, opacity 1s; transition-delay: 1.5s} #MAIN_MAGAZINE.on .list .new_grid_container .grid {transform:translate(0,0); opacity:1; transition:transform 0.8s, opacity 0.8s;} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(1) .grid:nth-child(1) {transition-delay: 0.3s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(1) .grid:nth-child(2) {transition-delay: 0.4s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(1) .grid:nth-child(3) {transition-delay: 0.5s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(1) .grid:nth-child(4) {transition-delay: 0.6s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(1) .grid:nth-child(5) {transition-delay: 0.7s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(1) .grid:nth-child(6) {transition-delay: 0.8s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(1) .grid:nth-child(7) {transition-delay: 0.9s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(1) .grid:nth-child(8) {transition-delay: 1s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(1) .grid:nth-child(9) {transition-delay: 1.1s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(1) .grid:nth-child(10) {transition-delay: 1.2s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(2) .grid:nth-child(1) {transition-delay: 0.4s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(2) .grid:nth-child(2) {transition-delay: 0.5s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(2) .grid:nth-child(3) {transition-delay: 0.6s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(2) .grid:nth-child(4) {transition-delay: 0.7s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(2) .grid:nth-child(5) {transition-delay: 0.8s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(2) .grid:nth-child(6) {transition-delay: 0.9s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(2) .grid:nth-child(7) {transition-delay: 1s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(2) .grid:nth-child(8) {transition-delay: 1.1s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(2) .grid:nth-child(9) {transition-delay: 1.2s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(2) .grid:nth-child(10) {transition-delay: 1.3s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(3) .grid:nth-child(1) {transition-delay: 0.5s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(3) .grid:nth-child(2) {transition-delay: 0.6s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(3) .grid:nth-child(3) {transition-delay: 0.7s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(3) .grid:nth-child(4) {transition-delay: 0.8s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(3) .grid:nth-child(5) {transition-delay: 0.9s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(3) .grid:nth-child(6) {transition-delay: 1s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(3) .grid:nth-child(7) {transition-delay: 1.1s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(3) .grid:nth-child(8) {transition-delay: 1.2s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(3) .grid:nth-child(9) {transition-delay: 1.3s} #MAIN_MAGAZINE.on .list .new_grid_container > div:nth-child(3) .grid:nth-child(10) {transition-delay: 1.4s} .main_gu_alignOver {transition:transform 0.5s;} .main_gu_alignOver:hover {transform:translate(0,0) !important;} /* ANIMATIONS */ @keyframes scroll_motion { 0% {top:0; height:0;} 45% {top:0; height:100%;} 55% {top:0; height:100%;} 100% {top:100%; height:0;} } @media screen and (max-width:1200px) { #MAIN_MAGAZINE .list .poster {width:41%;} #MAIN_MAGAZINE .list .list_box {width:59%;} #MAIN_MAGAZINE .list .list_box .grid_box .new_grid_container > div {width:50%;} #MAIN_MAGAZINE .list .list_box .line_box > div {width:50%;} #MAIN_MAGAZINE .list .list_box .line_box > div:nth-child(2) {left:50%;} #MAIN_MAGAZINE .list .list_box .line_box > div:last-child {display: none;} } #MAIN_KEYVISUAL .btns_arrow a:before {content:none;} /* 2019-05-17 한갑수 챗봇 아이콘 적용 */ #sbot_icon{z-index: 999; position:absolute; right:44px; bottom: 173px;cursor: pointer} #sbot_icon.bottom{bottom: -94px;} #sbot_icon.fix{position:fixed;; right: 44px; bottom: auto; top: 245px; } #sbot_icon .sbotCircle{position: relative; width: 68px; height: 68px; border-radius: 50%; background: #d12f3a; text-indent:-9999px;} #sbot_icon .sbotCircle .circleHalf1{display: inline-block; position: absolute; left: 22px; top: 14px; width:15px; height: 30px; background: #fff; border-radius: 40px 0 0 40px; -webkit-transform: rotate(45deg); transform: rotate(45deg); animation: rightTop 14s 1 forwards;} #sbot_icon .sbotCircle .circleHalf2{display: inline-block; position: absolute; left: 32px; top: 24px; width: 15px; height: 30px; background: #fff; border-radius: 0 40px 40px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); animation: leftBottom 14s 1 forwards;} #sbot_icon .sbotCircle .sbotText1{opacity: 0; position: absolute; left: -261px; bottom: 40px; transition: 0.3s; animation: sbotFirstText 14s 1;} #sbot_icon .sbotCircle .sbotText2{opacity: 0; position: absolute; left: -261px; bottom: 40px; transition: 0.3s; animation: sbotSecondText 14s 1;} @-webkit-keyframes rightTop{ 0%{left: 22px; top: 14px;} 10%{left: 22px; top: 14px;} 20%{left: 22px; top: 14px;} 22%{left: 27px; top: 9px;} 24%{left: 25px; top: 9px;} 30%{left: 25px; top: 9px;} 40%{left: 25px; top: 9px;} 50% {left: 25px; top: 9px;} 60%{left: 25px; top: 9px;} 70%{left: 25px; top: 9px;} 80%{left: 25px; top: 9px;} 90%{left: 25px; top: 9px;} 100%{left: 25px; top: 9px;} } @keyframes rightTop{ 0%{left: 22px; top: 14px;} 10%{left: 22px; top: 14px;} 20%{left: 22px; top: 14px;} 22%{left: 27px; top: 9px;} 24%{left: 25px; top: 9px;} 30%{left: 25px; top: 9px;} 40%{left: 25px; top: 9px;} 50% {left: 25px; top: 9px;} 60%{left: 25px; top: 9px;} 70%{left: 25px; top: 9px;} 80%{left: 25px; top: 9px;} 90%{left: 25px; top: 9px;} 100%{left: 25px; top: 9px;} } @-webkit-keyframes leftBottom{ 0%{left: 32px; top: 24px;} 10%{left: 32px; top: 24px;} 20%{left: 32px; top: 24px;} 22%{left: 27px; top: 29px;} 24%{left: 29px; top: 29px;} 30%{left: 29px; top: 29px;} 40%{left: 29px; top: 29px;} 50%{left: 29px; top: 29px;} 60%{left: 29px; top: 29px;} 70%{left: 29px; top: 29px;} 80%{left: 29px; top: 29px;} 90%{left: 29px; top: 29px;} 100%{left: 29px; top: 29px;} } @keyframes leftBottom{ 0%{left: 32px; top: 24px;} 10%{left: 32px; top: 24px;} 20%{left: 32px; top: 24px;} 22%{left: 27px; top: 29px;} 24%{left: 29px; top: 29px;} 30%{left: 29px; top: 29px;} 40%{left: 29px; top: 29px;} 50%{left: 29px; top: 29px;} 60%{left: 29px; top: 29px;} 70%{left: 29px; top: 29px;} 80%{left: 29px; top: 29px;} 90%{left: 29px; top: 29px;} 100%{left: 29px; top: 29px;} } @-webkit-keyframes sbotFirstText{ 0%{opacity: 0;} 10%{opacity: 0;} 20%{opacity: 0;} 28%{opacity: 0.8;} 30%{opacity: 1;} 40%{opacity: 1;} 50%{opacity: 1;} 60%{opacity: 0.8;} 70%{opacity: 0;} 80%{opacity: 0;} 90%{opacity: 0;} 100%{opacity: 0;} } @keyframes sbotFirstText{ 0%{opacity: 0;} 10%{opacity: 0;} 20%{opacity: 0;} 28%{opacity: 0.8;} 30%{opacity: 1;} 40%{opacity: 1;} 50%{opacity: 1;} 60%{opacity: 0.8;} 70%{opacity: 0;} 80%{opacity: 0;} 90%{opacity: 0;} 100%{opacity: 0;} } @-webkit-keyframes sbotSecondText{ 0%{opacity: 0;} 10%{opacity: 0;} 20%{opacity: 0;} 30%{opacity: 0;} 40%{opacity: 0;} 50%{opacity: 0;} 60%{opacity: 0.8;} 70%{opacity: 1;} 80%{opacity: 1;} 90%{opacity: 0.5;} 100%{opacity: 0} } @keyframes sbotSecondText{ 0%{opacity: 0;} 10%{opacity: 0;} 20%{opacity: 0;} 30%{opacity: 0;} 40%{opacity: 0;} 50%{opacity: 0;} 60%{opacity: 0.8;} 70%{opacity: 1;} 80%{opacity: 1;} 90%{opacity: 0.5;} 100%{opacity: 0} }