@charset "utf-8";

html{font-size:10px;}
.container {width:100%; margin:0 auto; max-width:1000px; position:relative;}

.con01{position:relative; padding:100px 0; background:url(images_hk/con01_bg.jpg) center top / cover;}
.con01 .title{position:relative; text-align:center; padding:0 50px}
.con01 .title .tag{position:relative; padding:20px 0 0 0; text-align:center}
.con01 .title .tag p{margin-bottom:10px; position:relative}
.con01 .title .tag p span{display:inline-block; padding:15px 30px; background:#fff; border-radius:5px; color:#464646; font-size:30px; font-weight:bold;}

.box{max-width:910px; position:relative; margin:60px auto 0; background:#fff; border-radius:5px; overflow:hidden}
.box > div{position:relative; padding:40px 20px;}

.box .bTit{position:relative; background:#fff; text-align:center}
.box .bTit p:nth-child(2){position:relative; padding:15px 0 0 0;}

.box .teeTit{position:relative;}
.box .teeTit .tee{display:inline-block; width:202px; height:51px; line-height:51px; background:url(images_hk/teeBg.png) center center no-repeat; text-align:center; color:#fff; font-size:35px; font-weight:bold}
.box .teeTit p:nth-child(2){position:relative; padding:20px 0 0 0; font-size:40px; color:#414141; font-weight:bold}
.box .teeTit .blue{color:#22b4aa}

.box .gBox{position:relative; background:#f7f7f7; text-align:center}
.box .gBox ul{position:relative; padding:50px 0 0 0; text-align:center; font-size:0}
.box .gBox ul li{display:inline-block; vertical-align:top; margin:0 20px;}
.box .gBox .tail{position:relative; font-size:20px; color:#7c7c7c; padding:20px 0 0 0; line-height:1.5}

.box .wBox{position:relative; text-align:center}
.box .wBox .line{position:relative; padding:30px 20px; background:#fff; font-size:0}
.box .wBox .line.border:after{content:''; width:90%; height:1px; background:#ebebeb; position:absolute; left:50%; top:0; transform:translateX(-50%)}
.box .wBox .line > div{display:inline-block; vertical-align:top; width:50%;}
.box .wBox .line.three > div{width:33.3%}
.box .wBox .line .tit{position:relative; padding:20px 0 0 0; color:#414141; font-size:19px}
.box .wBox .line .tail{position:relative; padding:10px 0 0 0; color:#22b4aa; font-size:25px; font-weight:bold; line-height:1.1}
.box .wBox .line .tail span{font-size:20px; font-weight:normal; color:#878787; text-decoration:line-through}

.box .gli{position:relative; text-align:center}
.box .gli p:nth-child(1){font-size:45px; font-weight:bold; color:#494949}
.box .gli p:nth-child(2){font-size:35px; font-weight:bold; color:#494949; padding:5px 0 0 0}
.box .gImg{position:relative; padding:15px 0 0 0}
.box .gTail{position:relative; font-size:27px; font-weight:bold; color:#097152; line-height:1.4; padding:25px 20px 0 20px}
.box .gTail .pink{color:#f54b77; font-size:35px}
.box .gTail .pink.bullet:before{display:inline-block; content:''; width:26px; height:32px; background:url(images_hk/bullet.png) no-repeat; vertical-align:middle; margin:0 2px}
.box .gTail .pink.bullet:after{display:inline-block; content:''; width:26px; height:32px; background:url(images_hk/bullet.png) no-repeat; vertical-align:middle; margin:0 2px}

.box .card{position:relative; font-size:0;}
.box .card > div{display:inline-block; vertical-align:middle}
.box .card .txt{position:relative; text-align:left}
.box .card .txt p:nth-child(1){font-size:30px; color:#097152; font-weight:bold}
.box .card .txt p:nth-child(2){font-size:20px; color:#7c7c7c; line-height:1.5; padding:10px 0 0 0}
.box .card .txt p:nth-child(3){font-size:18px; color:#aaaaaa; padding:20px 0 0 0}
.box .card .img{margin-left:20px}

.box .buli{position:relative; text-align:center; padding:0 20px}
.box .buliTxt{position:relative; padding:40px 20px 0 20px;}
.box .buliTxt p:nth-child(1){font-size:30px; font-weight:bold; color:#097152}
.box .buliTxt p:nth-child(2){font-size:20px; color:#7c7c7c; padding:15px 0 0 0; line-height:1.4}
.box .buliTxt p:nth-child(3){font-size:17px; color:#b4b4b4; padding:15px 0 0 0; line-height:1.4}

.box .ft_txt{position:relative; line-height:1.5; font-size:17px; color:#8eb9ac; padding:0 10px}

@media screen and (max-width: 1000px){
	.con01{padding:70px 0;}
	.con01 .title .tag p span{padding:10px 25px; font-size:25px}
	
	.box{margin:50px 50px 0 50px;}
	
	.box .gTail{font-size:20px}
	.box .gTail .pink{font-size:25px}

	.box .card .img{display:block; margin-left:0; margin-top:20px}
}

@media screen and (max-width: 768px){
	.con01{padding:50px 0}
	.con01 .title{padding:0 25px}
	.con01 .title .tag p span{padding:8px 15px; font-size:16px}
	
	.box{margin:40px 20px 0 20px}
	.box > div{padding:30px 20px;}

	.box .bTit p:nth-child(1) img{max-width:180px}
	.box .bTit p:nth-child(2){padding:10px 0 0 0;}
	.box .bTit p:nth-child(2) img{max-width:150px}
	
	.box .teeTit .tee{width:150px; height:38px; line-height:38px; font-size:25px; background-size:cover}
	.box .teeTit p:nth-child(2){padding:10px 0 0 0; font-size:16px;}
	
	.box .gBox ul{padding:30px 0 0 0}
	.box .gBox ul li{width:33%; margin:0}
	.box .gBox ul li img{width:90%; max-width:none;}
	.box .gBox .tail{font-size:14px}
	
	.box .wBox .line{padding:20px 0}
	.box .wBox .line .tit{font-size:14px; padding:10px 5px 0 5px; line-height:1.4}
	.box .wBox .line .tail{font-size:14px; padding:10px 5px 0 5px}
	.box .wBox .line .tail span{font-size:13px}
	.box .wBox .line > div{display:block; width:auto; margin-bottom:10px}
	.box .wBox .line > div:nth-last-child(1){margin-bottom:0}
	.box .wBox .line .img img{max-width:250px; width:100%}
	.box .wBox .line.three > div{width:auto}
	.box .wBox .line.three > div:nth-child(3){padding-top:25px}
	.box .wBox .line.three .img img{max-width:105px}
	.box .wBox .line .img.mw105 img{max-width:105px}
	
	.box .gli p:nth-child(1){font-size:20px}
	.box .gli p:nth-child(2){font-size:17px}
	.box .gTail{font-size:14px}
	.box .gTail .pink{font-size:14px}
	.box .gTail .pink.bullet{display:inline-block}
	.box .gTail .pink.bullet:before{width:20px; height:25px; background-size:cover}
	.box .gTail .pink.bullet:after{width:20px; height:25px; background-size:cover}
	
	.box .card .txt{display:block; margin:0 auto; max-width:350px}
	.box .card .txt p:nth-child(1){font-size:20px}
	.box .card .txt p:nth-child(2){font-size:15px}
	.box .card .txt p:nth-child(3){font-size:14px}
	.box .card .img{text-align:left; margin:0 auto; max-width:350px; margin-top:20px}
	.box .card .img img{max-width:200px}
	
	.box .buliTxt p:nth-child(1){font-size:20px}
	.box .buliTxt p:nth-child(2){font-size:15px}
	.box .buliTxt p:nth-child(3){font-size:14px}
	
	.box .ft_txt{font-size:13px}
}

@media screen and (max-width: 500px){
	.box .card .txt{max-width:none}
	.box .card .img{max-width:none}
}