/* home */
.visual {position: relative; width:100%; height:56.25vw; background-color:#0a1a30}
.visual video {opacity: .25}
.visual .visualBox {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10}
.visual .swiper-container {position:relative; width: 1000px; height: 50px; margin-bottom: 30px; border: 3px solid #5b5e84; padding-left: 60px; border-radius: 30px; background-color:rgba(7,14,21,.5);}
.visual .swiper-container::before {content: ''; display: block; position: absolute; top: 6px; left: 20px; width: 30px; height: 30px; background: url("../images/ico.png") 0 0; background-size: auto 90px}
.visual .swiper-container .swiper-slide {display: flex; align-items: center; color: #fff}

.visual .quickBox {width: 1000px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 190px 190px 80px; gap:30px}
.visual .quickBox dl {position: relative; padding: 30px 5% 0 35%; border-radius: 10px; background: #fff; overflow: hidden; cursor: pointer}
.visual .quickBox dl::before {content: ''; display: block; position: absolute; left: -10px; top: 0px; width: 40%; height: 190px; background-image: url("../images/quick_bg.png"); background-size: auto 400px;}
.visual .quickBox dl:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2;}
.visual .quickBox dl:nth-child(1)::before {background-position: -80px 0} 
.visual .quickBox dl:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2;}
.visual .quickBox dl:nth-child(2)::before {background-position: -300px -10px} 
.visual .quickBox dl:nth-child(3) { grid-column: 1 / 2; grid-row: 2 / 3;}
.visual .quickBox dl:nth-child(3)::before {background-position: -65px -190px} 
.visual .quickBox dl:nth-child(4) { grid-column: 2 / 3; grid-row: 2 / 3;}
.visual .quickBox dl:nth-child(4)::before {background-position: -500px 0} 
.visual .quickBox dl:nth-child(5) { grid-column: 1 / 3; grid-row: 3 / 4; padding-top: 0}
.visual .quickBox dl:nth-child(5)::before { width: 250px; background-position: -250px -230px} 
.visual .quickBox dl:nth-child(5):hover::before { left: -10px; top: 0px } 
.visual .quickBox dl:nth-child(5) dt {display: flex; height: 80px; align-items: center}
.visual .quickBox dl:nth-child(5) button {bottom: 25px}
.visual .quickBox h2 {font-size: 1.5em}
.visual .quickBox dt p {margin-bottom: 10px}
.visual .quickBox dd p span {color: var(--red)}
.visual .quickBox label {color: #324fb7; font-family:'S-CoreDream-5Medium'; margin-right: 5px}
.visual .quickBox label::after {content: '/'; color: #ccc; font-size: .75em; margin-left: 5px; font-family:'S-CoreDream-2ExtraLight'}
.visual .quickBox label:last-child::after {display: none}
.visual .quickBox button {display: flex; justify-content: flex-start; flex-wrap: wrap; position: absolute; bottom: 20px; right: 20px; width: 30px; height: 30px; border-radius: 15px; border: 3px solid var(--red); background-color: #fff; overflow: hidden}
.visual .quickBox button::before {content: ''; width: 30px; height: 24px; background-image: url("../images/ico.png"); background-position: -3px -33px; background-size: auto 90px}
.visual .quickBox dl:hover {background: #e9f1fe}
.visual .quickBox dl:hover::before {left: 0; top: 5px; transition: all ease .1s}
.visual .quickBox dl:hover button {width: 120px; transition: all ease .1s;}
.visual .quickBox dl:hover button::before {background-position: 0 -33px; transition: all ease .1s;}

.visual .callCenter {margin-top: 50px; font-family: 'S-CoreDream-5Medium'; color: #fff;}
.visual .callCenter dl {display: flex; justify-content: center; align-items: center; flex-direction: column; row-gap: 10px; margin-bottom: 20px;}
.visual .callCenter dt {padding: 5px 10px; border-radius: 10px; display: inline-block; background: #072aa8; font-size: 1.25em;}
.visual .callCenter dd { font-size: 1em; display: flex; column-gap: 50px;}
.visual .callCenter dd label {opacity: .8;}
.visual .callCenter li { font-size: 1.5em; text-align: center;}
.visual .callCenter a {text-decoration: underline; color: #fae100;}

section {padding-bottom: 50px}

.home article {clear:both; padding: 0}
.home .cArea {width:1160px; margin:0 auto}
.home .fair .cArea { display: flex; justify-content: center; align-items: center; padding: 50px 0}
.home .fair .cArea .text {width: 50%; padding-right: 10%}
.home .fair .cArea .text li { margin-bottom: 50px}
.home .fair .cArea .text li p { text-align: left; word-break: keep-all; margin-bottom: 20px}
.home .fair .cArea .text li button {width: 100%; height: 60px; border: none; border-radius: 20px; color: #fff; background: #0c3d83}
.home .fair .cArea .image {width: 50%; }
.home .fair .cArea .image li {border-radius: 20px; overflow: hidden}
.home .fair .cArea .image img {width: 100%; }

.home .overview {background: #eceff5}
.home .overview .cArea {width:1160px; display: flex; margin:0 auto; column-gap: 55px;}
.home .overview > div dl {cursor:pointer}
.home .overview > div dl dt {position: relative; width: 350px; height: 350px; margin-bottom: 10px; border-radius: 15px; overflow: hidden}
.home .overview > div dl dt label {position: absolute; left: 10%; bottom: 10%; color: #fff; font-size: 2em; font-family: 'S-CoreDream-5Medium'; z-index: 100}
.home .overview > div dl dt figure {opacity: .5}
.home .overview > div dl dt::after { content: ''; position: absolute; bottom: -100px; width: 100%; height: 200px; background: linear-gradient(0deg, #3a3b4680, #00000000); z-index: 10}
.home .overview > div dl dt:hover::after { bottom:0; transition: all ease .2s;}
.home .overview > div dl dt:hover figure {opacity: .75}
.home .overview > div dl:nth-child(1) dt {background: linear-gradient(#0b5359, #15888c)}
.home .overview > div dl:nth-child(2) dt {background: linear-gradient(#434a0a, #794f2d)}
.home .overview > div dl:nth-child(3) dt {background: linear-gradient(#2d70b4, #2d33b4)}
.home .overview > div dl dd {width: 350px; padding: 10px; border-radius: 10px; background: #fff}
.home .overview > div dl dd h3 {color: #143e8c; font-size: 1.25em; font-family: 'S-CoreDream-5Medium'}
.home .overview > div dl dd p {color: #808080}

.home .choice .text {margin-bottom: 30px}
.home .choice .cArea ul {  display: flex;  flex-wrap: wrap;}
.home .choice .cArea ul li { position: relative; border-radius: 20px; overflow: hidden}
.home .choice .cArea ul li::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; transition: 0.4s; opacity: .25}
.home .choice .cArea ul li:nth-of-type(1) { width: 100%; height: 280px; margin-bottom: 24px; padding: 95px 50px; background: #2a3349}
.home .choice .cArea ul li:nth-of-type(1)::before { background: url("../images/m11.jpg")no-repeat center / cover;}
.home .choice .cArea ul li:nth-of-type(1) i { background-position: 0 0;}
.home .choice .cArea ul li:nth-of-type(2) { width: calc(50% - 12px); height: 240px; padding: 70px 50px; background: #655a5d}
.home .choice .cArea ul li:nth-of-type(2)::before {background: url("../images/m12.jpg")no-repeat center / cover;}
.home .choice .cArea ul li:nth-of-type(2) i {background-position: -45px 0;}
.home .choice .cArea ul li:nth-of-type(3) { width: calc(50% - 12px); height: 240px; margin-left: 24px; padding: 70px 50px; background: #475e64;}
.home .choice .cArea ul li:nth-of-type(3)::before {background: url("../images/m13.jpg")no-repeat center / cover}
.home .choice .cArea ul li:nth-of-type(3) i { background-position: -90px 0;}
.home .choice .cArea ul li:hover::before {left: -5%; top: -5%; width: 110%; height: 110%;}
.home .choice .cArea ul i { position: absolute; width: 45px; height: 45px; left: 30px; background-image: url("../images/m_icon.png"); background-size: auto 45px}
.home .choice .cArea ul dl { position: absolute; display: inline-block;  vertical-align: top; width: calc(100% - 72px);  padding-left: 30px;  box-sizing: border-box; z-index: 10}
.home .choice .cArea ul dl dt { font-size: 1.875em; color: #fff; letter-spacing: 0em; font-family:'S-CoreDream-5Medium';}
.home .choice .cArea ul dl dd { font-size: 1.125em; color: #fff; letter-spacing: 0em; font-family:'S-CoreDream-3Light';  margin-top: 10px;}

.home footer {display: block;}

footer {display: none;}

.fade-up { opacity: 0; transform: translateY(100px); transition: all .5s ease-out;}
.show { opacity: 1; transform: translateY(0);}


/* mobile */
@media only screen and (max-width:568px){    
    .visual .swiper-container {width: calc(100% - 40px); height: 40px; padding-left:40px}
    .visual .swiper-container::before {top: 2px; left: 5px;}
    .visual .swiper-container .swiper-slide a {width: calc(100% - 60px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden}
    .visual .quickBox {width: calc(100% - 40px); grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 23vw) 16vw; gap: 10px; font-size: 14px}
    .visual .quickBox h2 {font-size: 1.25em}
    .visual .quickBox dl {display:flex; flex-direction: column; justify-content: center; padding: 0 0 0 100px}
    .visual .quickBox dl:nth-child(1) {grid-column: 1 / 3; grid-row: 1 / 2}
    .visual .quickBox dl:nth-child(2) {grid-column: 1 / 3; grid-row: 2 / 3}
    .visual .quickBox dl:nth-child(3) {grid-column: 1 / 3; grid-row: 3 / 4}
    .visual .quickBox dl:nth-child(4) {grid-column: 1 / 3; grid-row: 4 / 5}
    .visual .quickBox dl:nth-child(5) {grid-column: 1 / 3; grid-row: 5 / 6}
    .visual .quickBox dl::before {top: auto; bottom: 0; width: 120px; height: 120px; background-size: auto 260px}
    .visual .quickBox dl:nth-child(1)::before {background-position: -40px 0}
    .visual .quickBox dl:nth-child(2)::before {background-position: -200px 0}
    .visual .quickBox dl:nth-child(3)::before {background-position: -40px -130px}
    .visual .quickBox dl:nth-child(4)::before {background-position: -325px 5px}
    .visual .quickBox dl:nth-child(5)::before {background-position: -135px -95px; width: 90px; height: 90px; background-size: auto 200px}
    .visual .quickBox dl:nth-child(5) dt {align-items: center;}
    .visual .quickBox dl:nth-child(5) h2 {width: 75%; font-size: 1.125em}
    .visual .quickBox dt { display:flex; justify-content: flex-start; align-items: baseline; column-gap: 10px}
    .visual .quickBox dt p {margin-bottom: 0}
    .visual .quickBox dd p {width: 75%;}
    .visual .quickBox dl:hover {background-color: #fff}
    .visual .quickBox dl:hover::before {left: 0; top: auto; bottom: 0; transition: all ease .1s}
    .visual .quickBox dl button {width: 100px; transition: all ease .1s; zoom:.8}
    .visual .quickBox dl button::before {background-position: 0 -33px; transition: all ease .1s;}
    .visual .quickBox label::after {font-family: 'S-CoreDream-5Medium'}
    .visual video {object-fit: cover}
    .visual .callCenter {width: 90%; margin-top: 20px; display: flex; flex-direction: column; text-align: center; font-size: 12px;}
    .visual .callCenter dd {flex-direction: column;}
    .visual .callCenter li {font-size: 1.25em;}
    
    .home .cArea {width: 100%}
    .home {font-size: .875em}
    .home article {padding: 0}
    .home .fair .cArea {width: calc(100% - 20px); padding: 20px 0; flex-direction: column-reverse}
    .home .fair .cArea .image {width: 100%; }
    .home .fair .cArea .text {width: 100%; padding-right: 0}

    .home .overview .title {width: 75%; margin: 0 auto;}
    .home .overview .cArea {width: calc(100% - 40px); flex-direction: column; row-gap: 20px}
    .home .overview .cArea dl {display: flex; border-radius: 10px; background: #fff}
    .home .overview .cArea dl dt {width: 30%; height: 30vw; margin: 5px}
    .home .overview .cArea dl dt figure img {width: 100%; height: 100%; object-fit: cover}
    .home .overview .cArea dl dd {width: 70%; background: none}
    .home .overview > div dl dd h3 {display: none}
    .home .overview > div dl dt figure {width: auto; height: auto;}
    .home .overview > div dl dt label {font-size: 1.5em}
    
    .home .choice .text p {display: inline}
    .home .choice .cArea {width: calc(100% - 20px)}
    .home .choice .cArea ul li:nth-of-type(1) {width: 100%; height: 35vw; padding: 10px; margin-bottom: 10px}
    .home .choice .cArea ul li:nth-of-type(2) {width: 100%; height: 35vw; padding: 10px; margin-bottom: 10px}
    .home .choice .cArea ul li:nth-of-type(3) {width: 100%; height: 35vw; padding: 10px; margin-left: 0}
    .home .choice .cArea ul dl {top: 0; width: 90%; height: 100%; padding-left: 50px; display: flex; flex-direction: column; justify-content: center; font-size: .875em;}
    .home .choice .cArea ul dl dt {font-size: 1.5em}
    .home .choice .cArea ul dl dd br {display: none}
    .home .choice .cArea ul i {top: 40px; left: 10px}
}

@media only screen and (max-width:360px){
    .visual .quickBox {grid-template-rows: repeat(4, 20vw) 15vw; gap: 10px;}
    .visual .quickBox dl {padding: 12px 0 0 80px}
    .visual .quickBox dt {flex-direction: column}
    .visual .quickBox dd p {display: none}
}