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

.header{width: 100%; height: 68px; background-color:#fff; border-bottom:0px solid #005da4; position: fixed; z-index:999; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.logo{float: left; font-size: 26px; color: #fff; line-height: 68px; margin-left: 20px;}

.logo > ul{overflow:hidden;}
.logo > ul > li{float: left;padding: 0 4px; font-size: 26px;}
.logo > ul > li:nth-child(2){color: #c7c7c7;}

.logo_01{width: 90px;padding-top: 16px;}
.logo_02{width: 90px;padding-top: 10px;}

.menu {float:right;height: 68px;}
.menu > ul{overflow:hidden;}
.menu > ul > li{float: left;}

.menu div{height: 68px;line-height: 64px; border-top:2px #fff  solid; color: #545454; transition: all .3s; padding: 0 16px; font-size: 18px;box-sizing:border-box;}
.menu div:hover{ color:#00a4a6;border-top:2px #00a4a6  solid;}

.micon{width: 68px; height: 68px; line-height: 68px; text-align: center; color: #fff; font-size: 30px; float: right; display: none; transition: all .3s; opacity: 0.6;
    background-image: url("../img/menu.png"); background-repeat: no-repeat; background-size: 120px; background-position: center left;}

.op5{background-position: center right; }



@media screen and (max-width: 980px) {
.menu {margin-right:0px; position: fixed; top:68px; right: 0; width: 100%; display: none; z-index: 88;}    
.menu li{float: none; width: 100%;} 
.menu li div{width: 100%;background-color: #00c8ca;text-align: center;color: #fff;border-bottom: 1px #84f0f2 solid;border-top:0px;}
.menu div:hover{ color:#FFFFFF;}
.micon{display: block;}  
.page{padding-bottom:80px;}
}
.tag { position: absolute; top: -68px;  }

.box01{ width: 100%; background-image: url("../img/bg.jpg"); background-size: cover; background-repeat: no-repeat;/*margin-top: 68px;*/ overflow: hidden;  position: relative;  z-index: 88;}

.people_left{position: absolute; left: -10px; bottom: -70px;z-index: 88;}
.people_right{position: absolute; right: -120px; bottom: -70px; z-index: 88;}

.box01s{max-width: 950px; margin: 0 auto;    text-align: center; padding-top: 80px;}

.box01s img{max-width: 740px;}



@media screen and (max-width: 980px) {
.people_left{display: none;}
.people_right{display: none;}    
.box01{ height: auto;}
}

@media screen and (max-width: 950px) {
.bg {display: none;} 
}



.videobox{max-width: 650px;margin:0 auto;z-index: 99;margin-top: 20px; padding: 20px 0 40px;}



@media screen and (max-width: 736px) {
    .videobox{margin-top: 0px;padding: 20px;}
}

/*youtube*/
.video-container {position: relative;padding-bottom: 53.25%;margin-bottom:0px;height: 0;overflow: hidden;border: 3px #ffd217  solid;border-radius: 12px;z-index: 88;}

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;
 }

@media screen and (max-width: 950px) {
    .video-container {border:0px #f5a94c solid; border-radius: 0px;}
    
}


.box02{width:100%; background-color: #fff; background-image: url("../img/bg02.png"); padding: 50px 16px 60px; position:relative; z-index: 88;}

.about{max-width:950px; margin: 0 auto; text-align: center;}

.about h3{font-size:18px; color:#666; line-height:1.5;text-decoration: underline;}

.about_content{text-align: center;margin-bottom: 48px;}
.about_content h1{font-size:24px; color: #2b2b2b; font-weight:bold;line-height: 1.2;margin-bottom: 8px;}
.about_content h2{font-size:18px; color:#666; line-height:1.5;}


.about_focus {font-weight:bold; text-align: center; border-radius: 12px; border:2px #00c8ca solid; padding:20px; position: relative;
margin-bottom: 20px;}
.about_focus h2{ font-size: 28px; display: inline-block; background: linear-gradient(to bottom, transparent 0%, transparent 70%, #ffd217 70%, #ffd217 100%); padding: 0 15px; line-height: 1.3; margin-bottom: 18px; color:#2b2b2b;}
.about_focus p{font-size: 24px;  color:#2b2b2b; line-height: 1.2;}


.comma_up{position: absolute; left: 15px; top: -25px;z-index: 88;}
.comma_down{position: absolute; right:15px; bottom:-25px;z-index: 88;}


@media screen and (max-width: 736px) {
.about_content h1{font-size:22px;}
.about_content h2{font-size:16px; }
.comma_up{width:40px;height: 40px;}
.comma_down{width:40px;height: 40px;}   
}

@media screen and (max-width: 320px) {
.about_content h1{font-size:18px;}
.about_focus h2{font-size: 24px;}
.about_focus p {font-size: 20px;}
}


.box03{width:100%; padding: 50px 16px 60px; background-color: #fffbda; position:relative;         z-index: 998;}

.gift{max-width:950px; margin: 0 auto;}

.gift_content { margin-bottom: 20px;}
.gift_content h1{font-size:24px; color:#2b2b2b; font-weight:bold; margin-bottom:8px; line-height: 1.2;}
.gift_content h2{font-size:16px; color:#666; line-height:1.5;  }
.gift_content a {cursor: pointer; color: #ff4072;text-decoration: underline; border-radius: 4px; font-weight: bold;}
.ago { float: right; cursor: pointer; color: #ee86a1; font-weight: bold; text-decoration: underline; border-radius: 4px;/* border: 1px #ee86a9 solid;padding: 4px 8px;*/}

.gift_goods{width: 100%; margin-top: 100px;}

.gift_goods h3{color: #00c8ca; font-size: 22px; display: inline-block;font-weight: bold;line-height:1.5;margin-bottom: 20px;}

.gift_goods > h3 > img{  width: 24px;  display: inline-block; vertical-align: middle; margin-right: 8px; position: relative; margin-top: -7px;transition: all .3s; z-index: 88px;}

@media screen and (max-width: 736px) {
.gift_goods{margin-top: 40px;}
.gift_content a {display: block;}
.gift_content h2{margin-bottom: 12px;}
}

.goodsbox > ul{overflow: hidden;}
.goodsbox > ul > li{float: left; width: calc(33.33% - 12px);  margin-right: 18px;}
.goodsbox > ul > li:last-child {margin: 0;}


.goods_box {border-radius:12px;  border:2px #00c8ca solid; overflow: hidden; text-align: center; padding-bottom: 14px; background: #fff;} 
.goods_box img {margin-bottom: 10px;}
.goods_box h1{padding: 10px 8px; background-color:#00c8ca; text-align: center; font-size: 22px; color: #fff; font-weight: bold;}
.goods_box h2{padding: 0 10px; line-height: 1.5; color: #2b2b2b; font-weight: bold; font-size: 20px;}
.goods_box p{padding: 0 10px; line-height: 1.5; color: #ff8d00;}

@media screen and (max-width: 736px) {
    .goodsbox > ul > li{width: 100%;  margin-right: 0px; margin-bottom: 36px;}
}

@media screen and (max-width: 980px) {
    .goods_box h2{font-size: 17px;}    
}

.box04 {width: 100%;  padding: 50px 16px 60px;      background-color: #fffbda; position:relative; z-index: 88;}

.message {max-width: 950px; margin: 0 auto; border-radius: 12px; border: 2px #00c8ca solid; overflow: hidden; text-align: center; padding-bottom: 14px; background: #fff;}

.message > h1{padding: 10px 8px; background-color: #00c8ca; text-align: center; font-size: 22px; color: #fff; font-weight: bold;}


.namebox{width: 100%; height: 142px; padding: 32px 24px 0; /*background-color:#fff2de;*/ border-radius: 6px; position: relative; z-index: 88; background-image: url("../img/note.png"); background-repeat: no-repeat;background-size: cover;}

.namebox h2{font-size: 18px; color: #ff4e00; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;/* margin-top: 16px;*/}

.namebox p{font-size: 16px; color: #440000; line-height: 1.3;   
    display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  overflow: hidden;}


.nameicon{position: absolute; z-index: 3; right: 4px; top:7px; width: 36px;}


@media screen and (max-width: 736px) {
    .namebox{height: 132px; padding: 26px 24px 0; }
}

.box05{width:100%; padding: 50px 16px 40px;background-color:#fffbda; position:relative; z-index: 88;}

.company{max-width:950px; margin: 0 auto;}

.company h1{font-size:24px; color: #2b2b2b; font-weight:bold;line-height: 1.2;margin-bottom: 28px; text-align: center;}

.company ul{overflow: hidden; /*margin-bottom: 8px;*/}
.company > ul > li{float: left;    width: calc(33.33% - 12px); margin-right: 18px;  margin-bottom: 20px; transition: all .3s;}

.company > ul > li:nth-child(3n+3){margin-right: 0px; }

.companybox{width: 100%;  padding: 18px 14px 30px 14px; border: 2px solid #fff ;  text-align: center;border-radius: 12px; background-color: #fff;box-shadow: 0 1px 4px rgba(0,0,0,0.1); transition: all .3s;}

.companybox:hover{border: 2px solid #00c8ca ; }

@media screen and (max-width: 736px) {
.company > ul > li{width: calc(50% - 14px);  margin-bottom: 36px;margin-right: 24px;}
.company > ul > li:nth-child(3n+3) {    margin-right: 18px;} 
.company > ul > li:nth-child(2n+2) {    margin-right: 0;} 

}


.company_logo{
    max-width: 180px;
    text-align: center;
    background-color: #fff;
    margin:0 auto;
    overflow: hidden;}

.logo_img { text-align: center;}

.logo_img img{width: 100%;}

.companybox h2{height: 40px; font-size:18px; color: #2b2b2b; font-weight:bold; text-align: center; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical;}

.company_go{width: 110px; text-align: center; padding: 10px 12px; font-size: 20px; border-radius: 50px; display: inline-block;  letter-spacing: 4px;
    text-indent: 4px; color: #ffffff; background-color: #00c8ca; transition: all .3s; box-shadow: 0 5px 0 #0093b1;}

.company_go:hover{color: #000000; background-color: #ffda00; box-shadow: 0 4px 0 #00c8ca;transform: translateY(5px);}


@media screen and (max-width: 736px) {
    .companybox h2{height: 48px; font-size:18px; color: #2b2b2b; font-weight:bold; text-align: center; line-height: 1.5; margin-bottom: 12px; 
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
    .company_go{width: 100px;font-size: 18px;}
    
    }





.box06 {width: 100%;  padding: 50px 16px 40px; background-image: url(../img/bg02.png); position:relative; z-index: 88;}

.yesno{max-width:950px; margin: 0 auto;}

.yesno h1{font-size:24px; color: #2b2b2b; font-weight:bold;line-height: 1.2;margin-bottom: 28px; text-align: center;}

.yesno {width:100%;}

.yesno_content {text-align: center;}
.yesno_content ul{overflow: hidden;}
.yesno_content > ul > li{float: left; width: calc(100% / 3 - 20px); margin-right: 20px; border-radius: 12px; background-color: #e5f7ff; margin-bottom: 40px;} 
.yesno_content > ul > li:nth-child(3n+3) {margin-right: 0; }

@media screen and (max-width: 736px) {
.yesno_content > ul > li{width: 100%;}   
}

.yesnobox{padding: 30px 32px; height: 360px;}

@media screen and (max-width: 980px) {
.yesnobox{height: 360px;}  
.yesno_content > ul > li{ margin-right: 28px;}
}

.icon_img{margin-bottom: 20px;}
.yesno_content h2{font-size:22px; line-height:1.5; color:#004563; margin-bottom: 10px; font-weight:bold;}
.yesno_content p{font-size:16px; line-height:1.5;  color: #004563;}


.box07{width:100%; padding: 50px 16px 60px;background-color: #fffbda; position: relative; z-index: 88;}

.story{max-width:950px; margin: 0 auto;}

.story h1{font-size:24px; color: #2b2b2b; font-weight:bold;line-height: 1.2;margin-bottom: 28px; text-align: center;}

.story_content{width: 100%;}

.story_content ul{overflow: hidden;}

.story_content li{width:100%; margin-bottom: 20px; background-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.1);}

.storybox {width: 100%; overflow: hidden;}

.story_img{width:300px; height: 150px; overflow: hidden; float: left;}

.story_content li:hover .story_img img{transform: scale(1.12); transition: all .3s; }

.story_content li:hover .story_h5{color:#00acd0;}

.story_f{width: calc(100% - 300px); float: left; padding: 14px 24px 18px;}

@media screen and (max-width: 736px) {
.story_f{width:100%;} 
.story_img{width: 100%; height: 190px;}
}

.story_h5{font-size: 22px; line-height: 1.5; margin-bottom: 10px; font-weight: bold; color: #2b2b2b;}

.story_p p{overflow: hidden;color: #666; line-height: 1.5;/*text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: 6;*/}

.box08{width:100%; padding: 30px 16px 14px;background-color: #eee; }

.footer_abc{max-width: 950px; margin: 0 auto;}

.footer_abc ul{overflow: hidden;}

.footer_abc > ul > li{ float: left;margin-bottom: 12px;}

.footer_abc > ul > li:nth-child(1) {width:10%;}
.footer_abc > ul > li:nth-child(2) {width:90%; }


.footer_logo img{width: 200px;}
.footer_p{font-size: 16px; color: #545454; margin-top: 8px; font-weight: bold;  line-height: 1.2;}

@media screen and (max-width: 736px) {
.footer_abc > ul > li:nth-child(1) {width:30%;}
.footer_abc > ul > li:nth-child(2) {width:70%; }
.footer_logo img{width: 160px;}
}

.cta{max-width:950px;    margin-bottom: 40px;display: none;}

.gogo { width: 200px; text-align: center; line-height: 50px; font-size: 24px; font-weight: bold; color: #fff; background-color: #ff5e56; transition: all .3s; border-radius: 50px;
    box-shadow: 0 5px 0 #c2322b; background-image:url("../img/button.png");background-repeat: no-repeat;background-size: cover;float: right;}

.gogo:hover{background-color: #ff2f65; box-shadow: 0 0px 0 #ff3268; transform: translateY(4px); transition: all .3s;}

.company_go:hover{color: #000000; background-color: #ffda00; box-shadow: 0 0px 0 #0093b1; transform: translateY(4px);}

@media screen and (max-width: 736px) {
.cta{}
.gogo{width:100%; border-radius: 8px; margin:0 auto;line-height: 48px; font-size: 22px;}
}



/*popup*/
.bgblack{position: fixed; top:0; left: 0; bottom: 0; right: 0; z-index: 1000; background-color: rgba(0,0,0,0.7);display: none;}

.popup{ width: 400px; min-height: 280px; position: absolute; top:8%;  z-index: 999; border-radius: 8px; background-color: #fffbda; padding-bottom: 60px;  /*overflow: auto;*/   overflow: hidden;}

.popup h1{font-size: 24px;     background-color: #00c8ca; text-align: center; line-height: 40px; color: #fff; font-weight: bold; position: relative;}

.popup p{font-size: 16px; line-height: 1.5; text-align: left; padding: 8px 16px 16px; color: #440000;}

.popup h2{font-size: 20px; line-height: 1.2; text-align: center; padding: 14px 16px 0px; color: #440000; font-weight: bold; margin-bottom: 24px;}

.cantlogin{font-size: 14px; line-height: 1.5; text-align: center; padding: 0px 16px 16px; color: #440000; margin-top: -12px;display: none;}

@media screen and (max-width: 736px) {
    .popup h2{ margin-bottom: 20px;}
    .cantlogin{display: block;}
}

.fblog {width: 258px; margin: 0 auto;}

.okgod{width: calc(100% - 32px); height: 44px; line-height: 44px; text-align: center; font-size: 22px; border-radius: 6px; transition: all .3s; position: absolute; z-index: 88;
    bottom: 16px; left: 16px; cursor: pointer;    color: #ffffff; background-color: #ff4b4b; font-weight: bold;}

.okgod:hover{   background-color: #ff3b3b;}


.okgod2{width: calc(100%); height: 44px; line-height: 44px; text-align: center; font-size: 22px; color: #fff; background-color: #d5000a; 
    border-radius: 6px; transition: all .3s; cursor: pointer;}

.okgod2:hover{background-color: #aa0000;}

.fbshare{width: calc(100%); height: 44px; line-height: 44px; text-align: center; font-size: 18px; color: #fff; background-color: #1877f2; 
    border-radius: 6px; transition: all .3s; cursor: pointer;}

.lineshare{width: calc(100%); height: 44px; line-height: 44px; text-align: center; font-size: 18px; color: #fff; background-color:#00B735;
    border-radius: 6px; transition: all .3s; cursor: pointer;}

.joinus{width: calc(100%); height: 44px; line-height: 44px; text-align: center; font-size: 22px; color: #ffffff; background-color: #ff4b4b;
    border-radius: 6px; transition: all .3s; cursor: pointer; /* background-image: url(../img/button.png); background-repeat: no-repeat;
    background-size: cover; */font-weight: bold;}

.fbshare:hover{background-color: #004aab;}
.lineshare:hover{background-color:#008e29;}
.joinus:hover{background-color: #ff3b3b;}


.box2s{position: absolute; bottom: 16px; left: 16px; width: calc(100% - 32px); overflow: hidden;}

.box2s li{float: left; width:100%; margin-right: 16px;/*padding: 0px 20px 6px;*/}

.box2s li:last-child{margin: 0;}


.box3s{position: absolute; bottom: 16px; left: 16px; width: calc(100% - 32px);  overflow: hidden;}

.box3s li{float: left; width: calc(50% - 8px); margin-right: 16px;}

.box3s li:nth-child(1){float: left; width:100%; margin-bottom: 20px;}

.box3s li:last-child{margin: 0;}

.popup3{ padding-bottom: 120px;}

/*close popup*/
.close{position: absolute; right: 20px; width: 40px; cursor: pointer;}



@keyframes op{ from{opacity: 0;} to{opacity: 0.8;}}


@media screen and (max-height: 680px) {   
  
    .popup2{top:5%;}

}


@media screen and (max-width: 736px) {
    
/*.popup{ top:0; left: 0; bottom: 0; right: 0; max-width: 100%; min-height: auto; position: fixed;  margin: 0; border-radius: 0; }*/
    
    .popup{ width: 300px; /*margin:-200px 0 0 -150px;*/ padding-bottom: 16px;}  
    
    .popup2{width: 98%; left: 1%!important;  top:9%!important;}
    
    .popup3{width: 98%; left: 1%!important;  top:9%!important; padding-bottom: 120px;}

    .box2s li{width: 100%; margin-bottom: 8px;}
    
    .box2s{position: static; width: calc(100%); padding: 0 16px; left: auto; bottom: auto;}
    
    
    .okgod{position: static; left: auto; bottom: auto; width: calc(100% - 32px); margin: 0 auto;}
    
    .close{position: absolute; right: 0px; width: 40px; cursor: pointer;}

}


@media screen and (max-width: 736px)  and  (orientation:landscape) {
    
    .popup2{top:0vh!important; width: 400px; overflow-y: auto; height: 100vh; left: 50%!important; margin-left: -200px;}
    
    .popup{top:0vh; height: 100vh; width: 400px; overflow-y: auto;}
    
}

@media screen and (max-width: 360px) {
    
    .popup2{width: 98%; top:4%!important;}

}

@media screen and (max-width: 330px) {
    
    .popup2{width: 98%; top:0.5%!important;}

}





.bodyno{overflow: hidden;}

.red{color: #d5000a; font-weight: bold; /*font-size: 20px;*/}


.thanks{padding:0 16px 20px 12px;}
.thanks select{width: 100%; height: 44px; line-height: 44px; border-radius: 6px; font-size: 16px; background-color:rgba(255,255,255,0.9); text-align: center; 
    padding: 0 24px 0 10px; border:0;  color: #333;
    background-image: url(../img/icon_dropdown.png);
    background-position: center right;
    background-repeat: no-repeat;
    cursor: pointer;}
.thanks > ul{overflow: hidden;}
.thanks > ul > li{width: 100%; line-height: 1.5; margin-bottom: 8px; font-size: 16px;}
.thanks > ul > li input{width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; position: relative; margin-top: 0px;}
.thanks > ul > li input[type="text"]{width: 280px; height: 28px; line-height: 3.5; padding: 0 10px; outline: none; margin-top: 2px;}
.thanks > ul > li:last-child{margin-bottom: 0;}

@media screen and (max-width: 330px) {
    .thanks > ul > li input[type="text"]{width: 220px; }
}


@media screen and (max-width: 736px) {
    
    .thanks{padding:0 16px 18px 10px;}
    
    .thanks > ul > li{font-size: 15px;} 
    
    .thanks > ul > li input{margin-right: 4px;}

}


/*popup4*/
.popup4 { width: 400px; min-height: 300px; position: absolute; top:8%;  border-radius: 8px; background-color: #fffbda; padding-bottom: 60px; 
    max-height: 80vh; overflow: auto; z-index: 999;  }

.popup4 h1{width: 400px;  font-size: 24px; background-color: #00c8ca; text-align: center; line-height: 40px; color: #fff; font-weight: bold; position: fixed; z-index: 999;}

.popup4 p{font-size: 16px; line-height: 1.5; text-align: left; padding: 8px 16px 16px; color: #440000;}

.popup4 h2{font-size: 20px; line-height: 1.2; text-align: center; padding: 14px 16px 0px; color: #440000; font-weight: bold; margin-bottom: 24px;}

.popup4 h4{padding: 0px 16px; font-size: 16px; color: #ff6046; overflow: hidden; margin-bottom: 12px;   text-align: center;}

.featlogo {width: 200px; display: inline-block; vertical-align: middle; position: relative; margin-top: -8px; margin-left: -10px; transition: all .3s;}


.winners {width:100%;  padding: 8px 24px;   text-align: center;}

.winners h3{font-size: 20px; line-height: 48px; text-align: center; color: #440000;  font-weight: bold;  display: inline-block;}


@media screen and (max-width: 736px) {
    .featlogo {width: 160px; margin-right: 12px;}
    .popup4 {max-height:none; width: 100%; top:0; bottom: 0; right: 0; left: 0!important; border-radius: 0px; }
    .popup4 h1{width: 100%;}
}



.winnerbox{width:100%; padding-top: 40px;z-index: 88;}

.winner_table{ width: 100%; padding: 0 16px 20px;}

.winner_table table{width: 100%; }

.winner_table td{max-width: 200px; border: 1px solid #ccc; font-size: 16px; height: 40px; line-height: 40px; color: #444; overflow: hidden; text-overflow: ellipsis; 
    white-space: nowrap;  padding: 0px 10px;}

.winner_table td:nth-child(1){width: 25%; text-align: center;}

.winner_table tr:nth-child(odd){background-color: #ffe6c7;}
.winner_table tr:nth-child(even){background-color: #fffcbc;}

.winner_table tr:nth-child(1){background-color: #d4f1ff;     text-align: center;}

/*popup05*/


.popup5 h2{line-height:1.5;margin-bottom: 0px;     padding: 32px 16px 0px;}


.photobox{max-width: 800px;margin: 0 auto;overflow: hidden; border: 2px #b2e5ea solid; border-radius:12px; }

.photobox img{  transition: all .3s;  margin-bottom: -3px;}

.box09{background-color: #e5f7ff;}