.sub_top{background-image: url("../img/s04_cn09_01.jpg");height: 440px;}
.sub_top_txt p{color: #afabac;}
.sub_top .sub_top_txt h1{color: #fff;font-size: 48px;}
.sub_top br{display:none;}
.sub_top .sub_top_txt .p1{ font-size: 24px;color: #fff;letter-spacing: -1px; margin-bottom: 13px;}

.p_21{font-size: 21px;}.p_30{font-size: 30px;}
h1,h2,p{text-align: center;}

.section1 > .span{padding: 60px 55px;}
.section1 > .span1{background: url("../img/s04_cn09_11.jpg") repeat; }
.section1 > .span1 > .p_21{color: #6370a7;}
.section1 > .span1 > h1{color: #f8635c;margin: 15px 0 50px 0;}
.section1 > .span1 .li1{width: 54%;}
.section1 > .span1 .li1 *{text-align: left;}
.section1 > .span1 .li1 h3{margin: 20px 0 0 0;color: #ff4c4e;}
.section1 > .span1 .li2{width: 46%;}
.section1 > .span1 .li2 img{margin: 0 auto;}

.section1 > .span2 *{text-align: left;}
.section1 > .span2 > h1 span{color: #7e84a4;}
.section1 > .span2 > ul{margin-top: 50px;}
.section1 > .span2 > ul > .li1{width: 56%;}
.section1 > .span2 > ul > .li2{width: 44%;}
.section1 > .span2 > ul > .li1 .p1{margin-bottom: 45px;}
.section1 > .span2 > ul > .li1 h3{margin-bottom: 20px;color: #555b8b;padding-left: 50px;position: relative;}
.section1 > .span2 > ul > .li1 h3 span{position: absolute;left: 0;color: #fff;background:#555b8b;width: 43px;height: 33px;border-radius: 40px;text-align: center;font-weight: normal; top: 50%;line-height: 33px;margin-top: -16.5px;}
.section1 > .span2 > ul > .li2 span{width: 328px;height: 328px;margin: 0 auto;position: relative;}
.section1 > .span2 > ul > .li2 h4{width: 143px;height: 143px;background-color: #e1e1eb;color:#55565a; float: left;border-radius: 50%;text-align: center;line-height: 143px;
border: 2px dashed #cbc9d6;}
.section1 > .span2 > ul > .li2 .h4_1,
.section1 > .span2 > ul > .li2 .h4_2{margin-bottom: 42px;}
.section1 > .span2 > ul > .li2 .h4_4,
.section1 > .span2 > ul > .li2 .h4_2{margin-left: 42px;}
.section1 > .span2 > ul > .li2 .h4_5{line-height: normal;width: 166px;height: 166px;background-repeat: no-repeat;color: #fff;border: 3px solid #fcfdf8;padding-top: 60px;
position: absolute;top: 50%;left: 50%;margin-top:-83px;margin-left:-83px;background-color: #fff;}

.section1 > .span3{background-repeat: repeat;}
.section1 > .span3 > h1{text-align: left;margin-bottom: 50px;}
.section1 > .span3 > h1 span{color: #8185a8;}
.section1 > .span3 > .span{padding: 50px 55px;background-color: #fff;margin-top: 55px;text-align: center;}
.section1 > .span3 > .s1{margin-top: 0;}
.section1 > .span3 > .span *{text-align: center;}
.section1 > .span3 > .span > .h3_1{margin: 8px 0 20px 0;color: #fff;background: #5097cb;border-radius: 50px;display: inline-block;padding: 5px 15px;}
.section1 > .span3 > .span > .p1{margin-bottom: 15px;}
.section1 > .span3 > .span > .ul_custom1{margin: 35px 0;}
.section1 > .span3 > .span > .ul_custom1 > li{width: 48.7%}
.section1 > .span3 > .span > .ul_custom1 > .li1{margin-right: 2.6%;}
.section1 > .span3 > .span > .ul_custom1 > li > h4{height: 37px;line-height: 37px;color: #fff;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > h4{background:#777ca2 ;}
.section1 > .span3 > .span > .ul_custom1 > .li2 > h4{background:#7b95c8 ;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > span{float: left;width: 50%;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > .in1{border-right: 1px solid #fff;}
.section1 > .span3 > .span > .ul_custom1 > .li1{background: #f4f4f4;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2{padding:0 10px;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 *{text-align: left;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 h4{color:#bb2e1d; margin-top: 10px;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 p{font-size: 15px;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 .p_custom{position: relative;padding-left: 16px;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 .p_custom span{position: absolute;left: 0;top: 4px;width: 15px;height: 15px;border-radius:50%;color: #fff;font-size: 9px;
text-align: center;line-height: 15px;display: block;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 .p_custom1 span{background: #fd3235;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 .p_custom2 span{background: #47c5c1;}
.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 .p_custom3 span{background: #f99a56;}
.section1 > .span3 > .s1 > .ul_custom1 > .li1{position: relative;}
.section1 > .span3 > .s1 > .ul_custom1 > .li1 > img{margin-left: 0;}
.section1 > .span3 > .s1 > .ul_custom1 > .li1 > span{position: absolute;top: 22%;right: 2%;width: auto;}
.section1 > .span3 > .s1 > .ul_custom1 > .li1 > span p{text-align: left;margin-bottom: 10px;}
.section1 > .span3 > .s1 > .ul_custom1 > .li1 > span p span{background: #ff2d27;color: #fff;display: inline-block;width: 23px;height: 23px;text-align: center;line-height: 23px;border-radius:50%;margin-right: 4px;}
.section1 > .span3 > .s1 > .ul_custom1 > .li1 > span .p2 span{background:#4bc7bd; }

.section1 > .span3 > .span > .ul_custom2 > li{width: 19.76%;margin-left: 0.3%;height: 202px;padding-top:71px;position:relative;
	background-color: #dee7ee;
    background-image: -webkit-linear-gradient(to bottom,#dee7ee,#eff3f6);
    background-image: -ms-linear-gradient(to bottom,#dee7ee,#eff3f6);
    background-image: -moz-linear-gradient(to bottom,#dee7ee,#eff3f6);
    background-image: -o-linear-gradient(to bottom,#dee7ee,#eff3f6);
    background-image: linear-gradient(to bottom,#dee7ee,#eff3f6);
}
.section1 > .span3 > .span > .ul_custom2 > li:BEFORE{position: absolute;content: "";background-image: url(/img/common_etc/s04_cn02_icon.png);left: 50%;top: 15px;}
.section1 > .span3 > .span > .ul_custom2 > .li1:BEFORE{width: 48px;height: 48px;background-position:-90px -122px ;margin-left:-24px ;}
.section1 > .span3 > .span > .ul_custom2 > .li2:BEFORE{width: 44px;height: 48px;background-position:-90px -178px ;margin-left:-22px ;}
.section1 > .span3 > .span > .ul_custom2 > .li3:BEFORE{width: 42px;height: 48px;background-position:-90px -237px ;margin-left:-21px ;}
.section1 > .span3 > .span > .ul_custom2 > .li4:BEFORE{width: 43px;height: 44px;background-position:-90px -301px ;margin-left:-21.5px ;}
.section1 > .span3 > .span > .ul_custom2 > .li5:BEFORE{width: 30px;height: 45px;background-position:-90px -361px ;margin-left:-15px ;}
.section1 > .span3 > .span > .ul_custom2 > .li1{margin-left: 0;}
.section1 > .span3 > .span > .ul_custom2 > li > h4{height: 22px;color: #004378;}
.section1 > .span3 > .span > .ul_custom2 > li > span{display: table;width: 100%;height: 109px;}
.section1 > .span3 > .span > .ul_custom2 > li > span p{width: 100%;display: table-cell;vertical-align: middle;}
.section1 > .span3 > .span > .p_30{display: inline-block;height: 38px;line-height: 38px;position: relative;color: #313131;margin: 40px 0 25px 0;font-weight: bold;}
.section1 > .span3 > .span > .p_30:BEFORE {content: "";position: absolute;width: 102px;height: 1px;border-top:1px solid #e0e0e2;top: 16px;left:-122px; }
.section1 > .span3 > .span > .p_30:AFTER {content: "";position: absolute;width: 102px;height: 1px;border-top:1px solid #e0e0e2; top: 16px;right:-122px ;}
.section1 > .span3 > .span > .ul_custom2 > li > span .m_custom_br{display: none;}

.section1 > .span3 > .s2 > .in1{margin: 0 auto;max-width: 542px;}
.section1 > .span3 > .s2 > .in1 h4{float: left;width: 50%;}

.section1 > .span3 > .s2 > .ul1{margin-top: 28px;}
.section1 > .span3 > .s2 > .ul1 li > h4{height: 37px;line-height: 37px;color: #fff;}
.section1 > .span3 > .s2 > .ul1 .li1{width: 100%;}
.section1 > .span3 > .s2 > .ul_1 .li1{background: #777ca2;}
.section1 > .span3 > .s2 > .ul_2 .li1{background:#7b95c8 ;}
.section1 > .span3 > .s2 > .ul1 .li2{width: 49.85%;margin-right: 0.3%;}
.section1 > .span3 > .s2 > .ul1 .li3{width: 49.85%;}
.section1 > .span3 > .s2 > .ul1 li .s2{background:#eee;padding: 15px; }
.section1 > .span3 > .s2 > .ul1 li .s2 h4{color:#f75141;margin-bottom: 28px;position: relative; }
.section1 > .span3 > .s2 > .ul1 li .s2 h4:AFTER {content: "";position: absolute;width: 30px;height: 1px;border-top:1px solid #a0a0a0; bottom: -15px;left:50%;margin-left: -15px;}

.section1 > .span3 > .s3 > .ul1 li{width: 48.7%;height: 213px;}
.section1 > .span3 > .s3 > .ul1 .li1{margin-right: 2.6%;}
.section1 > .span3 > .s3 > .ul1 .li2{display: table;}
.section1 > .span3 > .s3 > .ul1 .li2 p{text-align: left;display: table-cell;vertical-align: middle;width: 100%;}
.section1 > .span3 > .s3 > .ul1 .li1 span{background: url("/img/common_etc/s04_cn02_icon.png");width: 248px;height: 213px;background-position: 0 -1392px;margin: 0 auto;}

.section1 > .span3 > .s4 > .in1{margin: 30px auto 0 auto;max-width: 695px;position: relative;}
.section1 > .span3 > .s4 > .in1 img{margin-left: 0;position: relative;width: 42%;max-width: 286px;z-index: 1;}
.section1 > .span3 > .s4 > .in1 > span{background-repeat: repeat;width:79%;position: absolute;top:22%;right: 0;border-radius:20px;padding: 28px 8px 28px 25%;z-index: 0;}
.section1 > .span3 > .s4 > .in1 > span *{text-align: left;}
.section1 > .span3 > .s4 > .in1 > span h4{color:#4d96c9;margin-bottom: 13px; }
.section1 > .span3 > .s4 > .in1 > span .p2{margin: 7px 0;}
.section1 > .span3 > .s4 > .in1 > span p{position: relative;padding-left: 31px;}
.section1 > .span3 > .s4 > .in1 > span p span{display: block;width: 24px;height: 24px;text-align: center;line-height: 24px;font-size: 14px;color: #fff;border-radius:50%;
position: absolute;left: 0;top: 0;}
.section1 > .span3 > .s4 > .in1 > span p .in1{background: #fb3029;}
.section1 > .span3 > .s4 > .in1 > span p .in2{background: #51c2be;}
.section1 > .span3 > .s4 > .in1 > span p .in3{background: #ff9b57;}

.section1 > .span4{background-repeat: no-repeat;    background-position: 70%;}
.section1 > .span4 *{color: #fff;text-align: left;}
.section1 > .span4 h1{margin-bottom: 25px;}
.section1 > .span4 .p2{margin: 22px 0;}

.section1 > .span3 > .m_ul{height: 0;overflow: hidden;}

/* 20180621*/
#add_li_20180621{width: 100%;background-repeat: no-repeat;margin-top: 20px;height: auto;}
#add_li_20180621 > span{float: left;width: 50%;padding: 40px 30px;}
#add_li_20180621 > .s1 *{text-align: left;}
#add_li_20180621 > .s1 h3{margin-bottom: 15px;}
#add_li_20180621 > span > h3 span{font-weight: normal;}
/* 20180621*/

.youtube_wrap{padding: 50px;}

@media only screen and (max-width: 1023px) {
	.sub_top{height: 256px;background-size:cover;}
	.sub_top .sub_top_txt h1{font-size: 38px;}
	.sub_top br{display:block;}
	.section1 > .span{padding: 40px 20px;}
	.sub_top .sub_top_txt .p1{font-size: 20px;}
	
	.section1 > .span1 .li1{padding-right: 20px;}
	
	.section1 > .span3 > .span{padding: 40px 20px;margin-top: 30px;}
	.section1 > .span3 > .span > .ul_custom1 > .li1{margin-right: 0;}
	.section1 > .span3 > .span > .ul_custom1 > li{width: 50%;}
	.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 p{font-size: 13px;line-height: 18px;}
	.section1 > .span3 > .s2 > .ul1 li .s2 p br,
	.section1 > .span3 > .span > .ul_custom2 > li > span p br,
	.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 p br{display: block;}
	.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 .p_custom span{top: 2px;}
	.section1 > .span4{padding-right: 14%;}
	
	/* 20180621*/
	#add_li_20180621 > span{padding: 25px;width: 100%;}
	/* 20180621*/

	.youtube_wrap{padding: 20px;}
}

@media only screen and (max-width: 909px) {
	.section1 > .span3 > .span > .ul_custom1 > .li1{margin-right: auto;margin-bottom: 10px;}
	.section1 > .span3 > .span > .ul_custom1 > li{width: 100%;float: none;max-width: 476px;margin: 0 auto;}
	
	.section1 > .span1 .li1{padding-right: 0px;width: 100%;}
	.section1 > .span1 .li2{width: 100%;padding-top: 25px;}
	.section1 > .span1 .li1 h3{font-size:16px; }
	.section1 > .span1 > h1{margin:15px 0 40px 0 }
	.section1 > .span2 > ul > .li1,
	.section1 > .span2 > ul > .li2{width: 100%;}
	.section1 > .span2 > ul > .li2,
	.section1 > .span2 > ul{margin-top: 40px;}
	
	.section1 > .span3 > .m_ul{height: 76px;overflow: visible;}
	.section1 > .span3 > .m_ul li{width: 25%;height: 100%;display: table;background: #404559;color: #c6d4dd;font-size: 16px;font-weight: bold;cursor: pointer;border-right: 1px solid #000;}
	.section1 > .span3 > .m_ul .li4{border-right-color:#404559; }
	.section1 > .span3 > .m_ul li span{text-align: center;display: table-cell;width: 100%;vertical-align: middle;}
	.section1 > .span3 > .m_ul .l_on{color: #000;background:#fff; cursor: default;border-right-color: #fff;}
	
	
	.section1 > .span3 > h1{margin-bottom: 35px;}
	.section1 > .span3 > .span{margin: 0;height: 0;overflow: hidden;padding: 0;}
	.section1 > .span3 > .s_on{height: auto;overflow: visible;padding: 40px 20px;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;}
	
	.section1 > .span3 > .s1 > .ul_custom1 > .li1 > span p{font-size: 13px;}
	.section1 > .span3 > .s1 > .ul_custom1 > .li1 > span p span{width: 19px;height:19px;line-height: 19px;}
	.section1 > .span3 > .span > .ul_custom2 > li{width: 100%;margin-left: 0;margin-bottom: 1px;padding-top:26.5px;height: 96px;padding-left: 75px;}
	.section1 > .span3 > .s1 > .ul_custom2 > .li2,
	.section1 > .span3 > .s2 > .ul_custom2 > .li2,
	.section1 > .span3 > .s3 > .ul_custom2 > .li2{padding-top:13px;}
	.section1 > .span3 > .s4 > .ul_custom2 > .li2{padding-top:3px;}
	.section1 > .span3 > .span > .ul_custom2 > li > span p br{display: none;}
	.section1 > .span3 > .span > .ul_custom2 > .li1:BEFORE{margin-left: 0;left:20px;top: 50%;margin-top: -24px;}
	.section1 > .span3 > .span > .ul_custom2 > .li2:BEFORE{margin-left: 0;left:20px;top: 50%;margin-top: -24px;}
	.section1 > .span3 > .span > .ul_custom2 > .li3:BEFORE{margin-left: 0;left:20px;top: 50%;margin-top: -24px;}
	.section1 > .span3 > .span > .ul_custom2 > .li4:BEFORE{margin-left: 0;left:20px;top: 50%;margin-top: -22px;}
	.section1 > .span3 > .span > .ul_custom2 > .li5:BEFORE{margin-left: 0;left:20px;top: 50%;margin-top: -22.5px;}
	.section1 > .span3 > .span > .ul_custom2 > li > span{height: auto;}
	.section1 > .span3 > .span > .ul_custom2 > li *{text-align: left;}
	.section1 > .span3 > .span > .ul_custom2 > li > span .m_custom_br{display: block;}
	.section1 > .span3 > .span > .p_30:BEFORE{width: 70px;left: -90px;}
	.section1 > .span3 > .span > .p_30:AFTER {width: 70px;right: -90px;}
	
	.section1 > .span3 > .s2 > .ul1 .li2{width: 100%;margin-right: auto;margin-bottom: 1px;}
	.section1 > .span3 > .s2 > .ul1 .li3{width: 100%;}
	.section1 > .span3 > .s2 > .ul_2{margin-top: 9px;}
	.section1 > .span3 > .s2 > .ul_1 li{max-width: 490px;float: none;margin: 0 auto;}
	.section1 > .span3 > .s2 > .ul_1 li .s2 p{font-size: 15px;}
	.section1 > .span3 > .s2 > .ul_2 li{max-width: 488px;float: none;margin: 0 auto;}
	
	.section1 > .span3 > .s3 > .ul1 li{width: 100%;height: 213px;}
	.section1 > .span3 > .s3 > .ul1 .li1{margin-right: 0;}
	.section1 > .span3 > .s3 > .ul1 .li2{height: auto;}
	
	.section1 > .span3 > .s4 > .in1 > span{padding: 15px 8px 15px 25%;}
	.section1 > .span3 > .s4 > .in1 > span p{font-size: 14px;}
}

@media only screen and (max-width: 510px) {
	.section1 > .span3 > .s1 > .ul_custom1 > .li1 > span p{font-size: 10px;margin-bottom: 0;}
	.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 p{font-size: 9px;line-height: 13px;}
	.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 .p_custom span{width: 13px;height: 13px;line-height: 14px;}
	.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 .p_custom span{top:0;}
	.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 h4{font-size: 12px;margin-top: 5px;}
	.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2{padding: 0 5px;}
	
	.section1 > .span3 > .s4 > .in1 > span p{line-height: 17px;padding-left: 21px;font-size: 9px;}
	.section1 > .span3 > .s4 > .in1 > span p span{width: 15px;height: 15px;line-height: 15px;font-size: 8px;}
	.section1 > .span3 > .s4 > .in1 > span{padding:8px 8px 8px 25%; }
	.section1 > .span3 > .s4 > .in1 > span .p2{margin: 0;}
	
	
	.section1 > .span2 > ul > .li2 h4{width: 120px;height: 120px;line-height: 120px;}
	.section1 > .span2 > ul > .li2 .h4_5{width: 130px;height: 130px;margin-left: -65px;margin-top: -65px;padding-top: 45px;}
	.section1 > .span2 > ul > .li2 .h4_4, .section1 > .span2 > ul > .li2 .h4_2{margin-left: 20px;}
	.section1 > .span2 > ul > .li2 .h4_1, .section1 > .span2 > ul > .li2 .h4_2{margin-bottom: 20px;}
	.section1 > .span2 > ul > .li2 span{width: 260px;height: 260px;}
}

@media all and (min-width:1024px) and (max-width:1199px) {
	.section1 > .span3 > .span{padding: 40px 20px;margin-top: 30px;}
	.section1 > .span3 > .span > .ul_custom1 > .li1{margin-right: 0;}
	.section1 > .span3 > .span > .ul_custom1 > li{width: 50%;}
	.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 p{font-size: 13px;line-height: 18px;}
	.section1 > .span3 > .span > .ul_custom1 > .li1 > .in2 .p_custom span{top: 2px;}
	.section1 > .span3 > .s3 > .ul1 .li2 p br{display: none;}
	
	/* 20180621*/
	#add_li_20180621 p{font-size: 14px;}
	/* 20180621*/
}