.subvisual { position:relative; width:100%; height:100vh; background:#fdfbf4; } .subvisual .subline { position:relative; width:100%; height:100%; } .subvisual .subline li { position:absolute; top:0px; width:1px; height:100%; background:#e2e0db; } .subvisual .subline li:nth-child(1) { left:30%; animation: subline 1s cubic-bezier(0.77, 0, 0.175, 1) forwards; } .subvisual .subline li:nth-child(2) { left:70%; animation: subline 1s cubic-bezier(0.77, 0, 0.175, 1) forwards; } .subvisual .txt1 { position:absolute; top:50%; left:50%; width:1280px; transform:translate(-50%,-50%); font-size:64px; color:#333333; font-family: 'Minerva Modern Bold'; letter-spacing:2px; text-align:center; overflow:hidden; } .subvisual .txt1 span { display:block; animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards; } .subvisual .bg { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.2s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/01_sub/images/01_01.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual .bg2 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.2s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/02_sub/images/02_01.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual .bg3 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.2s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/03_sub/images/03_01.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual .bg4 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.6s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/04_sub/images/04_01.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual .bg5 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.6s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/05_sub/images/05_01.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual .bg6 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.6s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/04_sub/images/0402_01.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual .bg7 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.6s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/01_sub/images/0102.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual .bg8 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.6s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/04_sub/images/0403.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual .bg9 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.6s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/05_sub/images/0502.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual .subtxt { position:absolute; top:70%; left:50%; transform:translate(-50%,0); width:1680px; overflow:hidden; } .subvisual .subtxt li.t1 { font-family: 'Minerva Modern Bold'; letter-spacing:2px; text-align:center; font-size:152px; color:#ffffff; line-height:100%; } .subvisual .subtxt li.t1 span { display:inline-block; transform: translateY(100%); } .subvisual.active .subtxt .t1 span:nth-child(1) { animation: reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 1.8s; } .subvisual.active .subtxt .t1 span:nth-child(2) { animation: reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 1.9s; } .subvisual.active .subtxt .t1 span:nth-child(3) { animation: reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 2.0s; } .subvisual .subtxt2 { position:absolute; top:50%; left:50%; width:1280px; transform:translate(-50%,-50%); width:1280px; overflow:hidden; text-align:center; } .subvisual .subtxt2 li.t1 { position:relative; width:100%; height:64px; font-size:64px; color:#333333; font-family: 'Minerva Modern Bold'; letter-spacing:2px; overflow:hidden; } .subvisual .subtxt2 li.t2 { position:relative; width:100%; height:20px; margin-top:10px; font-size:20px; color:#0a0a0a; font-weight:400; overflow:hidden; } .subvisual .subtxt2 li.t1 span { display:block;transform: translateY(100%); } .subvisual .subtxt2 li.t2 span { display:block;transform: translateY(100%); } .subvisual.active .subtxt2 li.t1 span { display:block; animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.2s; } .subvisual.active .subtxt2 li.t2 span { display:block; animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.7s; } .subvisual .subtxt3 { position:absolute; top:70%; left:50%; transform:translate(-50%,0); width:1680px; overflow:hidden; text-align:center; } .subvisual .subtxt3 li.t1 { height:20px; font-size:20px; color:#ffffff; font-weight:500; line-height:100%; overflow:hidden; } .subvisual .subtxt3 li.t1 span { display:inline-block; transform: translateY(100%); } .subvisual .subtxt3 li.t2 { height:152px; margin-top:10px; font-family: 'Minerva Modern Bold'; letter-spacing:2px; text-align:center; font-size:152px; color:#ffffff; line-height:100%; overflow:hidden; } .subvisual .subtxt3 li.t2 span { display:inline-block; transform: translateY(100%); } .subvisual.active .subtxt3 .t1 span { animation: reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 2.2s; } .subvisual.active .subtxt3 .t2 span { animation: reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 2.5s; } .subvisual2 { position:relative; width:100%; height:100vh; background:#fdfbf4; overflow:hidden; } .subvisual2 .subline { position:relative; width:100%; height:100%; } .subvisual2 .subline li { position:absolute; top:0px; width:1px; height:100%; background:#e2e0db; } .subvisual2 .subline li:nth-child(1) { left:30%; animation: subline 1s cubic-bezier(0.77, 0, 0.175, 1) forwards; } .subvisual2 .subline li:nth-child(2) { left:70%; animation: subline 1s cubic-bezier(0.77, 0, 0.175, 1) forwards; } .subvisual2 .bg { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.2s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/06_sub/images/0601.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual2 .bg2 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.2s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/06_sub/images/0602.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual2 .bg3 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.2s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/06_sub/images/0603.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual2 .bg4 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.2s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/06_sub/images/0604.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual2 .bg5 { animation: subvisualbg 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.2s; position:absolute; bottom:0px; left:0px; width:100%; height:0%; background:url('/page_KR0/06_sub/images/0605.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .subvisual2 .subtxt2 { position:absolute; top:50%; left:50%; width:1280px; transform:translate(-50%,-50%); width:1280px; overflow:hidden; text-align:center; } .subvisual2 .subtxt2 li.t1 { position:relative; width:100%; height:64px; font-size:64px; color:#333333; font-family: 'Minerva Modern Bold'; letter-spacing:2px; overflow:hidden; } .subvisual2 .subtxt2 li.t2 { position:relative; width:100%; height:20px; margin-top:10px; font-size:20px; color:#0a0a0a; font-weight:400; overflow:hidden; } .subvisual2 .subtxt2 li.t1 span { display:block;transform: translateY(100%); } .subvisual2 .subtxt2 li.t2 span { display:block;transform: translateY(100%); } .subvisual2 .subtxt2 li.t1 span { display:block; animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.2s; } .subvisual2 .subtxt2 li.t2 span { display:block; animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.7s; } .subvisual2 .subtxt3 { position:absolute; top:70%; left:50%; transform:translate(-50%,0); width:1680px; overflow:hidden; text-align:center; } .subvisual2 .subtxt3 li.t1 { height:20px; font-size:20px; color:#ffffff; font-weight:500; line-height:100%; overflow:hidden; } .subvisual2 .subtxt3 li.t1 span { display:inline-block; transform: translateY(100%); } .subvisual2 .subtxt3 li.t2 { height:152px; margin-top:10px; font-family: 'Minerva Modern Bold'; letter-spacing:2px; text-align:center; font-size:152px; color:#ffffff; line-height:100%; overflow:hidden; } .subvisual2 .subtxt3 li.t2 span { display:inline-block; transform: translateY(100%); } .subvisual2 .subtxt3 .t1 span { animation: reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 2.2s; } .subvisual2 .subtxt3 .t2 span { animation: reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 2.5s; } @keyframes reveal { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes subline { 0% { height:0px; } 100% { height:100%; } } @keyframes subvisualbg { 0% { height:0px; } 100% { height:100%; } } .sub01_01 { position:relative; width:100%; background:url('/page_KR0/01_sub/images/01_01.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub01_01 .subtxt { position:absolute; top:70%; left:50%; transform:translate(-50%,0); width:1680px; overflow:hidden; } .sub01_01 .subtxt li.t1 { font-family: 'Minerva Modern Bold'; letter-spacing:2px; text-align:center; font-size:152px; color:#ffffff; line-height:100%; } .sub01_01 .subtxt li.t1 span { display:inline-block; transform: translateY(100%); } .sub01_01.active .subtxt .t1 span:nth-child(1) { animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.4s; } .sub01_01.active .subtxt .t1 span:nth-child(2) { animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.6s; } .sub01_01.active .subtxt .t1 span:nth-child(3) { animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.8s; } .sub01_02 { position:relative; width:100%; background:#f5f4eb url('/page_KR0/01_sub/images/01_02.jpg')no-repeat 50% 0; overflow:hidden; } .sub01_02 .txt1 { position:absolute; top:30%; left:50%; transform:translate(-50%,-50%); opacity:0; filter: blur(10px); } .sub01_02 .txt2 { position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); opacity:0; filter: blur(10px); } .sub01_02 .txt3 { position:absolute; top:100%; left:50%; transform:translate(-50%,-50%); opacity:0; filter: blur(10px); font-family: 'Pretendard'; text-align:center; font-size:22px; font-weight:600; color:#313131; line-height:170%; } .sub01_02 .img1 { position:absolute; top:15%; left:10%; transform:translate(-50%,-50%); opacity:0; filter: blur(10px); } .sub01_02 .img2 { position:absolute; top:60%; left:34%; transform:translate(-50%,-50%); opacity:0; filter: blur(10px); } .sub01_02 .img3 { position:absolute; top:70%; left:20%; transform:translate(-50%,-50%); opacity:0; filter: blur(10px); } .sub01_02 .img4 { position:absolute; top:35%; left:83%; transform:translate(-50%,-50%); opacity:0; filter: blur(10px); } .sub01_02 .img5 { position:absolute; top:70%; left:86%; transform:translate(-50%,-50%); opacity:0; filter: blur(10px); } .sub01_02.active .txt1 { top:20%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub01_02.active .txt2 { top:50%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub01_02.active .txt3 { top:90%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.1s; } .sub01_02.active .img1 { top:15%; left:20%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.6s; } .sub01_02.active .img2 { top:50%; left:34%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.6s; } .sub01_02.active .img3 { top:80%; left:20%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.6s; } .sub01_02.active .img4 { top:35%; left:73%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.6s; } .sub01_02.active .img5 { top:80%; left:86%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.6s; } .sub01_03 { position:relative; width:100%; background:#e8e6dc; overflow:hidden; } .sub01_03 .txt1 { position:absolute; top:15%; left:50%; transform:translate(-50%,-50%); opacity:0; filter: blur(6px); font-family: 'Pretendard'; text-align:center; font-size:22px; font-weight:600; color:#000000; line-height:100%; } .sub01_03 .txt2 { position:absolute; top:95%; left:50%; transform:translate(-50%,-50%); opacity:0; filter: blur(6px); font-family: 'Pretendard'; text-align:center; font-size:20px; font-weight:500; color:#5a5a5a; line-height:170%; } .sub01_03 .imgbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; max-width:1800px; height:622px; } .sub01_03 .imgbg .bg1 { float:left; position:relative; width:49%; height:622px; } .sub01_03 .imgbg .bg2 { float:right; position:relative; width:49%; height:622px; } .sub01_03 .imgbg .bg1 span { display:block; position:absolute; top:0px; left:50%; transform:translate(-50%,0); width:0%; height:100%; background:url('/page_KR0/01_sub/images/01_03_img1.jpg')no-repeat 50% 0; } .sub01_03 .imgbg .bg2 span { display:block; position:absolute; top:0px; left:50%; transform:translate(-50%,0); width:0%; height:100%; background:url('/page_KR0/01_sub/images/01_03_img2.jpg')no-repeat 50% 0; } .sub01_03.active .txt1 { top:10%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub01_03.active .txt2 { top:90%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.1s; } .sub01_03.active .imgbg .bg1 span { width:100%; transition:all 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub01_03.active .imgbg .bg2 span { width:100%; transition:all 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub01_04 { position:relative; width:100%; background:#ffffff; overflow:hidden; } .sub01_04 .bg { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; filter: blur(46px); background:url('/page_KR0/01_sub/images/01_04.jpg')no-repeat 50% 0; } .sub01_04 .subtxt { position:absolute; top:20%; left:60%; opacity:0; filter: blur(6px); transform:translate(-50%,0); width:388px; overflow:hidden; } .sub01_04 .subtxt li.t1 { } .sub01_04 .subtxt li.t2 { margin-top:20px; font-family: 'Pretendard'; font-size:22px; font-weight:500; color:#5a5a5a; line-height:170%; } .sub01_04.active .subtxt { left:54%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub01_04.active .bg { filter: blur(0px); opacity:1; transition:all 1.6s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub01_04 .maintxt3 { position:absolute; top:70%; left:26%; transform:translate(-50%,-50%); width:280px; height:280px; } .sub01_04 .main02svg { width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible; } .sub01_04 .main02g_1 { transform: matrix(1,0,0,1,332,173); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s;} .sub01_04.active .main02g_1 { transform: matrix(0, -1, 1, 0, 173, 334); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.3s; } .sub01_04 .main02g_3 { transform: matrix(1,0,0,1,333,7); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s;} .sub01_04.active .main02g_3 { transform: matrix(0,-1,1,0,7,333); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.3s; } .sub01_04 .main02g_4 path { d: path("M -166.5 -162 C 9.679 -162 159.5 -12.179 159.5 164");transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s; } .sub01_04.active .main02g_4 path { d: path("M -166.5 -162 C -166.5 -12 9.5 164 159.5 164"); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.3s; } .sub01_05 { position:relative; width:100%; background:#f7f6ee; overflow:hidden; } .sub01_05 .txt1 { position:absolute; top:15%; left:67%; opacity:0; filter: blur(6px); transform:translate(-50%,-50%); width:585px; font-family: 'Pretendard'; font-size:23px; font-weight:600; color:#1c1c1c; line-height:150%; } .sub01_05 .txt1 span { font-weight:700; } .sub01_05 .txt2 { position:absolute; top:65%; left:67%; opacity:0; filter: blur(6px); transform:translate(-50%,-50%); width:585px; } .sub01_05 .txt3 { position:absolute; top:85%; left:90%; opacity:0; filter: blur(6px); transform:translate(-50%,-50%); font-family: 'Pretendard'; font-size:17px; font-weight:500; color:#3a3a3a; line-height:150%; } .sub01_05.active .txt1 { left:57%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub01_05.active .txt2 { left:57%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.7s; } .sub01_05.active .txt3 { left:80%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub01_05 .img1 { position:absolute; top:50%; left:22%; transform:translate(-50%,-50%); width:35%; max-width:711px; height:0px; background:url('/page_KR0/01_sub/images/01_05_img1.jpg')no-repeat 50% 50%; } .sub01_05 .img2 { position:absolute; top:45%; left:65%; transform:translate(-50%,-50%); width:20%; max-width:328px; height:0px; background:url('/page_KR0/01_sub/images/01_05_img2.jpg')no-repeat 50% 50%; } .sub01_05 .img3 { position:absolute; top:27%; left:88%; transform:translate(-50%,-50%); width:22%; max-width:350px; height:0px; background:url('/page_KR0/01_sub/images/01_05_img3.jpg')no-repeat 50% 50%; } .sub01_05.active .img1 { height:857px; transition:all 0.7s cubic-bezier(0.25, 1, 0.5, 1) 1.4s; } .sub01_05.active .img2 { height:291px; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.6s; } .sub01_05.active .img3 { height:409px; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.8s; } .sub01_06 { position:relative; width:100%; background:#fdfbf4; overflow:hidden; } .sub01_06 .introtxt2 { position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); width:490px; animation:introtxt3 2.4s cubic-bezier(0.25, 1, 0.5, 1) both 0.5s; } .sub01_06 .introtxt2 li.t1 { position:absolute; transform-origin: 50% 50%; left:136px; width:230px; height:230px; margin:0 auto; } .sub01_06 .introtxt2 li.t1 img { width:100%; } .sub01_06 .introtxt2 li.t2 { width:0px; height:230px; margin:0 auto; background:url('/images/common/main01txt2.png')no-repeat 50% 0; background-size:230px; overflow:hidden; } .sub01_06 .introtxt2 li.t3 { font-family: 'Pretendard'; text-align:center; font-size:26px; font-weight:500; color:#3a3a3a; line-height:170%; margin-top:34px; opacity:0; filter: blur(6px); transform:translateY(80px); } .sub01_06 .introtxt2 li.t3 span { font-weight:700; } .sub01_06.active .t1 { animation: rotate_image 56s linear infinite 2.2s; } .sub01_06.active .introtxt2 li.t2 { width:230px; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.0s; } .sub01_06.active .introtxt2 li.t3 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.4s; } .sub01_07 { position:relative; width:100%; background:#e8e6dc; overflow:hidden; } .sub01_07 .subtxt1 { position:absolute; top:35%; left:35%; transform:translate(-50%,-50%); width:565px; text-align:right; } .sub01_07 .subtxt1 .t1 { font-family: 'Minerva Modern Bold'; font-size:248px; color:#303026; line-height:100%; letter-spacing:1px; opacity:0; filter: blur(4px); } .sub01_07 .subtxt1 .t2 { font-family: 'Pretendard'; font-size:27px; font-weight:600; color:#3a3a3a; line-height:100%; transform:translateY(80px); opacity:0; filter: blur(4px); } .sub01_07 .subtxt2 { position:absolute; top:65%; left:70%; transform:translate(-50%,-50%); width:565px; } .sub01_07 .subtxt2 .t1 { font-family: 'Minerva Modern Bold'; font-size:248px; color:#303026; line-height:100%; letter-spacing:1px; opacity:0; filter: blur(4px); } .sub01_07 .subtxt2 .t2 { font-family: 'Pretendard'; font-size:27px; font-weight:600; color:#3a3a3a; line-height:160%; transform:translateY(80px); opacity:0; filter: blur(4px); } .sub01_07.active .subtxt1 .t1 { font-size:218px; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub01_07.active .subtxt2 .t1 { font-size:218px; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub01_07.active .subtxt1 .t2 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.0s; } .sub01_07.active .subtxt2 .t2 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.0s; } .sub01_08 { position:relative; width:100%; background:#e8e6dc; overflow:hidden; } .sub01_08 .bg { position:absolute; top:60%; left:40%; width:287px; height:89px; transform:translate(-50%,-50%); background:#000000; opacity:0; overflow:hidden; transition:all 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0s; } .sub01_08 .bg video { display:block; width:100%; opacity:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .sub01_08 .txt1 { position:absolute; top:35%; left:45%; transform:translate(-50%,-50%); font-family: 'Minerva Modern Bold'; font-size:248px; color:#e1ddd4; line-height:100%; letter-spacing:1px; opacity:0; filter: blur(4px); } .sub01_08 .txt2 { position:absolute; top:65%; left:60%; transform:translate(-50%,-50%); font-family: 'Minerva Modern Bold'; font-size:248px; color:#e1ddd4; line-height:100%; letter-spacing:1px; opacity:0; filter: blur(4px); } .sub01_08.active .txt1 { left:35%; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub01_08.active .txt2 { left:70%; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .fp-viewing-7 .sub01_08 .bg { position:fixed; top:60%; left:40%; width:387px; height:149px; opacity:1; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.5s; } .fp-viewing-8 .sub01_08 .bg { position:fixed; top:50%; left:50%; width:100%; height:100%; opacity:1; transition:all 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0s; } .fp-viewing-9 .sub01_08 .bg { position:absolute; top:50%; left:50%; width:100%; height:100%; opacity:1; transition:all 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0s; } .sub01_09 { position:relative; width:100%; background:#f9f7ec; overflow:hidden; } .sub01_09 .bg1 { position:absolute; top:0; right:0px; width:0%; height:100%; background:url('/page_KR0/01_sub/images/01_09bg1.jpg')no-repeat right 50%; background-size:cover; } .sub01_09 .bg2 { position:absolute; top:0; right:0px; width:0%; height:100%; background:url('/page_KR0/01_sub/images/01_09bg2.jpg')no-repeat right 50%; background-size:cover; } .sub01_09 .bg3 { position:absolute; top:0; right:0px; width:0%; height:100%; background:url('/page_KR0/01_sub/images/01_09bg3.jpg')no-repeat right 50%; background-size:cover; } .sub01_09 .bg4 { position:absolute; top:0; right:0px; width:0%; height:100%; background:url('/page_KR0/01_sub/images/01_09bg4.jpg')no-repeat right 50%; background-size:cover; } .sub01_09 .bg5 { position:absolute; top:0; right:0px; width:0%; height:100%; background:url('/page_KR0/01_sub/images/01_09bg5.jpg')no-repeat right 50%; background-size:cover; } .sub01_09 .subtxt { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1280px; text-align:center; } .sub01_09 .subtxt .t1 { font-family: 'Pretendard'; font-size:39px; font-weight:700; color:#ffffff; line-height:100%; letter-spacing:5px; opacity:0; filter: blur(10px); } .sub01_09 .subtxt .t2 { margin-top:20px; font-family: 'Pretendard'; font-size:19px; font-weight:500; color:#bbbbbb; line-height:100%; transform:translateY(80px); opacity:0; filter: blur(4px); } .sub01_09.active .subtxt .t1 { letter-spacing:-1px; opacity:1; filter: blur(0px); transition:all 1.5s cubic-bezier(0.25, 1, 0.5, 1) 1.8s; } .sub01_09.active .subtxt .t2 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 2.1s; } .sub01_09.active .bg1 { animation: sub01_09 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.3s; } .sub01_09.active .bg2 { animation: sub01_09 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.5s; } .sub01_09.active .bg3 { animation: sub01_09 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.7s; } .sub01_09.active .bg4 { animation: sub01_09 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.9s; } .sub01_09.active .bg5 { animation: sub01_09 1s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.1s; } @keyframes sub01_09 { 0% { width:0%; } 100% { width:100%; } } .fp-viewing-10 .sub01_09 .bg5 { position:absolute; top:0; right:0px; width:100%; height:100%; background:url('/page_KR0/01_sub/images/01_09bg5.jpg')no-repeat right 50%; } #sub0102 { position:relative; width:100%; background:#e8e5e0; overflow:hidden; } #sub0102 .subcenter { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1200px; overflow:hidden; } #sub0102 .intewrap { float:left; position:relative; width:577px; } #sub0102 .maptxt { float:right; position:relative; width:540px; } #sub0102 .maptxt div.txt1 { position:relative; width:100%; font-size:20px; font-weight:400; color:#3a3a3a; } #sub0102 .maptxt div.txt2 { position:relative; width:100%; margin-top:10px; font-size:33px; font-weight:500; color:#3a3a3a; border-bottom:1px solid #c5c5c5; padding-bottom:20px; } #sub0102 .maptxt div.txt3 { position:relative; width:100%; margin-top:16px; font-size:20px; font-weight:500; color:#3a3a3a; line-height:150%; } #sub0102 .maptxt div.txt4 { position:relative; width:100%; margin-top:20px; } #sub0102 .maptxt div.txt5 { position:relative; width:100%; overflow:hidden; margin-top:30px; } #sub0102 .maptxt div.txt5 a { display:block; float:left; position:relative; width:190px; height:43px; line-height:41px; margin-right:16px; border-radius:50px; border:1px solid #464545; padding-left:28px; font-size:19px; font-weight:600; color:#3a3a3a; box-sizing:border-box; } #sub0102 .maptxt div.txt5 a span { display:block; position:absolute; top:0px; right:24px; } #sub0102 .maptxt .foottime { position:relative; width:100%; margin-top:20px; } #sub0102 .maptxt .foottime ul { position:relative; width:100%; overflow:hidden; margin-bottom:12px; } #sub0102 .maptxt .foottime ul li.t1 { float:left; width:114px; font-size:18px; font-weight:500; color:#3a3a3a; line-height:100%; } #sub0102 .maptxt .foottime ul li.t2 { float:left; width:362px; font-size:18px; font-weight:500; color:#3a3a3a; line-height:100%; } #sub0102 .maptxt .foottime ul li.t3 { width:100%; font-size:18px; font-weight:500; color:#3a3a3a; line-height:100%; } .sub02_02 { position:relative; width:100%; background:#000a1b; overflow:hidden; } .sub02_02 .txt1 { position:absolute; top:32%; left:18%; transform:translate(-50%,-50%); width:592px; font-family: 'Minerva Modern Bold'; font-size:86px; color:#ffffff; line-height:100%; letter-spacing:1px; opacity:0; filter: blur(6px); } .sub02_02 .txt2 { position:absolute; top:56%; left:50%; transform:translate(-50%,-50%); width:228px; font-family: 'Minerva Modern Bold'; font-size:86px; color:#ffffff; line-height:100%; letter-spacing:1px; opacity:0; filter: blur(6px); } .sub02_02 .txt3 { position:absolute; top:60%; left:82%; transform:translate(-50%,-50%); width:768px; font-family: 'Minerva Modern Bold'; font-size:86px; color:#ffffff; line-height:100%; letter-spacing:1px; opacity:0; filter: blur(6px); } .sub02_02 .txt4 { position:absolute; top:36%; left:66%; transform:translate(-50%,-50%); font-size:21px; color:#ffffff; line-height:160%; opacity:0; filter: blur(6px); } .sub02_02.active .txt1 { left:28%; opacity:1; filter: blur(0px); transition:all 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub02_02.active .txt2 { top:46%; opacity:1; filter: blur(0px); transition:all 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub02_02.active .txt3 { left:72%; opacity:1; filter: blur(0px); transition:all 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub02_02.active .txt4 { top:46%; opacity:1; filter: blur(0px); transition:all 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub02_02 .introtxt2 { position:absolute; top:82%; left:50%; transform:translate(-50%,-50%); width:170px; animation:introtxt3 2.4s cubic-bezier(0.25, 1, 0.5, 1) both 1.0s; } .sub02_02 .introtxt2 li.t1 { position:absolute; transform-origin: 50% 50%; left:0px; width:170px; height:170px; margin:0 auto; } .sub02_02 .introtxt2 li.t1 img { width:100%; } .sub02_02 .introtxt2 li.t2 { width:0px; height:170px; margin:0 auto; background:url('/images/common/main01txt2.png')no-repeat 50% 0; background-size:170px; overflow:hidden; } .sub02_02.active .t1 { animation: rotate_image 56s linear infinite 2.5s; } .sub02_02.active .introtxt2 li.t2 { width:170px; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.5s; } .sub02_03 { position:relative; width:100%; background:#ffffff; overflow:hidden; } .sub02_03 .bg { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; filter: blur(46px); background:url('/page_KR0/02_sub/images/02_03.jpg')no-repeat 50% 50%; } .sub02_03 .txt1 { position:absolute; top:5%; left:50%; opacity:0; filter: blur(6px); transform:translate(-50%,0); width:519px; height:221px; overflow:hidden; } .sub02_03 .txt2 { position:absolute; top:90%; left:50%; opacity:0; filter: blur(6px); transform:translate(-50%,0); font-family: 'Pretendard'; font-size:20px; font-weight:500; color:#212121; line-height:150%; text-align:center; } .sub02_03.active .txt1 { top:10%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub02_03.active .txt2 { top:80%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; } .sub02_03.active .bg { filter: blur(0px); opacity:1; transition:all 1.6s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub02_03 .maintxt3 { position:absolute; top:70%; left:26%; transform:translate(-50%,-50%); width:280px; height:280px; } .sub02_03 .main02svg { width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible; } .sub02_03 .main02g_1 { transform: matrix(1,0,0,1,332,173); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s;} .sub02_03.active .main02g_1 { transform: matrix(0, -1, 1, 0, 173, 334); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.9s; } .sub02_03 .main02g_3 { transform: matrix(1,0,0,1,333,7); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s;} .sub02_03.active .main02g_3 { transform: matrix(0,-1,1,0,7,333); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.9s; } .sub02_03 .main02g_4 path { d: path("M -166.5 -162 C 9.679 -162 159.5 -12.179 159.5 164");transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s; } .sub02_03.active .main02g_4 path { d: path("M -166.5 -162 C -166.5 -12 9.5 164 159.5 164"); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.9s; } .sub02_04 { position:relative; width:100%; background:#f2f2f2; overflow:hidden; } .sub02_04 .txt1 { position:absolute; top:25%; left:50%; transform:translate(-50%,-50%); font-family: 'Minerva Modern Bold'; font-size:65px; color:#333333; line-height:100%; letter-spacing:1px; opacity:0; filter: blur(5px); } .sub02_04.active .txt1 { top:15%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub02_04 .bg1 { position:absolute; top:50%; left:50%; width:1492px; height:950px; transform:translate(-50%,-50%); } .sub02_04 .bg2 { position:absolute; top:50%; left:50%; width:1492px; height:950px; transform:translate(-50%,-50%); } .sub02_04 .bg3 { position:absolute; top:50%; left:50%; width:1492px; height:950px; transform:translate(-50%,-50%); } .sub02_04 .bg4 { position:absolute; top:50%; left:50%; width:1492px; height:950px; transform:translate(-50%,-50%); } .sub02_04 .bg1 div { position:absolute; bottom:0px; left:0px; width:1492px; height:0px; background:url('/page_KR0/02_sub/images/02_04_img1.jpg')no-repeat 50% bottom; } .sub02_04 .bg2 div { position:absolute; top:0px; left:0px; width:0px; height:950px; background:url('/page_KR0/02_sub/images/02_04_img2.png')no-repeat left 50%; } .sub02_04 .bg3 div { position:absolute; top:0px; left:120px; opacity:0; filter: blur(5px); width:1492px; height:950px; background:url('/page_KR0/02_sub/images/02_04_img3.png')no-repeat left 50%; } .sub02_04 .bg4 div { position:absolute; top:-80px; opacity:0; filter: blur(5px); left:0px; width:1492px; height:950px; background:url('/page_KR0/02_sub/images/02_04_img4.png')no-repeat left 50%; } .sub02_04.active .bg1 div { height:950px; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub02_04.active .bg2 div { width:1492px; transition:all 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub02_04.active .bg4 div { top:0px; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.3s; } .sub02_04.active .bg3 div { left:0px; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.6s; } .sub02_03 .bg { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; filter: blur(46px); background:url('/page_KR0/02_sub/images/02_03.jpg')no-repeat 50% 50%; } .sub02_03.active .bg { filter: blur(0px); opacity:1; transition:all 1.6s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub02_05 { position:relative; width:100%; background:#e3e0dc; overflow:hidden; } .sub02_05 .subtxt { position:absolute; top:30%; left:50%; transform:translate(-50%,-50%); text-align:center; opacity:0; filter: blur(6px); } .sub02_05 .subtxt .t1 { font-family: 'Minerva Modern Bold'; font-size:64px; color:#292929; line-height:100%; letter-spacing:1px; } .sub02_05 .subtxt .t2 { margin-top:20px; font-size:26px; font-weight:700; color:#292929; line-height:100%; } .sub02_05.active .subtxt { top:20%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub02_05 .bg { opacity:0; filter: blur(26px); position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/02_sub/images/02_05.jpg')no-repeat 50% 50%; } .sub02_05.active .bg { filter: blur(0px); opacity:1; transition:all 1.6s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub02_05 .txtwrap { position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); width:1000px; height:636px; } .sub02_05 .txtwrap .txt { position:absolute; font-size:21px; font-weight:600; color:#131313; line-height:100%: } .sub02_05 .txtwrap .txt span { display:block; width:16px; height:16px; position:absolute; border:5px solid #584832; border-radius:100%; box-sizing:border-box; } .sub02_05 .txtwrap .txt.txt1 { top:-20px; left:238px; filter: blur(5px); opacity:0;} .sub02_05 .txtwrap .txt.txt1 span { top:26px; left:10px; } .sub02_05 .txtwrap .txt.txt2 { top:50px; left:408px; filter: blur(5px); opacity:0; } .sub02_05 .txtwrap .txt.txt2 span { top:26px; left:10px; } .sub02_05 .txtwrap .txt.txt3 { top:270px; left:158px; filter: blur(5px); opacity:0; } .sub02_05 .txtwrap .txt.txt3 span { top:-26px; left:10px; } .sub02_05 .txtwrap .txt.txt4 { top:210px; left:452px; filter: blur(5px); opacity:0; } .sub02_05 .txtwrap .txt.txt4 span { top:26px; left:10px; } .sub02_05 .txtwrap .txt.txt5 { top:300px; left:682px; filter: blur(5px); opacity:0; } .sub02_05 .txtwrap .txt.txt5 span { top:26px; left:10px; } .sub02_05 .txtwrap .txt.txt6 { top:640px; left:482px; filter: blur(5px); opacity:0; } .sub02_05 .txtwrap .txt.txt6 span { top:-26px; left:18px; } .sub02_05.active .txtwrap .txt.txt1 { top:50px; left:238px; transition:all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; filter: blur(0px); opacity:1;} .sub02_05.active .txtwrap .txt.txt2 { top:50px; left:338px; transition:all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; filter: blur(0px); opacity:1;} .sub02_05.active .txtwrap .txt.txt3 { top:270px; left:228px; transition:all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; filter: blur(0px); opacity:1;} .sub02_05.active .txtwrap .txt.txt4 { top:280px; left:452px; transition:all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; filter: blur(0px); opacity:1;} .sub02_05.active .txtwrap .txt.txt5 { top:370px; left:732px; transition:all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; filter: blur(0px); opacity:1;} .sub02_05.active .txtwrap .txt.txt6 { top:570px; left:482px; transition:all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; filter: blur(0px); opacity:1;} .sub02_06 { position:relative; width:100%; height:990px; background:#dc9308 url('/images/common/main2_bg1.jpg')no-repeat 50% 50%; background-size:cover; overflow:hidden; } .sub02_06 .bg { position:absolute; bottom:0px; left:0px; width:100%; height:100%; opacity:0; background:url('/images/common/main2_bg2.jpg')no-repeat 50% 50%; background-size:cover; transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s;} .sub02_06 .t1 { position:absolute; top:30%; left:40%; transform:translate(-50%,-50%); opacity:0%; width:485px; transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s;} .sub02_06 .t2 { position:absolute; top:50%; left:75%; transform:translate(-50%,-50%); opacity:0%; width:233px; transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s;} .sub02_06 .t3 { position:absolute; top:80%; left:40%; transform:translate(-50%,-50%); opacity:0%; width:563px; transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s;} .sub02_06.active .bg { opacity:100%; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub02_06.active .t1 { top:35%; opacity:100%; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.3s; } .sub02_06.active .t2 { left:70%; opacity:100%; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.3s; } .sub02_06.active .t3 { top:70%; opacity:100%; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.3s; } .sub02_07 { position:relative; width:100%; height:1180px; background:#ffffff; overflow:hidden; } .sub02_07 #counttxt { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; position:absolute; top:49%; left:60%; transform:translate(-50%,-50%); width:90%; max-width:1560px; height:780px;opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub02_07 #counttxt ul { position:relative; width:31.333%; height:380px; margin-right:2.5%; margin-bottom:2.5%; padding:3% 0 0 60px; border-radius:20px; background: linear-gradient(140deg, #e3eaf0, #f8f1e9); box-sizing:border-box; } .sub02_07 #counttxt ul:nth-child(3) { margin-right:0px; } .sub02_07 #counttxt ul li.t1 { font-size:84px; color:#09243f; font-family: 'Minerva Modern Bold'; } .sub02_07 #counttxt ul li.t2 { margin-top:20px; font-size:21px; color:#09243f; font-weight:700; line-height:150%; } .sub02_07 #counttxt ul li.t3 { margin-top:20px; font-size:17px; color:#1f2226; font-weight:500; line-height:150%; } .sub02_07.active #counttxt { left:50%; opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s; } .sub02_08 { position:relative; width:100%; background:#fdfbf4; overflow:hidden; } .sub02_08 .introtxt2 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:490px; animation:introtxt3 2.4s cubic-bezier(0.25, 1, 0.5, 1) both 0.5s; } .sub02_08 .introtxt2 li.t1 { position:absolute; transform-origin: 50% 50%; left:136px; width:230px; height:230px; margin:0 auto; } .sub02_08 .introtxt2 li.t1 img { width:100%; } .sub02_08 .introtxt2 li.t2 { width:0px; height:230px; margin:0 auto; background:url('/images/common/main01txt2.png')no-repeat 50% 0; background-size:230px; overflow:hidden; } .sub02_08 .introtxt2 li.t3 { font-family: 'Pretendard'; text-align:center; font-size:26px; font-weight:600; color:#09243f; line-height:170%; margin-top:34px; opacity:0; filter: blur(6px); transform:translateY(80px); } .sub02_08 .introtxt2 li.t3 span { font-weight:700; } .sub02_08.active .t1 { animation: rotate_image 56s linear infinite 2.2s; } .sub02_08.active .introtxt2 li.t2 { width:230px; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.0s; } .sub02_08.active .introtxt2 li.t3 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.4s; } .sub03_02 { position:relative; width:100%; background:url('/page_KR0/03_sub/images/03_02.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub03_02 .txt1 { position:absolute; top:38%; left:70%; transform:translate(-50%,-50%); width:410px; font-family: 'Pretendard'; font-size:29px; border-left:1px solid #ffffff; padding-left:24px; font-weight:600; color:#ffffff; line-height:140%; opacity:0; filter: blur(6px); } .sub03_02 .txt2 { position:absolute; top:58%; left:61%; transform:translate(-50%,-50%); width:410px; font-family: 'Pretendard'; font-size:29px; font-weight:600; color:#ffffff; line-height:100%; opacity:0; filter: blur(6px); } .sub03_02.active .txt1 { left:62%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_02.active .txt2 { top:50%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_02 .introtxt2 { position:absolute; top:78%; left:50%; transform:translate(-50%,-50%); width:170px; animation:introtxt3 2.4s cubic-bezier(0.25, 1, 0.5, 1) both 1.0s; } .sub03_02 .introtxt2 li.t1 { position:absolute; transform-origin: 50% 50%; left:0px; width:170px; height:170px; margin:0 auto; } .sub03_02 .introtxt2 li.t1 img { width:100%; } .sub03_02 .introtxt2 li.t2 { width:0px; height:170px; margin:0 auto; background:url('/images/common/main01txt2.png')no-repeat 50% 0; background-size:170px; overflow:hidden; } .sub03_02.active .t1 { animation: rotate_image 56s linear infinite 2.5s; } .sub03_02.active .introtxt2 li.t2 { width:170px; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.5s; } .sub03_03 { position:relative; width:100%; background:#e8e6dc; overflow:hidden; } .sub03_03 .bg { position:absolute; top:0px; right:50%; width:0%; height:100%; background:url('/page_KR0/03_sub/images/03_03.jpg')no-repeat right 0; background-size:cover; } .sub03_03 .subtxt { position:absolute; top:0px; right:0px; width:50%; height:100%; } .sub03_03 .subtxt ul { position:absolute; top:65%; left:55%; transform:translate(-50%,-50%); width:90%; opacity:0; filter: blur(6px); } .sub03_03 .subtxt ul li.t1 { font-size:24px; color:#474747; font-weight:600; } .sub03_03 .subtxt ul li.t1 span { font-family: 'Minerva Modern Bold'; font-size:148px; color:#474747; letter-spacing:1px; } .sub03_03 .subtxt ul li.t2 { margin-top:20px; font-size:21px; color:#646464; font-weight:500; line-height:150%; } .sub03_03 .subtxt ul li.t3 { position:relative; width:100%; overflow:hidden; margin-top:150px; } .sub03_03 .subtxt ul li.t3 span { display:inline-block; height:44px; padding:0 20px; line-height:44px; text-align:center; border-radius:50px; margin-right:10px; margin-bottom:14px; font-size:18px; font-weight:500; color:#464646; border:1px solid #9d9c9a; box-sizing:border-box; } .sub03_03.active .bg { width:50%; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_03.active .subtxt ul { top:55%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub0403_03 { position:relative; width:100%; background:#ededed; overflow:hidden; } .sub0403_03 .bg { position:absolute; top:0px; right:65%; width:0%; height:100%; background:url('/page_KR0/04_sub/images/0403_03.jpg')no-repeat right 0; background-size:cover; } .sub0403_03 .subtxt { position:absolute; top:0px; right:0px; width:65%; height:100%; } .sub0403_03 .subtxt ul { position:absolute; top:65%; left:55%; transform:translate(-50%,-50%); width:90%; opacity:0; filter: blur(6px); } .sub0403_03 .subtxt ul li.t1 { font-size:29px; color:#474747; font-weight:600; } .sub0403_03 .subtxt ul li.t1_1 { margin-top:10px; font-size:43px; color:#474747; font-weight:700; } .sub0403_03 .subtxt ul li.t2 { margin-top:20px; font-size:21px; color:#646464; font-weight:500; line-height:150%; } .sub0403_03 .subtxt ul li.t3 { position:relative; width:100%; overflow:hidden; margin-top:90px; } .sub0403_03 .subtxt ul li.t3 span { display:inline-block; height:44px; padding:0 20px; line-height:44px; text-align:center; border-radius:50px; margin-right:10px; margin-bottom:14px; font-size:18px; font-weight:500; color:#464646; border:1px solid #9d9c9a; box-sizing:border-box; } .sub0403_03.active .bg { width:35%; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub0403_03.active .subtxt ul { top:55%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub03_04 { position:relative; width:100%; background:#f5f4eb; overflow:hidden; } .sub03_04 .bg1 { position:absolute; top:38%; left:12%; transform:translate(-50%,-50%); width:253px; height:292px; opacity:0; filter: blur(10px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_04 .bg2 { position:absolute; top:50%; left:26%; transform:translate(-50%,-50%); width:219px; height:253px; opacity:0; filter: blur(10px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_04 .bg3 { position:absolute; top:28%; left:46%; transform:translate(-50%,-50%); width:253px; height:292px; opacity:0; filter: blur(10px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_04 .bg4 { position:absolute; top:75%; left:57%; transform:translate(-50%,-50%); width:207px; height:205px; opacity:0; filter: blur(10px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_04 .bg5 { position:absolute; top:46%; left:75%; transform:translate(-50%,-50%); width:263px; height:281px; opacity:0; filter: blur(10px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_04 .bg6 { position:absolute; top:38%; left:90%; transform:translate(-50%,-50%); width:219px; height:305px; opacity:0; filter: blur(10px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_04 .subtxt { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .sub03_04 .subtxt li.t1 { font-family: 'Minerva Modern Bold'; font-size:86px; color:#000000; letter-spacing:1px; transform:translateY(80px); opacity:0; filter: blur(5px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_04 .subtxt li.t2 { margin-top:30px; padding-left:80px; font-size:26px; color:#393a36; font-weight:500; line-height:170%; transform:translateY(80px); opacity:0; filter: blur(5px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_04.active .bg1 { position:absolute; top:28%; left:12%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_04.active .bg2 { position:absolute; top:60%; left:26%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_04.active .bg3 { position:absolute; top:28%; left:36%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_04.active .bg4 { position:absolute; top:75%; left:67%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_04.active .bg5 { position:absolute; top:56%; left:75%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_04.active .bg6 { position:absolute; top:28%; left:90%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_04.active .subtxt li.t1 { transform:translateY(0); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub03_04.active .subtxt li.t2 { transform:translateY(0); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.3s; } .sub03_05 { position:relative; width:100%; background:url('/page_KR0/03_sub/images/03_05.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub03_05 .subtxt { position:absolute; top:32%; left:50%; transform:translate(-50%,-50%); opacity:0; filter: blur(6px); text-align:center; border-left:1px solid #ffffff; border-right:1px solid #ffffff; width:580px; transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_05 .subtxt li.t1 { font-size:25px; color:#ffffff; font-weight:600; line-height:100%; } .sub03_05 .subtxt li.t2 { margin-top:24px; font-family: 'Minerva Modern Bold'; font-size:50px; color:#fefefe; letter-spacing:1px; } .sub03_05.active .subtxt { top:22%; opacity:1; filter: blur(0px); transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_06 { position:relative; width:100%; background:url('/page_KR0/03_sub/images/03_06.jpg')no-repeat 50% top; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub03_06 .subtxt { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; width:1280px; } .sub03_06 .subtxt li.t1 { font-family: 'Minerva Modern Bold'; font-size:50px; color:#fefefe; letter-spacing:1px; transform:translateY(80px); opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_06 .subtxt li.t2 { margin-top:16px; font-size:25px; color:#ffffff; font-weight:600; line-height:100%; transform:translateY(80px); opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .sub03_06 .subtxt li.t3 { transform:translateX(80px); opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; position:relative; width:160px; height:51px; line-height:51px; margin:0 auto; text-align:center; margin-top:90px; border-radius:50px; box-sizing:border-box; font-size:23px; font-weight:600; letter-spacing:-1px; color:#3b3b3a; background:#ffffff; } .sub03_06 .subtxt li.t4 { transform:translateX(-80px); opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; position:relative; width:160px; height:51px; line-height:51px; margin:0 auto; text-align:center; margin-top:10px; border-radius:50px; box-sizing:border-box; font-size:23px; font-weight:600; letter-spacing:-1px; color:#3b3b3a; background:#ffffff; } .sub03_06 .subtxt li.t5 { transform:translateX(80px); opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; position:relative; width:160px; height:51px; line-height:51px; margin:0 auto; text-align:center; margin-top:10px; border-radius:50px; box-sizing:border-box; font-size:23px; font-weight:600; letter-spacing:-1px; color:#3b3b3a; background:#ffffff; } .sub03_06 .subtxt li.t6 { transform:translateX(-80px); opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; position:relative; width:160px; height:51px; line-height:51px; margin:0 auto; text-align:center; margin-top:10px; border-radius:50px; box-sizing:border-box; font-size:23px; font-weight:600; letter-spacing:-1px; color:#3b3b3a; background:#ffffff; } .sub03_06 .subtxt li.t7 { transform:translateX(80px); opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; position:relative; width:160px; height:51px; line-height:51px; margin:0 auto; text-align:center; margin-top:10px; border-radius:50px; box-sizing:border-box; font-size:23px; font-weight:600; letter-spacing:-1px; color:#3b3b3a; background:#ffffff; } .sub03_06 .subtxt li.t8 { transform:translateX(-80px); opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; position:relative; width:160px; height:51px; line-height:51px; margin:0 auto; text-align:center; margin-top:10px; border-radius:50px; box-sizing:border-box; font-size:23px; font-weight:600; letter-spacing:-1px; color:#3b3b3a; background:#ffffff; } .sub03_06 .subtxt li.t9 { transform:translateY(80px); opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; margin-top:36px; font-size:23px; color:#ffffff; font-weight:600; line-height:100%; } .sub03_06 .subtxt li.t33 {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; transform:translateX(80px); opacity:0; filter: blur(6px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; width:300px; margin:0 auto; text-align:center; margin-top:90px; } .sub03_06 .subtxt li.t33 span { display:block; position:relative; width:140px; height:51px; line-height:51px; margin-bottom:10px; border-radius:50px; box-sizing:border-box; font-size:22px; font-weight:600; color:#3b3b3a; background:#ffffff; } .sub03_06.active .subtxt li.t1 { transform:translateY(0); opacity:1; filter: blur(0px); transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_06.active .subtxt li.t2 { transform:translateY(0); opacity:1; filter: blur(0px); transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub03_06.active .subtxt li.t3 { transform:translateX(0); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub03_06.active .subtxt li.t4 { transform:translateX(0); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub03_06.active .subtxt li.t5 { transform:translateX(0); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub03_06.active .subtxt li.t6 { transform:translateX(0); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub03_06.active .subtxt li.t7 { transform:translateX(0); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub03_06.active .subtxt li.t8 { transform:translateX(0); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub03_06.active .subtxt li.t9 { transform:translateY(0); opacity:1; filter: blur(0px); transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 1.4s; } .sub03_06.active .subtxt li.t33 { transform:translateX(0); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub03_06.sub04_07 { position:relative; width:100%; background:url('/page_KR0/04_sub/images/04_07.jpg')no-repeat 50% top; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub03_06.sub05_07 { position:relative; width:100%; background:url('/page_KR0/05_sub/images/05_07.jpg')no-repeat 50% top; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub03_06.sub0402_07 { position:relative; width:100%; background:url('/page_KR0/04_sub/images/0402_07.jpg')no-repeat 50% top; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub03_07 { position:relative; width:100%; background:url('/page_KR0/03_sub/images/03_06.jpg')no-repeat 50% bottom; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub03_07 .introtxt2 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:490px; animation:introtxt3 2.4s cubic-bezier(0.25, 1, 0.5, 1) both 0.5s; } .sub03_07 .introtxt2 li.t1 { position:absolute; transform-origin: 50% 50%; left:136px; width:230px; height:230px; margin:0 auto; } .sub03_07 .introtxt2 li.t1 img { width:100%; } .sub03_07 .introtxt2 li.t2 { width:0px; height:230px; margin:0 auto; background:url('/images/common/main01txt3.png')no-repeat 50% 0; background-size:230px; overflow:hidden; } .sub03_07 .introtxt2 li.t3 { font-family: 'Pretendard'; text-align:center; font-size:26px; font-weight:600; color:#ffffff; line-height:170%; margin-top:34px; opacity:0; filter: blur(6px); transform:translateY(80px); } .sub03_07 .introtxt2 li.t3 span { font-weight:700; } .sub03_07.active .t1 { animation: rotate_image 56s linear infinite 2.2s; } .sub03_07.active .introtxt2 li.t2 { width:230px; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.0s; } .sub03_07.active .introtxt2 li.t3 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.4s; } .sub03_07.sub04_08 { position:relative; width:100%; background:url('/page_KR0/04_sub/images/04_08.jpg')no-repeat 50% bottom; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub03_07.sub05_08 { position:relative; width:100%; background:url('/page_KR0/05_sub/images/05_08.jpg')no-repeat 50% bottom; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub03_07.sub0402_08 { position:relative; width:100%; background:url('/page_KR0/04_sub/images/0402_08.jpg')no-repeat 50% bottom; background-size:cover; background-attachment: fixed; overflow:hidden; } .sub04_02 { position:relative; width:100%; background:#000a1b; overflow:hidden; } .sub04_02 .subtxt { position:absolute; top:30%; left:30%; transform:translate(-50%,-50%); width:380px; text-align:right; opacity:0; filter: blur(6px); } .sub04_02 .subtxt li.t1 { font-family: 'Minerva Modern Bold'; font-size:86px; color:#ffffff; line-height:100%; letter-spacing:1px; } .sub04_02 .subtxt li.t2 { margin-top:14px; font-size:20px; color:#ffffff; font-weight:500; line-height:160%; } .sub04_02 .subtxt2 { position:absolute; top:50%; left:70%; transform:translate(-50%,-50%); width:340px; text-align:left; opacity:0; filter: blur(6px); } .sub04_02 .subtxt2 li.t1 { font-family: 'Minerva Modern Bold'; font-size:86px; color:#ffffff; line-height:100%; letter-spacing:1px; } .sub04_02 .subtxt2 li.t2 { margin-top:14px; font-size:20px; color:#ffffff; font-weight:500; line-height:160%; } .sub04_02.active .subtxt { left:40%; opacity:1; filter: blur(0px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub04_02.active .subtxt2 { left:60%; opacity:1; filter: blur(0px); transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub04_02 .introtxt2 { position:absolute; top:82%; left:50%; transform:translate(-50%,-50%); width:170px; animation:introtxt3 2.4s cubic-bezier(0.25, 1, 0.5, 1) both 1.5s; } .sub04_02 .introtxt2 li.t1 { position:absolute; transform-origin: 50% 50%; left:0px; width:170px; height:170px; margin:0 auto; } .sub04_02 .introtxt2 li.t1 img { width:100%; } .sub04_02 .introtxt2 li.t2 { width:0px; height:170px; margin:0 auto; background:url('/images/common/main01txt2.png')no-repeat 50% 0; background-size:170px; overflow:hidden; } .sub04_02.active .introtxt2 li.t1 { animation: rotate_image 56s linear infinite 2.5s; } .sub04_02.active .introtxt2 li.t2 { width:170px; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.8s; } .sub04_03 { position:relative; width:100%; background:#000a1b; overflow:hidden; } .sub04_03 .subcenter { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1280px; } .sub04_03 .subtxt { font-size:39px; color:#ffffff; font-weight:600; line-height:150%; text-align:center; transform:translateY(80px); opacity:0; filter: blur(6px); } .sub04_03 .imgs { position:relative; width:1280px; height:424px; margin:0 auto; margin-top:40px; } .sub04_03 .imgs .i1 { position:absolute; top:0; left:8%; transform:translateX(-50%); opacity:0; filter: blur(16px); } .sub04_03 .imgs .i2 { position:absolute; top:0; left:26%; transform:translateX(-50%); opacity:0; filter: blur(16px); } .sub04_03 .imgs .i3 { position:absolute; top:0; left:50%; transform:translateX(-50%); opacity:0; filter: blur(16px); } .sub04_03 .imgs .i4 { position:absolute; top:0; left:74%; transform:translateX(-50%); opacity:0; filter: blur(16px); } .sub04_03 .imgs .i5 { position:absolute; top:0; left:100%; transform:translateX(-50%); opacity:0; filter: blur(16px); } .sub04_03.active .subtxt { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub04_03.active .imgs .i1 { left:18%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub04_03.active .imgs .i2 { left:34%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub04_03.active .imgs .i3 { left:50%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub04_03.active .imgs .i4 { left:66%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub04_03.active .imgs .i5 { left:82%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub04_04 { position:relative; width:100%; height:980px; overflow:hidden; background-size:cover; } .sub04_04 .bg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/04_sub/images/04_04.jpg')no-repeat 50% 50%; background-size:cover; transform: scale(1.3) translateY(0); transform-origin: 50% 50%; transition:all 1.4s cubic-bezier(0.25, 0.1, 0.25, 1.0) 0s; } .sub04_04.active .bg { transform: scale(1) translateY(0); transform-origin: 50% 50%; transition:all 1.4s cubic-bezier(0.25, 0.1, 0.25, 1.0) 0.3s; } .sub04_04 .subcenter { position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); width:1280px; } .sub04_04 .subtxt { position:relative; width:1350px; margin:0 auto; height:83px; } .sub04_04 .subtxt li.t1 { opacity:0; filter: blur(16px); position:absolute; left:-80px; width:381px; height:83px; border:2px solid #ffffff; box-sizing:border-box; border-radius:100px; font-size:38px; color:#ffffff; font-weight:500; line-height:80px; text-align:center; } .sub04_04 .subtxt li.t2 { opacity:0; filter: blur(16px); position:absolute; left:46%; transform:translateX(-50%); width:421px; height:83px; border:2px solid #ffffff; box-sizing:border-box; border-radius:100px; font-size:38px; color:#ffffff; font-weight:500; line-height:80px; text-align:center; } .sub04_04 .subtxt li.t3 { opacity:0; filter: blur(16px); position:absolute; right:-80px; width:481px; height:83px; border:2px solid #ffffff; box-sizing:border-box; border-radius:100px; font-size:38px; color:#ffffff; font-weight:500; line-height:80px; text-align:center; } .sub04_04 .subtxt2 { transform:translateY(-80px); opacity:0; filter: blur(8px); position:relative; width:622px; margin:0 auto; padding-top:70px; padding-left:170px; font-size:18px; font-weight:400; color:#ffffff; line-height:170%; } .sub04_04 .introtxt2 { position:absolute; top:80%; left:50%; transform:translate(-50%,-50%); width:170px; animation:introtxt3 2.4s cubic-bezier(0.25, 1, 0.5, 1) both 1.5s; } .sub04_04 .introtxt2 li.t1 { position:absolute; transform-origin: 50% 50%; left:0px; width:170px; height:170px; margin:0 auto; } .sub04_04 .introtxt2 li.t1 img { width:100%; } .sub04_04 .introtxt2 li.t2 { width:0px; height:170px; margin:0 auto; background:url('/images/common/main01txt2.png')no-repeat 50% 0; background-size:170px; overflow:hidden; } .sub04_04.active .introtxt2 li.t1 { animation: rotate_image 56s linear infinite 2.5s; } .sub04_04.active .introtxt2 li.t2 { width:170px; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.8s; } .sub04_04.active .subtxt li.t1 { left:0px; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub04_04.active .subtxt li.t2 { opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub04_04.active .subtxt li.t3 { right:0px; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub04_04.active .subtxt2 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub04_05 { position:relative; width:100%; height:980px; overflow:hidden; background:#e0dfdd; } .sub04_05 .subcenter { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1240px; } .sub04_05 .subtxt { position:relative; width:100%; height:216px; border-bottom:2px solid #c1c1c0; box-sizing:border-box; transform:translateX(80px); opacity:0; filter: blur(6px); } .sub04_05 .subtxt li.t1 { font-size:34px; color:#000000; font-weight:700; line-height:140%; } .sub04_05 .subtxt li.t2 { margin-top:20px; font-size:24px; color:#3a3a3a; font-weight:500; line-height:150%; } .sub04_05 .subtxt2 { position:relative; width:100%; height:160px; padding-top:50px; box-sizing:border-box; transform:translateY(80px); opacity:0; filter: blur(6px); } .sub04_05 .subtxt2 li.t1 { float:left; width:192px; padding-top:10px; font-family: 'Minerva Modern Bold'; font-size:18px; color:#212121; line-height:100%; letter-spacing:1px; } .sub04_05 .subtxt2 li.t2 { float:left; width:600px; font-size:26px; color:#3a3a3a; font-weight:500; line-height:150%; } .sub04_05 div.imgs { position:relative; width:928px; height:406px; } .sub04_05 div.imgs img { display:block; position:absolute; top:50%; left:0; transform:translate(0%,-50%); width:20%; opacity:0; } .sub04_05 div.imgs span { transform:translateX(80px); opacity:0; filter: blur(6px); display:block; position:absolute; top:302px; left:714px; width:756px; font-family: 'Minerva Modern Bold'; font-size:78px; color:#000000; line-height:100%; letter-spacing:1px; } .sub04_05.active .subtxt { transform:translateX(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub04_05.active .subtxt2 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub04_05.active div.imgs img { width:100%; opacity:1; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; } .sub04_05.active div.imgs span { transform:translateX(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.8s; } .sub04_06 { position:relative; width:100%; overflow:hidden; background:#e0dfdd url('/page_KR0/04_sub/images/04_06.jpg')no-repeat 0 bottom; } .sub04_06 .subcenter { position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); width:1240px; } .sub04_06 .subtxt { position:relative; width:100%; height:160px; padding-top:50px; box-sizing:border-box; transform:translateY(80px); opacity:0; filter: blur(6px); } .sub04_06 .subtxt li.t1 { float:left; width:192px; padding-top:10px; font-family: 'Minerva Modern Bold'; font-size:18px; color:#212121; line-height:100%; letter-spacing:1px; } .sub04_06 .subtxt li.t2 { float:left; width:600px; font-size:26px; color:#3a3a3a; font-weight:500; line-height:150%; } .sub04_06 .subtxt2 { position:relative; width:100%; height:160px; padding-top:50px; box-sizing:border-box; transform:translateY(80px); opacity:0; filter: blur(6px); } .sub04_06 .subtxt2 li.t1 { float:left; width:192px; padding-top:10px; font-family: 'Minerva Modern Bold'; font-size:18px; color:#212121; line-height:100%; letter-spacing:1px; } .sub04_06 .subtxt2 li.t2 { float:left; width:600px; font-size:26px; color:#3a3a3a; font-weight:500; line-height:150%; } .sub04_06 .subtxt3 { position:relative; width:100%; padding-top:80px; padding-left:192px; box-sizing:border-box; } .sub04_06 .subtxt3 li.t1 { transform:translateX(-80px); opacity:0; filter: blur(6px); position:relative; width:242px; height:72px; border-radius:72px; background:#e0dfdd; border:1px solid #979797; box-sizing:border-box; text-align:center; font-size:34px; font-weight:600; color:#000000; line-height:70px; } .sub04_06 .subtxt3 li.t2 { transform:translateX(-80px); opacity:0; filter: blur(6px); position:relative; width:242px; height:72px; margin-top:20px; border-radius:72px; background:#e0dfdd; border:1px solid #979797; box-sizing:border-box; text-align:center; font-size:34px; font-weight:600; color:#000000; line-height:70px; } .sub04_06 .subtxt3 li.t3 { transform:translateX(-80px); opacity:0; filter: blur(6px); position:relative; width:242px; height:72px; margin-top:20px; border-radius:72px; background:#e0dfdd; border:1px solid #979797; box-sizing:border-box; text-align:center; font-size:34px; font-weight:600; color:#000000; line-height:70px; } .sub04_06 .subtxt3 li.t4 { position:absolute; top:186px; left:470px; font-size:34px; font-weight:600; color:#000000; } .sub04_06 .subtxt3 li.t5 { position:absolute; top:-36px; left:410px; opacity:0; filter: blur(6px); width:480px; height:480px; line-height:480px; background:#e9e8e6; border:1px solid #979797; border-radius:100%; text-align:center; padding-left:100px; box-sizing:border-box; font-size:34px; font-weight:600; color:#000000; } .sub04_06 .subtxt4 { position:absolute; top:0px; right:-200px; width:685px; height:679px; } .sub04_06 .subtxt4 li.t1 { position:absolute; top:-80px; opacity:0; filter: blur(6px); left:0; width:428px; height:428px; line-height:428px; background:#e9e8e6; border:1px solid #979797; border-radius:100%; text-align:center; box-sizing:border-box; font-size:34px; font-weight:600; color:#000000; } .sub04_06 .subtxt4 li.t2 { position:absolute; bottom:-80px; right:0; opacity:0; filter: blur(6px); width:428px; height:428px; line-height:428px; background:rgba(180,173,153,30%); border:1px solid #979797; border-radius:100%; text-align:center; box-sizing:border-box; font-size:34px; font-weight:600; color:#000000; } .sub04_06 .subtxt4 li.t3 { position:absolute; top:320px; left:330px; font-size:34px; font-weight:600; color:#000000; } .sub04_06.active .subtxt { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub04_06.active .subtxt2 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub04_06.active .subtxt3 li.t1 { transform:translateX(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.1s; } .sub04_06.active .subtxt3 li.t2 { transform:translateX(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.1s; } .sub04_06.active .subtxt3 li.t3 { transform:translateX(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.1s; } .sub04_06.active .subtxt3 li.t5 { left:330px; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.6s; } .sub04_06.active .subtxt4 li.t1 { top:0; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 2.0s; } .sub04_06.active .subtxt4 li.t2 { bottom:0; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 2.0s; } .sub0402_03 { position:relative; width:100%; overflow:hidden; background:#000a1b; } .sub0402_03 .subtxt { position:absolute; top:50%; left:56%; transform:translate(-50%,-50%); width:686px; opacity:0; filter: blur(6px); } .sub0402_03 .subtxt li.t2 { margin-top:36px; font-size:43px; font-weight:900; color:#ffffff; line-height:100%; } .sub0402_03 .subtxt li.t3 { margin-top:14px; font-size:21px; font-weight:500; color:#c2c2c2; line-height:150%; } .sub0402_03 .subtxt li.t4 { position:relative; width:100%; overflow:hidden; margin-top:40px; } .sub0402_03 .subtxt li.t4 span { display:inline-block; height:44px; padding:0 20px; line-height:44px; text-align:center; border-radius:50px; margin-right:10px; margin-bottom:14px; font-size:18px; font-weight:500; color:#a8a8a8; border:1px solid #9d9c9a; box-sizing:border-box; } .sub0402_03 .imgs { position:absolute; bottom:-80px; left:6%; opacity:0; filter: blur(6px);} .sub0402_03 .imgs2 { position:absolute; top:30%; right:-100px; opacity:0; filter: blur(6px);} .sub0402_03.active .subtxt { top:60%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub0402_03.active .imgs { position:absolute; bottom:0px; left:6%;opacity:1; filter: blur(0px);transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub0402_03.active .imgs2 { position:absolute; top:30%; right:0;opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub0402_04 { position:relative; width:100%; overflow:hidden; background:#dedede; } .sub0402_04 .subtxt { position:absolute; top:40%; left:56%; transform:translate(-50%,-50%); width:686px; opacity:0; filter: blur(6px); } .sub0402_04 .subtxt li.t2 { margin-top:36px; font-size:43px; font-weight:900; color:#474747; line-height:100%; } .sub0402_04 .subtxt li.t3 { margin-top:14px; font-size:21px; font-weight:500; color:#646464; line-height:150%; } .sub0402_04 .subtxt li.t4 { position:relative; width:100%; overflow:hidden; margin-top:40px; } .sub0402_04 .subtxt li.t4 span { display:inline-block; height:44px; padding:0 20px; line-height:44px; text-align:center; border-radius:50px; margin-right:10px; margin-bottom:14px; font-size:18px; font-weight:500; color:#505050; border:1px solid #505050; box-sizing:border-box; } .sub0402_04 .imgs { position:absolute; bottom:-80px; left:10%; opacity:0; filter: blur(6px);} .sub0402_04 .imgs2 { position:absolute; top:30%; right:-100px; opacity:0; filter: blur(6px);} .sub0402_04.active .subtxt { top:50%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub0402_04.active .imgs { position:absolute; bottom:0px; opacity:1; filter: blur(0px);transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub0402_04.active .imgs2 { position:absolute; top:20%; right:0;opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub0402_033 { position:relative; width:100%; overflow:hidden; background:#f7fbfe; } .sub0402_033 .subtxt { position:absolute; top:45%; left:56%; transform:translate(-50%,-50%); width:686px; opacity:0; filter: blur(6px); } .sub0402_033 .subtxt li.t2 { font-size:43px; font-weight:900; color:#474747; line-height:100%; } .sub0402_033 .subtxt li.t3 { margin-top:14px; font-size:21px; font-weight:500; color:#646464; line-height:150%; } .sub0402_033 .subtxt li.t4 { position:relative; width:100%; overflow:hidden; margin-top:40px; } .sub0402_033 .subtxt li.t4 span { display:inline-block; height:44px; padding:0 20px; line-height:44px; text-align:center; border-radius:50px; margin-right:10px; margin-bottom:14px; font-size:18px; font-weight:500; color:#505050; border:1px solid #505050; box-sizing:border-box; } .sub0402_033 .imgs { position:absolute; bottom:-80px; left:6%; opacity:0; filter: blur(6px);} .sub0402_033 .imgs2 { position:absolute; top:20%; right:-100px; opacity:0; filter: blur(6px);} .sub0402_033.active .subtxt { top:55%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub0402_033.active .imgs { position:absolute; bottom:0px; left:6%;opacity:1; filter: blur(0px);transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub0402_033.active .imgs2 { position:absolute; top:20%; right:0;opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub0402_0333 { position:relative; width:100%; overflow:hidden; background:#fdfaf8; } .sub0402_0333 .subtxt { position:absolute; top:45%; left:36%; transform:translate(-50%,-50%); width:686px; opacity:0; filter: blur(6px); } .sub0402_0333 .subtxt li.t2 { font-size:43px; font-weight:900; color:#474747; line-height:100%; } .sub0402_0333 .subtxt li.t3 { margin-top:14px; font-size:21px; font-weight:500; color:#646464; line-height:150%; } .sub0402_0333 .subtxt li.t4 { position:relative; width:100%; overflow:hidden; margin-top:40px; } .sub0402_0333 .subtxt li.t4 span { display:inline-block; height:44px; padding:0 20px; line-height:44px; text-align:center; border-radius:50px; margin-right:10px; margin-bottom:14px; font-size:18px; font-weight:500; color:#505050; border:1px solid #505050; box-sizing:border-box; } .sub0402_0333 .imgs { position:absolute; bottom:-80px; left:52%; opacity:0; filter: blur(6px);} .sub0402_0333.active .subtxt { top:55%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub0402_0333.active .imgs { position:absolute; bottom:0px; left:52%;opacity:1; filter: blur(0px);transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.9s; } .sub05_03 { position:relative; width:100%; background:#e8e6dc; overflow:hidden; } .sub05_03 .bg { position:absolute; top:0px; right:50%; width:0%; height:100%; background:url('/page_KR0/05_sub/images/05_03.jpg')no-repeat right 0; background-size:cover; } .sub05_03 .bg span { display:block; opacity:0; filter: blur(5px); position:absolute; bottom:10%; left:10%; width:90%; font-size:18px; font-weight:500; color:#ffffff; line-height:150%; } .sub05_03 .bg2 { position:absolute; top:0px; right:50%; width:0%; height:100%; background:url('/page_KR0/05_sub/images/05_04.jpg')no-repeat right 0; background-size:cover; } .sub05_03 .bg2 span { display:block; opacity:0; filter: blur(5px); position:absolute; bottom:10%; left:10%; width:90%; font-size:18px; font-weight:500; color:#ffffff; line-height:150%; } .sub05_03 .bg3 { position:absolute; top:0px; right:50%; width:0%; height:100%; background:url('/page_KR0/05_sub/images/0502_01.jpg')no-repeat right 0; background-size:cover; } .sub05_03 .bg3 span { display:block; opacity:0; filter: blur(5px); position:absolute; bottom:10%; left:10%; width:90%; font-size:18px; font-weight:500; color:#ffffff; line-height:150%; } .sub05_03 .bg4 { position:absolute; top:0px; right:50%; width:0%; height:100%; background:url('/page_KR0/05_sub/images/0502_02.jpg')no-repeat right 0; background-size:cover; } .sub05_03 .bg4 span { display:block; opacity:0; filter: blur(5px); position:absolute; bottom:10%; left:10%; width:90%; font-size:18px; font-weight:500; color:#ffffff; line-height:150%; } .sub05_03 .bg5 { position:absolute; top:0px; right:50%; width:0%; height:100%; background:url('/page_KR0/05_sub/images/0502_03.jpg')no-repeat right 0; background-size:cover; } .sub05_03 .bg5 span { display:block; opacity:0; filter: blur(5px); position:absolute; bottom:10%; left:10%; width:90%; font-size:18px; font-weight:500; color:#ffffff; line-height:150%; } .sub05_03 .subtxt { position:absolute; top:0px; right:0px; width:50%; height:100%; } .sub05_03 .subtxt ul { position:absolute; top:65%; left:55%; transform:translate(-50%,-50%); width:90%; opacity:0; filter: blur(6px); } .sub05_03 .subtxt ul li.t1 { font-size:32px; color:#474747; font-weight:600; line-height:100%; } .sub05_03 .subtxt ul li.t2 { margin-top:20px; font-size:21px; color:#646464; font-weight:500; line-height:150%; } .sub05_03 .subtxt ul li.t3 { position:relative; width:100%; overflow:hidden; margin-top:80px; } .sub05_03 .subtxt ul li.t3 span { display:inline-block; height:44px; padding:0 20px; line-height:44px; text-align:center; border-radius:50px; margin-right:10px; margin-bottom:14px; font-size:18px; font-weight:500; color:#464646; border:1px solid #9d9c9a; box-sizing:border-box; } .sub05_03.active .bg { width:50%; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub05_03.active .bg span { opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; } .sub05_03.active .bg2 { width:50%; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub05_03.active .bg2 span { opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; } .sub05_03.active .subtxt ul { top:55%; opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub05_05 { position:relative; width:100%; height:980px; overflow:hidden; background:#e0dfdd; } .sub05_05 .subcenter { position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); width:1240px; } .sub05_05 .subtxt { position:relative; width:100%; height:216px; border-bottom:2px solid #c1c1c0; box-sizing:border-box; transform:translateX(80px); opacity:0; filter: blur(6px); } .sub05_05 .subtxt li.t1 { font-size:34px; color:#000000; font-weight:700; line-height:140%; } .sub05_05 .subtxt li.t2 { margin-top:20px; font-size:24px; color:#3a3a3a; font-weight:500; line-height:150%; } .sub05_05 .subtxt2 { position:relative; width:100%; height:160px; padding-top:50px; padding-left:170px; box-sizing:border-box; transform:translateY(80px); opacity:0; filter: blur(6px); } .sub05_05 .subtxt2 li.t1 { float:left; width:192px; padding-top:10px; font-family: 'Minerva Modern Bold'; font-size:18px; color:#212121; line-height:100%; letter-spacing:1px; } .sub05_05 .subtxt2 li.t2 { float:left; width:600px; font-size:25px; color:#3a3a3a; font-weight:500; line-height:150%; } .sub05_05 div.imgs { position:relative; width:100%; height:406px; } .sub05_05 div.imgs img { display:block; position:absolute; top:50%; right:0; transform:translate(0%,-50%); width:20%; opacity:0; } .sub05_05.active .subtxt { transform:translateX(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub05_05.active .subtxt2 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub05_05.active div.imgs img { width:355px; opacity:1; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; } .sub05_06 { position:relative; width:100%; height:980px; overflow:hidden; background:#e0dfdd; } .sub05_06 .subcenter { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1240px; height:640px; } .sub05_06 .subtxt { position:relative; width:100%; height:160px; box-sizing:border-box; transform:translateY(80px); opacity:0; filter: blur(6px); } .sub05_06 .subtxt li.t1 { font-family: 'Minerva Modern Bold'; font-size:18px; color:#212121; line-height:100%; letter-spacing:1px; } .sub05_06 .subtxt li.t2 { margin-top:20px; font-size:25px; color:#3a3a3a; font-weight:600; line-height:150%; } .sub05_06 .subtxt2 { position:relative; width:100%; height:160px; padding-top:50px; padding-left:700px; box-sizing:border-box; transform:translateY(80px); opacity:0; filter: blur(6px); } .sub05_06 .subtxt2 li.t1 { font-family: 'Minerva Modern Bold'; font-size:18px; color:#212121; line-height:100%; letter-spacing:1px; } .sub05_06 .subtxt2 li.t2 { margin-top:20px; font-size:25px; color:#3a3a3a; font-weight:600; line-height:150%; } .sub05_06 div.imgs { position:absolute; top:58%; left:35%; transform:translate(-50%,-50%); width:380px; } .sub05_06 div.imgs img { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20%; opacity:0; } .sub05_06.active .subtxt { transform:translateX(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .sub05_06.active .subtxt2 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; } .sub05_06.active div.imgs img { width:380px; opacity:1; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; } .sub05_06 div.imgs2 { position:absolute; top:60%; left:25%; transform:translate(-50%,-50%); width:380px; } .sub05_06 div.imgs2 img { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20%; opacity:0; } .sub05_06.active div.imgs2 img { width:540px; opacity:1; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 1.2s; }