/* ===== 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 bottom;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-image:url(../img/main/Visual_banner1.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg2{ background-image:url(../img/main/Visual_banner2.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg3{ background-image:url(../img/main/Visual_banner3.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg4{ background-image:url(../img/main/Visual_banner2.jpg);} .main-visual .visual-slider .swiper-slide .vs-txt {display:flex; flex-direction:column; justify-content:center; position:relative; width:74%; margin-left:330px; height:100%; z-index:1; color:#fff;} .main-visual .visual-slider .swiper-slide .vs-txt h1, .main-visual .visual-slider .swiper-slide .vs-txt h2, .main-visual .visual-slider .swiper-slide .vs-txt p {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 h1{font-size:30px;font-weight:300; letter-spacing:30px; margin-bottom:20px;} .main-visual .visual-slider .swiper-slide .vs-txt h1:after{ content:''; display:inline-block; width:200px; height:1px; border-top:1px #fff solid;} .main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size:60px; margin:20px 0 30px 0;} .main-visual .visual-slider .swiper-slide .vs-txt p {font-size:25px;} .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:50%; margin-top:-250px; left:310px; font-size:20px;display:flex;align-items: center;justify-content: center;height:70px; z-index:10; width:100px; color:#ffffff; letter-spacing:0.333em;} .main-visual .visual-slider .swiper-pagination span { font-style:normal;} .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, .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-left:13%;} .main-visual .visual-slider .swiper-slide .vs-txt h1{font-size:25px;} .main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size:50px;} .main-visual .visual-slider .swiper-slide .vs-txt p {font-size:20px;} .main-visual .visual-slider .swiper-pagination { margin-top:-230px; left:13%; font-size:17px;justify-content:flex-start;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{width:50px; height:50px;bottom:200px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:25px;} .main-visual .visual-slider .swiper-button-prev { left:13%; } .main-visual .visual-slider .swiper-button-next { left:calc(13% + 70px);} } @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:0} .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:45px; height:45px; bottom:100px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:45px; font-size:25px;} .main-visual .visual-slider .swiper-button-prev{ margin-top:-100px;} .main-visual .visual-slider .swiper-pagination{ width:57px; font-size:15px; margin-top:-185px;} } @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;} .main-visual .visual-slider .swiper-slide .vs-txt h2 br{ display:none} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ bottom:50px;} .main-visual .visual-slider .swiper-pagination{ margin-top:-130px;} } @media all and ( max-width: 800px ){ .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:30px;} .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-slide .vs-txt h1{ display:none;} } @media all and ( max-width: 480px ){ .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:25px;} } .mainContents h1{ font-size:25px; font-weight:500;} #sec01{} #sec01 ul li{position:relative;width:calc((100% / 4) - 2px); text-align:center;} #sec01 ul li a{transition: all 0.3s; display:block; width:100%; height:100%;} #sec01 ul li a:hover{ background:#edf1f3;} #sec01 ul li .area{ padding:120px; text-align:left} #sec01 ul li .area img{ width:100%;} #sec01 ul li .area h2{ color:#6f899b; font-size:23px; margin:50px 0 10px 0;} #sec01 ul li .area strong{ font-size:40px; font-weight:600;} #sec01 ul li .area p{ color:#2a3f4d; font-weight:300; margin-top:25px; line-height:30px; letter-spacing:0;} #sec01 ul li:nth-child(4){ background:url(../img/main/sec01-04.jpg) no-repeat 50% 50%; background-size:cover;} #sec01 ul li:before {content:"\e907";font-family:xeicon; position:absolute; bottom:120px; right:120px; color:rgb(0,0,0,0.2); font-size:27px;} #sec01 ul li+li{ border-left:1px #dce3e8 solid; } #sec03 dt{ position:relative;flex-basis: 32%;background:url(../img/main/sec04-01.jpg) no-repeat 50% 50%; background-size:cover; color:#fff; text-align:right;} #sec03 dt .area{position:absolute; right:130px; bottom:150px;} #sec03 dt .area h1{ font-size:30px; font-weight:300;} #sec03 dt .area h1 span{ font-size:45px; font-weight:500;} #sec03 dt .area a{ display:inline-block; color:#fff; padding:20px 30px; margin-top:20px; border:1px solid rgb(255,255,255,0.2);transition: all 0.3s; } #sec03 dt .area a:hover{ background:#0072bc} #sec03 dt .area a i{ margin-left:77px;} #sec03 dd{ padding:150px 130px; background:#004a80; color:#fff;} #sec03 dd h1{ font-size:50px; margin-bottom:100px;} #sec03 dd h1 span{ color:#4ecfff;} #sec03 dd ul{gap:0 100px;} #sec03 dd li{width:calc((100% / 3) - 67px);} #sec03 ul li:before{ display:inline-block; width:100%; border-bottom:1px solid rgb(255,255,255,0.3); font-weight:600; padding-bottom:15px; margin-bottom:30px; letter-spacing:1px;} #sec03 ul li:nth-child(1):before{ content:'01';} #sec03 ul li:nth-child(2):before{ content:'02';} #sec03 ul li:nth-child(3):before{ content:'03';} #sec03 ul li strong{ font-size:32px; font-weight:600;} #sec03 ul li p{ margin-top:20px; font-weight:300; line-height:30px;} #sec04{ margin:100px 300px;} #sec04 dl dt{flex-basis: 32%;} #sec04 dl dd{ margin-left:30px;} #sec04 dl dt {background-color:#eeeff4} #sec04 dl dd {background-color:#067ba5; color:#fff;} #sec04 .area{ padding:130px 70px 70px 70px;} #sec04 h1{text-transform: uppercase; letter-spacing:0; padding-bottom:15px; background:#fff; color:#333; } #sec04 dl dt h2{ border-bottom:1px solid rgb(0,0,0,0.2);margin-bottom:20px; padding-bottom:35px;} #sec04 dl dd h2{ margin-bottom:35px;} #sec04 dl dt a{ color:#7a7c83;transition: all 0.3s;} #sec04 dl dt a:hover{ color:#0072bc;} #sec04 a+a{ margin-left:30px;} #sec04 dl dd a{ display:inline-block; padding:20px 30px; border:1px solid rgb(255,255,255,0.2) ;color:#fff;transition: all 0.3s;} #sec04 dl dd a:hover{ background:#fff; color:#067ba5} #sec04 dl dd a i{ margin-left:70px;} @media all and ( max-width: 1920px ){ #sec01 ul li .area h2{font-size:19px;} #sec01 ul li .area strong{ font-size:33px;} #sec01 ul li .area p{line-height:25px;} #sec01 ul li:before { bottom:70px; right:70px;} #sec03 dt{flex-basis:40%;} #sec03 dt .area{right:100px; bottom:130px;} #sec03 dd{ padding:130px 100px;} #sec03 dd h1{ font-size:40px;} #sec03 ul li strong{ font-size:27px;} #sec03 ul li p{line-height:23px;} #sec04{ margin:100px 200px;} } @media all and ( max-width: 1680px ){ #sec01 ul li .area{ padding:50px;} #sec04 {margin: 70px 100px;} } @media all and ( max-width: 1440px ){ } @media all and ( max-width: 1280px ){ #sec04 {margin: 70px 10px;} } @media all and ( max-width: 1024px ){ #sec01 ul li:nth-child(4){ display:none} #sec01 ul li {width: calc((100% / 3) - 1px);} #sec03 dl{ display:block;} #sec03 dt { text-align:center;padding:100px 0;} #sec03 dt .area{ position:relative; right:auto; bottom:auto;} #sec01 ul li .area{ padding:30px;} #sec03 dd { padding:70px 50px;} #sec03 dd h1{ margin-bottom:50px;} #sec03 dd ul {gap: 0 50px;} #sec03 dd li { width: calc((100% / 3) - 34px);} #sec04 dl{ display:block;} #sec04 dl dd{ margin:30px 0 0 0;} #sec04 .area {padding:70px 50px;} } @media all and ( max-width: 800px ){ } @media all and ( max-width: 640px ){ #sec01 ul{ display:block;} #sec01 ul li {width:100%} #sec01 ul li + li {border-left:none; border-top:1px #dce3e8 solid;} #sec01 ul li .area strong br{ display:none;} #sec01 ul li::before { bottom:20px; right:30px;} #sec03 dd ul { display:block;} #sec03 dd li { width:100%;} #sec03 dd li+li{ margin-top:50px;} #sec04 dl dd a{ position:relative; display:block;} #sec04 a + a {margin:15px 0 0 0;} #sec04 dl dt a+a{ margin-left:20px} #sec04 dl dd a i{ position:absolute; top:50%; margin:0; right:20px;transform: translateY(-50%);} } @media all and ( max-width: 480px ){ #sec01 ul li .area strong{ font-size:27px;} #sec03 dt .area h1{ font-size:21px;} #sec03 dt .area h1 span{ font-size:27px;} #sec03 dd { padding:50px 20px;} #sec03 dd h1{ font-size:30px;} #sec04 .area {padding:50px 30px;} }