@charset "utf-8";
/**********
mainCell
***********/

.mainCell{background-color: #f3f3f3;padding-top: 70px;position: relative;margin-bottom: 30px;}
.mainCell ul,.mainCell li{list-style-type: none;margin: 0;padding: 0;display: block;box-sizing: border-box;}
.mainCell ul{display: grid;gap:20px;  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;grid-template-rows: 1fr 1fr ;margin-bottom: 70px;/* height: 500px; */}
.mainCell li{color: #fff;}
.mainCell li a{display: block;height: 100%;padding-left: 12.5%;padding-top: 13%;padding-bottom: 14.86%;box-sizing: border-box;position: relative;border-radius:25px ;background-color: #fff;transition:.25s ease-out}
.mainCell li b{font-size: 28px;display: block;font-weight: 700;margin-bottom: 12px;position: relative;z-index: 3;}
.mainCell li span{display: block;font-size: 18px;line-height: 1.2;position: relative;z-index: 3;}
.mainCell li a::before{display: block;content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-repeat: no-repeat;background-position: right bottom;z-index: 2;}
.mainCell li.d1 a{background: #e3e3e3 url(../img/main/ci_1.jpg) right bottom no-repeat;}
.mainCell li.d2 a{background: linear-gradient(135deg, #2f9ed3 5%, #5865d6 85%)}
.mainCell li.d2 a::before{background-image: url(../img/main/ci_2.png);}
.mainCell li.d3 a{background: linear-gradient(135deg, #08a2c3 10%, #07c5a6 95%)}
.mainCell li.d3 a::before{background-image: url(../img/main/ci_3.png);bottom: 4%;}
.mainCell li.d4 a{background: linear-gradient(135deg, #f18d8e 8%, #f4406a 100%)}
.mainCell li.d4 a::before{background-image: url(../img/main/ci_4.png);}
.mainCell li.d5 a{background: linear-gradient(135deg, #04beac 5%, #6373d9 95%)}
.mainCell li.d5 a::before{background-image: url(../img/main/ci_5.png);}
.mainCell li.d6 a{background: linear-gradient(135deg, #6b2ded 5%, #c64add 95%)}
.mainCell li.d6 a::before{background-image: url(../img/main/ci_6.png);}
.mainCell li.d7 a{background: linear-gradient(235deg, #6b2eed 10%, #6f7be6 100%)}
.mainCell li.d7 a::before{background-image: url(../img/main/ci_7.png);}
.mainCell li.d8 a::before{background-image: url(../img/main/tutor.png);top: auto/* 18px */;right: 24px;left: auto;bottom: -30px;width: 264px;height: 253px;}

.mainCell li a::after{display: block;content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0; background:linear-gradient(145deg, #fff 10%, rgba(0,0,0,0.52) 60%);opacity: .0;border-radius:25px;z-index: 1;transition:.25s ease-out}
.mainCell li a:hover::after{opacity: .3;}
.mainCell li a:hover{  box-shadow: 1px 3px 10px 0 rgba(33,33,33,.25); }

.mainCell li.d1{  grid-column: 1 / span 2;  grid-row: 1;color: #000;}
.mainCell li.d8{  grid-column: 4 / span 2;  grid-row: 2;color: #000;}
.mainCell li.d1 b,
.mainCell li.d8 b{font-size: 34px;}
.mainCell li.d1 a,
.mainCell li.d8 a{padding-left: 8.5%;padding-top: 8.5%;}
@media screen and (max-width:1200px) {
.mainCell ul{gap:10px}
.mainCell li.d8 a::before{width: 211px;height: 202px;background-size: auto 100%;bottom: -24px;right: 0;}
}
@media screen and (max-width:1024px) {
.mainCell {padding-top: 30px;}
.mainCell ul{grid-template-columns: 1fr 1fr 1fr ;grid-template-rows: 1fr 1fr 1fr 1fr  ;}
.mainCell li a{padding-bottom:10%;padding-left: 10%;}
.mainCell li.d1{  grid-column: 1 / span 3;  grid-row: 1;}
.mainCell li.d8{  grid-column: 1 / span 3;  grid-row: 4;}
}
@media screen and (min-width:681px) and (max-width: 1024px;) {
.mainCell li.d1 b br, .mainCell li.d8 b br{display: none;}
.mainCell li.d1 a,
.mainCell li.d8 a{padding-top: 4%;padding-left: 3.3%;}
}
@media screen and (max-width:680px) {
.mainCell li b{font-size: calc(21px + (28 - 21) * ((100vw - 300px) / (680 - 300)));margin-bottom: 5px;}
.mainCell li span{font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (680 - 300)))}
.mainCell li.d1 b,
.mainCell li.d8 b{font-size: calc(25px + (34 - 25) * ((100vw - 300px) / (680 - 300)));}
.mainCell ul{grid-template-columns: 1fr 1fr  ;grid-template-rows: 1fr 1fr 1fr 1fr 1fr  ;margin-bottom: 20px;}
.mainCell li.d1{  grid-column: 1 / span 2;  grid-row: 1;}
.mainCell li.d8{  grid-column: 1 / span 2;  grid-row: 5;}
.mainCell li a{padding-bottom:6%;}
.mainCell li.d1 a,
.mainCell li.d8 a{padding-top: 7%;padding-left: 5%;}
}
@media screen and (max-width:520px) {
.mainCell{padding-top: 15px;}
.mainCell li a::after{border-radius:15px;}
.mainCell li a{border-radius:15px;padding-bottom: 8.2%; }
.mainCell li.d2 a::before,
.mainCell li.d3 a::before,
.mainCell li.d4 a::before{background-size:85% auto;bottom: 4%;}
.mainCell li.d5 a::before,
.mainCell li.d6 a::before,
.mainCell li.d7 a::before{background-size:100% auto;}
.mainCell li.d8 a::before{width: 147px;height: 141px;background-size: auto 100%;bottom: -17px;right: 10px;}
.mainCell li.d1 a{background-size:  100% auto;}

}
/**********
mainCell wide
***********/
.mainCell .wide{border-radius:25px ;overflow: visible;color: #fff;background-color: #00A2D0;height: 200px;position: relative;bottom: -30px;padding-left: 60px;display: flex;flex-direction: column;justify-content: center;background: linear-gradient(125deg, #00B0D7 0%, #00A2D1 80%)}
.mainCell .wide::before{display: block;content: '';position: absolute;bottom: 0;width: 472px;height: 243px;left: calc(50% - 100px);background: url(../img/main/driving_lady.png) 0 0 no-repeat;}/* 471 380 */
.mainCell .wide dt{font-size: 40px;font-weight: 800;margin-bottom: 15px;}
.mainCell .wide p{font-size: 18px;font-weight: 400;line-height: 1.2;position: relative;}
.mainCell .wide p span{display: block;}
.mainCell .wide a{display: block;position: absolute;font-weight: 700;right: 40px;line-height: 50px;top: 50%;margin-top: -25px;padding-right: 35px;transition:.25s ease-out}
.mainCell .wide a::after{display:block;content:'';border-style: solid;border-color: #fff; border-width:  3px 0 0 3px  ;    padding: 7px;transform: rotate(135deg);position: absolute;top: 16px;right: 0;}
.mainCell .wide a:hover{padding-right: 20px;}


@media screen and (max-width:1200px) {
.mainCell .wide{padding-left: 4%;}
.mainCell .wide a{right: 3%;padding-right: 20px;}
.mainCell .wide::before{right: calc(4% + 130px);left: auto;}
}
@media screen and (max-width:1024px) {
.mainCell .wide{height: 160px;}
.mainCell .wide dt{font-size: 30px;}
.mainCell .wide p{font-size: 16px;}
.mainCell .wide::before{height: 188px;width: 345px;background-size:100% auto;}
}
@media screen and (max-width:800px) {
.mainCell .wide{height: 120px;padding-left: calc(40/500 * 100%);}
.mainCell .wide p{display: none;}
.mainCell .wide dt{font-size: 28px;margin-bottom: 0;padding-top: 5px;}
.mainCell .wide a{position: relative;right: auto;top: auto;margin-top: 0;line-height: 40px;display: inline-block;}
.mainCell .wide a::after{padding: 4px;top: 14px;}
.mainCell .wide::before{height: 140px;background-size:auto 100%;width: 176px;background-position: 0 calc(100% + 5px);right: 7%;}
}
@media screen and (max-width:450px) {
.mainCell .wide{height: calc(150/500 * 100vw);border-radius:15px ;}
.mainCell .wide::before{height: calc(146/500 * 100vw);background-size:auto 100%;width: calc(180/500 * 100vw);right: 3%;}
.mainCell .wide dt{font-size: calc(20px + (28 - 20) * ((100vw - 300px) / (500 - 300)))}
}
/**********
cosPreview
***********/
.cosPreview{display: flex;align-items: center;justify-content: space-between;padding: 100px 0;}
.cosTxt span{display: block;}
.cosTxt h3{font-size: 52px;margin-bottom: 15px;font-weight: 800;}
.cosTxt p{font-size: 18px;font-weight: 500;line-height: 1.2;color: #333;}
.cosLst{width: calc(860/1280 * 100%);display: flex;align-items: center;justify-content: space-between;gap:20px}
.cosLst dl{border-radius:25px ;overflow: hidden;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 230px;background-color: #f7f7f7;flex:1;color: #333;}
.cosLst dt{text-align: center;font-size: 80px;font-weight: 900;padding-bottom: 20px;}
.cosLst dd a{display: block;text-align: center;line-height: 35px;font-weight: 400;position: relative;}
.cosLst dd a:hover{color: #ccc;}
.cosLst dl:hover{background: linear-gradient(125deg, rgba(97,109,209,1) 0%, rgba(48,158,211,1) 80%);color: #fff;}
.cosLst dd a img{vertical-align: middle;display: inline-block;margin-right: 3px;}
.cosLst dl:hover dd a img{filter: contrast(0%) brightness(500%);}

@media screen and (max-width:1024px) {
.cosPreview{padding: 60px 0;}
.cosTxt h3{font-size: 40px;margin-bottom: 5px;}
.cosTxt p{font-size: 16px;}
.cosLst {width: calc(100% - 250px);gap:10px;}
.cosLst dt{font-size: 60px;padding-bottom: 10px;}
.cosLst dl{height: 190px;}
}
@media screen and (max-width:820px) {
.cosPreview{display: block;}
.cosLst {width: auto;gap:10px;padding-top: 20px;}
}
@media screen and (max-width:520px) {
.cosPreview{padding-bottom:30px}
.cosLst{display: block;}
.cosLst dl{flex-direction: row;height: 80px;justify-content: space-between;margin-bottom: 10px;border-radius:15px ;}
.cosLst dt{font-size: 32px;padding-left: 10%;padding-bottom: 0;}
.cosLst dd{display: flex;width:80%;}
.cosLst dd a{font-size: 18px;flex:1}
}
/*********
mainIcons
**********/
.mainIcons{padding: 0  1%;margin-bottom: 20px;height: 175px;border: 1px solid #ddd;border-radius:25px ;overflow: hidden;display: flex;justify-content: space-between;align-items: center;}
.mainIcons a{display: block;position: relative;height: 100px;flex:1;text-align: center;line-height: 1.15;font-size: 18px;}
.mainIcons a::before{display: block;content: '';height: 55px;background-repeat: no-repeat;background-position: center 0;}
.mainIcons a::after{display: block;content: '';position: absolute;width: 1px;top: 0;height: 100px;right: 0;background-color: #eee;}
.mainIcons a:last-of-type::after{display: none;}
.mainIcons a span{display: block;}
.mainIcons a:hover{font-weight: 500;}
.mainIcons a:nth-of-type(1)::before{background-image: url(../img/main/icons_1.png);background-position: center 8px;}
.mainIcons a:nth-of-type(2)::before{background-image: url(../img/main/icons_2.png);background-position: center 15px}
.mainIcons a:nth-of-type(3)::before{background-image: url(../img/main/icons_3.png);background-position: center 9px}
.mainIcons a:nth-of-type(4)::before{background-image: url(../img/main/icons_4.png);background-position: center 8px}
.mainIcons a:nth-of-type(5)::before{background-image: url(../img/main/icons_5.png);background-position: center 9px}
.mainIcons a:nth-of-type(6)::before{background-image: url(../img/main/icons_6.png);background-position: center 7px}

@media screen and (max-width:820px) {
.mainIcons{padding: 0 ;margin-bottom: 20px;height: auto;border: 0;flex-wrap: wrap;gap:0;flex-direction: row;border-radius:0;margin-left: -1.33%;}
.mainIcons a{padding: 20px 0;height: auto;width: 32%;border: 1px solid #eee;border-radius:25px;flex:inherit;margin-left: 1.33%;margin-bottom: 1.3%;box-sizing: border-box;}
.mainIcons a::after{display: none;}
}
@media screen and (max-width:450px) {
.mainIcons a{border-radius:15px;}
}
@media screen and (max-width:380px) {
.mainIcons a{width: 48.67%;}
}

/*********
mainNews
**********/
.mainNews{padding: 50px  4.6% 35px;border: 1px solid #ddd;border-radius:25px ;overflow: hidden;display: flex;justify-content: space-between;}
.mainNews a.dot{position: absolute;top:0;right: 0;background-color: #000;width: 4px;height: 4px;border-radius:2.5em ;border: 20px solid #fff;text-indent: -999em;}
.mainNews a.dot::before,.mainNews a.dot::after{content: '';background-color: #000;width: 4px;height: 4px;border-radius:2px;display: block;position: absolute;top: 0;}
.mainNews a.dot::before{left: 8px;}
.mainNews a.dot::after{left: -8px;}
.newsLst{position: relative;width: 46%;}
.newsLst ul{list-style-type: none;padding: 0;margin: 0;border-top: 2px solid #000;}
.newsLst ul li{list-style-type: none;padding: 0;margin: 0;position:relative;border-bottom: 1px solid #e1e2e3;}
.newsLst ul li:last-child{border-bottom: none;}
.newsLst ul li a{display:block;overflow:hidden;transition:.25s ease-out;font-size: 20px;font-weight: 400;height: 78px;position: relative;display: flex;flex-direction: column;justify-content: center;}
.newsLst ul li a span{display: block;}
.newsLst ul li a em{font-style: normal;font-size: 14px;padding-top: 10px;display: block;}
.newsLst ul li a em i::before{font-size: 13px;vertical-align: middle;display: inline-block;margin-right: 2px;}
.newsLst ul li a em i.fa-leaf::before{color: #3aac16;}
.newsLst .newsTle{font-size: 24px;margin-bottom: 20px;padding-top: 10px;font-weight: 800;}

@media screen and (min-width:781px) and (max-width:1024px) {
.mainNews {padding-top: 30px;padding-bottom: 20px;}
.newsLst ul li a{font-size: 18px;}

}
@media screen and (max-width:780px) {
.mainNews{display: block;border: none;border-radius:0;padding: 0;}
.newsLst{width: auto;border: 1px solid #ddd;border-radius:25px ;padding: 30px 6% 15px;margin-bottom: 20px;}
.mainNews a.dot{right: 7%;top: 15px;}
.newsLst .newsTle{font-size: 22px;padding-top: 0;}
.newsLst ul li a{display:block;font-size: 19px;height: auto;padding: 20px 0;}
}
@media screen and (max-width:450px) {
.newsLst {border-radius:15px;}
}
/**********
mainPhoto
**********/
.mainPhoto{overflow: hidden;padding: 100px 0 ;}
.mainPhoto ul,.mainPhoto li{list-style-type: none;margin: 0;padding: 0;}
.mainPhoto ul{margin-left: -20px;}
.mainPhoto li{width: 305px;margin-left: 20px;}
.mainPhoto li a{display: block;position: relative;height:415px;}
.mainPhoto li a::before{display: block;content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius:25px;border: 1px solid #e0e0e0;z-index: 0;background-color: #f9f8f7;}
.mainPhoto li ._img{display: block;overflow: hidden;height: 305px;font-size: 0;position: relative;z-index: 1;border-radius: 25px 25px 0 0 ;}
.mainPhoto li ._img img{display: block;  object-fit: cover;width: 100%;height: 100%;}
.mainPhoto li ._txt{border: 1px solid #e0e0e0;border-top: 0;border-radius:0 0 25px 25px ;height: 110px;padding: 20px 25px;box-sizing: border-box;font-size: 0;display: block;position: relative;z-index: 1;background-color: #fff;}
.mainPhoto li ._txt span{font-size: 20px;line-height: 1.4;display: -webkit-box;overflow: hidden; text-overflow: ellipsis;-webkit-box-orient: vertical; -webkit-line-clamp: 2;letter-spacing: -0.5px;}

@media screen and (max-width:1200px) {
.mainPhoto{padding: 60px 0 ;}
}
@media screen and (max-width:520px) {
.mainPhoto ul{margin-left: calc(-20/500 * 100vw);}
.mainPhoto li{width: calc(305/500 * 100vw);margin-left:  calc(20/500 * 100vw);}
.mainPhoto li a{height: calc(415/500 * 100vw);}
.mainPhoto li ._img{height: calc(305/500 * 100vw);border-radius: 15px 15px 0 0}
.mainPhoto li ._txt{height: calc(115/500 * 100vw);padding: 10px 5% 5px;border-radius:0 0 15px 15px ;}
.mainPhoto li ._txt span{font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (500 - 300)))}

}



/**********
mainMap
**********/

.mainMap{display: flex;align-items: center;justify-content: space-between;flex-direction: row;max-width: 1280px;margin: 0 auto 100px;width: 95%;}
.mapTxt {letter-spacing: -1px;}
.mapTxt h3{color: #999;font-weight: 500;font-size: 20px;margin-bottom: 25px;}
.mapTxt dt{font-size: 45px;margin-bottom: 25px;line-height: 1.1;font-weight: 500;}
.mapTxt dt b{display: block;font-weight: 800;}
.mapTxt dd p{font-size: 22px;line-height: 1.5;}
.mapTxt dl{margin-bottom: 50px;}
.mapTxt a{line-height: 60px;color: #fff;background-color: #111;width: 225px;padding-left: 25px;font-size: 21px;position: relative;display: block;font-weight: 500;letter-spacing: 0;}
.mapTxt a::after{position: absolute;display: block;content: '';width: 33px;height: 2px;background-color: #ccc;right: 30px;top: 29px;}
.mainMap .mapArea{position: relative;width: calc(760/1280 * 100%);}
.mapSizer{position: relative;height: 0;padding-top: calc(490/760 * 100%);width: 100%;border-radius:25px ;overflow: hidden;}
.mapSizer iframe{position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}

@media screen and (max-width:1024px) {
.mapTxt h3{margin-bottom: 10px;}
.mapTxt dt{font-size: 40px;margin-bottom: 10px;}
.mapTxt dd p{font-size: 16px;}
.mapTxt dl{margin-bottom: 20px;}
}
@media screen and (max-width:820px) {
.mainMap{display: block;}
.mainMap .mapArea{width: auto;padding-top: 30px;}

}
@media screen and (min-width:510px) and (max-width:820px) {
.mapTxt dt b,.mapTxt dd p{display: inline;}
}
@media screen and (max-width:500px) {
.cosTxt h3,
.mapTxt dt{font-size: 34px;}
}