/* **************************************** * * header * **************************************** */ /*웹*/ @media (min-width:1024px) { .main #header {position:fixed !important; top:0; left:0; } .main #skipnavigation{position:fixed !important; top:0; left:0;} .main .navi {display:none;} } /*패드*/ @media (min-width:641px) and (max-width:1023px) { } /*모바일*/ @media (max-width:640px) { } /* **************************************** * * fullpage > section0 * **************************************** */ #fullpage > #section0 {text-align:center; position:relative; z-index:1; color:#fff; box-sizing:border-box; overflow:hidden;} #fullpage > #section0:after {content:''; display:block; position:absolute; z-index:2; top:0; right:0; width:100%; height:100%; background:rgba(48,55,60,0.6);} #fullpage > #section0 video {position:relative; object-fit:cover; z-index:1; height:100%; width:100%;} #fullpage > #section0 h3, #fullpage > #section0 h2 {color:#fff; width:100%; text-align:center;} #fullpage > #section0 h3, #fullpage > #section0 h2, #fullpage > #section0 .btn {position:absolute; z-index:3;} #fullpage > #section0 h3:before {content:''; display:inline-block; position:absolute; top:0; left:50%; transform:translateY(-50%); background:rgba(255,255,255,0.5); width:1px;} #fullpage > #section0 .btn {bottom:0; overflow:hidden; left:0; width:100%; background:rgba(255,255,255,0.5);} #fullpage > #section0 .btn dl {cursor:pointer; box-sizing:border-box;} #fullpage > #section0 .btn dl dd {opacity:0.6;} #fullpage > #section0 .btn dl:hover {display:inline-block; background:#b57d7d; } #fullpage > #section0 .btn dl:hover dt, #fullpage > #section0 .btn dl:hover dd {color:#fff; } #fullpage > #section0 h3{font-family:helvetica; font-weight:700; } #fullpage > #section1 .bx-wrapper , #fullpage > #section1 .bx-wrapper .bx-viewport{width:100%; height:100% !important; border:none !important; overflow:hidden; } .bxslider6 {position:relative; height:100%;} div.i_slider {box-sizing:border-box; height:100%; position:relative; } #section1 .bx-controls {display:none;} #section1 .bx-pager{position:absolute; } #section1 div.i_slider.list001 p.img {background:url('/images/sub/topb1.gif') no-repeat bottom right; background-size:cover;} #section1 div.i_slider.list002 p.img {background:url('/images/main/62.gif') no-repeat bottom right; background-size:cover;} #section1 div.i_slider.list003 p.img {background:url('/images/main/m156.gif') no-repeat center bottom; background-size:cover;} #section1 div.i_slider.list004 p.img {background:url('/images/sub/bg516.gif') no-repeat center right; background-size:cover;} #section1 .bx-pager .inner a { font-family: 'S-CoreDream-8Heavy'; color:#c3c9cd;} #section1 .bx-pager .inner a.active {color:#414a52;} #section1 .tiny_tit {color:#b57d7d !important; position:relative; border-bottom:2px solid #b57d7dl; display:inline-block; } #section1 div.i_slider h3 {color:#535252; font-weight:normal;} #section1 .bx-wrapper {box-shadow:none; border:noen;} #fullpage > #section2 { background:url('/images/main/mm01.gif') no-repeat ; } #fullpage > #section2 .tit2{color:#fff;} #fullpage .tiny_tit {font-family:verdana;} #section2 .tiny_tit{color:#b57d7d !important;} #section2 .tit4 {color:#fff; border-left:none !important;} #section3 .fp-controlArrow.fp-prev {display:none !important;} #section3 .fp-controlArrow.fp-next{display:none !important;} #section3 .fp-slidesNav.fp-bottom {text-align:center;} #section3 .fp-slidesNav ul { display:inline-block; padding:0px !important; } #section3 .fp-slidesNav ul {overflow:hidden;} #section3 .fp-slidesNav ul li {margin:0px; display:inline-block;} #section3 .fp-slidesNav ul li a{height:2px; background:rgb(202, 202, 202); } #section3 .fp-slidesNav ul li a.active{background:rgba(187, 126, 128)} #section3 .fp-slidesNav ul li span {display:none;} #section3 .fp-slidesNav ul li a {display:inline-block;} #section3 .width_area .txt{ } #section3 .tiny_tit{color:#b57d7d !important;} #section3 #slide1 {background: url('/images/main/product02.gif') no-repeat center left; background-size:cover;} #section3 #slide2 {background: url('/images/main/pro51.gif') no-repeat center left; background-size:cover;} #section3 h2{color:#a64c4c !important} #section4 .intit {padding:40px 0px 90px 0px;} #section4 .intit dt{color:#b57d7d} #section4 .intit dd a{display:inline-block; position:relative; font-weight:300; text-transform:uppercase; font-family:verdana; font-weight:400;} #section4 .intit dd a:before{content:'';height:1px; display:inline-block; background:#000; } #section4 ul {overflow:hidden; width:100%;} #section4 ul li {margin:0px; box-sizing:border-box; float:left;} #section4 ul li dl dd{ text-align:center; margin-left:auto; margin-right:auto; box-sizing:border-box; background:#fff; } #section4 ul li dd h4 {color:#ce8989; display:none} #section4 ul li dd h3 {font-family: 'S-CoreDream-8Heavy';} #section4 ul li dd p {font-family: 'verdana'; color:rgba(0,0,0,0.7);} /*웹*/ @media (min-width:1024px) { .section_white::before {content:''; display:inline-block; width:100%; height:180px; z-index:80; top:0; left:0; position:absolute; transition: all 2s ease-out; background: linear-gradient(to bottom, rgba(65,65,65,0.5) 0%, rgba(65,65,65,0.3) 40%, rgba(65,65,65,0) 100%) ; /* background:blue; */ /* background: rgba(74, 74, 83, 0.8); */ top:0px;} .secition {min-height:1000px;} #fullpage .tiny_tit {font-size:13px; line-height:20px; letter-spacing:2px;} #fullpage > #section0 h3:before {height:55px;} #fullpage > #section0 h3{top:160px;; font-size:13px; letter-spacing:3px; padding-top:80px; transform:scale(1,0.9);} #fullpage > #section0 h2 {top:305px;; font-size:64px;line-height:90px;} #fullpage > #section0 .btn dl {float:left;width:33%; padding:44px 0px;} #fullpage > #section0 .btn dl:nth-child(2) { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1)} #fullpage > #section0 .btn dl dt {font-size:26px; line-height:33px;} #fullpage > #section0 .btn dl dd {font-size:15px; line-height:22px; padding-top:10px;} #section1 div.i_slider { padding-left:300px; padding-top:190px; padding-right:30%;} div.i_slider p.img {position:absolute; right:0; top:0; width:37%; min-height:1000px; max-width:600px; height:100%; } #section1 div.i_slider h2 {font-size:40px; height:170px; line-height:56px; padding-top:30px; } #section1 div.i_slider h3 {font-size:16px; line-height:32px; height:190px; } #section1 .bx-pager {height:100%;} #section1 .bx-pager .inner {position:absolute; top:0px; left:0px; box-sizing:border-box; width:200px; height:100%; z-index:60; } #section1 .bx-pager .inner a p { border:6px solid transparent; box-sizing:border-box;} #section1 .bx-pager .inner a.active p{ border:6px solid #b57d7d;} #section1 .bx-pager .inner a p { position:absolute; z-index:60px; width:185px; height:122px; bottom:-250px;} #section1 .bx-pager .inner a:nth-child(1) p { left:300px;} #section1 .bx-pager .inner a:nth-child(2) p { left:510px;} #section1 .bx-pager .inner a:nth-child(3) p { left:720px;} #section1 .bx-pager .inner a:nth-child(4) p { left:930px;} #section1 .bx-pager .inner:before {content:''; display:block; position:absolute; top:0; right:0; height:100%; width:4px; background: linear-gradient(to bottom, #414a52 0%, #414a52 36%, #c3c9cd 36%, #c3c9cd 100%)} #section1 .bx-pager .inner div {position:absolute; top:50%; transform:translateY(-50%);} #section1 .bx-pager .inner a {display:inline-block; font-size:19px; line-height:80px; text-align:center; width:100%;} #section1 .bx-pager {position:absolute; top:0; left:0;} #section1 .bx-pager .mlist {position:absolute; bottom:160px; left:250px; box-sizing:border-box; height:100%; background:red; z-index:60; overflow:hidden;width:600px !important; height:auto !important;} #section1 .bx-pager .inner a p {width:185px; overflow:hidden; } #section1 .bx-pager .inner a p img {width:100%} #section1 .inner {position:absolute; z-index:10px; top:0; left:0px;} #fullpage > #section2 {background-position:top center; transition: all 2s ease-out; } #fullpage > #section2.active {background-position:bottom center;} #section2 .tit4 {font-size:40px; line-height:55px; padding:40px 0px 70px 0px;} #section3 .fp-slidesNav ul li {width:100px;} #section3 .fp-slidesNav ul {padding:0px 50px;} #section3 .width_area .txt{ overflow:hidden; float:right; width:600px;} #section3 .txt a{margin-right:20px;} #section3 .txt h3{font-size:20px; line-height:40px; padding-top:30px;} #section3 .txt h2{font-size:50px; line-height:70px; padding-bottom:130px;} #fullpage > #section3 .slide {background-position:left top; transition: all 2s ease-out; } #fullpage > #section3.active .slide {background-position:left center;} #section4 {padding-top:40px;} #section4 .intit dt{float:left; font-size:37px; line-height:40px;} #section4 .intit dd {float:right;} #section4 .intit dd a{display:inline-block; position:relative; padding-left:50px;font-family:verdana; line-height:40px; font-size:11px; letter-spacing:2px;} #section4 .intit dd a:before{height:1px; display:inline-block; width:40px; position:Absolute; top:20px; left:0;} #section4 ul li{overflow:hidden; width:33.3%; padding:20px 20px; } #section4 ul li dt {position:relative; z-index:1;width:100%; height:300px; overflow:hidden;} #section4 ul li dt img{object-fit:cover;} #section4 a {text-decoration:none;} #section4 ul li dd {margin-top:-40px; padding:30px 20px; position:relative; z-index:2;} #section4 ul li dd {width:80%; } #section4 ul li dd h4 {font-size:14px; line-height:40px; } #section4 ul li dd h3 {font-size:24px; line-height:30px; padding-bottom:20px;} #section4 ul li dd p {letter-spacing:2px; font-size:11px; line-height:20px;} } /*웹2*/ @media (min-width:1024px) and (max-width:1470px) { div.i_slider p.img {width:25%;} #section1 div.i_slider { padding-left:250px; padding-right:28%;} #section1 .bx-pager .inner a:nth-child(1) p { left:250px;} #section1 .bx-pager .inner a:nth-child(2) p { left:460px;} #section1 .bx-pager .inner a:nth-child(3) p { left:670px;} #section1 .bx-pager .inner a:nth-child(4) p { left:870px;} #fullpage > #section3.active .slide {background-position:center center;} } /*웹2*/ @media (min-width:1024px) and (max-width:1470px) { #section3 .width_area .txt {width:470px;} #section3 .txt a {margin-bottom:10px;} } /*패드*/ @media (min-width:641px) and (max-width:1023px) { #header {position:fixed; top:0; left:0; width:100%; } .secition {min-height:1000px;} #fullpage .tiny_tit {font-size:12px; line-height:20px; letter-spacing:2px;} #fullpage > #section0 h3:before {height:15px;} #fullpage > #section0 h3{top:200px;; font-size:13px; letter-spacing:3px; padding-top:40px; transform:scale(1,0.9);} #fullpage > #section0 h2 {top:280px;; font-size:34px;line-height:52px;} #fullpage > #section0 .btn dl {width:100%; padding:18px 0px;} #fullpage > #section0 .btn dl:nth-child(2) { border-left:1px solid rgba(0,0,0,0.1); border-top:1px solid rgba(0,0,0,0.1)} #fullpage > #section0 .btn dl dt {font-size:19px; line-height:33px;} #fullpage > #section0 .btn dl dd {font-size:13px; line-height:22px; padding-top:10px; } #section1 div.i_slider { padding-left:50px; padding-top:190px; padding-right:30%;} div.i_slider p.img {position:absolute; left:0px; top:0; z-index:1; width:110%; min-height:1000px; height:100%; } div.i_slider p.img:after {content:''; width:100%; height:100%; z-index:2; position:absolute; display:block; background:rgba(255,255,255,0.6);} #section1 div.i_slider h2 {font-size:27px; height:170px; z-index:3; position:relative; line-height:36px; padding-top:30px; } #section1 div.i_slider h3 {font-size:14px; line-height:26px; height:170px; z-index:3; position:relative;} #section1 .tiny_tit, #section1 div.i_slider a.combtn {z-index:3; position:relative;} #section1 .bx-pager {height:100%;} #section1 .bx-pager .inner {position:absolute; top:0px; left:0px; box-sizing:border-box; width:120px; height:100%; z-index:60; } #section1 .bx-pager .inner a {font-size:0 !important; } #section1 .bx-pager .inner a p { border:3px solid transparent; box-sizing:border-box;} #section1 .bx-pager .inner a.active p{ border:3px solid #b57d7d;} #section1 .bx-pager .inner a p { position:absolute; z-index:60px; bottom:-350px;} #section1 .bx-pager .inner a p {width:130px; height:94px; } #section1 .bx-pager .inner a:nth-child(1) p { left:50px;} #section1 .bx-pager .inner a:nth-child(2) p { left:200px;} #section1 .bx-pager .inner a:nth-child(3) p { left:350px;} #section1 .bx-pager .inner a:nth-child(4) p { left:500px;} #section1 .bx-pager .inner:before {content:''; display:block; position:absolute; top:0; left:0; height:100%; width:4px; background: linear-gradient(to bottom, #414a52 0%, #414a52 36%, #c3c9cd 36%, #c3c9cd 100%)} #section1 .bx-pager .inner div {position:absolute; top:50%; transform:translateY(-50%);} #section1 .bx-pager {position:absolute; top:0; left:0;} #section1 .bx-pager .mlist {position:absolute; bottom:160px; left:250px; box-sizing:border-box; height:100%; background:red; z-index:60; overflow:hidden;width:600px !important; height:auto !important;} #section1 .bx-pager .inner a p img {width:100%} #section1 .inner {position:absolute; z-index:10px; top:0; left:0px;} #fullpage > #section2 {background-position:top center; transition: all 2s ease-out; } #fullpage > #section2.active {background-position:bottom center;} #section2 .tit4 {font-size:30px; line-height:45px; padding:30px 0px 70px 0px;} #section3 .fp-slidesNav ul li {width:100px;} #section3 .fp-slidesNav ul {padding:0px 50px;} #section3 .width_area .txt{ overflow:hidden; background:rgba(255,255,255,0.8); text-align:center; box-sizing:border-box; margin-left:auto; margin-right:auto; vertical-align:top; width:90%; max-width:600px; position:relative; z-index:3; padding:50px 50px;} #section3 .txt a{margin-right:20px;} #section3 .txt h3{font-size:16px; line-height:30px; padding-top:30px; } #section3 .txt h2{font-size:40px; line-height:60px; padding-bottom:70px; } #fullpage > #section3 .slide { transition: all 2s ease-out; } #fullpage > #section3 .slide {background-size: auto 170% !important; background-size:bottom left; } #section4 {padding-top:40px;} #section4 .intit dt{float:left; font-size:27px; line-height:40px;} #section4 .intit dd {float:right;} #section4 .intit dd a{display:inline-block; position:relative; padding-left:50px;font-family:verdana; line-height:40px; font-size:11px; letter-spacing:2px;} #section4 .intit dd a:before{height:1px; display:inline-block; width:40px; position:Absolute; top:20px; left:0;} #section4 ul li{overflow:hidden;float:left; width:48%; min-height:500px;} #section4 ul li:nth-child(2) {margin-left:2%;} #section4 ul li:nth-child(3) {display:none;} #section4 ul li dt {position:relative; z-index:1;width:100%; height:300px; overflow:hidden;} #section4 ul li dt img{object-fit:cover;} #section4 a {text-decoration:none;} #section4 ul li dd {margin-top:-40px; padding:30px 20px; position:relative; z-index:2;} #section4 ul li dd {width:80%; } #section4 ul li dd h4 {font-size:13px; line-height:40px; } #section4 ul li dd h3 {font-size:20px; line-height:30px; padding-bottom:20px;} #section4 ul li dd p {letter-spacing:2px; font-size:11px; line-height:20px;} } /*모바일*/ @media (max-width:640px) { #header {position:fixed; top:0; left:0; width:100%; } .secition {min-height:500px;} #fullpage .tiny_tit {font-size:12px; line-height:20px; letter-spacing:2px;} #fullpage > #section0 h3:before {height:11px;} #fullpage > #section0 h3{top:160px;; font-size:12px; letter-spacing:3px; padding-top:30px; transform:scale(1,0.9);} #fullpage > #section0 h2 {top:220px;; font-size:26px;line-height:42px;} #fullpage > #section0 .btn dl {width:100%; padding:18px 0px;} #fullpage > #section0 .btn dl:nth-child(2) { border-left:1px solid rgba(0,0,0,0.1); border-top:1px solid rgba(0,0,0,0.1)} #fullpage > #section0 .btn dl dt {font-size:16px; line-height:26px;} #fullpage > #section0 .btn dl dd {font-size:13px; line-height:22px; padding-top:10px; display:none;} #section1 div.i_slider { padding-left:4%; padding-top:190px; padding-right:30%;} div.i_slider p.img {position:absolute; left:0px; top:0; z-index:1; width:110%; min-height:1000px; height:100%; } div.i_slider p.img:after {content:''; width:100%; height:100%; z-index:2; position:absolute; display:block; background:rgba(255,255,255,0.6);} #section1 div.i_slider h2 {font-size:27px; height:170px; z-index:3; position:relative; line-height:36px; padding-top:30px; } #section1 div.i_slider h3 {font-size:14px; line-height:26px; height:170px; z-index:3; position:relative; display:none;} #section1 .tiny_tit, #section1 div.i_slider a.combtn {z-index:3; position:relative;} #section1 .bx-pager {height:100%;} #section1 .bx-pager .inner {position:absolute; top:0px; left:0px; box-sizing:border-box; width:120px; height:100%; z-index:60; } #section1 .bx-pager .inner a {font-size:0 !important; } #section1 .bx-pager .inner a p { border:3px solid transparent; box-sizing:border-box;} #section1 .bx-pager .inner a.active p{ border:3px solid #b57d7d;} #section1 .bx-pager .inner a p { position:absolute; z-index:60px; bottom:-250px;} #section1 .bx-pager .inner a p {width:60px; height:47px; } #section1 .bx-pager .inner a:nth-child(1) p { left:20px;} #section1 .bx-pager .inner a:nth-child(2) p { left:80px;} #section1 .bx-pager .inner a:nth-child(3) p { left:140px;} #section1 .bx-pager .inner a:nth-child(4) p { left:200px;} #section1 .bx-pager .inner:before {content:''; display:block; position:absolute; top:0; left:0; height:100%; width:4px; background: linear-gradient(to bottom, #414a52 0%, #414a52 36%, #c3c9cd 36%, #c3c9cd 100%)} #section1 .bx-pager .inner div {position:absolute; top:50%; transform:translateY(-50%);} #section1 .bx-pager {position:absolute; top:0; left:0;} #section1 .bx-pager .mlist {position:absolute; bottom:160px; left:250px; box-sizing:border-box; height:100%; background:red; z-index:60; overflow:hidden;width:600px !important; height:auto !important;} #section1 .bx-pager .inner a p img {width:100%} #section1 .inner {position:absolute; z-index:10px; top:0; left:0px;} #fullpage > #section2 {background-position:top center; transition: all 2s ease-out; } #fullpage > #section2.active {background-position:bottom center;} #section2 .tit4 {font-size:23px; line-height:33px; padding:30px 0px 70px 0px;} #section3 .fp-slidesNav ul li {width:100px;} #section3 .fp-slidesNav ul {padding:0px 50px;} #section3 .width_area .txt{ overflow:hidden; background:rgba(255,255,255,0.8); text-align:center; box-sizing:border-box; margin-left:auto; margin-right:auto; vertical-align:top; width:70%; max-width:600px; position:relative; z-index:3; padding:30px 30px;} #section3 .txt a{margin-right:20px;} #section3 .txt h3{font-size:16px; line-height:30px; padding-top:30px; } #section3 .txt h2{font-size:25px; line-height:40px; padding-bottom:20px; } #section3 .txt a {text-align:left; margin-top:10px;} #fullpage > #section3 .slide { transition: all 2s ease-out; } #fullpage > #section3 .slide {background-size: auto 170% !important; background-size:bottom left; } #section4 {padding-top:40px;} #section4 .intit dt{float:left; font-size:23px; line-height:40px;} #section4 .intit dd {float:right;} #section4 .intit dd a{display:inline-block; position:relative; padding-left:50px;font-family:verdana; line-height:40px; font-size:11px; letter-spacing:2px;} #section4 .intit dd a:before{height:1px; display:inline-block; width:40px; position:Absolute; top:20px; left:0;} #section4 ul li{overflow:hidden;float:left; width:100%; padding-top:20px; } #section4 ul li:nth-child(2) {margin-top:10px;} #section4 ul li:nth-child(3) {display:none;} #section4 ul li dt {position:relative; z-index:1;width:100%; height:300px; overflow:hidden;} #section4 ul li dt img{object-fit:cover;} #section4 a {text-decoration:none;} #section4 ul li dd {margin-top:-40px; padding:30px 20px; position:relative; z-index:2;} #section4 ul li dd {width:80%; } #section4 ul li dd h4 {font-size:13px; line-height:40px; } #section4 ul li dd h3 {font-size:20px; line-height:30px; padding-bottom:20px;} #section4 ul li dd p {letter-spacing:2px; font-size:11px; line-height:20px;} #section4 ul li:nth-child(2), #section4 ul li:nth-child(3), #section4 ul li:nth-child(4), #section4 ul li:nth-child(5), #section4 u li:nth-child(6), #section4 u li:nth-child(7){ display:none;} }