@charset "utf-8"; #wrap {width:100%; overflow:hidden; } /*------------------------------------- 공통 -------------------------------------*/ .wrap1500 { width:100%; max-width:1500px; margin:0 auto;} .wrap1500 .gap { margin:0 10px; } .wrap1500 .gap .container {width:100%; } .wrap { width:100%; } .wrap .gap { width:100%;} .wrap .gap .container {width:100%; } /*------------------------------------- header -------------------------------------*/ #header { width:100%; position:fixed; z-index:3; top:0; left:0; height:70px; transition:all 0.6s; } #header .wrap { width:100%; max-width:2000px; margin:0 auto; } #header.addFixed { height:60px; background:rgba(9,17,30,.8); } #header .container { width:100%; position:relative; } #header nav { position:absolute; width:100%; font-family:'han'; right:10px; } #header nav ul { text-align:right; } #header nav ul li { display:inline-block; padding:31px 20px; transition:all 0.6s; } #header.addFixed nav ul li { padding:21px 20px; } #header nav ul li a { color:#000; font-size:18px; transition:all .6s; padding-bottom:5px; border-bottom:2px solid transparent; } #header nav ul li a:hover { color:#000; font-size:18px; transition:all .6s; padding-bottom:5px; border-bottom:2px solid #e6c72a; } #header nav ul li a.addMenuposition { color:#000; font-size:18px; transition:all .6s; padding-bottom:5px; border-bottom:2px solid #e6c72a; } #header.addFixed nav ul li a { color:#fff; } #header nav ul li a:hover { color:#828282; font-size:18px; } #header.addFixed nav ul li a:hover { color:#ddd; font-size:18px; } #header .mainMenuBnt-bar {position:absolute; top:12.5px; right:10px; display:none; z-index:2; } #header .mainMenuBnt-bar a { display:block; } #header .mainMenuBnt-bar a span { float:left; position:relative; width:25px; height:35px;display:block; } #header .mainMenuBnt-bar a span i.line { display:block; background:#e6c72a; position:absolute; transition:all 0.6s;} #header .mainMenuBnt-bar a span i.linem0 { top:0;width:100%; height:4px;left:0; } #header .mainMenuBnt-bar a span i.linem1 { top:0;width:4px; height:100%;left:0; } #header .mainMenuBnt-bar a span i.linem2 { top:0;width:4px; height:100%;right:0; } #header .mainMenuBnt-bar a span i.linem3 { bottom:0; width:100%; height:4px;right:0; } #header .mainMenuBnt-bar a.addMenuBox span i.line { display:block; background:#e6c72a; position:absolute; } #header .mainMenuBnt-bar a.addMenuBox span i.linem0 { top:50%; margin-top:-2px; left:0; transform:rotate(135deg); } #header .mainMenuBnt-bar a.addMenuBox span i.linem1 { left:50px; opacity:0; } #header .mainMenuBnt-bar a.addMenuBox span i.linem2 { right:50px; opacity:0; } #header .mainMenuBnt-bar a.addMenuBox span i.linem3 { bottom:50%; margin-bottom:-2px; transform:rotate(-135deg);} #header .mainMenuBnt-bar a strong { float:left; color:#000; font-size:18px; margin:6.5px 10px; } #header .mainMenuBnt-bar a.addMenuBox strong {margin:7px 10px; } #header.addFixed .mainMenuBnt-bar a strong { color:#fff; } /*------------------------------------- 메뉴박스 -------------------------------------*/ #header .mainmenu { position:absolute; display:block; left:150%; top:70px; width:100%; height:100%; transition:all .6s; opacity:0; } #header .mainmenu.addmainMN { left:0%; opacity:1; } #header.addFixed .mainmenu {top:60px; } #header .mainmenu .manu-container { width:100%; width:100%; background:rgba(9,17,30,.8);} #header .mainmenu .manu-container ul {width:100%; } #header .mainmenu .manu-container ul li { border-bottom:1px solid #333; } #header .mainmenu .manu-container ul li:last-child { border-bottom:0; } #header .mainmenu .manu-container ul li a {margin-left:15px;padding:20px 0; font-size:13px; font-weight:600; color:#fff; display:block; } #header .mainmenu .manu-container ul li a:hover {margin-left:15px;padding:20px 0; font-size:13px; font-weight:600; color:#e6c72a; display:block; } #header .mainmenu .manu-container ul li a.addHere {margin-left:15px;padding:20px 0; font-size:13px; font-weight:600; color:#e6c72a; display:block; } #header .mainmenu .manu-container ul li a span {display:inline-block; float:right; margin-right:15px; } #header .mainmenu .manu-container ul li a span i { display:block; width:10px; height:15px; outline:2px solid #828282; outline-offset:-2px;} #header .mainmenu .manu-container ul li a:hover span i { display:block; width:10px; height:15px; outline:2px solid #e6c72a; outline-offset:-2px;} #header .mainmenu .manu-container ul li a.addHere span i { display:block; width:10px; height:15px; outline:2px solid #e6c72a; outline-offset:-2px;} /*------------------------------------- 메인 -------------------------------------*/ #main { position:relative; z-index:1; width:100%; } #main #section1 {position:relative; z-index:1; width:100%; background:#ccc; background:url(../img/cloud.png) no-repeat 50% 50%; background-size:cover; overflow:hidden; } #main #section1 video {position:absolute; width:100%; height:100%; } #main #section1 .content-wrap {position:absolute; z-index:2; width:100%; height:100%; } #main #section1 .content-wrap > div { width:100%; height:100%;} #main #section1 .content-wrap > div .mountain-back {z-index:1; width:100%; height:100%; position:absolute; bottom:0; left:0; } #main #section1 .content-wrap > div .mountain-back > div { width:100%; height:100%; background:url(../img/backGroundMountain.png) no-repeat 50% 100%; background-size:100%; transition:all .3s; } #main #section1 .content-wrap > div .mountain-front {z-index:3; width:100%; height:100%; position:absolute; bottom:0; right:0; } #main #section1 .content-wrap > div .mountain-front > div { width:100%; height:100%; background:url(../img/frontGroundMountain.png) no-repeat 50% 100%; background-size:100%; transition:all .3s; } #main #section1 .content-wrap > div .title-wrap { position:fixed; z-index:2; top:13%; left:18.3920126%; width:100%; height:100%; } #main #section1 .content-wrap > div .title-wrap div { position:relative; width:100%; height:100%; } #main #section1 .content-wrap > div .title-wrap div .yellow-box { position:absolute; } #main #section1 .content-wrap > div .title-wrap div .yellow-box span {position:relative; width:100%; height:664px; display:inline-block; } #main #section1 .content-wrap > div .title-wrap div .yellow-box span i { position:absolute; display:block; } #main #section1 .content-wrap > div .title-wrap div .yellow-box span i.line0 { width:100%; height:46px; top:0; left:0; background:#e6c72a; } #main #section1 .content-wrap > div .title-wrap div .yellow-box span i.line1 { height:100%; width:46px; top:0; left:0; background:#e6c72a; } #main #section1 .content-wrap > div .title-wrap div .yellow-box span i.line2 { width:100%; height:46px; bottom:0; right:0; background:#e6c72a; } #main #section1 .content-wrap > div .title-wrap div .yellow-box span i.line3 { height:100%; width:46px; bottom:0; right:0; background:#e6c72a; } #main #section1 .content-wrap > div .title-wrap div .title {position:absolute; top:130px; left:5.2548607%;display:inline-block; color:#fff; } #main #section1 .content-wrap > div .title-wrap div .title h2 { font-size:119.85px; font-family:'han'; letter-spacing:1.5px;} #main #section1 .content-wrap > div .title-wrap div .title h3 {opacity:0;padding-top:10px; margin-left:3%; font-size:119.85px; font-family:'han'; letter-spacing:1.5px;} #main #section2 {position:reltive; width:100%; height:100%; background:#09111e; } #main #section2 div.sec2BGFixed { position:relative; top:0; left:0; z-index:2; width:100%; height:100%; background:url(../img/section2-Bg.png) no-repeat 50% 0% ; background-size:cover;} #main #section2 div.sec2-wrap { position:absolute; z-index:2; left:0; width:100%; height:100%; background:url(../img/section2-Bg2.png) no-repeat 50% 50%; background-size:cover;} #main #section2 div.sec2-wrap .content-wrap { position:relative; height:100%; width:100%; } #main #section2 div.sec2-wrap .content-wrap > div { position:relative; display:inline-block; width:100%; height:100%;} #main #section2 div.sec2-wrap .content-wrap > div ul.content { position:absolute; top:50%; left:15%; margin-top:-236.5px; width:70%;} #main #section2 div.sec2-wrap .content-wrap > div ul.content > li { float:left; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-left { position:relative; top:200px; width:40%; margin:0 auto; opacity:0; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-left > div { width:100%; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-left > div span {margin:0 auto; position:relative; overflow:hidden; width:60.3294956%; height:480px; border:13px solid #e6c72a; display:block; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-left > div span img { height:100%; width:auto; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right { position:relative; padding:80px 0; width:60%;} #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div { width:100%; height:100%; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content { position:relative; width:80%; margin:0 auto; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li { width:100%; display:block; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(1) { text-align:left; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(1) .title {width:100%; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(1) .title span { width:100%; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(1) .title span i { display:inline-block; width:7px; height:50px; background:#e6c72a; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(1) .title strong {margin-left:5px;letter-spacing:1px; color:#fff; font-family:'han'; font-size:26px; font-weight:500; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(2) { text-align:left; padding-top:30px; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(2) > div { color:#fff; text-align:right; display:inline-block; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(2) > div h2 { letter-spacing:1.5px; font-family:'han'; font-size:41px; font-weight:600; line-height:110%; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(2) > div h3 { padding-top:20px; letter-spacing:1.5px; font-family:'han'; font-size:41px; font-weight:600; line-height:110%; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(2) > div h4 { padding-top:20px; letter-spacing:1.5px; font-family:'han'; font-size:41px; font-weight:600; line-height:110%; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(3) { text-align:right; padding-top:15.625%;} #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(3) > div { width:100%; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(3) > div a { display:inline-block; padding:2% 4.8263014%; border:4px solid #e6c72a; transition:all .6s; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(3) > div a:hover { background:#e6c72a; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(3) > div a span { font-family:'han'; font-size:18px; color:#fff; letter-spacing:1px; transition:all .6s; } #main #section2 div.sec2-wrap .content-wrap > div ul.content li.sec2-right > div ul.right-content li:nth-child(3) > div a:hover span { color:#000; } #main .section34 { position:relative; width:100%; height:1000px; background:#09111e; overflow:hidden;} #main #section3 > div { position:relative; z-index:2; width:100%; height:100%; background:#09111e; } #main #section4 > div { position:relative; z-index:2; width:100%; height:100%; background:#09111e; } #main #section3 > div .title { position:absolute; z-index:3; top:60px; left:50px; } #main #section4 > div .title { position:absolute; z-index:3; top:60px; left:50px; } #main .section34 > div .title > div { width:100%; } #main .section34 > div .title > div span { font-family:'han'; color:#fff; font-size:24px; font-weight:600; letter-spacing:1.5px; } #main .section34 > div .title > div span i { width:7px; height:50px; display:inline-block; background:#e6c72a; margin-right:10px; } #main .section34 > div .content {position:relative; width:100%; height:100%; } #main #section3 { position:relative; } #main #section4 { position:relative; width:100%; height: 100%; } #main #section3 > div .BG { opacity:0; position:absolute; top:0; z-index:2; width:100%; background:#09111e url(../img/section3Bg.png) no-repeat 50% 50%; background-size:cover; } #main #section4 > div .BG { opacity:0; position:absolute; top:0; z-index:2; width:100%; background:#09111e url(../img/section4Bg.png) no-repeat 50% 0%; background-size:cover; } #main #section4 > div .bg-gr { position:absolute; bottom:-10%; left: 0; z-index:3; width:100%; height: 100%; } #main #section4 > div .bg-gr img { width:100%; height: 100%;} #main .section34 > div .content .contentBg .content-container { position:relative; width:100%; } #main .section34 > div .content .contentBg .content-container .content-wrap { text-align:center; position:absolute; width:100%; left:0; top:300px;margin-top:0px; } #main .section34 > div .content .contentBg .content-container .content-wrap li { width:100%; } #main .section34 > div .content .contentBg .content-container .content-wrap li strong { font-family:'han'; color:#e6c72a; font-size:14px; letter-spacing:2.5px; font-weight:500; } #main .section34 > div .content .contentBg .content-container .content-wrap li h2 { color:#fff; font-family:'yun'; font-size:35px; padding-top:10px; padding-bottom:10px; } #main .section34 > div .content .contentBg .content-container .content-wrap li small { color:#fff; font-family:'yun'; font-size:13px; } #main .section34 > div .content .contentBg .content-container .content-wrap li:nth-child(4) span { width:2px; height:74px; display:inline-block; padding-top:20px; } #main .section34 > div .content .contentBg .content-container .content-wrap li:nth-child(4) span i { display:block; width:100%; height:100%; background:#fff; } #main .section34 > div .content .contentBg .content-container .content-wrap li:nth-child(5) span { width:2px; height:17px; display:inline-block; padding-top:10px; } #main .section34 > div .content .contentBg .content-container .content-wrap li:nth-child(5) span i { display:block; width:100%; height:100%; background:#fff; } #main #section5 {position: relative; width:100%; } #main #section5 > div {position:relative; z-index:2; width:100%; background:#09111e; } #main #section5 > div .content { width:100%; position: relative; } #main #section5 > div .content > div { position: relative; max-width:1300px; width:100%; height:1000px; ; padding: 300px 0; } #main #section5 > div .content > div .svgTitle {position: relative; top:50%; width: 35%; margin: 0 auto; margin-top: -30%; } #main #section5 > div .content > div .svgTitle > div { width: 100%; } #main #section5 > div .content > div .svgTitle > div #svgTitle { width: 100%; } #main #section5 > div .content > div .svgTitle > div #svgTitle .st0 {clip-path:url(#SVGID_2_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*3T*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st1 {clip-path:url(#SVGID_4_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*4i*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st2 {clip-path:url(#SVGID_6_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*17 i*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st3 {clip-path:url(#SVGID_8_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*5 o*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st4 {clip-path:url(#SVGID_10_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*11o*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st5 {clip-path:url(#SVGID_12_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*8L*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st6 {clip-path:url(#SVGID_14_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*9G*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st7 {clip-path:url(#SVGID_16_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*12G*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st8 {clip-path:url(#SVGID_18_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*10E*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st9 {clip-path:url(#SVGID_20_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*13R*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st10 {clip-path:url(#SVGID_22_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*15P*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st11 {clip-path:url(#SVGID_24_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*16H*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st12 {clip-path:url(#SVGID_26_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*18C*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st13 {clip-path:url(#SVGID_28_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*1N*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st14 {clip-path:url(#SVGID_30_); fill:none; stroke:#fff; stroke-width: 15; stroke-miterlimit: 10; }/*6N*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st15 {clip-path:url(#SVGID_32_); fill:none; stroke: #ffffff;; stroke-width: 25; stroke-miterlimit: 10; }/*2A*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st16 {clip-path:url(#SVGID_34_); fill:none; stroke:#fff; stroke-width: 25; stroke-miterlimit: 10; }/*7A*/ #main #section5 > div .content > div .svgTitle > div #svgTitle .st17 {clip-path:url(#SVGID_36_); fill:none; stroke:#fff; stroke-width: 25; stroke-miterlimit: 10; }/*14A*/ /* --------------------------------------------------- 미니박스 ---------------------------------------------------*/ #main #section5 > div .content > div .mini-box { position: absolute; top:50%; width:7%; z-index: 1; left: 50%; margin-left: -3.5%; } #main #section5 > div .content > div .mini-box > div { width: 100%; } #main #section5 > div .content > div .mini-box > div img { width: 100%; } /* --------------------------------------------------- 미들박스 ---------------------------------------------------*/ #main #section5 > div .content > div .middle-box { position: absolute; top:30%; z-index: 2; left:0; width:100%; } #main #section5 > div .content > div .middle-box > div { position: relative; width:100%; height: 100%; } #main #section5 > div .content > div .middle-box > div .middle-boxIMG { overflow: hidden; position: absolute; width:22.2307692%; height: 549px; top:0px; left:50%; margin-left: -11.1153846% ; } #main #section5 > div .content > div .middle-box > div .middle-boxIMG > div { position: relative; width: 100%; height: 100%; } #main #section5 > div .content > div .middle-box > div .middle-boxIMG > div .box { position: absolute; z-index: 2; width: 100%; } #main #section5 > div .content > div .middle-box > div .middle-boxIMG > div .box img { width:100%;} #main #section5 > div .content > div .middle-box > div .middle-boxIMG > div .middle-linon { position: absolute; bottom: -9.1074681%; left: -10.3806228%; width: 100%; } #main #section5 > div .content > div .middle-box > div .middle-boxIMG > div .middle-linon > div { width: 100%; } #main #section5 > div .content > div .middle-box > div .middle-boxIMG > div .middle-linon > div img { width: 100%; } #main #section5 > div .content > div .middle-box > div .middle-boxIMG > div .middle-deco3 { position: absolute; bottom: 0; left:0; width:42.5605536%; } #main #section5 > div .content > div .middle-box > div .middle-boxIMG > div .middle-deco3 > div { width:100%; } #main #section5 > div .content > div .middle-box > div .middle-boxIMG > div .middle-deco3 > div img { width:100%; } #main #section5 > div .content > div .middle-box > div .middle-deco1 { position: absolute; z-index:2 ; top:-20px; left:50%; margin-left: -14.5384615% ; width:7.3076923%; } #main #section5 > div .content > div .middle-box > div .middle-deco1 > div { width:100%; } #main #section5 > div .content > div .middle-box > div .middle-deco1 > div img { width:100%; } #main #section5 > div .content > div .middle-box > div .middle-deco2 { position: absolute; z-index: 2; top:-20px; left:50%; margin-left: 20px; width:11.3076923%; } #main #section5 > div .content > div .middle-box > div .middle-deco2 > div { width: 100%; } #main #section5 > div .content > div .middle-box > div .middle-deco2 > div img { width: 100%; } #main #section5 > div .content > div .middle-box > div .middle-bird { position: absolute; z-index: 2; top:-60px; width:7.5384615%; left:50%; margin-left: 3.8461538%; } #main #section5 > div .content > div .middle-box > div .middle-bird > div { width:100%; } #main #section5 > div .content > div .middle-box > div .middle-bird > div img { width:100%; } /* --------------------------------------------------- 빅박스 ---------------------------------------------------*/ #main #section5 > div .content > div .big-box { position: absolute; z-index: 2; left:50%; margin-left: -22.0384615%; width:44.0769231%; height: 843px; } #main #section5 > div .content > div .big-box > div { position: relative; height: 100%; } #main #section5 > div .content > div .big-box > div .big-boxIMG { position: absolute; z-index: 2; width: 100%; height: 100%; top:0px; } #main #section5 > div .content > div .big-box > div .big-boxIMG > div .box { width:100%; position: absolute; z-index:2 ; } #main #section5 > div .content > div .big-box > div .big-boxIMG > div .box img { width:100%; } #main #section5 > div .content > div .big-box > div .big-boxIMG > div .big-deco-left { position: absolute; z-index: 1; bottom:0px; left:-17.452007%; width:46.0732984%;} #main #section5 > div .content > div .big-box > div .big-boxIMG > div .big-deco-left > div { width:100%; } #main #section5 > div .content > div .big-box > div .big-boxIMG > div .big-deco-left > div img { width:100%; } #main #section5 > div .content > div .big-box > div .big-boxIMG > div .big-deco-right { position: absolute; z-index: 1; bottom:0px; right:-17.452007%; width:43.9790576%; } #main #section5 > div .content > div .big-box > div .big-boxIMG > div .big-deco-right > div { width:100%; } #main #section5 > div .content > div .big-box > div .big-boxIMG > div .big-deco-right > div img { width:100%; } #main #section5 > div .content > div .big-box > div .big-fish1 { position: absolute; z-index: 2; top:20%; left:50%; margin-left: -61.0820244%; width: 28.0977312%;} #main #section5 > div .content > div .big-box > div .big-fish1 > div { width:100%; } #main #section5 > div .content > div .big-box > div .big-fish1 > div img { width:100%; } #main #section5 > div .content > div .big-box > div .big-fish2 { position: absolute; z-index: 2; top:35%; left:50%; margin-left: -75.04363%; width: 32.460733%; } #main #section5 > div .content > div .big-box > div .big-fish2 > div { width:100%; } #main #section5 > div .content > div .big-box > div .big-fish2 > div img { width:100%; } #main #section5 > div .content > div .big-box > div .big-tuttle { position: absolute; z-index: 2; bottom:-50px; left:50%; margin-left: -104.7120419%; width:82.1989529%; } #main #section5 > div .content > div .big-box > div .big-tuttle > div { width:100%; } #main #section5 > div .content > div .big-box > div .big-tuttle > div img { width:100%; } #main #section5 > div .content > div .big-box > div .big-fish3 { position: absolute; z-index: 2; top:50%; left:50%; margin-left: 43.6300175%;width:26.3525305%; } #main #section5 > div .content > div .big-box > div .big-fish3 > div { width:100%; } #main #section5 > div .content > div .big-box > div .big-fish3 > div img { width:100%; } #main #section5 > div .content > div .big-box > div .big-Jellufish { position: absolute; z-index: 2; top:10%; left:50%; margin-left: 40.1396161%; width:34.904014%; } #main #section5 > div .content > div .big-box > div .big-Jellufish > div { width:100%; } #main #section5 > div .content > div .big-box > div .big-Jellufish > div img { width:100%; } #main #section6 { position: relative; width:100%; background-color: #09111e; } #main #section6 > div { position: relative; z-index:2 ; background-color: #09111e; } #main #section6 .title { position:absolute; z-index:3; top:60px; left:50px; } #main #section6 .title > div { width:100%; } #main #section6 .title > div span { font-family:'han'; color:#fff; font-size:24px; font-weight:600; letter-spacing:1.5px; } #main #section6 .title > div span i { width:7px; height:50px; display:inline-block; background:#e6c72a; margin-right:10px; } #main #section6 .content { width:100%; height:100%; text-align: center; } #main #section6 .content .slide-container { position: relative; width:100%; } #main #section6 .content .slide-container .slide-view { position: absolute; top:0; left:0; width:100%; } #main #section6 .content .slide-container .slide-view ul { margin-left: 34.2%; width: 120%; position: relative; } #main #section6 .content .slide-container .slide-view ul li {position:absolute; width:26.2743037%; transition:all .6s; } #main #section6 .content .slide-container .slide-view ul li.slide3 { z-index: 1; transform: perspective(200) scale(calc( 1*.40)); top:0; left:-450px; } #main #section6 .content .slide-container .slide-view ul li.slide2 { z-index: 2; transform: perspective(300) scale(calc( 1*.60)); top:0; left:-400px; } #main #section6 .content .slide-container .slide-view ul li.slide1 { z-index: 3; transform: perspective(400) scale(calc( 1*.80)); top:0; left:-250px;; } #main #section6 .content .slide-container .slide-view ul li.slide0 { z-index: 4; transform: perspective(800) scale(calc( 1*1.2)); top:0; left: 0; } #main #section6 .content .slide-container .slide-view ul li.slide1n { z-index: 3; transform: perspective(400) scale(calc( 1*.80)); top:0; left: 250px; } #main #section6 .content .slide-container .slide-view ul li.slide2n { z-index: 2; transform: perspective(300) scale(calc( 1*.60)); top:0; left: 400px; } #main #section6 .content .slide-container .slide-view ul li.slide3n { z-index: 1; transform: perspective(200) scale(calc( 1*.40)); top:0; left: 450px; } #main #section6 .content .slide-container .slide-view ul li > div {position: relative; width: 100%; z-index: 2; height: 100%; } #main #section6 .content .slide-container .slide-view ul li > div .slide-img { width: 100%; height: 100%; } #main #section6 .content .slide-container .slide-view ul li > div .slide-img img { width: 100%; height: 100%; } #main #section6 .content .slide-container .slide-view ul li > div > span { display: none; position:absolute; top:80%; left:4.5787546%; font-size: 25px; color:#fff; } #main #section6 .content .slide-container .slide-view ul li.addCnt > div > span { display: block; } #main #section6 .content .slide-container .slide-view ul li > div a.slideBtn { background: rgba(0,0,0,.0); cursor: url(../img/cursur1.png), auto; position:absolute; z-index:3 ;width:100%; height: 100%; top:0%; left:0%; display: block; font-size: 80px; color:#fff; } #main #section6 .content .slide-container .slide-view ul li.addCnt > div a.slideBtn { background: rgba(0,0,0,0); } #main #section6 .content .slide-container .slide-view ul li > div .youtube {position: absolute; display: none; top:0; left:0; z-index: 3; width: 100%; height: 100%; } /* #main #section6 .content .slide-container .slide-view ul li:nth-child(6) > div .youtube { display: block; } */ #main #section6 .content .slide-container .slide-view ul li > div .youtube iframe { width: 100%; height: 100%; } #main #section6 .content .next-prevBtn { max-width:1800px ; width:100%; position: absolute; z-index: 3; top:50%; left:0; margin-top:7.8822911%; } #main #section6 .content .next-prevBtn .prevBtn { margin-left: 15px; float: left; width:3.8%; } #main #section6 .content .next-prevBtn .prevBtn a { width:100%; } #main #section6 .content .next-prevBtn .prevBtn a img { width:100%; } #main #section6 .content .slide-container .next-prevBtn .nextBtn { float: right; margin-right: 15px; width:3.8%; } #main #section6 .content .slide-container .next-prevBtn .nextBtn a { width:100%; } #main #section6 .content .slide-container .next-prevBtn .nextBtn a img {width:100%; } /* --------------------------------------------------- Title공통 ---------------------------------------------------*/ .title-all { position: relative; width:100%; text-align: center; } .title-all span { display: block; width:100%; } .title-all span:nth-child(1) { height: 54px; } .title-all span:nth-child(2) { height: 13px;padding-top: 10px; } .title-all span i { display: inline-block;width:2px; height: 100%; background: #e6c72a; } .title-all h2 { font-family: 'han'; color:#fff; font-size: 26px; padding-top: 5px; } /* --------------------------------------------------- section7 ---------------------------------------------------*/ #section7 {position:relative; z-index: 5; width:100%; margin-top: 130px;} #section7 .content { width:100%; } /* --------------------------------------------------- section7 menu ---------------------------------------------------*/ #section7 .content .gallery-nav { width:100%; text-align: center; padding-bottom: 60px; padding-top: 30px;} #section7 .content .gallery-nav ul { display: inline-block; } #section7 .content .gallery-nav ul li { display: inline-block; margin: 0 20px; } #section7 .content .gallery-nav ul li a { font-family: 'han'; color:#ddd; border-bottom: 2px solid transparent; padding-bottom:5px; font-style: 18px; } #section7 .content .gallery-nav ul li a:hover { border-bottom: 2px solid #e6c72a; color:#fff; } #section7 .content .gallery-nav ul li a.addgalClick { border-bottom: 2px solid #e6c72a; color:#fff; } /* --------------------------------------------------- section7 gallery ---------------------------------------------------*/ #section7 .content .gallery { position: relative; width:100%; height: calc(289px*2); } #section7 .content .gallery li { position: absolute; width:20%; height: 289px; overflow: hidden; } #section7 .content .gallery li:nth-child(1) { top:calc(289px*0); left:calc(20%*0); } #section7 .content .gallery li:nth-child(2) { top:calc(289px*0); left:calc(20%*1); } #section7 .content .gallery li:nth-child(3) { top:calc(289px*0); left:calc(20%*2); } #section7 .content .gallery li:nth-child(4) { top:calc(289px*0); left:calc(20%*3); } #section7 .content .gallery li:nth-child(5) { top:calc(289px*0); left:calc(20%*4); } #section7 .content .gallery li:nth-child(6) { top:calc(289px*1); left:calc(20%*0); } #section7 .content .gallery li:nth-child(7) { top:calc(289px*1); left:calc(20%*1); } #section7 .content .gallery li:nth-child(8) { top:calc(289px*1); left:calc(20%*2); } #section7 .content .gallery li:nth-child(9) { top:calc(289px*1); left:calc(20%*3); } #section7 .content .gallery li:nth-child(10) { top:calc(289px*1); left:calc(20%*4); } #section7 .content .gallery li > div { width:100%; position: relative; top:0; transition: all .6s; } #section7 .content .gallery li > div:hover { top:-50px; } #section7 .content .gallery li > div .image-wrap { transform: scale(0);width:100%; transition: all .6s; } #section7 .content .gallery li.addZoom > div .image-wrap { transform: scale(1); } #section7 .content .gallery li > div .image-wrap a { display: block; cursor: url(../img/cursur2.png), auto;} #section7 .content .gallery li > div .image-wrap a img { width:100%; height: 100%;transform: scale(1); transition: all .6s; } #section7 .content .gallery li > div:hover .image-wrap a img { opacity: .5; transform: scale(1.2); } #section7 .content .gallery li > div .image-caption {position: relative; width:100%; height: 50px; background-color:#09111e ; } #section7 .content .gallery li > div .image-caption > div { width:100%; text-align: center; } #section7 .content .gallery li > div .image-caption > div a { width:100%; height: 100%; cursor: url(../img/cursur2.png), auto; } #section7 .content .gallery li > div .image-caption > div a strong { line-height: 50px; font-family: 'han'; color: #ddd; letter-spacing: 2px; font-size: 16px; font-weight: 500; } #section8 { position: relative; padding-top: 200px; width:100%; } #section8 .content { position: absolute; bottom: 0; left: -50%; width:200%; background: #09111e; } #section8 .content > div { position:relative; width:100%; height: 100%; } #section8 .content > div ul.content-wrap { position:relative; width:100%; height: 100%; cursor: pointer; } #section8 .content > div ul.content-wrap li:first-child { float: left; width:50%; height: 100%; background: url(../img/Whale.png) no-repeat 50% calc(2.941176471*34%); background-size: 100% 3500%; } #section8 .content > div ul.content-wrap li:last-child { float: left;width:50%; height: 100%; background: url(../img/skinskoober.png) no-repeat 50% calc(2.941176471*34%); background-size: 100% 3500%; } #section8 .content > div ul.content-wrap li > div { position: relative; width: 100%; height: 100%; border-right: 1px solid #303e55; } #section8 .content > div ul.content-wrap li:last-child > div { border-right: 0; } #section8 .content > div ul.content-wrap li > div .whaleBtn { position: absolute; width:30px; margin-top: -15px; } #section8 .content > div ul.content-wrap li:first-child > div .whaleBtn { top:50%;right:10px; } #section8 .content > div ul.content-wrap li:last-child > div .whaleBtn { top:50%; left:10px; } #section8 .content > div ul.content-wrap li > div .whaleBtn a { width:100%; } #section8 .content > div ul.content-wrap li > div .whaleBtn a img { width:100%; } #section8 .content > div ul.content-wrap li > div .first-Title { position: absolute; } #section8 .content > div ul.content-wrap li:first-child > div .first-Title { right:3%; bottom: 6.4850843%;} #section8 .content > div ul.content-wrap li:last-child > div .first-Title {left:3%; top:6.4850843%; } #section8 .content > div ul.content-wrap li:last-child > div .first-Title > div {position: relative; } #section8 .content > div ul.content-wrap li > div .first-Title span:first-child { float: left; display: block; width:68px; height: 143px; margin-right: 20px; } #section8 .content > div ul.content-wrap li > div .first-Title span:first-child i { display: block; width: 100%; height: 100%; outline: 7px solid #e6c72a; outline-offset:-7px ; } #section8 .content > div ul.content-wrap li > div .first-Title span:last-child strong { display: inline-block; font-size: 40px; color: #fff; font-family: 'yun'; font-weight: 500; line-height: 105%;} #section8 .content > div ul.content-wrap li > div .first-Title span:last-child small { display: block; font-size: 14px; color: #f0d02a; line-height: 120%; } #section8 .content > div ul.content-wrap li > div .scond-Title { position: absolute; display: none; } #section8 .content > div ul.content-wrap li:first-child > div .scond-Title { left:2.6274304%; top:12.9701686%; } #section8 .content > div ul.content-wrap li:last-child > div .scond-Title { right:2.6274304%; bottom:12.9701686%; } #section8 .content > div ul.content-wrap li > div .scond-Title > div { text-align: center; } #section8 .content > div ul.content-wrap li > div .scond-Title > div span:first-child { display: block; padding-bottom: 10px; } #section8 .content > div ul.content-wrap li > div .scond-Title > div span:last-child { display: block; padding-top: 10px; } #section8 .content > div ul.content-wrap li > div .scond-Title > div span i { width:2px; height: 28px; display:inline-block; background: #e6c72a;} #section8 .content > div ul.content-wrap li > div .scond-Title > div h2 { font-size: 32px; color: #fff; font-family: 'yun'; font-weight: 600; } #section8 .content > div ul.content-wrap li > div .scond-Title > div h3 { font-size: 20px; color: #fff; font-family: 'yun'; padding:5px 0 ;} #section8 .content > div ul.content-wrap li > div .scond-Title > div small { font-size: 14px; color: #f0d02a; font-family: 'yun'; } #section9 { position: relative; width: 100%; padding: 300px 0; } #section9 .wrap1500 { width:100%; max-width:1900px; margin:0 auto;} #section9 .content { width:100%; height: 100%; padding-top: 50px;} #section9 .content > div { position: relative; width: 100%; } #section9 .content > div .store-wrap { position: relative; width: 100%; text-align: center; } #section9 .content > div .store-wrap li { display:inline-block; width:20%; } #section9 .content > div .store-wrap li div { width:60%; background-color: #ccc; margin: 0 auto; cursor: pointer;} #section9 .content > div .store-wrap li:nth-child(1) div { background: url(../img/menu0.png) no-repeat 50% calc(7.692307692*0%); background-size: 100% 1300%; } #section9 .content > div .store-wrap li:nth-child(2) div { background: url(../img/menu1.png) no-repeat 50% calc(7.692307692*0%); background-size: 100% 1300%; } #section9 .content > div .store-wrap li:nth-child(3) div { background: url(../img/menu2.png) no-repeat 50% calc(7.692307692*0%); background-size: 100% 1300%; } #section9 .content > div .store-wrap li:nth-child(4) div { background: url(../img/menu3.png) no-repeat 50% calc(7.692307692*0%); background-size: 100% 1300%; } #section10 {position: relative; width:100%; } #section10 .title-all {position: relative; z-index: 2; } #section10 .content { padding-top: 60px; width:100%; } #section10 .content > div { width:100%;} #section10 .content > div .sec10back { width:100%;} #section10 .content > div .sec10back > div { width:100%; } #section10 .content > div .sec10back > div .mousePointer {position: absolute; top:50%;left:50%; width:240px; height: 450px; outline: 24px solid #e6c72a; overflow: hidden;} #section10 .content > div .sec10back > div .mousePointer .bg {position: absolute; width:100%; } #section10 .content > div .sec10back > div .mousePointer .bg img { width:120%; } #section10 .content > div .sec10count { position: absolute;z-index: 2; bottom:150px; width:100%; } #section10 .content > div .sec10count > div {width:100%; text-align: center; } #section10 .content > div .sec10count > div .sec10Title {display: block; } #section10 .content > div .sec10count > div .sec10Title h2 { color:#fff; font-size: 30px; font-family: 'han'; } #section10 .content > div .sec10count > div ul { width:100%;} #section10 .content > div .sec10count > div ul li {display: inline-block; margin: 30px 200px; } #section10 .content > div .sec10count > div ul li > div { display: block;} #section10 .content > div .sec10count > div ul li > div h3 {color:#c2c2c2; font-size: 26px; font-family: 'han'; padding-bottom: 15px;} #section10 .content > div .sec10count > div ul li > div span { color:#c2c2c2; font-size: 24px; font-family: 'han'; } #section11 { position: relative; width:100%; background: url(../img/20180419152649_4resize_news.jpg) no-repeat 50% 50% fixed; background-size: cover; } #section11::after { content: ''; position: absolute; top:0; left:0; width:100%; height: 100%;background:rgba(0,0,0,.5); } #section11:before { content: ''; position: absolute; top:0; left:0; width:100%; height: 100%;background: url(../img/sec11BG1.png) no-repeat 50% 50%; background-size: 100% 100%; } #section11 .content { width:100%; position: relative; z-index: 2; padding: 200px 0; } #section11 .content > div { width:100%; } #section11 .content > div .sec11Title { width: 100%; padding-bottom: 50px;} #section11 .content > div .sec11Title > div { width:100%; text-align: center; } #section11 .content > div .sec11Title > div span:first-child { width:60px; height: 102px; display: inline-block; } #section11 .content > div .sec11Title > div span i { width:100%; height: 100%; display: block; border: 7px solid #f0d02a; } #section11 .content > div .sec11Title > div span:last-child {display: inline-block; text-align: left; margin-left: 20px;} #section11 .content > div .sec11Title > div small { color: #fff; display: block; font-size: 24px; font-family: 'han'; line-height: 120%; } #section11 .content > div .content02 { width:100%;position: relative; } #section11 .content > div .content02 > div { width:100%} #section11 .content > div .content02 > div form { width:100%} #section11 .content > div .content02 > div form ul { text-align: center; } #section11 .content > div .content02 > div form ul li { padding-bottom:20px; margin:0 auto; } #section11 .content > div .content02 > div form ul li div { position: relative; } #section11 .content > div .content02 > div form ul li div input[type='text'] { outline: 2px solid transparent; outline-offset: -1px; transition: all 0.3s; max-width:575px; width:100%; margin: 0 auto; } #section11 .content > div .content02 > div form ul li div input[type='text']:focus { outline: 2px solid #e6c72a; } #section11 .content > div .content02 > div form ul li div input[type='text'].addError { outline: 2px solid rgba(204,0,0,1); } #section11 .content > div .content02 > div form ul li div input[type='text']::placeholder { color: #aaa; font-size: 13px; } #section11 .content > div .content02 > div form ul li div input[type='submit'] { margin-top: 10px; border: 2px solid #e6c72a; background-color:transparent; transition: all 0.3s;color:#fff; letter-spacing: 1px; font-family: 'han'; height: 40px; font-size: 14px; font-weight: 600; } #section11 .content > div .content02 > div form ul li div input[type='submit']:hover { background-color: #e6c72a;color:#000; } #section11 .content > div .content02 > div form ul li:nth-child(3) > div {display: inline-block; max-width:575px; width:100%; background-color: #fff; } #section11 .content > div .content02 > div form ul li:nth-child(3) > div::after { content:''; display:block; width:100%; height:100%; z-index:1; position:absolute; color:#c00; left:0; top:0; background:url(../img/select-arrow.png) no-repeat 98% 50%; } #section11 .content > div .content02 > div form ul li > div select { position: relative; z-index: 2; } #section11 .content > div .content02 > div form ul li > div textarea { max-width:575px; width:100%; } #section11 .content > div .content02 > div form ul li > div textarea:focus { outline: 2px solid #e6c72a; } #section11 .content > div .content02 > div form ul li > div textarea.addError { outline: 2px solid rgba(204,0,0,1); } /*Ajax loader*/ #section11 .content > div .content02 > div form ul li > div .ajax-loader { display: none; margin-top: 20px; } #section11 .content > div .content02 > div form ul li > div .ajax-loader.addLoader { display: block; } #section11 .content > div .content02 > div form ul li > div .ajax-loader img { width:16px; } /*실패 메세지*/ #section11 .content > div .content02 > div form ul li.errors { display: none; width: 100%; } #section11 .content > div .content02 > div form ul li.errors.addError { display: block; } #section11 .content > div .content02 > div form ul li.errors > div { width:100%; max-width:575px; margin: 0 auto; } #section11 .content > div .content02 > div form ul li.errors > div p { color: #000; text-align: center; font-size: 13px; background:#f7e700; line-height:40px;} /*성공 메세지*/ #section11 .content > div .content02 > div form ul li.success { display: none; width: 100%; } #section11 .content > div .content02 > div form ul li.success.addsuccess { display: block; } #section11 .content > div .content02 > div form ul li.success > div { width:100%; max-width:575px; margin: 0 auto; } #section11 .content > div .content02 > div form ul li.success > div p { color: #fff; outline: 1px solid #39b; outline-offset: -1px; text-align: center;line-height:40px; font-size: 13px; background: transparent; } #footer { width:100%; padding: 150px 0; } #footer .content { width:100%; } #footer .content > div { width:100%; text-align: center; } #footer .content > div .footer-menu { width:100%; text-align: center; } #footer .content > div .footer-menu li { display: inline-block; margin: 30px 15px; } #footer .content > div .footer-menu li a { font-size: 16px; color: #fff; font-family: 'han'; font-weight: 500; letter-spacing: 1px; } #footer .content > div .footer-menu li a:hover { color: #ddd; text-decoration: underline; } #footer .content > div .call { width:100%; text-align: center; } #footer .content > div .call li { display: inline-block; margin:0 30px; } #footer .content > div .call li span { font-size: 14px; color: #c5c5c5; font-family: 'yun'; font-weight: 500; letter-spacing: 1px; } #footer .content > div .call li small {padding-top: 15px; display: block; color: #c5c5c5; font-family: 'yun'; font-weight: 500; letter-spacing: 1px; font-size: 13px; } #footer .content > div h2 { display: inline-block; font-size: 15px; color: #c5c5c5; font-family: 'yun'; line-height: 50px;} #footer .content > div address { display: block; font-size: 13px; color: #f0d02a; font-family: 'yun'; } #modal { cursor:url(../img/icon-zoom-out.png) , auto; z-index: 5; display: none; overflow: hidden; position: fixed; top:0; left:0; width:100%; height: 100%; background-color: #09111e; } #modal .image { cursor: pointer; position: relative; left:551.5px; top:184.5px; width:100%; max-width:800px; } #modal .image img { width:100%; } #modal .arrow-left { display: block; position: absolute; left:0; top:50%; width:90px; margin-top:-55px;} #modal .arrow-left a { position:relative; display: block; width:100%; height: 100%; } #modal .arrow-left a::before { position: absolute; left:0; width:100%; text-align: center; line-height: 110px; height: 100%; content: '◁'; text-indent:-10px; font-weight:600; display:inline-block; font-size:60px; color:#e6c72a;} #modal .arrow-right { display:block;position:absolute; right:0; top:50%; width:90px; height:110px; margin-top:-55px; } #modal .arrow-right a { position:relative; display:block; width:100%; height:100%; } #modal .arrow-right a::before { position:absolute; right:0; width:100%; text-align:center; line-height:110px; height:100%; content:'▷'; text-indent:10px; font-weight:600; display:inline-block; font-size:60px; color:#e6c72a; } #modal .modal-closeBtn-wrap { display:block;position:absolute; right:0; top:0; width:40px; height:40px; background:#c99; } #modal .modal-closeBtn-wrap a { position:relative; display:block; width:100%; height:100%; background:#000; } #modal .modal-closeBtn-wrap a:before { position:absolute; top:0;right:0; width:100%; text-align:center; content:'×'; line-height:40px; height:100%; font-weight:500; display:inline-block; font-size:25px; color:#e6c72a; }