@charset "utf-8";

.main {background: #ededed;}
.main_list {width: 1482px; margin: 0 auto; padding: 32px 0;}
.main_list > ul {font-size: 0;}
.main_list > ul > li {width: 33.33%; padding: 16px; display: inline-block; vertical-align: top; box-sizing: border-box; position: relative;}
.main_list > ul > li:nth-child(3n) {margin-right: 0;}

.main_list > ul > li > img {width: 100%;}
.main_list > ul > li img.over {display: none;}
.main_list > ul > li img.normal {display: block;}
.main_list > ul > li:hover img.over {display: block;}
.main_list > ul > li:hover img.normal {display: none;}
.main_list > ul > li a {background: none; border: 0; border-radius: 0; position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: auto; padding: 50px;}

/*.main_list > ul > li a {display: block; position: relative; border-radius: 25px; background: #fff; border: 1px solid #ababab; padding: 32px 45px; height: 290px; box-sizing: border-box;}*/
.main_list > ul > li .top {font-size: 0; display: block;}
.main_list > ul > li .top:after {content: ''; clear: both; display: block;}
.main_list > ul > li .top .icon_box {background: url(../img/main/ico_main01.png) no-repeat center/38px 30px; width: 38px; height: 30px; float: left;}
.main_list > ul > li .top .icon_box.teacher {background: url(../img/main/ico_main02.png) no-repeat center/40px 29px; width: 40px; height: 29px;}
.main_list > ul > li .top .icon_box.video {background: url(../img/main/ico_main03.png) no-repeat center/37px 28px; width: 37px; height: 28px;}
.main_list > ul > li .top .icon_box.note {background: url(../img/main/ico_main04.png) no-repeat center/26px 31px; width: 26px; height: 31px;}
.main_list > ul > li .top .icon_box.bell {background: url(../img/main/ico_main05.png) no-repeat center/26px 32px; width: 26px; height: 32px;}
.main_list > ul > li .top .icon_box.text {background: url(../img/main/ico_main06.png) no-repeat center/38px 34px; width: 38px; height: 34px;}
.main_list > ul > li .top .icon_box.band {background: url(../img/main/ico_main07.png) no-repeat center/34px; width: 34px; height: 34px;}
.main_list > ul > li .top .icon_box.gift {background: url(../img/main/ico_main08.png) no-repeat center/35px; width: 35px; height: 35px;}
.main_list > ul > li .top .icon_box.map {background: url(../img/main/ico_main09.png) no-repeat center/34px 34px; width: 34px; height: 34px;}
.main_list > ul > li .top .icon_box.blog {background: url(../img/main/ico_main10.png) no-repeat center/34px; width: 34px; height: 34px;}

.main_list > ul > li .top .plus_ico {background: url(../img/main/ico_main_plus.png) no-repeat center/28px; width: 28px; height: 28px; float: right;}

.main_list > ul > li .txt_box {position: absolute; left: 45px; bottom: 32px;}
.main_list > ul > li .txt_box span {display: block; font-size: 25px; font-weight: 300; color: #202a60;}
.main_list > ul > li .txt_box strong {display: block; font-size: 33px; color: #202a60;}

.slide_wrap {position: relative;}
.slide_wrap .swiper-button-next {background: url(../img/main/ico_slide_next.png) no-repeat center/24px; width: 24px; height: 24px; top: 37px; right: 23px; margin: 0;}
.slide_wrap .swiper-button-next.hide {opacity: .35;}
.slide_wrap .swiper-button-prev {background: url(../img/main/ico_slide_prev.png) no-repeat center/24px; width: 24px; height: 24px; top: 37px; left: 23px; margin: 0;}
.slide_wrap .swiper-button-prev.hide {opacity: .35;}
.slide_wrap img {width: 100%; border-radius: 25px; cursor: pointer;}
.slide_wrap .swiper-slide {position: relative;}
.slide_wrap .swiper-slide > div {position: absolute; right: 0; bottom:0; width: 0; height: 0; border: 0 solid transparent; border-right-width: 0px; border-left-width: 160px; border-bottom: 38px solid #ededed; font-size: 0;}

.main.mobile {}
.main.mobile .main_list > ul > li {width: 100%; padding: 0; margin-bottom: 15px; position: relative;}
.main.mobile .main_list > ul > li > img {width: 100%;}
.main.mobile .main_list > ul > li img.over {display: none;}
.main.mobile .main_list > ul > li img.normal {display: block;}
.main.mobile .main_list > ul > li:hover img.over {display: block;}
.main.mobile .main_list > ul > li:hover img.normal {display: none;}
/*.main.mobile .main_list > ul > li a {height: auto; padding: 25px 30px;}*/
.main.mobile .main_list > ul > li a {background: none; border: 0; border-radius: 0; position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: auto; padding: 25px 30px;}
.main.mobile .main_list > ul > li .txt_box {position: unset; padding-left: 20px;}
.main.mobile .main_list > ul > li .txt_box strong {font-size: 18px; line-height: 1.2;}
.main.mobile .main_list > ul > li .txt_box span {font-size: 14px; line-height: 1.2;}

.main.mobile .main_list > ul > li .top {display: inline-block; vertical-align: top;}
.main.mobile .main_list > ul > li .txt_box {display: inline-block; vertical-align: top;}
.main.mobile .plus_ico {background: url(../img/main/ico_main_plus.png) no-repeat center/28px; width: 28px; height: 28px; position: absolute; right: 20px; top: 20px; font-size: 0;}

@media screen and (max-width: 1750px) {
	.main_list {width: 100%; padding: 32px 40px; box-sizing: border-box;}
	.main_list > ul > li {width: 33.33%;}
}

@media screen and (max-width: 1250px) {
	.main_list > ul > li {width: 50%;}
	
}

@media screen and (max-width: 850px) {
	.main_list > ul > li .txt_box strong {font-size: 24px;}
	.main_list > ul > li .txt_box span {font-size: 20px;}
	.main_list > ul > li a {padding:30px;}
	.main_list > ul > li .txt_box {left: 30px;}
}

@media screen and (max-width: 650px) {
	.main_list > ul > li {width: 100%; padding: 10px;}
	.main_list > ul > li a {}
	.main_list {padding: 16px 15px;}
}