@charset "utf-8";
/* CSS Document */

.f-l{ float:left;}
.f-r{ float:right;}
.f-n{ overflow:hidden;}
.xm p{ line-height:30px; font-size:1.6em;}
.xm img{ text-align:center;}
.xm h2,.xm h3,.xm h4{ color:#007cc2;}

/*xm2*/
.xm2-hd1{ background-color:#007cc2; position:relative;}
.xm2-tit{ width:60%; color:#FFF; position:absolute; left:4%; bottom:12%; z-index:999;}
.xm2-tit>h1{ margin-bottom:5px; font-size:3.5em; color:#fff; }
.xm2-tit>p{ font-size:1.8em;}
.xm2-img1{ width:100%; text-align:right; }
.xm2-img1>img{ width:40%;}

.dots{ margin:4% 2%;}
.dot{ width:50%; padding:0 0 0 6%;}
.dot>h2{font-size:2em; margin-bottom:4px;}

.ask-l{ width:50%;}
.ask-r{ padding:0 0 0 6%; width:44%;}
.ask-page1{ margin-bottom:12%;}
.ask-page1>h3{font-size:2em;margin-bottom:6px;}
.a-icon{ color:#007cc2;}
.a-icon>span{ margin:0 1px 0 6px;}
.ask-page2>h2{ font-size:3.5em;}
.ask-page2>h4{ font-size:2em; color:#000;}

.page{ margin-top:4%;}
.page>h2,.page>p{ padding:0 4% 4% 4%;}
.page>h2{ font-size:2.5em;}

@media screen and (max-width: 1000px) {
	.xm2-tit>h1{ font-size:3.3em; }
}
@media screen and (max-width: 900px) {
	.xm2-tit>h1{ font-size:3em; }
	.xm2-tit>p{ font-size:1.5em;}
	.dot>h2,.ask-page1>h3,.ask-page2>h4{font-size:1.8em;}
	.ask-page2>h2{ font-size:2.8em;}
	.ask-page1,.ask-page2{ float:left; width:48%; padding-right:1%;}
	.ask-r{ padding:2% 4%; width:100%;}
	.ask-page1{ margin-bottom:0%;}
}
@media screen and (max-width: 800px) {
	.xm2-tit>h1{ font-size:2.5em; }
	.xm2-tit>p{ font-size:1.3em;}
	.ask-page1>h3,.ask-page2>h4{font-size:1.4em;}
	.ask-page2>h2{ font-size:2em;}
	.dots{ margin:2% 1%;}
}
@media screen and (max-width: 768px) {
	.ask-page1,.ask-page2{ float:left; width:48%; padding-right:1%;}
	.ask-r{ padding:2% 4%; width:100%;}
	.ask-page1{ margin-bottom:0%;}
	.ask-page1>h3{ font-size:2em; margin-bottom:0px;}
	.ask-page2>h2{ font-size:2em;}
	.ask-page2>h4{ font-size:1.5em;}
	.ask{text-transform: uppercase;position: relative; }
	.ask:before{background: #007cc2;content: "";height:1px;left:0px;top:0px;position: absolute;width:100%;z-index: 999;}
	.page{text-transform: uppercase;position: relative; }
	.page:before{background: #007cc2;content: "";height:1px;left:0px;top:-20px;position: absolute;width:100%;z-index: 999;}
}
@media screen and (max-width: 672px) {
	.xm2-tit>h1{ font-size:2em; }
}
@media screen and (max-width: 600px) {
	.dot{ float:none !important; width:90%;  height:auto; margin:1% auto 4% auto; padding:1%;}
	.dot:hover{box-shadow:0px 5px 5px #ccc; transition:linear .5s all;-moz-transition: linear .5s all; -webkit-transition:linear .5s all; -o-transition: linear .5s all; }
	.ask-l{ width:100%; text-align:center;}
	.ask-l>img{ width:50%;}
	.ask-page1,.ask-page2{ float:none; width:90%; padding:0 5%;   margin:4% 0;}
	.page{ margin-top:4%; width:90%; padding:0 5%;}
	.page>h2,.page>p{ padding:0 4% 4% 4%;}	
	.page>h2{ font-size:2.5em;}	
}
@media screen and (max-width: 480px){
	.xm2-tit>h1{ font-size:2em; }
	.xm2-img1{ width:100%; text-align:right; }
	.xm2-img1>img{ width:100%;}
}



/*xm3*/
.xm3>h2{ font-size:2.6em; padding:1%;}
.xm3-hd{ position:relative;}
.xm3-hd>h3{ position:absolute; top:10px; left:10px; color:#FFF; font-size:2.5em;}
.xm3-hd>h4{ margin-top:20px; padding:0 1%;}
.xm3-m>img{ width:50%; float:left; margin:20px 0;}
.xm3-hd>p{ margin:2%;}
.ts-page{ margin:2%;}
.ts-p{ width:28%; padding:1%;}
.ts-p>h4{ font-size:2em; margin-bottom:10px;}
.ts-p>p{ line-height:35px;}
.ts-i{ width:70%;}
.ts-page>div,.t-i,.t-i1,.t-txt{ float:left; overflow:hidden;}
.ts-detail{ background-color:#d7edfb; }
.t-i,.t-i1{margin:1%; text-align:center; }
.t-i{ width:44%; }
.t-i1{ width:52%;}
.t-txt{ width:40%;text-align:left; padding:7% 3%;}
.t-i>img,.t-i1>img{ max-height:693px; }
.txt>p{ margin:20px 0;}
@media screen and (max-width: 1000px){
	.xm3-hd>h3{ position:absolute; top:4px; left:4px;}
}
@media screen and (max-width: 900px){
	.xm3-hd>h3{position: absolute;top: 0px;left:0px;}
	.ts-p{ width:38%;}
	.ts-i{ width:60%;}
}
@media screen and (max-width: 850px){
	.xm3-hd>h3{ font-size:2em;}
	.ts-p{ width:48%;}
	.ts-i{ width:50%;}
}
@media screen and (max-width: 768px) {
	.xm3>h2{ font-size:2.1em; }
	.xm3-hd>h3{
	font-size: 1.8em;
	top: 6px;
}
	.xm3-m>img{ width:100%; float:none; margin:20px 0;}
	.xm3-hd>p{ margin:1%;}
	.ts-p,.ts-i,.t-i,.t-i1,.t-txt{ width:98%; padding:1% 1% 0 1%;}
	.ts-page>div,.t-i,.t-i1,.t-txt{ float:none; overflow:hidden;}
	.ts-detail{ background-color:#d7edfb; }
	.t-i,.t-i1{margin:0%; text-align:center; }
	.t-i>img,.t-i1>img{ max-height:693px; }
	#t-txt{ text-align:left; padding:7% 5%;}
	#t-txt>p{ margin:20px 0;}
}
@media screen and (max-width: 672px) {
	.xm3-hd>img{ min-height:40px;}
}

/*xm4*/
.xm4{ margin-bottom:4%;}
.xm4-hd1{ background-color:#007cc2; max-height:200px;ext-align:center; padding:0 1%;}
.xm4-tit{ width:40%; color:#FFF; padding:6% 0;}
.xm4-tit>h1 {
    margin-bottom: 5px;
    font-size: 3.5em;
    color: #fff;
}
.xm4-tit>p{ font-size:1.8em;}
.xm4-img1{ width:60%; text-align:left; }
.xm4-img1>.img1,.xm4-img1>.img2{max-height:200px;}
.xm4-img1>.img1{ width:30%;}
.xm4-img1>.img2{ width:63%;}

.xm4-hd{ position:relative; }
.xm4-hd>h3{ position:absolute; top:15px; left:10px; color:#FFF; font-size:2.5em;}
.xm4-hd>h4{ font-size:2em;}
.xm4-hd>h4,.xm4-hd>p,.part-img{ width:96%; padding:2% 2% 0 2%;}
.part1-4 div{ float:left; overflow:hidden; border:1px solid #e0e0e0; border-radius:20px; text-align:center;}
.part1-4 div img{ width:60%; min-height:240px; padding:2% 0;}
.p1-4-2,.p1-4-1{ width:46%; margin:1%;}
.p1-4-2{ background-color:#e0e0e0;}
.part2-4>img{ width:50%; float:left; padding:2% 0; overflow:hidden;}
.part3-4{ padding:2%;}
.part3-4>img{ padding:1% 0;}
.livec{ padding:1% 0;}
@media screen and (max-width: 1000px){
	.xm4-hd>h3{ position:absolute; top:4px; left:4px;}
}
@media screen and (max-width: 900px){
	.xm4-hd>h3{ position:absolute; top:0px; left:0px;}
}
@media screen and (max-width: 850px){
	.img1{ display:none;}
	.xm4-tit{ width:44%; color:#FFF; padding:6% 3%;}
	.xm4-img1{ width:50%; text-align:left; }
	.xm4-img1>.img2{ width:100%;}
	.xm4-hd1{ padding:0;}
	.xm4-hd>h3{font-size:2em;}
	.xm4-tit>p{ font-size:1.5em;}
}
@media screen and (max-width: 672px) {
	.xm4-hd>img{ min-height:40px;}
	.xm4-hd>h3{font-size:1.8em;}
	.xm4-tit>p{ font-size:1.3em;}
}
@media screen and (max-width: 390px) {
	.xm4-hd>img{ min-height:40px;}
	.xm4-hd>h3{font-size:1.5em;}
	.xm4-tit>p{ font-size:1em;}
}