/* ===== MAIN - VISUAL ===== */ .main-visual {position:relative;margin:0 auto;height:calc(100vh - 120px); margin:120px 100px 0 100px;} .main-visual .visual-slider {overflow:hidden;position:absolute;left:50%;top:50%;width:100%;height:100%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%); } .main-visual .visual-slider .swiper-slide {overflow:hidden;position:relative;height:100%;} .main-visual .visual-slider .swiper-slide .vs-bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1); transition-duration:3s;} .main-visual .visual-slider .swiper-slide .vs-bg1{ background:url(../img/main/Visual01.jpg) no-repeat 50% 100%; background-size:cover;} .main-visual .visual-slider .swiper-slide .vs-bg2{ background:url(../img/main/Visual02.jpg) no-repeat 50% 100%; background-size:cover;} .main-visual .visual-slider .swiper-slide .vs-bg3{ background:url(../img/main/main-230508-03.jpg) no-repeat 50% 50%; background-size:cover;} .main-visual .visual-slider .swiper-slide .vs-bg4{ background:url(../img/main/main-20230510.jpg) no-repeat 50% 50%; background-size:cover;} .main-visual .visual-slider .swiper-slide .vs-txt {display:flex;flex-direction:column;justify-content:center;position:relative; margin-top:-150px;max-width:150em;width:100%;height:100%;z-index:1; text-align:center;} .main-visual .visual-slider .swiper-slide .txt1 { margin-top:-300px;} .main-visual .visual-slider .swiper-slide .txt1 img{ width:1000px;} .main-visual .visual-slider .swiper-slide .txt2{ text-align:left; padding-left:10%; margin-top:-50px;} .main-visual .visual-slider .swiper-slide .txt2 img{ width:750px;} .main-visual .visual-slider .swiper-slide .vs-txt h1 {opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);} .main-visual .visual-slider .swiper-slide .vs-txt h2 {opacity:0;font-size:65px; color:#fff;font-weight:300;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);} .main-visual .visual-slider .swiper-slide .vs-txt p {opacity:0; color:#fff; margin-top:20px; line-height:35px; font-size:27px;letter-spacing:-0.028em;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px); } .main-visual .visual-slider .swiper-button-prev {left:auto;right:8.5%;top:50%;z-index:10;margin-top:-170px} .main-visual .visual-slider .swiper-button-prev:after {display:none;} .main-visual .visual-slider .swiper-button-next {right:8.5%;top:50%;margin-top:-30px;} .main-visual .visual-slider .swiper-button-next:after {display:none;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ position:absolute;background:none;width:100px;height:100px;border-radius:50%;border:1px solid #fff;z-index:10; text-align:center;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:100px; display:inline-block; color:#fff; font-size:30px;} .main-visual .visual-slider .swiper-pagination {position:absolute;right:8.5%;top:50%;left:auto;bottom:auto;z-index:10;margin-top:7.083em;width:5.833em;font-size:1.2rem;color:#ffffff;letter-spacing:0.333em;font-style:italic;} .main-visual .visual-slider .swiper-pagination span {font-style:normal;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg {-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:transform 1.4s;-moz-transition:transform 1.4s;-ms-transition:transform 1.4s;-o-transition:transform 1.4s;transition:transform 1.4s;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h1 {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h2 {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt p {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-ms-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s;} .hide {position: absolute;left: -9999%;font-size: 0;line-height: 0;text-indent: -9999px;} .d-fw{display: flex; flex-wrap: wrap;} .dl{display: flex;} .dl dt{flex-shrink: 0;} .dl dd{flex-grow: 1;} .mainContents h1{ font-size:60px; font-weight:700; margin-bottom:15px;} .mainContents .cTit{ margin-bottom:70px; font-size:25px; color:#333;} #sec01{ position:relative; margin:150px 0px 0 200px;} #sec01:before{ content:''; position:absolute; top:0; left:0;background:#006ddd url(../img/main/sec01-bg.jpg) no-repeat 0% 100%; background-size: auto 100%; width:100%; height:100%; } #sec01 dl{ position:relative;} #sec01 dl dt{ position:absolute; top:0; left:0; padding:150px } #sec01 dl dt span{ font-size:25px; display:block; margin-bottom:30px;} #sec01 dl dt a{ display:inline-block; border-bottom:1px solid rgb(0,0,0,0.5); padding-bottom:10px; margin-top:150px; } #sec01 dl dt a i{ margin-left:50px;} #sec01 dl dd{ margin-left:30%; padding:100px 0;} #sec02{ margin:150px 0; } /* 슬라이드 공용 */ .slick-slider{transition:all ease-in-out .3s; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent; } .slick-slide{ display:none; height:100%; min-height:1px; vertical-align:middle; } .slick-list{ overflow:hidden; } .slick-list.dragging{ cursor:pointer; } .slick-initialized .slick-slide{ display:inline-block; } .slick-arrow.slick-hidden { display:none; } .slick-current { opacity:1; display:block; } /* 제품리스트 */ .facilities{position:relative; width:100%; } .facilities h3{ font-size:20px; line-height:20px; font-family:'NotoM'; color:#222;} .facilities .facilities_list{display:block;} .facilities .facilities_list p{ position:relative;display:table; float:left; margin:0 25px;} .facilities .facilities_list p span{ position:absolute; bottom:0; left:0; width:100%; background:rgb(0,0,0,0.5); font-size:25px; color:#fff; padding:15px 0; } .facilities .facilities_list a{display:table-cell; vertical-align: middle; width:100%; text-align:center; overflow:hidden;} .facilities .facilities_list a img{width:auto; height:auto; max-width:100%; max-height:100%;} .facilities .facilities_list .slick-arrow{position:absolute; bottom:70px;text-align:center; overflow:hidden; cursor:pointer; background:none; z-index:1; font-size:0;} .facilities .facilities_list .slick-next:before, .facilities .facilities_list .slick-prev:before{ border-radius:50%; display:block; width:80px; height:80px; line-height:80px;font-family:xeicon; font-size:30px; color:#fff; border:1px solid #fff; border-radius:50%; } .facilities .facilities_list .slick-next{ left:40px; } .facilities .facilities_list .slick-next:before{ content:"\e93e"; } .facilities .facilities_list .slick-prev{ left:-75px; } .facilities .facilities_list .slick-prev:before{content:"\e93b";color:#005bb0; border:1px solid #005bb0; } .facilities .control a{position:absolute; right:30px; top:2px; width:20px; height:20px; display:block; text-indent:-9999%; overflow:hidden;} #sec03{ display:flex;} #sec03 .s01, #sec04 .s01{width:30%;} #sec03 .s02, #sec04 .s02{width:70%;} #sec03 .s01{ background:#005bac; color:#fff;} #sec03 .s01 .area, #sec04 .s01 .area{ padding:100px ;} #sec03 .s01 .area .sTit{ font-size:37px; font-weight:600; color:#fff; border-bottom:2px solid rgb(255,255,255,0.9); padding-bottom:13px; margin-bottom:35px;} #sec03 .s02{ background-image: url(../img/main/sec03-bg.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;} #sec03 .s02 .area{ padding:130px 150px 300px 150px; color:#fff;} #sec03 .s02 .area .sTit{ font-size:33px; font-weight:500; margin-bottom:70px;} #sec03 .s02 .area a{ display:inline-block; background:#fff; padding:20px 30px; border-radius:30px; font-size:23px;transition:all .3s linear;} #sec03 .s02 .area a:hover{ background:#11a84d; color:#fff;} #sec03 .s02 .area a i{ margin-left:70px;} #sec03 .s02 .area p+p{ margin-top:20px;} #sec04{ display:flex;} #sec04 .s01{ background:#e5eaee} #sec04 .s01 p{ letter-spacing:0; margin-bottom:30px;} #sec04 .s01 a{ display:inline-block; border-bottom:1px solid rgb(0,0,0,0.5); padding-bottom:10px; margin-top:150px; } #sec04 .s01 a i{ margin-left:50px;} #sec05{ margin:200px 0;} #sec05 .logo img{ width:470px;} #sec05 h2{ font-size:77px; font-weight:800; letter-spacing:-2px; margin:20px 0; } #sec05 .bTit{ font-size:30px; color:#777; margin-bottom:100px;} #sec05 a{ display:inline-block; border-top:1px solid #222; padding-top:15px; font-size:27px;} #sec05 a i{ width:40px; height:40px; line-height:40px; border-radius:50%; color:#fff; background:#0054a7; margin-left:100px; font-size:20px;} @media all and ( max-width: 1920px ){ .pd150{ padding:100px 0;} .pt150{ padding-top:100px;} .mt150{ margin-top:100px;} .mainContents h1{ font-size:50px; margin-bottom:7px;} .mainContents .cTit{font-size:20px;} .main-visual {height:calc(100vh - 100px); margin:100px 70px 0 70px;} .main-visual .visual-slider .swiper-slide .txt1 { margin-top:-200px;} .main-visual .visual-slider .swiper-slide .txt1 img{ width:800px;} .main-visual .visual-slider .swiper-slide .txt2 { margin-top:0;} .main-visual .visual-slider .swiper-slide .txt2 img{ width:600px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:50px;} .main-visual .visual-slider .swiper-slide .vs-txt p{ font-size:23px; line-height:27px;} #sec01 .inner .area li:before{width:23px; height:23px; } #sec01 .inner .area li a{ font-size:19px;} #sec01 .inner .area p{ font-size:25px;} #sec01 dl dt{padding:130px 100px } #sec01 dl dt a{ margin-top:77px;} .facilities .facilities_list .slick-prev{ left:-55px; } .facilities .facilities_list .slick-next{ left:35px; } .facilities .facilities_list .slick-next:before, .facilities .facilities_list .slick-prev:before{ width:60px; height:60px; line-height:60px; font-size:20px;} .facilities .facilities_list p span{ font-size:20px;} #sec03 .s01 .area{ padding:100px 80px ;} #sec03 .s01 .area .sTit{ font-size:32px;} #sec03 .s02 .area{ padding:130px 150px 200px 150px;} #sec03 .s02 .area a{ font-size:20px; padding:15px 30px;} #sec03 .s02 .area .sTit{ font-size:27px;} #sec04 .s01 a{ margin-top:100px; } #sec05{ margin:150px 0;} #sec05 .logo img{ width:400px;} #sec05 h2{ font-size:67px; } #sec05 .bTit{ font-size:25px;} #sec05 a{ font-size:23px;} } @media all and ( max-width: 1680px ){ #sec_04 li:nth-child(1) .area { padding: 100px 100px 0 100px;} #sec_04 li:nth-child(2) .thum{ padding:70px;} #sec_04 li:nth-child(1) .area .fs60{ font-size:40px;} #sec_04 li:nth-child(1) .area .fs60 span{ display:block; font-size:47px;} #sec01{margin:100px 0px 0 70px;} #sec01 dl dd {margin-left: 35%;} .facilities .facilities_list p{ margin:0 10px;} .facilities .facilities_list .slick-prev {left: -70px;} .facilities .facilities_list .slick-next {left: 20px;} } @media all and ( max-width: 1440px ){ #sec_01 ul li .area{ padding:100px 0 200px 0} #sec_01 ul li .area .mb50{ margin-bottom:35px;} .mainContents h1 {font-size:45px;} } @media all and ( max-width: 1280px ){ .main-visual {height:calc(100vh - 70px); margin: 70px 0 0 0;} .main-visual .visual-slider .swiper-slide .txt1 { margin-top:-170px;} .main-visual .visual-slider .swiper-slide .txt1 img{ width:650px;} .main-visual .visual-slider .swiper-slide .txt2 { margin-top:0;} .main-visual .visual-slider .swiper-slide .txt2 img{ width:450px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:40px;} .main-visual .visual-slider .swiper-slide .vs-txt p{ font-size:20px; line-height:25px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{width:70px;height:70px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:70px; font-size:25px;} .main-visual .visual-slider .swiper-button-prev{ margin-top:-115px;} .main-visual .visual-slider .swiper-pagination{ width:70px; font-size:15px; margin-top: 60px;} .mainContents h1 {font-size:40px;} .mainContents .cTit{ color:#555;} #sec01{margin:70px 0px 0 30px;} #sec01 dl dt {padding: 100px 70px;} #sec02 {margin: 100px 10px;} } @media all and ( max-width: 1024px ){ .mainContents h1 {font-size:35px;} .mainContents .cTit{ margin-bottom:15px;} #sec01{ margin:50px 10px 0 10px;} #sec01::before{ display:none;} #sec01 dl dt{ position:relative; padding:0; text-align:center;} #sec01 dl dt span{ margin-bottom:10px;} #sec01 dl dt br{ display:none;} #sec01 dl dd{ margin:0; padding:20px 0 0 0;} #sec01 dl dt a{ margin-top:30px;} .facilities .facilities_list .slick-arrow{ bottom:auto; top:50%; transform: translateY(-50%); } .facilities .facilities_list .slick-next::before, .facilities .facilities_list .slick-prev::before{background:rgb(0,0,0,0.3)} .facilities .facilities_list .slick-next{ left:auto; right:10px;} .facilities .facilities_list .slick-prev{ left:10px;} .facilities .facilities_list .slick-prev::before {color: #fff;border: 1px solid #fff;} #sec03, #sec04{ display:block;} #sec03 .s01, #sec04 .s01, #sec03 .s02, #sec04 .s02{ width:100%;} #sec03 .s02 .area {padding: 70px 100px 150px 100px;} } @media all and ( max-width: 800px ){ .mainContents h1 {font-size:30px;} .main-visual {height:500px;} .main-visual .visual-slider .swiper-slide .txt1 { margin-top:-120px;} .main-visual .visual-slider .swiper-slide .txt1 img{ width:450px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:30px;} .main-visual .visual-slider .swiper-slide .txt2 img{ width:350px;} .main-visual .visual-slider .swiper-slide .vs-txt p{ font-size:17px; line-height:20px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next, .main-visual .visual-slider .swiper-pagination{ right:20px;} #sec03 .s01 .area, #sec04 .s01 .area {padding: 50px 30px;} } @media all and ( max-width: 640px ){ .main-visual {height:370px;} .main-visual .visual-slider .swiper-slide .txt1 img{ width:70%;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:25px;} .main-visual .visual-slider .swiper-slide .txt2 {margin-top:-30px;} .main-visual .visual-slider .swiper-slide .txt2 img{ width:50%;} .main-visual .visual-slider .swiper-slide .vs-txt p{ display:none;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next, .main-visual .visual-slider .swiper-pagination{ right:auto; top:auto; bottom:37px;} .main-visual .visual-slider .swiper-button-prev{ left:50px; margin-top:0;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{width:50px;height:50px;} .main-visual .visual-slider .swiper-button-next{ left:105px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:50px; font-size:25px;} .main-visual .visual-slider .swiper-pagination{ width:70px; font-size:15px; margin-top:0; left:155px; height:50px; line-height:50px; letter-spacing:0;} #sec02 {margin:50px 10px;} #sec03 .s02 .area {padding:30px 30px 70px 30px;} #sec03 .s02 .area .sTit{ font-size:23px;} #sec05 h2{ font-size:57px;} } @media all and ( max-width: 480px ){ .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:20px;} .main-visual .visual-slider .swiper-slide .vs-bg2{ background-position:70% 50%;} .facilities .facilities_list p{ margin:0;} #sec03 .s02 .area .sTit{ font-size:20px;} #sec05 .logo img{ width:80%;} #sec05 h2{ font-size:37px;} #sec05 .bTit{ font-size:20px; margin:0 10px 30px 10px;} }