/* ===== 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/Visual01.jpg) no-repeat 50% 0%; background-size:cover;} .main-visual .visual-slider .swiper-slide .vs-bg2{ background:url(../img/main/Visual02.jpg) no-repeat 50% 0%; background-size:cover;} .main-visual .visual-slider .swiper-slide .vs-bg3{ background:url(../img/main/Visual03.jpg) no-repeat 50% 0%; background-size:cover;} .main-visual .visual-slider .swiper-slide .vs-bg4{ background:url(../img/main/Visual04.jpg) no-repeat 50% 0%; background-size:cover;} .main-visual .areaT{ position:absolute; margin:0 13%; margin-top:-50px; top:50%; transform: translateY(-50%);left:0; color:#fff; z-index:2; letter-spacing:-1px;} .main-visual .areaT h2{ font-size:50px;} .main-visual .areaT h1{ font-size:77px;font-weight:700;} .main-visual .areaT p{ font-size:25px; margin-top:25px; margin-bottom:50px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:30px;color:#fff;} .main-visual .visual-slider .swiper-button-prev { left:330px; } .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{position:absolute; background:none; display:flex;align-items: center;justify-content: center;width:70px; height:70px; top:auto; border-radius:50%; border:1px solid #fff; bottom:300px; z-index:10; } .main-visual .visual-slider .swiper-button-prev:after { display:none;} .main-visual .visual-slider .swiper-button-next { left:420px;} .main-visual .visual-slider .swiper-button-next:after { display:none;} .main-visual .visual-slider .swiper-pagination { position:absolute; right:auto; top:auto; bottom:300px;left:490px;display:flex;align-items: center;justify-content: center;height:70px; z-index:10; width:100px; 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;} .d-fw{display: flex; flex-wrap: wrap;} .dl{} .dl dt{flex-shrink: 0;} .dl dd{flex-grow: 1;} .root_daum_roughmap{ width:100% !important; } .root_daum_roughmap .wrap_map{height:741px !important;} #sec01 .inner .area{ display:flex; justify-content: space-between; height:100px;align-items: center; background:#004a80; color:#fff; padding:0 70px; border-radius:30px; margin-top:-50px;} #sec01 .inner .area p{ position:relative; font-size:27px;} #sec01 .inner .area p:before{ content:''; position:absolute; top:50%; right:-230px; width:200px; height:1px; border-top:1px solid rgb(255,255,255,0.3)} #sec01 .inner .area ul{gap:0 30px;} #sec01 .inner .area li{ position:relative;display:flex;align-items: center; } #sec01 .inner .area li a{ color:#fff;} #sec01 .inner .area li:before{ content:''; margin-right:10px; width:30px; height:30px; background-size:auto 100%; background-repeat:no-repeat;} #sec01 .inner .area li:nth-child(1):before{ background-image:url(../img/main/sec01-icon01.png);} #sec01 .inner .area li:nth-child(2):before{ background-image:url(../img/main/sec01-icon02.png);} #sec01 .inner .area li:nth-child(3):before{ background-image:url(../img/main/sec01-icon03.png);} #sec01 .inner .area li+li{ padding-left:30px;} #sec01 .inner .area li+li:after{content:''; position:absolute; top:50%; left:0; width:1px; height:20px;transform: translateY(-50%); border-left:1px solid rgb(255,255,255,0.3)} #sec02{ margin-top:100px;} #sec02 dl dt{flex-basis: 28%;} #sec02 dl dt p{ color:#777; letter-spacing:3px; font-weight:700;} #sec02 dl dt h1{ margin:15px 0 100px 0;} #sec02 dl dt a{ font-weight:500; border-bottom:2px solid #000; padding-bottom:10px;} #sec02 dl dt a i{ margin-left:30px;} @media all and ( max-width: 1920px ){ .pd150{ padding:100px 0;} .pt150{ padding-top:100px;} .mt150{ margin-top:100px;} .main-visual .areaT{ position:absolute; margin:0 10%; } .main-visual .areaT h2{ font-size:45px;} .main-visual .areaT h1{ font-size:70px;} .main-visual .areaT p{ font-size:20px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{width:55px; height:55px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:20px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next, .main-visual .visual-slider .swiper-pagination{bottom:170px;} .main-visual .visual-slider .swiper-button-prev { left:195px; } .main-visual .visual-slider .swiper-button-next { left:265px;} .main-visual .visual-slider .swiper-pagination{ left:315px; height:55px } #sec01 .inner .area li:before{width:23px; height:23px; } #sec01 .inner .area li a{ font-size:19px;} #sec01 .inner .area p{ font-size:25px;} } @media all and ( max-width: 1680px ){ } @media all and ( max-width: 1440px ){ } @media all and ( max-width: 1280px ){ } @media all and ( max-width: 1024px ){ } @media all and ( max-width: 800px ){ } @media all and ( max-width: 640px ){ .root_daum_roughmap .wrap_map{height:400px !important;} } @media all and ( max-width: 480px ){ } @media all and ( max-width: 400px ){ }