@charset "utf-8";

.mask{position:relative}
.mask .container{width:100%; margin:0 auto; max-width:1000px; position:relative; box-sizing:border-box}

.web{}
.mo{display:none}

.con01{position:relative; background:#fff; text-align:center; padding:100px 0;}
.con02{position:relative; background:#fff; text-align:center; padding:100px 0;}
.con03{position:relative; background:#fff; text-align:center; padding:100px 0;}
.con04{position:relative; background:#fff; text-align:center; padding:100px 0 0 0;}

.con01 .visual{position:relative}
.con01 .visual > div{position:relative; display:inline-block}
.con01 .visual > div .tag{position:absolute; left:50%; top:-40px; transform:translateX(-50%)}
.con01 .visual > div .img{display:block; margin:0 auto}

.con02 .tit{position:relative}
.con02 .box{position:relative; margin-top:50px; height:545px;}
.con02 .box .img01{position:absolute; left:0; top:0}
.con02 .box .img02{position:absolute; right:0; top:0}
.con02 .box .txt{width:475px; position:absolute; right:0; top:345px; line-height:1.6; color:#666666; font-size:19px; text-align:left}
.con02 .tail{position:relative; padding:100px 0 0 0;}
.con02 .tail p:nth-child(2){position:relative; padding:15px 0 0 0; line-height:1.6; color:#666666; font-size:19px;}

.con03 .box{position:relative; margin-top:50px; height:1855px;}
.con03 .box .img{position:absolute;}
.con03 .box .tit{position:absolute; font-weight:bold; line-height:1.5; color:#333; font-size:30px; text-align:left}
.con03 .box .txt{position:absolute; font-size:17px; color:#666666; line-height:1.6; text-align:left}

.con03 .box .img.one span{width:305px; padding-bottom:10px; border-bottom:1px solid #222; text-align:left; position:absolute; right:-250px; top:70px;}
.con03 .box .img.two span{width:305px; padding-bottom:10px; border-bottom:1px solid #222; text-align:right; position:absolute; left:-250px; top:175px;}
.con03 .box .img.three span{width:305px; padding-bottom:10px; border-bottom:1px solid #222; text-align:left; position:absolute; right:-250px; top:70px;}
.con03 .box .img span i{font-style:normal; font-size:24px; color:#222;}

.con03 .box .img.one{left:0; top:0}
.con03 .box .img.two{right:0; top:520px}
.con03 .box .img.three{left:0; top:1224px;}

.con03 .box .tit.one{left:515px; top:145px;}
.con03 .box .tit.two{left:0px; top:775px;}
.con03 .box .tit.three{left:515px; top:1362px;}

.con03 .box .txt.one{left:515px; top:254px;}
.con03 .box .txt.two{left:0; top:930px; max-width:480px}
.con03 .box .txt.three{left:515px; top:1600px;}

.con04 .box{position:relative; padding:0 0 200px 0;}
.con04 .box .tit{position:relative; padding:70px 0 0 0}
.con04 .box .tit p:nth-child(1){position:relative; font-weight:bold; font-size:29px; line-height:1.3}
.con04 .box .tit p:nth-child(2){position:relative; line-height:1.5; font-size:17px; color:#555555; padding:10px 0 0 0}
.con04 .box .img{position:relative; border:10px solid #fff; margin:0 auto; width:100%; box-sizing:border-box; margin-top:50px; max-width:1000px;}
.con04 .box .tag{display:inline-block; text-align:center; position:absolute; left:50%; transform:translateX(-50%); top:-100px}
.con04 .box .tag p:nth-child(2){position:relative; padding:30px 0 0 0}
.con04 .box .tag p:nth-child(2) span{display:inline-block; border-radius:50%; color:#fff; font-size:25px; background:#cb6775; width:55px; height:55px; line-height:55px; font-weight:bold; text-align:center}
.con04 .box .txt{position:relative; max-width:980px; margin:0 auto; margin-top:30px; font-size:15px; color:#666; line-height:1.5; text-align:left}
.con04 .box .txt .line{font-size:0;}
.con04 .box .txt .line > p{display:inline-block; vertical-align:top; width:490px; font-size:15px; box-sizing:border-box; padding-left:30px;}
.con04 .box .txt > p{position:relative; margin-bottom:10px; padding-left:15px; text-indent:-15px}
.con04 .box .txt > p:nth-last-child(1){margin-bottom:0}

.con04 .box.one{background:url(images/box01_bg.jpg) center top no-repeat;}
.con04 .box.two{background:url(images/box02_bg.jpg) center top no-repeat;}
.con04 .box.three{background:url(images/box03_bg.jpg) center top no-repeat; padding-bottom:150px}
.con04 .box.one .tit p:nth-child(1){color:#d87281}
.con04 .box.two .tit p:nth-child(1){color:#52ac98}
.con04 .box.three .tit p:nth-child(1){color:#4b86be}
.con04 .box.one .tag p:nth-child(2) span{background:#cb6775}
.con04 .box.two .tag p:nth-child(2) span{background:#52ac98}
.con04 .box.three .tag p:nth-child(2) span{background:#4b86be}

.con04 .box .img .link{width:100%; height:100%; position:absolute; left:0; top:0}
.con04 .box .img .link.two a{display:inline-block; width:50%; height:100%; font-size:0; background:none; text-indent:-9999px; position:absolute; top:0}
.con04 .box .img .link.two a:nth-child(1){left:0}
.con04 .box .img .link.two a:nth-child(2){left:50%}

.con04 .box .img .link.three a{display:inline-block; width:33%; height:100%; font-size:0; background:none; text-indent:-9999px; position:absolute; top:0}
.con04 .box .img .link.three a:nth-child(1){left:0}
.con04 .box .img .link.three a:nth-child(2){left:33%}
.con04 .box .img .link.three a:nth-child(3){left:66%}

.con04 .box .img .link.four a{display:inline-block; width:50%; height:50%; font-size:0; background:none; text-indent:-9999px; position:absolute; top:0}
.con04 .box .img .link.four a:nth-child(1){left:0; top:0; height:52%}
.con04 .box .img .link.four a:nth-child(2){left:50%; top:0; height:52%}
.con04 .box .img .link.four a:nth-child(3){left:0; top:52%}
.con04 .box .img .link.four a:nth-child(4){left:50%; top:52%}

.hk .con03 .box .txt.three{top:1520px}
.id .con02 .tail p:nth-child(2){font-size:17px}
.id .con03 .box .img.one span{top:30px}
.id .con03 .box .tit.one{top:105px}
.id .con03 .box .txt.one{top:250px}
.id .con03 .box .img.two span{top:125px}
.id .con03 .box .tit.two{top:720px}
.id .con03 .box .txt.two{top:965px}
.id .con03 .box .img.three span{top:40px}
.id .con03 .box .tit.three{top:1335px}
.id .con03 .box .txt.three{top:1625px}
.th .con04 .box .txt{font-size:14px;}
.vn .con03 .box .txt.one{top:245px}
.vn .con03 .box .tit{line-height:1.25}
.vn .con03 .box .txt.two{top:915px}
.vn .con02 .box .txt{font-size:18px}
.vn .con03 .box .txt.three{top:1505px}
.vn .con04 .box .tag{top:-145px}
.vn .con04 .box .tag p:nth-child(1){height:88px}
.th .con04 .box .tag{top:-125px}

@media screen and (max-width: 1020px){
	.mask .container{padding:0 20px}
	
	.con01, .con02, .con03, .con04{padding:70px 0}
	.con04{padding-bottom:0}
	
	.con01 .visual > div .tag{top:-5%;}
	
	.con02 .box{max-width:485px; margin:0 auto; height:auto; padding-top:30px}
	.con02 .box > div{display:block !important; position:relative !important; left:auto !important; right:auto !important; top:auto !important}
	.con02 .box .img01{margin-bottom:20px}
	.con02 .box .img02{margin-bottom:20px}
	.con02 .box .txt{width:auto; font-size:17px !important}
	.con02 .box .txt br{display:none}
	.con02 .tail{padding:70px 0 0 0}
	.con02 .tail p:nth-child(2){padding:10px 0 0 0; font-size:17px}
	
	.con03 .box{max-width:485px; margin:0 auto; margin-top:30px; height:auto}
	.con03 .box .img{position:relative !important; left:auto !important; top:auto !important; margin:0 auto}
	.con03 .box .tit{font-size:25px; position:relative !important; left:auto !important; top:auto !important; margin-top:60px; text-align:left; padding-left:30px}
	.con03 .box .txt{font-size:15px; position:relative !important; left:auto !important; top:auto !important; margin-top:20px; margin-bottom:50px; padding-left:30px}
	.con03 .box .txt br{display:none}
	
	.con03 .box .img span{display:block; width:100px !important; position:absolute !important; left:-50px !important; top:auto !important; right:auto !important; bottom:-42px; text-align:right !important; z-index:10; padding:5px !important;}
	.con03 .box .img span i{font-size:17px}
	
	.con04 .box{padding:0 20px 150px 20px}
	.con04 .box .tag{top:-70px}
	.con04 .box .tag img{width:140px}
	.con04 .box .tag p:nth-child(2){padding:20px 0 0 0}
	.con04 .box .tag p:nth-child(2) span{font-size:18px; height:40px; width:40px; line-height:40px}
	.con04 .box .tit p:nth-child(1){font-size:24px}
	.con04 .box .tit p:nth-child(2){font-size:15px}
	.con04 .box .txt{font-size:14px}
	.con04 .box .txt .line > p{width:50%; padding-left:20px}
	.con04 .box.three{padding-bottom:100px}
	
	.vn .con04 .box .tag p:nth-child(1){height:42px}
	.vn .con04 .box .tag{top:-80px}
	.th .con04 .box .tag{top:-75px}
}

@media screen and (max-width: 768px){
	.web{display:none}
	.mo{display:inline}
	
	.con01, .con02, .con03, .con04{padding:50px 0}
	.con02{padding-top:10px}
	.con03{padding-top:10px}
	.con04{padding-bottom:0}
	
	.con02 .box .txt{font-size:15px !important}
	.con02 .tail{padding:50px 0 0 0}
	.con02 .tail p:nth-child(2){font-size:15px !important}
	.con02 .tail p:nth-child(2) br{display:none}
	
	.con03 .ttit img{width:150px}
	.con03 .box .tit{padding-left:20px; font-size:20px}
	.con03 .box .txt{margin-top:15px; margin-bottom:40px; font-size:13px; padding-left:20px}
	.con03 .box .img span{left:-70px !important}
	
	.hk .con03 .box .tit br{display:none}
	
	.con04 .box{background-size:auto 265px !important}
	.con04 .box .tit{padding:50px 0 0 0}
	.con04 .box .tit p:nth-child(1){font-size:15px}
	.con04 .box .tit p:nth-child(2){font-size:13px}
	.con04 .box .img{border:5px solid #fff; margin-top:30px}
	.con04 .box .txt{font-size:13px !important; margin-top:20px}
	.con04 .box .txt .line > p{font-size:13px; padding-left:10px}
	.con04 .box.three{padding-bottom:50px}
	
	.vn .con03 .box .tit br{display:none}
}