body { animation: opa 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .LayerPopup_roll { position:fixed; top:0px; width:100%; height:100%; animation: opa 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.1s; z-index:500; } header { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .quickcswrap { animation: faderight 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .figuretxt { animation: opa 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } section.active { z-index:1; } .subtxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; width:100%; } .subtxt li.titletxt1 { font-size:80px; font-weight:700; color:#111111; letter-spacing:-2px; line-height:126%; } .subtxt li.titletxt2 { font-size:50px; font-weight:700; color:#111111; letter-spacing:-2px; line-height:126%; } .subtxt li.contxt1 { font-size:22px; font-weight:500; color:#13c0d7; } .subtxt li.contxt2 { font-size:24px; font-weight:500; color:#13c0d7; } .typep1 { position: relative; height:100px; margin:0 auto; white-space: nowrap; overflow: hidden; } .typep2 { position: relative; height:100px; margin:0 auto; white-space: nowrap; overflow: hidden; } #sub02_01 .subtxtbg { position:absolute; bottom:0px; left:50%; width:100%; height:100%; background:#fff;transform: translate(-50%,0%); animation: topheight 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.9s; } #sub02_01 .subtxtbg li { float:left; width:25%; height:100%; border-right:1px solid #ddd; box-sizing:border-box; } .subwhitebg li:nth-child(1) { float:left; position:absolute; top:0px; left:0%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .subwhitebg li:nth-child(2) { float:left; position:absolute; top:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .subwhitebg li:nth-child(3) { float:left; position:absolute; top:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .subwhitebg li:nth-child(4) { float:left; position:absolute; top:0px; left:75%; width:25%; height:100%; background:#fff; box-sizing:border-box; } .subwhitebg li:nth-child(4) { float:left; position:absolute; top:0px; left:75%; width:25%; height:100%; background:#fff; box-sizing:border-box; } .subwhitebg2 li:nth-child(1) { float:left; position:absolute; top:0px; left:0%; width:25%; height:100%; border-right:1px solid #ddd; background:#f9f9f9; box-sizing:border-box; } .subwhitebg2 li:nth-child(2) { float:left; position:absolute; top:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:#f9f9f9; box-sizing:border-box; } .subwhitebg2 li:nth-child(3) { float:left; position:absolute; top:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:#f9f9f9; box-sizing:border-box; } .subwhitebg2 li:nth-child(4) { float:left; position:absolute; top:0px; left:75%; width:25%; height:100%; background:#f9f9f9; box-sizing:border-box; } .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: text-focus-in 1s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active .typep3 span:nth-child(1) { display:inline-block; animation: text-focus-in2 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: text-focus-in2 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.2s; } #sub02_02 .subtxtbg { position:absolute; top:0px; left:50%; width:100%; height:100%; transform: translate(-50%,0%); } #sub02_02 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd;background:#f9f9f9; box-sizing:border-box; } #sub02_02 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd;background:#f9f9f9; box-sizing:border-box; } #sub02_02 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd;background:#f9f9f9; box-sizing:border-box; } #sub02_02 .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd;background:#f9f9f9; box-sizing:border-box; } .active#sub02_02 .subtxt li.titletxt1 { animation: text-focus-in2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub02_02 .subtxtbg li:nth-child(1) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub02_02 .subtxtbg li:nth-child(2) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub02_02 .subtxtbg li:nth-child(3) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub02_02 .subtxtbg li:nth-child(4) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .snow1 { position:absolute; left: 24.2%; animation: paper1Ani 12.3s infinite; z-index: 3; transition: opacity 0.4s; width:42px; height:42px; background:#13c0d7; border-radius:100%; } .snow2 { position:absolute; left: 74%; animation: paper3Ani 23.4s infinite; z-index: 3; transition: opacity 0.4s; width:53px; height:53px; background:#d3d3d3; border-radius:100%; } #sub0204_02 .subtxtbg { position:absolute; top:0px; left:50%; width:100%; height:100%; transform: translate(-50%,0%); } #sub0204_02 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd; background:#f9f9f9; box-sizing:border-box; } #sub0204_02 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:#f9f9f9; box-sizing:border-box; } #sub0204_02 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:url('/page_KR0/02_sub/images/0204_02_1.jpg')no-repeat 0 bottom; background:cover; box-sizing:border-box; } #sub0204_02 .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/02_sub/images/0204_02_2.jpg')no-repeat 0 bottom; background:cover; box-sizing:border-box; } #sub0204_02 .subtxt { top:46%; width:70%; text-align:left; } #sub0204_02 .subtxt .titletxt1 { font-size:48px; } .active#sub0204_02 .subtxt li.titletxt1 { animation: text-focus-in2 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub0204_02 .subtxt li.contxt1 { animation: text-focus-in2 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .active#sub0204_02 .subtxt li.modaltitle { animation: text-focus-in2 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#sub0204_02 .subtxtbg li:nth-child(1) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0204_02 .subtxtbg li:nth-child(2) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub0204_02 .subtxtbg li:nth-child(3) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub0204_02 .subtxtbg li:nth-child(4) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } #sub02_03 .subtxtbg { position:absolute; top:0px; left:50%; width:100%; height:100%; transform: translate(-50%,0%); } #sub02_03 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #59d2e3; background:#13c0d7; box-sizing:border-box; } #sub02_03 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #59d2e3; background:#13c0d7; box-sizing:border-box; } #sub02_03 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #59d2e3; background:#13c0d7; box-sizing:border-box; } #sub02_03 .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#13c0d7; box-sizing:border-box; } .active#sub02_03 .subtxtbg li:nth-child(1) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub02_03 .subtxtbg li:nth-child(2) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub02_03 .subtxtbg li:nth-child(3) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub02_03 .subtxtbg li:nth-child(4) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .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:1280px; margin:0 auto; padding-top:80px; } .sub02icontxt ul { float:left; width:33.3%; padding-top:229px; box-sizing:border-box; text-align:center; } .sub02icontxt ul:nth-child(1) { border-right:1px solid #5bd5e2; background:url('/page_KR0/02_sub/images/0204_03_1.png')no-repeat 50% top; } .sub02icontxt ul:nth-child(2) { border-right:1px solid #5bd5e2; background:url('/page_KR0/02_sub/images/0204_03_2.png')no-repeat 50% top; } .sub02icontxt ul:nth-child(3) { background:url('/page_KR0/02_sub/images/0204_03_3.png')no-repeat 50% top; } .sub02icontxt ul li.t1 { font-size:24px; font-weight:700; color:#fff; } .sub02icontxt ul li.t2 { padding-top:10px; font-size:16px; font-weight:300; color:#fff; } #sub02_04 { background:#000000; background-size: cover; background-attachment: fixed; background-position:50% 50%; } .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: text-focus-in2 1.2s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } #sub02_04 .subtxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; width:1280px; } #sub02_04 .subtxt li.t1 { font-size:28px; font-weight:700; color:#111111; letter-spacing:-0px; line-height:100%; } #sub02_04 .subtxt li.t2 { margin-top:20px; font-size:46px; font-weight:700; color:#111111; letter-spacing:-1px; line-height:140%; } #sub02_04 .subtxt li.t3 { margin-top:50px; font-size:24px; font-weight:700; color:#111111; letter-spacing:-2px; 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.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 9.2s; } */ @keyframes sub02_04_1 { 0% { top:88px; } 15% { top:0px; } 85% { top:0px; } 100% { top:-88px; } } @keyframes sub02_04_2 { 0% { top:88px; filter: blur(6px); opacity: 0; } 100% { top:0px; filter: blur(0px); opacity: 1; } } #sub02_13 { position:relative; width:100%; height:100%; background:url('/page_KR0/02_sub/images/02_13.jpg')no-repeat center center; } #sub02_13 .bg { position:relative; width:956px; height:100%; margin:0 auto; } #sub02_13 .bg .sub02_13_1 { position:absolute; top:138px; right:0px; width:20px; height:20px; } #sub02_13 .bg .sub02_13_1 img { display:block; width:20px; height:20px; animation: rotate_image 16s linear infinite; transform-origin: 50% 50%; } #sub02_13 .bg .sub02_13_2 { position:absolute; bottom:148px; left:0px; width:20px; height:20px; } #sub02_13 .bg .sub02_13_2 img { display:block; width:20px; height:20px; animation: rotate_image 16s linear infinite; transform-origin: 50% 50%; } #sub02_13 .imgs { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:90%; max-width:1320px; display:flex; justify-content: space-between } #sub02_13 .imgs ul { position:relative; width:22%; } #sub02_13 .imgs ul li:nth-child(1) { position:relative; width:100%; border-radius:12px; overflow:hidden; } #sub02_13 .imgs ul li:nth-child(1) img { width:100%; } #sub02_13 .imgs ul li:nth-child(2) { position:relative; text-align:center; width:100%; font-size:15px; font-weight:500; color:#2e2e34; margin-top:16px; } @keyframes rotate_image{ 100% { transform: rotate(360deg); } } #btn-play { cursor:pointer; } #btn-stop { position:absolute; top:100px; right:100px; cursor:pointer; } .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: auto; width: auto; } #vod0802 { position:relative; width:1280px; margin:0 auto; padding-top:100px; } #vod0802 video { display:block; width:1280px; height:720px; } #sub0204_04 { background-image: url(/page_KR0/02_sub/images/0204_04.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub0204_04 .sub02txt li.t1 { position:absolute; top:25%; left:12%; transform:translate(-50%,-50%); } #sub0204_04 .sub02txt li.t2 { position:absolute; top:32%; left:21%; transform:translate(-50%,-50%); font-size:18px; color:#fff; font-weight:500; } #sub0204_04 .sub02txt li.t3 { position:absolute; top:72%; left:36%; transform:translate(-50%,-50%); font-size:16px; color:#bebebe; font-weight:400; text-align:right; padding-top:110px; background:url('/page_KR0/02_sub/images/0204_04_2.png')no-repeat right top; } #sub0204_04 .sub02txt li.t3 span { padding-bottom:6px; font-size:24px; font-weight:700; color:#16c5d5; } #sub0204_04 .sub02txt li.t4 { position:absolute; top:58%; left:77%; transform:translate(-50%,-50%); font-size:16px; color:#bebebe; font-weight:400; padding-top:110px; background:url('/page_KR0/02_sub/images/0204_04_3.png')no-repeat left top; } #sub0204_04 .sub02txt li.t4 span { padding-bottom:6px; font-size:24px; font-weight:700; color:#16c5d5; } .active#sub0204_04 .sub02txt li.t1 { animation: text-focus-in 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0204_04 .sub02txt li.t2 { animation: text-focus-in 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .active#sub0204_04 .sub02txt li.t3 { animation: text-focus-in 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active#sub0204_04 .sub02txt li.t4 { animation: text-focus-in 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } #sub0204_05 { background-image: url(/page_KR0/02_sub/images/0204_04.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub0204_05 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub0204_05 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub0204_05 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub0204_05 .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#fff; box-sizing:border-box; } .active#sub0204_05 .subtxtbg li:nth-child(1) { animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0204_05 .subtxtbg li:nth-child(2) { animation: topheight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub0204_05 .subtxtbg li:nth-child(3) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub0204_05 .subtxtbg li:nth-child(4) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } #sub0204_05 .sub02txt { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70%; } #sub0204_05 .sub02txt li.t1 { font-size:24px; color:#2d2d2d; font-weight:700; } #sub0204_05 .sub02txt li.t2 { padding-top:30px; font-size:17px; color:#858585; font-weight:400; line-height:180%; } #sub0204_05 .sub02txt li.t3 { position:absolute; left:50%; top:-35%; font-size:24px; color:#2d2d2d; font-weight:700; } #sub0204_05 .sub02txt li.t4 { position:absolute; left:50%; top:10%; } #sub0204_05 h3 { position:absolute; top:10%; left:10%; font-size:22px; font-weight:400; } .active#sub0204_05 .sub02txt li.t1 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active#sub0204_05 .sub02txt li.t2 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub0204_05 .sub02txt li.t3 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#sub0204_05 .sub02txt li.t4 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } #sub0204_06 { background:#f9f9f9; overflow:hidden; } #sub0204_06 .subtxtbg { float:left; position:absolute; top:0px; left:0px; width:50%; height:100%; background:url('/page_KR0/02_sub/images/0204_06.jpg')no-repeat 0 0; background-size: contain; background-attachment: fixed; } #sub0204_06 .sub02txt { float:left; position:absolute; top:28%; left:55%; } #sub0204_06 .sub02txt li.t1 { font-size:40px; color:#1a1a1a; font-weight:700; line-height:130%; } #sub0204_06 .sub02txt li.t2 { padding-top:20px; font-size:17px; color:#6d6d6d; font-weight:400; line-height:200%: } #sub0204_07 { background:#f9f9f9; overflow:hidden; } #sub0204_07 .subtxtbg { float:left; position:absolute; top:0px; left:0px; width:50%; height:100%; background:url('/page_KR0/02_sub/images/0204_07.jpg')no-repeat 0 0; background-size: contain; background-attachment: fixed; } #sub0204_07 .sub02txt { float:left; position:absolute; top:28%; left:55%; } #sub0204_07 .sub02txt li.t1 { font-size:40px; color:#1a1a1a; font-weight:700; line-height:130%; } #sub0204_07 .sub02txt li.t2 { padding-top:20px; font-size:17px; color:#6d6d6d; font-weight:400; line-height:200%: } .active#sub0204_06 .sub02txt li.t1 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0204_06 .sub02txt li.t2 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .active#sub0204_07 .sub02txt li.t1 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub0204_07 .sub02txt li.t2 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .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:950px; } .sub0801 { position:relative; width:100%; height:950px; overflow:hidden; animation: vodheight 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .sub0801 ul {position:absolute; top:44%; left:50%; transform: translate(-50%,0%); text-align:center; } .sub0801 ul li.title { font-size:78px; font-weight:700; color:#111111; animation: text-focus-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) both 2.3s; } .sub0801 ul li.con { font-size:21px; font-weight:500; color:#13c0d7; animation: fadeup 1.6s cubic-bezier(0.22, 1, 0.36, 1) both 2.8s; } .sub0801 video { display: inline-block; position: absolute; left: 50%; top: 0%; transform: translate(-50%, 0); min-width: 100%; min-height: 100%; height: auto; width: auto; } .vbg1 { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:rgba(255,255,255,0.6); border-right:1px solid #e5e3e0; animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.7s; box-sizing:border-box; } .vbg2 { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:rgba(255,255,255,0.6); border-right:1px solid #e5e3e0; animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; box-sizing:border-box; } .vbg3 { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:rgba(255,255,255,0.6); border-right:1px solid #e5e3e0; animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.9s; box-sizing:border-box; } .vbg4 { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:rgba(255,255,255,0.6); animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 2.0s; box-sizing:border-box; } .vbg9 { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:#fbfbfb; border-right:1px solid #e5e3e0; animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; box-sizing:border-box; } .vbg10 { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:#fbfbfb; border-right:1px solid #e5e3e0; animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; box-sizing:border-box; } .vbg11 { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:#fbfbfb; border-right:1px solid #e5e3e0; animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; box-sizing:border-box; } .vbg12 { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#fbfbfb; animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; box-sizing:border-box; } @keyframes vodheight{ from{ height:0px; } to{ height:950px; } } .sub0802wrap { position:relative; width:100%; height:1000px; } .sub0802 { position:relative; width:100%; height:1000px; background:#fbfbfb; overflow:hidden; animation: vodheight2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .sub0802 ul.noticetxt {position:absolute; top:40%; left:50%; transform: translate(-50%,0%); text-align:center; } .sub0802 ul.noticetxt li.title { font-size:78px; font-weight:700; color:#111111; animation: text-focus-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) both 2.3s; } .sub0802 ul.noticetxt li.con { font-size:21px; font-weight:500; color:#13c0d7; animation: fadeup 1.6s cubic-bezier(0.22, 1, 0.36, 1) both 2.8s; } @keyframes vodheight2 { from{ height:0px; } to{ height:1000px; } } #direction { position:absolute; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:1280px; height:682px; background:url('/page_KR0/08_sub/images/0802.jpg')no-repeat 50% 50%; animation: vodheight3 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } #direction .slick-slide { text-align:center; font-size:16px; font-weight:500; color:#ffffff; line-height:70px; } #direction .d1 { position:absolute !important; top:188px !important; left:466px !important; width:auto !important; height:56px !important; z-index:10 !important; } #direction .d2 { position:absolute !important; top:172px !important; left:416px !important; width:auto !important; height:56px !important; z-index:10 !important; } #direction .d3 { position:absolute !important; top:189px !important; left:482px !important; width:auto !important; height:56px !important; z-index:10 !important; } #direction .d4 { position:absolute !important; top:459px !important; left:571px !important; width:auto !important; height:56px !important; z-index:10 !important; } #direction .d5 { position:absolute !important; top:586px !important; left:566px !important; width:auto !important; height:56px !important; z-index:10 !important; } #direction .d6 { position:absolute !important; top:213px !important; left:506px !important; width:auto !important; height:56px !important; z-index:10 !important; } #direction span.bg1 { display:inline-block; width:34px; height:56px; background:url('/page_KR0/08_sub/images/directiontxtbg.png')no-repeat left bottom; vertical-align: top; } #direction span.bg2 { display:inline-block; width:34px; height:56px; background:url('/page_KR0/08_sub/images/directiontxtbg.png')no-repeat right bottom; vertical-align: top; } #direction span.bg3 { display:inline-block; height:56px; background:url('/page_KR0/08_sub/images/directiontxtbg2.png')no-repeat 50% bottom; vertical-align: top; } .sub0505 { position:relative; width:100%; height:1088px; min-width:1280px; background:url('/page_KR0/05_sub/images/0505.jpg')no-repeat 50% 0; } .sub0505_1 { position:relative; width:100%; height:1099px; min-width:1280px; background:url('/page_KR0/05_sub/images/0505_1.jpg')no-repeat 50% 0; } .sub0505_2 { position:relative; width:100%; height:850px; min-width:1280px; background:url('/page_KR0/05_sub/images/0505_2.jpg')no-repeat 50% 0; } .sub0505_3 { position:relative; width:100%; height:4228px; min-width:1280px; background:url('/page_KR0/05_sub/images/0505_3.jpg')no-repeat 50% 0; } .sub0504 { position:relative; width:100%; height:1086px; min-width:1280px; background:url('/page_KR0/05_sub/images/0504.jpg')no-repeat 50% 0; } .sub0504_01 { position:relative; width:100%; height:1103px; min-width:1280px; background:url('/page_KR0/05_sub/images/0504_01.jpg')no-repeat 50% 0; } .sub0504_02 { position:relative; width:100%; height:1109px; min-width:1280px; background:url('/page_KR0/05_sub/images/0504_02.jpg')no-repeat 50% 0; } .sub0504_03 { position:relative; width:100%; height:1099px; min-width:1280px; background:url('/page_KR0/05_sub/images/0504_03.jpg')no-repeat 50% 0; } .sub0504_04 { position:relative; width:100%; height:685px; min-width:1280px; background:url('/page_KR0/05_sub/images/0504_04.jpg')no-repeat 50% 0; } .sub0504_05 { position:relative; width:100%; height:1200px; min-width:1280px; background:url('/page_KR0/05_sub/images/0504_05.jpg')no-repeat 50% 0; } .sub0504_06 { position:relative; width:100%; height:1495px; min-width:1280px; background:url('/page_KR0/05_sub/images/0504_06.jpg')no-repeat 50% 0; } .subbox { display:none; position:relative; width:100%; } .subbox.active { display:block; } .subbox2 { display:none; position:relative; width:100%; } .subbox2.active { display:block; } #sub0501_02 { position:relative; width:100%; height:8468px; min-width:1280px; background:#ffffff url('/page_KR0/05_sub/images/0501_02.jpg')no-repeat 50% 0; } #sub0501_04 { position:relative; width:100%; height:7974px; min-width:1280px; background:#ffffff url('/page_KR0/05_sub/images/0501_04.jpg')no-repeat 50% 0; } #sub0501_05 { position:relative; width:100%; height:9263px; min-width:1280px; background:#ffffff url('/page_KR0/05_sub/images/0501_04.jpg')no-repeat 50% 0; } .subtab1 { display:none; position:fixed; top:100px; left:50%; transform:translate(-50%,-50%); width:385px; overflow:hidden; z-index:5; } .subtab1 ul { display: flex; justify-content: space-between; } .subtab1 ul li { position:relative; cursor:pointer; width:190px; height:61px; line-height:61px; text-align:center; font-size:16px; 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:100px; left:50%; transform:translate(-50%,-50%); width:385px; overflow:hidden; z-index:5; } .subtab2 ul { display: flex; justify-content: space-between; } .subtab2 ul li { position:relative; cursor:pointer; width:190px; height:61px; line-height:61px; text-align:center; font-size:16px; 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; } .modal5_1 .subtab2 { display:block; } .modal5_6 .subtab2 { display:block; } @keyframes vodheight3 { from{ height:0px; } to{ height:682px; } } .direction { animation: opa 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 3.2s; } #direction .slick-list { height:682px; } #direction .slick-slide { transition:all 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.4s !important; } #direction .slick-slide.slick-active { transition:all 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.4s !important; } .directionbt { animation: opa 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 3.2s; } .directionbt li { position:absolute; width:25px; height:36px; background:url('/page_KR0/08_sub/images/direction_off.png')no-repeat 0 0; cursor:pointer; } .directionbt li.on { background:url('/page_KR0/08_sub/images/direction_on.png')no-repeat 0 0; } .directionbt li.d_bt1 { top:155px; left:608px; } .directionbt li.d_bt2 { top:142px; left:587px; } .directionbt li.d_bt3 { top:167px; left:572px; } .directionbt li.d_bt4 { top:434px; left:690px; } .directionbt li.d_bt5 { top:560px; left:690px; } .directionbt li.d_bt6 { top:183px; left:593px; } .subsize2 { position:relative; width:50%; border-left:1px solid #e5e3e0; border-right:1px solid #e5e3e0; padding:110px 0; margin:0 auto; box-sizing:border-box; } .sub0803 { position:relative; width:720px; margin:0 auto; overflow:hidden; } .sub0803 p { font-size:30px; 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:86px; border:1px solid #000; padding:0 35px; margin-bottom:16px; font-size:20px; font-weight:700; color:#2a2a2a; } .sub0803 ul li.phone input { width:100%; height:86px; border:1px solid #000; padding:0 35px; margin-bottom:16px; font-size:20px; font-weight:700; color:#2a2a2a; } .sub0803 ul li.subject1 select { width:100%; height:86px; border:1px solid #000; padding:0 35px; margin-bottom:16px; font-size:20px; 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:186px; border:1px solid #000; padding:35px; margin-bottom:16px; font-size:17px; font-weight:300; color:#c8c8c8; font-family: 'Noto Sans KR', sans-serif; } .sub0803 ul li.subject2 { width:100%; height:86px; border:1px solid #000; padding:0 35px; margin-bottom:16px; box-sizing:border-box; } .sub0803 ul li div.subject2left { float:left; width:134px; line-height:84px; font-size:20px; font-weight:700; color:#2a2a2a; } .sub0803 ul li div.subject2right { display:block; float:left; width:400px; height:84px;line-height:84px; } .sub0803 ul li div.subject2right input { width:18px; height:18px; } .sub0803 ul li div.subject2right span { display:block; float:left; width:70px; height:84px; vertical-align:middle; } .sub0803 ul li div.subject2right span label { display:inline-block; padding-left:4px; font-size:17px; color:#2a2a2a; font-weight:400; vertical-align:middle; } .sub0803 ul li.fpv { width:100%; font-size:17px; 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: 24px; height: 24px; 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:86px; margin-top:50px; border:1px solid #000; background:#16c5d5; border:0px; font-size:28px; font-weight:700; color:#fff; font-family: 'Noto Sans KR', sans-serif; } .sub0803 ul li input::placeholder { color:#2a2a2a; } #sub02_05 { width:100%; min-width:1280px; } #sub02_05 h3 { position:absolute; top:10%; left:10%; font-size:22px; font-weight:400; } .active#sub02_05 .subtxtbg { position:absolute; top:0px; left:50%; width:100%; height:100%; background:#fff;transform: translate(-50%,0%); animation: topheight 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub02_05 .subtxtbg li { float:left; width:25%; height:100%; border-right:1px solid #ddd; box-sizing:border-box; } .sub02box { position:absolute; } .sub02box.sub02box1 { top:50%; left:20%; width:386px; transform: translate(-50%, -50%); } .sub02box.sub02box2 { top:40%; left:50%; width:386px; transform: translate(-50%, -50%); } .sub02box.sub02box3 { top:60%; left:80%; width:386px; transform: translate(-50%, -50%); } .sub02box.sub02box4 { top:50%; left:35%; width:386px; transform: translate(-50%, -50%); } .sub02box.sub02box5 { top:50%; left:65%; width:386px; transform: translate(-50%, -50%); } .sub02box li.boxbg { position:relative; width:386px; height:321px; border-bottom-right-radius:90px; 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:40px; width:100%; font-size:34px; font-weight:700; color:#000000; } .sub02box li.txt2 { margin-top:10px; width:100%; font-size:20px; font-weight:500; line-height:170%; color:#2d2d2d; } .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%; top:0px; left:0px; background:rgba(21,204,224,0.8); } .sub02box li.boxbg a span { opacity:1; display:block; position:absolute; top:50%; left:50%; width:132px; height:40px; transform: translate(-50%,-50%); text-align:center; line-height:38px; border:1px solid #fff; font-size:14px; font-weight:400; border-radius:40px; transition:all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; } .sub02box li.boxbg:hover a span { opacity:1; top:50%; } .snow3 { position:absolute; left: 18%; animation: paper2Ani 25.3s infinite; z-index: 3; transition: opacity 0.4s; width:42px; height:42px; background:#13c0d7; border-radius:100%; } .snowlogo { display:block; position:absolute; top:15%; right:23%; width:80px; height:80px; 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; } .active .sub02box.sub02box1 { animation: fadeup3 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active .sub02box.sub02box2 { animation: fadeup3 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active .sub02box.sub02box3 { animation: fadeup3 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } #sub02_06 { background-image: url(/page_KR0/02_sub/images/sub02_06.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub02_06 h3 { position:absolute; top:10%; left:10%; font-size:22px; font-weight:400; color:#fff; } #sub02_06 .titletxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } #sub02_06 .titletxt li { width:360px; padding-bottom:20px; font-size:40px; font-weight:700; color:#fff; overflow:hidden; } #sub02_06 .titletxt li.t1 { width:970px; font-size: 60px; text-align: center; padding-bottom:40px; } /*#sub02_06 .titletxt li.t2 { width:720px; padding-left: 280px; box-sizing: border-box; }*/ #sub02_06 .titletxt li:hover { color:#13c0d7; } #sub02_06 .titletxt li.t1:hover { color:#fff; } #sub02_06 .titletxt span { display:inline-block; vertical-align:super; font-size:26px; padding-left:10px; } #sub02_06 .titletxt a { float:right; display:inline-block; padding-top:18px; } #sub02_06 .t2:hover { color:#13c0d7; } #sub02_06 .t2:hover { color:#fff; } #sub02_06 .t2 span { display:inline-block; vertical-align:super; font-size:26px; padding-left:10px; } #sub02_06 .t2 a { float:right; display:inline-block; padding-top:18px; } #sub02_06_1 { background-image: url(/page_KR0/02_sub/images/vv1.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub02_06_1 h3 { position:absolute; top:10%; left:10%; font-size:22px; font-weight:400; color:#fff; } #sub02_06_1 .titletxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } #sub02_06_1 .titletxt li { width:360px; padding-bottom:20px; font-size:40px; font-weight:700; color:#fff; overflow:hidden; } #sub02_06_1 .titletxt li.t1 { width:970px; font-size: 60px; text-align: center; padding-bottom:40px; } #sub02_06_1 .titletxt li:hover { color:#13c0d7; } #sub02_06_1 .titletxt li.t1:hover { color:#fff; } #sub02_06_1 .titletxt li.new { position:absolute; top:-50px; left:-80px; } #sub02_06_1 .titletxt span { display:inline-block; vertical-align:super; font-size:26px; padding-left:10px; } #sub02_06_1 .titletxt a { float:right; display:inline-block; position:relative; bottom:22px;} #sub02_06_1 .t2:hover { color:#13c0d7;} #sub02_06_1 .t2:hover { color:#fff; } #sub02_06_1 .t2 span { display:inline-block; vertical-align:super; font-size:26px; padding-left:3px; } #sub02_06_1 .t2 a { float:right; display:inline-block;} #sub02_06_1.active .titletxt li.new { animation: new1 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } #sub02_06_1.active .titletxt li.t2 { animation: new2 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #sub02_07_1 { background-image: url(/page_KR0/02_sub/images/vv3.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub02_07_1 h3 { position:absolute; top:10%; left:10%; font-size:22px; font-weight:400; color:#fff; } #sub02_07_1 .titletxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } #sub02_07_1 .titletxt li { width:400px; padding-bottom:20px; font-size:40px; font-weight:700; color:#fff; overflow:hidden; } #sub02_07_1 .titletxt li.t1 { width:970px; font-size: 60px; text-align: center; padding-bottom:40px; } #sub02_07_1 .titletxt li:hover { color:#13c0d7; } #sub02_07_1 .titletxt li.t1:hover { color:#fff; } #sub02_07_1 .titletxt li.new { position:absolute; top:-50px; left:-80px; } #sub02_07_1 .titletxt span { display:inline-block; vertical-align:super; font-size:26px; padding-left:10px; } #sub02_07_1 .titletxt a { float:right; display:inline-block; position:relative; right:10px; bottom:26px;} #sub02_07_1 .t2:hover { color:#13c0d7;} #sub02_07_1 .t2:hover { color:#fff; } #sub02_07_1 .t2 span { display:inline-block; vertical-align:super; font-size:17.5px; padding-left:3px; } #sub02_07_1 .t2 a { float:right; display:inline-block;} #sub02_07_1.active .titletxt li.new { animation: new1 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } #sub02_07_1.active .titletxt li.t2 { animation: new2 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } @keyframes new1 { 0% { top:-110px; opacity:0; } 100% { top:-50px; opacity:1; } } @keyframes new2 { 0% { transform:translateY(80px); opacity:0; } 100% { transform:translateY(0px); opacity:1; } } .sub04pro#sub02_06 { background-image: url(/page_KR0/04_sub/images/sub02_06.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub04pro#sub02_06 .titletxt li { width:420px; padding-bottom:20px; font-size:50px; font-weight:700; color:#fff; overflow:hidden; } .sub04pro#sub02_06 .titletxt li:hover { color: #13c0d7; } .active#sub02_06 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; /*border-right:1px solid #505050;*/ animation: topheight 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; box-sizing:border-box; } .active#sub02_06 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:50%; height:100%; /*border-right:1px solid #505050;*/ animation: topheight 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; box-sizing:border-box; } .active#sub02_06 .titletxt { animation: text-focus-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active.sub04pro#sub02_06 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #fff; opacity:0.1; animation: topheight 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; box-sizing:border-box; } .active.sub04pro#sub02_06 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:50%; height:100%; border-right:1px solid #fff; opacity:0.1; animation: topheight 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; box-sizing:border-box; } #ieuleng div { box-sizing:border-box; font-size:40px; font-weight:700; color:#888888; z-index:0; opacity:0.4; } #ieuleng div span { display:inline-block; position:absolute; } #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: opa 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .active #ieuleng div span.t2 { animation: opa 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .active #ieuleng div span.t3 { animation: opa 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .active #ieuleng div span.t4 { animation: opa 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.9s; } .active #ieuleng div span.t5 { animation: opa 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.0s; } .active #ieuleng div span.t6 { animation: opa 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.1s; } .active #ieuleng div span.t7 { animation: opa 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .active #ieuleng div span.t8 { animation: opa 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.3s; } .active #ieuleng div span.t9 { animation: opa 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .active #ieuleng div span.t10 { animation: opa 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.5s; } #sub02_07 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:#f5fcfe; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_07 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:#f5fcfe; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_07 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:#f5fcfe; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_07 .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#f5fcfe; box-sizing:border-box; } .active#sub02_07 .subtxtbg li:nth-child(1) { animation: topheight 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 0.3s; } .active#sub02_07 .subtxtbg li:nth-child(2) { animation: topheight 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#sub02_07 .subtxtbg li:nth-child(3) { animation: topheight 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub02_07 .subtxtbg li:nth-child(4) { animation: topheight 1.1s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } #sub02_07 #ieuleng div { box-sizing:border-box; font-size:40px; font-weight:700; color:#ebebeb; z-index:0; opacity:0.8; } #sub02_07 .subtxt2 { position:absolute; top:12%; left:15%; } #sub02_07 .subtxt2 li.t1 { font-size:50px; font-weight:700; color:#000000; line-height:130%; } #sub02_07 .subtxt2 li.t1 span { color:#13c0d7; } #sub02_07 .subtxt2 li.t2 { font-size:24px; font-weight:400; color:#000000; } .circlebox { position:absolute; transform: translate(-50%,0); border-radius:100%; overflow:hidden; box-shadow: 5px 5px 25px #999; } .circlebox1 { top:35%; left:24%; width:354px; height:354px; } .circlebox2 { top:45%; left:35%; width:180px; height:180px; } .circlebox3 { top:35%; left:48%; width:173px; height:173px; } .circlebox4 { top:46%; left:58.5%; width:178px; height:178px; } .circlebox5 { top:53%; left:65%; width:124px; height:124px; } .circlebox6 { top:35%; left:80%; width:224px; height:224px; } .circlebox7 { top:65%; left:47%; width:217px; height:217px; } .circlebox8 { top:70%; left:75%; width:86px; height:86px; } .circlebox9 { top:66%; left:90%; width:138px; height:138px; } .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; } .active#sub02_08 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; box-sizing:border-box; } .active#sub02_08 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; box-sizing:border-box; } .active#sub02_08 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; box-sizing:border-box; } #sub02_08 .subtxt2 { position:absolute; top:18%; left:15%; } #sub02_08 .subtxt2 li.t1 { font-size:24px; font-weight:400; color:#7d7d7d; line-height:150%; } #sub02_08 .subtxt2 li.t2 { margin-top:20px; font-size:50px; font-weight:700; color:#000000; line-height:1; } #sub02_08 .subtxt2 li.t2 span { color:#13c0d7; } .engwrap { position:absolute; top:60%; left:50%; width:100%; transform: translate(-50%,-50%); } .eng_i { position:absolute; top:50%; left:32%; transform: translate(-50%,-50%); } .eng_e { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } .eng_u { position:absolute; top:50%; left:68%; transform: translate(-50%,-50%); } .eng_l { position:absolute; top:50%; left:86%; transform: translate(-50%,-50%); } .sub02_08bg { position:absolute; top:60%; left:50%; transform: translate(-50%,-50%); width:523px; height:523px; background:#f5fcfe; border-radius:100%; } .active#sub02_08 .subtxt2 li.t1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub02_08 .subtxt2 li.t2 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .active .eng_i { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .active .eng_e { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .active .eng_u { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .active .eng_l { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } #sub02_09 { background-image: url(/page_KR0/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:100%; font-size:24px; font-weight:500; color:#ffffff; text-align:center; line-height:200%; } .sub02_09txt div { position:relative; width:100%; margin-top:60px; } .sub02_09txt div a { display:block; width:132px; height:40px; line-height:38px; font-size:14px; 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:132px; height:40px; line-height:38px; font-size:14px; 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_10 { position:relative; width:100%; max-width:1920px; margin:0 auto; overflow:hidden; } #sub02_10 h3 { position:absolute; top:10%; left:10%; font-size:22px; font-weight:400; color:#000; } #sub02_10 .snowlogo { right:42%; } #sub02_10 .subtxt2 { position:absolute; top:20%; left:15%; } #sub02_10 .subtxt2 li.t1 { font-size:40px; font-weight:700; color:#000000; line-height:130%; } #sub02_10 .subtxt2 li.t2 { margin-top:40px; font-size:18px; font-weight:400; color:#000000; line-height:150%; } #sub02_10 .subtxt2 li.t3 { margin-top:20%; font-size:14px; font-weight:400; } #sub02_10 .subtxt2 li.t3 a { display:block; width:132px; height:40px; line-height:38px; font-size:14px; 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 li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_10 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_10 .subtxtbg li:nth-child(3) { float:left; position:absolute; top:0px; left:50%; width:50%; height:100%; box-sizing:border-box; } #sub02_10 .subtxtbg li:nth-child(3) span { display:inline-block; position:relative; top:65%; left:-1px; padding-left:20px; padding-right: 20px; border-left:1px solid #000; font-size:19px; font-weight:400; color:#272727; opacity:0; background: rgba(255, 255, 255, 0.6); } .active#sub02_10 h3 { animation: opa 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.3s; } .active#sub02_10 .subtxtbg li:nth-child(1) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .active#sub02_10 .subtxtbg li:nth-child(2) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub02_10 .subtxtbg li:nth-child(3) { animation: topheight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub02_10 .subtxtbg li:nth-child(3) span { animation: opa 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } .active#sub02_10 .subtxt2 li.t1 { animation: text-focus-in2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } .active#sub02_10 .subtxt2 li.t2 { animation: text-focus-in2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 1.8s; } .active#sub02_10 .subtxt2 li.t3 { animation: text-focus-in2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } #sub05_06 h3 { position:absolute; top:10%; left:10%; font-size:22px; font-weight:400; color:#000; } #sub05_06 .subtxt2 { position:absolute; top:25%; left:55%; } #sub05_06 .subtxt2 li.t1 { font-size:50px; font-weight:700; color:#000000; line-height:130%; } #sub05_06 .subtxt2 li.t2 { margin-top:40px; font-size:22px; font-weight:400; color:#000000; line-height:150%; } #sub05_06 .subtxt2 li.t3 { margin-top:10%; font-size:14px; font-weight:400; } #sub05_06 .subtxt2 li.t3 a { display:block; width:132px; height:40px; line-height:38px; font-size:14px; 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) ; } #sub05_06 .snowlogo { top:80%; right:10%; } #sub05_06 .subtxt2 li.t3 a:hover { color:#fff; background:#13c0d7; } #sub05_06 .subtxt2 li.t4 { margin-top:130px; padding-left:20px; border-left:1px solid #000; font-size:19px; font-weight:400; color:#272727; opacity:0; } .active#sub05_06 { position:relative; width:100%; height:100%; max-width:1920px; margin:0 auto; } .active#sub05_06 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0%; width:50%; height:100%; background:#e2e5e8 url('/page_KR0/05_sub/images/05drbg2.jpg')no-repeat 0 bottom; background-size:cover; animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; box-sizing:border-box; } .active#sub05_06 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; box-sizing:border-box; } .active#sub05_06 h3 { animation: opa 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .active#sub05_06 .subtxt2 li.t1 { animation: fadeleft 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.7s; } .active#sub05_06 .subtxt2 li.t2 { animation: fadeleft 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.0s; } .active#sub05_06 .subtxt2 li.t3 { animation: fadeleft 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.6s; } .active#sub05_06 .subtxt2 li.t4 { animation: fadeleft 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.3s; } #sub02_11 .subtxtbg2 li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_11 .subtxtbg2 li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_11 .subtxtbg2 li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_11 .subtxtbg2 li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#fff; box-sizing:border-box; } #sub02_11 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:#f5fcfe; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_11 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:#f5fcfe; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_11 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:#f5fcfe; border-right:1px solid #ebebeb; box-sizing:border-box; } #sub02_11 .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#f5fcfe; box-sizing:border-box; } .active#sub02_11 .subtxtbg li:nth-child(1) { animation: topheight 1.0s cubic-bezier(0.22, 1, 0.36, 1)both 0.5s; } .active#sub02_11 .subtxtbg li:nth-child(2) { animation: topheight 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub02_11 .subtxtbg li:nth-child(3) { animation: topheight 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub02_11 .subtxtbg li:nth-child(4) { animation: topheight 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } #sub02_11 .subtxt2 { position:absolute; top:46%; left:50%; transform: translate(-50%,-50%); width:100%; text-align:center; } #sub02_11 .subtxt2 li.t1 { font-size:22px; font-weight:400; color:#7a7a7a; line-height:170%; } #sub02_11 .subtxt2 li.t2 { margin-top:20px; font-size:80px; font-weight:700; color:#000000; line-height:130%; } #sub02_11 .subtxt2 li.t2 span { display:inline-block; color:#13c0d7; } .active#sub02_11 .subtxt2 li.t1 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.2s; } .active#sub02_11 .subtxt2 li.t2 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.6s; } .active#sub02_11 .subtxt2 li.t2 span { animation: text-focus-in 2.0s cubic-bezier(0.22, 1, 0.36, 1) both 2.2s; } #sub05_02 { background-image: url(/page_KR0/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:645px; text-align:center; } #sub05_02 .subtxt .imgs { position:relative; width:645px; height:208px; overflow:hidden; text-align:left; } .active#sub05_02 .subtxt .imgs { animation: imgwidth 0.3s 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:1280px; text-align:left; } #sub05_03 .subtxt li.subtitle1 { font-size:29px; font-weight:500; color:#323131; line-height:100%; } #sub05_03 .subtxt li.titletxt1 { font-size:70px; font-weight:700; color:#14c2d3; letter-spacing:-2px; line-height:120%; } #sub05_03 .subtxt li.contxt1 { font-size:18px; font-weight:400; color:#6c6c6c; line-height:180% } #sub05_03 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd;background:#fdfdfd; box-sizing:border-box; } #sub05_03 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd;background:#fdfdfd; box-sizing:border-box; } #sub05_03 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd;background:#fdfdfd; box-sizing:border-box; } #sub05_03 .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd;background:#fdfdfd; box-sizing:border-box; } #sub05_03 .subtxtbg { position:absolute; top:0px; left:50%; width:100%; height:100%; transform: translate(-50%,0%); } .active#sub05_03 .subtxtbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; } .active#sub05_03 .subtxtbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .active#sub05_03 .subtxtbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub05_03 .subtxtbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .active#sub05_03 .subtitle1 { animation: text-focus-in2 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.9s; } .active#sub05_03 .titletxt1 { animation: text-focus-in2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .active#sub05_03 .contxt1 { animation: text-focus-in2 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:1280px; text-align:left; } #sub05_04 .subtxt li.titletxt1 { font-size:60px; font-weight:700; color:#ffffff; line-height:140%; } #sub05_04 .subtxt li.contxt1 { font-size:25px; font-weight:500; color:#1dafbf; line-height:180%; letter-spacing:5px; } .active#sub05_04 .titletxt1 { animation: text-focus-in 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_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:1280px; text-align:left; } #sub05_04-1 .subtxt01 li.titletxt1 { font-size:40px; font-weight:700; color:#ffffff; line-height:130%; } #sub05_04-1 .subtxt01 li.contxt1 { font-size:25px; font-weight:500; color:#1dafbf; line-height:180%; letter-spacing:5px; } #sub05_04-1 .subtxt01 li.contxt2 { font-size:18px; font-weight:400; color:#ffffff; line-height:180%;} #sub05_04-1 .subtxt02 { position:absolute; top: 75%; left: 50%; transform: translate(-50%,-50%); width:1280px; text-align:right; } #sub05_04-1 .subtxt02 li.titletxt1 { font-size:40px; font-weight:700; color:#ffffff; line-height:130%; } #sub05_04-1 .subtxt02 li.contxt1 { font-size:25px; font-weight:500; color:#1dafbf; line-height:180%; letter-spacing:5px; } #sub05_04-1 .subtxt02 li.contxt2 { font-size:18px; font-weight:400; color:#ffffff; line-height:180%;} .active#sub05_04-1 .titletxt1 { animation: text-focus-in2 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.9s; } .active#sub05_04-1 .contxt1 { animation: text-focus-in2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .active#sub05_04-1 .contxt2 { animation: text-focus-in2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.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%; } #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:50%; width:100%; height:100%; transform: translate(-50%,0%); } #sub05_05 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #4bd4e3; 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:25%; width:25%; height:100%; border-right:1px solid #4bd4e3; 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:50%; width:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub05_05 .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:rgba(21,204,224,0.8); } #sub05_05 .titletxt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } #sub05_05 .titletxt div { position:relative; width:470px; margin-bottom:30px; font-size:50px; font-weight:700; color:#fff; } #sub05_05 .titletxt span { display:inline-block; position:absolute; top:18px; right:0px; cursor:pointer; } #sub05_05 #ieuleng div { box-sizing:border-box; font-size:40px; font-weight:700; color:#76d6e4; z-index:0; opacity:0.4; } .active#sub05_05 .subtxtbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .active#sub05_05 .subtxtbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub05_05 .subtxtbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .active#sub05_05 .subtxtbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .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_07 { background-image: url(/page_KR0/05_sub/images/sub05_07.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub03_07 { background:#f5fcfe; background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub05_08 .subtxt2 { position:absolute; top:15%; left:15%; } #sub05_08 .subtxt2 li.t1 { font-size:24px; font-weight:400; color:#000000; line-height:150%; } #sub05_08 .subtxt2 li.t2 { margin-top:20px; font-size:50px; font-weight:700; color:#000000; line-height:130%; } #sub05_08 .subtxt2 li.t2 span { color:#13c0d7; } .sub02_08bg { position:absolute; top:62%; left:50%; transform: translate(-50%,-50%); width:523px; height:523px; background:#f5fcfe; border-radius:100%; } .active .eng_i { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .active .eng_e { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .active .eng_u { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .active .eng_l { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .active#sub05_08 .subtxt2 li.t1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .active#sub05_08 .subtxt2 li.t2 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub05_08 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; box-sizing:border-box; } .active#sub05_08 .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; box-sizing:border-box; } .active#sub05_08 .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:#fff; border-right:1px solid #ebebeb; animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; box-sizing:border-box; } .active#sub05_08 .subtxt2 li.t3 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub05_08 .subtxt2 li.t4 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } #bottom_sns { } #bottom_sns .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:#f9f9f9; border-right:1px solid #ebebeb; box-sizing:border-box; } #bottom_sns .subtxtbg li:nth-child(2) { float:left; position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:#f9f9f9; border-right:1px solid #ebebeb; box-sizing:border-box; } #bottom_sns .subtxtbg li:nth-child(3) { float:left; position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:#f9f9f9; border-right:1px solid #ebebeb; box-sizing:border-box; } #bottom_sns .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#f9f9f9; } #bottom_sns .subtxt2 { position:absolute; top:44%; left:50%; transform: translate(-50%,-50%); width:642px; height:642px; text-align:center; background:#fff; border-radius:100%; } #bottom_sns .subtxt2 li.t1 { padding-top:136px; font-size:15px; font-weight:100; color:#13c0d7; font-style: italic; letter-spacing:1px; } #bottom_sns .subtxt2 li.t2 { padding-top:20px; font-size:50px; font-weight:700; color:#111111; line-height:140%; } #bottom_sns .subtxt2 li.t3 a { display:block; position:relative; width:197px; height:40px; line-height:38px; padding-left:22px; text-align:left; font-size:16px; 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:40px; } #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; } .snswrap { position:absolute; top:84%; left:50%; transform: translate(-50%,-50%); text-align:center; } .snswrap li { display:inline-block; margin:0 6px; } .active#bottom_sns .subtxtbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.1s; box-sizing:border-box; } .active#bottom_sns .subtxtbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; box-sizing:border-box; } .active#bottom_sns .subtxtbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; box-sizing:border-box; } .active#bottom_sns .subtxtbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .active#bottom_sns .subtxt2 { animation: opa 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .active#bottom_sns .subtxt2 li.t1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .active#bottom_sns .subtxt2 li.t2 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.5s; } .active#bottom_sns .subtxt2 li.t3 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .active#bottom_sns .snswrap { animation: fadeup3 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.1s; } #sub05_09 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #4bd4e3; 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:25%; width:25%; height:100%; border-right:1px solid #4bd4e3; 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:50%; width:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub05_09 .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:rgba(21,204,224,0.8); } .active#sub05_09 .subtxtbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .active#sub05_09 .subtxtbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .active#sub05_09 .subtxtbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .active#sub05_09 .subtxtbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.9s; } #sub05_09 .titletxt1 { line-height:100%; } #sub05_09 .titletxt1 span.t1 { line-height: 130%;display:block; font-size:50px; } #sub05_09 .titletxt1 span.t2 { line-height: 130%;display:block; font-size:50px; } #sub05_09 .titletxt1 span.t3 {line-height: 130%; display:block; font-size:50px; } .active#sub05_09 .titletxt1 span.t1 { line-height: 130%;display:block; font-size:50px; animation: text-focus-in .8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.2s; } .active#sub05_09 .titletxt1 span.t2 { line-height: 130%;display:block; font-size:50px; animation: text-focus-in .8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.8s; } .active#sub05_09 .titletxt1 span.t3 {line-height: 130%; display:block; font-size:50px; animation: text-focus-in .8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 2.4s; } .active#sub05_09 .contxt1 {animation: fadeup 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 3.2s; } .sub02_dr { background-image: url(/page_KR0/06_sub/images/sub06_dr.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub03_dr { background-image: url(/page_KR0/06_sub/images/sub06_dr.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub04_dr { background-image: url(/page_KR0/06_sub/images/sub06_dr.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub05_dr { background-image: url(/page_KR0/06_sub/images/sub06_dr.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub06_dr { background-image: url(/page_KR0/06_sub/images/sub06_dr.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .sub07_dr { background-image: url(/page_KR0/06_sub/images/sub06_dr.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub05_10 .subtxtbg li:nth-child(1) { float:left; position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e9e9e9; 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:25%; width:25%; height:100%; border-right:1px solid #e9e9e9; 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:50%; width:25%; height:100%; border-right:1px solid #e9e9e9; background:rgba(255,255,255,0.8); box-sizing:border-box; } #sub05_10 .subtxtbg li:nth-child(4) { float:left; position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:rgba(255,255,255,0.8); } #sub05_10 h3 { position:absolute; top:15%; left:10%; font-size:22px; font-weight:400; color:#000; } #sub05_10 .subtxt2 { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:950px; height:450px; } #sub05_10 .subtxt2 li.t1 { position:absolute; top:0px; left:0px; font-size:44px; font-weight:700; color:#17c5da; line-height:130%; } #sub05_10 .subtxt2 li.t2 { position:absolute; top:156px; left:310px; font-size:21px; font-weight:500; color:#2b2b2b; line-height:170%; } #sub05_10 .subtxt2 li.t3 { position:absolute; top:156px; left:478px; font-size:21px; 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:55px; height:55px; 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.250, 0.460, 0.450, 0.940) 0.3s; opacity:0; } .active#sub05_06 h3 { animation: opa 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .active#sub05_10 .subtxt2 li.t1 { animation: text-focus-in 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.9s; } .active#sub05_10 .subtxt2 li.t2 { animation: fadeleft 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.5s; } .active#sub05_10 .subtxt2 li.t3 { animation: faderight 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .active#sub05_10 .snowlogo2 { top:80%; opacity:1; } .active#sub05_10 .subtxtbg li:nth-child(1) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .active#sub05_10 .subtxtbg li:nth-child(2) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .active#sub05_10 .subtxtbg li:nth-child(3) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#sub05_10 .subtxtbg li:nth-child(4) { animation: topheight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.9s; } #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:70%; line-height:140%; } .active#sub06_02 .titletxt1 span:nth-child(1) { display:inline-block; animation: text-focus-in2 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: text-focus-in2 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; width:1280px; margin:0 auto; text-align:left; } #sub06_03 .subtxt4 li.subtitle1 { position:absolute; top:292px; left:0; font-size:29px; font-weight:700; color:#323131; line-height:100%; } #sub06_03 .subtxt4 li.titletxt1 { position:absolute; top:312px; left:0; font-size:60px; font-weight:700; color:#14c2d3; letter-spacing:-1px; line-height:120%; } #sub06_03 .subtxt4 li.contxt1 { position:absolute; top:628px; left:50%; font-size:60px; font-weight:700; color:#000; letter-spacing:-1px; line-height:120%; } #sub06_03 .subtxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd;background:#fdfdfd; box-sizing:border-box; } #sub06_03 .subtxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd;background:#fdfdfd; box-sizing:border-box; } #sub06_03 .subtxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd;background:#fdfdfd; box-sizing:border-box; } #sub06_03 .subtxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd;background:#fdfdfd; box-sizing:border-box; } .active#sub06_03 .subtxtbg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub06_03 .subtxtbg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .active#sub06_03 .subtxtbg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .active#sub06_03 .subtxtbg li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .active#sub06_03 .subtitle1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .active#sub06_03 .titletxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.5s; } .active#sub06_03 .contxt1 { animation: fadeleft 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } #sub06_04 { background-image: url(/page_KR0/06_sub/images/sub06_04.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } .active#sub06_04 .titletxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub06_04 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } #sub06_05 { background-image: url(/page_KR0/06_sub/images/sub06_05.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub06_06 h3 { position:absolute; top:10%; left:10%; font-size:22px; font-weight:400; color:#000; } #sub06_06 .subtxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd;background:#ffffff; box-sizing:border-box; } #sub06_06 .subtxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd;background:#ffffff; box-sizing:border-box; } #sub06_06 .subtxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd;background:#ffffff; box-sizing:border-box; } #sub06_06 .subtxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd;background:#ffffff; box-sizing:border-box; } .active#sub06_06 .subtxtbg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.1s; } .active#sub06_06 .subtxtbg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; } .active#sub06_06 .subtxtbg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; } .active#sub06_06 .subtxtbg li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } #strength { position:relative; width:100%; min-width:1300px; height:717px; padding-top:150px; margin:0 auto; } #strength .strength_sl{ position:relative; margin-left:20%; padding-left:60px; width:100%; overflow: hidden; padding-top:50px; 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:40px; overflow:hidden; } #strength .strength_sl ul li { float:left; width:374px; margin-right:20px; cursor:pointer; } #strength .strength_sl ul li div.imgs { width:100%; height:444px; overflow:hidden; } #strength .strength_sl ul li div.txt { position:relative; width:90%; padding:20px 5% 0 5%; text-align:left; box-sizing:border-box; } #strength .strength_sl ul li div.txt span.title { display:block; width:100%; font-size:19px; font-weight:700; color:#000000; letter-spacing:-1px; line-height:140%; } #strength .strength_sl ul li div.txt span.con { padding-top:20px; display:block; width:100%; font-size:12px; font-weight:400; color:#4a4a4a; } #strength .scrollbar { margin-left:20%; 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; } #hotel { position:relative; width:100%; min-width:1300px; height:717px; padding-top:200px; margin:0 auto; overflow: hidden; } #hotel p { padding-left:20%; box-sizing:border-box; width:100%; font-size:48px; font-weight:700; color:#000000; } #hotel .hotel_sl{ position:relative; margin-left:20%; width:100%; overflow: hidden; padding-top:50px; box-sizing:border-box; } #hotel .hotel_sl ul.hotel_ul { position:relative; margin:0 auto; overflow:hidden; } #hotel .hotel_sl ul.hotel_ul li.hotelview { float:left; width:892px; height:546px; padding:90px 100px; cursor:pointer; background:#f5fcfe; box-sizing:border-box; } #hotel .hotel_sl ul.hotel_ul li.hotelview ul.txt { position:relative; width:100%; text-align:left; box-sizing:border-box; } #hotel .hotel_sl ul.hotel_ul li.hotelview ul.txt li.title { display:block; width:100%; font-size:30px; font-weight:700; color:#000000; letter-spacing:-1px; line-height:140%; } #hotel .hotel_sl ul.hotel_ul li.hotelview ul.txt li.con { padding-top:10px; margin-bottom:56px; display:block; width:100%; font-size:13px; font-weight:300; color:#4a4a4a; line-height:170%; } #hotel .hotel_sl ul.hotel_ul li.hotelview ul.txt li.linkbt a { display:block; position:relative; width:200px; height:46px; line-height:46px; border-bottom:1px solid #d8d8d8; font-size:14px; font-weight:500; color:#828282; } #hotel .hotel_sl ul.hotel_ul li.hotelview ul.txt li.linkbt span.title { display:inline-block; width:84px; font-size:18px; font-weight:700; color:#000000; } #hotel .hotel_sl ul.hotel_ul li.hotelview ul.txt li.linkbt span.plus { display:inline-block; position:absolute; top:12px; right:0px; width:23px; height:23px; line-height:23px; text-align:center; border:1px solid #13c0d7; font-size:12px; font-weight:700; color:#13c0d7; border-radius:100%; } #hotel .scrollbar { margin-left:20%; height: 8px; margin-bottom:10%; background: #dbdbdb; line-height: 0; } #hotel .scrollbar .handle { width: 100px; height: 100%; background: #13c0d7; cursor: pointer; } #hotel .scrollbar .mousearea{ position: absolute; top: -9px; left: 0; width: 100%; height: 20px; } #sub03_02 { background-image: url(/page_KR0/03_sub/images/sub03_02.jpg); background-size: cover; background-attachment: fixed; } #sub03_02 .subtxt { position:absolute; top:35%; left:50%; transform: translate(-50%,0); width:1200px; text-align:left; } #sub03_02 .subtxt .titletxt1 { font-size:68px; } .active#sub03_02 .titletxt1 span:nth-child(1) { display:inline-block; animation: text-focus-in2 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.5s; } .active#sub03_02 .titletxt1 span:nth-child(3) { display:inline-block; animation: text-focus-in2 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.2s; } #sub10_02 { background-image: url(/page_KR0/10_sub/images/10_1.jpg); background-size: cover; background-attachment: fixed; } #sub10_02 .subtxt { position:absolute; top:35%; left:50%; transform: translate(-50%,0); width:1200px; text-align:left; } #sub10_02 .subtxt .titletxt1 { font-size:68px; } .active#sub10_02 .titletxt1 span:nth-child(1) { display:inline-block; animation: text-focus-in2 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.5s; } .active#sub10_02 .titletxt1 span:nth-child(3) { display:inline-block; animation: text-focus-in2 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.2s; } #sub03_03 { background-image: url(/page_KR0/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:50%; margin:0 auto; text-align:left; } #sub03_03 .subtxt4 li.titletxt1 { font-size:60px; font-weight:700; color:#14c2d3; letter-spacing:-1px; line-height:130%; } #sub03_03 .subtxt4 li.contxt1 { font-size:29px; font-weight:700; color:#323131; } #sub03_03 .subtxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e9e9e9; background:#fdfdfd; box-sizing:border-box; } #sub03_03 .subtxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e9e9e9; background:#fdfdfd; box-sizing:border-box; } #sub03_03 .subtxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e9e9e9; background:#fdfdfd; box-sizing:border-box; } #sub03_03 .subtxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#fdfdfd; box-sizing:border-box; } .active#sub03_03 .subtxtbg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub03_03 .subtxtbg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .active#sub03_03 .subtxtbg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .active#sub03_03 .subtxtbg li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .active#sub03_03 .titletxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .active#sub03_03 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } #sub03_03.sub10_03 { background-image: url(/page_KR0/10_sub/images/10_1.jpg); background-size: cover; background-attachment: fixed; } .sub10_04 { background-image: url(/page_KR0/10_sub/images/10_1.jpg) !important; max-height:100%; background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub03_04 { background-image: url(/page_KR0/03_sub/images/sub03_04.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub03_04 .subtxt { top: 64%; width:60%; text-align:left; } #sub03_04 .subtxt .titletxt1 { font-size:60px; } .active#sub03_04 .titletxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub03_04 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .sub1001_01 { position:relative; width:100%; height:1970px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1001_1.jpg')no-repeat 50% 0; } .sub1001_02 { position:relative; width:100%; height:1031px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1001_2.jpg')no-repeat 50% 0; } .sub1001_03 { position:relative; width:100%; height:1019px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1001_3.jpg')no-repeat 50% 0; } .sub1001_04 { position:relative; width:100%; height:1037px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1001_4.jpg')no-repeat 50% 0; } .sub1001_05 { position:relative; width:100%; height:1082px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1001_5.jpg')no-repeat 50% 0; } .sub1002 { position:relative; width:100%; height:3510px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1002.jpg')no-repeat 50% 0; } .sub1003 { position:relative; width:100%; height:1970px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1003.jpg')no-repeat 50% 0; } .sub1003_01 { position:relative; width:100%; height:1041px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1003_1.jpg')no-repeat 50% 0; } .sub1003_02 { position:relative; width:100%; height:1197px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1003_2.jpg')no-repeat 50% 0; } .sub1003_03 { position:relative; width:100%; height:965px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1003_3.jpg')no-repeat 50% 0; } .sub1003_04 { position:relative; width:100%; height:1462px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1003_4.jpg')no-repeat 50% 0; } .sub1003_05 { position:relative; width:100%; height:1581px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1003_5.jpg')no-repeat 50% 0; } .sub1003_06 { position:relative; width:100%; height:1544px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1003_6.jpg')no-repeat 50% 0; } .sub1004 { position:relative; width:100%; height:3756px; min-width:1280px; background:#ffffff url('/page_KR0/10_sub/images/1004.jpg')no-repeat 50% 0; } #sub04_02 { background-image: url(/page_KR0/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:1200px; text-align:left; } #sub04_02 .subtxt .titletxt1 { font-size:68px; } .active#sub04_02 .titletxt1 span:nth-child(1) { display:inline-block; animation: text-focus-in2 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.5s; } .active#sub04_02 .titletxt1 span:nth-child(3) { display:inline-block; animation: text-focus-in2 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.2s; } #sub04_03 { background-image: url(/page_KR0/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:1280px; margin:0 auto; text-align:left; } #sub04_03 .subtxt4 li.titletxt1 { font-size:60px; font-weight:700; color:#fff; letter-spacing:-1px; line-height:140%; } #sub04_03 .subtxt4 li.contxt1 { font-size:24px; font-weight:700; color:#fff; } #sub04_03 .subtxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub04_03 .subtxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub04_03 .subtxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub04_03 .subtxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } .active#sub04_03 .subtxtbg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub04_03 .subtxtbg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .active#sub04_03 .subtxtbg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .active#sub04_03 .subtxtbg li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .active#sub04_03 .titletxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .active#sub04_03 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } #sub04_04 { background-image: url(/page_KR0/04_sub/images/sub04_04.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub04_04 .subtxt { width:1040px; text-align:left; } .active#sub04_04 .titletxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .active#sub04_04 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #sub04_05 { background-image: url(/page_KR0/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; } #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: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active#sub07_02 #btn-play {animation: text-focus-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } #sub07_03 { background-image: url(/page_KR0/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:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub07_03 .subtxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub07_03 .subtxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub07_03 .subtxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; 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 .subtxtbg li:nth-child(4) { animation: topheight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 1.0s; } .active#sub07_03 .titletxt1 { animation: text-focus-in 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .active#sub07_03 .contxt1 { animation: text-focus-in2 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 1.7s; } #sub07_04 h3 { position:absolute; top:15%; left:10%; font-size:22px; font-weight:400; 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:10%; text-align:left; } #sub07_04 .subtxt5 .titletxt1 { font-size:50px; font-weight:700; color:#ffffff; letter-spacing:-1px; } #sub07_04 .subtxt5 .contxt1 { font-size:24px; font-weight:500; color:#ffffff; } .active#sub07_04 h3 {animation: text-focus-in2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .active#sub07_04 .titletxt1 { animation: text-focus-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .active#sub07_04 .contxt1 { animation: text-focus-in2 0.8s 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: text-focus-in2 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.8s; } .active#sub07_06 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } #sub07_06 .subtxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub07_06 .subtxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub07_06 .subtxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #4bd4e3; background:rgba(21,204,224,0.8); box-sizing:border-box; } #sub07_06 .subtxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:rgba(21,204,224,0.8); box-sizing:border-box; } .active#sub07_06 .subtxtbg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .active#sub07_06 .subtxtbg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .active#sub07_06 .subtxtbg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .active#sub07_06 .subtxtbg li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .icon07 { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:844px; height:740px; background:url('/page_KR0/07_sub/images/07iconbg.png')no-repeat 50% 64%; } .icon07 ul.icon07_1 { position:absolute; top:0px; left:300px; text-align:center; } .icon07 ul.icon07_2 { position:absolute; bottom:0px; left:30px; text-align:center; } .icon07 ul.icon07_3 { position:absolute; bottom:0px; right:30px; text-align:center; } .icon07 ul li.txt { font-size:20px; font-weight:400; color:#fff; } .icon07 ul li.txt span { font-size:32px; font-weight:700; } .icontitle { position:absolute; top:58%; left:50%; transform: translate(-50%,-50%); font-size:34px; 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: text-focus-in 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.7s; } .active .icon07 ul.icon07_2 { animation: text-focus-in 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 2.2s; } .active .icon07 ul.icon07_3 { animation: text-focus-in 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 2.7s; } #sub07_07 { background-image: url(/page_KR0/07_sub/images/sub07_07.jpg); background-size: cover; background-attachment: fixed; background-position:50% 50%; } #sub07_07 .subtxt5 { position:absolute; top:20%; left:10%; text-align:left; } #sub07_07 .subtxt5 .titletxt1 { font-size:50px; font-weight:700; color:#ffffff;line-height:130%; } #sub07_07 .subtxt5 .contxt1 { padding-left:20px; font-size:21px; font-weight:400; color:#ffffff; line-height:160%; } .active#sub07_07 .titletxt1 { animation: fadeup 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.5s; } .active#sub07_07 .contxt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.9s; } #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 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:930px; } #wellbodywrap div.well_woman2 { float:left; width:430px; height:430px; border-radius:100%; background:url('/page_KR0/02_sub/images/well_body_woman2.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 { float:right; width:430px; height:430px; border-radius:100%; background:url('/page_KR0/02_sub/images/well_body_man2.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_woman2:hover { float:left; width:430px; height:430px; 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; } #wellbodywrap div.well_man2:hover { float:right; width:430px; height:430px; 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; } /* #wellwrap div.well_woman:hover { float:left; width:50%; height:100%; background:url('/page_KR0/02_sub/images/well_woman.jpg')no-repeat 50% 0; background-size:cover; } #wellwrap div.well_man:hover { float:left; width:50%; height:100%; background:url('/page_KR0/02_sub/images/well_man.jpg')no-repeat 50% 0; background-size:cover; } */ #wellbodywrap p { position:absolute; top:20%; left:50%; transform:translate(-50%,-50%); font-size:42px; font-weight:700; color:#ffffff; letter-spacing:-1px; /* box-shadow: 7px 7px 33px -4px #c4c4c4; */ /* width:454px; height:74px; border-radius:60px; background:#13c0d7; */ text-align:center; /* line-height:74px; */ box-sizing:border-box; /* border:1px solid #0eb5cb; */ } /* #wellbodywrap { position: fixed; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:0%; z-index: 150; background:#fff; overflow-y: auto; overflow-x: hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #wellbodywrap div.well_woman2 { float:left; width:50%; height:100%; background:url('/page_KR0/02_sub/images/well_body_woman2.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 { float:left; width:50%; height:100%; background:url('/page_KR0/02_sub/images/well_body_man2.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_woman2:hover { float:left; width:50%; height:100%; background:url('/page_KR0/02_sub/images/well_body_woman.jpg')no-repeat 50% 0; background-size:cover; } #wellbodywrap div.well_man2:hover { float:left; width:50%; height:100%; background:url('/page_KR0/02_sub/images/well_body_man.jpg')no-repeat 50% 0; background-size:cover; } #wellbodywrap p { position:absolute; top:10%; left:50%; transform:translateX(-50%); font-size:32px; font-weight:700; color:#ffffff; letter-spacing:-1px; box-shadow: 7px 7px 33px -4px #c4c4c4; width:454px; height:74px; border-radius:60px; background:#13c0d7; text-align:center; line-height:74px; box-sizing:border-box; border:1px solid #0eb5cb; } */ #wellbodywrap.well-1 { height:100%; } #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); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #wellwrap4.active { height:100%; } #wellwrap4 .woman_view { position:relative; width:100%; max-width:1920px; min-width:1280px; height:1037px; margin:0 auto; background:url('/page_KR0/02_sub/images/womanbodybg.jpg')no-repeat 50% 50%; } #wellwrap4 ul.txt { position:absolute; top:60%; left:10%; } #wellwrap4 ul.txt li.t1 { font-size:22px; font-weight:700; color:#fff; } #wellwrap4 ul.txt li.t2 { margin-top:10px; font-size:40px; font-weight:700; color:#fff; line-height:120%; } #wellwrap4 .womanclick li.wcbt.wc1 { top:91px; right:318px; } #wellwrap4 .womanclick li.wcbt.wc2 { top:181px; right:220px; } #wellwrap4 .womanclick li.wcbt.wc3 { top:515px; right:134px; } #wellwrap4 .womanclick li.wcbt.wc4 { top:427px; right:180px; } #wellwrap4 .womanclick li.wcbt.wc5 { top:423px; right:348px; } #wellwrap4 .womanclick li.wcbt.wc6 { top:372px; right:485px; } #wellwrap4 .womanclick li.wcbt.wc7 { top:750px; right:180px; } #wellwrap4 .womanclick li.wcbt.wc8 { top:930px; right:422px; } #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); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #wellwrap5.active { height:100%; } #wellwrap5 .woman_view { position:relative; width:100%; max-width:1920px; min-width:1280px; height:1037px; margin:0 auto; background:url('/page_KR0/02_sub/images/manbodybg.jpg')no-repeat 50% 50%; } #wellwrap5 ul.txt { position:absolute; top:60%; left:10%; } #wellwrap5 ul.txt li.t1 { font-size:22px; font-weight:700; color:#fff; } #wellwrap5 ul.txt li.t2 { margin-top:10px; font-size:40px; font-weight:700; color:#fff; line-height:120%; } #wellwrap5 .womanclick li.wcbt.wc1 { top:57px; right:477px; } #wellwrap5 .womanclick li.wcbt.wc2 { top:240px; right:199px; } #wellwrap5 .womanclick li.wcbt.wc3 { top:444px; right:318px; } #wellwrap5 .womanclick li.wcbt.wc4 { top:414px; right:164px; } #wellwrap5 .womanclick li.wcbt.wc5 { top:355px; right:450px; } #wellwrap5 .womanclick li.wcbt.wc6 { top:424px; right:598px; } #wellwrap5 .womanclick li.wcbt.wc7 { top:704px; right:495px; } #wellwrap5 .womanclick li.wcbt.wc8 { top:940px; right:292px; } #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 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:930px; } #wellwrap div.well_woman { float:left; width:430px; height:430px; border-radius:100%; background:url('/page_KR0/02_sub/images/well_woman2.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 { float:right; width:430px; height:430px; border-radius:100%; background:url('/page_KR0/02_sub/images/well_man2.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_woman:hover { float:left; width:430px; height:430px; 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; } #wellwrap div.well_man:hover { float:right; width:430px; height:430px; 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; } /* #wellwrap div.well_woman:hover { float:left; width:50%; height:100%; background:url('/page_KR0/02_sub/images/well_woman.jpg')no-repeat 50% 0; background-size:cover; } #wellwrap div.well_man:hover { float:left; width:50%; height:100%; background:url('/page_KR0/02_sub/images/well_man.jpg')no-repeat 50% 0; background-size:cover; } */ #wellwrap p { position:absolute; top:20%; left:50%; transform:translate(-50%,-50%); font-size:42px; font-weight:700; color:#ffffff; letter-spacing:-1px; /* box-shadow: 7px 7px 33px -4px #c4c4c4; */ /* width:454px; height:74px; border-radius:60px; background:#13c0d7; */ text-align:center; /* line-height:74px; */ box-sizing:border-box; /* border:1px solid #0eb5cb; */ } #wellwrap.well-1 { height:100%; } #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.3s cubic-bezier(0.5, 0, 0.1, 1); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } #wellwrap2.active { height:100%; } #wellwrap2 .woman_view { position:relative; width:100%; max-width:1920px; min-width:1280px; height:1037px; margin:0 auto; background:url('/page_KR0/02_sub/images/womanbg.jpg')no-repeat 50% 50%; } #wellwrap2 ul.txt { position:absolute; top:60%; left:10%; } #wellwrap2 ul.txt li.t1 { font-size:22px; font-weight:700; color:#fff; } #wellwrap2 ul.txt li.t2 { margin-top:10px; font-size:40px; font-weight:700; color:#fff; line-height:120%; } .woman_view2 { position:relative; width:100%; max-width:1920px; min-width:1280px; height:1037px; margin:0 auto; background:url('/page_KR0/02_sub/images/womanbg2.jpg')no-repeat 50% 0; } .woman_view2 div { position:relative; width:1280px; margin:0 auto; } .woman_view2 div a { display:block; position:absolute; top:655px; left:794px; width:232px; height:40px; } #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 { position:relative; width:100%; max-width:1920px; min-width:1280px; height:1037px; margin:0 auto; background:url('/page_KR0/02_sub/images/manbg.jpg')no-repeat 50% 50%; } #wellwrap3 ul.txt { position:absolute; top:60%; left:10%; } #wellwrap3 ul.txt li.t1 { font-size:22px; font-weight:700; color:#fff; } #wellwrap3 ul.txt li.t2 { margin-top:10px; font-size:40px; 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; } /* .woman-con { position:absolute; top:15%; left:10%; padding:40px 0 0 40px; } .woman-con ul li { position:relative; margin-bottom:10px; font-size:18px; font-weight:700; color:#000; cursor:pointer; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } .woman-con ul li span { display:inline-block; opacity:0; width:26px; height:26px; color:#fff; margin-left:18px; line-height:26px; text-align:center; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.3s; border-radius:100%; background:#34c4d5; } .woman-con ul li:hover { color:#fff; } .woman-con ul li:hover span { opacity:1; margin-left:8px; } .woman-con .figure { position:absolute; top:-40px; left:-40px; width:79px; height:79px; } .woman-con .figure img { width:100%; } */ .womanclick { position:relative; width:1280px; margin:0 auto; } .womanclick li.wcbt { position:absolute; width:56px; height:36px; background:url('/page_KR0/02_sub/images/wcbg.png')no-repeat 0 50%; cursor:pointer; z-index:0; } .womanclick li.wcbt:hover,.womanclick li.wcbt.active { width:56px; height:36px; background:url('/page_KR0/02_sub/images/wcbg_on.png')no-repeat 0 50%; z-index:1; } .womanclick li.wcbt .wc-view { position:absolute; top:0px; left:56px; 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:10px 10px; font-size:15px; font-weight:400; color:#000; cursor:pointer; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } .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; 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:40px 50px; width:550px; background:#fff; } .wc-view li div.wcbtconview .figure { position:absolute; top:-40px; left:-40px; width:79px; height:79px; } .wc-view li div.wcbtconview .figure img { width:100%; } .wc-view li div.wcbtconview dl dt { font-size:20px; font-weight:700; color:#000; line-height:100%; } .wc-view li div.wcbtconview dl dd { margin-top:12px; font-size:16px; font-weight:400; color:#878787; line-height:160%; } .womanclick li.wcbt .wc-view li:hover div.wcbtconview { opacity:1; top:15%; right:60%; } .womanclick li.wcbt .wc-view li:hover div.wcbtconview div { display:block; } #wellwrap2 .wc-view#w-con5 li { width:270px; } #wellwrap2 .wc-view#w-con8 li { width:340px; } #wellwrap2 .wc-view#w-con10 li { width:250px; } #wellwrap2 .wc-view#w-con15 li { width:250px; } #wellwrap3 .wc-view#w-con5 li { width:270px; } #wellwrap3 .wc-view#w-con8 li { width:340px; } #wellwrap3 .wc-view#w-con10 li { width:250px; } #wellwrap3 .wc-view#w-con15 li { width:250px; } #wellwrap4 .wc-view#w-con6 li { width:200px; } #wellwrap4 .wc-view#w-con8 li { width:240px; } #wellwrap5 .wc-view#w-con6 li { width:200px; } #wellwrap5 .wc-view#w-con8 li { width:240px; } .womanclick li.wcbt.wc1 { top:79px; right:120px; } .womanclick li.wcbt.wc2 { top:196px; right:408px; } .womanclick li.wcbt.wc3 { top:287px; right:278px; } .womanclick li.wcbt.wc4 { top:335px; right:266px; } .womanclick li.wcbt.wc5 { top:353px; right:374px; } .womanclick li.wcbt.wc6 { top:366px; right:216px; } .womanclick li.wcbt.wc7 { top:359px; right:155px; } .womanclick li.wcbt.wc8 { top:432px; right:570px; } .womanclick li.wcbt.wc9 { top:458px; right:492px; } .womanclick li.wcbt.wc10 { top:475px; right:296px; } .womanclick li.wcbt.wc11 { top:532px; right:352px; } .womanclick li.wcbt.wc12 { top:550px; right:201px; } .womanclick li.wcbt.wc13 { top:630px; right:280px; } .womanclick li.wcbt.wc14 { top:768px; right:340px; } .womanclick li.wcbt.wc15 { top:830px; right:224px; } #wellwrap3 .womanclick li.wcbt.wc1 { top:102px; right:200px; } #wellwrap3 .womanclick li.wcbt.wc2 { top:226px; right:218px; } #wellwrap3 .womanclick li.wcbt.wc3 { top:285px; right:395px; } #wellwrap3 .womanclick li.wcbt.wc4 { top:330px; right:415px; } #wellwrap3 .womanclick li.wcbt.wc5 { top:353px; right:316px; } #wellwrap3 .womanclick li.wcbt.wc6 { top:392px; right:391px; } #wellwrap3 .womanclick li.wcbt.wc7 { top:349px; right:454px; } #wellwrap3 .womanclick li.wcbt.wc8 { top:420px; right:108px; } #wellwrap3 .womanclick li.wcbt.wc9 { top:472px; right:242px; } #wellwrap3 .womanclick li.wcbt.wc10 { top:475px; right:416px; } #wellwrap3 .womanclick li.wcbt.wc11 { top:542px; right:176px; } #wellwrap3 .womanclick li.wcbt.wc12 { top:530px; right:452px; } #wellwrap3 .womanclick li.wcbt.wc13 { top:630px; right:420px; } #wellwrap3 .womanclick li.wcbt.wc14 { top:768px; right:340px; } #wellwrap3 .womanclick li.wcbt.wc15 { top:810px; right:384px; } #wc-solution { position:fixed; top:0px; left:0px; width:100%; height:0%; background:rgba(0,0,0,0.6); z-index:152; overflow:hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.5s; } #wc-solution.active { height:100%; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0s; } #wc-solution div.imgs { display:block; opacity:0; position:absolute; top:55%; left:50%; width:876px; height:413px; transform:translate(-50%,-50%); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0s; } #wc-solution.active div.imgs { opacity:1; top:50%; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.5s; } #wc-solution .solutionclose { opacity:0; position:absolute; top:28%; left:75%; transform:translate(-50%,-50%); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0s; } #wc-solution.active .solutionclose { opacity:1; position:absolute; top:28%; left:75%; transform:translate(-50%,-50%); transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.5s;cursor:pointer; } #wc-solution.wcbt1 div.imgs { background:url('/page_KR0/02_sub/images/solution1.png')no-repeat 0 0; } #wc-solution.wcbt2 div.imgs { background:url('/page_KR0/02_sub/images/solution2.png')no-repeat 0 0; } #wc-solution.wcbt3 div.imgs { background:url('/page_KR0/02_sub/images/solution3.png')no-repeat 0 0; } #wc-solution.wcbt4 div.imgs { background:url('/page_KR0/02_sub/images/solution4.png')no-repeat 0 0; } #wc-solution.wcbt5 div.imgs { background:url('/page_KR0/02_sub/images/solution5.png')no-repeat 0 0; } #wc-solution.wcbt6 div.imgs { background:url('/page_KR0/02_sub/images/solution6.png')no-repeat 0 0; } #wc-solution.wcbt7 div.imgs { background:url('/page_KR0/02_sub/images/solution7.png')no-repeat 0 0; } #wc-solution.wcbt8 div.imgs { background:url('/page_KR0/02_sub/images/solution8.png')no-repeat 0 0; } #wc-solution.wcbt9 div.imgs { background:url('/page_KR0/02_sub/images/solution9.png')no-repeat 0 0; } #wc-solution.wcbt10 div.imgs { background:url('/page_KR0/02_sub/images/solution10.png')no-repeat 0 0; } #wc-solution.wcbt11 div.imgs { background:url('/page_KR0/02_sub/images/solution11.png')no-repeat 0 0; } #wc-solution.wcbt12 div.imgs { background:url('/page_KR0/02_sub/images/solution12.png')no-repeat 0 0; } #wc-solution.wcbt13 div.imgs { background:url('/page_KR0/02_sub/images/solution13.png')no-repeat 0 0; } #wc-solution.wcbt14 div.imgs { background:url('/page_KR0/02_sub/images/solution14.png')no-repeat 0 0; } #wc-solution.wcbt15 div.imgs { background:url('/page_KR0/02_sub/images/solution15.png')no-repeat 0 0; } #wc-solution.wcbt16 div.imgs { background:url('/page_KR0/02_sub/images/solution16.png')no-repeat 0 0; } #wc-solution.wcbt17 div.imgs { background:url('/page_KR0/02_sub/images/solution17.png')no-repeat 0 0; } #wc-solution.wcbt18 div.imgs { background:url('/page_KR0/02_sub/images/solution18.png')no-repeat 0 0; } #wc-solution.wcbt19 div.imgs { background:url('/page_KR0/02_sub/images/solution19.png')no-repeat 0 0; } #wc-solution.wcbt20 div.imgs { background:url('/page_KR0/02_sub/images/solution20.png')no-repeat 0 0; } #wc-solution.wcbt21 div.imgs { background:url('/page_KR0/02_sub/images/solution21.png')no-repeat 0 0; } #wc-solution.wcbt22 div.imgs { background:url('/page_KR0/02_sub/images/solution5.png')no-repeat 0 0; } #wc-solution.wcbt23 div.imgs { background:url('/page_KR0/02_sub/images/solution23.png')no-repeat 0 0; } #wc-solution.wcbt24 div.imgs { background:url('/page_KR0/02_sub/images/solution24.png')no-repeat 0 0; } #wc-solution.wcbt25 div.imgs { background:url('/page_KR0/02_sub/images/solution25.png')no-repeat 0 0; } #wc-solution.wcbt26 div.imgs { background:url('/page_KR0/02_sub/images/solution26.png')no-repeat 0 0; } #wc-solution.wcbt27 div.imgs { background:url('/page_KR0/02_sub/images/solution27.png')no-repeat 0 0; } #wc-solution.wcbt28 div.imgs { background:url('/page_KR0/02_sub/images/solution28.png')no-repeat 0 0; } #wc-solution.wcbt29 div.imgs { background:url('/page_KR0/02_sub/images/solution29.png')no-repeat 0 0; } #wc-solution.wcbt30 div.imgs { background:url('/page_KR0/02_sub/images/solution30.png')no-repeat 0 0; } #wc-solution.wcbt31 div.imgs { background:url('/page_KR0/02_sub/images/solution9.png')no-repeat 0 0; } #wc-solution.wcbt32 div.imgs { background:url('/page_KR0/02_sub/images/solution35.png')no-repeat 0 0; } #wc-solution.wcbt33 div.imgs { background:url('/page_KR0/02_sub/images/solution36.png')no-repeat 0 0; } #wc-solution.wcbt34 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt35 div.imgs { background:url('/page_KR0/02_sub/images/solution9.png')no-repeat 0 0; } #wc-solution.wcbt36 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt37 div.imgs { background:url('/page_KR0/02_sub/images/solution38.png')no-repeat 0 0; } #wc-solution.wcbt38 div.imgs { background:url('/page_KR0/02_sub/images/solution39.png')no-repeat 0 0; } #wc-solution.wcbt39 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt40 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt41 div.imgs { background:url('/page_KR0/02_sub/images/solution9.png')no-repeat 0 0; } #wc-solution.wcbt42 div.imgs { background:url('/page_KR0/02_sub/images/solution43.png')no-repeat 0 0; } #wc-solution.wcbt43 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt44 div.imgs { background:url('/page_KR0/02_sub/images/solution45.png')no-repeat 0 0; } #wc-solution.wcbt45 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt46 div.imgs { background:url('/page_KR0/02_sub/images/solution47.png')no-repeat 0 0; } #wc-solution.wcbt47 div.imgs { background:url('/page_KR0/02_sub/images/solution48.png')no-repeat 0 0; } #wc-solution.wcbt48 div.imgs { background:url('/page_KR0/02_sub/images/solution9.png')no-repeat 0 0; } #wc-solution.wcbt49 div.imgs { background:url('/page_KR0/02_sub/images/solution48.png')no-repeat 0 0; } #wc-solution.wcbt50 div.imgs { background:url('/page_KR0/02_sub/images/solution50.png')no-repeat 0 0; } #wc-solution.wcbt101 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt102 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt103 div.imgs { background:url('/page_KR0/02_sub/images/solution103.png')no-repeat 0 0; } #wc-solution.wcbt104 div.imgs { background:url('/page_KR0/02_sub/images/solution104.png')no-repeat 0 0; } #wc-solution.wcbt105 div.imgs { background:url('/page_KR0/02_sub/images/solution105.png')no-repeat 0 0; } #wc-solution.wcbt106 div.imgs { background:url('/page_KR0/02_sub/images/solution106.png')no-repeat 0 0; } #wc-solution.wcbt107 div.imgs { background:url('/page_KR0/02_sub/images/solution107.png')no-repeat 0 0; } #wc-solution.wcbt108 div.imgs { background:url('/page_KR0/02_sub/images/solution108.png')no-repeat 0 0; } #wc-solution.wcbt109 div.imgs { background:url('/page_KR0/02_sub/images/solution106.png')no-repeat 0 0; } #wc-solution.wcbt110 div.imgs { background:url('/page_KR0/02_sub/images/solution106.png')no-repeat 0 0; } #wc-solution.wcbt111 div.imgs { background:url('/page_KR0/02_sub/images/solution106.png')no-repeat 0 0; } #wc-solution.wcbt112 div.imgs { background:url('/page_KR0/02_sub/images/solution112.png')no-repeat 0 0; } #wc-solution.wcbt113 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt114 div.imgs { background:url('/page_KR0/02_sub/images/solution103.png')no-repeat 0 0; } #wc-solution.wcbt115 div.imgs { background:url('/page_KR0/02_sub/images/solution115.png')no-repeat 0 0; } #wc-solution.wcbt116 div.imgs { background:url('/page_KR0/02_sub/images/solution106.png')no-repeat 0 0; } #wc-solution.wcbt117 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt118 div.imgs { background:url('/page_KR0/02_sub/images/solution34.png')no-repeat 0 0; } #wc-solution.wcbt119 div.imgs { background:url('/page_KR0/02_sub/images/solution119.png')no-repeat 0 0; } /* .woman-con ul li { float:left; position:relative; box-sizing:border-box; width:112px; height:112px; margin-right:15px; background:#fff; border-radius:100%; text-align:center; line-height:112px; font-size:18px; font-weight:700; color:#000; cursor:pointer; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } .woman-con ul li.lineh { line-height:130%; padding-top:34px; } .woman-con ul li span { opacity:0; display:block; position:absolute; color:#fff; bottom:24px; left:0px; width:100%; line-height:100%; height:18px; text-align:center; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.3s; } .woman-con ul li:hover { color:#fff; background:#34c4d5; } .woman-con ul li:hover span { opacity:1; bottom:14px; } .woman-con .figure { position:absolute; top:-40px; left:-40px; width:79px; height:79px; } .woman-con .figure img { width:100%; } */ .sub13con01 { position:relative; width:100%; max-width:1920px; min-width:1280px; height:4000px; margin:0 auto; background:url('/page_KR0/13_sub/images/sub13con01.jpg')no-repeat 50% 0; } .sub13con02 { position:relative; width:100%; max-width:1920px; min-width:1280px; height:4000px; margin:0 auto; background:url('/page_KR0/13_sub/images/sub13con02.jpg')no-repeat 50% 0; } .sub13con03 { position:relative; width:100%; max-width:1920px; min-width:1280px; height:4000px; margin:0 auto; background:url('/page_KR0/13_sub/images/sub13con03.jpg')no-repeat 50% 0; } .sub13con04 { position:relative; width:100%; max-width:1920px; min-width:1280px; height:5900px; margin:0 auto; background:url('/page_KR0/13_sub/images/sub13con04.jpg')no-repeat 50% 0; } .sub13con05 { position:relative; width:100%; max-width:1920px; min-width:1280px; height:4000px; margin:0 auto; background:url('/page_KR0/13_sub/images/sub13con05.jpg')no-repeat 50% 0; } #price-modal { position: fixed; top:0px; width:100%; height:0; z-index: 150; background:#ffffff; 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%; height: 2800px; min-width: 1280px; background:url('/page_KR0/10_sub/images/modalprice.jpg')no-repeat 0 0;} #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); } .subtable014 { position: relative; width: 100%; max-width: 1280px; margin: auto; border-top: 3px solid #0168b7; margin:60px auto; } .subtable014 tr th { padding: 0 26px; height: 66px; box-sizing: border-box; font-size: 19px; font-weight: 500; color: #313131; background: #f6f8fa; letter-spacing: -1px; border-bottom: 1px solid #d9d9d9; text-align: center; } .subtable014 tr td { padding: 12px 26px; box-sizing: border-box; font-size: 19px; 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; } #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); } .drline1 { position:relative; width:100%; height:970px; background:url('/page_KR0/02_sub/images/drviewbg.jpg')no-repeat 50% 0; background-size:cover; } .drline1 div.drinfowrap { position:relative; width:1280px; margin:0 auto; } .drline1 div.drinfowrap ul li.txt1 { padding-top:154px; display:inline-block; font-size:32px; font-weight:700; color:#fff; border-bottom:4px solid #13c0d7; padding-bottom:20px; margin-bottom:30px; } .drline1 div.drinfowrap ul li.txt1 span { font-size:20px; padding-left:14px; } .drline1 div.drinfowrap ul li.txt2 { font-size:42px; font-weight:700; color:#fff; line-height:140%; } .drline1 div.drinfowrap ul li.txt3 { margin-top:14px; width:700px; height:120px; line-height:120px; padding:0 3%; background:rgba(0,0,0,0.2); font-size:17px; font-weight:400; color:#fff; box-sizing:border-box; } .drline1 div.drinfowrap ul li.txt3 span { padding-right:20px; font-size:22px; font-weight:700; color:#05ddfa; } .drbt { position:relative; margin-top:30px; cursor:pointer; } .drbt a { } .drbt a.drlinkbt1 { margin-right:14px; background:#13c0d7 url('/page_KR0/02_sub/images/drlinkbt1.jpg')no-repeat 36px 50%; color:#fff; display:inline-block; position:relative; width:177px; height:50px; padding-left:68px; line-height:48px; border-radius:50px; text-align:left; font-size:16px; font-weight:500; box-sizing:border-box; } .drbt a.drlinkbt2 { background:#ffffff url('/page_KR0/02_sub/images/drlinkbt2.jpg')no-repeat 36px 50%; color:#535353; cursor:pointer; display:inline-block; position:relative; width:177px; height:50px; padding-left:68px; line-height:48px; border-radius:50px; text-align:left; font-size:16px; font-weight:500; box-sizing:border-box;} .drbt a.drlinkbt2 span { display:block; position:absolute; top:0px; right:30px; font-size:12px; } .scrollv { animation: scrollani 1500ms 2200ms infinite ease; } @keyframes scrollani { 0% { transform: translateY(0); } 50% { transform: translateY(7px); } 100% { transform: translateY(0); } } .timetable { display: table; position:relative; width:1280px; height:206px; margin-top:40px; background:#fff; border-top:4px solid #13c0d7; border-bottom:1px solid #e1e1e1; } .timetable ul { display: table-row; } .timetable ul li { display: table-cell; text-align:center; } .timetable ul.tableline1 { } .timetable ul.tableline1 li { width:107px; height:65px; vertical-align:middle; border-right:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; font-size:17px; font-weight:500; color:#000000; } .timetable ul.tableline2 li { width:107px; height:137px; border-right:1px solid #e1e1e1; vertical-align:middle; font-size:17px; font-weight:500; color:#2b2b2b; } .timetable ul.tableline2 li:last-child,.timetable ul.tableline1 li:last-child { border-right:0px; } .timetable ul.tableline2 li div { display:block; width:100%; height:68px; line-height:68px; padding-top:20px; box-sizing:border-box; } .timetable ul.tableline2 li span.time_1 { display:block; width:82px; height:30px; margin:0 auto 0 auto; background:#fff; border:1px solid #b5b5b5; text-align:center; line-height:28px; font-size:16px; font-weight:500; color:#2b2b2b; box-sizing:border-box; border-radius:50px; } .timetable ul.tableline2 li span.time_2 { display:block; width:82px; height:30px; margin:0 auto 0 auto; background:#ededed; text-align:center; line-height:28px; font-size:16px; font-weight:500; color:#777; box-sizing:border-box; border-radius:50px; } .timetable ul.tableline2 li span.time_3 { display:block; width:82px; height:30px; margin:0 auto 0 auto; background:#13c0d7; border:1px solid #13c0d7; text-align:center; line-height:28px; font-size:16px; font-weight:500; color:#fff; box-sizing:border-box; border-radius:50px; } .timetable ul.tableline2 li span.time_4 { display:block; width:82px; height:30px; margin:0 auto 0 auto; background:#13c0d7; border:1px solid #13c0d7; text-align:center; line-height:28px; font-size:14px; font-weight:500; color:#fff; box-sizing:border-box; border-radius:50px; } .timetable ul.tableline2 li span.time_6 { display:block; width:82px; height:30px; margin:0 auto 0 auto; background:#13c0d7; border:1px solid #13c0d7; text-align:center; line-height:28px; font-size:14px; font-weight:500; color:#fff; box-sizing:border-box; border-radius:50px; } .timetable ul.tableline2 li span.time_7 { display:block; width:82px; height:30px; margin:0 auto 0 auto; background:#fff; border:1px solid #b5b5b5; text-align:center; line-height:28px; font-size:13px; font-weight:500; color:#2b2b2b; box-sizing:border-box; border-radius:50px; } .timetable ul.tableline2 li.drtime div { padding-top:0px; } .timetable ul li.drimgs { width:245px; } .timetable ul.tableline2 li.drimgs { font-size:19px; font-weight:700; color:#000000; } .timetable ul.tableline2 li.drimgs img { width:95px; height:95px; } .timetable ul.tableline2 li.drimgs span { padding-left:16px; } .timetable ul.tableline2 li:last-child { width:176px; font-size:12px; font-weight:400; } .timeview { position:absolute; top:68px; left:-20px; width:830px; height:0px; overflow:hidden; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } .timeview.active { height:400px; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1); } .timeview .timeviewclose { position:absolute; top:0px; right:0px; width:131px; height:100px; text-align:right; padding-top:10px; font-family: 'Jost'; cursor:pointer; font-weight:500; color:#fff; padding-right:18px; background:#13c0d7; z-index:4; border-radius:26px; box-sizing:border-box; } .allmenu_info2 { position:relative; width:798px; padding:60px 40px 60px 40px; border-radius:50px; background:#fff; z-index:5; box-sizing:border-box; overflow:hidden; } .allmenu_info2 ul.all_phone { float:left; width:200px; padding-top:48px; border-right:1px solid #e7e7e7; text-align:center; background:url('/images/common/all_phone.jpg')no-repeat 50% 0; } .allmenu_info2 ul.all_add { float:left; width:170px; min-height:160px; margin-right:30px; padding-top:48px; border-right:1px solid #e7e7e7; text-align:center; box-sizing:border-box; background:url('/images/common/all_add.jpg')no-repeat 50% 0; } .allmenu_info2 ul.all_time { float:left; width:286px; padding-top:48px; background:url('/images/common/all_time.jpg')no-repeat 24% 0; } .allmenu_info2 ul.all_phone li { font-size:23px; font-weight:700; color:#46d1e1; line-height:1; margin-bottom:32px; } .allmenu_info2 ul.all_phone li.sns { margin-bottom:0px; } .allmenu_info2 ul.all_add { font-size:13px; color:#717171; font-weight:400; } .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; } .drline2 { position:relative; width:100%; background:#ffffff; overflow:hidden; } .drline2 div.drimgs { float:left; width:50%; height:1010px; } .drline2 div.drstorywrap { float:left; width:50%; padding-left:56px; padding-top:160px; box-sizing:border-box; } .drline2 div.drstory { position:relative; width:600px; } .drline2 div.drstory .storytitle { position:relative; width:100%; height:128px; line-height:130px; padding-left:96px; padding-bottom:30px; font-size:28px; 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: 600px; } .drline2 div.drstory ul.storycon1 li { width:100%; padding:40px 0; padding-left:96px; font-size:18px; font-weight:400; color:#767676; line-height:190%; box-sizing:border-box; } .drline2 div.drstory .storytitle.title1 { background:url('/page_KR0/02_sub/images/dr_t1_icon1.jpg')no-repeat 0 50%; } .drline2 div.drstory .storytitle.title2 { background:url('/page_KR0/02_sub/images/dr_t1_icon2.jpg')no-repeat 0 50%; } .drline2 div.drstory .storytitle.title3 { background:url('/page_KR0/02_sub/images/dr_t1_icon3.jpg')no-repeat 0 50%; } .drline2 div.drstory .storytitle.title4 { background:url('/page_KR0/02_sub/images/dr_t1_icon4.jpg')no-repeat 0 50%; } .drline2 div.drstory .storytitle.title5 { background:url('/page_KR0/02_sub/images/dr_t1_icon5.jpg')no-repeat 0 50%; } .drline2 div.drstory .storytitle.title6 { background:url('/page_KR0/02_sub/images/dr_t1_icon6.jpg')no-repeat 0 50%; } #drbook { position:relative; width:100%; height:460px; overflow: hidden; } #drbook .drbook_sl{ position:relative; width:100%; padding-left:96px; overflow: hidden; padding-top:20px; box-sizing:border-box; } #drbook .drbook_sl ul { position:relative; margin:0 auto; padding-bottom:40px; overflow:hidden; } #drbook .drbook_sl ul li { float:left; width:249px; margin-right:30px; cursor:pointer; } #drbook .drbook_sl ul li div.imgs { width:100%; height:294px; overflow:hidden; } #drbook .drbook_sl ul li div.imgs img { width:100%; } #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; } #drbook .scrollbar { margin-left:96px; height: 8px; margin-bottom:10%; background: #dbdbdb; line-height: 0; } #drbook .scrollbar .handle { width: 100px; height: 100%; background: #13c0d7; cursor: pointer; } #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%; } .sub04_c1_1 { position:relative; width:100%; height:1050px; } .sub04_c1_1 .modaltxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:0%; border-right:1px solid #ddd; background:url('/page_KR0/05_sub/images/modalbg1_1.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .sub04_c1_1 .modaltxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:0%; border-right:1px solid #ddd; background:url('/page_KR0/05_sub/images/modalbg1_2.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .sub04_c1_1 .modaltxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:0%; border-right:1px solid #ddd; background:url('/page_KR0/05_sub/images/modalbg1_3.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .sub04_c1_1 .modaltxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:0%; border-right:0px solid #ddd; background:url('/page_KR0/05_sub/images/modalbg1_4.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .sub04_c1 .sub04_c1_1 .modaltxtbg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .sub04_c1 .sub04_c1_1 .modaltxtbg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .sub04_c1 .sub04_c1_1 .modaltxtbg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .sub04_c1 .sub04_c1_1 .modaltxtbg li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .sub04_c2_1 { position:relative; width:100%; height:1050px; } .sub04_c2_1 .modaltxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:0%; border-right:1px solid #e0e4e6; background:#f6fcfe; background-size:cover; box-sizing:border-box; } .sub04_c2_1 .modaltxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:0%; border-right:1px solid #e0e4e6; background:#f6fcfe; background-size:cover; box-sizing:border-box; } .sub04_c2_1 .modaltxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:0%;border-right:1px solid #e0e4e6; background:#f6fcfe; background-size:cover; box-sizing:border-box; } .sub04_c2_1 .modaltxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:0%; border-right:0px solid #e0e4e6; background:#f6fcfe; background-size:cover; box-sizing:border-box; } .sub04_c2 .sub04_c2_1 .modaltxtbg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; } .sub04_c2 .sub04_c2_1 .modaltxtbg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; } .sub04_c2 .sub04_c2_1 .modaltxtbg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .sub04_c2 .sub04_c2_1 .modaltxtbg li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .sub04_c2_1 .subtxt2 { position:absolute; top:10%; left:15%; } .sub04_c2_1 .subtxt2 li.t1 { font-size:18px; font-weight:400; color:#2f2f2f; line-height:140%; } .sub04_c2_1 .subtxt2 li.t2 { margin-top:10px; font-size:38px; font-weight:700; color:#16c5d5; line-height:1; } .sub04_c2_1 .subtxt2 li.t3 { margin-top:20px; font-size:18px; font-weight:400; color:#6c6c6c; line-height:140%; } .sub04_c2 .sub04_c2_1 .subtxt2 li.t1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .sub04_c2 .sub04_c2_1 .subtxt2 li.t2 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.1s; } .sub04_c2 .sub04_c2_1 .subtxt2 li.t3 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .circleboxc2_1 { top:34%; left:24%; width:312px; height:312px; } .circleboxc2_2 { top:38%; left:56%; width:178px; height:178px; } .circleboxc2_3 { top:46%; left:61%; width:124px; height:124px; } .circleboxc2_4 { top:25%; left:74%; width:224px; height:224px; } .circleboxc2_5 { top:57%; left:44%; width:217px; height:217px; } .circleboxc2_6 { top:61%; left:70%; width:86px; height:86px; } .sub04_c2 .sub04_c2_1 .circleboxc2_1 { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.0s; } .sub04_c2 .sub04_c2_1 .circleboxc2_2 { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.4s; } .sub04_c2 .sub04_c2_1 .circleboxc2_3 { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.6s; } .sub04_c2 .sub04_c2_1 .circleboxc2_4 { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.8s; } .sub04_c2 .sub04_c2_1 .circleboxc2_5 { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.2s; } .sub04_c2 .sub04_c2_1 .circleboxc2_6 { animation: fadeleft2 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.9s; } .sub04_c2_2 { position:relative; width:100%; min-height:1020px; padding-top:90px; box-sizing:border-box; } .sub04_c2_2 .modaltxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .sub04_c2_2 .modaltxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .sub04_c2_2 .modaltxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%;border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .sub04_c2_2 .modaltxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .sub04_c2_2 .snowlogo { display:block; position:absolute; top:75%; right:15%; width:80px; height:80px; 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:relative; width:1280px; height:65px; margin:0 auto; border:1px solid #dbd9d9; background:#fff; text-align:center; box-sizing:border-box; border-radius:14px; overflow:hidden; } .modaltab ul li { display:inline-block; height:63px; line-height:63px; margin:0 -2px; background:#fff; color:#373737; font-size:17px; font-weight:500; padding: 0 34px; cursor:pointer; } .modaltab ul li.active,.modaltab ul li:hover { background:#16c5d5; color:#fff; } .modaltab5 { position:relative; width:1280px; height:65px; margin:98px auto 58px auto; border:1px solid #dbd9d9; background:#fff; text-align:center; box-sizing:border-box; border-radius:14px; overflow:hidden; display:flex; } .modaltab5 ul { width:100%; display:flex; } .modaltab5 ul li { width:12.5%; height:63px; line-height:63px; margin:0 -2px; background:#fff; color:#373737; font-size:17px; font-weight:500; padding: 0 57.5px; cursor:pointer; } .modaltab5 ul li.active,.modaltab5 ul li:hover { background:#16c5d5; color:#fff; } .directioncon { position:relative; width:1280px; height:404px; margin:0 auto; margin-bottom:150px; overflow:hidden; } .directioncon div.hosmap { float:left; width:576px; height:404px; } .directioncon div.hosmapinfo { float:left; width:704px; height:404px; padding-left:66px; padding-top:64px; 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:19px; 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:23px; font-weight:700px; color:#ffffff; background:url('/page_KR0/08_sub/images/mapicon2.jpg')no-repeat 0 0;box-sizing:border-box; } .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:16px; color:#fff; font-family: 'Jost'; font-weight:500; line-height: 140%; } .directioncon div.hosmapinfo ul li.hostime ul li span { display:inline-block; width:110px; color:#fff; font-family: 'Noto Sans KR', sans-serif; font-size:15px; 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:15px; font-weight:400; } .directioncon div.hosmapinfo ul li.hostime ul li span.lunch { margin-left:8px; display:inline-block; width:auto; font-family: 'Noto Sans KR', sans-serif; font-size:15px; font-weight:400; } .modal_txtbox { position:relative; width:1030px; margin:0 auto; padding-top:100px; overflow:hidden; } .modal_txtbox ul { float:left; width:630px; } .modal_txtbox div { float:left; width:379px; text-align:right; } .modal_txtbox ul li.contxt { padding-left: 34px; font-size:16px; font-weight:400; color:#6c6c6c; line-height:170%; margin-top:34px; } .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_txtbox2 { position:relative; width:1030px; margin:0 auto; padding-top:100px; overflow:hidden; } .modal_txtbox2 ul { width:100%; } .modal_txtbox2 ul li.contxt { padding-left: 34px; font-size:16px; font-weight:400; color:#6c6c6c; line-height:170%; margin-top:34px; } .modal_txtbox2 div { width:100%; text-align:center; } .modal_txtbox2 ul.imgpart { position:relative; width:440px; overflow:hidden; margin-top:80px; } .modal_txtbox2 ul.imgpart li { float:left; width:50%; height:102px; line-height:102px; margin-bottom:14px; padding-left:112px; box-sizing:border-box; font-size:17px; font-weight:500; color:#565656; } .modal_txtbox2 ul.imgpart li.part1 { background:url('/page_KR0/03_sub/images/part1.jpg')no-repeat 0 0; } .modal_txtbox2 ul.imgpart li.part2 { background:url('/page_KR0/03_sub/images/part2.jpg')no-repeat 0 0; } .modal_txtbox2 ul.imgpart li.part3 { background:url('/page_KR0/03_sub/images/part3.jpg')no-repeat 0 0; } .modal_txtbox2 ul.imgpart li.part4 { background:url('/page_KR0/03_sub/images/part4.jpg')no-repeat 0 0; } .modal_txtbox2 ul.imgpart li.part5 { background:url('/page_KR0/03_sub/images/part5.jpg')no-repeat 0 0; } .modal_txtbox2 ul.imgpart li.part6 { background:url('/page_KR0/03_sub/images/part6.jpg')no-repeat 0 0; } .modal_txtbox2 ul.imgpart li.part7 { background:url('/page_KR0/03_sub/images/part7.jpg')no-repeat 0 0; } .modal_txtbox2 ul.imgpart li.part8 { background:url('/page_KR0/03_sub/images/part8.jpg')no-repeat 0 0; } .modal_txtbox2 ul.imgpart li.part9 { background:url('/page_KR0/03_sub/images/part9.jpg')no-repeat 0 0; } .modal_txtbox2 ul.imgpart li.part10 { background:url('/page_KR0/03_sub/images/part10.jpg')no-repeat 0 0; } .modal_txtbox3 { position:relative; width:1030px; margin:0 auto; padding-top:100px; overflow:hidden; } .modal_txtbox3 ul { float:left; width:33.3%; text-align:center; margin-top:90px; } .modal_txtbox3 ul li.t1 { margin-bottom:20px; font-size:16px; font-weight:400; color:#07c2d3; line-height:100%; } .modal_txtbox3 ul li.t3 { margin-top:16px; font-size:19px; font-weight:500; color:#363636; line-height:100%; } .modal_txtbox4 { position:relative; width:1030px; margin:0 auto; overflow:hidden; } .modal_txtbox4 div.imgs { width:100%; text-align:center; margin:60px 0 36px 0; } .modal_txtbox4 div.imgprocess { position:relative; width:100%; overflow:hidden; } .modal_txtbox4 div .imgprocess1 { float:left; width:305px; margin-right:56px; } .modal_txtbox4 div .imgprocess2 { float:left; width:305px; } .modal_txtbox4 div .imgprocess3 { float:right; width:305px; } .modal_txtbox4 div.imgprocess ul li.pro1 { 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; } .modal_txtbox5 { position:relative; width:1130px; margin:0 auto; padding-top:100px; overflow:hidden; } .modal_txtbox5 ul { float:left; width:690px; } .modal_txtbox5 div { float:left; width:440px; text-align:right; } .modal_txtbox5 ul li.contxt { padding-left: 34px; font-size:16px; font-weight:400; color:#6c6c6c; line-height:170%; margin-top:34px; } .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 { padding-left: 34px; margin-top:30px; } .modal_txtbox5 ul li.modalicon { width:100%; text-align:left; padding-left: 34px; box-sizing:border-box; } .modal_txtbox5 ul li.modalicon ul li { display:inline-block; font-size:16px; font-weight:500; color:#323131; margin-right:24px; padding-top:78px; } .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; } .modal_txtbox6 { position:relative; width:1080px; margin:0 auto; padding-top:100px; overflow:hidden; } .modal_txtbox6 ul { float:left; width:540px; } .modal_txtbox6 ul li.contxt { padding-left: 34px; font-size:16px; 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 { float:right; width:540px; } .modal_txtbox6 div.imgs2 span { display:block; padding-left:24px; line-height:40px; text-align:left; border-left:2px solid #16c5d5; margin-top:60px; 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 { display:inline-block; font-size:16px; font-weight:500; color:#323131; margin-right:38px; padding-top:68px; 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; } .modalicon { position:relative; width:1030px; margin:0 auto; padding-top:50px; overflow:hidden; } .modalicon ul li.m_icon1 { float:left; width:170px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon1.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon2 { float:left; width:190px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon2.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon3 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon3.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon4 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon2.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon5 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon4.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon6 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon3.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon7 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon5.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon8 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon6.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon9 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon7.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon10 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon8.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon11 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon9.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon12 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon10.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon13 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon11.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon14 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon12.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon15 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon13.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon16 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/04_sub/images/m_icon14.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon17 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/03_sub/images/m_icon15.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon18 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/03_sub/images/m_icon16.jpg')no-repeat 50% 0; } .modalicon ul li.m_icon19 { float:left; width:160px; text-align:center; font-size:17px; font-weight:500; color:#323131; padding-top:78px; margin-right:50px; background:url('/page_KR0/03_sub/images/m_icon17.jpg')no-repeat 50% 0; } .sub04_c3_1 { position:relative; width:100%; height:1050px; } .sub04_c3_1 .modaltxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:0%; border-right:1px solid #e0e4e6; background:#f6fcfe; background-size:cover; box-sizing:border-box; } .sub04_c3_1 .modaltxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:0%; border-right:1px solid #e0e4e6; background:url('/page_KR0/04_sub/images/c3_1bg.jpg')no-repeat 50% 0; background-size:cover; box-sizing:border-box; } .sub04_c3_1 .modaltxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:0%;border-right:1px solid #e0e4e6; background:#f6fcfe; background-size:cover; box-sizing:border-box; } .sub04_c3_1 .modaltxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:0%; border-right:0px solid #e0e4e6; background:#f6fcfe; background-size:cover; box-sizing:border-box; } .sub04_c3 .sub04_c3_1 .modaltxtbg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; } .sub04_c3 .sub04_c3_1 .modaltxtbg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; } .sub04_c3 .sub04_c3_1 .modaltxtbg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .sub04_c3 .sub04_c3_1 .modaltxtbg li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .c3txt { position:absolute; top:25%; left:54%; } .c3txt li.txt1 { font-size:40px; font-weight:700; color:#16c5d5; line-height:130%; } .c3txt li.txt2 { margin-top:30px; font-size:19px; font-weight:500; color:#6c6c6c; line-height:170%; } .sub04_c3 .c3txt li.txt1 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.8s; } .sub04_c3 .c3txt li.txt2 { animation: fadeup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.1s; } .sub04_c3_2 { position:relative; width:100%; height:1100px; padding-top:90px; box-sizing:border-box; background:#fff; } .sub04_c3_2 .modaltxtbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .sub04_c3_2 .modaltxtbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .sub04_c3_2 .modaltxtbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%;border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .sub04_c3_2 .modaltxtbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modaltab2 { position:absolute; top:130px; left:50%; transform: translate(-50%,0); width:1280px; height:65px; margin:0 auto; border:1px solid #dbd9d9; background:#fff; text-align:center; box-sizing:border-box; border-radius:14px; overflow:hidden; z-index:2; } .modaltab2 ul li { float:left; width:33.333333333%; height:63px; line-height:63px; background:#fff; color:#373737; font-size:17px; font-weight:500; text-align:center; cursor:pointer; } .modaltab2 ul li.active,.modaltab2 ul li:hover { background:#16c5d5; color:#fff; } .modaltab23 { position:relative; width:100%; z-index:2; background:#ffffff; } .modaltab23 ul { position:absolute; top:130px; left:50%; transform: translate(-50%,0); width:1280px; height:65px; margin:0 auto; border:1px solid #dbd9d9; background:#fff; text-align:center; box-sizing:border-box; border-radius:14px; overflow:hidden; z-index:2; } .modaltab23 ul li { float:left; width:20%; height:63px; line-height:63px; background:#fff; color:#373737; font-size:17px; font-weight:500; text-align:center; cursor:pointer; } .modaltab23 ul li.active,.modaltab2 ul li:hover { background:#16c5d5; color:#fff; } .m_bg1 { position:absolute; top:0px; left:0px; width:100%; height:100%; } .m_bg1 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e7e7e7; background:#f5f5f5; background-size:cover; box-sizing:border-box; } .m_bg1 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e7e7e7; background:#f5f5f5; background-size:cover; box-sizing:border-box; } .m_bg1 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%;border-right:1px solid #e7e7e7; background:#f5f5f5; background-size:cover; box-sizing:border-box; } .m_bg1 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e7e7e7; background:#f5f5f5; background-size:cover; box-sizing:border-box; } .m_bg2 { position:absolute; top:0px; left:0px; width:100%; height:100%; } .m_bg2 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .m_bg2 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .m_bg2 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%;border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .m_bg2 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .c3_2_line { position:relative; width:1280px; margin:0 auto; padding-top:190px; } .c3_2_line ul { width:100%; height:124px; margin-bottom:20px; overflow:hidden; } .c3_2_line ul li.imgs { float:left; width:124px; height:124px; margin-right:34px; } .c3_2_line ul li.title { float:left; position:relative; width:410px; height:124px; font-size:19px; font-weight:500; color:#3f3e3e; } .c3_2_line ul li.title span { display:block; position:absolute; top:50%; transform:translatey(-50%); } .c3_2_line ul li.con { float:left; position:relative; width:700px; height:124px; font-size:17px; font-weight:400; color:#6c6c6c; } .c3_2_line ul li.con span { display:block; position:absolute; top:50%; transform:translatey(-50%); } .c3_2_line2 { position:relative; width:1280px; margin:0 auto; padding-top:200px; } .c3_2_line2 ul { float:left; width:50%; height:193px; margin-bottom:44px; overflow:hidden; } .c3_2_line2 ul li.imgs { float:left; width:173px; height:193px; margin-right:40px; } .c3_2_line2 ul li.txt {float:left; width:330px; height:193px; padding-right:30px; box-sizing:border-box; padding-top:20px; } .c3_2_line2 ul li.txt span.t1 { display:block; font-size:23px; font-weight:700; color:#323131; } .c3_2_line2 ul li.txt span.t2 { padding-top:10px; display:block; font-size:14px; font-weight:400; color:#878787; line-height:150%; } .pro_end { position:relative; width:100%; margin-top:40px; overflow:hidden; } .pro_end .modaltitle { float:left; width:250px; } .pro_end .pro_1 { float:left; width:300px; padding-right:40px; } .pro_end .pro_2 { float:left; width:300px; padding-right:40px; } .pro_end .pro_3 { float:left; width:300px; padding-right:40px; } .pro_end span.title { display:block; font-size:18px; 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 50% 0; background-size:cover; } .c3_2_line3 { position:relative; width:1280px; margin:0 auto; padding-top:200px; } .c3_2_line3 ul li.contxt { padding-left: 34px; font-size:16px; font-weight:400; color:#6c6c6c; line-height:170%; margin-top:34px; } .modal_con1 { position:relative; width:100%; height:1050px; background-image: url(/page_KR0/05_sub/images/sub05_05.jpg); max-height:100%; background-size: cover; background-attachment: fixed; background-position:50% 50%;} .modal_con1 .modalbg1 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:100%; margin:0 auto; } .modal_con1 .modalbg1 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd; background:url('/page_KR0/05_sub/images/modalbg1_1.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal_con1 .modalbg1 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:url('/page_KR0/05_sub/images/modalbg1_2.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal_con1 .modalbg1 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:url('/page_KR0/05_sub/images/modalbg1_3.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal_con1 .modalbg1 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd; background:url('/page_KR0/05_sub/images/modalbg1_4.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal5_1 .modal_con1 .modalbg1 li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.1s; } .modal5_1 .modal_con1 .modalbg1 li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; } .modal5_1 .modal_con1 .modalbg1 li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; } .modal5_1 .modal_con1 .modalbg1 li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .modal_con1 .subtxt2 { position:absolute; top:45%; left:50%; transform: translate(-50%,-50%); width:920px; height:450px; } .modal_con1 .subtxt2 li.t1 { position:absolute; top:0px; left:0px; font-size:44px; font-weight:700; color:#000; line-height:130%; } .modal_con1 .subtxt2 li.t2 { position:absolute; top:156px; left:460px; font-size:18px; font-weight:400; color:#6c6c6c; line-height:170%; } .modal_con1 .subtxt2 li.t1 span { color:#13c0d7; } .modal5_1 .modal_con1 .subtxt2 { position:absolute; top:45%; left:50%; transform: translate(-50%,-50%); width:920px; height:450px; } .modal5_1 .modal_con1 .subtxt2 li.t1 { animation: text-focus-in 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.7s; } .modal5_1 .modal_con1 .subtxt2 li.t2 { animation: faderight 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .modal5_1 .modal_con1 .subtxt2 li.t1 span { color:#13c0d7; } .modal_con2 { position:relative; width:100%; height:1000px; } .modaltitle { width:100%; height:49px; line-height:49px; padding-left:34px; font-size:19px; font-weight:500; color:#2b2b2b; background:url('/page_KR0/05_sub/images/modaltitle.png')no-repeat 0 50%; box-sizing:border-box; } .modal_con2 .modalbg1 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal_con2 .modalbg1 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal_con2 .modalbg1 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal_con2 .modalbg1 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd; background:#fff; box-sizing:border-box; } .subsize { position:relative; width:1280px; margin:0 auto; } .modaltitlecon { position:relative; width:100%; overflow:hidden; } .modaltitlecon li { overflow:hidden; } .modaltitlecon li span:nth-child(1) { display:block; float:left; width:344px; } .modaltitlecon li span:nth-child(2) { display:block; float:right; width:444px; } .modal_con2 .bodalbox { width:100%; margin-top:60px; overflow:hidden; } .modal_con2 .bodalbox ul { float:left; width:297px; margin-right:30px; } .modal_con2 .bodalbox ul:nth-child(4) { margin-right:0px; } .modal_con2 .bodalbox ul li.txt { width:100%; text-align:center; padding:30px 0; background:#f1f1f1; } .modal_con2 .bodalbox ul li.txt span.t1 { display:block; font-size:23px; font-weight:700; color:#323131; } .modal_con2 .bodalbox ul li.txt span.t2 { margin-top:6px; display:block; font-size:15px; font-weight:400; color:#6c6c6c; } .modal_con2 .snowlogo { top:15%; right:10%; } .modal_con2 div.modalcon { width:100%; margin-top:60px; font-size:19px; font-weight:400; color:#6c6c6c; box-sizing:border-box; } .modal_con3 { position:relative; width:100%; height:900px; background:#f5fcfe; } .modal_con3 div.modaltitle { width:100%; height:49px; line-height:49px; padding-left:34px; font-size:19px; font-weight:500; color:#2b2b2b; background:url('/page_KR0/05_sub/images/modaltitle.png')no-repeat 0 50%; box-sizing:border-box; } .modal_con3 .bodalbox { width:100%; margin-top:10px; overflow:hidden; text-align:center; } .modal_con3 .bodalbox ul { display:inline-block; width:514px; margin:0 50px; } .modal_con3 .bodalbox ul li.txt { margin-top:20px; width:100%; text-align:left; font-size:19px; font-weight:500; color:#000000; line-height:170%; } .modal_con4 { width:100%; text-align:left; font-size:18px; font-weight:500; color:#000000; line-height:170%; } .sub05_modal2 { position:relative; width:100%; height:1020px; background-image: url(/page_KR0/05_sub/images/sub05_modal2.jpg); max-height:100%; background-size: cover; background-attachment: fixed; background-position:50% 50%;} .sub05_modal2 .modalbg1 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e5e5e5; background:#f3f3f3; box-sizing:border-box; } .sub05_modal2 .modalbg1 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e5e5e5; background:#f3f3f3; box-sizing:border-box; } .sub05_modal2 .modalbg1 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e5e5e5; background:#f3f3f3; box-sizing:border-box; } .sub05_modal2 .modalbg1 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e5e5e5; background:#f3f3f3; box-sizing:border-box; } .modal5_2 .sub05_modal2 .modalbg1 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 .modalbg1 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 .modalbg1 li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; } .modal5_2 .sub05_modal2 .modalbg1 li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .sub05_modal2_1 { position:absolute; top:46%; left:50%; transform: translate(-50%,-50%); text-align:center; } .sub05_modal2_1 div.title { font-size:48px; font-weight:700; color:#646464; line-height:130%; } .sub05_modal2_1 div.title span { color:#16c5d5; } .sub05_modal2_1 .contxt { position:relative; width:580px; height:478px; margin:0 auto; margin-top:40px; } .sub05_modal2_1 .contxt li.txtbg { width:478px; height:478px; background:#fff; margin:0 auto; border-radius:100%; } .sub05_modal2_1 .contxt li.contxtimg { position:absolute; top:46%; left:50%;transform: translate(-50%,-50%); width:565px; height:85px; 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:65%; left:0%; width:100%; text-align:center; font-size:19px; font-weight:500; color:#2f2f2f; } .modal5_2 .sub05_modal2_1 div.title { animation: text-focus-in2 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .modal5_2 .sub05_modal2_1 .contxt { animation: text-focus-in 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.7s; } .modal5_2 .sub05_modal2_1 .contxt li.contxtcon { animation: fadeup3 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 2.5s; } .modal5_2 .sub05_modal2_1 .contxt li.contxtimg span.imgs2 { animation: imgwidth2 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 2.0s; } .sub05_modal2_2 { position:relative; width:100%; height:1110px; 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; top:0px; right:10%; width:830px; height:100%; padding:470px 0 0 140px; background:rgba(255,255,255,0.7); font-size:20px; 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:1099px; background:url('/page_KR0/05_sub/images/sub05_modal2_4.jpg')no-repeat 50% 0; background-size:cover; } .sub05_modal2_2_2 div.txt { position:relative; width:1280px; margin:0 auto; padding-top:220px; } .sub05_modal2_2_2 div.txt ul li.t1 { padding-top:20px; font-size:48px; font-weight:700; color:#16c5d5; } .sub05_modal2_2_2 div.txt ul li.t2 { padding-top:30px; font-size:19px; font-weight:400; color:#4d4d4d; } .modaltab3 { position:absolute; top:130px; left:50%; transform: translate(-50%,0); width:1280px; height:65px; margin:0 auto; border:1px solid #dbd9d9; background:#fff; text-align:center; box-sizing:border-box; border-radius:14px; overflow:hidden; z-index:1; } .modaltab3 ul li { float:left; width:50%; height:63px; line-height:63px; background:#fff; color:#373737; font-size:17px; font-weight:500; cursor:pointer; } .modaltab3 ul li.active,.modaltab3 ul li:hover { background:#16c5d5; color:#fff; } .modaltab6 { position:absolute; top:130px; left:50%; transform: translate(-50%,0); width:1280px; height:65px; margin:0 auto; border:1px solid #dbd9d9; background:#fff; text-align:center; box-sizing:border-box; border-radius:14px; overflow:hidden; z-index:1; } .modaltab6 ul li { float:left; width:25%; height:63px; line-height:63px; background:#fff; color:#373737; font-size:17px; font-weight:500; cursor:pointer; } .modaltab6 ul li.active,.modaltab6 ul li:hover { background:#16c5d5; color:#fff; } .modaltab7 { position:absolute; top:130px; left:50%; transform: translate(-50%,0); width:1280px; height:65px; margin:0 auto; border:1px solid #dbd9d9; background:#fff; text-align:center; box-sizing:border-box; border-radius:14px; overflow:hidden; z-index:1; } .modaltab7 ul li { float:left; width:20%; height:63px; line-height:63px; background:#fff; color:#373737; font-size:17px; font-weight:500; cursor:pointer; } .modaltab7 ul li.active,.modaltab7 ul li:hover { background:#16c5d5; color:#fff; } .modaltab8 { position:relative; width:100%; height:65px; margin:0 auto; overflow:hidden; z-index:1; background:#fff;} .modaltab8 ul { position:relative; width:1280px; height:65px; margin:0 auto;border:1px solid #dbd9d9; background:#fff; text-align:center; box-sizing:border-box; border-radius:14px; overflow:hidden; } .modaltab8 ul li { float:left; width:25%; height:63px; line-height:63px; background:#fff; color:#373737; font-size:17px; font-weight:500; cursor:pointer; } .modaltab8 ul li.active,.modaltab8 ul li:hover { background:#16c5d5; color:#fff; } .modaltab9 { position:relative; width:100%; height:65px; margin:0 auto; overflow:hidden; z-index:1; background:#fff;} .modaltab9 ul { position:relative; width:1280px; height:65px; margin:0 auto;border:1px solid #dbd9d9; background:#fff; text-align:center; box-sizing:border-box; border-radius:14px; overflow:hidden; } .modaltab9 ul li { float:left; width:16.66666666666667%; height:63px; line-height:63px; background:#fff; color:#373737; font-size:17px; font-weight:500; cursor:pointer; } .modaltab9 ul li.active,.modaltab9 ul li:hover { background:#16c5d5; color:#fff; } .sub05_modal2_3 { position:relative; width:100%; height:1100px; background:#fff; } .sub05_modal2_3bg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:#f0f0f0 url('/page_KR0/05_sub/images/sub05_modal2_3bg.jpg')no-repeat 50% 0; background-size:cover; } .sub05_modal2_4 { position:relative; width:1280px; margin:0 auto; padding-top:280px; } .sub05_modal2_4 div.title { font-size:20px; font-weight:500; color:#6c6c6c; line-height:180%; } .sub05_modal2_4 div.title span { color:#04b9c9; } .sub05_modal2_5 { position:relative; width:100%; padding:90px 0; background:#f0f0f0; } .bna05 { position:relative; width:1280px; margin:0 auto; margin-top:20px; display: flex; justify-content: space-between; } .bna05 li { } .sub05_modal_tab { position:relative; width:1280px; margin:0 auto; padding-top:50px; overflow:hidden; padding-left: 34px; box-sizing:border-box; } .sub05_modal_tab .modaltab4 { float:left; width:310px; } .sub05_modal_tab .modaltab4 ul li { width:100%; height:71px; line-height:71px; padding-left:78px; margin-bottom:18px; cursor:pointer; box-sizing:border-box; } .sub05_modal_tab .modaltab4 ul li span { display:block; width:100%; height:71px; line-height:71px; color:#373737; font-size:17px; 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 0 50%; } .sub05_modal_tab .modaltab4 ul li.mtab2 { background:url('/page_KR0/05_sub/images/micontxt2.png')no-repeat 0 50%; } .sub05_modal_tab .modaltab4 ul li.mtab3 { background:url('/page_KR0/05_sub/images/micontxt3.png')no-repeat 0 50%; } .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 0 50%; } .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 0 50%; } .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 0 50%; } .modal_tab_con { position:relative; float:left; width:710px; margin-left:60px; } .modal_tab_con div.icontitle2 { font-size:19px; 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:90px; } .modal_tab_con ul.icontxt li { float:left; width:230px; height:52px; padding-left:68px; 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%; max-height:1097px; background:url('/page_KR0/05_sub/images/sub05_modal2_4bg.jpg')no-repeat 50% 0; background-size:cover; } .sub05_modal2_5bg { position:relative; width:100%; height:980px; background:#ffffff url('/page_KR0/05_sub/images/sub05_modal2_5bg.jpg')no-repeat 50% 150px; } .sub05_modal2_6bg { position:relative; width:100%; height:1593px; background:#f9f9f9 url('/page_KR0/05_sub/images/sub05_modal2_6bg.jpg')no-repeat 50% 150px; } .sub05_modal2_7bg { position:relative; width:100%; height:980px; background:#ffffff url('/page_KR0/05_sub/images/sub05_modal2_7bg.jpg')no-repeat 50% 150px; } .modalcon2 { position:absolute; top:474px; left:250px; width:600px; font-size:18px; font-weight:400; color:#2b2b2b; line-height:170%; } .modalcon3 { position:absolute; top:700px; left:250px; width:600px; font-size:18px; font-weight:400; color:#6c6c6c; line-height:170%; } .modalcon3 span { color:#13c0d7; } .modal5_3_1 { position:relative; width:100%; max-width:1920px; height:100%; background-size:cover; } .modalbg3 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:100%; margin:0 auto; } .modalbg3 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd; background:url('/page_KR0/05_sub/images/modal5_3_1bg1.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modalbg3 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:url('/page_KR0/05_sub/images/modal5_3_1bg2.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modalbg3 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:url('/page_KR0/05_sub/images/modal5_3_1bg3.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modalbg3 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd; background:url('/page_KR0/05_sub/images/modal5_3_1bg4.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal5_3 .modalbg3 li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s; } .modal5_3 .modalbg3 li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .modal5_3 .modalbg3 li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .modal5_3 .modalbg3 li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .modal5_3_1con { position:relative; width:1280px; margin:0 auto; padding-top:200px; } .modal5_3_1con div.title { font-size:20px; font-weight:500; color:#6c6c6c; line-height:180%; } .modal5_3_1con div.title2 { position:absolute; top:696px; left:636px; width:660px; font-size:17px; font-weight:400; color:#000000; line-height:180%; } .modal5_3_1con div.title2 span { color:#07c2d3; } .modal5_3icon li { font-size:15px; font-weight:500; color:#232323; text-align:center; } .modal5_3icon li.icon5_3_1 { position:absolute; top:62px; left:72px; width:98px; padding-top:110px; background:url('/page_KR0/05_sub/images/icon5_3_1.png')no-repeat 50% 0; } .modal5_3icon li.icon5_3_2 { position:absolute; top:124px; left:413px; width:98px; padding-top:110px; background:url('/page_KR0/05_sub/images/icon5_3_2.png')no-repeat 50% 0; } .modal5_3icon li.icon5_3_3 { position:absolute; top:20px; left:770px; width:98px; padding-top:110px; background:url('/page_KR0/05_sub/images/icon5_3_3.png')no-repeat 50% 0; } .modal5_3icon li.icon5_3_4 { position:absolute; top:68px; left:1104px; width:98px; padding-top:110px; background:url('/page_KR0/05_sub/images/icon5_3_4.png')no-repeat 50% 0; } .modal5_3 .modaltab2 { animation: fadeup3 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.7s; } .modal5_3 .modal5_3_1con div.title { animation: fadeup 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.1s; } .modal5_3 .modal5_3icon { animation: text-focus-in 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.4s; } .modal5_3 .modal5_3_1con div.title2 { animation: fadeup 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.9s; } .modal5_3_2con { position:relative; width:1280px; height:100%; max-height:1092px; margin:0 auto; padding-top:200px; box-sizing:border-box; } .modal5_3_2con div.title { position:absolute; top:320px; left:636px; font-size:20px; font-weight:400; color:#6c6c6c; line-height:180%; } .modal5_3_2con div.title span { color:#07c2d3; } .modal5_3icon2 { position:absolute; top:440px; left:636px; width:482px; } .modal5_3icon2 li { position:relative; width:100%; height:92px; padding-left:88px; margin-bottom:52px; font-size:17px; 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:92px; height:92px; line-height:92px; 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%; max-width:1920px; margin:0 auto; height:1070px; padding-top:100px; background:url('/page_KR0/05_sub/images/modal5_3_2con2.jpg')no-repeat 0 0; background-size:cover; overflow:hidden; box-sizing:border-box; } .modal5_3_2con2 div.title { font-size:20px; font-weight:400; color:#6c6c6c; line-height:140%; } .modal5_3_2con2 div.title span { color:#07c2d3; } .imgtxt1 { position:relative; width:1280px; margin:0 auto; margin-top:78px; overflow:hidden; } .imgtxt1 ul li.t1 { font-size:23px; font-weight:500; color:#323131; } .imgtxt1 ul li.t2 { padding-top:10px; font-size:14px; font-weight:300; color:#878787; line-height:160%; } .imgtxt1 ul.imgtxt1_1 { float:left; width:360px; padding-top:280px; margin-right:100px; background:url('/page_KR0/05_sub/images/imgtxt1_1.png')no-repeat 0 0; } .imgtxt1 ul.imgtxt1_2 { float:left; width:360px; padding-top:280px; margin-right:100px; background:url('/page_KR0/05_sub/images/imgtxt1_2.png')no-repeat 0 0; } .imgtxt1 ul.imgtxt1_3 { float:left; width:360px; padding-top:280px; background:url('/page_KR0/05_sub/images/imgtxt1_3.png')no-repeat 0 0; } .imgtxt2 { position:absolute; top:308px; right:0px; width:856px; } .imgtxt2 ul li.t1 { font-size:23px; font-weight:700; color:#3f3e3e; } .imgtxt2 ul li.t2 { padding-top:10px; font-size:17px; font-weight:400; color:#6c6c6c; line-height:160%; } .imgtxt2 ul { width:100%; height:140px; margin-bottom:54px; padding-left:184px; box-sizing:border-box; } .imgtxt2 ul.imgtxt2_1 { background:url('/page_KR0/05_sub/images/imgtxt2_1.png')no-repeat 0 0; } .imgtxt2 ul.imgtxt2_2 { background:url('/page_KR0/05_sub/images/imgtxt2_2.png')no-repeat 0 0; } .imgtxt2 ul.imgtxt2_3 { background:url('/page_KR0/05_sub/images/imgtxt2_3.png')no-repeat 0 0; } .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:60%; 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%; transform:translate(-50%,-50%); width:1280px; transition:all 0.3s cubic-bezier(0.5, 0, 0.1, 1) 0.5s; } .a_icon_view .a_icon_close { cursor:pointer; font-size: 30px; font-weight:100; color:#fff; display:block; position:absolute; top: 10%; left: 82%; 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; } .modal6_1_1 { position:relative; width:100%; height:1020px; 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: auto; width: auto; } .modalbg6_1 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e5e5e5; background:rgba(255,255,255,0.8); box-sizing:border-box; } .modalbg6_1 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e5e5e5; background:rgba(255,255,255,0.8); box-sizing:border-box; } .modalbg6_1 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e5e5e5; background:rgba(255,255,255,0.8); box-sizing:border-box; } .modalbg6_1 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e5e5e5; background:rgba(255,255,255,0.8); box-sizing:border-box; } .modal6_1 .modalbg6_1 li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .modal6_1 .modalbg6_1 li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .modal6_1 .modalbg6_1 li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .modal6_1 .modalbg6_1 li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .modal6_1con { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1040px; } .modal6_1con ul { width:100%; overflow:hidden; } .modal6_1con ul li.t1 { float:left; width:510px; font-size:38px; font-weight:700; color:#373737; } .modal6_1con ul li.t2 { float:right; width:530px; font-size:17px; font-weight:400; color:#3c3c3c; 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: fadeleft 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .modal6_1 .modal6_1con ul li.t2 { animation: faderight 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.5s; } .modal6_1_2 { position:relative; width:100%; max-width:1920px; margin:0 auto; height:1070px; padding-top:100px; background:url('/page_KR0/05_sub/images/modal5_3_2con2.jpg')no-repeat 0 0; background-size:cover; overflow:hidden; box-sizing:border-box; } .modal6_1_2 .imgtxt { position:relative; width:1280px; margin:0 auto; padding-top:160px; overflow:hidden; } .modal6_1_2 .imgtxt li { float:left; width:25%; text-align:center; padding-top:200px; font-size:20px; 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; } .modal6_1_2 .imgtxt li:nth-child(2) { background:url('/page_KR0/06_sub/images/imgtxtbg2.png')no-repeat 50% 0; } .modal6_1_2 .imgtxt li:nth-child(3) { background:url('/page_KR0/06_sub/images/imgtxtbg3.png')no-repeat 50% 0; } .modal6_1_2 .imgtxt li:nth-child(4) { background:url('/page_KR0/06_sub/images/imgtxtbg4.png')no-repeat 50% 0; } .modal6_1_2 div.txt2 { width:100%; padding-top:80px; font-size:18px; font-weight:500; color:#000; text-align:center; } .modal6_1_3 { position:relative; width:100%; max-width:1920px; margin:0 auto; height:1100px; background:url('/page_KR0/06_sub/images/modal6_1_3.jpg')no-repeat 0 0; background-size:cover; background-attachment:fixed; } .modal6_1_3 ul { position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); width:1280; } .modal6_1_3 ul li.t1 { font-size:38px; font-weight:700; color:#ffffff; } .modal6_1_3 ul li.t2 { width:100%; margin-top:60px; overflow:hidden; font-size:19px; font-weight:300; color:#fff; line-height:160%; } .modal6_1_3 ul li.t2 span { float:left; display:block; width:33.3%; height:180px; box-sizing:border-box; } .eyes_process { position:relative; width:1060px; margin:0 auto; margin-top:80px; overflow:hidden; } .eyes_process .ep_bt { float:left; width:354px; } .eyes_process .ep_bt li { width:100%; height:42px; line-height:42px; margin-bottom:36px; font-size:19px; font-weight:500; color:#2e3432; cursor:pointer; } .eyes_process .ep_bt li span { display:inline-block; width:42px; height:42px; margin-right:14px; text-align:center; color:#fff; border-radius:100%; background:#d0cfcf; } .eyes_process .ep_bt li.on span { background:#13c0d7; } .ep_slide { float:right; width:704px; } .ep_slide ul li.imgs { width:704px; height:411px; overflow:hidden; } .ep_slide ul li.txt { width:100%; height:100px; text-align:center; background:#efefef; line-height:100px; font-size:19px; font-weight:700; color:#3e3e3e; } .modal6_2_1 { position:relative; width:100%; height:1020px; margin:0 auto; overflow:hidden; } .modal6_2_1 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:100%; margin:0 auto; } .modalbg6_2 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e5e5e5; background:url('/page_KR0/06_sub/images/modal6_2_1bg1.jpg')no-repeat 50% 0; background-size:cover; box-sizing:border-box; } .modalbg6_2 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e5e5e5; background:url('/page_KR0/06_sub/images/modal6_2_1bg2.jpg')no-repeat 50% 0; background-size:cover; box-sizing:border-box; } .modalbg6_2 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e5e5e5; background:url('/page_KR0/06_sub/images/modal6_2_1bg3.jpg')no-repeat 50% 0; background-size:cover; box-sizing:border-box; } .modalbg6_2 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e5e5e5; background:url('/page_KR0/06_sub/images/modal6_2_1bg4.jpg')no-repeat 50% 0; background-size:cover; box-sizing:border-box; } .modal6_2 .modalbg6_2 li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .modal6_2 .modalbg6_2 li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .modal6_2 .modalbg6_2 li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .modal6_2 .modalbg6_2 li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .modal6_2 .modal6_1con ul li.t1 { animation: fadeleft 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .modal6_2 .modal6_1con ul li.t2 { animation: faderight 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.5s; } .modal6_2_2 { position:relative; width:100%; height:2100px; margin:0 auto; overflow:hidden; } .modalbg6_3 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e5e5e5; background:#ffffff; box-sizing:border-box; } .modalbg6_3 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e5e5e5; background:#ffffff; box-sizing:border-box; } .modalbg6_3 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e5e5e5; background:#ffffff; box-sizing:border-box; } .modalbg6_3 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e5e5e5; background:#ffffff; box-sizing:border-box; } .modal6_2_2 .imgtxt { position:absolute; top:50px; right:100px; width:756px; } .modal6_2_2 .imgtxt ul { width:100%; height:172px; margin-bottom:40px; overflow:hidden; } .modal6_2_2 .imgtxt ul li.imgs { float:left; width:172px; height:172px; } .modal6_2_2 .imgtxt ul li.txt { float:right; width:490px; height:172px; } .modal6_2_2 .imgtxt ul li.txt span.t1 { padding-top:8px; display:block; width:100%; font-size:21px; font-weight:700; color:#13c0d7; } .modal6_2_2 .imgtxt ul li.txt span.t2 { display:block; width:100%; font-size:19px; 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:1020px; margin:0 auto; padding-top:90px; overflow:hidden; } .method6_2 div { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:50px; height:50px; background:#17c5da; border-radius:100%; font-size:28px; font-weight:700; text-align:center; color:#fff; line-height:50px; } .method6_2 ul:nth-child(1) { float:left; width:504px; margin-right:12px; } .method6_2 ul { float:left; width:504px; } .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:21px; font-weight:700; color:#13c0d7; } .method6_2 ul li.txt span.t2 { display:block; font-size:16px; font-weight:400; color:#939393; } .modal6_2_2 .title { width:1036px; margin:0 auto; margin-top:120px; font-size:16px; font-weight:500; color:#6c6c6c; line-height:170%; } .modal6_2_2 .title2 { width:1036px; margin:0 auto; margin-top:30px; font-size:16px; font-weight:500; color:#6c6c6c; line-height:170%; } .modal6_2_3 { position:relative; width:100%; height:800px; margin:0 auto; overflow:hidden; background:#f3f3f3;} .modalbg6_4 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:#f3f3f3; box-sizing:border-box; } .modalbg6_4 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:#f3f3f3; box-sizing:border-box; } .modalbg6_4 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:#f3f3f3; box-sizing:border-box; } .modalbg6_4 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#f3f3f3; box-sizing:border-box; } .modal6_2_3 .imgtxt { position:relative; width:1100px; margin:0 auto; padding-top:230px; overflow:hidden; } .modal6_2_3 .imgtxt ul li.txt { float:left; width:440px; } .modal6_2_3 .imgtxt ul li.txt span.t1 { display:block; width:100%; font-size:40px; font-weight:700; color:#000000; } .modal6_2_3 .imgtxt ul li.txt span.t2 { display:block; width:100%; font-size:19px; font-weight:400; color:#6c6c6c; } .modal6_2_3 .imgtxt ul li.imgs { float:right; width:620px; } .modal6_2_3 .imgtxt ul li.imgs div { display:block; float:left; width:285px; padding-top:300px; font-size:19px; font-weight:500; color:#6c6c6c; text-align:center; } .modal6_2_3 .imgtxt ul li.imgs div.img1 { margin-right:50px; background:url('/page_KR0/06_sub/images/06img6.png')no-repeat 50% 0; } .modal6_2_3 .imgtxt ul li.imgs div.img2 { background:url('/page_KR0/06_sub/images/06img7.png')no-repeat 50% 0; } .modal6_2_3_2 { position:relative; width:100%; height:900px; margin:0 auto; overflow:hidden; background:url('/page_KR0/06_sub/images/modal6_2_3.jpg')no-repeat 50% 0; background-size:cover; background-attachment: fixed; } .modal6_2_3_2 .icontxt { position:relative; top:260px; width:1100px; margin:0 auto; overflow:hidden; } .modal6_2_3_2 .title { float:left; width:440px; font-size:40px; font-weight:700; color:#fff; } .modal6_2_3_2 .icontxt ul { float:right; width:620px; } .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:17px; font-weight:700; color:#fff; } .modal6_2_3_2 .icontxt ul li span.img2 { display:block; font-size:17px; 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:1060px; margin:0 auto; margin-top:80px; overflow:hidden; } .eyes_process .ep_bt2 { float:left; width:354px; } .eyes_process .ep_bt2 li { width:100%; height:42px; line-height:42px; margin-bottom:36px; font-size:19px; font-weight:500; color:#2e3432; cursor:pointer; } .eyes_process .ep_bt2 li span { display:inline-block; width:42px; height:42px; margin-right:14px; text-align:center; color:#fff; border-radius:100%; background:#d0cfcf; } .eyes_process .ep_bt2 li.on span { background:#13c0d7; } .ep_slide2 { float:right; width:704px; } .ep_slide2 ul li.imgs { width:704px; height:318px; overflow:hidden; } .ep_slide2 ul li.txt { width:100%; height:100px; text-align:center; background:#13c0d7; line-height:100px; font-size:19px; font-weight:700; color:#fff; } .modal6_1_2 .title2 { position:absolute; top:592px; left:467px; font-size:17px; font-weight:400; color:#6c6c6c; line-height:160%; } .modal6_3_1 { position:relative; width:100%; height:1020px; margin:0 auto; overflow:hidden; } .modalbg6_5 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e5e5e5; background:url('/page_KR0/06_sub/images/modal6_3_1bg1.jpg')no-repeat 50% 0; background-size:cover; box-sizing:border-box; } .modalbg6_5 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e5e5e5; background:url('/page_KR0/06_sub/images/modal6_3_1bg2.jpg')no-repeat 50% 0; background-size:cover; box-sizing:border-box; } .modalbg6_5 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e5e5e5; background:#f9f9f9; box-sizing:border-box; } .modalbg6_5 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e5e5e5; background:#f9f9f9; box-sizing:border-box; } .modal6_3_1 .txt { position:absolute; top:50%; left:56%; transform:translate(0,-50%); } .modal6_3_1 .txt li.t1 { font-size:40px; font-weight:700; color:#16c5d5; } .modal6_3_1 .txt li.t2 { padding-top:20px; font-size:20px; font-weight:400; color:#6c6c6c; } .modal6_3 .modalbg6_5 li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.4s; } .modal6_3 .modalbg6_5 li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; } .modal6_3 .modalbg6_5 li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s; } .modal6_3 .modalbg6_5 li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7s; } .modal6_3 .modal6_3_1 .txt li.t1 { animation: text-focus-in2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.2s; } .modal6_3 .modal6_3_1 .txt li.t2 { animation: text-focus-in2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.6s; } .modal6_3_2 { position:relative; width:100%; height:1020px; padding-top:180px; margin:0 auto; overflow:hidden; box-sizing:border-box; } .modal6_3_2 .imgtxt { position:relative; width:1280px; margin:0 auto; padding:80px; 0 0 170px; box-sizing:border-box; } .modal6_3_2 .imgtxt ul { float:left; width:33.3%; height:305px; padding-top:110px; padding-right:80px; 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_KR0/06_sub/images/it6.png')no-repeat 0 0; } .modal6_3_2 .imgtxt ul li.t1 { font-size:19px; font-weight:700; color:#13c0d7; } .modal6_3_2 .imgtxt ul li.t2 { padding-top:10px; font-size:16px; font-weight:400; color:#8b8b8b; } .modal6_3_3 { position:relative; width:100%; max-width:1920px; height:1100px; padding-top:190px; margin:0 auto; background:url('/page_KR0/06_sub/images/modal6_3_3.jpg')no-repeat 50% 0; background-size:cover; overflow:hidden; box-sizing:border-box; } .modal6_3_3 div.txt { padding-top:110px; padding-left:160px; font-size:18px; color:#fff; font-weight:300; line-height:180%; } .modal3_1_1 { position:relative; width:100%; height:1010px; margin:0 auto; overflow:hidden; box-sizing:border-box; } .modal3_1_1 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:100%; margin:0 auto; } .modal3_1_1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_1_1bg1.jpg')no-repeat 0 bottom; background-size:cover; box-sizing:border-box; } .modal3_1_1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_1_1bg2.jpg')no-repeat 0 bottom; background-size:cover; box-sizing:border-box; } .modal3_1_1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_1_1bg3.jpg')no-repeat 0 bottom; background-size:cover; box-sizing:border-box; } .modal3_1_1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_1_1bg4.jpg')no-repeat 0 bottom; background-size:cover; box-sizing:border-box; } .modal3_1_1 .txt { position:relative; width:1280px; margin:0 auto; padding-top:180px; } .modal3_1_1 .txt li.t1 { font-size:40px; font-weight:700; color:#000; } .modal3_1_1 .txt li.t2 { font-size:20px; font-weight:400; color:#6c6c6c; } .modal3_1_1 .txt li.t2 span { color:#2f2f2f; } .modal3_1_1 .txt li.itxt1 { font-size:16px; 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:16px; 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:16px; 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:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .modal3_1 .modalbg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal3_1 .modalbg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal3_1 .modalbg li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal3_1 .modal3_1_1 .txt li.t1 { animation: text-focus-in2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.0s; } .modal3_1 .modal3_1_1 .txt li.t2 { animation: text-focus-in2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .modal3_1 .modal3_1_1 .txt li.itxt1 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_1 .modal3_1_1 .txt li.itxt2 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_1 .modal3_1_1 .txt li.itxt3 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_1_2 { position:relative; width:100%; height:920px; margin:0 auto; overflow:hidden; box-sizing:border-box; } .modal3_1_2 .txt { position:relative; width:1280px; margin:0 auto; padding-top:180px; } .modal3_1_2 .txt li.t1 { font-size:40px; font-weight:700; color:#000; } .modal3_1_2 .txt li.t2 { font-size:20px; font-weight:400; color:#6c6c6c; } .modal3_1_2 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_2 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_2 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_2 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_2 .txt li.imgtxt { margin-top:140px; } .modal3_1_2 .txt li.imgtxt span { display:block; float:left; width:25%; text-align:center; padding-top:206px; font-size:19px; 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; } .modal3_1_2 .txt li.imgtxt span:nth-child(2) { background:url('/page_KR0/03_sub/images/03img2.png')no-repeat 50% 0; } .modal3_1_2 .txt li.imgtxt span:nth-child(3) { background:url('/page_KR0/03_sub/images/03img3.png')no-repeat 50% 0; } .modal3_1_2 .txt li.imgtxt span:nth-child(4) { background:url('/page_KR0/03_sub/images/03img4.png')no-repeat 50% 0; } .modal3_1_3 { position:relative; width:100%; height:1017px; margin:0 auto; overflow:hidden; box-sizing:border-box; } .modal3_1_3 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:100%; margin:0 auto; } .modal3_1_3 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e0e3e3; background:url('/page_KR0/03_sub/images/modal3_1_3bg1.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_1_3 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e0e3e3; background:url('/page_KR0/03_sub/images/modal3_1_3bg2.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_1_3 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e0e3e3; background:url('/page_KR0/03_sub/images/modal3_1_3bg3.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_1_3 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_1_3bg4.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_1_3 .txt { position:relative; width:1280px; margin:0 auto; padding-top:165px; } .modal3_1_3 .txt li.t1 { font-size:20px; font-weight:700; color:#0c0c0c; } .modal3_1_3 .txt li.t2 { font-size:40px; font-weight:700; color:#000000; } .modal3_1_3 .txt li.t3 { font-size:20px; font-weight:300; color:#6c6c6c; } .modal3_1_3 .txt li.t3 span { font-weight:500; color:#6c6c6c; } .modal3_1_3 .txt li.t4 { position:absolute; top:693px; left:420px; width:376px; height:110px; padding-top:20px; background:#16c5d5; text-align:center; border-radius:50px; font-size:23px; font-weight:700; color:#fff;box-sizing:border-box; } .modal3_1_3 .txt li.t4 span { font-size:16px; font-weight:400; } .modal3_1_3 .txt li.t5 { position:absolute; top:488px; left:977px; width:376px; height:110px; padding-top:20px; background:#a4a4a4; text-align:center; border-radius:50px; font-size:23px; font-weight:700; color:#fff;box-sizing:border-box; } .modal3_1_3 .txt li.t5 span { font-size:16px; font-weight:400; } .modal3_1_4 { position:relative; width:100%; margin:0 auto; overflow:hidden; box-sizing:border-box; background:#fff; } .modal3_1_4 .snowlogo { top:60%; } .modal3_1_4 #mcon1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_4 #mcon1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_4 #mcon1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_4 #mcon1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_4 #mcon1 { width:100%; padding-top:166px; padding-bottom:100px; } .modal3_1_4 #mcon1 .txt_1 { position:relative; width:1030px; margin:0 auto; padding-top:40px; 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 { float:left;} .modal3_1_4 #mcon1 .txt_1 ul:nth-child(2) { width:300px; } .modal3_1_4 #mcon1 .txt_1 ul:nth-child(3) { width:290px; } .modal3_1_4 #mcon1 .txt_1 ul li.t1 { margin-top:20px; font-size:16px; font-weight:500; color:#ffffff; width:92px; height:92px; border-radius:100%; background:#16c5d5; text-align:center; line-height:92px; } .modal3_1_4 #mcon1 .txt_1 ul li.t2 { margin-top:10px; font-size:16px; font-weight:500; color:#3f3e3e; } .modal3_1_4 #mcon1 .txt_2 { position:relative; width:1030px; margin:0 auto; padding-top:120px; 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 { display:inline-block; height:53px; margin-top:14px; line-height:53px; font-size:15px; margin-right:10px; font-weight:500; color:#000000; padding-left:64px; } .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 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd; background:#f4f4f4; box-sizing:border-box; } .modal3_1_4 #mcon2 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:#f4f4f4; box-sizing:border-box; } .modal3_1_4 #mcon2 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:#f4f4f4; box-sizing:border-box; } .modal3_1_4 #mcon2 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd; background:#f4f4f4; box-sizing:border-box; } .modal3_1_4 #mcon2 { width:100%; padding-top:166px; padding-bottom:100px; } .modal3_1_4 #mcon2 .txt_3 { position:relative; width:1030px; margin:0 auto; padding-top:80px; overflow:hidden; } .modal3_1_4 #mcon2 .txt_3 ul { float:left; width:50%; text-align:center; } .modal3_1_4 #mcon2 .txt_3 ul li.t1 { margin-top:10px; width:380px; height:71px; margin:0 auto; line-height:71px; font-size:22px; font-weight:700; color:#fff; background:#7b7b7b; border-radius:50px; } .modal3_1_4 #mcon2 .txt_3 ul li.t2 { margin-top:10px; font-size:16px; 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:1030px; margin:0 auto; padding-top:120px; 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 { display:inline-block; height:53px; margin-top:14px; line-height:53px; font-size:15px; margin-right:10px; font-weight:500; color:#000000; padding-left:64px; } .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 { width:100%; padding-top:166px; padding-bottom:100px; } .modal3_1_4 #mcon3 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_4 #mcon3 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_4 #mcon3 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_4 #mcon3 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_1_4 #mcon3 .txt_2 { position:relative; width:1030px; margin:0 auto; padding-top:120px; 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 { display:inline-block; height:53px; margin-top:14px; line-height:53px; font-size:15px; margin-right:10px; font-weight:500; color:#000000; padding-left:64px; } .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:1030px; margin:0 auto; padding-top:150px; overflow:hidden; } .modal3_1_4 #mcon3 .txt_4 li.t1 { font-size:40px; font-weight:700; color:#000000; } .modal3_1_4 #mcon3 .txt_4 li.t2 { font-size:20px; font-weight:400; color:#6c6c6c; } .modal3_2 .modalbg li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .modal3_2 .modalbg li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal3_2 .modalbg li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal3_2 .modalbg li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal3_2 .modal3_1_1 .txt li.t1 { animation: text-focus-in2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.0s; } .modal3_2 .modal3_1_1 .txt li.t2 { animation: text-focus-in2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .modal3_2 .modal3_1_1 .txt li.itxt1 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_2 .modal3_1_1 .txt li.itxt2 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_2 .modal3_1_1 .txt li.itxt3 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_2_2 { height:1520px; } .modal3_1_2 .txt li.imgtxt3 { margin-top:80px; } .modal3_1_2 .txt li.imgtxt3 ul { display:block; float:left; width:33%; height:560px; padding-top:260px; box-sizing:border-box; } .modal3_1_2 .txt li.imgtxt3 ul li.t1 { font-size:23px; font-weight:700; color:#16c5d5; } .modal3_1_2 .txt li.imgtxt3 ul li.t2 { width:80%; margin-top:10px; font-size:14px; font-weight:40; 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; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(2) { background:url('/page_KR0/03_sub/images/imgtxt2.png')no-repeat 0 0; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(3) { background:url('/page_KR0/03_sub/images/imgtxt3.png')no-repeat 0 0; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(4) { background:url('/page_KR0/03_sub/images/imgtxt4.png')no-repeat 0 0; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(5) { background:url('/page_KR0/03_sub/images/imgtxt5.png')no-repeat 0 0; } .modal3_1_2 .txt li.imgtxt3 ul:nth-child(6) { background:url('/page_KR0/03_sub/images/imgtxt6.png')no-repeat 0 0; } .modal3_2_3 { position:relative; width:100%; margin:0 auto; overflow:hidden; box-sizing:border-box; background:#fff; } .modal3_2_3 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd; background:#f4f4f4; box-sizing:border-box; } .modal3_2_3 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:#f4f4f4; box-sizing:border-box; } .modal3_2_3 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:#f4f4f4; box-sizing:border-box; } .modal3_2_3 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd; background:#f4f4f4; box-sizing:border-box; } .modal3_2_3 { width:100%; padding-top:166px; padding-bottom:100px; } .modal3_2_3 .txt_3 { position:relative; width:1030px; margin:0 auto; padding-top:80px; overflow:hidden; } .modal3_2_3 .txt_3 ul { float:left; width:50%; text-align:center; } .modal3_2_3 .txt_3 ul li.t1 { margin-top:10px; width:380px; height:71px; margin:0 auto; line-height:71px; font-size:22px; font-weight:700; color:#fff; background:#7b7b7b; border-radius:50px; } .modal3_2_3 .txt_3 ul li.t2 { margin-top:10px; font-size:16px; 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:1030px; margin:0 auto; padding-top:120px; 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 { display:inline-block; height:53px; margin-top:14px; line-height:53px; font-size:15px; margin-right:10px; font-weight:500; color:#000000; padding-left:64px; } .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 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_2_4 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_2_4 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_2_4 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #ddd; background:#fff; box-sizing:border-box; } .modal3_2_4 .txt_4 { position:relative; width:1030px; margin:0 auto; padding:130px 0; overflow:hidden; } .modal3_2_4 .txt_4 li.t1 { font-size:40px; font-weight:700; color:#000000; } .modal3_2_4 .txt_4 li.t2 { font-size:20px; font-weight:400; color:#6c6c6c; } .modal3_1_1 .modalbg2 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:100%; margin:0 auto; } .modal3_1_1 .modalbg2 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_3_1bg1.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_1_1 .modalbg2 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_3_1bg2.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_1_1 .modalbg2 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_3_1bg3.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_1_1 .modalbg2 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_3_1bg4.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_3 .modalbg2 li:nth-child(1) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .modal3_3 .modalbg2 li:nth-child(2) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal3_3 .modalbg2 li:nth-child(3) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal3_3 .modalbg2 li:nth-child(4) { animation: topheight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal3_3 .modal3_1_1 .txt li.t1 { animation: text-focus-in2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.0s; } .modal3_3 .modal3_1_1 .txt li.t2 { animation: text-focus-in2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .modal3_3 .modal3_1_1 .txt li.itxt1 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_3 .modal3_1_1 .txt li.itxt2 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_3 .modal3_1_1 .txt li.itxt3 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_4_2 .snowlogo { display:block; position:absolute; top:45%; right:15%; width:80px; height:80px; 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_2 { position: relative; width: 100%; min-height: 1020px; box-sizing: border-box; background:#fff; } .modal3_4_tab1 { position: relative; width: 100%; min-height: 1020px; padding-top: 90px; box-sizing: border-box; } .modal3_4_tab1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal3_4_tab1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal3_4_tab1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%;border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal3_4_tab1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal3_4_tab2 { position: relative; width: 100%; min-height: 900px; padding-top: 90px; box-sizing: border-box; } .modal3_4_tab2 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f3f3f3; background-size:cover; box-sizing:border-box; } .modal3_4_tab2 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f3f3f3; background-size:cover; box-sizing:border-box; } .modal3_4_tab2 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%;border-right:1px solid #e1e1e1; background:#f3f3f3; background-size:cover; box-sizing:border-box; } .modal3_4_tab2 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e1e1e1; background:#f3f3f3; background-size:cover; box-sizing:border-box; } .modal3_4_tab3 { position: relative; width: 100%; height: 900px; background:url('/page_KR0/03_sub/images/modal3_4_tab3.jpg')no-repeat 50% 50%; background-size:cover; box-sizing: border-box; } .modal3_4_tab3 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background-size:cover; box-sizing:border-box; } .modal3_4_tab3 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background-size:cover; box-sizing:border-box; } .modal3_4_tab3 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background-size:cover; box-sizing:border-box; } .modal3_4_tab3 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background-size:cover; box-sizing:border-box; } .modal3_4_tab4 { position: relative; width:100%; height:982px; padding-top: 120px; padding-top:100px; background:url('/page_KR0/03_sub/images/modal3_4_tab4.jpg')no-repeat 50% 50%; background-size:cover; box-sizing: border-box; } .modal3_4_tab4 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; opacity:0.3; background-size:cover; box-sizing:border-box; } .modal3_4_tab4 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; opacity:0.3; background-size:cover; box-sizing:border-box; } .modal3_4_tab4 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; opacity:0.3; background-size:cover; box-sizing:border-box; } .modal3_4_tab4 .imgtxt { position:relative; width:1030px; padding-left: 34px; margin:0 auto; margin-top:78px; box-sizing:border-box; overflow:hidden; } .modal3_4_tab4 .imgtxt ul { float:left; width:33.3%; } .modal3_4_tab4 .imgtxt ul li.t1 { font-size:18px; 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:1030px; padding-left: 34px; margin:0 auto; margin-top:78px; 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; background:#fff; width: 100%; height: 1030px; margin: 0 auto; overflow: hidden; box-sizing: border-box; } .modal3_4_1 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:100%; margin:0 auto; } .modal3_4_1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_4_1bg1.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_4_1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_4_1bg2.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_4_1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_4_1bg3.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_4_1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/03_sub/images/modal3_4_1bg4.jpg')no-repeat 50% bottom; background-size:cover; box-sizing:border-box; } .modal3_4_1 .txt { position:relative; width:1280px; margin:0 auto; padding-top:180px; overflow:hidden; } .modal3_4_1 .txt li.t1 { float:left; width:50%; font-size:40px; font-weight:700; color:#000; } .modal3_4_1 .txt li.t2 { float:left; width:50%; font-size:19px; 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:16px; 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:16px; 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:16px; 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 .modalbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s; } .modal3_4 .modalbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal3_4 .modalbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal3_4 .modalbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal3_4 .modal3_4_1 .txt li.t1 { animation: text-focus-in2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.0s; } .modal3_4 .modal3_4_1 .txt li.t2 { animation: text-focus-in2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s; } .modal3_4 .modal3_4_1 .txt li.itxt1 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_4 .modal3_4_1 .txt li.itxt2 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .modal3_4 .modal3_4_1 .txt li.itxt3 { animation: text-focus-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.8s; } .img03txt { position:relative; width:1030px; padding-left: 34px; margin:0 auto; margin-top:120px; box-sizing:border-box; } .img03txt li { position:absolute; width:160px; 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_tab5 { min-height:880px; } .modal3_4_tab6 { position: relative; width: 100%; padding-top: 90px; padding-bottom:100px; box-sizing: border-box; } .modal3_4_tab6 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f3f3f3; background-size:cover; box-sizing:border-box; } .modal3_4_tab6 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f3f3f3; background-size:cover; box-sizing:border-box; } .modal3_4_tab6 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%;border-right:1px solid #e1e1e1; background:#f3f3f3; background-size:cover; box-sizing:border-box; } .modal3_4_tab6 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e1e1e1; background:#f3f3f3; background-size:cover; box-sizing:border-box; } .img03txt2 { position:relative; width:1030px; padding-left: 34px; margin:0 auto; margin-top:40px; text-align:center; box-sizing:border-box; } .img03txt2 ul { display:inline-block; width:470px; margin:0 10px; background:#fff; vertical-align:top; } .img03txt2 ul li img { width:100%; } .img03txt2 ul li.t1 { width:100%; padding-top:40px; background:#fff; font-size:20px; font-weight:700; color:#13c0d7; text-align:center; } .img03txt2 ul li.t2 { width:100%; height:166px; padding-bottom:40px; background:#fff; font-size:15px; font-weight:400; color:#827d7d; text-align:center; } .img03txt3 { position:relative; width:1080px; margin:0 auto; margin-top:60px; padding-left: 34px; box-sizing:border-box; } .img03txt3 li { float:left; width:25%; padding-top:246px; font-size:15px; font-weight:400; color:#4e4e4e; text-align:left; } .img03txt3 li span { font-weight:500; color:#16c5d5; } .img03txt3 li:nth-child(1) { background:url('/page_KR0/03_sub/images/03img28.png')no-repeat 0% 0%; } .img03txt3 li:nth-child(2) { background:url('/page_KR0/03_sub/images/03img29.png')no-repeat 0% 0%; } .img03txt3 li:nth-child(3) { background:url('/page_KR0/03_sub/images/03img30.png')no-repeat 0% 0%; } .img03txt3 li:nth-child(4) { background:url('/page_KR0/03_sub/images/03img31.png')no-repeat 0% 0%; } .modal_txtbox_size { width:1080px; } .modal3_4_2 .modaltab3 { top:90px; } .modal3_4_2 .modal_txtbox { padding-top:170px; } .modal2_1 { background:#fff; } .modal2_1_1 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1030px;box-sizing: border-box; } .modal2_1_1 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:100%; margin:0 auto; } .modal2_1_1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_1_1bg1.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal2_1_1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_1_1bg2.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal2_1_1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_1_1bg3.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal2_1_1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_1_1bg4.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal2_1_1 ul.txt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; } .modal2_1_1 ul.txt li.t1 { display:inline-block; font-size:22px; font-weight:700; color:#fff; vertical-align:top; margin-right:10px; } .modal2_1_1 ul.txt li.t2 { display:inline-block; font-size:40px; font-weight:700; color:#fff; text-align:left; vertical-align:top; margin-left:10px; line-height:120%; } .modal2_1 .modalbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal2_1 .modalbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal2_1 .modalbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal2_1 .modalbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .modal2_1 .modal2_1_1 ul.txt li.t1 { animation: fadeleft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal2_1 .modal2_1_1 ul.txt li.t2 { animation: faderight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .modal2_1_2 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1036px;box-sizing: border-box; } .modal2_1_2 .modalbg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/02_sub/images/modal2_1_2.jpg')no-repeat 0 0; background:cover; box-sizing:border-box; } .modal2_1_2 ul.txt { position:relative; width:1040px; margin:0 auto; padding-top:190px; } .modal2_1_2 ul.txt li.t1 { font-size:19px; font-weight:400; color:#ffffff; } .modal2_1_2 ul.txt li.t2 { font-size:40px; font-weight:700; color:#ffffff; line-height:140%; } .modal2_1_2 ul.txt li.t3 { height:22px; line-height:22px; font-size:17px; font-weight:500; color:#ffffff; vertical-align: bottom; } .modal2_1_2 ul.txt li.t3 span { display:inline-block; width:22px; height:22px; background:#fff; border-radius:100%; margin-right:8px; } .modal2_1_2 ul.txt li.t4 { position:absolute; top:750px; right:0px; font-size:22px; font-weight:500; color:#ffffff; vertical-align: bottom; } .modal2_1_3 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1088px;box-sizing: border-box; } .modal2_1_3 .modalbg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/02_sub/images/modal2_1_3.jpg')no-repeat 0 0; background:cover; box-sizing:border-box; } .modal2_1_3 ul.txt { position:relative; width:1040px; margin:0 auto; padding-top:220px; padding-left:384px; box-sizing:border-box; } .modal2_1_3 ul.txt li.t1 { font-size:18px; font-weight:400; color:#6c6c6c; } .modal2_1_3 ul.txt li.t2 { font-size:38px; font-weight:700; color:#000; line-height:130%; } .modal2_1_3 ul.txt li.t3 { width:100%; padding-left:98px; box-sizing:border-box; background:url('/page_KR0/02_sub/images/txt_t3.jpg')no-repeat 0 0; } .modal2_1_3 ul.txt li.t4 { width:100%; padding-left:98px; box-sizing:border-box; background:url('/page_KR0/02_sub/images/txt_t4.jpg')no-repeat 0 0; } .modal2_1_3 ul.txt li.t5 { width:100%; padding-left:98px; box-sizing:border-box; background:url('/page_KR0/02_sub/images/txt_t5.jpg')no-repeat 0 0; } .modal2_1_3 ul.txt li span.title { display:block; width:100%; margin-top:20px; font-size:24px; 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:17px; font-weight:400; color:#6c6c6c; line-height:100%; } .modal2_1_4 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1094px;box-sizing: border-box; } .modal2_1_4 .modalbg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/02_sub/images/modal2_1_4.jpg')no-repeat 0 0; background:cover; box-sizing:border-box; } .modal2_1_4 ul.txt { position:relative; width:1030px; margin:0 auto; padding-top:300px; box-sizing:border-box; } .modal2_1_4 ul.txt li.t1 { font-size:29px; font-weight:700; color:#2d2d2d; } .modal2_1_4 ul.txt li.t2 { font-size:17px; font-weight:400; color:#6c6c6c; line-height:180%; } .modal2_3 { } .modal2_3_1 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1030px;box-sizing: border-box; } .modal2_3_1 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:100%; margin:0 auto; } .modal2_3_1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_3_1bg1.jpg')no-repeat 50% bottom; background-size:cover; box-sizing: border-box;} .modal2_3_1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_3_1bg2.jpg')no-repeat 50% bottom;box-sizing: border-box; background-size: cover;} .modal2_3_1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_3_1bg3.jpg')no-repeat 50% bottom; box-sizing: border-box; } .modal2_3_1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_3_1bg4.jpg')no-repeat 50% bottom; box-sizing: border-box; } .modal2_3_1 ul.txt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; } .modal2_3_1 ul.txt li.t1 { display:inline-block; font-size:22px; font-weight:700; color:#fff; vertical-align:top; margin-right:10px; margin-left:340px; } .modal2_3_1 ul.txt li.t2 { display:inline-block; font-size:40px; font-weight:700; color:#fff; text-align:left; vertical-align:top; margin-left:10px; line-height:120%; } .modal2_3_1 ul.txt li.t2 span { font-size:19px; font-weight:400; color:#fff; } .modal2_3 .modalbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal2_3 .modalbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal2_3 .modalbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal2_3 .modalbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .modal2_3 .modal2_3_1 ul.txt li.t1 { animation: fadeleft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal2_3 .modal2_3_1 ul.txt li.t2 { animation: faderight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .modal2_3_2 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1036px;box-sizing: border-box; } .modal2_3_2 .modalbg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/02_sub/images/modal2_3_2.jpg')no-repeat 0 0; background:cover; box-sizing:border-box; } .modal2_3_2 ul.txt { position:relative; width:1040px; margin:0 auto; padding-top:290px; } .modal2_3_2 ul.txt li.t1 { font-size:40px; font-weight:700; color:#ffffff; line-height:140%; } .modal2_3_2 ul.txt li.t2 { font-size:19px; font-weight:400; color:#ffffff; } .modal2_3_2 ul.txt li.t3 { position:absolute; top:600px; right:0px; font-size:40px; 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%; max-width:1920px; margin:0 auto; height:1036px;box-sizing: border-box; } .modal2_3_3 .modalbg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/02_sub/images/modal2_3_3.jpg')no-repeat 0 0; background:cover; box-sizing:border-box; } .modal2_3_3 div.txt { position:relative; width:1040px; margin:0 auto; padding-top:190px; } .modal2_3_3 div.txt ul { position:absolute; top:600px; right:0px; width:620px; } .modal2_3_3 div.txt ul li { float:left; width:310px; box-sizing:border-box; font-size:19px; font-weight:400; color:#ffffff; padding-left:34px; padding-bottom:64px; border-left:1px solid #858282; } .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%; height:900px; padding-top: 90px; box-sizing: border-box; } .modal2_3_4 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal2_3_4 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal2_3_4 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%;border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal2_3_4 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:0px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal2_3_4 .imgtxt { position:relative; width:1030px; margin:0 auto; margin-top:140px; text-align:center; box-sizing:border-box; } .modal2_3_4 .imgtxt li { float:left; width:20%; text-align:center; font-size:18px; 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; } .modal2_2 { } .modal2_2_1 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1030px;box-sizing: border-box; } .modal2_2_1 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:1030px; margin:0 auto; } .modal2_2_1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_2_1bg1.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal2_2_1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_2_1bg2.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal2_2_1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_2_1bg3.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal2_2_1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/02_sub/images/modal2_2_1bg4.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal2_2_1 ul.txt { position:absolute; top:70%; left:50%; transform: translate(0%,-50%); } .modal2_2_1 ul.txt li.t1 { font-size:22px; font-weight:500; color:#fff; } .modal2_2_1 ul.txt li.t2 { font-size:40px; font-weight:700; color:#fff; line-height:140%; } .modal2_2_1 ul.txt li.t3 { font-size:19px; font-weight:400; color:#6c6c6c; } .modal2_2 .modalbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal2_2 .modalbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal2_2 .modalbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal2_2 .modalbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .modal2_2 .modal2_2_1 ul.txt li.t1 { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal2_2 .modal2_2_1 ul.txt li.t2 { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .modal2_2 .modal2_2_1 ul.txt li.t3 { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.7s; } .modal2_2_2 { position: relative; width: 100%; height:1100px; padding-top:120px; box-sizing: border-box; } .modal2_2_2 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f4f4f4; background-size:cover; box-sizing:border-box; } .modal2_2_2 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f4f4f4; background-size:cover; box-sizing:border-box; } .modal2_2_2 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%;border-right:1px solid #e1e1e1; background:#f4f4f4; background-size:cover; box-sizing:border-box; } .modal2_2_2 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#f4f4f4; background-size:cover; box-sizing:border-box; } .modal2_2_3 { position: relative; width: 100%; height:1020px; padding-top:120px; box-sizing: border-box; } .modal2_2_3 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal2_2_3 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal2_2_3 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%;border-right:1px solid #e0e4e6; background:#fff; background-size:cover; box-sizing:border-box; } .modal2_2_3 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#fff; background-size:cover; box-sizing:border-box; } .modal2_2_4 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1035px;box-sizing: border-box; } .modal2_2_4 div.modalbg { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/02_sub/images/modal2_2_4.jpg')no-repeat 50% 0; background:cover; } .modal2_2_4 ul.txt { position:relative; width:1040px; margin:0 auto; padding-top:290px; } .modal2_2_4 ul.txt li.t1 { font-size:34px; font-weight:700; color:#2d2d2d; line-height:140%; } .modal2_2_4 ul.txt li.t2 { font-size:16px; font-weight:400; color:#6c6c6c; line-height:170%; } .modal2_4_1 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1030px;box-sizing: border-box; } .modal2_4_1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f3f3f3; box-sizing:border-box; } .modal2_4_1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f3f3f3; box-sizing:border-box; } .modal2_4_1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f3f3f3; box-sizing:border-box; } .modal2_4_1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#f3f3f3; box-sizing:border-box; } .modal2_2_2 .modalsize { position:relative; width:1130px; margin:0 auto; padding-top:190px; } .modal2_2_2 .modalsize ul { width:100%; overflow:hidden; } .modal2_2_2 .modalsize ul li.t1 { float:left; width:612px; font-size:40px; font-weight:700; color:#373737; line-height:130%; } .modal2_2_2 .modalsize ul li.t1 span { font-size:22px; font-weight:400; color:#13c0d7; } .modal2_2_2 .modalsize ul li.imgs { float:left; width:518px; font-size:19px; font-weight:400; color:#6c6c6c; } .modal2_2_2 .modalsize ul li div.t3 { padding-left:32px; font-size:19px; font-weight:500; color:#000000; } .modal2_4 { background:#fff; } .modal2_4 .modal2_2_2 .modalbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal2_4 .modal2_2_2 .modalbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal2_4 .modal2_2_2 .modalbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal2_4 .modal2_2_2 .modalbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .modal2_4 .modaltab3 { animation: fadeup3 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal2_4 .modal2_2_2 .modalsize { animation: fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.5s; } .modal2_4_2 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1030px;box-sizing: border-box; } .modal2_4_2 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#fff; box-sizing:border-box; } .modal2_4_2 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#fff; box-sizing:border-box; } .modal2_4_2 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#fff; box-sizing:border-box; } .modal2_4_2 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#fff; box-sizing:border-box; } .modal2_4_2 .modalsize { position:relative; width:1130px; margin:0 auto; padding-top:250px; overflow:hidden; } .modal2_4_2 .modalsize .modaltitle { float:left; width:248px; } .modal2_4_2 .modalsize ul { float:left; width:882px; text-align:left; } .modal2_4_2 .modalsize ul li { display:inline-block; min-width:137px; text-align:center; margin-right:33px; padding-top:168px; font-size:19px; font-weight:500; color:#16c5d5; vertical-align: top;} .modal2_4_2 .modalsize ul li span { font-size:14px; color:#5a5a5a; } .modal2_4_2 .modalsize ul li span.tt { font-size:14px; color:#5a5a5a; display: inline-block; width: 150px; } .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; } .modal2_4_2 .modalsize ul li:nth-child(4) { background:url('/page_KR0/02_sub/images/2ic_04.png')no-repeat 50% 0; } .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:1130px; margin:0 auto; padding-top:120px; overflow:hidden; } .modal2_4_2 .modalsize2 .modaltitle { float:left; width:248px; } .modal2_4_2 .modalsize2 ul { float:left; width:882px; text-align:left; } .modal2_4_2 .modalsize2 ul li { float:left; width:50%; margin-bottom:60px; box-sizing:border-box; padding-left:105px; font-size:17px; font-weight:400; color:#626262; } .modal2_4_2 .modalsize2 ul li span { font-size:21px; 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%; max-width:1920px; margin:0 auto; height:987px;} .modal2_4_3 .modalbg{ position:absolute; bottom:0px; left:0px; width:100%; height:100%; background:url('/page_KR0/02_sub/images/modal2_4_3.jpg')no-repeat 0 0; background-size:cover; } .modal2_4_3 ul.txt { position:relative; width:1280px; margin:0 auto; padding-top:320px; } .modal2_4_3 ul.txt li.t1 { font-size:19px; font-weight:400; color:#6c6c6c; line-height:170%; } .modal2_4_3 ul.txt li.t2 { position:absolute; top:558px; left:463px; width:98px; padding-top:110px; text-align:center; font-size:15px; font-weight:500; color:#232323; background:url('/page_KR0/02_sub/images/2_4img10.png')no-repeat 50% 0; } .modal2_4_3 ul.txt li.t3 { position:absolute; top:746px; left:639px; width:98px; padding-top:110px; text-align:center; font-size:15px; font-weight:500; color:#232323; background:url('/page_KR0/02_sub/images/2_4img11.png')no-repeat 50% 0; } .modal2_4_3 ul.txt li.t4 { position:absolute; top:700px; left:874px; width:98px; padding-top:110px; text-align:center; font-size:15px; font-weight:500; color:#232323; background:url('/page_KR0/02_sub/images/2_4img12.png')no-repeat 50% 0; } .modal2_4_3 ul.txt li.t5 { position:absolute; top:598px; left:1040px; width:98px; padding-top:110px; text-align:center; font-size:15px; font-weight:500; color:#232323; background:url('/page_KR0/02_sub/images/2_4img13.png')no-repeat 50% 0; } .modal2_4_3 ul.txt li.t6 { position:absolute; top:400px; left:1084px; width:98px; padding-top:110px; text-align:center; font-size:15px; font-weight:500; color:#232323; background:url('/page_KR0/02_sub/images/2_4img14.png')no-repeat 50% 0; } .modal2_4_5 { position: relative; width:100%; max-width:1920px; margin:0 auto; padding:120px 0; background:#fff; } .modal2_4_5 .modalbg2 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#fff; box-sizing:border-box; } .modal2_4_5 .modalbg2 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#fff; box-sizing:border-box; } .modal2_4_5 .modalbg2 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#fff; box-sizing:border-box; } .modal2_4_5 .modalbg2 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#fff; box-sizing:border-box; } .modal2_4_5 .modalsize { position:relative; width:1130px; margin:0 auto; padding-top:75px; } .modal2_4_5 .modalsize ul { width:100%; overflow:hidden; } .modal2_4_5 .modalsize ul li.imgs { float:left; width:518px; font-size:19px; font-weight:400; color:#6c6c6c; } .modal2_4_5 .modalsize ul li.t1 { float:left; padding-top:370px; width:612px; padding-left:150px; font-size:36px; font-weight:700; color:#373737; line-height:130%; box-sizing:border-box; } .modal2_4_5 .modalsize ul li.t1 span { font-size:24px; font-weight:500; color:#13c0d7; } .modal2_4_5 .modalsize ul li div.t3 { padding-left:32px; font-size:19px; font-weight:500; color:#000000; } .modal2_4_5 .snowlogo { top: 22%; } .modal2_4_5 .modalsize3 { position:relative; width:1130px; margin:0 auto; padding-top:210px; overflow:hidden; } .modal2_4_5 .modalsize3 .modaltitle { float:left; width:248px; } .modal2_4_5 .modalsize3 ul { float:left; width:882px; text-align:left; box-sizing:border-box; } .modal2_4_5 .modalsize3 ul li { margin-left:54px; font-size:19px; font-weight:400; color:#6c6c6c; line-height:180%; } .modal2_4_5 .modalsize2 { position:relative; width:1130px; margin:0 auto; padding-top:120px; overflow:hidden; } .modal2_4_5 .modalsize2 .modaltitle { float:left; width:248px; } .modal2_4_5 .modalsize2 ul { float:left; width:882px; text-align:left; } .modal2_4_5 .modalsize2 ul li { display:inline-block; min-width:137px; text-align:center; margin-left:24px; padding-top:168px; font-size:19px; font-weight:500; color:#16c5d5; vertical-align:top; } .modal2_4_5 .modalsize2 ul li span { font-size:14px; 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%; max-width:1920px; margin:0 auto; padding:220px 0 150px 0; background:#fff; } .modal2_4_6 .modalsize2 { position:relative; width:1130px; margin:0 auto; overflow:hidden; box-sizing:border-box; } .modal2_4_6 .modalbg2 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f3f3f3; box-sizing:border-box; } .modal2_4_6 .modalbg2 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f3f3f3; box-sizing:border-box; } .modal2_4_6 .modalbg2 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f3f3f3; box-sizing:border-box; } .modal2_4_6 .modalbg2 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#f3f3f3; box-sizing:border-box; } .modal2_4_6 .modalsize2 .modaltitle { float:left; width:248px; } .modal2_4_6 .modalsize2 ul { float:left; width:882px; text-align:left; } .modal2_4_6 .modalsize2 ul li { float:left; width:50%; margin-bottom:60px; box-sizing:border-box; padding-left:105px; font-size:15px; font-weight:400; color:#626262; } .modal2_4_6 .modalsize2 ul li span { font-size:21px; 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%; max-width:1920px; margin:0 auto; padding:220px 0 150px 0; } .modal2_4_7 .modalbg2 li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#fff; box-sizing:border-box; } .modal2_4_7 .modalbg2 li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#fff; box-sizing:border-box; } .modal2_4_7 .modalbg2 li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#fff; box-sizing:border-box; } .modal2_4_7 .modalbg2 li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:#fff; box-sizing:border-box; } .modal2_4_7 .modalsize2 { position:relative; width:1130px; margin:0 auto; overflow:hidden; box-sizing:border-box; } .modal2_4_7 .modalsize2 .modaltitle { float:left; width:248px; } .modal2_4_7 .modalsize2 ul { float:left; width:882px; text-align:left; } .modal2_4_7 .modalsize2 ul li { float:left; width:50%; height:90px; line-height:90px; margin-bottom:40px; box-sizing:border-box; padding-left:110px; font-size:17px; 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; } .modal7_1 { background:#fff; } .modal7_1_1 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1030px;box-sizing: border-box; } .modal7_1_1 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:1030px; margin:0 auto; } .modal7_1_1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_1_1bg1.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_1_1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_1_1bg2.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_1_1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_1_1bg3.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_1_1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_1_1bg4.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_1_1 ul.txt { position:absolute; top:50%; left:50%; transform: translate(0%,-50%); } .modal7_1_1 ul.txt li.t1 { font-size:22px; font-weight:700; color:#fff; } .modal7_1_1 ul.txt li.t2 {font-size:40px; font-weight:700; color:#fff; text-align:left; } .modal7_1 .modalbg li:nth-child(1) { animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal7_1 .modalbg li:nth-child(2) { animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal7_1 .modalbg li:nth-child(3) { animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal7_1 .modalbg li:nth-child(4) { animation: topheight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .modal7_1 .modal7_1_1 ul.txt li.t1 { animation: text-focus-in2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal7_1 .modal7_1_1 ul.txt li.t2 { animation: text-focus-in2 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .modal7_1_2 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:983px;box-sizing: border-box; } .modal7_1_2 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:983px; margin:0 auto; } .modal7_1_2 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_1_2bg1.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_1_2 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_1_2bg2.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_1_2 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_1_2bg3.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_1_2 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_1_2bg4.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_1_2 ul.txt { position:absolute; top:40%; left:25%; transform: translate(0%,-50%); } .modal7_1_2 ul.txt li.t1 { font-size:40px; font-weight:700; color:#16c5d5; } .modal7_1_2 ul.txt li.t2 { font-size:19px; font-weight:400; color:#333333; line-height:190%; } .modal7_1_2 div.txt2 { position:absolute; top:75%; left:55%; padding-left:58px; background:url('/page_KR0/07_sub/images/txt2.png')no-repeat 0 0; font-size:22px; font-weight:500; color:#16c5d5; } .modal7_1_2 div.txt2 span { font-size:17px; color:#515151; } .modal7_1_3 { position: relative; width:100%; max-width:1920px; margin:0 auto; padding:150px 0 100px 0; box-sizing: border-box; } .modal7_1_3 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#ffffff; box-sizing:border-box; } .modal7_1_3 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#ffffff; box-sizing:border-box; } .modal7_1_3 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#ffffff; box-sizing:border-box; } .modal7_1_3 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#ffffff; box-sizing:border-box; } .modal7_1_3 .box07 { position:relative; width:1280px; margin:0 auto; overflow:hidden; } .modal7_1_3 .box07 ul { float:left; width:30%; height:370px; margin-right:4.5%; margin-bottom:4.5%; padding:108px 50px 50px 50px; box-sizing:border-box; } .modal7_1_3 .box07 ul li.t1 { font-size:26px; font-weight:700; color:#16c5d5; line-height:100%: } .modal7_1_3 .box07 ul li.t2 { padding-top:10px; font-size:17px; font-weight:400; color:#3f3f3f; line-height:150%: } .modal7_1_3 .box07 ul li.t3 { padding-top:10px; font-size:15px; 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 50px 50px; } .modal7_1_3 .box07 ul:nth-child(2) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_2.jpg')no-repeat 50px 50px; } .modal7_1_3 .box07 ul:nth-child(3) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_3.jpg')no-repeat 50px 50px; margin-right:0%; } .modal7_1_3 .box07 ul:nth-child(4) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_4.jpg')no-repeat 50px 50px; } .modal7_1_3 .box07 ul:nth-child(5) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_5.jpg')no-repeat 50px 50px; } .modal7_1_3 .box07 ul:nth-child(6) { background:#f5f5f5 url('/page_KR0/07_sub/images/box07_6.jpg')no-repeat 50px 50px; margin-right:0%; } .modal7_1_3 .box07 ul:nth-child(7) { height:300px; background:#f5f5f5 url('/page_KR0/07_sub/images/box07_7.jpg')no-repeat 50px 50px; } .modal7_1_3 .box07 ul:nth-child(8) { height:300px; background:#f5f5f5 url('/page_KR0/07_sub/images/box07_8.jpg')no-repeat 50px 50px; } .modal7_1_3 .box07 ul:nth-child(9) { height:300px; background:#f5f5f5 url('/page_KR0/07_sub/images/box07_9.jpg')no-repeat 50px 50px; margin-right:0%; } .modal07_txtbox { position:relative; width:1280px; margin:0 auto; padding-top:150px; } .modal07_txtbox .modaltitle { height:auto; line-height:140%; font-size:30px; font-weight:700; background: url(/page_KR0/05_sub/images/modaltitle.png)no-repeat 0 0; } .modal07_txtbox .contxt { padding-left: 34px; font-size:19px; font-weight:400; color:#6c6c6c; line-height:170%; } .img07txt2 { position:relative; width:1030px; margin:0 auto; margin-top:80px; text-align:center; box-sizing:border-box; } .img07txt2 ul { display:inline-block; width:470px; margin:10px 10px; background:#f3f3f3; vertical-align:top; } .img07txt2 ul li img { width:100%; } .img07txt2 ul li.t1 { width:100%; padding-top:40px; background:#f3f3f3; font-size:20px; font-weight:700; color:#13c0d7; text-align:center; } .img07txt2 ul li.t2 { width:100%; padding-bottom:40px; padding-top:6px; background:#f3f3f3; font-size:15px; font-weight:400; color:#827d7d; text-align:center; } .icon0701 { position:relative; width:1280px; margin:0 auto; padding-left:470px; margin-top:80px; text-align:left; box-sizing:border-box; } .icon0701 ul { margin-bottom:65px; min-height:129px; padding-left:178px; } .icon0701 ul:nth-child(1) { background:url('/page_KR0/07_sub/images/07icon1.jpg')no-repeat 0px 0px; } .icon0701 ul:nth-child(2) { background:url('/page_KR0/07_sub/images/07icon2.jpg')no-repeat 0px 0px; } .icon0701 ul:nth-child(3) { background:url('/page_KR0/07_sub/images/07icon3.jpg')no-repeat 0px 0px; } .icon0701 ul:nth-child(4) { background:url('/page_KR0/07_sub/images/07icon4.jpg')no-repeat 0px 0px; } .icon0701 ul:nth-child(5) { background:url('/page_KR0/07_sub/images/07icon5.jpg')no-repeat 0px 0px; } .icon0701 ul li:nth-child(1) { padding-top:20px; font-size:21px; font-weight:700; color:#13c0d7; } .icon0701 ul li:nth-child(2) { margin-top:10px; font-size:15px; font-weight:400; color:#8b8b8b; } .modal7_1_4 { position: relative; width:100%; max-width:1920px; height:870px; margin:0 auto; box-sizing: border-box; } .modal7_1_4 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f4f4f4; box-sizing:border-box; } .modal7_1_4 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f4f4f4; box-sizing:border-box; } .modal7_1_4 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f4f4f4; box-sizing:border-box; } .modal7_1_4 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f4f4f4; box-sizing:border-box; } .img07txt3 { position:absolute; top:250px; left:508px; margin:0 auto; box-sizing:border-box; } .img07txt3 ul { padding-bottom:40px; } .img07txt3 ul li.t1 { position:relative; padding-left:42px; width:100%; font-size:18px; font-weight:700; color:#333333; box-sizing:border-box; } .img07txt3 ul li.t1 span { display:inline-block; position:absolute; top:0px; left:0px; 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.t2 { padding-top:6px; padding-left:42px; background:#f3f3f3; font-size:15px; font-weight:400; color:#827d7d; } .modal7_2 { background:#fff; } .modal7_2_1 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1000px;box-sizing: border-box; overflow:hidden; } .modal7_2_1 .modalbg { position:absolute; top:0px; right:0%; width:1920px; height:1000px; margin:0 auto; } .modal7_2_1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_2_1bg1.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_2_1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_2_1bg2.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_2_1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_2_1bg3.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_2_1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_2_1bg4.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_2_1 ul.txt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; } .modal7_2_1 ul.txt li.t1 { display:inline-block; font-size:22px; font-weight:700; color:#fff; vertical-align:top; margin-right:10px; } .modal7_2_1 ul.txt li.t2 { display:inline-block; font-size:40px; font-weight:700; color:#fff; text-align:left; vertical-align:top; margin-left:10px; line-height:120%; } .modal7_2 .modal7_2_1 .modalbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal7_2 .modal7_2_1 .modalbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal7_2 .modal7_2_1 .modalbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal7_2 .modal7_2_1 .modalbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .modal7_2 .modal7_2_1 ul.txt li.t1 { animation: fadeleft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal7_2 .modal7_2_1 ul.txt li.t2 { animation: faderight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .modal7_2_2 { position: relative; width:100%; max-width:1920px; height:1030px; padding-top:200px; margin:0 auto; box-sizing: border-box; } .modal7_2_2 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:1030px; margin:0 auto; } .modal7_2_2 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_2_2bg1.jpg')no-repeat 0 0; box-sizing:border-box; } .modal7_2_2 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_2_2bg2.jpg')no-repeat 0 0; box-sizing:border-box; } .modal7_2_2 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_2_2bg3.jpg')no-repeat 0 0; box-sizing:border-box; } .modal7_2_2 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_2_2bg4.jpg')no-repeat 0 0; box-sizing:border-box; } .modal7_2_2 ul.txt { position:relative; width:1040px; margin:0 auto; } .modal7_2_2 ul.txt li.t1 { font-size:17px; font-weight:400; color:#6c6c6c; } .modal7_2_2 ul.txt li.t2 { font-size:31px; font-weight:700; color:#111111; } .modal7_2_2 ul.txt li.t3 { position:absolute; top:600px; left:50%; font-size:16px; font-weight:400; color:#9e9e9e; } .modal7_2_3 { position:relative; width:100%; max-width:1920px; margin:0 auto; } .modal7_2_4 { position:relative; width:100%; max-width:1920px; margin:0 auto; padding:150px 0 150px 0; box-sizing:border-box; } .modal7_2_4 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#ffffff; box-sizing:border-box; } .modal7_2_4 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#ffffff; box-sizing:border-box; } .modal7_2_4 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#ffffff; box-sizing:border-box; } .modal7_2_4 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#ffffff; box-sizing:border-box; } .modal7_2_4 .snowlogo { top:80%; } .modal7_2_5 { position:relative; width:100%; max-width:1920px; margin:0 auto; padding:150px 0 150px 0; box-sizing:border-box; } .modal7_2_5 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f4f4f4; box-sizing:border-box; } .modal7_2_5 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f4f4f4; box-sizing:border-box; } .modal7_2_5 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f4f4f4; box-sizing:border-box; } .modal7_2_5 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; border-right:1px solid #e1e1e1; background:#f4f4f4; box-sizing:border-box; } .modal7_2_5 .snowlogo { top:80%; } .modal7_3 { background:#fff; } .modal7_3_1 { position: relative; width:100%; max-width:1920px; margin:0 auto; height:1000px;box-sizing: border-box; } .modal7_3_1 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:1000px; margin:0 auto; } .modal7_3_1 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_3_1bg1.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_3_1 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_3_1bg2.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_3_1 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_3_1bg3.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_3_1 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_3_1bg4.jpg')no-repeat 50% bottom; box-sizing:border-box; } .modal7_3_1 ul.txt { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; } .modal7_3_1 ul.txt li.t1 { display:inline-block; font-size:22px; font-weight:700; color:#fff; vertical-align:top; margin-right:10px; } .modal7_3_1 ul.txt li.t2 { display:inline-block; font-size:40px; font-weight:700; color:#fff; text-align:left; vertical-align:top; margin-left:10px; line-height:120%; } .modal7_3 .modal7_3_1 .modalbg li:nth-child(1) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.5s; } .modal7_3 .modal7_3_1 .modalbg li:nth-child(2) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.6s; } .modal7_3 .modal7_3_1 .modalbg li:nth-child(3) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.7s; } .modal7_3 .modal7_3_1 .modalbg li:nth-child(4) { animation: topheight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both 0.8s; } .modal7_3 .modal7_3_1 ul.txt li.t1 { animation: fadeleft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.1s; } .modal7_3 .modal7_3_1 ul.txt li.t2 { animation: faderight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 1.4s; } .modal7_3_2 { position: relative; width:100%; max-width:1920px; height:1030px; padding-top:200px; margin:0 auto; box-sizing: border-box; } .modal7_3_2 .modalbg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1920px; height:1030px; margin:0 auto; } .modal7_3_2 .modalbg li:nth-child(1) { position:absolute; bottom:0px; left:0px; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_3_2bg1.jpg')no-repeat 0 0; box-sizing:border-box; } .modal7_3_2 .modalbg li:nth-child(2) { position:absolute; bottom:0px; left:25%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_3_2bg2.jpg')no-repeat 0 0; box-sizing:border-box; } .modal7_3_2 .modalbg li:nth-child(3) { position:absolute; bottom:0px; left:50%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_3_2bg3.jpg')no-repeat 0 0; box-sizing:border-box; } .modal7_3_2 .modalbg li:nth-child(4) { position:absolute; bottom:0px; left:75%; width:25%; height:100%; background:url('/page_KR0/07_sub/images/modal7_3_2bg4.jpg')no-repeat 0 0; box-sizing:border-box; } .modal7_3_2 ul.txt { position:relative; width:1040px; margin:0 auto; } .modal7_3_2 ul.txt li.t1 { font-size:17px; font-weight:400; color:#6c6c6c; } .modal7_3_2 ul.txt li.t2 { font-size:31px; font-weight:700; color:#111111; } .modal7_3_2 ul.txt li.t3 { position:absolute; top:600px; left:50%; font-size:16px; font-weight:400; color:#9e9e9e; } .contxt1a { } .contxt1a a { display: block; width: 180px; height: 42px; line-height: 42px; font-size: 14px; font-weight: 500; text-align: center; color: #fff; border: 1px solid #fff; background:#13c0d7; border-radius: 50px; transition: all 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940); } #sub05_09 .contxt1 { } #sub05_09 .contxt1 a { display: block; width: 122px; height: 36px; margin:0 auto; line-height: 34px; font-size: 14px; font-weight: 500; text-align: center; color: #fff; border: 1px solid #fff; border-radius: 50px; transition: all 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940); } .directioncon .contxt1 { position:absolute; bottom:40px; right:40px; } .directioncon .contxt1 a { display: block; width: 177px; height: 50px; margin:0 auto; line-height: 48px; font-size: 16px; font-weight: 500; text-align: center; color: #16c5d5; border: 1px solid #fff; border-radius: 50px; box-sizing:border-box; padding-left:10px; background:#fff url(/page_KR0/08_sub/images/btbg.png)no-repeat 30px 50%; } .d_tit { text-align: center; font-size:21px; font-weight:500; color:#13c0d7; padding-bottom: 20px; } .modal-active #fp-nav.left { z-index:0; } .modal-active #top { z-index:0; } .modal-active header { display:none; } .modal-active .figuretxt { display:none; } .modalclosebt {display:none; position:fixed; top:0px; right:0px; width:220px; height:200px; background:#16c5d5 url('/page_KR0/05_sub/images/modalclosebt.jpg')no-repeat 65% 40%; border-bottom-left-radius:100%; z-index:151; cursor:pointer; } .modal-active .modalclosebt { display:block; animation: opa 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.5s; } .modalclosebt2 {display:block; position:fixed; top:0px; right:0px; width:220px; height:200px; background:#16c5d5 url('/page_KR0/05_sub/images/modalclosebt.jpg')no-repeat 65% 40%; border-bottom-left-radius:100%; z-index:151; cursor:pointer; } a { cursor:pointer; } .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; }