@charset "utf-8";

.loading {position:fixed; z-index:1; width:100%; height:100%}
.loading .box {position:relative; float:left; width:25%; height:100%; overflow:hidden}
.loading .box span {position:absolute; right:0; width:100%; height:100%; background:#000 }

.main_list_wrap {position:fixed; width:100%; height:100%; background:#000}
.main_list_item {position:relative; float:left; width:25%; height:100%; -webkit-transition:.3s; transition:.3s}
.main_list_item .item_inner {position:relative; display:table; height:100%; width:100%; text-align:center}
.main_list_item .bg {position:absolute; width:100%; height:100%; opacity:.5; background-size:cover; background-attachment:fixed; transition:.3s}
.main_list_item.item1 .bg {background-image:url('/img/main_list_bg01.jpg'); background-position:top left}
.main_list_item.item2 .bg {background-image:url('/img/main_list_bg02.jpg'); background-position:top center}
.main_list_item.item3 .bg {background-image:url('/img/main_list_bg03.jpg'); background-position:top center}
.main_list_item.item4 .bg {background-image:url('/img/main_list_bg04.jpg'); background-position:top right}
.main_list_item.open {width:34%}
.main_list_item.open .bg {opacity:1}
.main_list_item.narrow {width:22%}
.main_list_item .tit {display:table-cell; vertical-align:middle}
.main_list_item .tit h1 {display:inline-block; position:relative; font-size:43px; color:#fff}
.main_list_item .tit h1 span {position:relative}
.main_list_item .tit h1:before {position:absolute; right:-12px; top:-5px; width:32px; height:20px; border-radius:50%; background:#a1e5f8; transform:rotate(35deg); content:''}
.main_list_item.item2 .tit h1:before {background:#0c75a6}
.main_list_item.item3 .tit h1:before {background:#2cc39e}
.main_list_item.item4 .tit h1:before {background:#74e3d9}
.main_list_item .tit h2 {margin-top:27px; font-size:18px; color:#fff}
.main_list_item .tit h2 a {margin:0 10px; color:#fff}
.main_list_item .tit h2 a:hover {border-bottom:2px solid #fff}
.main_list_item .icon_plus {position:absolute; bottom:290px; left:50%; width:70px; height:1px; margin-left:-35px; background:#fff}
.main_list_item .icon_plus:after {position:absolute; width:100%; height:100%; background:#fff; transform:rotate(90deg); content:''}
.main_list_item.open .icon_plus {-webkit-transform:rotate(180deg); transform:rotate(180deg); -webkit-transition:.5s; transition:.5s}

@media screen and (max-width:1750px){
	.main_list_item.item3 .tit h1 {width:210px}
	.main_list_item.item3 .tit h1:before {top:-3px; right:4px}

}