/* rotate */ /* transform-origin */ /* transform */ /* transition */ /* transform-transition */ /* css-transition */ /* transform-css-transition */ /*clip-path prefix transition*/ /* keyframes */ /* line */ body { overflow-x: auto; background: #fff; } .footer_wrap { position: relative; z-index: 100; } #content { position: relative; min-width: 1280px; margin: 0 auto; overflow: hidden; } .section { overflow: hidden; position: relative; width: 100%; } .btn_download { display: inline-block; width: 210px; height: 45px; font-size: 0; text-indent: -9999px; vertical-align: top; background: url(../img/btn_download.png) no-repeat 0 0; } .btn_download:hover { background-position: 0 -55px; } h1 { font-family: 'samsungonelatin200'; font-size: 110px; letter-spacing: 0; line-height: 148px; font-weight: 100; color: inherit; } h2 { font-family: 'samsungonekorean200'; font-size: 104px; letter-spacing: 0; line-height: 100px; font-weight: 100; color: inherit; text-align: inherit; } h3 { font-family: 'samsungonekorean500'; font-size: 52px; letter-spacing: 0.28em; line-height: 64px; font-weight: 100; color: inherit; text-align: inherit; } h3 .en { letter-spacing: 0.24em; } h4 { font-family: 'samsungonekorean200'; font-size: 38px; letter-spacing: 0.05em; line-height: 52px; font-weight: 100; color: inherit; text-align: inherit; font-style: italic; } h5 { font-family: 'samsungonekorean400'; font-size: 28px; letter-spacing: 0.025em; line-height: 34px; font-weight: 100; color: inherit; } h6 { font-family: 'samsungonekorean400'; font-size: 14px; letter-spacing: 0em; line-height: 1em; font-weight: 100; color: inherit; } p { font-family: 'samsungonekorean400'; font-size: 18px; letter-spacing: -0.045em; line-height: 33px; color: inherit; text-align: inherit; font-weight: initial; } img { vertical-align: top; } .inner-cont-wrap { position: relative; width: 100%; min-width: 1280px; height: 100%; } .bg-holder { position: absolute; width: 100%; height: 100%; } .cont-holder { position: relative; width: 1280px; height: 100%; margin: 0 auto; } .noTransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } /*part section*/ .content { position: relative; visibility: hidden; overflow: hidden; } .content.onShow { visibility: visible; } .content .bg-holder { position: absolute; } .content .bg-holder .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .content .dim-holder { position: absolute; background-color: #000; opacity: 0; filter: alpha(opacity=0); visibility: hidden; width: 100%; height: 100%; top: 0; left: 0; } .intro-box .desc-clip { position: relative; overflow: hidden; opacity: 0; filter: alpha(opacity=0); } .intro-box .desc-clip .title { float: left; margin-right: 85px; } .intro-box .desc-clip .title h4 { margin-bottom: 25px; line-height: 1em; } .intro-box .desc-clip .title span { font-family: 'samsungonekorean400'; font-size: 18px; letter-spacing: 0.05em; line-height: 1em; color: inherit; text-align: inherit; font-weight: initial; font-style: italic; } .intro-box .desc-clip .desc { float: left; } .intro-box .desc-clip.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.7s linear; -moz-transition: opacity 0.7s linear; -ms-transition: opacity 0.7s linear; -o-transition: opacity 0.7s linear; transition: opacity 0.7s linear; } .interview-box { padding-left: 82px; } .interview-box .interview-clip { float: left; } .interview-box .interview-clip h6 { position: relative; margin-bottom: 14px; opacity: 0; filter: alpha(opacity=0); padding-left: 2px; } .interview-box .interview-clip h5 { margin-bottom: 44px; } .interview-box .interview-clip h5 span { display: block; opacity: 0; filter: alpha(opacity=0); } .interview-box .interview-clip h5 span.txt-1 { -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } .interview-box .interview-clip h5 span.txt-2 { -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .interview-box .interview-clip p { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .interview-box .interview-clip p span { display: block; font-family: 'samsungonekorean400'; font-size: 14px; letter-spacing: -0.04em; line-height: 20px; font-weight: 100; color: inherit; text-align: inherit; } .interview-box .interview-clip.onTrans h6 { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s ease-out, opacity 1s; -moz-transition: -moz-transform 1s ease-out, opacity 1s; -ms-transition: -ms-transform 1s ease-out, opacity 1s; -o-transition: -o-transform 1s ease-out, opacity 1s; transition: transform 1s ease-out, opacity 1s; } .interview-box .interview-clip.onTrans h5 { opacity: 1; filter: alpha(opacity=100); } .interview-box .interview-clip.onTrans h5 span { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.8s 0.1s ease-out, opacity 0.8s 0.1s; -moz-transition: -moz-transform 0.8s 0.1s ease-out, opacity 0.8s 0.1s; -ms-transition: -ms-transform 0.8s 0.1s ease-out, opacity 0.8s 0.1s; -o-transition: -o-transform 0.8s 0.1s ease-out, opacity 0.8s 0.1s; transition: transform 0.8s 0.1s ease-out, opacity 0.8s 0.1s; } .interview-box .interview-clip.onTrans p { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s; -moz-transition: -moz-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s; -ms-transition: -ms-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s; -o-transition: -o-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s; transition: transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s; } .interview-box .interview-clip.onTrans span { opacity: 1; filter: alpha(opacity=100); } .interview-box .artist-photo-clip { float: left; } .interview-box:after { display: block; content: ''; clear: both; } #section-1 { height: calc(100vh - 70px); } #section-1 .inner-cont-wrap { width: 100%; height: inherit; } #section-1 .inner-cont-wrap .bg-holder { height: inherit; z-index: 0; } #section-1 .inner-cont-wrap .bg-holder ul { height: inherit; } #section-1 .inner-cont-wrap .bg-holder ul li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } #section-1 .inner-cont-wrap .bg-holder ul li.img-thumb-1 { background-image: url("../img/sec1_kv_3.jpg"); } #section-1 .inner-cont-wrap .bg-holder ul li.img-thumb-2 { background-image: url("../img/sec1_kv_2.jpg"); } #section-1 .inner-cont-wrap .bg-holder ul li.img-thumb-3 { background-image: url("../img/sec1_kv_1.jpg"); } #section-1 .inner-cont-wrap .bx-wrapper { height: calc(100vh - 70px); } #section-1 .inner-cont-wrap .bx-wrapper .bx-viewport { height: calc(100vh - 70px) !important; } #section-1 .inner-cont-wrap .mask-holder { position: absolute; left: 50%; top: 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%); } #section-1 .inner-cont-wrap .mask-holder .mask .mask-img-box .mask-img { opacity: 0; filter: alpha(opacity=0); position: absolute; } #section-1 .inner-cont-wrap .mask-holder .mask .mask-img-box .mask-img:first-child { opacity: 1; filter: alpha(opacity=100); } #section-1 .inner-cont-wrap .mask-holder.onTrans { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #section-1 .inner-cont-wrap .cont-holder .title-box { display: table; width: 100%; height: 100%; margin: 0 auto; } #section-1 .inner-cont-wrap .cont-holder .title-box .title { display: table-cell; vertical-align: middle; text-align: center; } #section-1 .inner-cont-wrap .cont-holder .title-box .title h1 { width: 150%; margin-left: -25%; margin-bottom: 46px; font-family: "samsungonelatin200"; font-size: 110px; color: #fff; line-height: normal; } #section-1 .inner-cont-wrap .cont-holder .title-box .title h1 span { display: block; } #section-1 .inner-cont-wrap .cont-holder .title-box .title h1 span.txt-1 { opacity: 0; filter: alpha(opacity=0); letter-spacing: 5px; will-change: letter-spacing,opacity; } #section-1 .inner-cont-wrap .cont-holder .title-box .title h1 span.txt-2 { opacity: 0; filter: alpha(opacity=0); letter-spacing: 5px; will-change: letter-spacing,opacity; } #section-1 .inner-cont-wrap .cont-holder .title-box .title h1 span em { color: #fff; -webkit-transition: color 0.5s 0.2s linear; -moz-transition: color 0.5s 0.2s linear; -ms-transition: color 0.5s 0.2s linear; -o-transition: color 0.5s 0.2s linear; transition: color 0.5s 0.2s linear; } #section-1 .inner-cont-wrap .cont-holder .title-box .title h1 span em.onChangeColor { color: #000; } #section-1 .inner-cont-wrap .cont-holder .title-box .title h1 span em.onChangeColor2 { color: #fff; -webkit-transition: color 1s linear; -moz-transition: color 1s linear; -ms-transition: color 1s linear; -o-transition: color 1s linear; transition: color 1s linear; } #section-1 .inner-cont-wrap .cont-holder .title-box .title h1.onTrans .txt-1 { -webkit-transition: letter-spacing 3s ease-out, opacity 3s ease-in; -moz-transition: letter-spacing 3s ease-out, opacity 3s ease-in; -ms-transition: letter-spacing 3s ease-out, opacity 3s ease-in; -o-transition: letter-spacing 3s ease-out, opacity 3s ease-in; transition: letter-spacing 3s ease-out, opacity 3s ease-in; opacity: 1; filter: alpha(opacity=100); letter-spacing: 18px; } #section-1 .inner-cont-wrap .cont-holder .title-box .title h1.onTrans .txt-2 { -webkit-transition: letter-spacing 3s ease-out, opacity 3s ease-in; -moz-transition: letter-spacing 3s ease-out, opacity 3s ease-in; -ms-transition: letter-spacing 3s ease-out, opacity 3s ease-in; -o-transition: letter-spacing 3s ease-out, opacity 3s ease-in; transition: letter-spacing 3s ease-out, opacity 3s ease-in; opacity: 1; filter: alpha(opacity=100); letter-spacing: 18px; } #section-1 .inner-cont-wrap .cont-holder .title-box .title .sub-title { font-family: 'samsungonekorean400'; font-size: 32px; color: #fff; line-height: normal; letter-spacing: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } #section-1 .inner-cont-wrap .cont-holder .title-box .title .sub-title em { color: #fff; -webkit-transition: color 0.5s 0.2s linear; -moz-transition: color 0.5s 0.2s linear; -ms-transition: color 0.5s 0.2s linear; -o-transition: color 0.5s 0.2s linear; transition: color 0.5s 0.2s linear; } #section-1 .inner-cont-wrap .cont-holder .title-box .title .sub-title em.onChangeColor { color: #000; } #section-1 .inner-cont-wrap .cont-holder .title-box .title .sub-title em.onChangeColor2 { color: #fff; -webkit-transition: color 1s linear; -moz-transition: color 1s linear; -ms-transition: color 1s linear; -o-transition: color 1s linear; transition: color 1s linear; } #section-1 .inner-cont-wrap .cont-holder .title-box .title .sub-title.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.875s 1.125s ease-out, opacity 1.875s 1.125s; -moz-transition: -moz-transform 1.875s 1.125s ease-out, opacity 1.875s 1.125s; -ms-transition: -ms-transform 1.875s 1.125s ease-out, opacity 1.875s 1.125s; -o-transition: -o-transform 1.875s 1.125s ease-out, opacity 1.875s 1.125s; transition: transform 1.875s 1.125s ease-out, opacity 1.875s 1.125s; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #section-1 .inner-cont-wrap .cont-holder .scroll-box { position: absolute; bottom: 0; left: 50%; width: 100px; margin-left: -50px; font-size: 12px; text-align: center; -webkit-transition: color 1s linear; -moz-transition: color 1s linear; -ms-transition: color 1s linear; -o-transition: color 1s linear; transition: color 1s linear; } #section-1 .inner-cont-wrap .cont-holder .scroll-box .txt { color: #fff; font-family: 'samsungonelatin800c'; letter-spacing: 0.1em; text-align: center; -webkit-transition: color 0.5s 0.2s linear; -moz-transition: color 0.5s 0.2s linear; -ms-transition: color 0.5s 0.2s linear; -o-transition: color 0.5s 0.2s linear; transition: color 0.5s 0.2s linear; } #section-1 .inner-cont-wrap .cont-holder .scroll-box .line { display: block; width: 1px; height: 55px; background-color: #fff; margin: 10px auto 0; -webkit-transition: background-color 0.5s 0.2s linear; -moz-transition: background-color 0.5s 0.2s linear; -ms-transition: background-color 0.5s 0.2s linear; -o-transition: background-color 0.5s 0.2s linear; transition: background-color 0.5s 0.2s linear; } #section-1 .inner-cont-wrap .cont-holder .scroll-box.onChangeColor .txt { color: #000; } #section-1 .inner-cont-wrap .cont-holder .scroll-box.onChangeColor .line { background-color: #000; } #section-1 .inner-cont-wrap .cont-holder .scroll-box.onChangeColor2 .txt { color: #fff; -webkit-transition: color 1s linear; -moz-transition: color 1s linear; -ms-transition: color 1s linear; -o-transition: color 1s linear; transition: color 1s linear; } #section-1 .inner-cont-wrap .cont-holder .scroll-box.onChangeColor2 .line { background-color: #fff; -webkit-transition: background-color 1s linear; -moz-transition: background-color 1s linear; -ms-transition: background-color 1s linear; -o-transition: background-color 1s linear; transition: background-color 1s linear; } #section-2 .inner-cont-wrap { background-color: #fff; } #section-2 .inner-cont-wrap .cont-holder { display: table; padding: 162px 0; } #section-2 .inner-cont-wrap .cont-holder h4 { display: table-cell; padding-left: 80px; vertical-align: middle; width: 450px; font-family: 'samsungonekorean400'; font-size: 36px; letter-spacing: 0.3em; line-height: 60px; font-weight: 100; color: inherit; text-align: inherit; font-style: normal; } #section-2 .inner-cont-wrap .cont-holder h4 span { display: block; position: relative; -webkit-transform: translateX(55px); -moz-transform: translateX(55px); -ms-transform: translateX(55px); -o-transform: translateX(55px); transform: translateX(55px); left: 0; opacity: 0; filter: alpha(opacity=0); } #section-2 .inner-cont-wrap .cont-holder h4 span.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } #section-2 .inner-cont-wrap .cont-holder h4 span.onTrans.txt-1 { -webkit-transition: -webkit-transform 1.2s 0s ease-out, opacity 1.2s 0s ; -moz-transition: -moz-transform 1.2s 0s ease-out, opacity 1.2s 0s ; -ms-transition: -ms-transform 1.2s 0s ease-out, opacity 1.2s 0s ; -o-transition: -o-transform 1.2s 0s ease-out, opacity 1.2s 0s ; transition: transform 1.2s 0s ease-out, opacity 1.2s 0s ; } #section-2 .inner-cont-wrap .cont-holder h4 span.onTrans.txt-2 { -webkit-transition: -webkit-transform 1.2s 0.25s ease-out, opacity 1.2s 0.25s ; -moz-transition: -moz-transform 1.2s 0.25s ease-out, opacity 1.2s 0.25s ; -ms-transition: -ms-transform 1.2s 0.25s ease-out, opacity 1.2s 0.25s ; -o-transition: -o-transform 1.2s 0.25s ease-out, opacity 1.2s 0.25s ; transition: transform 1.2s 0.25s ease-out, opacity 1.2s 0.25s ; } #section-2 .inner-cont-wrap .cont-holder h4 span.onTrans.txt-3 { -webkit-transition: -webkit-transform 1.2s 0.5s ease-out, opacity 1.2s 0.5s ; -moz-transition: -moz-transform 1.2s 0.5s ease-out, opacity 1.2s 0.5s ; -ms-transition: -ms-transform 1.2s 0.5s ease-out, opacity 1.2s 0.5s ; -o-transition: -o-transform 1.2s 0.5s ease-out, opacity 1.2s 0.5s ; transition: transform 1.2s 0.5s ease-out, opacity 1.2s 0.5s ; } #section-2 .inner-cont-wrap .cont-holder h4 span.onTrans.txt-4 { -webkit-transition: -webkit-transform 1.2s 0.75s ease-out, opacity 1.2s 0.75s ; -moz-transition: -moz-transform 1.2s 0.75s ease-out, opacity 1.2s 0.75s ; -ms-transition: -ms-transform 1.2s 0.75s ease-out, opacity 1.2s 0.75s ; -o-transition: -o-transform 1.2s 0.75s ease-out, opacity 1.2s 0.75s ; transition: transform 1.2s 0.75s ease-out, opacity 1.2s 0.75s ; } #section-2 .inner-cont-wrap .cont-holder p { position: relative; display: table-cell; vertical-align: middle; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(35px); -moz-transform: translateY(35px); -ms-transform: translateY(35px); -o-transform: translateY(35px); transform: translateY(35px); top: 0; } #section-2 .inner-cont-wrap .cont-holder p.onTrans { -webkit-transition: -webkit-transform 0.9s 1s ease-out, opacity 0.9s 1s; -moz-transition: -moz-transform 0.9s 1s ease-out, opacity 0.9s 1s; -ms-transition: -ms-transform 0.9s 1s ease-out, opacity 0.9s 1s; -o-transition: -o-transform 0.9s 1s ease-out, opacity 0.9s 1s; transition: transform 0.9s 1s ease-out, opacity 0.9s 1s; opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #section-3 { height: 4755px; background: #fff; } #section-3 .inner-cont-wrap { min-width: 1280px; height: inherit; background-color: #2f7daf; } #section-3 .inner-cont-wrap .cont-holder { padding-top: 331px; } #section-3 .inner-cont-wrap .cont-holder .title-area { position: relative; margin-bottom: 80px; } #section-3 .inner-cont-wrap .cont-holder .title-area .frame-box { overflow: hidden; position: relative; width: 1280px; height: 720px; } #section-3 .inner-cont-wrap .cont-holder .title-area .frame-box .line-clip { position: relative; width: inherit; height: inherit; } #section-3 .inner-cont-wrap .cont-holder .title-area .frame-box .line-clip span { position: absolute; left: 50%; top: 50%; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 6px solid #106093; box-sizing: border-box; will-change: border-box; width: 80%; height: 80%; } #section-3 .inner-cont-wrap .cont-holder .title-area .frame-box.onShow .line-clip span { opacity: 1; filter: alpha(opacity=100); width: 100%; height: 100%; } #section-3 .inner-cont-wrap .cont-holder .title-area .frame-box { margin: 0 auto; } #section-3 .inner-cont-wrap .cont-holder .title-area .frame-box.onShow .line-clip span { -webkit-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -webkit-transition-delay: 0.2s; -moz-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -moz-transition-delay: 0.2s; -ms-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition-delay: 0.2s; -o-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -o-transition-delay: 0.2s; transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); transition-delay: 0.2s; } #section-3 .inner-cont-wrap .cont-holder .title-area .obj-box { position: absolute; top: -151px; left: 53px; width: 856px; height: 562px; } #section-3 .inner-cont-wrap .cont-holder .title-area .obj-box .obj-clip { position: absolute; left: 27px; top: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #section-3 .inner-cont-wrap .cont-holder .title-area .obj-box .shadow-clip { position: absolute; left: 0; bottom: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #section-3 .inner-cont-wrap .cont-holder .title-area .obj-box.onShow .obj-clip { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s linear; -moz-transition: -moz-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s linear; -ms-transition: -ms-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s linear; -o-transition: -o-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s linear; transition: transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s linear; } #section-3 .inner-cont-wrap .cont-holder .title-area .obj-box.onShow .shadow-clip { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s linear; -moz-transition: -moz-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s linear; -ms-transition: -ms-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s linear; -o-transition: -o-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s linear; transition: transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s linear; } #section-3 .inner-cont-wrap .cont-holder .title-area .obj-box.onShow .shadow-clip.onShow { opacity: 1; filter: alpha(opacity=100); } #section-3 .inner-cont-wrap .cont-holder .title-area .txt-box { position: absolute; top: 321px; left: 416px; color: #fff; } #section-3 .inner-cont-wrap .cont-holder .title-area .txt-box h3 { margin-bottom: 31px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(45px); -moz-transform: translateX(45px); -ms-transform: translateX(45px); -o-transform: translateX(45px); transform: translateX(45px); } #section-3 .inner-cont-wrap .cont-holder .title-area .txt-box p { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-60px); -moz-transform: translateX(-60px); -ms-transform: translateX(-60px); -o-transform: translateX(-60px); transform: translateX(-60px); } #section-3 .inner-cont-wrap .cont-holder .title-area .txt-box.onShow h3 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 1.2s ease-out, opacity 1.2s; -moz-transition: -moz-transform 1.2s ease-out, opacity 1.2s; -ms-transition: -ms-transform 1.2s ease-out, opacity 1.2s; -o-transition: -o-transform 1.2s ease-out, opacity 1.2s; transition: transform 1.2s ease-out, opacity 1.2s; } #section-3 .inner-cont-wrap .cont-holder .title-area .txt-box.onShow p { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 1.2s ease-out, opacity 1.2s; -moz-transition: -moz-transform 1.2s ease-out, opacity 1.2s; -ms-transition: -ms-transform 1.2s ease-out, opacity 1.2s; -o-transition: -o-transform 1.2s ease-out, opacity 1.2s; transition: transform 1.2s ease-out, opacity 1.2s; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area { margin-bottom: 127px; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .intro-box { margin-bottom: 118px; margin-left: -119px; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .art-clip { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .art-clip.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 1s ease-out, opacity 1.4s linear; -moz-transition: -moz-transform 1s ease-out, opacity 1.4s linear; -ms-transition: -ms-transform 1s ease-out, opacity 1.4s linear; -o-transition: -o-transform 1s ease-out, opacity 1.4s linear; transition: transform 1s ease-out, opacity 1.4s linear; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .desc-clip { margin-top: -30px; padding-left: 198px; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .desc-clip .title { padding-top: 6px; color: #fff; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .desc-clip .desc { color: #fff; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .art-list-box { width: 1729px; height: 1292px; margin-left: -397px; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .art-list-box ul { position: relative; width: 100%; height: 100%; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .art-list-box ul .art-1 { position: absolute; top: 0; left: 859px; -webkit-transform: translateY(320px); -moz-transform: translateY(320px); -ms-transform: translateY(320px); -o-transform: translateY(320px); transform: translateY(320px); opacity: 0; filter: alpha(opacity=0); -webkit-transition: -webkit-transform 1s ease-out, opacity 0.4s linear; -moz-transition: -moz-transform 1s ease-out, opacity 0.4s linear; -ms-transition: -ms-transform 1s ease-out, opacity 0.4s linear; -o-transition: -o-transform 1s ease-out, opacity 0.4s linear; transition: transform 1s ease-out, opacity 0.4s linear; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .art-list-box ul .art-2 { position: absolute; top: 570px; left: 1012px; -webkit-transform: translateY(320px); -moz-transform: translateY(320px); -ms-transform: translateY(320px); -o-transform: translateY(320px); transform: translateY(320px); opacity: 0; filter: alpha(opacity=0); -webkit-transition: -webkit-transform 1.2s 0.6s ease-out, opacity 0.5s 0.6s linear; -moz-transition: -moz-transform 1.2s 0.6s ease-out, opacity 0.5s 0.6s linear; -ms-transition: -ms-transform 1.2s 0.6s ease-out, opacity 0.5s 0.6s linear; -o-transition: -o-transform 1.2s 0.6s ease-out, opacity 0.5s 0.6s linear; transition: transform 1.2s 0.6s ease-out, opacity 0.5s 0.6s linear; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .art-list-box ul .art-3 { position: absolute; top: 168px; left: 4px; -webkit-transform: translateY(320px); -moz-transform: translateY(320px); -ms-transform: translateY(320px); -o-transform: translateY(320px); transform: translateY(320px); opacity: 0; filter: alpha(opacity=0); -webkit-transition: -webkit-transform 1.4s 0.2s ease-out, opacity 0.6s 0.2s linear; -moz-transition: -moz-transform 1.4s 0.2s ease-out, opacity 0.6s 0.2s linear; -ms-transition: -ms-transform 1.4s 0.2s ease-out, opacity 0.6s 0.2s linear; -o-transition: -o-transform 1.4s 0.2s ease-out, opacity 0.6s 0.2s linear; transition: transform 1.4s 0.2s ease-out, opacity 0.6s 0.2s linear; } #section-3 .inner-cont-wrap .cont-holder .cont-1-area .art-list-box ul.onTrans li { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); } #section-3 .inner-cont-wrap .cont-holder .cont-2-area .interview-box .interview-clip { margin-right: 74px; padding-top: 21px; color: #fff; } #section-3 .inner-cont-wrap .cont-holder .cont-2-area .interview-box .interview-clip h6 { /*&:before{background-color:#fff}*/ } #section-3 .inner-cont-wrap .cont-holder .cont-2-area .interview-box .interview-clip h5 { margin-bottom: 35px; } #section-3 .inner-cont-wrap .cont-holder .cont-2-area .interview-box .interview-clip p { line-height: 34px; letter-spacing: -0.0375em; } #section-3 .inner-cont-wrap .cont-holder .cont-2-area .interview-box .interview-clip p span { margin-top: 33px; color: #a3dbfe; } #section-3 .inner-cont-wrap .cont-holder .cont-2-area .interview-box .artist-photo-clip { width: 560px; height: 420px; padding-top: 22px; } #section-3 .inner-cont-wrap .cont-holder .cont-2-area .interview-box .artist-photo-clip ul { position: relative; width: 100%; height: 100%; } #section-3 .inner-cont-wrap .cont-holder .cont-2-area .interview-box .artist-photo-clip ul li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); } #section-3 .inner-cont-wrap .cont-holder .cont-2-area .interview-box .artist-photo-clip ul li.active { z-index: 10; opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1s cubic-bezier(0,0,1,1); -webkit-transition-delay: 0s; -moz-transition: opacity 1s cubic-bezier(0,0,1,1); -moz-transition-delay: 0s; -ms-transition: opacity 1s cubic-bezier(0,0,1,1); -ms-transition-delay: 0s; -o-transition: opacity 1s cubic-bezier(0,0,1,1); -o-transition-delay: 0s; transition: opacity 1s cubic-bezier(0,0,1,1); transition-delay: 0s; } #section-3 .inner-cont-wrap .cont-holder .cont-2-area .interview-box .artist-photo-clip ul li.on { z-index: 5; opacity: 1; filter: alpha(opacity=100); } #section-4 { height: 4369px; background-color: #ededed; } #section-4 .inner-cont-wrap .cont-holder { padding-top: 424px; } #section-4 .inner-cont-wrap .cont-holder .title-area { position: relative; margin-bottom: 200px; } #section-4 .inner-cont-wrap .cont-holder .title-area .frame-box { overflow: hidden; position: relative; width: 672px; height: 920px; } #section-4 .inner-cont-wrap .cont-holder .title-area .frame-box .line-clip { position: relative; width: inherit; height: inherit; } #section-4 .inner-cont-wrap .cont-holder .title-area .frame-box .line-clip span { position: absolute; left: 50%; top: 50%; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 6px solid #d9d8d8; box-sizing: border-box; will-change: border-box; width: 85%; height: 85%; } #section-4 .inner-cont-wrap .cont-holder .title-area .frame-box.onShow .line-clip span { opacity: 1; filter: alpha(opacity=100); width: 100%; height: 100%; } #section-4 .inner-cont-wrap .cont-holder .title-area .frame-box { margin: 0 auto; } #section-4 .inner-cont-wrap .cont-holder .title-area .frame-box.onShow .line-clip span { -webkit-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -webkit-transition-delay: 0.1s; -moz-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -moz-transition-delay: 0.1s; -ms-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition-delay: 0.1s; -o-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -o-transition-delay: 0.1s; transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); transition-delay: 0.1s; } #section-4 .inner-cont-wrap .cont-holder .title-area .obj-box { position: absolute; top: -245px; left: 553px; width: 771px; height: 818px; } #section-4 .inner-cont-wrap .cont-holder .title-area .obj-box .obj-clip { position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } #section-4 .inner-cont-wrap .cont-holder .title-area .obj-box .shadow-clip { position: absolute; right: 0; bottom: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #section-4 .inner-cont-wrap .cont-holder .title-area .obj-box.onShow .obj-clip { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 1s 0.3s ease-out, opacity 1s 0.3s; -moz-transition: -moz-transform 1s 0.3s ease-out, opacity 1s 0.3s; -ms-transition: -ms-transform 1s 0.3s ease-out, opacity 1s 0.3s; -o-transition: -o-transform 1s 0.3s ease-out, opacity 1s 0.3s; transition: transform 1s 0.3s ease-out, opacity 1s 0.3s; } #section-4 .inner-cont-wrap .cont-holder .title-area .obj-box.onShow .shadow-clip { opacity: 0.2; filter: alpha(opacity=20); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: -webkit-transform 1s 0.3s ease-out, opacity 1s 0.3s; -moz-transition: -moz-transform 1s 0.3s ease-out, opacity 1s 0.3s; -ms-transition: -ms-transform 1s 0.3s ease-out, opacity 1s 0.3s; -o-transition: -o-transform 1s 0.3s ease-out, opacity 1s 0.3s; transition: transform 1s 0.3s ease-out, opacity 1s 0.3s; } #section-4 .inner-cont-wrap .cont-holder .title-area .txt-box { position: absolute; top: 454px; left: 189px; color: #000; } #section-4 .inner-cont-wrap .cont-holder .title-area .txt-box h3 { margin-bottom: 32px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(60px); -moz-transform: translateX(60px); -ms-transform: translateX(60px); -o-transform: translateX(60px); transform: translateX(60px); } #section-4 .inner-cont-wrap .cont-holder .title-area .txt-box p { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-60px); -moz-transform: translateX(-60px); -ms-transform: translateX(-60px); -o-transform: translateX(-60px); transform: translateX(-60px); letter-spacing: -0.035em; } #section-4 .inner-cont-wrap .cont-holder .title-area .txt-box.onShow h3 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 1.2s ease-out, opacity 1.2s; -moz-transition: -moz-transform 1.2s ease-out, opacity 1.2s; -ms-transition: -ms-transform 1.2s ease-out, opacity 1.2s; -o-transition: -o-transform 1.2s ease-out, opacity 1.2s; transition: transform 1.2s ease-out, opacity 1.2s; } #section-4 .inner-cont-wrap .cont-holder .title-area .txt-box.onShow p { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 1.2s ease-out, opacity 1.2s; -moz-transition: -moz-transform 1.2s ease-out, opacity 1.2s; -ms-transition: -ms-transform 1.2s ease-out, opacity 1.2s; -o-transition: -o-transform 1.2s ease-out, opacity 1.2s; transition: transform 1.2s ease-out, opacity 1.2s; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .intro-box { position: relative; width: 100%; margin-bottom: 210px; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .video-clip { margin-bottom: 91px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .video-clip .video-thumb-clip { display: none; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .video-clip .video-thumb-clip.onShow { display: block; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .video-clip.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 1s ease-out, opacity 1.4s linear; -moz-transition: -moz-transform 1s ease-out, opacity 1.4s linear; -ms-transition: -ms-transform 1s ease-out, opacity 1.4s linear; -o-transition: -o-transform 1s ease-out, opacity 1.4s linear; transition: transform 1s ease-out, opacity 1.4s linear; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .desc-clip { padding-left: 80px; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .desc-clip .title { margin-right: 60px; padding-top: 7px; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .desc-clip .desc { letter-spacing: -0.035em; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .artist-photo-clip { margin-right: 113px; width: 560px; height: 420px; padding-top: 2px; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .artist-photo-clip ul { position: relative; width: 100%; height: 100%; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .artist-photo-clip ul li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .artist-photo-clip ul li.active { z-index: 10; opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1s cubic-bezier(0,0,1,1); -webkit-transition-delay: 0s; -moz-transition: opacity 1s cubic-bezier(0,0,1,1); -moz-transition-delay: 0s; -ms-transition: opacity 1s cubic-bezier(0,0,1,1); -ms-transition-delay: 0s; -o-transition: opacity 1s cubic-bezier(0,0,1,1); -o-transition-delay: 0s; transition: opacity 1s cubic-bezier(0,0,1,1); transition-delay: 0s; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .artist-photo-clip ul li.on { z-index: 5; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .interview-clip { color: #000; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .interview-clip h6:before { background-color: #000000; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .interview-clip h5 { margin-bottom: 37px; } #section-4 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .interview-clip p span { margin-top: 24px; color: #8c8c8c; } #section-5 { height: 3802px; background-color: #ba5db0; } #section-5 .inner-cont-wrap { height: inherit; } #section-5 .inner-cont-wrap .cont-holder { padding-top: 180px; } #section-5 .inner-cont-wrap .cont-holder .title-area { position: relative; margin-bottom: 206px; } #section-5 .inner-cont-wrap .cont-holder .title-area .frame-box { overflow: hidden; position: relative; width: 1280px; height: 720px; } #section-5 .inner-cont-wrap .cont-holder .title-area .frame-box .line-clip { position: relative; width: inherit; height: inherit; } #section-5 .inner-cont-wrap .cont-holder .title-area .frame-box .line-clip span { position: absolute; left: 50%; top: 50%; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 6px solid #9f4495; box-sizing: border-box; will-change: border-box; width: 85%; height: 85%; } #section-5 .inner-cont-wrap .cont-holder .title-area .frame-box.onShow .line-clip span { opacity: 1; filter: alpha(opacity=100); width: 100%; height: 100%; } #section-5 .inner-cont-wrap .cont-holder .title-area .frame-box { margin: 0 auto; } #section-5 .inner-cont-wrap .cont-holder .title-area .frame-box.onShow .line-clip span { -webkit-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -webkit-transition-delay: 0.1s; -moz-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -moz-transition-delay: 0.1s; -ms-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition-delay: 0.1s; -o-transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); -o-transition-delay: 0.1s; transition: all 1.2s cubic-bezier(0, 0.5, 0.5, 1); transition-delay: 0.1s; } #section-5 .inner-cont-wrap .cont-holder .title-area .obj-box { position: absolute; top: 334px; left: 717px; width: 680px; height: 497px; } #section-5 .inner-cont-wrap .cont-holder .title-area .obj-box .obj-clip { position: absolute; left: 33px; top: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: -30% 20%; -moz-transform-origin: -30% 20%; -ms-transform-origin: -30% 20%; -o-transform-origin: -30% 20%; transform-origin: -30% 20%; } #section-5 .inner-cont-wrap .cont-holder .title-area .obj-box.onShow .obj-clip { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -o-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transition: -webkit-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s; -moz-transition: -moz-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s; -ms-transition: -ms-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s; -o-transition: -o-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s; transition: transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s; } #section-5 .inner-cont-wrap .cont-holder .title-area .txt-box { position: absolute; top: 143px; left: 138px; color: #fff; } #section-5 .inner-cont-wrap .cont-holder .title-area .txt-box h3 { margin-bottom: 30px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(60px); -moz-transform: translateX(60px); -ms-transform: translateX(60px); -o-transform: translateX(60px); transform: translateX(60px); letter-spacing: 0.34em; } #section-5 .inner-cont-wrap .cont-holder .title-area .txt-box p { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-60px); -moz-transform: translateX(-60px); -ms-transform: translateX(-60px); -o-transform: translateX(-60px); transform: translateX(-60px); } #section-5 .inner-cont-wrap .cont-holder .title-area .txt-box.onShow h3 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 1.2s ease-out, opacity 1.2s; -moz-transition: -moz-transform 1.2s ease-out, opacity 1.2s; -ms-transition: -ms-transform 1.2s ease-out, opacity 1.2s; -o-transition: -o-transform 1.2s ease-out, opacity 1.2s; transition: transform 1.2s ease-out, opacity 1.2s; } #section-5 .inner-cont-wrap .cont-holder .title-area .txt-box.onShow p { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 1.2s ease-out, opacity 1.2s; -moz-transition: -moz-transform 1.2s ease-out, opacity 1.2s; -ms-transition: -ms-transform 1.2s ease-out, opacity 1.2s; -o-transition: -o-transform 1.2s ease-out, opacity 1.2s; transition: transform 1.2s ease-out, opacity 1.2s; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box { margin-bottom: 210px; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .lenticular-clip { position: relative; width: 1280px; height: 1495px; overflow: hidden; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .lenticular-clip .frame { position: relative; width: 100%; height: 100%; top: -12px; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .lenticular-clip .frame canvas { position: absolute; left: 0; top: 0px; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .lenticular-clip .frame .guide-info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.5; filter: alpha(opacity=50); display: block; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .lenticular-clip .frame .guide-info.onHide { -webkit-transition: opacity 1s cubic-bezier(0,0,1,1); -webkit-transition-delay: 0s; -moz-transition: opacity 1s cubic-bezier(0,0,1,1); -moz-transition-delay: 0s; -ms-transition: opacity 1s cubic-bezier(0,0,1,1); -ms-transition-delay: 0s; -o-transition: opacity 1s cubic-bezier(0,0,1,1); -o-transition-delay: 0s; transition: opacity 1s cubic-bezier(0,0,1,1); transition-delay: 0s; opacity: 0; filter: alpha(opacity=0); } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .lenticular-clip .lenticular-scroll { position: absolute; top: 0; right: 40px; width: 5px; height: 720px; margin-top: 390px; background-color: rgba(255, 255, 255, 0.6); } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .lenticular-clip .lenticular-scroll .btn { position: absolute; width: 60px; height: 80px; display: block; margin: -40px 0 0 -30px; top: 360px; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .lenticular-clip .lenticular-scroll .btn .box { width: 12px; height: 64px; margin: 8px 0 0 26.5px; background-color: #fff; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .guide { display: block; text-align: right; color: #fff; font-family: 'samsungonekorean400'; font-size: 14px; letter-spacing: -0.055em; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .desc-clip { margin-top: 76px; padding-left: 78px; color: #fff; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .intro-box .desc-clip .title { margin-right: 117px; padding-top: 6px; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .artist-photo-clip { width: 560px; height: 420px; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .artist-photo-clip ul { position: relative; width: 100%; height: 100%; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .artist-photo-clip ul li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .artist-photo-clip ul li.active { z-index: 2; opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1s cubic-bezier(0,0,1,1); -webkit-transition-delay: 0s; -moz-transition: opacity 1s cubic-bezier(0,0,1,1); -moz-transition-delay: 0s; -ms-transition: opacity 1s cubic-bezier(0,0,1,1); -ms-transition-delay: 0s; -o-transition: opacity 1s cubic-bezier(0,0,1,1); -o-transition-delay: 0s; transition: opacity 1s cubic-bezier(0,0,1,1); transition-delay: 0s; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .artist-photo-clip ul li.on { z-index: 1; opacity: 1; filter: alpha(opacity=100); } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .interview-clip { color: #fff; margin-right: 93px; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .interview-clip h5 { margin-bottom: 36px; } #section-5 .inner-cont-wrap .cont-holder .cont-1-area .interview-box .interview-clip p span { margin-top: 27px; color: #fbc3f5; } #section-5 .inner-cont-wrap .dim-holder { z-index: 3; } #section-6 .inner-cont-wrap { overflow: hidden; z-index: 4; } #section-6 .inner-cont-wrap .bg-holder { background-image: url(../img/sec6_bg01.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #section-6 .inner-cont-wrap .bg-holder ul { position: relative; width: 100%; height: 100%; } #section-6 .inner-cont-wrap .bg-holder ul li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; opacity: 0; filter: alpha(opacity=0); } #section-6 .inner-cont-wrap .bg-holder ul li.active { z-index: 10; opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1s cubic-bezier(0,0,1,1); -webkit-transition-delay: 0s; -moz-transition: opacity 1s cubic-bezier(0,0,1,1); -moz-transition-delay: 0s; -ms-transition: opacity 1s cubic-bezier(0,0,1,1); -ms-transition-delay: 0s; -o-transition: opacity 1s cubic-bezier(0,0,1,1); -o-transition-delay: 0s; transition: opacity 1s cubic-bezier(0,0,1,1); transition-delay: 0s; } #section-6 .inner-cont-wrap .bg-holder ul li.on { z-index: 5; opacity: 1; filter: alpha(opacity=100); } #section-6 .inner-cont-wrap .bg-holder ul li.img-thumb-1 { background-image: url(../img/sec6_bg01.jpg); } #section-6 .inner-cont-wrap .bg-holder ul li.img-thumb-2 { background-image: url(../img/sec6_bg02.jpg); } #section-6 .inner-cont-wrap .bg-holder ul li.img-thumb-3 { background-image: url(../img/sec6_bg03.jpg); } #section-6 .inner-cont-wrap .bg-holder ul.instant-slide li { -webkit-transition: 0.001s ease !important; transition: 0.001s ease !important; } #section-6 .inner-cont-wrap .bx-wrapper { height: 100%; } #section-6 .inner-cont-wrap .bx-wrapper .bx-viewport { height: 100% !important; } #section-6 .inner-cont-wrap .cont-holder { position: relative; z-index: 99; } #section-6 .inner-cont-wrap .cont-holder .txt-box { position: relative; text-align: center; opacity: 0; filter: alpha(opacity=0); margin-top: 37px; top: 50%; -webkit-transform: translateY(-35%); -moz-transform: translateY(-35%); -ms-transform: translateY(-35%); -o-transform: translateY(-35%); transform: translateY(-35%); } #section-6 .inner-cont-wrap .cont-holder .txt-box p { margin-bottom: 52px; color: #fff; } #section-6 .inner-cont-wrap .cont-holder .txt-box .btn-clip .btn_download { margin-right: 15px; } #section-6 .inner-cont-wrap .cont-holder .txt-box .btn-clip .btn_go_sec { display: inline-block; width: 210px; height: 45px; margin-right: 5px; font-size: 0; text-indent: -9999px; vertical-align: top; background: url(../img/btn_sec.png) no-repeat 0px 0px; } #section-6 .inner-cont-wrap .cont-holder .txt-box .btn-clip .btn_go_sec:hover { background-position: 0px -55px; } #section-6 .inner-cont-wrap .cont-holder .txt-box.onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 1s 0.3s ease-out, opacity 1s 0.3s; -moz-transition: -moz-transform 1s 0.3s ease-out, opacity 1s 0.3s; -ms-transition: -ms-transform 1s 0.3s ease-out, opacity 1s 0.3s; -o-transition: -o-transform 1s 0.3s ease-out, opacity 1s 0.3s; transition: transform 1s 0.3s ease-out, opacity 1s 0.3s; } /*# sourceMappingURL=page.css.map */