@charset "utf-8";
.main_section{position: relative; padding:7em 0}
.section_inner{max-width:1440px; margin:0 auto}
.main_section1{padding:0; position: relative;}

.bg_b{background:url('/common/img/main/main_vi6.jpg') no-repeat center; background-size:cover}

.mb1{margin-bottom:1em;}

.flex > div{z-index: 999;}
.main_left{width:50%; margin-right:2%;}
.bg_color{position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7)}
.bg_color1{position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3)}
.main_left p{position: relative;}
.main_left p:after{content:''; display:block; position: absolute; top:50px; left:50px; width:100%; height:100%; background:#000; z-index: 
-1;}
.main_left p img{width:100%}
.main_right{width:50%; margin-left:5%;}
.main_right{color:#fff}
.main_right h2{font-size:2.6rem; font-weight:600; margin-bottom:1em}
.main_right p{line-height:1.2;}
.main_right span{display:inline-block; margin-top:3em; border:1px solid #fff; transition:.5s}
.main_right span a{font-size:1.2rem; font-weight:600; color:#fff; display:block; padding:15px 30px;}
.main_right span:hover{background:#fff; transition:.5s}
.main_right span:hover a{color:#000 !important}
.main_right span i{font-weight:600; font-size:20px; vertical-align:middle;}

.main_ul h2{display:flex; align-items:center; font-size:2rem; font-weight:600; margin-bottom:1em; color:#fff; justify-content:space-between}
.main_ul h2 i{cursor: pointer;}
.main_ul{}
.main_ul > ul > li{width:33.333%; margin-right:1%;}
.main_ul > ul > li:last-child{margin-right:0;}
.main_ul > ul > li ul{border-top:2px solid #fff; border-bottom:2px solid #fff;  box-sizing:border-box}
.main_ul > ul > li ul li{border-bottom:1px solid #ddd; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main_ul > ul > li ul li:last-child{border-bottom:0}
.main_ul > ul > li ul li a{display:flex; align-items:center; justify-content:space-between; color:#fff; padding:1em 0; box-sizing:border-box;}
.main_ul > ul > li ul li:hover a{color:#999}
.main_ul > ul > li ul li a span{color:#888;}

.main_ul > ul > li:nth-child(2){position: relative;overflow:hidden;}
.main_ul > ul > li:nth-child(2):hover img{transform:scale(1.3); transition:.5s; z-index: -1;}
.main_ul > ul > li:nth-child(2):hover .li_p_bg{background:rgba(0,0,0,0.6); transition:.5s;}
.main_ul > ul > li:nth-child(2) img{width:100%; height:100%; transition:.5s; z-index: -1;}
.li_p_bg{position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index: 1; transition:.5s;}
.main_ul > ul > li:nth-child(2) div{z-index:999; position: absolute; top:0; left:0; color:#fff; display:flex; align-items:flex-start; justify-content:center; width:100%; height:100%; flex-direction:column; padding:4em; box-sizing:border-box; text-align:center}
.main_ul > ul > li:nth-child(2) div p{font-size:1.8rem; font-weight:600; text-align:center; margin:0 auto 1em auto;}
.main_ul > ul > li:nth-child(2) div span{display:block; line-height:1.2;}
.main_ul > ul > li:nth-child(2) div span:last-child{display:inline-block; border:1px solid #fff; margin:2em auto auto auto; transition:.5s}
.main_ul > ul > li:nth-child(2) div span:last-child a{padding:10px 50px; box-sizing:border-box; font-weight:600; display:block; color:#fff}
.main_ul > ul > li:nth-child(2) div span:last-child:hover{background:#fff; transition:.5s}
.main_ul > ul > li:nth-child(2) div span:last-child:hover a{color:#000;}
.main_ul > ul > li:nth-child(2) div span i{font-weight:600; font-size:19px; vertical-align:middle;}

.main_ul > ul > li:last-child{justify-content:space-between; display:flex; flex-direction:column}
.main_ul > ul > li:last-child p.en{color:#fff; font-size:2rem; font-weight:600}
.main_ul > ul > li:last-child div{margin-top:3em}
.main_ul > ul > li:last-child div i{margin-right:10px; color:#cfc300}
.main_ul > ul > li:last-child div p{color:#fff; font-size:1.3rem; font-weight:600; line-height:1.3;}

.main_ul > ul > li:last-child > p:last-child{margin-top:1em}
.main_ul > ul > li:last-child > p:last-child span{border:1px solid #fff; margin-right:2%; width:50%; font-weight:600; cursor: pointer; display:flex; align-items:center; justify-content:center; transition:.5s}
.main_ul > ul > li:last-child > p:last-child span a{color:#fff; padding:1em 3em; }
.main_ul > ul > li:last-child > p:last-child span i{margin-right:10px;}

.main_ul > ul > li:last-child > p:last-child span:hover{background:#fff; transition:.5s}
.main_ul > ul > li:last-child > p:last-child span:hover a{color:#000;}



@media (max-width:1440px){
.section_inner{max-width:95%;}
}

@media (max-width:1350px){
.main_ul > ul > li:last-child > p:last-child span a{padding:1em}
.main_ul > ul > li:last-child div p{font-size:1.1rem;}
}

@media (max-width:1200px){
.main_right h2{font-size:1.8rem;}
.main_right span a{font-size:1rem;}
.main_ul > ul > li:nth-child(2) div{padding:1em;}
.main_ul > ul > li:nth-child(2) div span:last-child{margin:2em auto 0 auto}
.main_ul > ul > li:last-child p.en{font-size:1.8rem;}
.main_ul h2{font-size:1.8rem}
.main_ul > ul > li:last-child div p{font-size:1rem;}
}

@media (max-width:1000px){
.main_ul > ul > li:last-child p.en{font-size:1.5rem;}
.main_ul h2{font-size:1.5rem}
.main_ul > ul > li:nth-child(2) div p{font-size:1.5rem;}
.main_ul > ul > li:nth-child(2) div span{font-size:.9rem}
.main_right h2{font-size:1.5rem;}
.main_right span a{font-size:.9rem}
.main_ul > ul > li:last-child p.flex{font-size:.9rem}
}


@media (max-width:930px){
.main_ul > ul > li:last-child div p{align-items:flex-start}
}

@media (max-width:900px){
.main_section{padding:3em 0}
.main_section .section_inner .flex{flex-direction:column;}
.main_left{margin-right:0; width:100%; margin-bottom:1em;}
.main_left p:after{display:none}
.main_right{margin-left:0; width:100%;}
.bg_b{background-position:85%}

.main_ul > ul > li{width:100%; margin-right:0; margin-bottom:1em;}
.main_ul > ul > li:last-child{margin-bottom:0}
.main_ul > ul > li ul li a{font-size:.9rem}
.main_ul > ul > li:last-child div{margin-top:1em}
.main_ul > ul > li:nth-child(2) div span{margin:0 auto}
.main_ul > ul > li:last-child div p.flex{flex-direction:row}
.main_ul > ul > li:last-child p.flex{flex-direction:row}
.main_ul > ul > li:last-child > p:last-child span{margin-right:1%}
.main_ul > ul > li:last-child > p:last-child span:last-child{margin-right:0}

}

@media (max-width:900px){
.main_right p{font-size:.9rem}
}