body { animation: opa 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; } #modal-container, #modal-container2, #modal-container3, #modal-container4, #modal-container5,#modal-container6, #modal-dr { position: fixed; top:0px; width:100%; height:0px; z-index: 150; overflow-y: auto; overflow-x: hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #modal-container.modal2_1,#modal-container2.modal2_2,#modal-container3.modal2_3,#modal-container4.modal2_4,#modal-container.modal2_4, #modal-container.modal3_1,#modal-container2.modal3_2,#modal-container3.modal3_3,#modal-container4.modal3_4, #modal-container.modal4_1,#modal-container2.modal4_2,#modal-container3.modal4_3, #modal-container.modal5_1,#modal-container2.modal5_2,#modal-container3.modal5_3,#modal-container4.modal5_4,#modal-container5.modal5_5,#modal-container6.modal5_6, #modal-container.modal6_1,#modal-container2.modal6_2,#modal-container3.modal6_3, #modal-container.modal7_1,#modal-container2.modal7_2,#modal-container3.modal7_3, #modal-container.sub04_c1,#modal-container2.sub04_c2,#modal-container3.sub04_c3,#modal-dr.modal2dr, #modal-container.modal2dr { left:0px; right:0px; bottom:0px; width:100%; height:100%; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #modal-container.out, #modal-container2.out, #modal-container3.out, #modal-container4.out, #modal-container5.out, #modal-container6.out, #modal-dr.out { height:0px; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); overflow:hidden; } #price-modal { position: fixed; top:0px; width:100%; height:0; z-index: 150; overflow-y: auto; overflow-x: hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #price-modal .sub10price { position: relative; width: 100%;} #price-modal.active { left:0px; right:0px; bottom:0px; width:100%; height:100%; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } .subtab1 { display:none; position:fixed; top:14px; left:50%; transform:translate(-50%,0%); width:90%; overflow:hidden; z-index:5; } .subtab1 ul { display: flex; justify-content: space-between; } .subtab1 ul li { position:relative; cursor:pointer; width:49%; height:44px; line-height:44px; text-align:center; font-size:13px; font-weight:700; color:#000000; background:#ffffff; border-radius:8px; box-sizing:border-box; } .subtab1 ul li.active,.subtab1 ul li:hover { background:#16c5d5; color:#ffffff; } .modal5_4 .subtab1 { display:block; } .subtab2 { display:none; position:fixed; top:14px; left:50%; transform:translate(-50%,0%); width:90%; overflow:hidden; z-index:5; } .subtab2 ul { display: flex; justify-content: space-between; } .subtab2 ul li { position:relative; cursor:pointer; width:49%; height:44px; line-height:44px; text-align:center; font-size:13px; font-weight:700; color:#000000; background:#ffffff; border-radius:8px; box-sizing:border-box; } .subtab2 ul li.active,.subtab2 ul li:hover { background:#16c5d5; color:#ffffff; } .subtab3 { display:none; position:fixed; top:14px; left:50%; transform:translate(-50%,0%); width:90%; overflow:hidden; z-index:5; } .subtab3 ul { display: flex; justify-content: space-between; } .subtab3 ul li { position:relative; cursor:pointer; width:49%; height:44px; line-height:44px; text-align:center; font-size:13px; font-weight:700; color:#000000; background:#ffffff; border-radius:8px; box-sizing:border-box; } .subtab3 ul li.active,.subtab3 ul li:hover { background:#16c5d5; color:#ffffff; } .modal5_1 .subtab2 { display:block; } .modal5_6 .subtab3 { display:block; } .subbox { display:none; position:relative; width:100%; } .subbox.active { display:block; } .subbox2 { display:none; position:relative; width:100%; } .subbox2.active { display:block; } .subbox3 { display:none; position:relative; width:100%; } .subbox3.active { display:block; } .subtable014 { position: relative; width: 100%; max-width: 1280px; margin: auto; border-top: 3px solid #0168b7; margin:60px auto; } .subtable014 tr th { padding: 0 4px; height: 46px; box-sizing: border-box; font-size: 13px; font-weight: 500; color: #313131; background: #f6f8fa; letter-spacing: -1px; border-bottom: 1px solid #d9d9d9; text-align: center; } .subtable014 tr td { padding: 8px 4px; box-sizing: border-box; font-size: 12px; font-weight: 500; color: #313131; line-height: 150%; background: #ffffff; border-bottom: 1px solid #e0e1e1; border-right: 1px solid #e0e1e1; text-align: center; } .subtable014 tr td:last-child,.subtable014 tr th:last-child { border-right: 0px; } .subtable014 tr td.lb,.subtable014 tr th.lb { border-right: 1px solid #e0e1e1; } .drbr { display:block; } #vod0802 { position:relative; width:90%; margin:0 auto; padding-top:8%; } #vod0802 video { display:block; width:100%; } .snow3 { position:absolute; left: 18%; animation: paper2Ani 25.3s infinite; z-index: 3; transition: opacity 0.4s; width:22px; height:22px; background:#13c0d7; border-radius:100%; } .snowlogo { display:block; position:absolute; bottom:15%; right:15%; width:40px; height:40px; background:url('/images/main_c/figure.png')no-repeat 50% 50%; background-size:100%; cursor:pointer; z-index:1; animation: rotation 2.4s infinite linear; } .modaltab { position:absolute; top:30px; left:50%; transform: translate(-50%,0); width:90%; text-align:center; overflow:hidden; z-index:1; } .modaltab ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab ul li.active,.modaltab ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .modaltab2 { position:absolute; top:30px; left:50%; transform: translate(-50%,0); width:90%; text-align:center; overflow:hidden; z-index:1; } .modaltab2 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab2 ul li.active,.modaltab2 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .modaltab3 { position:absolute; top:30px; left:50%; transform: translate(-50%,0); width:90%; text-align:center; overflow:hidden; z-index:1; } .modaltab3 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab3 ul li.active,.modaltab3 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .modaltab5 { position:relative; width:92%; margin:5% auto 5% auto; text-align:center; overflow:hidden; } .modaltab5 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab5 ul li.active,.modaltab5 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .modaltab6 { position:absolute; top:30px; left:50%; transform: translate(-50%,0); width:90%; text-align:center; overflow:hidden; z-index:1; } .modaltab6 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab6 ul li.active,.modaltab6 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .modaltab7 { position:absolute; top:30px; left:50%; transform: translate(-50%,0); width:90%; text-align:center; overflow:hidden; z-index:1; } .modaltab7 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab7 ul li.active,.modaltab7 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .subtxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; width:100%; } .subtxt li.titletxt1 { font-size:28px; font-weight:700; color:#111111; line-height:126%; } .subtxt li.titletxt2 { font-size:22px; font-weight:700; color:#111111; line-height:126%; } .subtxt li.contxt1 { font-size:14px; font-weight:500; color:#13c0d7; } .subtxt li.contxt2 { font-size:14px; font-weight:500; color:#13c0d7; } .active .typep1 span.t1 { display:inline-block; animation: fadeleft 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active .typep1 span.t2 { display:inline-block; animation: faderight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active .typep2 { display:inline-block; animation: fadeup 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } .active#sub02_01 .subtxt li.contxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.9s; } .active .typep3 { animation: blurtxt2 1s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active .typep3 span:nth-child(1) { display:inline-block; animation: blurtxt 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.7s; } .active .typep3 span:nth-child(2) { display:inline-block; animation: blurtxt 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.2s; } .active#sub02_01 .whitebg li:nth-child(1) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#sub02_01 .whitebg li:nth-child(2) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub02_01 .whitebg li:nth-child(3) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .graybg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:#fbfbfb; box-sizing:border-box; } .graybg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:#fbfbfb; box-sizing:border-box; } .graybg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:#fbfbfb; box-sizing:border-box; } .graybg2 li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:#f4f6f7; box-sizing:border-box; } .graybg2 li:nth-child(2) { float:left; position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:#f4f6f7; box-sizing:border-box; } .graybg2 li:nth-child(3) { float:left; position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:#f4f6f7; box-sizing:border-box; } .whitebg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:#fff; box-sizing:border-box; } .whitebg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:#fff; box-sizing:border-box; } .whitebg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:#fff; box-sizing:border-box; } .bluebg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:#e8f7f6; box-sizing:border-box; } .bluebg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:#e8f7f6; box-sizing:border-box; } .bluebg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:#e8f7f6; box-sizing:border-box; } .bluebg2 li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:#13c0d7; box-sizing:border-box; } .bluebg2 li:nth-child(2) { float:left; position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:#13c0d7; box-sizing:border-box; } .bluebg2 li:nth-child(3) { float:left; position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:#13c0d7; box-sizing:border-box; } .bluebg3 li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:#f6fcfe; box-sizing:border-box; } .bluebg3 li:nth-child(2) { float:left; position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:#f6fcfe; box-sizing:border-box; } .bluebg3 li:nth-child(3) { float:left; position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:#f6fcfe; box-sizing:border-box; } .sub0103wrap { position:relative; width:100%; height:700px; } .sub0103 { position:relative; width:100%; height:700px; overflow:hidden; } .sub0103 ul {position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; text-align:center; } .sub0103 ul li.title { font-size:28px; font-weight:700; color:#111111; animation: blurtxt2 1.6s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .sub0103 ul li.con { font-size:15px; font-weight:500; color:#13c0d7; animation: fadeup 1.6s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .dr0103 { position:relative; width:80%; margin:0 auto 10% auto; padding-bottom:10%; border-bottom:1px solid #ddd; overflow:hidden; } .dr0103 div.imgs { width:100%; overflow:hidden; } .dr0103 div.imgs img { } .dr0103 div.timetable0103 { width:100%; margin-top:5%; } .dr0103 div.timetable0103 div.name { display:block; width:100%; font-size:16px; font-weight:700; color:#000; } .dr0103 div.timetable0103 div.name .t2 { display:block; margin:10px 0; width:100%; font-size:12px; color:#262626; font-weight:500; } .dr0103 div.timetable0103 div.name .t3 { } .dr0103 div.timetable0103 a.drlinkbt1 { width: 110px; height: 28px; line-height: 30px; padding-left: 36px; font-size:11px; background:#13c0d7 url('/page_KR0/01_sub/images/bticon1.jpg')no-repeat 10px 50%; background-size: 16px; } color:#fff; } .snowlogo { display:block; position:absolute; top:15%; right:5%; width:40px; height:40px; background:url('/images/main_c/figure.png')no-repeat 50% 50%; background-size:100%; cursor:pointer; z-index:1; animation: rotation 2.4s infinite linear; } .dr0103 div.timetable0103 .timetable ul.tableline1 li { padding: 2% 0; font-size: 11px !important; font-weight:400 !important; } .dr0103 div.timetable0103 .timetable ul.tableline2 li span.time_1 { font-size: 11px; font-weight: 400; } .dr0103 div.timetable0103 .timetable ul.tableline2 li span.time_2 { font-size: 11px; font-weight: 400; } .dr0103 div.timetable0103 .timetable ul.tableline2 li span.time_3 { font-size: 11px; font-weight: 400; } .dr0103 div.timetable0103 .timetable ul.tableline2 li span.time_4 { font-size: 11px; font-weight: 400; } .dr0103 div.timetable0103 .timetable ul.tableline2 li span.time_6 { font-size: 11px; font-weight: 400; } .dr0103 div.timetable0103 .timetable ul.tableline2 li { font-size: 11px; } .txtview { width:100%; padding-top:14px; font-size:16px; font-weight:500; color:#fff; text-align:center; } #sub0101 .subtxt { width:100%; } .active#sub0101 .subtxt .titletxt1 span.t1 { display:inline-block; animation: blurtxt 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .active#sub0101 .subtxt .titletxt1 span.t2 { display:inline-block; animation: blurtxt 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub0101 .subtxt li.contxt1 { animation: fadeup 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.7s; } .active#sub0101 .subtxt li.contxt3 { animation: fadeup 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 2.1s; } .active#sub0101 .graybg li:nth-child(1) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#sub0101 .graybg li:nth-child(2) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0101 .graybg li:nth-child(3) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .sub0103wrap .graybg li:nth-child(1) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .sub0103wrap .graybg li:nth-child(2) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .sub0103wrap .graybg li:nth-child(3) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .sub0101_02 .subtxt3 { position:absolute; top:78%; left:58%; transform:translate(0,-50%); } .sub0101_02 .subtxt3 .t1 { font-size:28px; font-weight:700; color:#13c0d7; line-height:120%; } .sub0101_02 .subtxt3 .t2 { font-size:14px; font-weight:500; color:#2e2e2e; line-height:180%; } .hi_dr { position:absolute; top:0; left:0; width:100%; height:100%; } .hi_dr ul { position:relative; width:100%; height:100%; } .hi_dr ul li {border-radius: 100%; overflow: hidden; } .hi_dr .hd1 { position:absolute; top:58%; left:8%; transform:translate(0%,-50%); width:150px; height:150px; background:#13c0d7; } .hi_dr .hd1 span { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .hi_dr .hd2 { position:absolute; top:28%; left:2%; transform:translate(0%,-50%); width:28%; } .hi_dr .hd3 { position:absolute; top:22%; left:24%; transform:translate(0%,-50%); width:28%; } .hi_dr .hd4 { position:absolute; top:38%; left:44%; transform:translate(0%,-50%); width:35%; } .hi_dr .hd5 { position:absolute; top:26.4%; left:71%; transform:translate(0%,-50%); width:23%; } .hi_dr .hd6 { position:absolute; top:36.5%; left:14%; transform:translate(0%,-50%); width: 34%; } .hi_dr .hd7 { position:absolute; top:50.5%; left:43%; transform:translate(0%,-50%); width:28%; } .hi_dr .hd8 { position:absolute; top:46.5%; left:67%; transform:translate(0%,-50%); width: 20%; } .active#sub0101_02 .hi_dr .hd1 { animation: hd1 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#sub0101_02 .hi_dr .hd2 { animation: fadeleft 2.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#sub0101_02 .hi_dr .hd3 { animation: fadebottom 2.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0101_02 .hi_dr .hd4 { animation: opa 2.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .active#sub0101_02 .hi_dr .hd5 { animation: faderight 2.0s cubic-bezier(0.22, 1, 0.36, 1) both 2.0s; } .active#sub0101_02 .hi_dr .hd6 { animation: fadeup 2.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active#sub0101_02 .hi_dr .hd7 { animation: opa 2.0s cubic-bezier(0.22, 1, 0.36, 1) both 2.3s; } .active#sub0101_02 .hi_dr .hd8 { animation: opa 2.0s cubic-bezier(0.22, 1, 0.36, 1) both 2.6s; } .active#sub0101_02 .sub0101_02 .subtxt3 .t1 { animation: blurtxt2 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 2.9s; } .active#sub0101_02 .sub0101_02 .subtxt3 .t2 { animation: fadeup 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 3.2s; } @keyframes hd1 { from{ width:10%; height:10%; opacity:0; } to{ width:150px; height:150px; opacity:1; } } #sub0101_03 { background:#f8f8f8; } #sub0101_03 .sub01_03bg { position:relative; width:100%; height:70%; overflow:hidden; } #sub0101_03 .sub01_03bg span { display:block; width:100%; height:100%; background:url('/page_MB0/01_sub/images/0101bg1.jpg')no-repeat 100% 50%; background-size:cover; animation: kenburns-top 25s cubic-bezier(0.22, 1, 0.36, 1) both;} #sub0101_03 .snowlogo { right:15%; } #sub0101_03 .subtxt3 {position:relative; width:90%; margin:0 auto; padding-top:5%; } #sub0101_03 .subtxt3 .t1 { font-size:28px; font-weight:700; color:#13c0d7; line-height:100%; } #sub0101_03 .subtxt3 .t2 { font-size:18px; font-weight:500; color:#2e2e2e; line-height:180%; } .active#sub0101_03 .sub01_03bg span { animation: kenburns-top 25s cubic-bezier(0.22, 1, 0.36, 1) both; } .active#sub0101_03 .subtxt3 .t1 { animation: blurtxt 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub0101_03 .subtxt3 .t2 { animation: blurtxt 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub0101_03 .snowlogo { animation: blurtxt2 2.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.7s; } #sub0101_04 .imgtitle { position:absolute; top:12%; left:5%; } #sub0101_04 .subtxt3 { position:absolute; top:15%; left:18%; } #sub0101_04 .subtxt3 .t1 { font-size:22px; font-weight:700; color:#000; line-height:130%; } #sub0101_04 .subtxt3 .t2 { font-size:12px; font-weight:500; color:#343434; line-height:180%; } #sub0101_04 .strength1 { position:absolute; top:68%; left:37%; width:160px; height:160px; transform:translate(-50%,-50%); background:rgba(19,192,215,0.8); border-radius:100%; text-align:center; } #sub0101_04 .strength2 { position:absolute; top:77%; left:64%; width:160px; height:160px; transform:translate(-50%,-50%); background:rgba(203,203,203,0.8); border-radius:100%; text-align:center; } #sub0101_04 .strength1 span { display:block; padding-top:45px; font-size:18px; font-weight:500; color:#ffff; } #sub0101_04 .strength2 span { display:block; padding-top:45px; font-size:18px; font-weight:500; color:#000; } #sub0101_04 .snowlogo { top: 82%; right: 60%; width: 36px; height: 36px; } .active#sub0101_04 .subtxt3 .t1 { animation: fadeup 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0101_04 .subtxt3 .t2 { animation: fadeup 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .active#sub0101_04 .strength1 { animation: strength1 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub0101_04 .strength2 { animation: strength2 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } .active#sub0101_04 .strength1 span { animation: blurtxt2 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } .active#sub0101_04 .strength2 span { animation: blurtxt2 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } .active#sub0101_04 .snowlogo { animation: opa 2.2s cubic-bezier(0.22, 1, 0.36, 1) both 2.5s; } @keyframes strength1 { from{ top:60%; left:30%; width:120px; height:120px; opacity:0; } to{ top:67%; left:36%; width:140px; height:140px; opacity:1; } } @keyframes strength2 { from{ top:85%; left:75%; width:120px; height:120px; opacity:0; } to{ top:78%; left:65%; width:140px; height:140px; opacity:1; } } #sub0101_05 { overflow:hidden; } #sub0101_05 .sub0101_05bg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_MB0/01_sub/images/0101_05.jpg')no-repeat 50% 50%; background-size:cover; animation: kenburns-top 15s ease-out both; } #sub0101_05 .imgtitle { position:absolute; top:15%; left:5%; } #sub0101_05 .subtxt3 { position:absolute; top:18%; left:18%; } #sub0101_05 .subtxt3 .t1 { font-size:20px; font-weight:700; color:#fff; line-height:150%; } #sub0101_05 .subtxt3 .t2 { font-size:20px; font-weight:700; color:#fff; line-height:150%; } .active#sub0101_05 .subtxt3 .t1 { animation: blurtxt2 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub0101_05 .subtxt3 .t2 { animation: blurtxt2 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active#sub0101_05 .sub0101_05bg{ animation: kenburns-top 15s ease-out both; } #sub0101_06 { background:url('/page_MB0/01_sub/images/0101_05.jpg')no-repeat 50% 50%; background-size:cover; } #sub0101_06 .imgtitle { position:absolute; top:15%; left:5%; } #sub0101_06 .subtxt3 { position:absolute; top:16%; left:18%; } #sub0101_06 .subtxt3 .t1 { font-size:22px; font-weight:700; color:#111111; line-height:140%; } #sub0101_06 .subtxt3 .t2 { font-size:12px; font-weight:500; color:#343434; line-height:180%; } #sub0101_06 .imgs { position:absolute; top:52%; left:18%; width:66%; height:320px; overflow:hidden; } .active#sub0101_06 .bluebg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub0101_06 .bluebg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub0101_06 .bluebg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#sub0101_06 .imgs { animation: blurtxt2 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } .active#sub0101_06 .imgs img { display:inline-block; animation: kenburns-top2 15s ease-out both; } .active#sub0101_06 .subtxt3 .t1 { animation: blurtxt 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active#sub0101_06 .subtxt3 .t2 { animation: blurtxt 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } #sub0101_07 .subtxt3 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; } #sub0101_07 .subtxt3 .t1 { overflow:hidden; font-size:36px; font-weight:700; color:#fff; line-height:100%; } #sub0101_07 .subtxt3 .t1 span { display:inline-block; } #sub0101_07 .subtxt3 .t2 { overflow:hidden; font-size:36px; font-weight:700; color:#fff; line-height:100%; } #sub0101_07 .subtxt3 .t2 span { display:inline-block; } #sub0101_07 .subtxt3 .t3 { overflow:hidden; font-size:36px; font-weight:700; color:#fff; line-height:100%; } #sub0101_07 .subtxt3 .t3 span { display:inline-block; } #sub0101_07 .subtxt3 .t4 { overflow:hidden; font-size:36px; font-weight:700; color:#fff; line-height:100%; } #sub0101_07 .subtxt3 .t4 span { display:inline-block; } #sub0101_07 .subtxt3 .t5 { font-size:16px; font-weight:500; color:#fff; line-height:150%; } .active#sub0101_07 .bluebg2 li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#sub0101_07 .bluebg2 li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0101_07 .bluebg2 li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub0101_07 .subtxt3 .t1 span { animation: fadeup 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active#sub0101_07 .subtxt3 .t2 span { animation: fadeup 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub0101_07 .subtxt3 .t3 span { animation: fadeup 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#sub0101_07 .subtxt3 .t4 span { animation: fadeup 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } .active#sub0101_07 .subtxt3 .t5 { animation: fadeup 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 2.6s; } #sub05_10 { overflow:hidden; } #sub05_10 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:rgba(255,255,255,0.8); box-sizing:border-box; } #sub05_10 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:rgba(255,255,255,0.8); box-sizing:border-box; } #sub05_10 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:rgba(255,255,255,0.8); box-sizing:border-box; } #sub05_10 h3 { position:absolute; top:15%; left:5%; font-size:16px; font-weight:500; color:#000; } #sub05_10 .subtxt2 li.t1 { position:absolute; top:24%; left:18%; font-size:20px; font-weight:700; color:#17c5da; line-height:130%; } #sub05_10 .subtxt2 li.t2 { position:absolute; top:38%; left:18%; font-size:14px; font-weight:500; color:#2b2b2b; line-height:170%; } #sub05_10 .subtxt2 li.t3 { position:absolute; top:38%; left:50%; font-size:14px; font-weight:500; color:#585858; line-height:170%; } #sub05_10 .subtxt2 li.t3 span { color:#06bcd2; } #sub05_10 .snowlogo2 { display:block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:35px; height:35px; background:url('/images/main_c/figure.png')no-repeat 50% 50%; background-size:100%; cursor:pointer; z-index:1; transition:all 0.4s cubic-bezier(0.22, 1, 0.36, 1) 2.2s; opacity:0; } .active#sub05_10 h3 { animation: opa 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active#sub05_10 .subtxt2 li.t1 { animation: blurtxt 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active#sub05_10 .subtxt2 li.t2 { animation: fadeleft 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } .active#sub05_10 .subtxt2 li.t3 { animation: faderight 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 1.9s; } .active#sub05_10 .snowlogo2 { top:78%; opacity:1; } .active#sub05_10 .subtxtbg li:nth-child(1) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub05_10 .subtxtbg li:nth-child(2) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub05_10 .subtxtbg li:nth-child(3) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } #sub0101_08 .subtxt2 { position:absolute; top:20%; left:10%; } #sub0101_08 .subtxt2 li.t1 { font-size:13px; font-weight:400; color:#343434; line-height:170%; } #sub0101_08 .subtxt2 li.t2 { font-size:22px; font-weight:700; color:#111111; line-height:150%; } #sub0101_08 .sub02_08bg { position:absolute; top:68%; left:40%; transform: translate(-50%,-50%); width:140px; height:140px; border-radius:100%; background: #f5fcfe; } #sub0101_08 .engwrap { position:absolute; top:64%; left:50%; width:100%; transform: translate(-50%,-50%); } #sub0101_08 .engwrap img { width:70%; } #sub0101_08 .eng_i { position:absolute; top:50%; left:10%; transform: translate(-50%,-50%); } #sub0101_08 .eng_e { position:absolute; top:50%; left:42%; transform: translate(-50%,-50%); } #sub0101_08 .eng_u { position:absolute; top:50%; left:74%; transform: translate(-50%,-50%); } #sub0101_08 .eng_l { position:absolute; top:50%; left:90%; transform: translate(-50%,-50%); } .active#sub0101_08 .subtxt2 li.t1 { animation: fadeup 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#sub0101_08 .subtxt2 li.t2 { animation: fadeup 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub0101_08 .eng_i { animation: fadeleft2 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } .active#sub0101_08 .eng_e { animation: fadeleft2 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.4s; } .active#sub0101_08 .eng_u { animation: fadeleft2 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.6s; } .active#sub0101_08 .eng_l { animation: fadeleft2 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.8s; } .active#sub0101_08 .graybg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0101_08 .graybg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub0101_08 .graybg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } #sub0102_01 .titletxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:340px; text-align:center; } #sub0102_01 .titletxt ul li { cursor:pointer; margin:14px auto; font-size:20px; font-weight:700; color:#ffffff; } #sub0102_01 .titletxt ul li.centertxt1 { position:relative; width:96px;} #sub0102_01 .titletxt ul li.centertxt2 { position:relative; width:76px;} #sub0102_01 .titletxt ul li.centertxt3 { position:relative; width:268px; } #sub0102_01 .titletxt ul li.centertxt4 { position:relative; width:48px;} #sub0102_01 .titletxt ul li.centertxt5 { position:relative; width:48px;} #sub0102_01 .titletxt ul li.centertxt6 { position:relative; width:178px;} #sub0102_01 .titletxt ul li .titletxtbt { opacity:0; display:block; position:absolute; top:-6px; right:-20px; width:16px; height:16px; background:#e8f7f6; border-radius:100%; transition:all 1.3s cubic-bezier(0.22, 1, 0.36, 1) ; } #sub0102_01 .titletxt ul li:hover .titletxtbt { opacity:1; } #sub0102_01 #ieuleng div { box-sizing:border-box; font-size:26px; font-weight:700; color:#ffffff; z-index:0; opacity:0.2; } #sub0102_01 #ieuleng div span { display:inline-block; position:absolute; } #sub0102_01 #ieuleng div span.t1 { top:20%; left:5%; } #sub0102_01 #ieuleng div span.t2 { top:20%; left:30%; } #sub0102_01 #ieuleng div span.t3 { top:20%; left:60%; } #sub0102_01 #ieuleng div span.t4 { top:20%; left:95%; } #sub0102_01 #ieuleng div span.t5 { top:75%; left:5%; } #sub0102_01 #ieuleng div span.t6 { top:75%; left:20%; } #sub0102_01 #ieuleng div span.t7 { top:75%; left:40%; } #sub0102_01 #ieuleng div span.t8 { top:75%; left:60%; } #sub0102_01 #ieuleng div span.t9 { top:75%; left:80%; } #sub0102_01 #ieuleng div span.t10 { top:75%; left:95%; } .active#sub0102_01 .bluebg2 li:nth-child(1) { animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0102_01 .bluebg2 li:nth-child(2) { animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub0102_01 .bluebg2 li:nth-child(3) { animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub0102_01 #ieuleng div span.t1 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0102_01 #ieuleng div span.t2 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0102_01 #ieuleng div span.t3 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0102_01 #ieuleng div span.t4 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0102_01 #ieuleng div span.t5 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0102_01 #ieuleng div span.t6 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0102_01 #ieuleng div span.t7 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0102_01 #ieuleng div span.t8 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0102_01 #ieuleng div span.t9 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0102_01 #ieuleng div span.t10 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active#sub0102_01 .titletxt { animation: blurtxt2 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } #center-modal, #center-modal2, #center-modal3, #center-modal4, #center-modal5, #center-modal6 { position: fixed; top:0px; left: 0; width:100%; height: 100%; z-index:10; transform: scale(0); background: rgba(20, 192, 215, .8); } #center-modal .modal-background, #center-modal2 .modal-background, #center-modal3 .modal-background, #center-modal4 .modal-background, #center-modal5 .modal-background, #center-modal6 .modal-background { position:absolute; top:0px; left:0px; width:100%; height:100%; overflow-y: auto; overflow-x: hidden; text-align: center; } #center-modal.center_01, #center-modal2.center_02, #center-modal3.center_03, #center-modal4.center_04, #center-modal5.center_05, #center-modal6.center_06 { animation: unfoldIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; } #center-modal.out, #center-modal2.out, #center-modal3.out, #center-modal4.out, #center-modal5.out, #center-modal6.out { transform: scale(1); animation: unfoldOut 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.5s; } .center1_1 { position:fixed; top:0px; left:0px; width:100%; height:0px; background:url('/page_MB0/01_sub/images/center_01_bg.jpg')no-repeat 50% top; background-size:cover; overflow:hidden; transition:all 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s; } .center1_1.center2_1 { background:url('/page_MB0/01_sub/images/center_02_bg.jpg')no-repeat 50% top; background-size:cover; } .center1_1.center3_1 { background:url('/page_MB0/01_sub/images/center_03_bg.jpg')no-repeat 50% top; background-size:cover; } .center1_1.center4_1 { background:url('/page_MB0/01_sub/images/center_04_bg.jpg')no-repeat 50% top; background-size:cover; } .center1_1.center4_1_2 { background:url('/page_MB0/01_sub/images/center_04_bg2.jpg')no-repeat 50% top; background-size:cover; } .center1_1.center5_1 { background:url('/page_MB0/01_sub/images/center_05_bg.jpg')no-repeat 50% top; background-size:cover; } .center1_1.center6_1 { background:url('/page_MB0/01_sub/images/center_06_bg.jpg')no-repeat 50% top; background-size:cover; } .center1_1 ul.centertxt { position:fixed; top:350px; left:4%; text-align:left; } .center1_1 ul.centertxt li.t1 { opacity:0; font-size:28px; font-weight:700; color:#ffffff; line-height:130%; transition:all 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.4s;} .center1_1 ul.centertxt li.t2 { opacity:0; font-size:14px; font-weight:400; color:#cecece; line-height:180%; transition:all 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.8s;} .center_view .center1_1 { position:fixed; top:0px; left:0px; width:100%; height:650px; } .center_view .center1_1 ul.centertxt li.t1 { opacity:1; margin-top:0px; } .center_view .center1_1 ul.centertxt li.t2 { opacity:1; } .out .center1_1 { position:fixed; top:0px; left:0px; width:100%; height:0px; transition:all 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; } .out .center1_1 ul.centertxt li.t1,.out .center1_1 ul.centertxt li.t2 { opacity:0; transition:all 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; } #center-modal4 .centerslide .slick-dots { opacity:0; position: fixed; top:330px; left:8%; display: block; padding: 0; margin: 0; list-style: none; overflow:hidden; cursor:pointer; transition:all 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.2s; } #center-modal4 .centerslide .slick-dots li { float:left; width:13px; height:13px; margin-right:6px; border:1px solid #16c5d5; border-radius:100%; background:none; box-sizing:border-box; } #center-modal4 .centerslide .slick-dots li.slick-active { background:#16c5d5; } #center-modal4.center_view .centerslide .slick-dots { opacity:1; } .center1_1warp { position:relative; float:right; width:85%; height:650px; z-index:3; } .center1_2 { clear:both; position:relative; width:100%; padding:15% 0; background:#e8f7f6; text-align:left; opacity:0; z-index:3; } .center1_2 ul { position:relative; width:90%; margin:0 auto; padding-bottom:10%; } .center1_2 ul li.t1 { } .center1_2 ul li.t2 { margin-top:10px; font-size:15px; font-weight:400; color:#343434; line-height:170%; } .center1_drimg { position:relative; width:90%; height:500px; margin:0 auto; background:url('/page_KR0/01_sub/images/centerdrimg1.jpg')no-repeat 100% 0%; background-size: contain;} .center1_drimg.center2_drimg { background:url('/page_KR0/01_sub/images/centerdrimg2.jpg')no-repeat 100% 0%; background-size: contain;} .center1_drimg.center3_drimg { background:url('/page_KR0/01_sub/images/centerdrimg3.jpg')no-repeat 100% 0%; background-size: contain;} .center1_drimg.center4_drimg { background:url('/page_KR0/01_sub/images/centerdrimg4.jpg')no-repeat 100% 0%; background-size: contain;} .center1_drimg.center4_drimg2 { background:url('/page_KR0/01_sub/images/centerdrimg4_2.jpg')no-repeat 100% 0%; background-size: contain;} .center1_drimg.center5_drimg { background:url('/page_KR0/01_sub/images/centerdrimg5.jpg')no-repeat 100% 0%; background-size: contain;} .center1_drimg.center6_drimg { background:url('/page_KR0/01_sub/images/centerdrimg6.jpg')no-repeat 100% 0%; background-size: contain;} #center-modal4 .center1_2 .slick-dots { position: absolute; top:76%; left:8%; display: block; padding: 0; margin: 0; list-style: none; overflow:hidden; cursor:pointer; } #center-modal4 .center1_2 .slick-dots li { float:left; width:13px; height:13px; margin-right:6px; border:1px solid #16c5d5; border-radius:100%; background:none; box-sizing:border-box; } #center-modal4 .center1_2 .slick-dots li.slick-active { background:#16c5d5; } .center1_3 { position:relative; width:100%; padding:15% 0; border-bottom:1px solid #e7e7e7; opacity:0; z-index:3; } .center1_3 div.t1 { position:absolute; top:10%; left:5%; } .allmenu_info3 { position:relative; width:90%; padding-top:15%; margin:0 auto; } .allmenu_info3 ul.all_phone { position:relative; width:100%; margin-bottom:10%; padding-top:48px; text-align:center; background:url('/images/common/all_phone.jpg')no-repeat 50% 0; } .allmenu_info3 ul.all_phone li { font-size:23px; font-weight:700; color:#46d1e1; font-family: 'Jost'; line-height:1; margin-bottom:28px; } .allmenu_info3 ul.all_phone li.sns { margin-bottom:0px; } .allmenu_info3 ul.all_time { position:relative; width:100%; height:200px; padding-top:48px; line-height: 220%; background:url('/images/common/all_time.jpg')no-repeat 50% 0; text-align:left; } .allmenu_info3 ul.all_time li { position:absolute; top:0%; left:50%; padding-top:48px; transform:translate(-50%,0%); width:90%; margin-bottom:10px; font-size:13px; color:#000; font-family: 'Jost'; font-weight:500; } .allmenu_info3 ul.all_time li span { display:inline-block; width:90px; color:#717171; font-family: 'Noto Sans KR', sans-serif; font-size:12px; font-weight:500; } .allmenu_info3 ul.all_time li span.t2 { display:inline-block; width:100%; color:#717171; font-family: 'Noto Sans KR', sans-serif; font-size:12px; font-weight:500; } .allmenu_info3 ul.all_time li span.lunch { margin-left:8px; display:inline-block; width:auto; font-family: 'Noto Sans KR', sans-serif; font-size:12px; font-weight:500; } .center1_4 { position:relative; width:100%; margin:0 auto; padding:10% 5%; box-sizing:border-box; background:#fff; opacity:0; z-index:3; } .center1_4 div.centersubject { position:relative; width:100%; padding:10% 0; margin:0 auto; border-bottom:1px solid #e7e7e7; overflow:hidden; } .center1_4 div.centersubject ul { width:100%; text-align:left; } .center1_4 div.centersubject ul li.t1 { padding-top:10%; font-size:20px; font-weight:700; color:#343434; line-height:100%; } .center1_4 div.centersubject ul li.t2 { padding-top:10px; font-size:14px; font-weight:400; color:#343434; line-height:160%; } .center1_4 div.centersubject ul li.linkbt a { display:block; width:100px; height:34px; border:1px solid #13c0d7; margin-top:10%; font-size:14px; font-weight:500; color:#13c0d7; text-align:center; line-height:28px; border-radius:50px; } .center1_4 div.centersubject ul li.linkbt a:hover { color:#fff; background:#13c0d7; } .center1_4 div.centersubject div { width:100%; overflow:hidden; } .center1_4 div.centersubject div img { width:100%; } .center1_5 { position:relative; width:100%; margin:0 auto; padding:10% 5%; box-sizing:border-box; overflow:hidden; background:#fff; opacity:0; z-index:3; } .center1_5 .t1 { position:absolute; top:5%; left:5%; } .center1_5 .center_map { width:100%; } .center1_5 .center_map ul li.mapbt { width:100%; height:72px; overflow:hidden; } .center1_5 .center_map ul li.mapview { width:100%; height:220px; } .center1_5 .center_map ul li.mapbt a { float:right; display:block; width:100px; height:30px; border:1px solid #343434; margin-left:12px; font-size:13px; font-weight:500; color:#343434; text-align:center; line-height:28px; border-radius:50px; } .center1_5 .center_map ul li.mapbt a:hover { color:#fff; background:#13c0d7; border:1px solid #13c0d7; } .center1_5 .center_add { width:100%; padding-top:5%; text-align:left; box-sizing:border-box; } .center1_5 .center_add ul li { width:100%; height:110px; border-bottom:1px solid #e7e7e7; font-size:18px; font-weight:700; line-height:155px; box-sizing:border-box; } .center1_5 .center_add ul li.add1 { color:#13c0d7; background:url('/page_KR0/01_sub/images/addicon1.jpg')no-repeat 0 20px; } .center1_5 .center_add ul li.add2 { color:#000000; background:url('/page_KR0/01_sub/images/addicon2.jpg')no-repeat 0 20px; } .center_view .center1_2,.center_view .center1_3,.center_view .center1_4,.center_view .center1_5 { animation: opa 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .centerslide { z-index:2; } .center1_1 .scrollv { position: absolute; bottom:3%; width:100%; text-align:center; animation: scrollani 1500ms 2200ms infinite ease; } @keyframes scrollani { 0% { transform: translateY(0); } 50% { transform: translateY(7px); } 100% { transform: translateY(0); } } .vbg1 { position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:rgba(255,255,255,0.6); animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; box-sizing:border-box; } .vbg2 { position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:rgba(255,255,255,0.6); animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; box-sizing:border-box; } .vbg3 { position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:rgba(255,255,255,0.6); animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; box-sizing:border-box; } .vbg9 { position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:#fbfbfb; animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; box-sizing:border-box; } .vbg10 { position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:#fbfbfb; animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; box-sizing:border-box; } .vbg11 { position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:#fbfbfb; animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; box-sizing:border-box; } .subvodbg{ position:absolute; bottom:0px; left:0px;; width:100%; height:100%; background:rgba(0,0,0,0.3);} .subvodbg2{ position:absolute; bottom:0px; left:0px;; width:100%; height:100%; background:rgba(0,0,0,0.2);} .subvod.active { height:100%; } .sub0801wrap { position:relative; width:100%; height:500px; } .sub0801 { position:relative; width:100%; height:500px; overflow:hidden; } .sub0801 ul {position:absolute; top:40%; left:50%; transform: translate(-50%,50%); text-align:center; } .sub0801 ul li.title { font-size:28px; font-weight:700; color:#111111; animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .sub0801 ul li.con { font-size:16px; font-weight:500; color:#13c0d7; animation: fadeup 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .sub0801 video { display: inline-block; position: absolute; left: 50%; top: 0%; transform: translate(-50%, 0); min-width: 100%; min-height: 100%; height: 100%; width: auto; } .sub0803 { position:relative; width:90%; margin:0 auto; padding:10% 0; overflow:hidden; } .sub0803 p { font-size:26px; font-weight:700; color:#000; line-height:1; padding-bottom:30px; } .sub0803 ul li label { font-size:0px; display:none; } .sub0803 ul li.name input { width:100%; height:56px; border:1px solid #000; padding:0 15px; margin-bottom:6px; font-size:15px; font-weight:700; color:#2a2a2a; } .sub0803 ul li.phone input { width:100%; height:56px; border:1px solid #000; padding:0 15px; margin-bottom:6px; font-size:15px; font-weight:700; color:#2a2a2a; } .sub0803 ul li.subject1 select { width:100%; height:56px; border:1px solid #000; padding:0 15px; margin-bottom:6px; font-size:15px; font-weight:700; color:#2a2a2a; background:url('/page_KR0/08_sub/images/subject1.jpg') no-repeat 95% 50%; -webkit-appearance: none; -moz-appearance: none; appearance : none; } .sub0803 ul li.contentinput textarea { width:100%; height:126px; border:1px solid #000; padding:15px; margin-bottom:6px; font-size:14px; font-weight:300; color:#888; font-family: 'Noto Sans KR', sans-serif; } .sub0803 ul li.subject2 { width:100%; height:56px; border:1px solid #000; padding:0 15px; margin-bottom:6px; box-sizing:border-box; } .sub0803 ul li div.subject2left { float:left; width:60px; line-height:54px; font-size:15px; font-weight:700; color:#2a2a2a; } .sub0803 ul li div.subject2right { display:block; float:left; width:180px; height:54px;line-height:54px; margin-left: 10px; } .sub0803 ul li div.subject2right input { width:14px; height:14px; } .sub0803 ul li div.subject2right span { display:block; float:left; width:58px; height:54px; vertical-align:middle; } .sub0803 ul li div.subject2right span label { display:inline-block; padding-left:4px; font-size:13px; color:#2a2a2a; font-weight:400; vertical-align:middle; } .sub0803 ul li.fpv { width:100%; font-size:14px; color:#2a2a2a; font-weight:400; text-align:right; } .sub0803 ul li.fpv input[id="check1"] { display: none; } .sub0803 ul li.fpv input[id="check1"] + label { display: inline-block; width: 15px; height: 15px; border: 0px solid #bcbcbc; background:#e1e1e1; cursor: pointer; border-radius:100%; margin-right:8px; vertical-align: middle; } .sub0803 ul li.fpv input[id="check1"]:checked + label { background-color: #000; } .sub0803 ul li.submitbt input { width:100%; height:56px; margin-top:10px; border:1px solid #000; background:#16c5d5; border:0px; font-size:18px; font-weight:500; color:#fff; font-family: 'Noto Sans KR', sans-serif; } .sub0803 ul li input::placeholder { color:#2a2a2a; } .sub0802wrap { position:relative; width:100%; height:600px; } .sub0802 { position:relative; width:100%; height:600px;background:#fbfbfb; overflow:hidden; } .sub0802 ul.noticetxt {position:absolute; top:35%; left:50%; transform: translate(-50%,50%); width:100%; text-align:center; } .sub0802 ul.noticetxt li.title { font-size:28px; font-weight:700; color:#111111; animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .sub0802 ul.noticetxt li.con { font-size:14px; font-weight:500; color:#13c0d7; animation: fadeup 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } #direction { position:absolute; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; height:682px; background:url('/page_KR0/08_sub/images/0802.jpg')no-repeat 50% 50%; background-size:700px; animation: vodheight3 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } #direction .direction { animation: opa 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 2.5s; } #direction .slick-slide { text-align:center; font-size:12px; font-weight:500; color:#ffffff; line-height:42px; transform: translate(-50%,-50%);} #direction .d1 { position:absolute !important; top:37% !important; left:26% !important; width:auto !important; height:35px !important; z-index:10 !important; } #direction .d2 { position:absolute !important; top:38% !important; left:23% !important; width:auto !important; height:35px !important; z-index:10 !important; } #direction .d3 { position:absolute !important; top:39% !important; left:34% !important; width:auto !important; height:35px !important; z-index:10 !important; } #direction .d4 { position:absolute !important; top:38% !important; left:56% !important; width:auto !important; height:35px !important; z-index:10 !important; } #direction .d5 { position:absolute !important; top:72% !important; left:46% !important; width:auto !important; height:35px !important; z-index:10 !important; } #direction .d6 { position:absolute !important; top:60% !important; left:46% !important; width:auto !important; height:35px !important; z-index:10 !important; } #direction span.bg1 { display:inline-block; width:12px; height:35px; margin:0 -1px; background:url('/page_MB0/08_sub/images/08bg1.png')no-repeat left bottom; vertical-align: top; } #direction span.bg2 { display:inline-block; width:15px; height:35px; margin:0 -1px; background:url('/page_MB0/08_sub/images/08bg3.png')no-repeat right bottom; vertical-align: top; } #direction span.bg3 { display:inline-block; height:35px; padding:0 5px; background:url('/page_MB0/08_sub/images/08bg2.png')repeat-x 50% bottom; vertical-align: top; } #direction .d4 span.bg1 { display:inline-block; width:15px; height:35px; margin:0 -1px; background:url('/page_MB0/08_sub/images/08bg4.png')no-repeat left bottom; vertical-align: top; } #direction .d4 span.bg2 { display:inline-block; width:12px; height:35px; margin:0 -1px; background:url('/page_MB0/08_sub/images/08bg5.png')no-repeat right bottom; vertical-align: top; } #direction .d4 span.bg3 { display:inline-block; height:35px; padding:0 5px; background:url('/page_MB0/08_sub/images/08bg2.png')repeat-x 50% bottom; vertical-align: top; } #direction .slick-list { height:682px; } #direction .slick-slide { } #direction .slick-slide.slick-active {} #direction .direction .slick-track { width:100% !important; height:682px !important; } .directionbt { animation: opa 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 2.0s; } .directionbt li { position:absolute; width:25px; height:36px; background:url('/page_KR0/08_sub/images/direction_off.png')no-repeat 0 0; transform: translate(-50%,50%); cursor:pointer; } .directionbt li.on { background:url('/page_KR0/08_sub/images/direction_on.png')no-repeat 0 0; } .directionbt li.d_bt1 { top:27%; left:42%; z-index:2; } .directionbt li.d_bt2 { top:29%; left:39%;z-index:2; } .directionbt li.d_bt3 { top:30%; left:43%; z-index:2; } .directionbt li.d_bt4 { top:28%; left:46%;z-index:2; } .directionbt li.d_bt5 { top:63%; left:58%; z-index:2; } .directionbt li.d_bt6 { top:51%; left:58%;z-index:2; } @keyframes vodheight3 { from{ height:0px; } to{ height:682px; } } .directioncon { position:relative; width:90%; margin:0 auto; overflow:hidden; } .directioncon div.hosmap { position:relative; width:100%; } .directioncon div.hosmapinfo { width:100%; padding:10% 5%; background:#16c5d5; box-sizing:border-box; } .directioncon div.hosmapinfo ul li.add { width:100%; min-height:39px; line-height:39px; padding-left:50px; font-size:14px; font-weight:700px; color:#ffffff; background:url('/page_KR0/08_sub/images/mapicon1.jpg')no-repeat 0 0; box-sizing:border-box;} .directioncon div.hosmapinfo ul li.phone { width:100%; min-height:39px; margin-top:13px; line-height:39px; padding-left:50px; font-family: 'Jost'; font-size:22px; font-weight:600px; color:#ffffff; background:url('/page_KR0/08_sub/images/mapicon2.jpg')no-repeat 0 0;box-sizing:border-box; } .directioncon div.hosmapinfo ul li.phone a { color:#fff; } .directioncon div.hosmapinfo ul li.hostime { line-height: 1.9; width:100%; margin-top:13px; padding-left:50px; padding-top:10px; background:url('/page_KR0/08_sub/images/mapicon3.jpg')no-repeat 0 0; box-sizing:border-box;} .directioncon div.hosmapinfo ul li.hostime ul { width:100%; overflow:hidden; margin-bottom:4px; } .directioncon div.hosmapinfo ul li.hostime ul li { margin-bottom:10px; font-size:15px; color:#fff; font-family: 'Jost'; font-weight:500; line-height: 140%; } .directioncon div.hosmapinfo ul li.hostime ul li span { display:inline-block; width:60px; color:#fff; font-family: 'Noto Sans KR', sans-serif; font-size:14px; font-weight:400; } .directioncon div.hosmapinfo ul li.hostime ul li span.t2 { display:inline-block; width:100%; color:#fff; font-family: 'Noto Sans KR', sans-serif; font-size:14px; font-weight:400; } .directioncon div.hosmapinfo ul li.hostime ul li span.lunch { display:inline-block; width:auto; font-family: 'Noto Sans KR', sans-serif; font-size:14px; font-weight:400; } .directioncon .contxt1 { position:relative; width:100%; margin-top:5%; } .directioncon .contxt1 a { display: block; width: 110px; height: 30px; margin:0 auto; line-height: 28px; font-size: 11px; font-weight: 400; text-align: center; color: #16c5d5; border: 1px solid #fff; border-radius: 50px; box-sizing:border-box; padding-left:16px; background:#fff url(/page_KR0/08_sub/images/btbg.png)no-repeat 14px 50%; } #sub02_02 .subtxtbg { position:absolute; top:0px; left:50%; width:100%; height:100%; transform: translate(-50%,0%); } .active#sub02_02 .subtxt li.titletxt1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub02_02 .graybg li:nth-child(1) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub02_02 .graybg li:nth-child(2) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub02_02 .graybg li:nth-child(3) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .snow1 { position:absolute; left: 24.2%; animation: paper1Ani 12.3s infinite; z-index: 3; transition: opacity 0.4s; width:28px; height:28px; background:#13c0d7; border-radius:100%; } .snow2 { position:absolute; left: 74%; animation: paper3Ani 23.4s infinite; z-index: 3; transition: opacity 0.4s; width:43px; height:43px; background:#d3d3d3; border-radius:100%; } #sub02_03 .subtxtbg { position:absolute; top:0px; left:50%; width:100%; height:100%; transform: translate(-50%,0%); } .active#sub02_03 .bluebg2 li:nth-child(1) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub02_03 .bluebg2 li:nth-child(2) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub02_03 .bluebg2 li:nth-child(3) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub02_03 .subtxt li.titletxt1 { animation: fadeup 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub02_03 .subtxt li.titletxt2 { animation: fadeup 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub02_03 .subtxt li.contxt2 { animation: fadeup 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .active#sub02_03 .subtxt .sub02icontxt { animation: fadeup 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } #sub02_04 { background-image: url(/page_KR0/02_sub/images/sub02_04.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub02_04 .subtxt { top: 70%; text-align: left; width: 80%; } .active#sub02_04 .subtxt li#btn-play { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub02_04 .subtxt li.titletxt1 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; line-height:150%; } #sub02_04 .subtxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; width:100%; height:30px; text-align:center; overflow:hidden; } #sub02_04 .subtxt li.t1 { position:absolute; top:30px; left:0px; width:100%; height:30px; font-size:24px; font-weight:700; color:#ffffff; letter-spacing:-0px; line-height:100%; } #sub02_04 .subtxt li.t2 { position:absolute; top:30px; left:0px; width:100%; height:30px; font-size:24px; font-weight:700; color:#ffffff; letter-spacing:-0px; line-height:100%; } #sub02_04 .subtxt li.t3 { position:absolute; top:30px; left:0px; width:100%; height:30px; font-size:24px; font-weight:700; color:#ffffff; letter-spacing:-1px; line-height:100%; } #sub02_04 .subtxt li.t4 { position:absolute; top:30px; left:0px; width:100%; height:30px; font-size:22px; font-weight:700; color:#ffffff; letter-spacing:-1px; line-height:100%; } #sub02_04 .subtxt li.t5 { position:absolute; top:30px; left:0px; width:100%; height:30px; font-size:24px; font-weight:700; color:#ffffff; letter-spacing:-1px; line-height:100%; } #sub02_04 .subtxt li.t6 { position:absolute; top:30px; left:0px; width:100%; height:30px; font-size:28px; font-weight:700; color:#ffffff; letter-spacing:-1px; line-height:100%; } .active#sub02_04 .subtxt li.t1 { animation: sub02_04_1 2.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .active#sub02_04 .subtxt li.t2 { animation: sub02_04_1 2.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.4s; } .active#sub02_04 .subtxt li.t3 { animation: sub02_04_1 2.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 4.1s; } .active#sub02_04 .subtxt li.t4 { animation: sub02_04_1 2.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 5.8s; } .active#sub02_04 .subtxt li.t5 { animation: sub02_04_1 2.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 7.5s; } .active#sub02_04 .subtxt li.t6 { animation: sub02_04_2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 9.0s; } @keyframes sub02_04_1 { 0% { top:30px; } 15% { top:0px; } 85% { top:0px; } 100% { top:-30px; } } @keyframes sub02_04_2 { 0% { top:90px; filter: blur(6px); opacity: 0; } 100% { top:0px; filter: blur(0px); opacity: 1; } } .subvod { position:absolute; bottom:0px; left:0px; width:100%; height:100%; overflow:hidden; transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) ; } .subvod video { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; height: 100%; width: auto; } .subvod2 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; height:60%; overflow:hidden; transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) ; } .subvod2 video { display: inline-block; width: 100%; } #sub02_05 { box-sizing:border-box; } #sub02_05 h3 { position:absolute; top:12%; left:5%; font-size:16px; font-weight:500; } .sub02box { width:42%; } .sub02box.sub02box1 { position:absolute; top:36%; left:5%; transform: translate(0,-50%); } .sub02box.sub02box2 { position:absolute; top:54%; right:5%; transform: translate(0,-50%); } .sub02box.sub02box3 { position:absolute; top:76%; left:5%; transform: translate(0,-50%); } .sub02box_2 { width:60%; } .sub02box_2.sub02box_2_1 { position:absolute; top:32%; left:50%; transform: translate(-50%,-50%); } .sub02box_2.sub02box_2_2 { position:absolute; top:72%; left:50%; transform: translate(-50%,-50%); } .sub02box li.boxbg { position:relative; width:100%; border-bottom-right-radius:20px; overflow:hidden; cursor:pointer; box-shadow: 5px 5px 25px #ebebeb; transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) ; } .sub02box li.boxbg img { width:100%; } .sub02box li.txt1 { margin-top:10px; width:100%; font-size:14px; font-weight:700; color:#000000; text-align:left; } .sub02box li.txt2 { margin-top:4px; width:100%; font-size:12px; font-weight:500; line-height:140%; color:#2d2d2d; text-align:left; } .sub02box li.boxbg a { display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; font-weight:400; color:#fff; transition:all 0.5s cubic-bezier(0.22, 1, 0.36, 1) ; } .sub02box li.boxbg:hover a { height:100%;background:rgba(21,204,224,0.8);} .sub02box li.boxbg a span { opacity:1; display:block; position:absolute; top:50%; left:50%; width:88px; height:30px; transform: translate(-50%,-50%); text-align:center; line-height:28px; border:1px solid #fff; font-size:12px; font-weight:400; border-radius:30px; transition:all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; } .sub02box li.boxbg:hover a span { opacity:1; top:50%; } .active .sub02box.sub02box1 { animation: fadeup3 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active .sub02box.sub02box2 { animation: fadeup3 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active .sub02box.sub02box3 { animation: fadeup3 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active#sub02_05 .whitebg li:nth-child(1) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#sub02_05 .whitebg li:nth-child(2) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub02_05 .whitebg li:nth-child(3) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } #sub02_06 { background-image: url(/page_KR0/02_sub/images/sub02_06.jpg); background-size: cover; background-position:50% 50%; } #sub02_06 h3 { position:absolute; top:15%; left:5%; font-size:16px; font-weight:400; color:#fff; } #sub02_06 .titletxt { position:absolute; top:50%; left:50%; width:200px; transform: translate(-50%,-50%); } #sub02_06 .titletxt li { width:100%; padding-bottom:20px; font-size:20px; font-weight:700; color:#fff; overflow:hidden; line-height:1.3; } #sub02_06 .titletxt li.t1 { font-size: 28px; padding-bottom:40px; line-height: 140%; } #sub02_06 .titletxt span { display:inline-block; vertical-align:super; font-size:16px; padding-left:10px; } #sub02_06 .titletxt a { float:right; display:inline-block; width:28px; } .active#sub02_06 h3 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub02_06 .titletxt { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } #sub02_06_1 { background-image: url(/page_MB0/02_sub/images/vv1m.jpg); background-size: cover; background-position:50% 50%; } #sub02_06_1 h3 { position:absolute; top:15%; left:5%; font-size:16px; font-weight:400; color:#fff; } #sub02_06_1 .titletxt { position:absolute; top:50%; left:50%; width:200px; transform: translate(-50%,-50%); } #sub02_06_1 .titletxt li { width:100%; padding-bottom:20px; font-size:20px; font-weight:700; color:#fff; overflow:hidden; line-height:1.3; } #sub02_06_1 .titletxt li.t1 { font-size: 28px; padding-bottom:40px; line-height: 140%; } #sub02_06_1 .titletxt span { display:inline-block; vertical-align:super; font-size:16px;} #sub02_06_1 .titletxt a { float:right; display:inline-block; width:28px; position:relative; bottom:15px;} #sub02_06_1 .titletxt .new { position:absolute; top:-30px; left:-50px; } #sub02_06_1 .titletxt .new img {width:60px;} #sub02_06_1.active .titletxt li.new { animation: new1 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } #sub02_06_1.active .titletxt li.t2 { animation: new2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #sub02_07_1 { background-image: url(/page_MB0/02_sub/images/mvv3.jpg); background-size: cover; background-position:50% 50%; } #sub02_07_1 h3 { position:absolute; top:15%; left:5%; font-size:16px; font-weight:400; color:#fff; } #sub02_07_1 .titletxt { position:absolute; top:50%; left:50%; width:200px; transform: translate(-50%,-50%); } #sub02_07_1 .titletxt li { width:100%; padding-bottom:20px; font-size:20px; font-weight:700; color:#fff; overflow:hidden; line-height:1.3; } #sub02_07_1 .titletxt li.t1 { font-size: 28px; padding-bottom:40px; line-height: 140%; } #sub02_07_1 .titletxt span { display:inline-block; vertical-align:super; font-size:16px;} #sub02_07_1 .titletxt a { float:right; display:inline-block; width:28px; position:relative; bottom:59px;} #sub02_07_1 .titletxt .new { position:absolute; top:-30px; left:-50px; } #sub02_07_1 .titletxt .new img {width:60px;} #sub02_07_1.active .titletxt li.new { animation: new1 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } #sub02_07_1.active .titletxt li.t2 { animation: new2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; }\ @keyframes new1 { 0% { top:-90px; opacity:0; } 100% { top:-40px; opacity:1; } } @keyframes new2 { 0% { transform:translateY(70px); opacity:0; } 100% { transform:translateY(0px); opacity:1; } } .active#sub02_06_1 h3 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub02_06_1 .titletxt { /* animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; */ } #ieuleng div { box-sizing:border-box; font-size:26px; font-weight:700; color:#ffffff; z-index:0; opacity:0.2; } #ieuleng div span { display:inline-block; position:absolute; } #ieuleng div span img { width: 75%; padding-top: 30%; } #ieuleng div span.t1 { top:20%; left:5%; } #ieuleng div span.t2 { top:20%; left:30%; } #ieuleng div span.t3 { top:20%; left:60%; } #ieuleng div span.t4 { top:20%; left:95%; } #ieuleng div span.t5 { top:75%; left:5%; } #ieuleng div span.t6 { top:75%; left:20%; } #ieuleng div span.t7 { top:75%; left:40%; } #ieuleng div span.t8 { top:75%; left:60%; } #ieuleng div span.t9 { top:75%; left:80%; } #ieuleng div span.t10 { top:75%; left:95%; } .active #ieuleng div span.t1 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active #ieuleng div span.t2 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active #ieuleng div span.t3 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active #ieuleng div span.t4 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active #ieuleng div span.t5 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active #ieuleng div span.t6 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active #ieuleng div span.t7 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active #ieuleng div span.t8 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active #ieuleng div span.t9 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .active #ieuleng div span.t10 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } #sub02_10 { position:relative; width:100%; margin:0 auto; overflow:hidden; } #sub02_10 h3 { width:90%; margin:0 auto; padding-top:20%; font-size:16px; font-weight:500; color:#000; } #sub02_10 .snowlogo { right:15%; } #sub02_10 .subtxt2 { position:relative; width:90%; margin:0 auto; margin-top:5%; text-align:center; } #sub02_10 .subtxt2 li.t1 { font-size:16px; font-weight:700; color:#000000; line-height:150%; } #sub02_10 .subtxt2 li.t2 { margin-top:10px; font-size:13px; font-weight:400; color:#000000; line-height:150%; } #sub02_10 .subtxt2 li.t3 { margin-top:5%; font-size:13px; font-weight:400; } #sub02_10 .subtxt2 li.t3 a { display:block; width:100px; height:30px; margin:0 auto; line-height:29px; font-size:12px; font-weight:500; text-align:center; color:#13c0d7; border:1px solid #13c0d7; background:#fff; border-radius:50px; transition:all 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) ; } #sub02_10 .subtxt2 li.t3 a:hover { color:#fff; background:#13c0d7; } #sub02_10 .subtxtbg { position:relative; width:60%; margin-top:5%; margin-left:5%; padding-top:76%; } #sub02_10 .subtxtbg li.bg { position:absolute; top:0px; left:0; width:100%; height:100%; } #sub02_10 .subtxtbg li.txt { display:block; position:absolute; bottom:0; left: 100%; width: 86px; padding-left:10px; font-size:12px; font-weight:500; color:#272727; } .active#sub02_10 h3 { animation: opa 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.3s; } .active#sub02_10 .subtxtbg li { animation: blurtxt2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub02_10 .subtxtbg li span { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#sub02_10 .subtxt2 li.t1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub02_10 .subtxt2 li.t2 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .active#sub02_10 .subtxt2 li.t3 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } /*웰에이징*/ #wellwrap { position: fixed; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:0%; z-index: 150; background:rgba(0,0,0,0.6); overflow-y: auto; overflow-x: hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #wellwrap .wellwrap { opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; max-width:640px; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.3s; } #wellwrap div.well_woman { width:200px; height:200px; border-radius:100%; background:url('/page_KR0/02_sub/images/well_woman.jpg')no-repeat 50% 0; background-size:cover; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); cursor:pointer; margin: 20px auto; } #wellwrap div.well_man { ; width:200px; height:200px; border-radius:100%; background:url('/page_KR0/02_sub/images/well_man.jpg')no-repeat 50% 0; background-size:cover; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); cursor:pointer; margin: 0 auto; } #wellwrap div.well_woman:hover { width:200px; height:200px; border-radius:100%; background:url('/page_MB0/02_sub/images/well_woman.jpg')no-repeat 50% 0; background-size:cover; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); cursor:pointer; } #wellwrap div.well_man:hover { width:200px; height:200px; border-radius:100%; background:url('/page_MB0/02_sub/images/well_man.jpg')no-repeat 50% 0; background-size:cover; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); cursor:pointer; } #wellwrap p { position:absolute; width: 100%; top:15%; left:50%; transform:translate(-50%,-50%); font-size:28px; font-weight:700; color:#ffffff; letter-spacing:-1px; text-align:center; box-sizing:border-box; } #wellwrap.well-1 { height:100%; } #wellwrap.well-1 .wellwrap { opacity:1; } #wellwrap2 { position: fixed; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:0%; z-index: 151; background:#fff; overflow-y: auto; overflow-x: hidden; transition:all 0.1s cubic-bezier(0.5, 0, 0.1, 1); transition:all 0.1s cubic-bezier(0.5, 0, 0.1, 1); } #wellwrap2.active { height:100%; } #wellwrap2 .woman_view { opacity: 0; position:relative; width:100%; max-width:640px; margin:0 auto; background:url('/page_MB0/02_sub/images/womanbg.jpg')no-repeat 50% 0; background-size: cover; } #wellwrap2.active .woman_view { opacity: 1; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.2s; } #wellwrap2 ul.txt { position:absolute; top:7%; left:10%; } #wellwrap2 ul.txt li.t1 { font-size:16px; font-weight:700; color:#fff; } #wellwrap2 ul.txt li.t2 { margin-top:10px; font-size:28px; font-weight:700; color:#fff; line-height:120%; } .woman_view2 { position:relative; width:100%; max-width:640px; height:100%; margin:0 auto; background:url('/page_MB0/02_sub/images/womanbg2.jpg')no-repeat 50% 0; background-size: cover; } .woman_view2 div { position:relative; width:100%; height: 100%; } .woman_view2 div a { display:block; width:100%; height: 100%; } #wellwrap3 { position: fixed; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:0%; z-index: 151; background:#fff; overflow-y: auto; overflow-x: hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #wellwrap3.active { height:100%; } #wellwrap3 .woman_view { opacity: 0; position:relative; width:100%; max-width:640px; height:100%; margin:0 auto; background:url('/page_MB0/02_sub/images/manbg.jpg')no-repeat 50% 50%; background-size: cover; } #wellwrap3.active .woman_view { opacity: 1; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.2s; } #wellwrap3 ul.txt { position:absolute; top:7%; left:10%; } #wellwrap3 ul.txt li.t1 { font-size:16px; font-weight:700; color:#fff; } #wellwrap3 ul.txt li.t2 { margin-top:10px; font-size:28px; font-weight:700; color:#fff; line-height:120%; } #crisalix_banner_wrap { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:992px; height:400px; } .womanclick { position:relative; width:100%; height: 100%; max-width: 640px; margin:0 auto; } .womanclick li.wcbt { position:absolute; width:28px; height:28px; background:url('/page_KR0/02_sub/images/wcbg.png')no-repeat 0 50%; background-size: cover; cursor:pointer; z-index:0; } .womanclick li.wcbt:hover,.womanclick li.wcbt.active { width:28px; height:28px; background:url('/page_KR0/02_sub/images/wcbg_on.png')no-repeat 0 50%; background-size: cover; z-index:1; } .womanclick li.wcbt .wc-view { position:absolute; top:0px; left:108%; width:0px; overflow:hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } .womanclick li.wcbt:hover .wc-view { width:340px; } .wc-view li { position:relative; width:160px; background: rgba(255,255,255,0.8); padding:4px; font-size:11px; letter-spacing: -1px; font-weight:400; color:#000; cursor:pointer; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); box-sizing: border-box; } .wc-view li:hover { background: rgba(19,192,215,0.8); color:#fff; } .wc-view li span { display:none; } .wc-view li div.wcbtconview { opacity:0; position:fixed; z-index: 10; top:20%; right:60%; box-sizing:border-box; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } .wc-view li div.wcbtconview div { display:none; padding:30px; width:300px; background:#fff; box-sizing: border-box; } .wc-view li div.wcbtconview .figure { position:absolute; top:-20px; left:-20px; width:40px; height:40px; } .wc-view li div.wcbtconview .figure img { width:100%; } .wc-view li div.wcbtconview dl dt { font-size:18px; font-weight:700; color:#000; line-height:100%; } .wc-view li div.wcbtconview dl dd { margin-top:12px; font-size:14px; font-weight:400; color:#878787; line-height:160%; } .womanclick li.wcbt .wc-view li:hover div.wcbtconview { opacity:1; top:5%; left:10%; } .womanclick li.wcbt .wc-view li:hover div.wcbtconview div { display:block; } #wellwrap4 .womanclick li.wcbt .wc-view li:hover div.wcbtconview { opacity:1; top:50%; left:10%; transform: translateY(-50%); } #wellwrap5 .womanclick li.wcbt .wc-view li:hover div.wcbtconview { opacity:1; top:45%; left:10%; transform: translateY(-50%); } #wellwrap2 .wc-view#w-con1 li { width:90px; } #wellwrap2 .wc-view#w-con2 li { width:60px; } #wellwrap2 .wc-view#w-con3 li { width:60px; } #wellwrap2 .wc-view#w-con4 li { width:80px; } #wellwrap2 .wc-view#w-con5 li { width:150px; } #wellwrap2 .wc-view#w-con6 li { width:60px; } #wellwrap2 .wc-view#w-con7 li { width:70px; } #wellwrap2 .wc-view#w-con8 li { width:180px; } #wellwrap2 .wc-view#w-con9 li { width:100px; } #wellwrap2 .wc-view#w-con10 li { width:130px; } #wellwrap2 .wc-view#w-con11 li { width:60px; } #wellwrap2 .wc-view#w-con12 li { width:50px; } #wellwrap2 .wc-view#w-con13 li { width:60px; } #wellwrap2 .wc-view#w-con14 li { width:80px; } #wellwrap2 .wc-view#w-con15 li { width:140px; } #wellwrap3 .wc-view#w-con1 li { width:90px; } #wellwrap3 .wc-view#w-con2 li { width:60px; } #wellwrap3 .wc-view#w-con3 li { width:60px; } #wellwrap3 .wc-view#w-con4 li { width:80px; } #wellwrap3 .wc-view#w-con5 li { width:160px; } #wellwrap3 .wc-view#w-con6 li { width:60px; } #wellwrap3 .wc-view#w-con7 li { width:80px; } #wellwrap3 .wc-view#w-con8 li { width:180px; } #wellwrap3 .wc-view#w-con9 li { width:80px; } #wellwrap3 .wc-view#w-con10 li { width:130px; } #wellwrap3 .wc-view#w-con11 li { width:60px; } #wellwrap3 .wc-view#w-con12 li { width:50px; } #wellwrap3 .wc-view#w-con13 li { width:50px; } #wellwrap3 .wc-view#w-con14 li { width:80px; } #wellwrap3 .wc-view#w-con15 li { width:150px; } #wellwrap4 .wc-view#w-con1 li { width:70px; } #wellwrap4 .wc-view#w-con2 li { width:90px; } #wellwrap4 .wc-view#w-con3 li { width:90px; } #wellwrap4 .wc-view#w-con4 li { width:100px; } #wellwrap4 .wc-view#w-con5 li { width:80px; } #wellwrap4 .wc-view#w-con6 li { width:130px; } #wellwrap4 .wc-view#w-con8 li { width:130px; } #wellwrap5 .wc-view#w-con1 li { width:70px; } #wellwrap5 .wc-view#w-con2 li { width:100px; } #wellwrap5 .wc-view#w-con3 li { width:90px; } #wellwrap5 .wc-view#w-con4 li { width:100px; } #wellwrap5 .wc-view#w-con5 li { width:80px; } #wellwrap5 .wc-view#w-con6 li { width:120px; } #wellwrap5 .wc-view#w-con7 li { width:100px; } #wellwrap5 .wc-view#w-con8 li { width:130px; } .womanclick li.wcbt.wc1 { top:30%; right:35%; } .womanclick li.wcbt.wc2 { top:39%; right:71%; } .womanclick li.wcbt.wc3 { top:45%; right:53%; } .womanclick li.wcbt.wc4 { top:49%; right:51%; } .womanclick li.wcbt.wc5 { top:50%; right:68%; } .womanclick li.wcbt.wc6 { top:52%; right:48%; } .womanclick li.wcbt.wc7 { top:50%; right:34%; } .womanclick li.wcbt.wc8 { top:52%; right:93%; } .womanclick li.wcbt.wc9 { top:59%; right:85%; } .womanclick li.wcbt.wc10 { top:58%; right:57%; } .womanclick li.wcbt.wc11 { top:64%; right:61%; } .womanclick li.wcbt.wc12 { top:68%; right:41%; } .womanclick li.wcbt.wc13 { top:71%; right:55%; } .womanclick li.wcbt.wc14 { top:81%; right:61%; } .womanclick li.wcbt.wc15 { top:87%; right:45%; } #wellwrap3 .womanclick li.wcbt.wc1 { top:28%; right:32%; } #wellwrap3 .womanclick li.wcbt.wc2 { top:38%; right:32%; } #wellwrap3 .womanclick li.wcbt.wc3 { top:44%; right:59%; } #wellwrap3 .womanclick li.wcbt.wc4 { top:48%; right:62%; } #wellwrap3 .womanclick li.wcbt.wc5 { top:50%; right:53% } #wellwrap3 .womanclick li.wcbt.wc6 { top:53%; right:59%; } #wellwrap3 .womanclick li.wcbt.wc7 { top:49%; right:70%; } #wellwrap3 .womanclick li.wcbt.wc8 { top:51%; right:44%; } #wellwrap3 .womanclick li.wcbt.wc9 { top:59%; right:35%; } #wellwrap3 .womanclick li.wcbt.wc10 { top:59%; right:65%; } #wellwrap3 .womanclick li.wcbt.wc11 { top:65%; right:26%; } #wellwrap3 .womanclick li.wcbt.wc12 { top:64%; right:69% } #wellwrap3 .womanclick li.wcbt.wc13 { top:72%; right:65%; } #wellwrap3 .womanclick li.wcbt.wc14 { top:83%; right:50%; } #wellwrap3 .womanclick li.wcbt.wc15 { top:88%; right:55%; } #wellbodywrap { position: fixed; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:0%; z-index: 150; background:rgba(0,0,0,0.6); overflow-y: auto; overflow-x: hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #wellbodywrap .wellwrap { opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; max-width:640px; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.3s; } #wellbodywrap div.well_woman2 { width:200px; height:200px; border-radius:100%; background:url('/page_KR0/02_sub/images/well_body_woman.jpg')no-repeat 50% 0; background-size:cover; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); cursor:pointer; margin: 20px auto;} #wellbodywrap div.well_man2 { width:200px; height:200px; border-radius:100%; background:url('/page_KR0/02_sub/images/well_body_man.jpg')no-repeat 50% 0; background-size:cover; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); cursor:pointer; margin: 0 auto; } #wellbodywrap div.well_woman2:hover { width:200px; height:200px; border-radius:100%; background:url('/page_MB0/02_sub/images/well_body_woman.jpg')no-repeat 50% 0; background-size:cover; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); cursor:pointer; } #wellbodywrap div.well_man2:hover { width:200px; height:200px; border-radius:100%; background:url('/page_MB0/02_sub/images/well_body_man.jpg')no-repeat 50% 0; background-size:cover; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); cursor:pointer; } #wellbodywrap p { position:absolute; width: 100%; top:15%; left:50%; transform:translate(-50%,-50%); font-size:28px; font-weight:700; color:#ffffff; letter-spacing:-1px; text-align:center; box-sizing:border-box; } #wellbodywrap.well-1 { height:100%; } #wellbodywrap.well-1 .wellwrap { opacity:1; } #wellwrap4 { position: fixed; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:0%; z-index: 151; background:#fff; overflow-y: auto; overflow-x: hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #wellwrap4.active { height:100%; } #wellwrap4 .woman_view { opacity: 0; position:relative; width:100%; max-width:640px; height:100%; margin:0 auto; background:url('/page_MB0/02_sub/images/womanbodybg.jpg')no-repeat 50% 50%; background-size: cover; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.5s; } #wellwrap4.active .woman_view { opacity: 1; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.2s; } #wellwrap4 ul.txt { position:absolute; top:70%; left:10%; } #wellwrap4 ul.txt li.t1 { font-size:16px; font-weight:700; color:#fff; } #wellwrap4 ul.txt li.t2 { margin-top:10px; font-size:28px; font-weight:700; color:#fff; line-height:120%; } #wellwrap4 .womanclick li.wcbt.wc1 { top:11%; right:52%; } #wellwrap4 .womanclick li.wcbt.wc2 { top:21%; right:44%; } #wellwrap4 .womanclick li.wcbt.wc3 { top:53%; right:23%; } #wellwrap4 .womanclick li.wcbt.wc4 { top:42%; right:32%; } #wellwrap4 .womanclick li.wcbt.wc5 { top:41%; right:60%; } #wellwrap4 .womanclick li.wcbt.wc6 { top:36%; right:78%; } #wellwrap4 .womanclick li.wcbt.wc7 { top:70%; right:25%; } #wellwrap4 .womanclick li.wcbt.wc8 { top:90%; right:70%; } #wellwrap5 { position: fixed; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:0%; z-index: 151; background:#fff; overflow-y: auto; overflow-x: hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #wellwrap5.active { height:100%; } #wellwrap5 .woman_view { opacity: 0; position:relative; width:100%; max-width:640px; height:100%; margin:0 auto; background:url('/page_MB0/02_sub/images/manbodybg.jpg')no-repeat 50% 50%; background-size: cover; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.5s; } #wellwrap5.active .woman_view { opacity: 1; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.2s; } #wellwrap5 ul.txt { position:absolute; top:72%; left:10%; } #wellwrap5 ul.txt li.t1 { font-size:16px; font-weight:700; color:#fff; } #wellwrap5 ul.txt li.t2 { margin-top:10px; font-size:28px; font-weight:700; color:#fff; line-height:120%; } #wellwrap5 .womanclick li.wcbt.wc1 { top:5%; right:70%; } #wellwrap5 .womanclick li.wcbt.wc2 { top:22%; right:25%; } #wellwrap5 .womanclick li.wcbt.wc3 { top:42%; right:44%; } #wellwrap5 .womanclick li.wcbt.wc4 { top:44%; right:67%; } #wellwrap5 .womanclick li.wcbt.wc5 { top:30%; right:68%; } #wellwrap5 .womanclick li.wcbt.wc6 { top:40%; right:87%; } #wellwrap5 .womanclick li.wcbt.wc7 { top:65%; right:75%; } #wellwrap5 .womanclick li.wcbt.wc8 { top:88%; right:40%; } .drline1 { position:relative; width:100%; height:auto; padding-top:15%; } .drlbak9 { background-position: 54% 0 !important; } .drlbak10 { background-position: 67% 0 !important; } .drlbak11 { background-position: 77% 0 !important; } .drlbak12 { background-position: 65% 0 !important; } .drline1 .subbgwrap { position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.4); } .drline1 div.drinfowrap { position:relative; width:90%; margin:0 auto; } .drline1 div.drinfowrap ul li.txt1 { display:inline-block; font-size:20px; font-weight:700; color:#fff; border-bottom:4px solid #13c0d7; padding-bottom:10px; margin-bottom:14px; } .drline1 div.drinfowrap ul li.txt1 span { font-size:14px; padding-left:8px; font-weight:400; } .drline1 div.drinfowrap ul li.txt4 { font-size:12px; font-weight:400; color:#fff; } /* .drline1 div.drinfowrap ul li.txt4 br { display:none; } */ .drline1 div.drinfowrap ul li.txt2 { margin-top:5%; font-size:18px; font-weight:700; color:#fff; line-height:140%; } .drline1 div.drinfowrap ul li.txt3 { margin-top:5%; width:100%; padding:4% 3%; background:rgba(255,255,255,0.1); font-size:13px; font-weight:400; color:#fff; box-sizing:border-box; } .drline1 div.drinfowrap ul li.txt3 span { display:block; width:100%; padding-bottom:6px; font-size:18px; font-weight:500; color:#05ddfa; } .drbt { position:relative; margin-top:8%; cursor:pointer; } .drbt a.drlinkbt1 { margin-right:8px; background:#13c0d7 url('/page_KR0/02_sub/images/drlinkbt1.jpg')no-repeat 18px 50%; color:#fff; display:inline-block; position:relative; width:120px; height:34px; padding-left:45px; line-height:34px; border-radius:50px; text-align:left; font-size:12px; font-weight:500; box-sizing:border-box; } .drbt a.drlinkbt2 { background:#ffffff url('/page_KR0/02_sub/images/drlinkbt2.jpg')no-repeat 18px 50%; color:#535353; cursor:pointer; display:inline-block; position:relative; width:120px; height:34px; padding-left:45px; line-height:34px; border-radius:50px; text-align:left; font-size:12px; font-weight:500; box-sizing:border-box; } .drbt a.drlinkbt2 span { display:block; position:absolute; top:0px; right:10px; font-size:12px; } .timeview { position:fixed; top:0px; left:0px; width:100%; height:0px; overflow:hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); z-index:4; } .timeview.active { height:100%; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } .timeview .timeviewclose { position:absolute; top:5%; left:5%; width:38px; height:38px; text-align:center; line-height:38px; font-family: 'Jost'; z-index:5; cursor:pointer; font-weight:500; color:#fff; background:#13c0d7; border-radius:100%; box-sizing:border-box; } .allmenu_info2 { position:relative; width:100%; height:100%; padding:30% 5% 15% 5%; background:#fff; box-sizing:border-box; overflow:hidden; } .allmenu_info2 ul.all_phone { width:100%; margin:0 auto; padding-top:28px; background:url('/images/common/all_phone.jpg')no-repeat 0 0; } .allmenu_info2 ul.all_phone li { font-size:24px; font-weight:700; color:#46d1e1; line-height:1; margin-bottom:18px; } .allmenu_info2 ul.all_phone li.sns { margin-bottom:0px; } .allmenu_info2 ul.all_add { width:100%; margin:0 auto; margin-top:10%; padding-top:28px; box-sizing:border-box; background:url('/images/common/all_add.jpg')no-repeat 0 0; } .allmenu_info2 ul.all_add { font-size:13px; color:#717171; font-weight:400; } .allmenu_info2 ul.all_time { width:100%; margin:0 auto; margin-top:10%; padding-top:28px; background:url('/images/common/all_time.jpg')no-repeat 0 0; } .allmenu_info2 ul.all_time li { margin-bottom:4px; font-size:13px; color:#000; font-family: 'Jost'; font-weight:700; line-height: 1.7;} .allmenu_info2 ul.all_time li span { display:inline-block; width:76px; font-family: 'Noto Sans KR', sans-serif; font-weight:500; } .allmenu_info2 ul.all_time li span.lunch { margin-left:4px; display:inline-block; width:auto; font-family: 'Noto Sans KR', sans-serif; font-weight:500; } .timetable { display: table; position:relative; width:100%; margin-top:5%; background:#fff; border-top:3px solid #13c0d7; border-bottom:1px solid #e1e1e1; } .timetable ul { display: table-row; } .timetable ul li { display: table-cell; text-align:center; } .timetable ul.tableline1 li { width:12.5%; padding:3% 0; vertical-align:middle; border-right:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; font-size:12px; font-weight:400; color:#000000; } .timetable ul.tableline2 li { width:12.5%; padding:3% 0; border-right:1px solid #e1e1e1; vertical-align:middle; font-size:12px; font-weight:400; color:#2b2b2b; } .timetable ul.tableline2 li div { display:block; width:100%; padding:5%; box-sizing:border-box; } .timetable ul.tableline2 li span.time_1 { display:block; font-size:12px; font-weight:500; color:#13c0d7; } .timetable ul.tableline2 li span.time_2 { display:block; font-size:12px; font-weight:500; color:#777; } .timetable ul.tableline2 li span.time_3 { display:block; font-size:12px; font-weight:500; color:#000; } .scrollv { width:100%; text-align:center; padding-top:20px; } .modal2dr .scrollv { animation: scrollani 1500ms 2200ms infinite ease; width:100%; text-align:center; padding-top:20px; } .drline2 { position:relative; width:100%; padding:15% 0; background:#ffffff; overflow:hidden; } .drline2 div.drimgs { position:relative; width:80%; padding-top:100%; margin:0 auto; } .drline2 div.drstorywrap { position:relative; width:80%; margin:5% auto 0 auto; } .drline2 div.drstory { position:relative; width:100%; } .drline2 div.drstory .storytitle { position:relative; width:100%; height:80px; line-height:80px; padding-left:76px; padding-bottom:20px; font-size:22px; font-weight:700; color:#000; border-bottom:1px solid #dedede; box-sizing:border-box; } .drline2 div.drstory .storytitle span { position:absolute; top:0px; right:0px; font-size:22px; color:#16c5d5; cursor:pointer; text-align: right; width: 100%; } .drline2 div.drstory ul.storycon1 li { width:100%; padding:20px 0; padding-left:0; font-size:14px; font-weight:400; color:#767676; line-height:170%; box-sizing:border-box; } .drline2 div.drstory .storytitle.title1 { background:url('/page_KR0/02_sub/images/dr_t1_icon1.jpg')no-repeat 0 50%; background-size: 60px; } .drline2 div.drstory .storytitle.title2 { background:url('/page_KR0/02_sub/images/dr_t1_icon2.jpg')no-repeat 0 50%; background-size: 60px; } .drline2 div.drstory .storytitle.title3 { background:url('/page_KR0/02_sub/images/dr_t1_icon3.jpg')no-repeat 0 50%; background-size: 60px; } .drline2 div.drstory .storytitle.title4 { background:url('/page_KR0/02_sub/images/dr_t1_icon4.jpg')no-repeat 0 50%; background-size: 60px; } .drline2 div.drstory .storytitle.title5 { background:url('/page_KR0/02_sub/images/dr_t1_icon5.jpg')no-repeat 0 50%; background-size: 60px; } .drline2 div.drstory .storytitle.title6 { background:url('/page_KR0/02_sub/images/dr_t1_icon6.jpg')no-repeat 0 50%; background-size: 60px; } .drline2 #drbook { position:relative; width:100%; height:460px; overflow: hidden; } .drline2 #drbook .drbook_sl{ position:relative; width:100%; padding-left:34px; overflow: hidden; padding-top:40px; box-sizing:border-box; } .drline2 #drbook .drbook_sl ul { position:relative; margin:0 auto; padding-bottom:40px; overflow:hidden; } .drline2 #drbook .drbook_sl ul li { float:left; width:190px; margin-right:30px; cursor:pointer; } .drline2 #drbook .drbook_sl ul li div.imgs { width:100%; height:200px; overflow:hidden; } .drline2 #drbook .drbook_sl ul li div.txt { position:relative; width:100%; padding:20px 0; text-align:left; box-sizing:border-box; font-size:14px; font-weight:400; color:#4a4a4a; } .drline2 #drbook .scrollbar { margin-left:34px; height: 8px; margin-bottom:10%; background: #dbdbdb; line-height: 0; } .drline2 #drbook .scrollbar .handle { width: 100px; height: 100%; background: #13c0d7; cursor: pointer; } .drline2 #drbook .scrollbar .mousearea{ position: absolute; top: -9px; left: 0; width: 100%; height: 20px; } .drline2 div.drstory ul.storycon3 { padding:40px 0; } .drline2 div.drstory ul.storycon3 li { width:100%; padding:10px 0 10px 0; box-sizing:border-box; overflow:hidden; } .drline2 div.drstory ul.storycon3 li span.title { display:block; float:left; width:190px; font-size:18px; font-weight:500; color:#000000; line-height:190%; } .drline2 div.drstory ul.storycon3 li span.con { display:block; float:left; width:410px; font-size:18px; font-weight:400; color:#767676; line-height:190%; } #sub02_07 .subtxt2 { position:absolute; top:15%; left:5%; } #sub02_07 .subtxt2 li.t1 { font-size:26px; font-weight:700; color:#000000; line-height:130%; } #sub02_07 .subtxt2 li.t1 span { color:#13c0d7; } #sub02_07 .subtxt2 li.t2 { font-size:14px; font-weight:400; color:#000000; } .active#sub02_07 .bluebg li:nth-child(1) { animation: topheight 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 0.3s; } .active#sub02_07 .bluebg li:nth-child(2) { animation: topheight 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#sub02_07 .bluebg li:nth-child(3) { animation: topheight 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .circlebox { position:absolute; transform: translate(-50%,0); isolation: isolate; border-radius:100%; overflow:hidden; box-shadow: 5px 5px 25px #999; } .circlebox span { display:block; position:relative; width:100%; height:100%; border-radius:100%; overflow:hidden; } .circlebox1 { top:33%; left:24%; width:170px; height:170px; } .circlebox2 { top:47%; left:47%; width:100px; height:100px; } .circlebox3 { top:35%; left:72%; width:93px; height:93px; } .circlebox4 { top:62%; left:70%; width:126px; height:126px; } .circlebox5 { top:54%; left:69%; width:70px; height:70px; } .circlebox7 { top:78%; left:23%; width:100px; height:100px; } .circlebox8 { top:64%; left:36%; width:80px; height:80px; } .circlebox9 { top:71%; left:84%; width:76px; height:76px; } .active#sub02_07 .subtxt2 li.t1 { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub02_07 .subtxt2 li.t2 { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active#sub02_07 .subtxt2 li.t3 { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub02_07 .subtxt2 li.t4 { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active#sub02_07 .circlebox1 { animation: fadeleft2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#sub02_07 .circlebox2 { animation: fadeleft2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 2.0s; } .active#sub02_07 .circlebox3 { animation: fadeleft2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } .active#sub02_07 .circlebox4 { animation: fadeleft2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 2.4s; } .active#sub02_07 .circlebox5 { animation: fadeleft2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 2.6s; } .active#sub02_07 .circlebox6 { animation: fadeleft2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 2.8s; } .active#sub02_07 .circlebox7 { animation: fadeleft2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } .active#sub02_07 .circlebox8 { animation: fadeleft2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 2.6s; } .active#sub02_07 .circlebox9 { animation: fadeleft2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 2.9s; } #sub02_08 .subtxt2 { position:absolute; top:20%; left:5%; width:90%; } #sub02_08 .subtxt2 li.t1 { font-size:14px; font-weight:400; color:#7d7d7d; line-height:170%; } #sub02_08 .subtxt2 li.t2 { font-size:26px; font-weight:700; color:#000000; line-height:130%; } #sub02_08 .subtxt2 li.t2 span { color:#13c0d7; } #sub02_08 .engwrap { position:absolute; top:64%; left:50%; width:100%; transform: translate(-50%,-50%); } #sub02_08 .eng_i { position:absolute; top:50%; left:10%; transform: translate(-50%,-50%); } #sub02_08 .eng_e { position:absolute; top:50%; left:37%; transform: translate(-50%,-50%); } #sub02_08 .eng_u { position:absolute; top:50%; left:74%; transform: translate(-50%,-50%); } #sub02_08 .eng_l { position:absolute; top:50%; left:90%; transform: translate(-50%,-50%); } #sub02_08 .sub02_08bg { position:absolute; top:68%; left:40%; transform: translate(-50%,-50%); width:180px; height:180px; border-radius:100%; background: #f5fcfe; } .active#sub02_08 .whitebg li:nth-child(1) { animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.2s; } .active#sub02_08 .whitebg li:nth-child(2) { animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.3s; } .active#sub02_08 .whitebg li:nth-child(3) { animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#sub02_08 .subtxt2 li.t1 { animation: fadeup 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#sub02_08 .subtxt2 li.t2 { animation: fadeup 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub02_08 .eng_i { animation: fadeleft2 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } .active#sub02_08 .eng_e { animation: fadeleft2 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.4s; } .active#sub02_08 .eng_u { animation: fadeleft2 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.6s; } .active#sub02_08 .eng_l { animation: fadeleft2 1.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.8s; } #sub02_09 { background-image: url(/page_MB0/02_sub/images/sub02_09.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub02_09txt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:90%; font-size:15px; font-weight:500; color:#ffffff; text-align:center; line-height:170%; } .sub02_09txt div { position:relative; width:100%; margin-top:40px; } .sub02_09txt div a { display:block; width:100px; height:28px; line-height:28px; font-size:13px; font-weight:400; margin:0 auto; color:#fff; border:1px solid #fff; border-radius:50px; margin:0 auto; } .sub02_09txt div a.txtbt2 { display:block; width:100px; height:28px; line-height:28px; font-size:13px; font-weight:400; margin:0 auto; color:#000; border:1px solid #000; border-radius:50px; margin:0 auto; } .active .sub02_09txt{ animation: fadeup3 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active .sub02_09txt div a { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } #sub02_11 .subtxt2 { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; text-align:center; } #sub02_11 .subtxt2 li.t1 { font-size:14px; font-weight:400; color:#7a7a7a; line-height:170%; } #sub02_11 .subtxt2 li.t2 { font-size:30px; font-weight:700; color:#000000; line-height:130%; } #sub02_11 .subtxt2 li.t2 span { display:inline-block; color:#13c0d7; } .active#sub02_11 .bluebg li:nth-child(1) { animation: topheight 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub02_11 .bluebg li:nth-child(2) { animation: topheight 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub02_11 .bluebg li:nth-child(3) { animation: topheight 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub02_11 .subtxt2 li.t1 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub02_11 .subtxt2 li.t2 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } #sub03_02 { background-image: url(/page_MB0/03_sub/images/sub03_02.jpg); background-size: cover; background-attachment: fixed; } #sub03_02 .subtxt { position:absolute; top:36%; left:50%; transform: translate(-50%,0); text-align:center; } #sub03_02 .subtxt .titletxt1 { font-size:28px; line-height:160%; } .active#sub03_02 .titletxt1 span:nth-child(1) { display:inline-block; animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub03_02 .titletxt1 span:nth-child(3) { display:inline-block; animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } #sub03_03 { background-image: url(/page_MB0/03_sub/images/sub03_02.jpg); background-size: cover; background-attachment: fixed; } #sub03_03 .subtxt4 { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:90%; margin:0 auto; text-align:left; } #sub03_03 .subtxt4 li.titletxt1 { font-size:28px; font-weight:700; color:#14c2d3; letter-spacing:-1px; line-height:130%; } #sub03_03 .subtxt4 li.contxt1 { font-size:20px; font-weight:700; color:#323131; } .active#sub03_03 .graybg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub03_03 .graybg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub03_03 .graybg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub03_03 .titletxt1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub03_03 .contxt1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } #sub03_04 { background-image: url(/page_MB0/03_sub/images/sub03_04.jpg); background-size: cover; background-attachment: fixed; } #sub03_04 .subtxt { top:64%; width:90%; text-align:left; } #sub03_04 .subtxt .titletxt1 { font-size:28px; } .active#sub03_04 .titletxt1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub03_04 .contxt1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .sub03_05 { background-image: url(/page_KR0/03_sub/images/sub03_05.jpg) !important; max-height:100%; background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub04_02 { background-image: url(/page_MB0/04_sub/images/sub04_02.jpg); background-size: cover; background-attachment: fixed; } #sub04_02 .subtxt { position:absolute; top:35%; left:50%; transform: translate(-50%,0); width:90%; text-align:left; } #sub04_02 .subtxt .titletxt1 { font-size:28px; line-height:150%; } .active#sub04_02 .titletxt1 span:nth-child(1) { display:inline-block; animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub04_02 .titletxt1 span:nth-child(3) { display:inline-block; animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } #sub04_03 { background-image: url(/page_MB0/04_sub/images/sub04_02.jpg); background-size: cover; background-attachment: fixed; } #sub04_03 .subtxt4 { position:absolute; top:50%; left:50%; transform: translate(-50%,0); width:90%; text-align:left; } #sub04_03 .subtxt4 li.titletxt1 { font-size:28px; font-weight:700; color:#fff; letter-spacing:-1px; line-height:140%; } #sub04_03 .subtxt4 li.contxt1 { font-size:16px; font-weight:500; color:#fff; } #sub04_03 .subtxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub04_03 .subtxtbg li:nth-child(2) { position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub04_03 .subtxtbg li:nth-child(3) { position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } .active#sub04_03 .subtxtbg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub04_03 .subtxtbg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub04_03 .subtxtbg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub04_03 .titletxt1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub04_03 .contxt1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } #sub04_04 { background-image: url(/page_MB0/04_sub/images/sub04_04.jpg); background-size: cover; background-attachment: fixed; } #sub04_04 .subtxt { width:80%; margin:0 auto; text-align:left; } .active#sub04_04 .titletxt1 { animation: fadeup 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#sub04_04 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .sub04pro#sub02_06 { background-image: url(/page_MB0/04_sub/images/sub02_06.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub04_05 { background-image: url(/page_MB0/04_sub/images/sub04_05.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub04_06 { background-image: url(/page_KR0/04_sub/images/sub04_06.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .active#sub04_06 .titletxt1 span.t1 { display:inline-block;animation: fadeleft 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.8s; } .active#sub04_06 .titletxt1 span.t2 { display:inline-block; animation: faderight 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.8s; } .active#sub04_06 .titletxt1 span.t3 { display:inline-block;animation: fadeleft 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.1s; } .active#sub04_06 .titletxt1 span.t4 { display:inline-block; animation: faderight 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.1s; } .active#sub04_06 .titletxt1 span.t5 { display:inline-block;animation: fadeleft 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.4s; } .active#sub04_06 .titletxt1 span.t6 { display:inline-block; animation: faderight 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.4s; } .active#sub04_06 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #sub05_02 { background-image: url(/page_MB0/05_sub/images/sub05_02.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub05_02 .subtxt { position:absolute; top:60%; left:50%; transform: translate(-50%,-50%); width:90%; text-align:center; } #sub05_02 .subtxt .imgs { position:relative; width:80%; margin:0 auto; overflow:hidden; text-align:left; } .active#sub05_02 .subtxt .imgs { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub05_02 .titletxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .active#sub05_02 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.1s; } #sub05_03 { background-image: url(/page_KR0/05_sub/images/sub05_03.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub05_03 .subtxt { position:absolute; top:60%; left:50%; transform: translate(-50%,-50%); width:80%; text-align:left; } #sub05_03 .subtxt li.subtitle1 { font-size:18px; font-weight:500; color:#323131; line-height:100%; } #sub05_03 .subtxt li.titletxt1 { font-size:28px; font-weight:700; color:#14c2d3; line-height:120%; } #sub05_03 .subtxt li.contxt1 { font-size:14px; font-weight:400; color:#6c6c6c; line-height:180% } #sub05_03 .subtxtbg { position:absolute; top:0px; left:50%; width:100%; height:100%; transform: translate(-50%,0%); } .active#sub05_03 .graybg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; } .active#sub05_03 .graybg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .active#sub05_03 .graybg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub05_03 .subtitle1 { animation: blurtxt 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.9s; } .active#sub05_03 .titletxt1 { animation: blurtxt 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .active#sub05_03 .contxt1 { animation: blurtxt 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.9s; } #sub05_04 { background-image: url(/page_KR0/05_sub/images/sub05_04.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub05_04 .subtxt { position:absolute; top:65%; left:50%; transform: translate(-50%,-50%); width:90%; text-align:left; } #sub05_04 .subtxt li.titletxt1 { font-size:24px; font-weight:700; color:#ffffff; line-height:140%; } #sub05_04 .subtxt li.contxt1 { font-size:14px; font-weight:500; color:#1dafbf; line-height:180%; letter-spacing:5px; } .active#sub05_04 .titletxt1 { animation: blurtxt2 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.5s; } .active#sub05_04 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.0s; } #sub05_05 { background-image: url(/page_KR0/05_sub/images/sub05_04.jpg); max-height:100%; background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub05_05 .subtxtbg { position:absolute; top:0px; left:0; width:100%; height:100%; } #sub05_05 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub05_05 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub05_05 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub05_05 .titletxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:74%; } #sub05_05 .titletxt div { position:relative; width:100%; margin-bottom:20px; font-size:24px; font-weight:700; color:#fff; } #sub05_05 .titletxt span { display:inline-block; position:absolute; top:2px; right:0px; cursor:pointer; width:30px; } .active#sub05_05 .subtxtbg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#sub05_05 .subtxtbg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub05_05 .subtxtbg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub05_05 #ieuleng div span { animation: opa 1.5s cubic-bezier(0.22, 1, 0.36, 1)both 1.0s; } .active#sub05_05 .titletxt div { animation: fadeleft 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active#sub05_05 .titletxt div span { animation: faderight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } #sub05_04-1 { background-image: url(/page_KR0/05_sub/images/sub05_04-1.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub05_04-1 .subtxt01 { position:absolute; top:30%; left:50%; transform: translate(-50%,-50%); width:90%; text-align:left; } #sub05_04-1 .subtxt01 li.titletxt1 { font-size:28px; font-weight:700; color:#ffffff; line-height:120%; } #sub05_04-1 .subtxt01 li.contxt1 { font-size:18px; font-weight:500; color:#1dafbf; line-height:180%; letter-spacing:5px; } #sub05_04-1 .subtxt01 li.contxt2 { font-size:14px; font-weight:400; color:#ffffff; line-height:180%;} #sub05_04-1 .subtxt02 { position:absolute; top:75%; left:50%; transform: translate(-50%,-50%); width:90%; text-align:right; } #sub05_04-1 .subtxt02 li.titletxt1 { font-size:28px; font-weight:700; color:#ffffff; line-height:120%; } #sub05_04-1 .subtxt02 li.contxt1 { font-size:18px; font-weight:500; color:#1dafbf; line-height:180%; letter-spacing:5px; } #sub05_04-1 .subtxt02 li.contxt2 { font-size:14px; font-weight:400; color:#ffffff; line-height:180%;} .active#sub05_04-1 .titletxt1 { animation: blurtxt 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.9s; } .active#sub05_04-1 .contxt1 { animation: blurtxt 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .active#sub05_04-1 .contxt2 { animation: blurtxt 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.9s; } #sub05_07 { background-image: url(/page_KR0/05_sub/images/sub05_07.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub06_02 { background-image: url(/page_KR0/06_sub/images/sub06_02.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub06_02 .subtxt { position:absolute; top:60%; left:50%; transform: translate(-50%,-50%); text-align:left; width:90%; line-height:180%; } .active#sub06_02 .titletxt1 span:nth-child(1) { display:inline-block; animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub06_02 .titletxt1 span:nth-child(3) { display:inline-block; animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } #sub06_03 { background-image: url(/page_KR0/06_sub/images/sub06_02.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub06_03 .subtxt4 { position:relative; top:30%; width:80%; margin:0 auto; } #sub06_03 .subtxt4 li.subtitle1 { font-size:18px; font-weight:700; color:#323131; line-height:100%; } #sub06_03 .subtxt4 li.titletxt1 { margin-top:5%; font-size:26px; font-weight:700; color:#14c2d3; letter-spacing:-1px; line-height:120%; } #sub06_03 .subtxt4 li.contxt1 { width:100%; text-align:right; margin-top:35%; font-size:26px; font-weight:700; color:#000; letter-spacing:-1px; line-height:120%; } .active#sub06_03 .graybg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub06_03 .graybg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub06_03 .graybg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub06_03 .subtitle1 { animation: fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub06_03 .titletxt1 { animation: fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .active#sub06_03 .contxt1 { animation: fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } #sub06_04 { background-image: url(/page_MB0/06_sub/images/06bg1.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .active#sub06_04 .titletxt1 { animation: fadeup 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub06_04 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } #sub06_06 h3 { position:absolute; top:10%; left:10%; font-size:18px; font-weight:500; color:#000; } .active#sub06_06 .whitebg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.1s; } .active#sub06_06 .whitebg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.2s; } .active#sub06_06 .whitebg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.3s; } #strength { position:relative; width:100%; padding-top:100px; margin:0 auto; } #strength .strength_sl{ position:relative; width:100%; overflow: hidden; padding-top:20px; background:url('/page_KR0/06_sub/images/strengthbg.png')repeat-x 200px bottom; box-sizing:border-box; } #strength .strength_sl ul { position:relative; margin:0 auto; padding-bottom:20px; overflow:hidden; } #strength .strength_sl ul li { float:left; width:210px; margin-right:20px; cursor:pointer; } #strength .strength_sl ul li div.imgs { width:100%; height:244px; overflow:hidden; } #strength .strength_sl ul li div.txt { position:relative; width:90%; padding:10px 0% 0 5%; text-align:left; box-sizing:border-box; } #strength .strength_sl ul li div.txt span.title { display:block; width:100%; font-size:14px; font-weight:500; color:#000000; letter-spacing:-1px; line-height:140%; } #strength .strength_sl ul li div.txt span.con { padding-top:10px; display:block; width:100%; font-size:12px; font-weight:400; color:#4a4a4a; } #strength .scrollbar { height: 8px; margin-bottom:10%; background: #dbdbdb; line-height: 0; } #strength .scrollbar .handle { width: 100px; height: 100%; background: #13c0d7; cursor: pointer; } #strength .scrollbar .mousearea{ position: absolute; top: -9px; left: 0; width: 100%; height: 20px; } #sub06_05 { background-image: url(/page_KR0/06_sub/images/sub06_05.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub07_02 { background-image: url(/page_KR0/07_sub/images/sub07_02.jpg); background-size: cover; background-attachment: fixed; } #sub07_02 .subtxt { top:70%; } .active#sub07_02 .titletxt1 { display:inline-block; animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } #sub07_03 { background-image: url(/page_MB0/07_sub/images/sub07_02.jpg); background-size: cover; background-attachment: fixed; } #sub07_03 .subtxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub07_03 .subtxtbg li:nth-child(2) { position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub07_03 .subtxtbg li:nth-child(3) { position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } .active#sub07_03 .subtxtbg li:nth-child(1) { animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub07_03 .subtxtbg li:nth-child(2) { animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#sub07_03 .subtxtbg li:nth-child(3) { animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .active#sub07_03 .titletxt1 { animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub07_03 .contxt1 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.7s; } #sub07_04 h3 { position:absolute; top:15%; left:5%; font-size:16px; font-weight:500; color:#fff; } #sub07_04 { background-image: url(/page_KR0/07_sub/images/sub07_04.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub07_04 .subtxt5 { position:absolute; top:50%; left:5%; text-align:left; } #sub07_04 .subtxt5 .titletxt1 { font-size:22px; font-weight:700; color:#ffffff; letter-spacing:-1px; } #sub07_04 .subtxt5 .contxt1 { font-size:14px; font-weight:400; color:#999; line-height:160%; } .active#sub07_04 h3 {animation: blurtxt 1.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub07_04 .titletxt1 { animation: blurtxt2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#sub07_04 .contxt1 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } #sub07_05 { background-image: url(/page_KR0/07_sub/images/sub07_05.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub07_06 { background-image: url(/page_KR0/07_sub/images/sub07_06.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .active#sub07_06 .titletxt1 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#sub07_06 .contxt1 { animation: fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } #sub07_06 .subtxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub07_06 .subtxtbg li:nth-child(2) { position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub07_06 .subtxtbg li:nth-child(3) { position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } .active#sub07_06 .subtxtbg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub07_06 .subtxtbg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub07_06 .subtxtbg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .icon07 { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:60%; height:100%; background:url('/page_KR0/07_sub/images/07iconbg.png')no-repeat 50% 60%; background-size:100%; } .icon07 ul { float:left; width:140px; height:190px; text-align:center; } .icon07 ul.icon07_1 { position:absolute; top:30%; left:50%; transform: translate(-50%,-50%); } .icon07 ul.icon07_2 { position:absolute; top:70%; left:0%; transform: translate(-50%,-50%); } .icon07 ul.icon07_3 { position:absolute; top:70%; left:100%; transform: translate(-50%,-50%); } .icon07 ul li.txt { font-size:12px; font-weight:400; color:#fff; } .icon07 ul li.txt span { font-size:18px; font-weight:700; } .icon07 ul li img { width:130px; } .icontitle { position:absolute; top:52%; left:50%; transform: translate(-50%,-50%); width:100%; font-size:20px; font-weight:700; color:#fff; text-align:center; } .active .icon07 { animation: opa 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.3s; } .active .icon07 ul.icon07_1 { animation: blurtxt2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.7s; } .active .icon07 ul.icon07_2 { animation: blurtxt2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } .active .icon07 ul.icon07_3 { animation: blurtxt2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 2.7s; } #sub07_07 { background-image: url(/page_MB0/07_sub/images/07bg5.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub07_07 .subtxt5 { position:absolute; top:15%; left:5%; text-align:left; } #sub07_07 .subtxt5 .titletxt1 { font-size:22px; font-weight:700; color:#ffffff;line-height:130%; } #sub07_07 .subtxt5 .contxt1 { padding-left:12px; font-size:14px; font-weight:400; color:#ffffff; line-height:160%; } .active#sub07_07 .titletxt1 { animation: fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub07_07 .contxt1 { animation: fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .modalclosebt2 {display:block; position:fixed; top:0px; right:0px; width:80px; height:80px; background:#16c5d5 url('/page_KR0/05_sub/images/modalclosebt.jpg')no-repeat 65% 40%; background-size: 30px; border-bottom-left-radius:100%; z-index:151; cursor:pointer; } .modalclosebt {display:none; position:fixed; top:0px; right:0px; width:80px; height:80px; background:#16c5d5 url('/page_KR0/05_sub/images/modalclosebt.jpg')no-repeat 65% 40%; background-size: 30px; border-bottom-left-radius:100%; z-index:151; cursor:pointer; } .modal-active .modalclosebt { display:block; animation: opa 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal2_1 { background:#fff; } .modal2_1_1 { position: relative; width:100%; margin:0 auto; height:740px; box-sizing: border-box; background:url('/page_MB0/02_sub/images/modal2_1_1.jpg')no-repeat 50% 0; background-size:cover; } .modal2_1_1 ul.txt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; width:100%; } .modal2_1_1 ul.txt li.t1 { display:inline-block; font-size:16px; font-weight:700; color:#fff; vertical-align:top; margin-right:10px; } .modal2_1_1 ul.txt li.t2 { display:inline-block; font-size:24px; font-weight:700; color:#fff; text-align:left; vertical-align:top; margin-left:10px; line-height:120%; } .modal2_1 .modal2_1_1 ul.txt li.t1 { animation: blurtxt2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal2_1 .modal2_1_1 ul.txt li.t2 { animation: blurtxt2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal2_1_2 { position: relative; width:100%; padding:25% 0; background:#16c5d6; text-align:left; box-sizing: border-box; } .modal2_1_2 ul.txt { position:relative; width:90%; margin:0 auto; } .modal2_1_2 ul.txt li.t1 { font-size:16px; font-weight:400; color:#ffffff; } .modal2_1_2 ul.txt li.t2 { font-size:26px; font-weight:700; color:#ffffff; line-height:140%; } .modal2_1_2 ul.txt li.t3 { height:22px; line-height:22px; font-size:15px; font-weight:500; color:#ffffff; } .modal2_1_2 ul.txt li.t3 span { display:inline-block; width:22px; height:22px; background:#fff; border-radius:100%; margin-right:8px; vertical-align: middle; } .modal2_1_2 ul.txt li.t4 { font-size:16px; font-weight:500; color:#ffffff; vertical-align: middle; } .modal2_1_3 { position: relative; width:100%; padding:20% 0 0 0; background:#eff0f0; } .modal2_1_3 ul.txt { position:relative; width:90%; margin:0 auto; text-align:left; } .modal2_1_3 ul.txt li.t1 { font-size:14px; font-weight:400; color:#6c6c6c; } .modal2_1_3 ul.txt li.t2 { font-size:26px; font-weight:700; color:#000; line-height:130%; } .modal2_1_3 ul.txt li.t3 { width:100%; padding-left:74px; box-sizing:border-box; background:url('/page_KR0/02_sub/images/txt_t3.jpg')no-repeat 0 0; background-size:60px; } .modal2_1_3 ul.txt li.t4 { width:100%; padding-left:74px; box-sizing:border-box; background:url('/page_KR0/02_sub/images/txt_t4.jpg')no-repeat 0 0; background-size:60px; } .modal2_1_3 ul.txt li.t5 { width:100%; padding-left:74px; box-sizing:border-box; background:url('/page_KR0/02_sub/images/txt_t5.jpg')no-repeat 0 0; background-size:60px; } .modal2_1_3 ul.txt li span.title { display:block; width:100%; margin-top:20px; font-size:20px; font-weight:700; color:#323131; } .modal2_1_3 ul.txt li span.con { display:block; width:100%; margin-top:10px; font-size:14px; font-weight:400; color:#878787; } .modal2_1_3 ul.txt li.t6 { font-size:16px; font-weight:400; color:#6c6c6c; line-height:150%; } .modal2_1_4 { position: relative; width:100%; height:740px; padding-top:15%; background:url('/page_MB0/02_sub/images/modal2_1_4.jpg')no-repeat 0 0; background-size:cover; } .modal2_1_4 ul.txt { position:relative; width:90%; margin:0 auto; box-sizing:border-box; text-align:left; } .modal2_1_4 ul.txt li.t1 { font-size:26px; font-weight:700; color:#2d2d2d; } .modal2_1_4 ul.txt li.t2 { font-size:16px; font-weight:400; color:#6c6c6c; line-height:180%; } .modal2_2_1 { position: relative; width:100%; height:700px; margin:0 auto; background:url('/page_MB0/02_sub/images/modal2_2_1.jpg')no-repeat 0 0; background-size:cover; } .modal2_2_1 ul.txt { position:absolute; top:50%; left:5%; width:90%; text-align:left; } .modal2_2_1 ul.txt li.t1 { font-size:16px; font-weight:500; color:#fff; } .modal2_2_1 ul.txt li.t2 { font-size:22px; font-weight:700; color:#fff; line-height:140%; } .modal2_2_1 ul.txt li.t3 { font-size:14px; font-weight:400; color:#6c6c6c; } .modal2_2 .modal2_2_1 ul.txt li.t1 { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal2_2 .modal2_2_1 ul.txt li.t2 { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal2_2 .modal2_2_1 ul.txt li.t3 { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .modalsize { position: relative; width: 100%;} .modal2_2_2 { position: relative; width: 100%; padding:45% 0 15% 0; box-sizing: border-box; text-align:left; } .modal_txtbox5 { position:relative; width:90%; margin:0 auto; overflow:hidden; } .modal_txtbox5 ul { position:relative; width:100%; } .modal_txtbox5 ul li.contxt {font-size:14px; font-weight:400; color:#6c6c6c; line-height:170%; margin-top:10%; } .modal_txtbox5 ul li.contxt span.title1 { font-weight:500; color:#16c5d5; } .modal_txtbox5 ul li.contxt span.title2 { font-weight:500; color:#000000; } .modal_txtbox5 ul li.imgs { width:100%; margin-top:20px; } .modal_txtbox5 ul li.modalicon { width:100%; padding:10% 0 10% 0; overflow:hidden; } .modal_txtbox5 ul li.modalicon ul li { float:left; width:33.333%; height:140px; text-align:center; font-size:14px; font-weight:500; color:#323131; padding-top:78px; box-sizing: border-box; } .modal_txtbox5 ul li.modalicon ul li.m_i1 { background:url('/page_KR0/02_sub/images/m_i1.png')no-repeat 50% 0; } .modal_txtbox5 ul li.modalicon ul li.m_i2 { background:url('/page_KR0/02_sub/images/m_i2.png')no-repeat 50% 0; } .modal_txtbox5 ul li.modalicon ul li.m_i3 { background:url('/page_KR0/02_sub/images/m_i3.png')no-repeat 50% 0; } .modal_txtbox5 ul li.modalicon ul li.m_i4 { background:url('/page_KR0/02_sub/images/m_i4.png')no-repeat 50% 0; } .modal_txtbox5 ul li.modalicon ul li.m_i5 { background:url('/page_KR0/02_sub/images/m_i5.png')no-repeat 50% 0; } .modal_txtbox5 ul li.modalicon ul li.m_i6 { background:url('/page_KR0/02_sub/images/m_i6.png')no-repeat 50% 0; } .modal2_2_3 { position: relative; width: 100%; padding:25% 0 15% 0; box-sizing: border-box; text-align:left; } .modal2_2_4 { position: relative; width:100%; padding:15% 0 15% 0; } .modal2_2_4 ul.txt { position:relative; width:90%; margin:0 auto; text-align:left; } .modal2_2_4 ul.txt li.t1 { font-size:26px; font-weight:700; color:#2d2d2d; line-height:140%; } .modal2_2_4 ul.txt li.t2 { font-size:14px; font-weight:400; color:#6c6c6c; line-height:170%; } .modal2_3_1 { position: relative; width:100%; margin:0 auto; height:700px; box-sizing: border-box; background:url('/page_MB0/02_sub/images/modal2_3_1.jpg')no-repeat 50% 0; background-size:cover; } .modal2_3_1 ul.txt { position:absolute; top:60%; left:5%; width:90%; text-align:left; } .modal2_3_1 ul.txt li.t1 { font-size:18px; font-weight:700; color:#fff; } .modal2_3_1 ul.txt li.t2 { font-size:28px; font-weight:700; color:#fff; line-height:120%; } .modal2_3_1 ul.txt li.t2 span { font-size:14px; font-weight:400; color:#fff; line-height:100%; } .modal2_3 .modal2_3_1 ul.txt li.t1 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal2_3 .modal2_3_1 ul.txt li.t2 { animation: blurtxt2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal2_3_2 { position: relative; width:100%; padding:25% 0; } .modal2_3_2 ul.txt { position:relative; width:90%; margin:0 auto; } .modal2_3_2 ul.txt li.t1 { width:100%; text-align:left; font-size:28px; font-weight:700; color:#ffffff; line-height:140%; } .modal2_3_2 ul.txt li.t2 { width:100%; text-align:left; font-size:16px; font-weight:400; color:#ffffff; } .modal2_3_2 ul.txt li.t3 { width:100%; padding-top:25%; text-align:right; font-size:28px; font-weight:700; color:#ffffff; line-height:140%; } .modal2_3_2 ul.txt li.t3 span { color:#37575a; } .modal2_3_3 { position: relative; width:100%; padding:25% 0; text-align:left; background:url('/page_MB0/02_sub/images/modal2_3_3.jpg')no-repeat 0 0; background-size:cover; } .modal2_3_3 div.txt { position:relative; width:90%; margin:0 auto; } .modal2_3_3 div.txt ul { width:100%; margin-top:35%; overflow:hidden; } .modal2_3_3 div.txt ul li { float:left; width:50%; font-size:15px; font-weight:400; color:#ffffff; padding-left:24px; padding-bottom:44px; border-left:1px solid #858282; box-sizing:border-box; } .modal2_3_3 div.txt ul li:nth-child(7),.modal2_3_3 div.txt ul li:nth-child(8) { padding-bottom:0px; } .modal2_3_4 { position: relative; width:100%; padding:25% 0; box-sizing: border-box; } .modal2_3_4 .imgtxt { position:relative; width:90%; margin:0 auto; margin-top:15%; text-align:center; box-sizing:border-box; overflow:hidden; } .modal2_3_4 .imgtxt li { float:left; width:50%; text-align:center; font-size:14px; font-weight:500; color:#323131; padding-top:164px; } .modal2_3_4 .imgtxt li:nth-child(1) { background:url('/page_KR0/02_sub/images/2_3_4img1.png')no-repeat 50% 0; } .modal2_3_4 .imgtxt li:nth-child(2) { background:url('/page_KR0/02_sub/images/2_3_4img2.png')no-repeat 50% 0; } .modal2_3_4 .imgtxt li:nth-child(3) { background:url('/page_KR0/02_sub/images/2_3_4img3.png')no-repeat 50% 0; } .modal2_3_4 .imgtxt li:nth-child(4) { background:url('/page_KR0/02_sub/images/2_3_4img4.png')no-repeat 50% 0; } .modal2_3_4 .imgtxt li:nth-child(5) { background:url('/page_KR0/02_sub/images/2_3_4img5.png')no-repeat 50% 0; } .modal_txtbox2 { position: relative; width:90%; margin:0 auto; overflow:hidden; } .modal_txtbox2 ul li.contxt { padding-left: 34px; font-size:16px; font-weight:400; color:#6c6c6c; line-height:170%; margin-top:22px; } .modal_txtbox2 div { width:100%; text-align:center; } .modal_txtbox2 ul.imgpart { position:relative; width:100%; overflow:hidden; margin-top:10%; } .modal_txtbox2 ul.imgpart li { float:left; width:50%; height:60px; line-height:60px; margin-bottom:14px; padding-left:70px; box-sizing:border-box; font-size:14px; font-weight:500; color:#565656; } .modal_txtbox2 ul.imgpart li.part1 { background:url('/page_KR0/03_sub/images/part1.jpg')no-repeat 0 0; background-size: 60px;} .modal_txtbox2 ul.imgpart li.part2 { background:url('/page_KR0/03_sub/images/part2.jpg')no-repeat 0 0;background-size: 60px; } .modal_txtbox2 ul.imgpart li.part3 { background:url('/page_KR0/03_sub/images/part3.jpg')no-repeat 0 0;background-size: 60px; } .modal_txtbox2 ul.imgpart li.part4 { background:url('/page_KR0/03_sub/images/part4.jpg')no-repeat 0 0; background-size: 60px;} .modal_txtbox2 ul.imgpart li.part5 { background:url('/page_KR0/03_sub/images/part5.jpg')no-repeat 0 0; background-size: 60px;} .modal_txtbox2 ul.imgpart li.part6 { background:url('/page_KR0/03_sub/images/part6.jpg')no-repeat 0 0;background-size: 60px; } .modal_txtbox2 ul.imgpart li.part7 { background:url('/page_KR0/03_sub/images/part7.jpg')no-repeat 0 0;background-size: 60px; } .modal_txtbox2 ul.imgpart li.part8 { background:url('/page_KR0/03_sub/images/part8.jpg')no-repeat 0 0;background-size: 60px; } .modal_txtbox2 ul.imgpart li.part9 { background:url('/page_KR0/03_sub/images/part9.jpg')no-repeat 0 0; background-size: 60px;} .modal_txtbox2 ul.imgpart li.part10 { background:url('/page_KR0/03_sub/images/part10.jpg')no-repeat 0 0; background-size: 60px;} .modal2_4_1 { position: relative; width:100%; margin:0 auto; box-sizing: border-box; } .modal2_4_1 .modaltab3 { top:90px; } .modal3_1_1 { position:relative; width:100%; padding:20% 0; margin:0 auto; overflow:hidden; } .modal3_1_1 .txt { position:relative; width:90%; margin:0 auto; } .modal3_1_1 .txt li.t1 { font-size:22px; font-weight:700; color:#000; } .modal3_1_1 .txt li.t2 { font-size:14px; font-weight:400; color:#6c6c6c; } .modal3_1_1 .txt li.t2 span { color:#2f2f2f; } .modal3_1_1 .txt li.itxt1 { font-size:14px; font-weight:400; color:#6c6c6c; padding-left:70px; background:url('/page_KR0/03_sub/images/itxt1.jpg')no-repeat 0 0%; } .modal3_1_1 .txt li.itxt1 span { font-weight:500; color:#13c0d7; } .modal3_1_1 .txt li.itxt2 { font-size:14px; font-weight:400; color:#6c6c6c; padding-left:70px; background:url('/page_KR0/03_sub/images/itxt2.jpg')no-repeat 0 0%; } .modal3_1_1 .txt li.itxt2 span { font-weight:500; color:#13c0d7; } .modal3_1_1 .txt li.itxt3 { font-size:14px; font-weight:400; color:#6c6c6c; padding-left:70px; background:url('/page_KR0/03_sub/images/itxt3.jpg')no-repeat 0 0%; } .modal3_1_1 .txt li.itxt3 span { font-weight:500; color:#13c0d7; } .modal3_1 .modalbg li:graybg(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .modal3_1 .modalbg li:graybg(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal3_1 .modalbg li:graybg(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal3_1 .modal3_1_1 .txt li.t1 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .modal3_1 .modal3_1_1 .txt li.t2 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .modal3_1 .modal3_1_1 .txt li.itxt1 { animation: blurtxt2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .modal3_1 .modal3_1_1 .txt li.itxt2 { animation: blurtxt2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .modal3_1 .modal3_1_1 .txt li.itxt3 { animation: blurtxt2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .modal3_1_2 { position:relative; width:100%; padding:20% 0; } .modal3_1_2 .txt { position:relative; width:90%; margin:0 auto; overflow:hidden; } .modal3_1_2 .txt li.t1 { font-size:26px; font-weight:700; color:#000; } .modal3_1_2 .txt li.t2 { font-size:14px; font-weight:400; color:#6c6c6c; line-height:160%; } .modal3_1_2 .txt li.imgtxt { width:100%; margin-top:20px; } .modal3_1_2 .txt li.imgtxt span { display:block; float:left; width:50%; margin-bottom:5%; text-align:center; padding-top:150px; font-size:16px; font-weight:500; color:#1a1a1a; } .modal3_1_2 .txt li.imgtxt span:nth-child(1) { background:url('/page_KR0/03_sub/images/03img1.png')no-repeat 50% 0; background-size:130px; } .modal3_1_2 .txt li.imgtxt span:nth-child(2) { background:url('/page_KR0/03_sub/images/03img2.png')no-repeat 50% 0; background-size:130px; } .modal3_1_2 .txt li.imgtxt span:nth-child(3) { background:url('/page_KR0/03_sub/images/03img3.png')no-repeat 50% 0; background-size:130px; } .modal3_1_2 .txt li.imgtxt span:nth-child(4) { background:url('/page_KR0/03_sub/images/03img4.png')no-repeat 50% 0; background-size:130px; } .modal3_1_3 { position:relative; width:100%; padding:20% 0; margin:0 auto; } .modal3_1_3 .txt { position:relative; width:90%; margin:0 auto; } .modal3_1_3 .txt li.t1 { font-size:18px; font-weight:700; color:#0c0c0c; } .modal3_1_3 .txt li.t2 { font-size:26px; font-weight:700; color:#000000; } .modal3_1_3 .txt li.t3 { font-size:14px; font-weight:300; color:#6c6c6c; } .modal3_1_3 .txt li.t3 span { font-weight:500; color:#6c6c6c; } .modal3_1_3 .txt li.t4 { position:relative; z-index:1; width:300px; height:80px; margin:0 auto; margin-top:10%; margin-bottom:-5%; padding-top:20px; background:#16c5d5; text-align:center; line-height: 100%;border-radius:50px; font-size:18px; font-weight:700; color:#fff;box-sizing:border-box; } .modal3_1_3 .txt li.t4 span { font-size:13px; font-weight:400; } .modal3_1_3 .txt li.t5 { position:relative; z-index:1; width:300px; height:80px; margin:0 auto; margin-top:-5%; padding-top:20px; background:#a4a4a4; text-align:center; line-height: 100%;border-radius:50px; font-size:18px; font-weight:700; color:#fff;box-sizing:border-box; } .modal3_1_3 .txt li.t5 span { font-size:13px; font-weight:400; } .modal3_1_4 { position:relative; width:100%; padding:35% 0 20% 0; margin:0 auto; overflow:hidden; box-sizing:border-box; background:#fff; } .modal3_1_4 .snowlogo { top:60%; } .modal_txtbox { position:relative; width:90%; margin:0 auto; overflow:hidden; } .modal_txtbox ul { width:100%; } .modal_txtbox ul li.imgs3 { margin-top:5%; width:200px; margin:0 auto; box-sizing:border-box; } .modal_txtbox ul li.contxt { padding-left: 34px; font-size:14px; font-weight:400; color:#6c6c6c; line-height:170%; margin-top:20px; } .modal_txtbox ul li.contxt span.title1 { font-weight:500; color:#16c5d5; } .modal_txtbox ul li.contxt span.title2 { font-weight:500; color:#000000; } .modal_txtbox ul li.imgs { width:100%; margin-top:5%; padding-left: 34px; box-sizing:border-box; } .modal_txtbox5 ul li.modalicon { width:100%; padding:10% 0 10% 0; overflow:hidden; } .modal_txtbox5 ul li.modalicon ul li { float:left; width:33.333%; height:140px; text-align:center; font-size:14px; font-weight:500; color:#323131; padding-top:78px; box-sizing: border-box; } .modalicon { position:relative; width:100%; padding:10% 0 0 0; overflow:hidden; } .modalicon ul li { float:left; width:33.333%; height:140px; text-align:center; font-size:14px; font-weight:500; color:#323131; padding-top:78px; box-sizing: border-box; } .modalicon ul li.m_icon1 { background:url('/page_KR0/04_sub/images/m_icon1.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon2 { background:url('/page_KR0/04_sub/images/m_icon2.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon3 { background:url('/page_KR0/04_sub/images/m_icon3.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon4 { background:url('/page_KR0/04_sub/images/m_icon2.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon5 { background:url('/page_KR0/04_sub/images/m_icon4.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon6 { background:url('/page_KR0/04_sub/images/m_icon3.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon7 { background:url('/page_KR0/04_sub/images/m_icon5.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon8 { background:url('/page_KR0/04_sub/images/m_icon6.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon9 { background:url('/page_KR0/04_sub/images/m_icon7.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon10 { background:url('/page_KR0/04_sub/images/m_icon8.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon11 { background:url('/page_KR0/04_sub/images/m_icon9.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon12 { background:url('/page_KR0/04_sub/images/m_icon10.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon13 { background:url('/page_KR0/04_sub/images/m_icon11.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon14 { background:url('/page_KR0/04_sub/images/m_icon12.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon15 { background:url('/page_KR0/04_sub/images/m_icon13.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon16 { background:url('/page_KR0/04_sub/images/m_icon14.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon17 { background:url('/page_KR0/03_sub/images/m_icon15.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon18 { background:url('/page_KR0/03_sub/images/m_icon16.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon19 { background:url('/page_KR0/03_sub/images/m_icon17.jpg')no-repeat 50% 0; } .modal3_1_4 #mcon1 .txt_1 { position:relative; width:90%; margin:0 auto; padding-top:10%; overflow:hidden; } .modal3_1_4 #mcon1 .txt_1 .title { width:100%; font-size:20px; font-weight:500; color:#13c0d7; text-align:left; } .modal3_1_4 #mcon1 .txt_1 ul { width:100%; margin-top:5%; overflow:hidden; } .modal3_1_4 #mcon1 .txt_1 ul li.t1 { float:left; width:92px; height:92px; margin-top:12px; font-size:16px; font-weight:500; color:#ffffff; border-radius:100%; background:#16c5d5; text-align:center; line-height:92px; } .modal3_1_4 #mcon1 .txt_1 ul li.t2 { float:left; width:70%; padding-left:4%; font-size:14px; font-weight:500; color:#3f3e3e; } .modal3_1_4 #mcon1 .txt_2 { position:relative; width:90%; margin:0 auto; margin-top:10%; overflow:hidden; } .modal3_1_4 #mcon1 .txt_2 .title { width:100%; font-size:20px; font-weight:500; color:#000; text-align:left; } .modal3_1_4 #mcon1 .txt_2 ul li { float:left; width:50%; height:53px; margin-top:14px; line-height:53px; font-size:12px; font-weight:500; color:#000000; padding-left:64px; box-sizing:border-box; } .modal3_1_4 #mcon1 .txt_2 ul li:nth-child(1) { background:url('/page_KR0/03_sub/images/03img5.png')no-repeat 0 50%; } .modal3_1_4 #mcon1 .txt_2 ul li:nth-child(2) { background:url('/page_KR0/03_sub/images/03img6.png')no-repeat 0 50%; } .modal3_1_4 #mcon1 .txt_2 ul li:nth-child(3) { background:url('/page_KR0/03_sub/images/03img7.png')no-repeat 0 50%; } .modal3_1_4 #mcon1 .txt_2 ul li:nth-child(4) { background:url('/page_KR0/03_sub/images/03img8.png')no-repeat 0 50%; } .modal3_1_4 #mcon1 .txt_2 ul li:nth-child(5) { background:url('/page_KR0/03_sub/images/03img9.png')no-repeat 0 50%; } .modal3_1_4 #mcon2 .txt_3 { position:relative; width:90%; margin:0 auto; padding-top:10%; overflow:hidden; } .modal3_1_4 #mcon2 .txt_3 ul { width:100%; margin-top:5%; overflow:hidden; text-align:center; } .modal3_1_4 #mcon2 .txt_3 ul li.t1 { margin-top:10px; width:300px; height:51px; margin:0 auto; line-height:51px; font-size:18px; font-weight:700; color:#fff; background:#7b7b7b; border-radius:50px; } .modal3_1_4 #mcon2 .txt_3 ul li.t2 { margin-top:10px; font-size:14px; font-weight:400; color:#6c6c6c; } .modal3_1_4 #mcon2 .txt_3 ul:nth-child(2) li.t1 { background:#16c5d5; } .modal3_1_4 #mcon2 .txt_2 { position:relative; width:90%; margin:0 auto; margin-top:10%; overflow:hidden; } .modal3_1_4 #mcon2 .txt_2 .title { width:100%; font-size:20px; font-weight:500; color:#000; text-align:left; } .modal3_1_4 #mcon2 .txt_2 ul li { float:left; width:50%; height:53px; margin-top:14px; line-height:53px; font-size:12px; font-weight:500; color:#000000; padding-left:64px; box-sizing:border-box; } .modal3_1_4 #mcon2 .txt_2 ul li:nth-child(1) { background:url('/page_KR0/03_sub/images/03img12.png')no-repeat 0 50%; } .modal3_1_4 #mcon2 .txt_2 ul li:nth-child(2) { background:url('/page_KR0/03_sub/images/03img13.png')no-repeat 0 50%; } .modal3_1_4 #mcon2 .txt_2 ul li:nth-child(3) { background:url('/page_KR0/03_sub/images/03img14.png')no-repeat 0 50%; } .modal3_1_4 #mcon2 .txt_2 ul li:nth-child(4) { background:url('/page_KR0/03_sub/images/03img15.png')no-repeat 0 50%; } .modal3_1_4 #mcon2 .txt_2 ul li:nth-child(5) { background:url('/page_KR0/03_sub/images/03img16.png')no-repeat 0 50%; } .modal3_1_4 #mcon3 .txt_2 { position:relative; width:90%; margin:0 auto; margin-top:10%; overflow:hidden; } .modal3_1_4 #mcon3 .txt_2 .title { width:100%; font-size:20px; font-weight:500; color:#000; text-align:left; } .modal3_1_4 #mcon3 .txt_2 ul li { float:left; width:50%; height:53px; margin-top:14px; line-height:53px; font-size:12px; font-weight:500; color:#000000; padding-left:64px; box-sizing:border-box; } .modal3_1_4 #mcon3 .txt_2 ul li:nth-child(1) { background:url('/page_KR0/03_sub/images/03img6.png')no-repeat 0 50%; } .modal3_1_4 #mcon3 .txt_2 ul li:nth-child(2) { background:url('/page_KR0/03_sub/images/03img9.png')no-repeat 0 50%; } .modal3_1_4 #mcon3 .txt_2 ul li:nth-child(3) { background:url('/page_KR0/03_sub/images/03img17.png')no-repeat 0 50%; } .modal3_1_4 #mcon3 .txt_2 ul li:nth-child(4) { background:url('/page_KR0/03_sub/images/03img7.png')no-repeat 0 50%; } .modal3_1_4 #mcon3 .txt_4 { position:relative; width:90%; margin:0 auto; padding-top:15%; overflow:hidden; } .modal3_1_4 #mcon3 .txt_4 li.t1 { font-size:24px; font-weight:700; color:#000000; } .modal3_1_4 #mcon3 .txt_4 li.t2 { font-size:16px; font-weight:400; color:#6c6c6c; } .modal3_2_2 { } .modal3_1_2 .txt li.imgtxt3 { margin-top:10%; } .modal3_1_2 .txt li.imgtxt3 ul { display:block; float:left; width:50%; height:470px; padding-top:170px; box-sizing:border-box; } .modal3_1_2 .txt li.imgtxt3 ul li.t1 { font-size:18px; font-weight:700; color:#16c5d5; } .modal3_1_2 .txt li.imgtxt3 ul li.t2 { width:80%; margin-top:10px; font-size:13px; font-weight:400; color:#878787; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(1) { background:url('/page_KR0/03_sub/images/imgtxt1.png')no-repeat 0 0; background-size:160px; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(2) { background:url('/page_KR0/03_sub/images/imgtxt2.png')no-repeat 0 0; background-size:160px; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(3) { background:url('/page_KR0/03_sub/images/imgtxt3.png')no-repeat 0 0; background-size:160px; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(4) { background:url('/page_KR0/03_sub/images/imgtxt4.png')no-repeat 0 0; background-size:160px; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(5) { background:url('/page_KR0/03_sub/images/imgtxt5.png')no-repeat 0 0; background-size:160px; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(6) { background:url('/page_KR0/03_sub/images/imgtxt6.png')no-repeat 0 0; background-size:160px; } .modal3_2_3 { position:relative; width:100%; padding-top:15%; padding-bottom:15%; background:#fff; } .modal3_2_3 .txt_3 { position:relative; width:90%; margin:0 auto; padding-top:10%; overflow:hidden; } .modal3_2_3 .txt_3 ul { width:100%; margin-top:5%; overflow:hidden; text-align:center; } .modal3_2_3 .txt_3 ul li.t1 { margin-top:10px; width:300px; height:51px; margin:0 auto; line-height:51px; font-size:18px; font-weight:700; color:#fff; background:#7b7b7b; border-radius:50px; } .modal3_2_3 .txt_3 ul li.t2 { margin-top:10px; font-size:14px; font-weight:400; color:#6c6c6c; } .modal3_2_3 .txt_3 ul:nth-child(2) li.t1 { background:#16c5d5; } .modal3_2_3 .txt_2 { position:relative; width:90%; margin:0 auto; margin-top:10%; overflow:hidden; } .modal3_2_3 .txt_2 .title { width:100%; font-size:20px; font-weight:500; color:#000; text-align:left; } .modal3_2_3 .txt_2 ul li { float:left; width:50%; height:53px; margin-top:14px; line-height:53px; font-size:12px; font-weight:500; color:#000000; padding-left:64px; box-sizing:border-box; } .modal3_2_3 .txt_2 ul li:nth-child(1) { background:url('/page_KR0/03_sub/images/03img12.png')no-repeat 0 50%; } .modal3_2_3 .txt_2 ul li:nth-child(2) { background:url('/page_KR0/03_sub/images/03img13.png')no-repeat 0 50%; } .modal3_2_3 .txt_2 ul li:nth-child(3) { background:url('/page_KR0/03_sub/images/03img14.png')no-repeat 0 50%; } .modal3_2_3 .txt_2 ul li:nth-child(4) { background:url('/page_KR0/03_sub/images/03img15.png')no-repeat 0 50%; } .modal3_2_3 .txt_2 ul li:nth-child(5) { background:url('/page_KR0/03_sub/images/03img16.png')no-repeat 0 50%; } .modal3_2_4 { position:relative; width:100%; margin:0 auto; overflow:hidden; box-sizing:border-box; background:#fff; } .modal3_2_4 .txt_4 { position:relative; width:90%; margin:0 auto; padding:15% 0; overflow:hidden; } .modal3_2_4 .txt_4 li.t1 { font-size:20px; font-weight:700; color:#000000; } .modal3_2_4 .txt_4 li.t2 { font-size:14px; font-weight:400; color:#6c6c6c; } .modal3_4_2 { position: relative; width: 100%; box-sizing: border-box; background:#fff; } .modal3_4_2 .snowlogo { display:block; position:absolute; top:15%; right:5%; width:40px; height:40px; background:url('/images/main_c/figure.png')no-repeat 50% 50%; background-size:100%; cursor:pointer; z-index:1; animation: rotation 2.4s infinite linear; } .modal3_4_tab1 { position: relative; width: 100%; padding:25% 0 15% 0; } .modal3_4_tab2 { position: relative; width: 100%; padding:15% 0; } .modal3_4_tab3 { position: relative; width: 100%; padding:15% 0; background:#f3f3f3; } .modal_txtbox3 { position:relative; width:90%; margin:0 auto; overflow:hidden; } .modal_txtbox3 p { margin-bottom:10%; } .modal_txtbox3 ul { float:left; width:100%; text-align:left; margin-bottom:10%; padding-left: 34px; box-sizing:border-box; } .modal_txtbox3 ul li.t1 { margin-bottom:20px; font-size:15px; font-weight:400; color:#07c2d3; line-height:100%; } .modal_txtbox3 ul li.t3 { margin-top:10px; font-size:18px; font-weight:500; color:#363636; line-height:100%; } .modal_txtbox4 { position:relative; width:305px; margin:0 auto; overflow:hidden; } .modal_txtbox4 div.imgprocess { position:relative; width:100%; overflow:hidden; } .modal_txtbox4 div.imgprocess ul { margin-top:10%; } .modal_txtbox4 div.imgprocess ul li.pro1 { margin-top:20px; position:relative; width:100%; height:57px; background:#7b7b7b; line-height:56px; font-size:20px; color:#ffffff; font-weight:700; border-radius:50px; box-sizing:border-box; text-align:center; z-index:1; } .modal_txtbox4 div.imgprocess ul li.pro2 { position:relative; margin-top:-30px; width:100%; height:144px; background:#fff; font-size:14px; color:#878787; font-weight:400; box-sizing:border-box; border-radius:30px; border:1px solid #cfcbc4; text-align:center; z-index:0; } .modal_txtbox4 div.imgprocess ul li.pro2 span { display:block; position:absolute; top:55%; left:50%; transform:translate(-50%,-50%); width:90%; } .modal_txtbox4 div.imgprocess ul.imgprocess2 li.pro1,.modal_txtbox4 div.imgprocess ul.imgprocess3 li.pro1 { background:#16c5d5; } .modal3_4_tab4 { position: relative; width:100%; padding:25% 0; background:url('/page_MB0/03_sub/images/modal3_4_tab4.jpg')no-repeat 50% 50%; background-size:cover; box-sizing: border-box; } .modal3_4_tab4 .imgtxt { position:relative; width:90%; padding-left: 34px; margin:0 auto; margin-top:10%; box-sizing:border-box; overflow:hidden; } .modal3_4_tab4 .imgtxt ul { width:100%; margin-bottom:5%; } .modal3_4_tab4 .imgtxt ul li.t1 { font-size:16px; font-weight:500; color:#13c0d7; margin-bottom:10px; } .modal3_4_tab4 .imgtxt ul li.t1 span { color:#fff; } .modal3_4_tab4 .lasttxt { position:relative; width:90%; padding-left: 34px; margin:0 auto; margin-top:10%; box-sizing:border-box; overflow:hidden; font-size:14px; color:#fff; font-weight:400; } .modal3_4_tab4 .lasttxt span { color:#16c5d5; } .modal3_4_1 { position: relative; width:100%; padding:25% 0 0 0; background:#f4f6f7; } .modal3_4_1 .txt { position:relative; width:90%; margin:0 auto; overflow:hidden; } .modal3_4_1 .txt li.t1 { font-size:26px; font-weight:700; color:#000; } .modal3_4_1 .txt li.t2 { font-size:14px; font-weight:400; color:#6c6c6c; } .modal3_4_1 .txt li.t2 span { color:#2f2f2f; } .modal3_4_1 .txt li.itxt1 { clear:both; width:100%; font-size:14px; font-weight:400; color:#6c6c6c; padding-left:70px; background:url('/page_KR0/03_sub/images/itxt1.jpg')no-repeat 0 0%; } .modal3_4_1 .txt li.itxt1 span { font-weight:500; color:#13c0d7; } .modal3_4_1 .txt li.itxt2 { width:100%; font-size:14px; font-weight:400; color:#6c6c6c; padding-left:70px; background:url('/page_KR0/03_sub/images/itxt2.jpg')no-repeat 0 0%; } .modal3_4_1 .txt li.itxt2 span { font-weight:500; color:#13c0d7; } .modal3_4_1 .txt li.itxt3 { width:100%; font-size:14px; font-weight:400; color:#6c6c6c; padding-left:70px; background:url('/page_KR0/03_sub/images/itxt3.jpg')no-repeat 0 0%; } .modal3_4_1 .txt li.itxt3 span { font-weight:500; color:#13c0d7; } .modal3_4 .modal3_4_1 .txt li.t1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal3_4 .modal3_4_1 .txt li.t2 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .modal3_4 .modal3_4_1 .txt li.itxt1 { animation: blurtxt2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .modal3_4 .modal3_4_1 .txt li.itxt2 { animation: blurtxt2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } .modal3_4 .modal3_4_1 .txt li.itxt3 { animation: blurtxt2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.9s; } .img03txt { position:relative; width:100%; margin-top:5%; overflow:hidden; } .img03txt li { float:left; width:50%; margin-top:5%; font-size:15px; font-weight:500; color:#232323; text-align:center; padding-top:106px; } .img03txt li:nth-child(1) { top:60px; left:0px; background:url('/page_KR0/03_sub/images/img03txt1.png')no-repeat 50% 0%; } .img03txt li:nth-child(2) { top:120px; left:300px; background:url('/page_KR0/03_sub/images/img03txt2.png')no-repeat 50% 0%; } .img03txt li:nth-child(3) { top:60px; left:600px; background:url('/page_KR0/03_sub/images/img03txt3.png')no-repeat 50% 0%; } .img03txt li:nth-child(4) { top:120px; left:900px; background:url('/page_KR0/03_sub/images/img03txt4.png')no-repeat 50% 0%; } .modal3_4_tab6 { position: relative; width: 100%; padding:15% 0; } .img03txt2 { position:relative; width:90%; padding-left: 34px; margin:0 auto; margin-top:40px; text-align:center; box-sizing:border-box; } .img03txt2 ul { width:100%;background:#fff; margin-bottom:5%; } .img03txt2 ul li img { width:100%; } .img03txt2 ul li.t1 { width:100%; padding:20px 20px 0 20px; background:#fff; font-size:18px; font-weight:700; color:#13c0d7; text-align:center; box-sizing:border-box; } .img03txt2 ul li.t2 { width:100%; padding:0 20px 20px 20px; background:#fff; font-size:14px; font-weight:400; color:#827d7d; text-align:center; box-sizing:border-box; } .img03txt3 { position:relative; width:90%; padding-left: 34px; margin:0 auto; margin-top:40px; text-align:center; box-sizing:border-box; overflow:hidden; } .img03txt3 li { float:left; width:50%; padding-right:5%; padding-top:150px; font-size:12px; font-weight:400; color:#4e4e4e; text-align:left; box-sizing:border-box; } .img03txt3 li span { font-weight:500; color:#16c5d5; font-size:14px; } .img03txt3 li:nth-child(1) { background:url('/page_KR0/03_sub/images/03img28.png')no-repeat 0 0%; background-size:140px; } .img03txt3 li:nth-child(2) { background:url('/page_KR0/03_sub/images/03img29.png')no-repeat 0 0%; background-size:140px; } .img03txt3 li:nth-child(3) { background:url('/page_KR0/03_sub/images/03img30.png')no-repeat 0 0%; background-size:140px; } .img03txt3 li:nth-child(4) { background:url('/page_KR0/03_sub/images/03img31.png')no-repeat 0 0%; background-size:140px; } #sub03_07 { background:#f5fcfe; background-size: cover; background-attachment: fixed; background-position:50% 50%; } .modal2_2_2 .modalsize { position:relative; width:100%; margin:0 auto; } .modal2_2_2 .modalsize ul { width:90%; margin:0 auto; overflow:hidden; } .modal2_2_2 .modalsize ul li.t1 { width:100%; font-size:26px; font-weight:700; color:#373737; line-height:130%; } .modal2_2_2 .modalsize ul li.t1 span { font-size:14px; font-weight:400; color:#13c0d7; } .modal2_2_2 .modalsize ul li.imgs { width:100%; font-size:14px; font-weight:400; color:#6c6c6c; } .modal2_2_2 .modalsize ul li div.t3 { padding-left:28px; font-size:19px; font-weight:500; color:#000000; } .modal2_4_2 { position:relative; width:100%; padding:20% 0; box-sizing: border-box; } .modal2_4_2 .modalsize { position:relative; width:90%; margin:0 auto; overflow:hidden; } .modal2_4_2 .modalsize ul { position:relative; width:100%; margin-top:5%; } .modal2_4_2 .modalsize ul li { float:left; width:50%; margin-bottom:5%; text-align:center; padding-top:150px; font-size:14px; font-weight:500; color:#16c5d5; vertical-align: top; } .modal2_4_2 .modalsize ul li span { font-size:12px; color:#5a5a5a; } .modal2_4_2 .modalsize ul li span.tt { display: inline-block; width: 80%; min-height: 100px; } .modal2_4_2 .modalsize ul li:nth-child(1) { background:url('/page_KR0/02_sub/images/2ic_01.png')no-repeat 50% 0; } .modal2_4_2 .modalsize ul li:nth-child(2) { background:url('/page_KR0/02_sub/images/2ic_02.png')no-repeat 50% 0; } .modal2_4_2 .modalsize ul li:nth-child(3) { background:url('/page_KR0/02_sub/images/2ic_03.png')no-repeat 50% 0; min-height: 12%;} .modal2_4_2 .modalsize ul li:nth-child(4) { background:url('/page_KR0/02_sub/images/2ic_04.png')no-repeat 50% 0; min-height: 12%;} .modal2_4_2 .modalsize ul li:nth-child(5) { margin-right:0px; background:url('/page_KR0/02_sub/images/2ic_05.png')no-repeat 50% 0; } .modal2_4_2 .modalsize2 { position:relative; width:90%; margin:0 auto; margin-top:15%; overflow:hidden; } .modal2_4_2 .modalsize2 ul { position:relative; width:100%; margin-top:10%; } .modal2_4_2 .modalsize2 ul li { width:100%; margin-bottom:20px; box-sizing:border-box; padding-left:100px; font-size:12px; font-weight:400; color:#626262; } .modal2_4_2 .modalsize2 ul li span { font-size:16px; font-weight:700; color:#000000; } .modal2_4_2 .modalsize2 ul li:nth-child(1) { background:url('/page_KR0/02_sub/images/02ic_01.png')no-repeat 0 0; } .modal2_4_2 .modalsize2 ul li:nth-child(2) { background:url('/page_KR0/02_sub/images/02ic_02.png')no-repeat 0 0; } .modal2_4_2 .modalsize2 ul li:nth-child(3) { background:url('/page_KR0/02_sub/images/02ic_03.png')no-repeat 0 0; } .modal2_4_2 .modalsize2 ul li:nth-child(4) { background:url('/page_KR0/02_sub/images/02ic_04.png')no-repeat 0 0; } .modal2_4_3 { position:relative; width:100%; padding:20% 0; background:url('/page_MB0/04_sub/images/modal2_4_3.jpg')no-repeat 0 0; background-size:cover; } .modal2_4_3 ul.txt { position:relative; width:90%; margin:0 auto; } .modal2_4_3 ul.txt li.t1 { font-size:14px; font-weight:400; color:#6c6c6c; line-height:170%; } .modal2_4_3 ul.txt2 { position:relative; width:90%; margin:0 auto; margin-top:10%; overflow:hidden; } .modal2_4_3 ul.txt2 li { float:left; width:50%; padding-top:110px; margin-bottom:5%; text-align:center; font-size:15px; font-weight:500; color:#232323; } .modal2_4_3 ul.txt2 li.t2 { background:url('/page_KR0/02_sub/images/2_4img10.png')no-repeat 50% 0; } .modal2_4_3 ul.txt2 li.t3 { background:url('/page_KR0/02_sub/images/2_4img11.png')no-repeat 50% 0; } .modal2_4_3 ul.txt2 li.t4 { background:url('/page_KR0/02_sub/images/2_4img12.png')no-repeat 50% 0; } .modal2_4_3 ul.txt2 li.t5 { background:url('/page_KR0/02_sub/images/2_4img13.png')no-repeat 50% 0; } .modal2_4_3 ul.txt2 li.t6 { background:url('/page_KR0/02_sub/images/2_4img14.png')no-repeat 50% 0; } .modal2_4_5 { position: relative; width:100%; margin:0 auto; padding:45% 0 15% 0; background:#fff; } .modal2_4_5 .modalsize { position:relative; width:90%; margin:0 auto; padding-top:5%; } .modal2_4_5 .modalsize ul { width:100%; overflow:hidden; } .modal2_4_5 .modalsize ul li.imgs { width:280px; margin:0 auto; font-size:19px; font-weight:400; color:#6c6c6c; } .modal2_4_5 .modalsize ul li.t1 { width:100%; margin-top:5%; font-size:22px; font-weight:700; color:#373737; line-height:130%; box-sizing:border-box; } .modal2_4_5 .modalsize ul li.t1 span { font-size:16px; font-weight:500; color:#13c0d7; line-height:100%; } .modal2_4_5 .modalsize ul li div.t3 { font-size:14px; font-weight:500; color:#000000; } .modal2_4_5 .snowlogo { top: 22%; } .modal2_4_5 .modalsize3 { position:relative; width:90%; margin:0 auto; padding-top:5%; overflow:hidden; } .modal2_4_5 .modalsize3 ul { width:100%; text-align:left; box-sizing:border-box; } .modal2_4_5 .modalsize3 ul li { margin-left:34px; font-size:14px; font-weight:400; color:#6c6c6c; line-height:180%; } .modal2_4_5 .modalsize2 { position:relative; width:90%; margin:0 auto; padding-top:15%; overflow:hidden; } .modal2_4_5 .modalsize2 ul { width:100%; text-align:left; box-sizing:border-box; margin-top:5%; } .modal2_4_5 .modalsize2 ul li { float:left; width:50%; text-align:center; padding-top:154px; margin-bottom:5%; font-size:16px; font-weight:500; color:#16c5d5; } .modal2_4_5 .modalsize2 ul li span { font-size:13px; color:#5a5a5a; } .modal2_4_5 .modalsize2 ul li:nth-child(1) { background:url('/page_KR0/02_sub/images/2_4img16.png')no-repeat 50% 0; } .modal2_4_5 .modalsize2 ul li:nth-child(2) { background:url('/page_KR0/02_sub/images/2_4img3.png')no-repeat 50% 0; } .modal2_4_5 .modalsize2 ul li:nth-child(3) { background:url('/page_KR0/02_sub/images/2_4img4.png')no-repeat 50% 0; } .modal2_4_5 .modalsize2 ul li:nth-child(4) { background:url('/page_KR0/02_sub/images/2_4img5.png')no-repeat 50% 0; } .modal2_4_5 .modalsize2 ul li:nth-child(5) { background:url('/page_KR0/02_sub/images/2_4img33.png')no-repeat 50% 0; } .modal2_4_6 { position: relative; width:100%; margin:0 auto; padding:20% 0; background:#fff; } .modal2_4_6 .modalsize2 { position:relative; width:90%; margin:0 auto; padding-top:5%; } .modal2_4_6 .modalsize2 ul { width:100%; overflow:hidden; margin-top:5%; } .modal2_4_6 .modalsize2 ul li { width:100%;margin-bottom:5%; box-sizing:border-box; padding-left:80px; font-size:14px; font-weight:400; color:#626262; } .modal2_4_6 .modalsize2 ul li span { font-size:18px; font-weight:700; color:#13c0d7; } .modal2_4_6 .modalsize2 ul li:nth-child(1) { background:url('/page_KR0/02_sub/images/2_4img17.png')no-repeat 0 0; } .modal2_4_6 .modalsize2 ul li:nth-child(2) { background:url('/page_KR0/02_sub/images/2_4img18.png')no-repeat 0 0; } .modal2_4_6 .modalsize2 ul li:nth-child(3) { background:url('/page_KR0/02_sub/images/2_4img19.png')no-repeat 0 0; } .modal2_4_6 .modalsize2 ul li:nth-child(4) { background:url('/page_KR0/02_sub/images/2_4img20.png')no-repeat 0 0; } .modal2_4_6 .modalsize2 ul li:nth-child(5) { background:url('/page_KR0/02_sub/images/2_4img21.png')no-repeat 0 0; } .modal2_4_6 .modalsize2 ul li:nth-child(6) { background:url('/page_KR0/02_sub/images/2_4img22.png')no-repeat 0 0; } .modal2_4_6 .modalsize2 ul li:nth-child(7) { background:url('/page_KR0/02_sub/images/2_4img23.png')no-repeat 0 0; } .modal2_4_7 { position: relative; width:100%; margin:0 auto; padding:20% 0; } .modal2_4_7 .modalsize2 { position:relative; width:90%; margin:0 auto; padding-top:5%; } .modal2_4_7 .modalsize2 ul { width:100%; overflow:hidden; margin-top:8%; } .modal2_4_7 .modalsize2 ul li { width:90%; height:90px; margin-bottom:20px; box-sizing:border-box; padding-left:110px; padding-top:10px; font-size:15px; font-weight:400; color:#4b4b4b; } .modal2_4_7 .modalsize2 ul li:nth-child(1) { background:url('/page_KR0/02_sub/images/2-4img01.jpg')no-repeat 0 0; } .modal2_4_7 .modalsize2 ul li:nth-child(2) { background:url('/page_KR0/02_sub/images/2-4img02.jpg')no-repeat 0 0; } .modal2_4_7 .modalsize2 ul li:nth-child(3) { background:url('/page_KR0/02_sub/images/2-4img03.jpg')no-repeat 0 0; } .modal2_4_7 .modalsize2 ul li:nth-child(4) { background:url('/page_KR0/02_sub/images/2-4img04.jpg')no-repeat 0 0; } .modal2_4_7 .modalsize2 ul li:nth-child(5) { background:url('/page_KR0/02_sub/images/2-4img05.jpg')no-repeat 0 0; } .modal2_4_7 .modalsize2 ul li:nth-child(6) { background:url('/page_KR0/02_sub/images/2-4img06.jpg')no-repeat 0 0; } .modal2_4_7 .modalsize2 ul li:nth-child(7) { background:url('/page_KR0/02_sub/images/2-4img07.jpg')no-repeat 0 0; } .modal2_4_7 .modalsize2 ul li:nth-child(8) { background:url('/page_KR0/02_sub/images/2-4img08.jpg')no-repeat 0 0; } .modal2_4_7 .modalsize2 ul li:nth-child(9) { background:url('/page_KR0/02_sub/images/2_4img32.png')no-repeat 0 0; } .sub04_c2_1 { position: relative; width:100%; height:740px; padding:20% 0 0 0; box-sizing:border-box; } .sub04_c2 .sub04_c2_1 .bluebg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.2s; } .sub04_c2 .sub04_c2_1 .bluebg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.3s; } .sub04_c2 .sub04_c2_1 .bluebg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .sub04_c2_1 .subtxt2 { position:relative; width:90%; margin:0 auto; } .sub04_c2_1 .subtxt2 li.t1 { font-size:14px; font-weight:400; color:#2f2f2f; line-height:140%; } .sub04_c2_1 .subtxt2 li.t2 { margin-top:10px; font-size:22px; font-weight:700; color:#16c5d5; line-height:1; } .sub04_c2_1 .subtxt2 li.t3 { margin-top:10px; font-size:14px; font-weight:400; color:#6c6c6c; line-height:140%; } .sub04_c2 .sub04_c2_1 .subtxt2 li.t1 { animation: fadeup 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .sub04_c2 .sub04_c2_1 .subtxt2 li.t2 { animation: fadeup 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .sub04_c2 .sub04_c2_1 .subtxt2 li.t3 { animation: fadeup 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .circleboxc2_1 { top:40%; left:24%; width:170px; height:170px; } .circleboxc2_2 { top:43%; left:73%; width:100px; height:100px; } .circleboxc2_3 { top:54%; left:43%; width:93px; height:93px; } .circleboxc2_4 { top:64%; left:66%; width:126px; height:126px; } .circleboxc2_5 { top:49%; left:65%; width:70px; height:70px; } .circleboxc2_6 { top:73%; left:23%; width:60px; height:60px; } .sub04_c2 .sub04_c2_1 .circleboxc2_1 { animation: fadeleft2 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.0s; } .sub04_c2 .sub04_c2_1 .circleboxc2_2 { animation: fadeleft2 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.4s; } .sub04_c2 .sub04_c2_1 .circleboxc2_3 { animation: fadeleft2 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.6s; } .sub04_c2 .sub04_c2_1 .circleboxc2_4 { animation: fadeleft2 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.8s; } .sub04_c2 .sub04_c2_1 .circleboxc2_5 { animation: fadeleft2 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } .sub04_c2 .sub04_c2_1 .circleboxc2_6 { animation: fadeleft2 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 2.9s; } .sub04_c2_2 { position:relative; width:100%; padding:180px 0 10% 0; box-sizing:border-box; } .sub04_c3_1 { position:relative; width:100%; padding:25% 0 15% 0; } .c3txt { position:relative; width:90%; margin:0 auto; } .c3txt li.txt1 { font-size:28px; font-weight:700; color:#16c5d5; line-height:130%; } .c3txt li.txt2 { margin-top:20px; font-size:16px; font-weight:500; color:#6c6c6c; line-height:170%; } .sub04_c3 .c3txt li.txt1 { animation: fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .sub04_c3 .c3txt li.txt2 { animation: fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .sub04_c3_2 { position:relative; width:100%; padding:28% 0 15% 0; box-sizing:border-box; background:#fff; } .c3_2_line { position:relative; width:90%; margin:0 auto; } .c3_2_line ul { position:relative; width:100%; min-height:100px; margin-top:10%; overflow:hidden; } .c3_2_line ul li.imgs { position:absolute; top:0px; left:0px; width:100px; height:100px; } .c3_2_line ul li.title { position:relative; width:100%; padding-left:110px; box-sizing:border-box; } .c3_2_line ul li.title span.t1 { display:block; width:100%; font-size:16px; font-weight:500; color:#3f3e3e; } .c3_2_line ul li.title span.t2 { display:block; padding-top:6px; width:100%; font-size:14px; font-weight:400; color:#6c6c6c; } .c3_2_line2 { position:relative; width:90%; margin:0 auto; } .c3_2_line2 ul { position:relative; width:100%; min-height:120px; margin-top:10%; overflow:hidden; } .c3_2_line2 ul li.imgs { position:absolute; top:0px; left:0px; width:120px; height:120px; } .c3_2_line2 ul li.txt { width:100%; padding-left:130px; box-sizing:border-box; padding-top:20px; } .c3_2_line2 ul li.txt span.t1 { display:block; font-size:18px; font-weight:700; color:#323131; } .c3_2_line2 ul li.txt span.t2 { padding-top:10px; display:block; font-size:14px; font-weight:500; color:#878787; line-height:150%; } .pro_end { position:relative; width:100%; margin-top:15%; overflow:hidden; } .pro_end .pro_1 { width:100%; margin-top:10%; } .pro_end .pro_2 { width:100%; margin-top:5%; } .pro_end .pro_3 { width:100%; margin-top:5%; } .pro_end span.title { display:block; font-size:16px; font-weight:500; color:#474747; } .pro_end span.con { display:block; padding-top:10px; font-size:13px; font-weight:400; color:#8b8b8b; } .m_bg3 { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/04_sub/images/c3_2_line3.jpg')no-repeat 54% 0; background-size:cover; } .c3_2_line3 { position:relative; width:90%; margin:0 auto; margin-top:10%; } .c3_2_line3 ul li.modaltitle { line-height:130%; } .c3_2_line3 ul li.contxt { padding-left: 34px; font-size:14px; font-weight:400; color:#6c6c6c; line-height:170%; margin-top:24px; } .modal_con1 { position:relative; width:100%; padding:35% 0; background:url('/page_MB0/05_sub/images/05bg1.jpg')no-repeat 50% 0; background-size:cover; } .modal_con1 .subtxt2 { position:relative; width:90%; margin:0 auto; } .modal_con1 .subtxt2 li.t1 { font-size:26px; font-weight:700; color:#000; line-height:130%; } .modal_con1 .subtxt2 li.t2 { font-size:14px; font-weight:400; color:#6c6c6c; line-height:170%; } .modal_con1 .subtxt2 li.t1 span { color:#13c0d7; } .modal5_1 .modal_con1 .subtxt2 li.t1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal5_1 .modal_con1 .subtxt2 li.t2 { animation: blurtxt 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .modal_con2 { position:relative; width:100%; padding:25% 0; } .modal_con2 .bodalbox { position:relative; width:94%; margin:0 auto; overflow:hidden; } .modal_con2 .bodalbox ul { float:left; width:46%; margin:2%; } .modal_con2 .bodalbox ul li.txt { width:100%; text-align:center; padding:16px 0; background:#f1f1f1; } .modal_con2 .bodalbox ul li.txt span.t1 { display:block; font-size:16px; font-weight:700; color:#323131; } .modal_con2 .bodalbox ul li.txt span.t2 { margin-top:6px; display:block; font-size:12px; font-weight:400; color:#6c6c6c; } .modal_con2 .snowlogo { top:15%; right:10%; } .modal_con2 div.modalcon { width:90%; margin:0 auto; margin-top:5%; font-size:14px; font-weight:400; color:#6c6c6c; box-sizing:border-box; } .modal_con3 { position:relative; width:100%; padding:15% 5%; box-sizing:border-box; } .modal_con3 div.modaltitle { font-size:15px; } .modal_con3 .bodalbox { position:relative; width:100%; margin-top:10px; overflow:hidden; } .modal_con3 .bodalbox ul { width:80%; margin:0 auto; margin-top:5%; } .modal_con3 .bodalbox ul li.txt { margin-top:20px; width:100%; font-size:14px; font-weight:500; color:#000000; line-height:170%; } .sub05_modal2 { position:relative; width:100%; height:740px; background-image: url(/page_MB0/05_sub/images/sub05_modal2.jpg);} .modal5_2 .sub05_modal2 .graybg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.1s; } .modal5_2 .sub05_modal2 .graybg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; } .modal5_2 .sub05_modal2 .graybg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; } .sub05_modal2_1 { position:absolute; top:46%; left:50%; transform: translate(-50%,-50%); width:100%; text-align:center; } .sub05_modal2_1 div.title { font-size:26px; font-weight:700; color:#646464; line-height:130%; } .sub05_modal2_1 div.title span { color:#16c5d5; } .sub05_modal2_1 .contxt { position:relative; width:90%; margin:0 auto; margin-top:40px; } .sub05_modal2_1 .contxt li.txtbg { width:290px; height:290px; background:#fff; margin:0 auto; border-radius:100%; } .sub05_modal2_1 .contxt li.contxtimg { position:absolute; top:36%; left:50%;transform: translate(-50%,-50%); width:100%; margin:0 auto; } .sub05_modal2_1 .contxt li.contxtimg span.imgs1 { position:absolute; top:0%; left:0; } .sub05_modal2_1 .contxt li.contxtimg span.imgs2 { position:absolute; top:0; left:0; width:100%; overflow:hidden; } .sub05_modal2_1 .contxt li.contxtcon { position:absolute; top:62%; left:0%; width:100%; text-align:center; font-size:14px; font-weight:500; color:#2f2f2f; } .modal5_2 .sub05_modal2_1 div.title { animation: blurtxt 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .modal5_2 .sub05_modal2_1 .contxt { animation: blurtxt2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal5_2 .sub05_modal2_1 .contxt li.contxtimg span.imgs1 { animation: fadeup3 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .modal5_2 .sub05_modal2_1 .contxt li.contxtimg span.imgs2 { animation: blurtxt 1.5s cubic-bezier(0.22, 1, 0.36, 1) both 2.0s; } .modal5_2 .sub05_modal2_1 .contxt li.contxtcon { animation: fadeup3 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 2.5s; } .sub05_modal2_2 { position:relative; width:100%; height:740px; background:url('/page_KR0/05_sub/images/sub05_modal2_2.jpg')no-repeat 50% 0; background-size:cover; } .sub05_modal2_2 div.txt { position:absolute; bottom:10%; left:10%; width:80%; height:330px; padding:10% 5%; background:rgba(255,255,255,0.7); font-size:14px; font-weight:500; color:#4d4d4d; line-height:180%; box-sizing:border-box; } .sub05_modal2_2 div.txt span { color:#04b9c9; } .sub05_modal2_2_2 { position:relative; width:100%; height:700px; padding:15% 0; background:#f3f3f3 url('/page_KR0/05_sub/images/sub05_modal2_4.jpg')no-repeat 90% bottom; background-size: 800px; } .sub05_modal2_2_2 div.txt { position:relative; width:90%; margin:0 auto; } .sub05_modal2_2_2 div.txt ul li.t1 { padding-top:20px; font-size:26px; font-weight:700; color:#16c5d5; } .sub05_modal2_2_2 div.txt ul li.t2 { padding-top:30px; font-size:14px; font-weight:400; color:#4d4d4d; } .sub05_modal2_3 { position:relative; width:100%; padding:25% 0; background:#fff; } .sub05_modal2_3bg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/05_sub/images/sub05_modal2_3bg.jpg')no-repeat 50% 0; background-size:cover; } .sub05_modal2_4 { position:relative; width:90%; margin:0 auto; padding-bottom:20%; } .sub05_modal2_4 div.title { font-size:14px; font-weight:500; color:#6c6c6c; line-height:180%; } .sub05_modal2_4 div.title span { color:#04b9c9; } .sub05_modal2_5 { position:relative; width:100%; padding:40px 0; background:#f0f0f0; } .bna05 { position:relative; width:100%; margin:0 auto; margin-top:20px; } .bna05 li { width:100%; margin-bottom:5%; } .bna052 { position:relative; width:100%; margin:0 auto; margin-top:20px; overflow:hidden; } .bna052 li { float:left; width:50%; } .sub05_modal_tab { position:relative; width:90%; margin:0 auto; padding-top:30px; overflow:hidden; box-sizing:border-box; } .sub05_modal_tab .modaltab4 { width:100%; overflow:hidden; } .sub05_modal_tab .modaltab4 ul li { float:left; width:33.3333%; padding-top:82px; cursor:pointer; box-sizing:border-box; text-align:center; } .sub05_modal_tab .modaltab4 ul li span { color:#373737; font-size:14px; font-weight:500; } .sub05_modal_tab .modaltab4 ul li.active,.modaltab4 ul li:hover { background:#16c5d5; color:#fff; } .sub05_modal_tab .modaltab4 ul li.mtab1 { background:url('/page_KR0/05_sub/images/micontxt1.png')no-repeat 50% 0%; } .sub05_modal_tab .modaltab4 ul li.mtab2 { background:url('/page_KR0/05_sub/images/micontxt2.png')no-repeat 50% 0%; } .sub05_modal_tab .modaltab4 ul li.mtab3 { background:url('/page_KR0/05_sub/images/micontxt3.png')no-repeat 50% 0%; } .sub05_modal_tab .modaltab4 ul li.active.mtab1,.sub05_modal_tab .modaltab4 ul li.mtab1:hover { background:url('/page_KR0/05_sub/images/micontxt1_on.png')no-repeat 50% 0%; } .sub05_modal_tab .modaltab4 ul li.active.mtab2,.sub05_modal_tab .modaltab4 ul li.mtab2:hover { background:url('/page_KR0/05_sub/images/micontxt2_on.png')no-repeat 50% 0%; } .sub05_modal_tab .modaltab4 ul li.active.mtab3,.sub05_modal_tab .modaltab4 ul li.mtab3:hover { background:url('/page_KR0/05_sub/images/micontxt3_on.png')no-repeat 50% 0%; } .modal_tab_con { position:relative; width:100%; margin-top:5%; } .modal_tab_con div.icontitle2 { font-size:16px; font-weight:400; color:#6c6c6c; line-height:150%; } .modal_tab_con div.icontitle2 span { font-weight:500; color:#000; } .modal_tab_con ul.icontxt { width:100%; margin-top:20px; } .modal_tab_con ul.icontxt li { width:100%; height:52px; padding-left:68px; margin-bottom:5%; font-size:15px; font-weight:500; color:#000000; box-sizing:border-box; } .modal_tab_con ul.icontxt li span { color:#13c0d7; } .modal_tab_con ul.icontxt li.icontxt1 { background:url('/page_KR0/05_sub/images/m_txticon1.png')no-repeat 0 50%; } .modal_tab_con ul.icontxt li.icontxt2 { background:url('/page_KR0/05_sub/images/m_txticon1.png')no-repeat 0 50%; } .modal_tab_con ul.icontxt li.icontxt3 { background:url('/page_KR0/05_sub/images/m_txticon1.png')no-repeat 0 50%; } .sub05_modal2_4bg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:#f6f6f6 url('/page_KR0/05_sub/images/sub05_modal2_4bg.jpg')no-repeat 66% bottom; background-size: 800px; } .modalcon2 { font-size:16px; font-weight:400; color:#2b2b2b; line-height:170%; } .modalcon3 { font-size:16px; font-weight:400; color:#6c6c6c; line-height:170%; } .modalcon3 span { color:#13c0d7; } .modal5_3 .modaltab2 { top:90px; } .modal5_3_1 { position:relative; width:100%; height:700px; padding:45% 0 25% 0; background:#f2f2f2 url('/page_MB0/05_sub/images/05bg2.jpg')no-repeat 50% bottom; background-size:100%; } .modal5_3_1con { position:relative; width:90%; margin:0 auto; } .modal5_3_1con div.title { font-size:15px; font-weight:500; color:#6c6c6c; line-height:180%; } .modal5_3_1con div.title2 { width:100%; font-size:14px; font-weight:400; color:#000000; line-height:180%; } .modal5_3_1con div.title2 span { color:#07c2d3; } .modal5_3icon li { float:left; width:50%; padding-top:110px; margin-top:5%; font-size:15px; font-weight:500; color:#232323; text-align:center; } .modal5_3icon li.icon5_3_1 { background:url('/page_KR0/05_sub/images/icon5_3_1.png')no-repeat 50% 0; } .modal5_3icon li.icon5_3_2 { background:url('/page_KR0/05_sub/images/icon5_3_2.png')no-repeat 50% 0; } .modal5_3icon li.icon5_3_3 { background:url('/page_KR0/05_sub/images/icon5_3_3.png')no-repeat 50% 0; } .modal5_3icon li.icon5_3_4 { background:url('/page_KR0/05_sub/images/icon5_3_4.png')no-repeat 50% 0; } .modal5_3 .modal5_3_1con div.title { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal5_3 .modal5_3_1con div.title2 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .modal5_3 .modal5_3icon { animation: blurtxt2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.9s; } .modal5_3_2con { position:relative; width:100%; padding:45% 0 25% 0; background:#f2f2f2 url('/page_MB0/05_sub/images/05bg2.jpg')no-repeat 50% bottom; background-size:100%; } .modal5_3_2con div.title { width:90%; margin:0 auto; font-size:15px; font-weight:500; color:#6c6c6c; line-height:180%; } .modal5_3_2con div.title span { color:#07c2d3; } .modal5_3icon2 { position:relative; width:90%; margin:0 auto; margin-top:5%; } .modal5_3icon2 li { position:relative; width:100%; height:92px; padding-left:88px; margin-bottom:15px; font-size:13px; color::#3f3e3e; font-weight:500; padding-top:5px; box-sizing:border-box; } .modal5_3icon2 li span { display:block; position:absolute; top:0px; right:0px; width:70px; height:70px; line-height:70px; text-align:center; border-radius:100%; background:#16c5d5; color:#ffffff; font-weight:700; } .modal5_3icon2 li.icon5_4_1 {background:url('/page_KR0/05_sub/images/icon5_4_1.png')no-repeat 0 0; } .modal5_3icon2 li.icon5_4_2 {background:url('/page_KR0/05_sub/images/icon5_4_2.png')no-repeat 0 0; } .modal5_3icon2 li.icon5_4_3 {background:url('/page_KR0/05_sub/images/icon5_4_3.png')no-repeat 0 0; } .modal5_3_2con2 { position:relative; width:100%; padding:45% 0 25% 0; } .modal5_3_2con2 div.title { width:90%; margin:0 auto; font-size:15px; font-weight:400; color:#6c6c6c; line-height:150%; } .modal5_3_2con2 div.title span { color:#07c2d3; } .imgtxt1 { position:relative; width:90%; margin:0 auto; margin-top:10%; overflow:hidden; } .imgtxt1 ul li.t1 { font-size:18px; font-weight:700; color:#323131; } .imgtxt1 ul li.t2 { padding-top:10px; font-size:14px; font-weight:300; color:#878787; line-height:160%; } .imgtxt1 ul.imgtxt1_1 { width:100%; padding-left:125px; margin-bottom:8%; background:url('/page_KR0/05_sub/images/imgtxt1_1.png')no-repeat 0 0; background-size: 110px; box-sizing:border-box; } .imgtxt1 ul.imgtxt1_2 { width:100%; padding-left:125px; margin-bottom:8%; background:url('/page_KR0/05_sub/images/imgtxt1_2.png')no-repeat 0 0; background-size: 110px; box-sizing:border-box; } .imgtxt1 ul.imgtxt1_3 { width:100%; padding-left:125px; background:url('/page_KR0/05_sub/images/imgtxt1_3.png')no-repeat 0 0; background-size: 110px; box-sizing:border-box; } .imgtxt2 { position:relative; width:90%; margin:0 auto; margin-top:10%; overflow:hidden; } .imgtxt2 ul li.t1 { font-size:18px; font-weight:700; color:#3f3e3e; } .imgtxt2 ul li.t2 { padding-top:10px; font-size:14px; font-weight:400; color:#6c6c6c; line-height:160%; } .imgtxt2 ul { width:100%; margin-bottom:5%; padding-left:114px; box-sizing:border-box; } .imgtxt2 ul.imgtxt2_1 { background:url('/page_KR0/05_sub/images/imgtxt2_1.png')no-repeat 0 0; background-size:100px; } .imgtxt2 ul.imgtxt2_2 { background:url('/page_KR0/05_sub/images/imgtxt2_2.png')no-repeat 0 0; background-size:100px; } .imgtxt2 ul.imgtxt2_3 { background:url('/page_KR0/05_sub/images/imgtxt2_3.png')no-repeat 0 0; background-size:100px; } .modal6_1_1 { position:relative; width:100%; padding:25% 0 15% 0; margin:0 auto; overflow:hidden; } .modal6_1_1 video { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; height: 100%; width: auto; } .modalbg6_1 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:rgba(243,243,243,0.8); box-sizing:border-box; } .modalbg6_1 li:nth-child(2) { position:absolute; bottom:0px; left:33%; width:33%; height:100%;background:rgba(243,243,243,0.8); box-sizing:border-box; } .modalbg6_1 li:nth-child(3) { position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:rgba(243,243,243,0.8); box-sizing:border-box; } .modal6_1 .modalbg6_1 li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .modal6_1 .modalbg6_1 li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal6_1 .modalbg6_1 li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal6_1con { position:relative; width:90%; margin:0 auto; } .modal6_1con ul { width:100%; overflow:hidden; margin-bottom:5%; } .modal6_1con ul li.t1 { width:100%; font-size:24px; font-weight:700; color:#373737; } .modal6_1con ul li.t2 { width:100%; margin-top:3%; font-size:14px; font-weight:400; color:#6c6c6c; line-height:170%; } .modal6_1con ul li.t2 span { display:block; width:100%; margin-bottom:10px; color:#17c5da; font-weight:500; } .modal6_1 .modal6_1con ul li.t1 { animation: blurtxt 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .modal6_1 .modal6_1con ul li.t2 { animation: blurtxt 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .modal6_1_2 { position:relative; width:100%; padding:25% 0 15% 0; } .modal6_1_2 .subsize { position:relative; width:90%; margin:0 auto; } .modal6_1_2 .imgtxt { position:relative; width:100%; margin:0 auto; overflow:hidden; } .modal6_1_2 .imgtxt li { float:left; width:50%; margin-top:5%; text-align:center; padding-top:140px; font-size:14px; font-weight:700; color:#323131; } .modal6_1_2 .imgtxt li:nth-child(1) { background:url('/page_KR0/06_sub/images/imgtxtbg1.png')no-repeat 50% 0; background-size: 140px; } .modal6_1_2 .imgtxt li:nth-child(2) { background:url('/page_KR0/06_sub/images/imgtxtbg2.png')no-repeat 50% 0; background-size: 140px; } .modal6_1_2 .imgtxt li:nth-child(3) { background:url('/page_KR0/06_sub/images/imgtxtbg3.png')no-repeat 50% 0; background-size: 140px; } .modal6_1_2 .imgtxt li:nth-child(4) { background:url('/page_KR0/06_sub/images/imgtxtbg4.png')no-repeat 50% 0; background-size: 140px; } .modal6_1_2 div.txt2 { width:100%; padding-top:40px; font-size:15px; font-weight:500; color:#000; text-align:center; } .modal6_1_3 { position:relative; width:100%; padding:25% 0 25% 0; background:url('/page_MB0/06_sub/images/06bg2.jpg')no-repeat 0 0; background-size:cover; } .modal6_1_3 ul { position:relative; width:90%; margin:0 auto; } .modal6_1_3 ul li.t1 { font-size:26px; font-weight:700; color:#ffffff; } .modal6_1_3 ul li.t2 { width:100%; margin-top:5%; overflow:hidden; font-size:14px; font-weight:300; color:#fff; line-height:160%; } .modal6_1_3 ul li.t2 div { width:100%; margin-bottom:20px; } .eyes_process { position:relative; width:90%; margin:0 auto; } .eyes_process .ep_bt { position:relative; width:100%; overflow:hidden; margin-top:5%; } .eyes_process .ep_bt li { float:left; width:50%; height:35px; line-height:35px; margin-bottom:12px; font-size:13px; font-weight:500; color:#2e3432; cursor:pointer; } .eyes_process .ep_bt li span { display:inline-block; width:35px; height:35px; margin-right:14px; text-align:center; color:#fff; border-radius:100%; background:#d0cfcf; } .eyes_process .ep_bt li.on span { background:#13c0d7; } .ep_slide { position:relative; width:100%; overflow:hidden; margin-top:5%; } .ep_slide ul li.imgs { width:100%; } .ep_slide ul li.txt { width:100%; height:100px; text-align:center; background:#efefef; line-height:100px; font-size:16px; font-weight:700; color:#3e3e3e; } .modal6_2_1 { position:relative; width:100%; padding:25% 0 25% 0; background:url('/page_MB0/06_sub/images/06bg3.jpg')no-repeat 50% 0; background-size:cover; } .modal6_2 .modal6_1con ul:nth-child(1) { animation: blurtxt 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal6_2 .modal6_1con ul:nth-child(2) { animation: blurtxt 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .modal6_2_2 { position:relative; width:100%; padding:25% 0; } .modal6_2_2 .imgtxt { position:relative; width:90%; margin:0 auto; } .modal6_2_2 .imgtxt ul { width:100%; margin-top:10%; } .modal6_2_2 .imgtxt ul li.imgs { width:172px; height:172px; margin:0 auto; } .modal6_2_2 .imgtxt ul li.txt { width:100%; text-align:center } .modal6_2_2 .imgtxt ul li.txt span.t1 { padding-top:8px; display:block; width:100%; font-size:20px; font-weight:700; color:#13c0d7; } .modal6_2_2 .imgtxt ul li.txt span.t2 { padding-top:8px; width:100%; font-size:16px; font-weight:500; color:#4e4e4e; } .modal6_2_2 .imgtxt ul li.txt span.t3 { padding-top:6px; display:block; width:100%; font-size:14px; font-weight:400; color:#8b8b8b; } .method6_2 { position:relative; width:90%; margin:0 auto; margin-top:10%; } .method6_2 ul { width:100%; margin-top:5%; } .method6_2 ul li.txt { width:100%; background:#f3f3f3; padding:20px 0; text-align:center; } .method6_2 ul li.txt span.t1 { display:block; font-size:18px; font-weight:700; color:#13c0d7; } .method6_2 ul li.txt span.t2 { display:block; font-size:14px; font-weight:400; color:#939393; } .modal6_2_2 .title { position:relative; width:90%; margin:0 auto; } .modal6_2_3 { position:relative; width:100%; padding:25% 0; } .modal6_2_3 .imgtxt { position:relative; width:90%; margin:0 auto; overflow:hidden; } .modal6_2_3 .imgtxt ul li.txt { width:100%; } .modal6_2_3 .imgtxt ul li.txt span.t1 { display:block; width:100%; font-size:28px; font-weight:700; color:#000000; } .modal6_2_3 .imgtxt ul li.txt span.t2 { display:block; width:100%; font-size:14px; font-weight:400; color:#6c6c6c; line-height: } .modal6_2_3 .imgtxt ul li.imgs { width:100%; margin-top:5%; } .modal6_2_3 .imgtxt ul li.imgs div { float:left; width:46%; margin:2%; font-size:15px; font-weight:500; color:#000; text-align:center; } .modal6_2_3_2 { background:url('/page_MB0/06_sub/images/06bg6.jpg')no-repeat 0 0; background-size: cover; padding: 25% 0;} .modal6_2_3_2 .icontxt { position:relative; width:90%; margin:0 auto; padding-top:10%; } .modal6_2_3_2 .title { width:100%; font-size:28px; font-weight:700; color:#fff; margin-bottom:5%; } .modal6_2_3_2 .icontxt ul { position:relative; width:100%; } .modal6_2_3_2 .icontxt ul li { width:100%; min-height:66px; margin-bottom:30px; box-sizing:border-box; padding-left:82px; } .modal6_2_3_2 .icontxt ul li span.img1 { display:block; font-size:16px; font-weight:700; color:#fff; } .modal6_2_3_2 .icontxt ul li span.img2 { display:block; font-size:14px; font-weight:400; color:#fff; } .modal6_2_3_2 .icontxt ul li.it_01 { background:url('/page_KR0/06_sub/images/it_01.png')no-repeat 0 0; } .modal6_2_3_2 .icontxt ul li.it_02 { background:url('/page_KR0/06_sub/images/it_02.png')no-repeat 0 0; } .modal6_2_3_2 .icontxt ul li.it_03 { background:url('/page_KR0/06_sub/images/it_03.png')no-repeat 0 0; } .modal6_2_3_2 .icontxt ul li.it_04 { background:url('/page_KR0/06_sub/images/it_04.png')no-repeat 0 0; } .eyes_process { position:relative; width:90%; margin:0 auto; } .eyes_process .ep_bt2 { position:relative; width:100%; overflow:hidden; margin-top:5%; } .eyes_process .ep_bt2 li { float:left; width:50%; height:35px; line-height:35px; margin-bottom:12px; font-size:13px; font-weight:500; color:#2e3432; cursor:pointer; } .eyes_process .ep_bt2 li span { display:inline-block; width:35px; height:35px; margin-right:14px; text-align:center; color:#fff; border-radius:100%; background:#d0cfcf; } .eyes_process .ep_bt2 li.on span { background:#13c0d7; } .ep_slide2 { position:relative; width:100%; overflow:hidden; margin-top:5%; } .ep_slide2 ul li.imgs { width:100%; } .ep_slide2 ul li.txt { width:100%; height:70px; text-align:center; background:#13c0d7; line-height:70px; font-size:16px; font-weight:700; color:#fff; } .modal6_1_2 .title2 { position:relative; width:90%; margin:0 auto; margin-top:10%; font-size:15px; font-weight:400; color:#6c6c6c; line-height:160%; } .modal6_3_1 { position:relative; width:100%; height:700px; background:url('/page_MB0/06_sub/images/06bg4.jpg')no-repeat 50% 0; background-size:cover; } .modal6_3_1 .txt { position:absolute; bottom:10%; left:5%; width:90%; padding:10% 5%; background:rgba(255,255,255,0.5); box-sizing:border-box; } .modal6_3_1 .txt li.t1 { font-size:26px; font-weight:700; color:#16c5d5; } .modal6_3_1 .txt li.t2 { padding-top:10px; font-size:14px; font-weight:400; color:#6c6c6c; } .modal6_3 .modal6_3_1 .txt li.t1 { animation: blurtxt 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal6_3 .modal6_3_1 .txt li.t2 { animation: blurtxt 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .modal6_3_2 { position:relative; width:100%; padding:25% 0; } .modal6_3_2 .subsize { width:90%; margin:0 auto; } .modal6_3_2 .imgtxt { position:relative; width:100%; margin:0 auto; margin-top:20px; } .modal6_3_2 .imgtxt ul { width:100%; min-height:92px; padding-left:106px; margin-bottom:5%; box-sizing:border-box; } .modal6_3_2 .imgtxt ul.it1 { background:url('/page_KR0/06_sub/images/it1.png')no-repeat 0 0; } .modal6_3_2 .imgtxt ul.it2 { background:url('/page_KR0/06_sub/images/it2.png')no-repeat 0 0; } .modal6_3_2 .imgtxt ul.it3 { background:url('/page_KR0/06_sub/images/it3.png')no-repeat 0 0; } .modal6_3_2 .imgtxt ul.it4 { background:url('/page_KR0/06_sub/images/it4.png')no-repeat 0 0; } .modal6_3_2 .imgtxt ul.it5 { background:url('/page_KR0/06_sub/images/it5.png')no-repeat 0 0; } .modal6_3_2 .imgtxt ul.it6 { background:url('/page_MB0/06_sub/images/it6.png')no-repeat 0 0; min-height:155px} .modal6_3_2 .imgtxt ul li.t1 { font-size:16px; font-weight:700; color:#13c0d7; } .modal6_3_2 .imgtxt ul li.t2 { padding-top:10px; font-size:13px; font-weight:400; color:#8b8b8b; } .modal6_3_3 { position:relative; width:100%; height:700px; padding:20% 0 0 0; box-sizing:border-box; background:url('/page_MB0/06_sub/images/06bg5.jpg')no-repeat 0 0; background-size: cover; } .modal6_3_3 .subsize { width:90%; margin:0 auto; } .modal6_3_3 div.txt { width:100%; margin-top:20px; font-size:12px; color:#6c6c6c; font-weight:300; line-height:180%; } .modal7_1_1 { position: relative; width:100%; height:700px; background:url('/page_MB0/07_sub/images/07bg1.jpg')no-repeat 0 0; background-size:cover; } .modal7_1_1 ul.txt { position:absolute; top:60%; left:10%; } .modal7_1_1 ul.txt li.t1 { font-size:18px; font-weight:500; color:#fff; } .modal7_1_1 ul.txt li.t2 {font-size:26px; font-weight:700; color:#fff; text-align:left; } .modal7_1 .modal7_1_1 ul.txt li.t1 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal7_1 .modal7_1_1 ul.txt li.t2 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .modal7_1_2 { position: relative; width:100%; padding:35% 0; background:url('/page_MB0/07_sub/images/07bg2.jpg')no-repeat 0 0; background-size:cover; } .modal7_1_2 ul.txt { position:relative; width:90%; margin:0 auto; } .modal7_1_2 ul.txt li.t1 { font-size:26px; font-weight:700; color:#16c5d5; } .modal7_1_2 ul.txt li.t2 { font-size:14px; font-weight:400; color:#333333; line-height:190%; letter-spacing:-1px; } .modal7_1_2 div.txt2 { width:50%; margin-left:40%; margin-top:15%; padding-left:48px; background:url('/page_KR0/07_sub/images/txt2.png')no-repeat 0 0; font-size:16px; font-weight:500; color:#16c5d5; box-sizing:border-box; } .modal7_1_2 div.txt2 span { font-size:14px; color:#515151; } .modal7_1_3 { position: relative; width:100%; padding:20% 0; box-sizing: border-box; } .modal7_1_3 .box07 { position:relative; width:90%; margin:0 auto; overflow:hidden; } .modal7_1_3 .box07 ul { float:left; width:100%; margin-bottom:5%; padding:90px 10% 10% 10%; box-sizing:border-box; } .modal7_1_3 .box07 ul li.t1 { font-size:22px; font-weight:700; color:#16c5d5; line-height:100%: } .modal7_1_3 .box07 ul li.t2 { padding-top:4px; font-size:16px; font-weight:400; color:#3f3f3f; line-height:150%: } .modal7_1_3 .box07 ul li.t3 { padding-top:6px; font-size:14px; font-weight:400; color:#949494; line-height:150%: } .modal7_1_3 .box07 ul li.a_icon { margin-top:20px; width:140px; height:34px; text-align:center; line-height:34px; border-radius:50px; border:1px solid #000; font-size:14px; color:#000; cursor:pointer; } .modal7_1_3 .box07 ul li.a_icon:hover { color:#fff; border:1px solid #17c5da; background:#17c5da; } .modal7_1_3 .box07 ul:nth-child(1) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_1.jpg')no-repeat 30px 30px; } .modal7_1_3 .box07 ul:nth-child(2) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_2.jpg')no-repeat 30px 30px; } .modal7_1_3 .box07 ul:nth-child(3) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_3.jpg')no-repeat 30px 30px; } .modal7_1_3 .box07 ul:nth-child(4) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_4.jpg')no-repeat 30px 30px; } .modal7_1_3 .box07 ul:nth-child(5) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_5.jpg')no-repeat 30px 30px; } .modal7_1_3 .box07 ul:nth-child(6) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_6.jpg')no-repeat 30px 30px; } .modal7_1_3 .box07 ul:nth-child(7) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_7.jpg')no-repeat 30px 30px; } .modal7_1_3 .box07 ul:nth-child(8) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_8.jpg')no-repeat 30px 30px; } .modal7_1_3 .box07 ul:nth-child(9) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_9.jpg')no-repeat 30px 30px; } .modal07_txtbox { position:relative; width:90%; margin:0 auto; padding-top:20%; } .modal07_txtbox .modaltitle { height:auto; line-height:140%; font-size:22px; font-weight:700; background: url(/page_KR0/05_sub/images/modaltitle.png)no-repeat 0 0; } .modal07_txtbox .contxt { padding-left: 34px; font-size:14px; font-weight:400; color:#6c6c6c; line-height:170%; } .img07txt2 { position:relative; width:100%; margin:0 auto; margin-top:20px; text-align:center; box-sizing:border-box; } .img07txt2 ul { display:inline-block; width:100%; margin-bottom:5%; background:#f3f3f3; vertical-align:top; } .img07txt2 ul li img { width:100%; } .img07txt2 ul li.t1 { width:100%; padding-top:30px; background:#f3f3f3; font-size:18px; font-weight:700; color:#13c0d7; text-align:center; } .img07txt2 ul li.t2 { width:100%; padding-bottom:30px; padding-top:6px; background:#f3f3f3; font-size:14px; font-weight:400; color:#827d7d; text-align:center; } .icon0701 { position:relative; width:90%; margin:0 auto; margin-top:30px; text-align:left; box-sizing:border-box; } .icon0701 ul { margin-bottom:35px; min-height:129px; padding-left:106px; } .icon0701 ul:nth-child(1) { background:url('/page_KR0/07_sub/images/07icon1.jpg')no-repeat 0px 0px; background-size: 90px; } .icon0701 ul:nth-child(2) { background:url('/page_KR0/07_sub/images/07icon2.jpg')no-repeat 0px 0px; background-size: 90px; } .icon0701 ul:nth-child(3) { background:url('/page_KR0/07_sub/images/07icon3.jpg')no-repeat 0px 0px; background-size: 90px; } .icon0701 ul:nth-child(4) { background:url('/page_KR0/07_sub/images/07icon4.jpg')no-repeat 0px 0px; background-size: 90px; } .icon0701 ul:nth-child(5) { background:url('/page_KR0/07_sub/images/07icon5.jpg')no-repeat 0px 0px; background-size: 90px; } .icon0701 ul li:nth-child(1) { padding-top:10px; font-size:16px; font-weight:700; color:#13c0d7; } .icon0701 ul li:nth-child(2) { margin-top:10px; font-size:14px; font-weight:400; color:#8b8b8b; } .modal7_1_4 { position: relative; width:100%; padding:5% 0 15% 0; } .img07txt3 { width:100%; box-sizing:border-box; padding-left:34px; margin-top:10%; } .img07txt3 ul { padding-bottom:5%; } .img07txt3 ul li.t1 { position:relative; width:100%; font-size:16px; font-weight:700; color:#333333; } .img07txt3 ul li.t1 span:nth-child(1) { position:absolute; top:0px; left:0px; display:inline-block; width:34px; height:34px; margin-right:8px; line-height:34px; text-align:center; font-size:16px; font-weight:700; color:#fff; background:#13c0d7; border-radius:100%; } .img07txt3 ul li.t1 span:nth-child(2) { display:inline-block; width:100%; padding-left:40px; box-sizing:border-box; } .img07txt3 ul li.t2 { padding-top:6px; padding-left:42px; font-size:14px; font-weight:400; color:#827d7d; } .modal7_2_1 { position: relative; width:100%; height:700px; background:url('/page_MB0/07_sub/images/07bg3.jpg')no-repeat 0 0; background-size:cover; } .modal7_2_1 ul.txt { position:absolute; top:70%; left:50%; transform: translate(-50%,-50%); width:80%; text-align:left; } .modal7_2_1 ul.txt li.t1 { font-size:16px; font-weight:500; color:#fff; } .modal7_2_1 ul.txt li.t2 { margin-top:10px; font-size:28px; font-weight:700; color:#fff; line-height:120%; } .modal7_2 .modal7_2_1 ul.txt li.t1 { animation: blurtxt 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal7_2 .modal7_2_1 ul.txt li.t2 { animation: blurtxt 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .modal7_2_2 { position: relative; width:100%; padding:20% 0; } .modal7_2_2 ul.txt { position:relative; width:90%; margin:0 auto; } .modal7_2_2 ul.txt li.t1 { font-size:14px; font-weight:400; color:#6c6c6c; } .modal7_2_2 ul.txt li.t2 { font-size:22px; font-weight:700; color:#111111; } .modal7_2_2 ul.txt li.t3 { font-size:14px; font-weight:400; color:#9e9e9e; } .modal7_2_3 { position:relative; width:100%; margin:0 auto; background:#fff; } .modal7_2_4 { position:relative; width:100%; padding:150px 0 15% 0; box-sizing:border-box; } .modal7_2_4 .snowlogo { top:70%; } .modal7_2_5 { position:relative; width:100%; padding:150px 0 15% 0; box-sizing:border-box; } .modal7_2_5 .snowlogo { top:70%; } .modal7_2_6 { position:relative; width:100%; padding:150px 0 15% 0; box-sizing:border-box; } .modal7_2_6 .snowlogo { top:70%; } .modal7_2_7 { position:relative; width:100%; padding:150px 0 15% 0; box-sizing:border-box; } .modal7_2_7 .snowlogo { top:70%; } .modal_txtbox6 { position:relative; width:90%; margin:0 auto; } .modal_txtbox6 ul { width:100%; } .modal_txtbox6 ul li.contxt { padding-left: 34px; font-size:14px; font-weight:400; color:#6c6c6c; line-height:170%; margin-top:34px; } .modal_txtbox6 ul li.contxt span.title1 { font-weight:500; color:#16c5d5; } .modal_txtbox6 ul li.contxt span.title2 { font-weight:500; color:#000000; } .modal_txtbox6 div.imgs2 { position:relative; width:100%; margin-top:10%; padding-left: 34px; box-sizing:border-box; } .modal_txtbox6 div.imgs2 span { display:block; padding-left:24px; line-height:30px; text-align:left; border-left:2px solid #16c5d5; margin-top:20px; font-size:16px; font-weight:500; color:#444141; } .modal_txtbox6 ul li.modalicon { width:100%; text-align:left; padding-left: 34px; box-sizing:border-box; } .modal_txtbox6 ul li.modalicon span { float:left; width:33.3%; font-size:14px; font-weight:500; color:#323131; padding-top:58px; text-align:center; vertical-align:top; } .modal_txtbox6 ul li.modalicon span.m07_icon1 { background:url('/page_KR0/07_sub/images/m07_icon1.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon2 { background:url('/page_KR0/07_sub/images/m07_icon2.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon3 { background:url('/page_KR0/07_sub/images/m07_icon3.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon4 { background:url('/page_KR0/07_sub/images/m07_icon4.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon5 { background:url('/page_KR0/07_sub/images/m07_icon5.png')no-repeat 50% 4px; } .modal_txtbox6 ul li.modalicon span.m07_icon6 { background:url('/page_KR0/07_sub/images/m07_icon6.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon7 { background:url('/page_KR0/07_sub/images/m07_icon7.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon8 { background:url('/page_KR0/07_sub/images/m07_icon8.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon9 { background:url('/page_KR0/07_sub/images/m07_icon9.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon10 { background:url('/page_KR0/07_sub/images/m07_icon10.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon11 { background:url('/page_KR0/07_sub/images/m07_icon11.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon12 { background:url('/page_KR0/07_sub/images/m07_icon12.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon13 { background:url('/page_KR0/07_sub/images/m07_icon13.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon14 { background:url('/page_KR0/07_sub/images/m07_icon14.png')no-repeat 50% 0; } .modal_txtbox6 ul li.modalicon span.m07_icon15 { background:url('/page_KR0/07_sub/images/m07_icon15.png')no-repeat 50% 0; } .modal7_3_1 { position: relative; width:100%; height:700px; background:url('/page_MB0/07_sub/images/07bg4.jpg')no-repeat 50% 0; background-size:cover; } .modal7_3_1 .txt { position:absolute; top:20%; left:10%; width:90%; } .modal7_3_1 .txt li.t1 { font-size:26px; font-weight:700; color:#fff; } .modal7_3_1 .txt li.t2 { padding-top:10px; font-size:18px; font-weight:400; color:#fff; } .modal7_3 .modal7_3_1 ul.txt li.t1 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal7_3 .modal7_3_1 ul.txt li.t2 { animation: blurtxt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal7_3_2 { position: relative; width:100%; padding:20% 0; } .modal7_3_2 ul.txt { position:relative; width:90%; margin:0 auto; } .modal7_3_2 ul.txt li.t1 { font-size:16px; font-weight:400; color:#6c6c6c; } .modal7_3_2 ul.txt li.t2 { font-size:24px; font-weight:700; color:#111111; } .modal7_3_2 ul.txt li.t3 { font-size:16px; font-weight:400; color:#9e9e9e; } #sub0204_02 { background:url('/page_MB0/02_sub/images/0204_02.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; } #sub0204_02 .subtxt { top:70%; width:90%; text-align:left; } #sub0204_02 .subtxt .titletxt1 { font-size:28px; } .active#sub0204_02 .subtxt li.titletxt1 { animation: blurtxt 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub0204_02 .subtxt li.contxt1 { animation: blurtxt 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .active#sub0204_02 .subtxt li.modaltitle { animation: blurtxt 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#sub02_03 .bluebg2 li:nth-child(1) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub02_03 .bluebg2 li:nth-child(2) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub02_03 .bluebg2 li:nth-child(3) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub02_03 .subtxt li.titletxt1 { animation: fadeup 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub02_03 .subtxt li.titletxt2 { animation: fadeup 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub02_03 .subtxt li.contxt2 { animation: fadeup 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .active#sub02_03 .subtxt .sub02icontxt { animation: fadeup 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .sub02icontxt { position:relative; width:100%; margin:0 auto; padding-top:20px; } .sub02icontxt ul { float:left; width:33.3%; padding-left:2%; padding-right:2%; padding-top:88px; box-sizing:border-box; text-align:center; } .sub02icontxt ul:nth-child(1) { background:url('/page_KR0/02_sub/images/0204_03_1.png')no-repeat 50% top; background-size:80px; } .sub02icontxt ul:nth-child(2) { background:url('/page_KR0/02_sub/images/0204_03_2.png')no-repeat 50% top; background-size:80px; } .sub02icontxt ul:nth-child(3) { background:url('/page_KR0/02_sub/images/0204_03_3.png')no-repeat 50% top; background-size:80px; } .sub02icontxt ul li.t1 { font-size:16px; font-weight:500; color:#fff; } .sub02icontxt ul li.t2 { padding-top:10px; font-size:12px; font-weight:300; color:#fff; } #sub0204_04 .sub02txt li.t1 { position:absolute; top:12%; left:4%; } #sub0204_04 .sub02txt li.t2 { position:absolute; top:22%; left:15%; font-size:15px; color:#fff; font-weight:400; } #sub0204_04 .sub02txt li.t3 { position:absolute; top:32%; right:10%; width:80%; font-size:12px; color:#bebebe; font-weight:400; text-align:right; padding-top:70px; background:url('/page_KR0/02_sub/images/0204_04_2.png')no-repeat right top; background-size:60px; } #sub0204_04 .sub02txt li.t3 span { padding-bottom:6px; font-size:16px; font-weight:700; color:#16c5d5; } #sub0204_04 .sub02txt li.t4 { position:absolute; top:56%; left:10%; width:80%; font-size:12px; color:#bebebe; font-weight:400; padding-top:70px; background:url('/page_KR0/02_sub/images/0204_04_3.png')no-repeat left top; background-size:60px; } #sub0204_04 .sub02txt li.t4 span { padding-bottom:6px; font-size:16px; font-weight:700; color:#16c5d5; } .active#sub0204_04 .sub02txt li.t1 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0204_04 .sub02txt li.t2 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .active#sub0204_04 .sub02txt li.t3 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active#sub0204_04 .sub02txt li.t4 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } #sub0204_05 { background-image: url(/page_KR0/02_sub/images/0204_04.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .active#sub0204_05 .whitebg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0204_05 .whitebg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub0204_05 .whitebg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } #sub0204_05 .sub02txt { position:relative; width:90%; margin:0 auto; padding-top:25%; } #sub0204_05 .sub02txt li.t1 { padding-top:10px; font-size:16px; color:#2d2d2d; font-weight:700; } #sub0204_05 .sub02txt li.t2 { padding-top:10px; font-size:12px; color:#858585; font-weight:400; line-height:170%; } #sub0204_05 .sub02txt li.t3 { padding-top:10px; font-size:16px; color:#2d2d2d; font-weight:700; } #sub0204_05 .sub02txt li.t4 { position:relative; width:100%; margin:0 auto; margin-top:10px; height:0; padding-bottom:56.25%; } #sub0204_05 .sub02txt li.t4 iframe { position:absolute; width:100%; height:100%; } #sub0204_05 h3 { font-size:16px; font-weight:500; } .active#sub0204_05 .sub02txt li.t1 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active#sub0204_05 .sub02txt li.t2 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub0204_05 .sub02txt li.t3 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#sub0204_05 .sub02txt li.t4 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } #sub0204_06 { background:#f9f9f9; overflow:hidden; } #sub0204_06 .subtxtbg { position:relative; width:100%; height:40%; background:url('/page_KR0/02_sub/images/0204_06.jpg')no-repeat 0 0; background-size: 100%; background-attachment: fixed; } #sub0204_06 .sub02txt { position:relative; width:90%; margin:0 auto; padding-top:5%; } #sub0204_06 .sub02txt li.t1 { font-size:26px; color:#1a1a1a; font-weight:700; line-height:130%; } #sub0204_06 .sub02txt li.t2 { padding-top:10px; font-size:14px; color:#6d6d6d; font-weight:400; line-height:180%; } #sub0204_07 { background:#f9f9f9; overflow:hidden; } #sub0204_07 .subtxtbg { position:relative; width:100%; height:40%; background:url('/page_KR0/02_sub/images/0204_07.jpg')no-repeat 0 0; background-size: 100%; background-attachment: fixed; } #sub0204_07 .sub02txt { position:relative; width:90%; margin:0 auto; padding-top:5%; } #sub0204_07 .sub02txt li.t1 { font-size:26px; color:#1a1a1a; font-weight:700; line-height:130%; } #sub0204_07 .sub02txt li.t2 { padding-top:10px; font-size:14px; color:#6d6d6d; font-weight:400; line-height:180%; } .active#sub0204_06 .sub02txt li.t1 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0204_06 .sub02txt li.t2 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .active#sub0204_07 .sub02txt li.t1 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0204_07 .sub02txt li.t2 { animation: blurtxt 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .a_icon1_view { position:fixed; top:0px; left:0px; width:100%; height:0; background:rgba(0,0,0,0.6); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); z-index:152; overflow:hidden; } .a_icon1_view span { opacity:0; display:block; position:absolute; top:50%; left:50%; width: 90%; transform:translate(-50%,-50%); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.5s; } .a_icon1_view .a_icon1_close { cursor:pointer; font-size:20px; font-weight:100; color:#fff; display:block; position:absolute; top:30%; left:84%; transform:translate(-50%,-50%); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.5s; } .a_icon1_view.active { height:100%; } .a_icon1_view.active span { opacity:1; } .a_icon_view { position:fixed; top:0px; left:0px; width:100%; height:0; background:rgba(0,0,0,0.6); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); z-index:152; overflow:hidden; } .a_icon_view span { opacity:0; display:block; position:absolute; top:50%; left:50%; width: 90%; transform:translate(-50%,-50%); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.5s; } .a_icon_view .a_icon_close { cursor:pointer; font-size:20px; font-weight:100; color:#fff; display:block; position:absolute; top:30%; left:84%; transform:translate(-50%,-50%); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.5s; } .a_icon_view.active { height:100%; } .a_icon_view.active span { opacity:1; } #bottom_sns .subsnswrap { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; } #bottom_sns .subtxt2 { position:relative; width:100%; margin:0 auto; text-align:center; } #bottom_sns .subtxt2 li.t1 {font-size:15px; font-weight:100; color:#13c0d7; font-style: italic; letter-spacing:1px; } #bottom_sns .subtxt2 li.t2 { margin-top:10px; font-size:28px; font-weight:700; color:#111111; line-height:140%; } #bottom_sns .subtxt2 li.t3 a { display:block; position:relative; width:160px; height:28px; line-height:28px; padding-left:22px; text-align:left; font-size:12px; color:#4f4f4f; font-weight:400; margin:0 auto; border:1px solid #000; border-radius:50px; box-sizing:border-box; transition:all 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) ; } #bottom_sns .subtxt2 li.t3 a span { display:block; position:absolute; top:0px; right:20px; } #bottom_sns .subtxt2 li.t3 a.snslink1 { margin-top:30px; } #bottom_sns .subtxt2 li.t3 a.snslink2 { margin-top:10px; } #bottom_sns .subtxt2 li.t3 a.snslink3 { margin-top:10px; } #bottom_sns .subtxt2 li.t3 a:hover { color:#fff; background:#13c0d7; border:1px solid #13c0d7; } #bottom_sns .snswrap { position:relative; width:100%; margin:0 auto; padding-top:10%; text-align:center; } #bottom_sns .snswrap li { display:inline-block; margin:0 2px; width:35px; } #bottom_sns .snswrap li img{ width:100%; } .active#bottom_sns .graybg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#bottom_sns .graybg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#bottom_sns .graybg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#bottom_sns .subtxt2 { animation: opa 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#bottom_sns .subtxt2 li.t1 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#bottom_sns .subtxt2 li.t2 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .active#bottom_sns .subtxt2 li.t3 { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#bottom_sns .snswrap { animation: blurtxt 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 2.1s; } #sub05_09 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub05_09 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:33%; width:33%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub05_09 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:66%; width:34%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub05_09 .contxt1 { position:relative; width:100%; margin-top:5%; } #sub05_09 .contxt1 a { display: block; width: 120px; height: 34px; margin:0 auto; line-height: 30px; font-size: 13px; font-weight: 500; text-align: center; color: #fff; border: 1px solid #fff; border-radius: 50px; box-sizing:border-box; } #sub05_09 .subtxt li.titletxt1 { font-size: 22px; font-weight: 700; color: #111111; line-height: 126%; } .active#sub05_09 .subtxtbg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub05_09 .subtxtbg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub05_09 .subtxtbg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub05_09 .titletxt1 span.t1 { animation: blurtxt2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active#sub05_09 .titletxt1 span.t2 { animation: blurtxt2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub05_09 .titletxt1 span.t3 { animation: blurtxt2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#sub05_09 .contxt1 {animation: fadeup 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } .sub02_dr { background-image: url(/page_MB0/06_sub/images/sub06_dr2.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub03_dr { background-image: url(/page_MB0/06_sub/images/sub06_dr2.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub04_dr { background-image: url(/page_MB0/06_sub/images/sub06_dr2.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub05_dr { background-image: url(/page_MB0/06_sub/images/sub06_dr2.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub06_dr { background-image: url(/page_MB0/06_sub/images/sub06_dr2.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub07_dr { background-image: url(/page_MB0/06_sub/images/sub06_dr2.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub10_02 {background:url(/page_KR0/10_sub/images/10_1.jpg)no-repeat 50% 0; background-size: cover; } #sub10_02 .titletxt1{ font-size: 28px; font-weight: 700; color: #111111; line-height: 126%;} .active#sub10_02 .subtxt li.titletxt1 {animation: blurtxt2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; line-height: 150%; max-height:100%; background-size: cover; background-attachment: fixed; background-position:50% 50%;} #sub10_ .subtxtbg { position: relative; width: 60%; margin-top: 5%;margin-left: 5%; padding-top: 76%;} #sub05_08 .subtxt2 li.t2 {margin-top: 20px; font-size: 36px; font-weight: 700; color: #000000;line-height: 130%;} #sub05_08 .subtxt2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; } #sub05_05.sub10_04 {background:url(/page_KR0/10_sub/images/10_1.jpg)no-repeat 50% 0; background-size: cover; } #sub12_01 { position:relative; width:100%; height:700px; background:url(/page_MB0/12_sub/images/12_01.jpg)no-repeat 50% 0; background-size: cover; } #sub12_01 .subtxtwrap { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:90%; text-align:center; } #sub12_01 .subtxtwrap li.t1 { font-size:18px; font-weight:300; color:#ffffff; line-height:150%; } #sub12_01 .subtxtwrap li.t2 { margin-top:16px; font-size:38px; font-weight:600; color:#ffffff; line-height:100%; } .subfixdmenu { position:relative; height:60px; line-height:60px; border-bottom:1px solid #e1e1e1; background:#ffffff; box-sizing:border-box; overflow: hidden; z-index:20; } .subfixdmenu ul { width:170%; margin: 0; padding: 0; height:100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; } .subfixdmenu ul li { width:30%; height:100%; font-size:16px; font-weight:600; color:#1d1d1d; text-align: center; cursor: pointer; } .subfixdmenu ul li.activetop { color:#00b4cd; text-decoration:underline; } .subfixdmenu.active { position:fixed; top:0px; left:0px; } .sub12_02 { position:relative; width:90%; margin:0 auto; margin-top:14%; overflow:hidden; } .sub12_02 h3 { width:100%; margin-bottom:20px; font-size:32px; font-weight:600; color:#333333; line-height:100%; text-align:center; } .sub12_02 ul li.t1 { width:100%; } .sub12_02 ul li.t2 { width:100%; margin-top:14px; font-size:18px; font-weight:600; color:#333333; line-height:140%; } .sub12_02 ul li.t3 { width:100%; margin-top:6px; font-size:14px; font-weight:300; color:#757575; line-height:140%; } .sub12_02 .swiper-wrapper { height:auto !important; margin-bottom:8%; } .sub12_02 .swiper-pagination { position:relative; width:100%; } .sub12_02 .swiper-pagination .swiper-pagination-bullet { width:8px; height:8px; background:#dbdbdb; border-radius:100%; opacity:100%; margin:0 2px !important; } .sub12_02 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width:22px; height:8px; background:#00b4cd; border-radius:8px; opacity:100%; } .sub12_03 { position:relative; width:90%; margin:0 auto; margin-top:20%; overflow:hidden; } .sub12_03 h3 { width:100%; margin-bottom:20px; font-size:32px; font-weight:600; color:#333333; line-height:100%; text-align:center; } .sub12_03 .swiper-slide { width:100%; } .sub12_03 ul li.t1 { width:100%;} .sub12_03 ul li.t2 { width:100%; margin-top:14px; font-size:20px; font-weight:600; color:#333333; line-height:140%; } .sub12_03 ul li.t3 { width:100%; margin:6px 0 20px 0; font-size:15px; font-weight:300; color:#757575; line-height:140%; } .sub12_03 .swiper-wrapper { height:auto !important; margin-bottom:6%; } .sub12_03 .swiper-pagination2 { position:relative; width:100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; } .sub12_03 .swiper-pagination2 .swiper-pagination-bullet { width:8px; height:8px; background:#dbdbdb; border-radius:100%; opacity:100%; margin:0 2px !important; } .sub12_03 .swiper-pagination2 .swiper-pagination-bullet.swiper-pagination-bullet-active { width:22px; height:8px; background:#00b4cd; border-radius:8px; opacity:100%; } .sub12_04 { position:relative; width:100%; margin-top:20%; overflow:hidden; } .sub12_04 .subtxtwrap { position:relative; width:90%; margin:0 auto; text-align:center; } .sub12_04 .subtxtwrap li.t1 { font-size:26px; font-weight:600; color:#333333; line-height:130%; letter-spacing:-1px; } .sub12_04 .subtxtwrap li.t2 { margin-top:10px; font-size:16px; font-weight:300; color:#757575; line-height:150%; } .sub12_04 .subtxtwrap li.t2 span { } .sub12_05 { position:relative; width:100%; margin-top:20%; overflow:hidden; } .sub12_05 h3 { width:100%; margin-bottom:20px; font-size:32px; font-weight:600; color:#333333; line-height:100%; text-align:center; } .sub12_05 .subtxtwrap { position:relative; width:90%; margin:0 auto; text-align:center; } .sub12_05 .subtxtwrap li.t1 { font-size:13px; font-weight:400; color:#1d1d1d; line-height:100%; letter-spacing:1px; opacity:30%; } .sub12_05 .subtxtwrap li.t2 { margin-top:6px; font-size:32px; font-weight:700; color:#1d1d1d; line-height:130%; letter-spacing:-1px; } .sub12_05 .sub12dr { position:relative; width:95%; margin-left:5%; overflow:hidden; margin-top:5%; } .sub12_05 .sub12dr .imgs { position:relative; width:100%; background:#000000; } .sub12_05 .sub12dr .imgs img { display:block; opacity:80%; } .sub12_05 .sub12dr .imgs a { display:block; position:absolute; top:5%; right:5%; width:50px; } .sub12_05 .sub12dr .txtwrap { position:absolute; bottom:5%; left:5%; } .sub12_05 .sub12dr .txtwrap .txt_title { font-size:18px; font-weight:600; color:#ffffff; } .sub12_05 .sub12dr .txtwrap .txt_con { position:relative; width:100%; height:75px; margin-top:10px; font-size:14px; font-weight:300; color:#ffffff; line-height:140%; overflow:hidden; } .sub12_05 .sub12dr .txtwrap2 { position:relative; width:100%; margin-top:10px; font-size:16px; font-weight:700; color:#1d1d1d; } .sub12_05 .sub12dr .txtwrap2 span.txtspan1 { display:inline-block; height:16px; overflow:hidden; font-weight:400; padding-left:3px; vertical-align:top; color:#333333; } .sub12_05 .sub12dr .txtwrap2 span.txtspan2 { display:block; position:absolute; top:0px; right:0px; font-weight:400; } .sub12_05 .swiper-wrapper { height:auto !important; margin-bottom:12%; } .sub12_05 .swiper-pagination3 { position:relative; width:100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; } .sub12_05 .swiper-pagination3 .swiper-pagination-bullet { width:8px; height:8px; background:#dbdbdb; border-radius:100%; opacity:100%; margin:0 2px !important; } .sub12_05 .swiper-pagination3 .swiper-pagination-bullet.swiper-pagination-bullet-active { width:22px; height:8px; background:#00b4cd; border-radius:8px; opacity:100%; } .sub12_06 { position:relative; width:100%; margin-top:20%; overflow:hidden; } .sub12_06 .subtxtwrap { position:relative; width:90%; margin:0 auto; text-align:center; } .sub12_06 .subtxtwrap li.t1 { font-size:32px; font-weight:600; color:#333333; line-height:100%; text-align:center; } .sub12_06 .sub12real { position:relative; width:95%; margin-left:5%; overflow:hidden; margin-top:5%; } .sub12_06 .sub12real ul li.t1 { width:100%; } .sub12_06 .sub12real ul li.t2 { width:100%; margin-top:14px; font-size:20px; font-weight:600; color:#333333; line-height:140%; } .sub12_06 .sub12real ul li.t3 { width:100%; margin-top:6px; font-size:15px; font-weight:300; color:#757575; line-height:150%; } .sub12_06 .swiper-wrapper { height:auto !important; margin-bottom:12%; } .sub12_06 .swiper-pagination4 { position:relative; width:100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; } .sub12_06 .swiper-pagination4 .swiper-pagination-bullet { width:8px; height:8px; background:#dbdbdb; border-radius:100%; opacity:100%; margin:0 2px !important; } .sub12_06 .swiper-pagination4 .swiper-pagination-bullet.swiper-pagination-bullet-active { width:22px; height:8px; background:#00b4cd; border-radius:8px; opacity:100%; } .sub12_06 a { display:block; position:relative; width:90%; height:66px; line-height:66px; margin:0 auto; margin-top:5%; padding:0 5%; font-size:20px; font-weight:600; color:#333333; border:1px solid #b3b3b3; box-sizing:border-box; } .sub12_06 a span { display:block; position:absolute; top:24px; right:20px; } .sub12_07 { position:relative; width:100%; margin-top:20%; overflow:hidden; } .sub12_07 .subtxtwrap { position:relative; width:90%; margin:0 auto; margin-bottom:5%; text-align:center; } .sub12_07 .subtxtwrap li.t1 { font-size:32px; font-weight:600; color:#333333; line-height:130%; text-align:center; } .sub12_07 .viewimg { position:relative; width:90%; margin:0 auto; height:0px; padding-bottom:50%; overflow:hidden; } .sub12_07 .viewimg iframe { display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; } .sub12_07 .viewimgvodwrap { position:relative; width:90%; margin:0 auto; overflow:hidden; margin-top:5%; } .sub12_07 .viewimgvod { position:relative; width:100%; } .sub12_07 .viewimgvod ul { width:100%; margin-bottom:16px; display: flex; flex-wrap: nowrap; justify-content: space-between; } .sub12_07 .viewimgvod ul li.tvList_li { width:30%; overflow:hidden; } .sub12_07 .viewimgvod ul li.tvList_li img { display:block; margin-top:-10%; margin-bottom:-10%; } .sub12_07 .viewimgvod ul li.tvList_txt { width:65%; } .sub12_07 .viewimgvod ul li.tvList_txt span:nth-child(1) { display:block; font-size:14px; font-weight:600; color:#333333; } .sub12_07 .viewimgvod ul li.tvList_txt span:nth-child(2) { display:block; font-size:12px; font-weight:300; color:#757575; line-height:130%; margin-top:5px; } .sub12_07 .swiper-wrapper { height:auto !important; margin-bottom:6%; } .sub12_07 .swiper-pagination5 { position:relative; width:100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; } .sub12_07 .swiper-pagination5 .swiper-pagination-bullet { width:8px; height:8px; background:#dbdbdb; border-radius:100%; opacity:100%; margin:0 2px !important; } .sub12_07 .swiper-pagination5 .swiper-pagination-bullet.swiper-pagination-bullet-active { width:22px; height:8px; background:#00b4cd; border-radius:8px; opacity:100%; } .sub12_08 { position:relative; width:100%; margin-top:20%; overflow:hidden; } .sub12_08 .subtxtwrap { position:relative; width:90%; margin:0 auto; text-align:center; } .sub12_08 .subtxtwrap li.t1 { font-size:14px; font-weight:400; color:#1d1d1d; line-height:120%; letter-spacing:1px; opacity:30%; } .sub12_08 .subtxtwrap li.t2 { margin-top:6px; font-size:32px; font-weight:600; color:#333333; line-height:120%; text-align:center; } .sub12_08 .subtxtwrap li.t3 { font-size: 16px; font-weight: 300; color: #757575; line-height: 1.3; text-align: center; margin-top: 15px;} .sub12_08 .sub12_08map { position:relative; width:90%; margin:0 auto; margin-top:5%; } .sub12_08 .sub12maptxt { position:relative; width:90%; margin:0 auto; margin-top:5%; } .sub12_08 .sub12maptxt ul { width:100%; } .sub12_08 .sub12maptxt ul li.titletxt { display:block; position:relative; width:100%; height:56px; line-height:56px; margin:0 auto; padding:0 5%; font-size:16px; font-weight:600; color:#333333; border:1px solid #b3b3b3; box-sizing:border-box; } .sub12_08 .sub12maptxt ul li.titletxt span { display:block; position:absolute; top:24px; right:20px; /*transform: rotate(90deg);*/ } .sub12_08 .sub12maptxt ul li.titlecon { display:none; position:relative; width:100%; padding:8% 10%; box-sizing:border-box; background:#f4f4f4; } .sub12_08 .sub12maptxt ul li.titlecon .t1 { width:100%; height:29px; line-height:29px; padding-left:44px; font-size:16px; font-weight:600; color:#333333; box-sizing:border-box; background:url(/page_MB0/12_sub/images/sub12map1.jpg)no-repeat 0 50%; } .sub12_08 .sub12maptxt ul li.titlecon .t2 { width:100%; font-size:14px; font-weight:600; color:#333333; padding-left:44px; line-height:120%; box-sizing:border-box; } .sub12_08 .sub12maptxt ul li.titlecon .t3 { width:100%; margin-top:4px; font-size:14px; font-weight:600; color:#333333; padding-left:44px; box-sizing:border-box; } .sub12_08 .sub12maptxt ul li.titlecon .t3 span { display:inline-block; width:15px; height:15px; margin-right:4px; border-radius:100%; background:#242424; line-height:15px; text-align:center; font-size:11px; font-weight:700; color:#ffffff; vertical-align:middle; } .sub12_08 .sub12maptxt ul li.titlecon .t4 { position:relative; width:100%; margin-top:5%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: flex-start; } .sub12_08 .sub12maptxt ul li.titlecon .t4 a { display:block; margin-right:10px; } .sub12_08 .sub12maptxt ul li.titlecon .t22 { width:100%; font-size:14px; font-weight:300; color:#757575; padding-left:44px; line-height:130%; box-sizing:border-box; } .sub12_08 .sub12maptxt ul li.titlecon.active { display:block; } .sub12_09 { position:relative; width:100%; margin-top:20%; overflow:hidden; background:#f4f4f3; } .sub12_099 { position:relative; width:90%; margin:0 auto; padding:10% 0; overflow:hidden; } .sub12_099 p { width:100%; text-align:center; font-size:22px; font-weight:600; color:#333333; line-height:140%; padding-bottom:30px; } .sub12_099 p span { color:#00b4cd; } .sub12_099 ul li label { font-size:0px; display:none; } .sub12_099 ul li.name input { width:100%; height:56px; border:1px solid #bcbcbc; padding:0 15px; margin-bottom:6px; font-size:16px; font-weight:300; color:#333333; background:#ffffff; } .sub12_099 ul li.phone input { width:100%; height:56px; border:1px solid #bcbcbc; padding:0 15px; margin-bottom:6px; font-size:16px; font-weight:300; color:#333333; background:#ffffff; } .sub12_099 ul li.subject1 select { width:100%; height:56px; border:1px solid #bcbcbc; padding:0 15px; margin-bottom:6px; font-size:16px; font-weight:600; color:#333333; background:#ffffff url('/page_MB0/12_sub/images/12_06bt.png') no-repeat 95% 50%; -webkit-appearance: none; -moz-appearance: none; appearance : none; } .sub12_099 ul li.name input::placeholder { color:#bcbcbc; } .sub12_099 ul li.phone input::placeholder { color:#bcbcbc; } .sub12_099 ul li.subject1 input::placeholder { color:#bcbcbc; } .sub12_099 ul li.contentinput textarea { width:100%; height:126px; border:1px solid #bcbcbc; padding:8px; margin-bottom:6px; font-family: 'Pretendard'; font-size:16px; font-weight:300; color:#333333; background:#ffffff; } .sub12_099 ul li.contentinput textarea::placeholder { color:#bcbcbc; } .sub12_099 ul li.subject2 { width:100%; height:56px; border:1px solid #000; padding:0 15px; margin-bottom:6px; box-sizing:border-box; } .sub12_099 ul li div.subject2left { float:left; width:60px; line-height:54px; font-size:15px; font-weight:700; color:#2a2a2a; } .sub12_099 ul li div.subject2right { display:block; float:left; width:180px; height:54px;line-height:54px; margin-left: 10px; } .sub12_099 ul li div.subject2right input { width:14px; height:14px; } .sub12_099 ul li div.subject2right span { display:block; float:left; width:58px; height:54px; vertical-align:middle; } .sub12_099 ul li div.subject2right span label { display:inline-block; padding-left:4px; font-size:13px; color:#2a2a2a; font-weight:400; vertical-align:middle; } .sub12_099 ul li.fpv { width:100%; font-size:14px; color:#2a2a2a; font-weight:400; text-align:right; } .sub12_099 ul li.fpv input[id="check1"] { display: none; } .sub12_099 ul li.fpv input[id="check1"] + label { display: inline-block; width: 15px; height: 15px; border: 0px solid #bcbcbc; background:#e1e1e1; cursor: pointer; border-radius:100%; margin-right:8px; vertical-align: middle; } .sub12_099 ul li.fpv input[id="check1"]:checked + label { background-color: #000; } .sub12_099 ul li.submitbt input { width:100%; height:56px; margin-top:10px; border:1px solid #000; background:#000000; border:0px; font-size:18px; font-weight:500; color:#fff; font-family: 'Noto Sans KR', sans-serif; } .sub12_099 ul li input::placeholder { color:#2a2a2a; } .sub12_10 { position:relative; width:100%; overflow:hidden; padding-bottom:25%; padding-top:15%; } .sub12_10 ul.sns { position:relative; width:100%; margin-top:30px; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; } .sub12_10 ul.sns li { width:50px; margin:0 4px; } .sub12_10 ul li.title { color:#919191; font-size:16px; font-weight:300; line-height:100%; letter-spacing:1px; } .sub12_10 ul.foot_1 li.phone1 { margin-top:4px; color:#333; font-size:22px; font-weight:600; line-height:100%; } .sub12_10 ul.foot_1 li.phone1 a { color:#333; } .sub12_10 ul.foot_1 { position:relative; width:90%; margin:0 auto; padding-top:30px; } .sub12_10 ul.foot_2 { position:relative; width:90%; margin:0 auto; padding-top:20px; } .sub12_10 ul.foot_3 { position:relative; width:90%; margin:0 auto; padding-top:20px; } .sub12_10 ul.foot_2 li.t2 { margin-top:6px; margin-bottom:7px; color:#333; font-size:18px; font-weight:600; line-height:100%; display: flex; flex-wrap: nowrap; } .sub12_10 ul.foot_2 li.t2 span:nth-child(1) { display:block; width:90px; } .sub12_10 ul.foot_2 li.t2 span:nth-child(2) { display:block; } .sub12_10 ul.foot_2 li:nth-child(2) span:nth-child(1) { display:block; width:90px; letter-spacing:16px; } .sub12_10 ul.foot_3 li.t2 { margin-top:6px; margin-bottom:7px; color:#333; font-size:16px; font-weight:600; line-height:100%; } .sub12_10 ul.foot_4 { position:relative; width:90%; margin:0 auto; display: flex; flex-wrap: nowrap; justify-content: space-between; } .sub12_10 ul.foot_4 li:nth-child(1) { width:80px; } .sub12_10 ul.foot_4 li:nth-child(2) { color:#333; font-size:22px; font-weight:600; } .bottomquick { position:fixed; bottom:0px; left:0px; width:100%; z-index:99} .bottomquick ul { position:relative; width:100%; max-width:640px; margin:0 auto; display: flex; flex-wrap: nowrap; } .bottomquick ul li:nth-child(1) { width:50%; background:#1d1d1d; text-align:center; } .bottomquick ul li:nth-child(2) { width:50%; background:#323232; text-align:center; } .bottomquick ul li img { display:inline-block; max-width:100%; } .modaltab8{ position:relative; width:90%; margin:0 auto; text-align:center; overflow:hidden; z-index:1; } .modaltab8 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab8 ul li.active,.modaltab2 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .modaltab9{ position:relative; width:90%; margin:0 auto; text-align:center; overflow:hidden; z-index:1; } .modaltab9 ul li { float:left; width:48%; margin:1%; height:34px; line-height:30px; border:1px solid #dbd9d9; background:#fff; color:#373737; font-size:11px; font-weight:500; box-sizing:border-box;cursor:pointer; border-radius:10px; } .modaltab9 ul li.active,.modaltab2 ul li:hover { background:#16c5d5; color:#fff; border:1px solid #16c5d5; } .d_tit { text-align: center; font-size:18px; font-weight:500; color:#13c0d7; } .modaltitle { width:100%; height:49px; line-height:49px; padding-left:34px; font-size:17px; font-weight:500; color:#2b2b2b; background:url('/page_KR0/05_sub/images/modaltitle.png')no-repeat 0 50%; box-sizing:border-box; } .modaltitle2 { width:100%; height:49px; line-height:150%; padding-left:34px; font-size:17px; font-weight:500; color:#2b2b2b; background:url('/page_KR0/05_sub/images/modaltitle.png')no-repeat 0 50%; box-sizing:border-box; } .subsize { position:relative; width:100%; } .sublinkbt { clear:both; width:100%; } .sublinkbt a { display: block; width: 170px; height: 36px; margin:0 auto; line-height: 34px; font-size: 12px; font-weight: 500; text-align: center; color: #000; border: 1px solid #000; background: #fff; border-radius: 50px; transition: all 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940); } .sublinkbt a:hover { color:#fff; background:#00b9d2; border: 1px solid #00b9d2; } .bluetxt2 { color:#13c0d7 !important; } .bluetxt { color:#14c2d3 !important; } .bluetxt3 { color:#14c2d3 !important; font-weight: bold;} .whitetxt { color:#ffffff !important; } .blacktxt { color:#000000 !important; } .graytxt { color:#9a9a9a !important; } body ::scrollbar { width: 10px; height:12px; } body ::-webkit-scrollbar { width: 10px; height:12px; } body ::scrollbar-track { background-color: #f1fafe; } body ::-webkit-scrollbar-track { background-color: #f1fafe; } body ::scrollbar-thumb { background: #245e67; } body ::-webkit-scrollbar-thumb { background: #245e67; } body ::scrollbar-button { display: none; } body ::-webkit-scrollbar-button { display: none; }