/* ===== MAIN - VISUAL ===== */ .main-visual {position:relative;margin:0 auto;height:100vh;} .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/main-230508-01.jpg) no-repeat 50% 100%; background-size:cover;} .main-visual .visual-slider .swiper-slide .vs-bg2{ background:url(../img/main/main-230508-02.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-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 .vs-txt h2 {opacity:0;font-size:67px; color:#134277;font-weight:bold;-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 span{ position:relative; display:inline-block; padding:0 37px;font-family: 'Nanum Myeongjo', serif; padding-bottom:20px;} .main-visual .visual-slider .swiper-slide .vs-txt h2 span:before{ content:''; position:absolute; bottom:0; left:0; border-bottom:1px #000 solid; width:100%; height:1px; opacity:0.3;} .main-visual .visual-slider .swiper-slide .vs-txt p {opacity:0;letter-spacing:-0.028em;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px); font-weight:500;} .main-visual .visual-slider .swiper-slide .vs-txt .sTit{ font-size:30px; margin-top:20px; margin-bottom:10px; color:#ac4d2c;} .main-visual .visual-slider .swiper-slide .vs-txt .bTxt{ font-size:23px; color:#1e5b94;} .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 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;} @media all and ( max-width: 1920px ){ .main-visual .visual-slider .swiper-slide .vs-txt{ margin-top:-120px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:57px;} .main-visual .visual-slider .swiper-slide .vs-txt .bTxt{ font-size:19px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ width:77px; height:77px; right:50px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:77px;} .main-visual .visual-slider .swiper-button-prev{ margin-top:-120px;} .main-visual .visual-slider .swiper-button-next {margin-top:-20px;} .main-visual .visual-slider .swiper-pagination{ width:77px; margin-top:100px; right:50px;} } @media all and ( max-width: 1680px ){ } @media all and ( max-width: 1440px ){ .main-visual {height:650px;} .main-visual .visual-slider .swiper-slide .vs-txt{ margin-top:-80px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:40px;} .main-visual .visual-slider .swiper-slide .vs-txt .sTit{ font-size:25px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ width:57px; height:57px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:57px; font-size:25px;} .main-visual .visual-slider .swiper-button-prev{ margin-top:-100px;} .main-visual .visual-slider .swiper-pagination{ width:57px; font-size:15px;} } @media all and ( max-width: 1280px ){ } @media all and ( max-width: 1024px ){ .main-visual {height:550px;} .main-visual .visual-slider .swiper-slide .vs-txt{ margin-top:-30px;} .main-visual .visual-slider .swiper-slide .vs-txt .bTxt{ display:none;} } @media all and ( max-width: 800px ){ .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:37px;} .main-visual .visual-slider .swiper-slide .vs-txt h2 span{ padding:0 0 20px 0;} .main-visual .visual-slider .swiper-slide .vs-txt .sTit{ font-size:20px;} } @media all and ( max-width: 640px ){ .main-visual {height:450px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:30px;} .main-visual .visual-slider .swiper-slide .vs-txt .sTit{ font-size:18px; padding:0 20px;} .main-visual-btn{ position:absolute; bottom:30px; left:0; width:100%; text-align:center;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ position:relative; right:auto; display:inline-block; margin:0 5px;width:37px; height:37px; border:none; background: rgb(0,0,0, 0.7);} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:37px; font-size:20px;} .main-visual .visual-slider .swiper-button-prev{ margin-top:0;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ } .main-visual .visual-slider .swiper-pagination{ display:none;} } .mainContents h1{ font-size:25px; font-weight:500;} #sec_01{} #sec_01 ul{display:flex; flex-wrap: wrap;} #sec_01 ul li{display: table;width:calc(100% / 3);overflow:hidden; color:#fff; text-align:center;} #sec_01 ul li .area{ padding:150px 0 500px 0; } #sec_01 ul li:nth-child(1){background:url(../img/main/sec-01-001.jpg) no-repeat 50% 100%; background-size:cover;} #sec_01 ul li:nth-child(2){background:url(../img/main/sec-01-002.jpg) no-repeat 50% 100%; background-size:cover;} #sec_01 ul li:nth-child(3){background:url(../img/main/sec-01-003.jpg) no-repeat 50% 100%; background-size:cover;} /* 슬라이드 공용 */ .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; } #sec_02{ position:relative; display:flex; } #sec_02:before{ content:''; position:absolute; bottom:150px;left:0; width:100%; height:450px; background:#efefef;} /* 제품리스트 */ .facilities{position:relative; width:100%; } .facilities h3{ font-size:20px; line-height:20px; font-family:'NotoM'; color:#222;} .facilities .facilities_list{display:block; margin:25px 0 0;} .facilities .facilities_list p{ position:relative;display:table; float:left; margin:0 15px;} .facilities .facilities_list p span{ color:#666; } .facilities .facilities_list p span b{ display:block; font-size:30px; margin:20px 0 10px 0; color:#222;} .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; top:50%; transform: translateY(50%); margin-top:-50px;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:100px; height:100px; line-height:100px;font-family:xeicon; font-size:57px; color:#555; } .facilities .facilities_list .slick-next{right:-90px; } .facilities .facilities_list .slick-next:before{ content:"\e93e"; } .facilities .facilities_list .slick-prev{ left:-90px;} .facilities .facilities_list .slick-prev:before{content:"\e93b"; } .facilities .control a{position:absolute; right:30px; top:2px; width:20px; height:20px; display:block; text-indent:-9999%; overflow:hidden;} #sec_03{ position:relative; display:flex;} #sec_03:before{content:''; position:absolute; left:-170px; top:-150px; width:850px; height:850px;background:url(../img/main/sec-03-001.png) no-repeat; background-size:auto 100%; z-index:-1 } #sec_03 .area{ float:left; } #sec_03 .s01{ width:47%; margin-right:100px;} #sec_03 .s02{ width:calc((100% - 47%) - 100px);} #sec_03 .s01 .fs40 span{ display:inline-block; margin-right:15px;} #sec_03 .s02 ul{ display:flex;flex-wrap: wrap;} #sec_03 .s02 li{ position:relative;display: table;width:calc((100% / 2) - 13px); border:1px #ddd solid; margin-right:20px; margin-bottom:20px;} #sec_03 .s02 .thum{background-repeat: no-repeat; display:inline-block;width:50px;height:50px; position:absolute; right:50px; top:40px;background-position: center center; background-size: 100%; display:block;} #sec_03 .s02 a i.n1{background-image:url(../img/main/sec-03-002.png);} #sec_03 .s02 a i.n2{background-image:url(../img/main/sec-03-003.png);} #sec_03 .s02 a i.n3{background-image:url(../img/main/sec-03-004.png);} #sec_03 .s02 a i.n4{background-image:url(../img/main/sec-03-006.png);} #sec_03 .s02 i.n5{background-image:url(../img/main/sec-03-005.png);} #sec_03 .s02 a:hover i.n1, #sec_03 .s02 a:focus i.n1, #sec_03 .s02 a:active i.n1{background-image:url(../img/main/sec-03-002_on.png);} #sec_03 .s02 a:hover i.n2, #sec_03 .s02 a:focus i.n2, #sec_03 .s02 a:active i.n2{background-image:url(../img/main/sec-03-003_on.png);} #sec_03 .s02 a:hover i.n3, #sec_03 .s02 a:focus i.n3, #sec_03 .s02 a:active i.n3{background-image:url(../img/main/sec-03-004_on.png);} #sec_03 .s02 a:hover i.n4, #sec_03 .s02 a:focus i.n4, #sec_03 .s02 a:active i.n4{background-image:url(../img/main/sec-03-006_on.png);} #sec_03 .s02 li:nth-child(2n+2){ margin-right:0;} #sec_03 .s02 li:nth-child(5){width:100%; margin-right:0;} #sec_03 .s02 dl{ position:relative;} #sec_03 .s02 dl dt{ position:absolute; top:0; left:0;} #sec_03 .s02 dl dd{ margin-left:150px; color:#777;} #sec_03 .s02 a { display:table; width:100%; height:100%;transition:all .3s linear;} #sec_03 .s02 a:hover{background:#0087e1; color:#fff; border-color:#0087e1} #sec_03 .s02 dl dd span{ display:inline-block;} #sec_03 .s02 dl dd a{display:inline-block; border:1px #777 solid; padding:10px 35px; border:1px #ddd solid; border-radius:5px; display:inline-block; margin-bottom:20px; width:auto;} #sec_03 .s02 dl dd a i{ margin-left:15px;} #sec_03 .s02 dl dd a:hover{ } #sec_04 ul{ display:flex;flex-wrap: wrap;} #sec_04 li{display: table;} #sec_04 li:nth-child(1){ background:url(../img/main/sec-04-001.jpg) no-repeat 50% 100%; background-size:cover; width:55%} #sec_04 li:nth-child(1) .area{ padding:200px 200px 500px 200px; color:#fff;} #sec_04 .sTit{ letter-spacing:15px;} #sec_04 li:nth-child(1) .area .fs60{ display:block;} #sec_04 li:nth-child(2){ width:45%;} #sec_04 li:nth-child(2) .area{ height:45vh;} #sec_04 li:nth-child(2) .thum{ padding:100px;} #sec_04 li:nth-child(2) .area01{ background:#e2e2e2 url(../img/main/sec-04-002.jpg) no-repeat 100% 100%; background-size:90% auto;} #sec_04 li:nth-child(2) .area01 img{ width:47%;} #sec_04 li:nth-child(2) .area02{ background:url(../img/main/sec-04-005.jpg) no-repeat 100% 100%; background-size:cover; color:#fff;} #sec_05 ul{ display:flex; flex-wrap: wrap;gap:30px;} #sec_05 li{ width:calc((100% / 5) - 26px);border:1px #ddd solid; height:70px; line-height:70px;} #sec_05 li img{ width:80%; height:auto; } #sec_05 li:nth-child(19){ background:#efefef;} #sec_05 li:nth-child(19) i{ margin-left:30px;} .main_pro {position:relative; width:100%; float:left;} .main_pro button{cursor:pointer;} .main_pro .pro{position:relative; height:100%; z-index:0; text-align:center;} .main_pro .pro div{height:100%;} .main_pro .pro p{display:table; height:100%; float:left;} .main_pro .pro p a{display:table-cell; vertical-align: middle; padding:0; margin:0;} .main_pro .pro img{width:auto; height:auto; max-width:100%; max-height:100%; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; } .main_pro .pro .slick-counter{position: absolute; right:0; top:-50px; width:50px; height:30px; line-height:30px; color:#333;font-size:17px; text-align:right;} .main_pro .pro .slick-arrow{position:absolute; right:0; top:-50px;overflow:hidden; z-index:1; font-size:0; background:none;} .main_pro .pro .slick-prev{right:118px;} .main_pro .pro .slick-next{right:40px; } .main_pro .pro .slick-prev:before, .main_pro .pro .slick-next:before{ font-family:xeicon;; font-size:30px; color:#000;} .main_pro .pro .slick-prev:before{content:"\e93c";} .main_pro .pro .slick-next:before{content:"\e93f"} .main_pro .control{position:absolute; right:85px; top:0px; z-index:1;} .main_pro .control a{display:block; font-size:0; overflow:hidden;} .main_pro .control a i{ font-size:30px; color:#000;} .main_pro .control a.btn_stop{} .main_pro .control a.btn_play{display:none;} @media all and ( max-width: 1920px ){ #sec_01 ul li .area{ padding:150px 0 400px 0; } #sec_02:before{bottom:127px; height:350px;} #sec_03:before{bottom:110px;height:600px; width:600px; left:-100px; top:-50px; } .facilities .facilities_list .slick-next:before, .facilities .facilities_list .slick-prev:before{font-size:40px; } .facilities .facilities_list p span b{ font-size:25px;} #sec_03 .s02 .mg50{ margin:40px;} #sec_03 .s02 .thum{ top:30px; right:40px; width:37px; height:37px;} #sec_04 li:nth-child(1) .area{ padding:150px 150px 0 150px;} #sec_04 li:nth-child(2) .area01{ background-size:70% auto;} #sec_04 .sTit{ letter-spacing:7px;} #sec_04 li:nth-child(2) .area02 .pt50{ padding-top:0;} #sec_05 ul {gap:20px;} #sec_05 li { width:calc((100% / 5) - 18px); height:60px; line-height:60px;} } @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;} } @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;} } @media all and ( max-width: 1400px ){ .facilities .facilities_list .slick-prev{ left:20px;} .facilities .facilities_list .slick-next{ right:20px;} .facilities .facilities_list .slick-arrow{ background: rgb(0,0,0, 0.7); padding:0;border-radius:50%;margin-top: -70px;} .facilities .facilities_list .slick-next:before, .facilities .facilities_list .slick-prev:before{ width:55px; height:55px; line-height:55px; color:#fff; font-size:20px; } } @media all and ( max-width: 1280px ){ #sec_01 ul li .area .fs45{ margin:20px 0 10px 0;} #sec_02:before{ display:none;} /* .facilities .facilities_list .slick-prev{ left:20px;} .facilities .facilities_list .slick-next{ right:20px;} .facilities .facilities_list .slick-arrow{ background: rgb(0,0,0, 0.7); padding:0;border-radius:50%;margin-top: -70px;} .facilities .facilities_list .slick-next:before, .facilities .facilities_list .slick-prev:before{ width:55px; height:55px; line-height:55px; color:#fff; font-size:20px; } */ .facilities .facilities_list p span b{ font-size:20px;} #sec_03{ padding:0 10px; overflow:hidden;} #sec_03 .s01{ margin-right:50px;} #sec_03 .s02 {width: calc((100% - 47%) - 50px);} #sec_03 .s02 dl dd{ margin-left:100px;} #sec_03 .s02 dl dd br{ display:block;} #sec_03 .s02 .thum{ right:20px;} #sec_03 .s02 .mg50{ margin:30px;} #sec_04 li:nth-child(1) .area{ padding:100px 50px;} #sec_04 li:nth-child(1) .area .fs25 br{ display:none;} #sec_04 li:nth-child(2) .thum{ padding:70px 50px;} #sec_05{ padding:0 10px;} } @media all and ( max-width: 810px ){ #sec_01 ul li{ width:100%;} #sec_01 ul li .area{ padding:70px 0 270px 0} #sec_01 ul li .area .fs23{ padding:0 20px;} #sec_01 ul li .area .fs23 br{ display:none;} #sec_03 .s02 .thum{ width:30px; height:30px; top:25px;} #sec_03 .s02 .mg50{ margin:30px 20px;} #sec_03 .s02 dl dt{ position:relative;} #sec_03 .s02 dl dd{ margin:10px 0 0 0;} #sec_03 .s02 li{width: calc((100% / 2) - 7px); margin-right:10px;} #sec_04 li:nth-child(1), #sec_04 li:nth-child(2){ width:100%;} #sec_04 li:nth-child(1) .area{ padding:50px 50px 250px 50px;} #sec_04 li:nth-child(1) .area .fs60{ font-size:35px;} #sec_04 li:nth-child(1) .area .fs25{ padding-right:120px;} #sec_04 li:nth-child(2) .area{ height:auto;} #sec_05 ul{gap:15px;} #sec_05 li{ width:calc((100% / 4) - 14px); height:50px; line-height:50px;} } @media all and ( max-width: 640px ){ #sec_03 .s01{ width:100%; margin:0 0 20px 0;} #sec_03 .s02{ width:100%;} #sec_03 .s02 li{width: calc((100% / 4) - 10px); } #sec_03 .s02 li:nth-child(2){ margin-right:10px;} #sec_03 .s02 dl dd br{ display:none;} #sec_03 .s02 .thum{ width:25px; height:25px; top:25px; right:10px;} #sec_03 .s02 .fs25{ font-size:14px;} #sec_04 li:nth-child(1) .area .fs60{ font-size:30px;} #sec_04 li:nth-child(2) .thum{ padding:50px 30px;} #sec_04 li:nth-child(2) .area .fs45{ font-size:23px;} #sec_04 li:nth-child(2) .area .fs27{ font-size:17px;} #sec_05 ul{gap:10px;} #sec_05 li{ width:calc((100% / 4) - 10px); height:40px; line-height:40px;} #sec_05 li:last-child i{ margin-left:10px;} } @media all and ( max-width: 480px ){ #sec_01 ul li .area{ padding:70px 0 200px 0} #sec_03 .s02 li{width: calc((100% / 2) - 7px); margin-bottom:10px;} #sec_03 .s02 li:nth-child(2){ margin-right:0px;} #sec_03 .s02 .thum{ width:35px; height:35px; top:20px; right:20px; } #sec_04 li:nth-child(1) .area{ padding:50px 50px 100px 50px;} #sec_04 li:nth-child(1) .area .fs60{ font-size:22px;} #sec_04 li:nth-child(1) .area .fs35 span{ font-size:30px;} #sec_04 li:nth-child(1) .area .fs25{ font-size:17px; padding-right:70px; margin-top:15px;} #sec_04 li:nth-child(2) .thum .sTit{ margin-bottom:10px;} .facilities .facilities_list .slick-arrow{margin-top: -20px;} #sec_05 li{ width:calc((100% / 3) - 9px);} }