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


html, body{ margin: 0; padding: 0; font-family:"Microsoft Yahei";}
img{ display:block;}

#fullpage{ max-width:2000px; margin: 0 auto;}

.for_p{}
.for_m{ display:none;}
@media( max-width:1000px){
.for_p{ display:none;}
.for_m{ display:block;}
}

.zone_01{ position: relative; height: 100vh; width: 100%; background:url(../images/bg_01.jpg) center no-repeat; background-size: cover;}
.zone_01>div{ position: absolute; width: 74.5%; max-width: 1200px; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 4;}

.zone_01_mv{ max-width: 100%;}
.title_01{ position: absolute; z-index: 1; width: 100%;}
.twig_01a{ position: absolute; z-index: 3; top: 0; left: 0; }
.twig_01b{ position: absolute; z-index: 3; right: 0; bottom: 0; }

.zone_01>div a{ display: inline-block; max-width: 45%; margin: 50px 20px 0;}
.zone_01>div a img{ max-width:100%;}

.leaf_01a{ position: absolute; width: 5.35%; z-index: 4; top: 16.5%; left: 86.5%;}
.leaf_01b{ position: absolute; width: 17.45%; z-index: 4; top: 32%; left: 68%;}
.leaf_01c{ position: absolute; width: 5.7%; z-index: 4; top: 58.3%; left: 37.5%;}
.leaf_01d{ position: absolute; width: 9.4%; z-index: 4; top: 65.8%; left: 11%;}

@media( max-width:1366px){
.zone_01>div{ width: 60%; left: 50%;}
}

@media( max-width:1000px){
	
.zone_01>div{ width: 90%; top: 50%; left: 5%; transform: translateY(-50%);}
.zone_01>div a{ margin: 20px 0;}
	
.twig_01a{ max-width: 100%; }
.twig_01b{ max-width: 100%; }
	
.leaf_01a{ width: 5.35%; z-index: 4; top: 10.5%; left: 86.5%;}
.leaf_01b{ width: 17.45%; z-index: 4; top: 15%; left: 68%;}
.leaf_01c{ width: 5.7%; z-index: 4; top: 25.3%; left: 37.5%;}
.leaf_01d{ width: 9.4%; z-index: 4; top: 36.8%; left: 11%;}
}








.zone_02{ position: relative; height: 100vh; width: 100%; background:url(../images/bg_02.jpg) center no-repeat; background-size: cover;}
.zone_02>div{ position: absolute; width: 100%; top: 50%; left: 50%; z-index: 3; max-width: 80%; transform: translate(-50%, -50%);}
.zone_02>div>img{ max-width:68.6%; margin: 0 auto;}

.gift_02{ width: 90%; margin: 20px auto; font-size: 0;}
.gift_02:after{ display:block; content:""; clear: both;}
.gift_02 div{ display:inline-block; width: 20%; float: left; padding: 0 10px; box-sizing: border-box; cursor: pointer;}
.gift_02 div img{ max-width:100%;}
.gift_02 div p{ margin: 30px 0; line-height: 89px; font-size:19px; text-align: center; background: url(../images/gift_02_border.png) center no-repeat; background-size: contain; color: #cc2e2f;}

.zone_02_info{ text-align: center; z-index: 3;}
.zone_02_info img{ display:inline-block; max-width: 90%;}
.zone_02_info div{ color: #cc2e2f; font-size: 30px; font-weight: bold;}
.zone_02_info p{ }

.twig_02a{ position: absolute; z-index: 2; top: 0; left: 0; }
.twig_02b{ position: absolute; z-index: 1; right: 0; bottom: 0; }
.leaf_02a{ position: absolute; width: 5.35%; z-index: 4; top: 90%; left: 3.3%;}
.leaf_02b{ position: absolute; width: 17.45%; z-index: 4; top: 75%; left: 15.55%;}

@media( max-width:1366px){
.zone_02>div{ width: 100%; top: 50%; left: 50%;}
.title_02{ width:50%; left: 25%; z-index: 4;}
.gift_02{ width: 70%;}
.gift_02 div p{ margin: 10px 0; line-height: 50px;}
.twig_02b{ max-width: 40%;}
}

@media( max-width:1000px){
.zone_02>div{ width: 100%; top: 50%;}
.zone_02>div>img{ max-width:90%; margin: 0 auto;}
	
.title_02{ width:90%; top: 5%; left: 5%; z-index: 3;}

.gift_02{ display: flex; flex-wrap: wrap; width: 75%;}
.gift_02 div{ width: 33.3%; float: left; padding: 0 10px;}	
.gift_02 div p{ margin: 10px 0; line-height: 35px; font-size: 12px;}

.zone_02_info{ top: unset; bottom: 8%;}
	
.twig_02a{ max-width: 100%; }
.twig_02b{ max-width: 100%; }

.zone_02_info div{ line-height: 20px; font-size: 19px;}	
.zone_02_info p { font-size: 12px; padding: 0 10px;}
}

@media( max-width:750px){
.title_02{ width:90%; top: 5%; left: 5%; z-index: 3;}
	
.gift_02{ display: flex; flex-wrap: wrap; width: 100%; }
.gift_02 div{ width: 33.3%; float: left; padding: 0 10px;}	
.gift_02 div p{ margin: 10px 0; line-height: 24px; font-size: 12px;}
	
.twig_02a{ max-width: 80%; }
.twig_02b{ max-width: 80%;}
}




.zone_03{ position: relative; height: 100vh; width: 100%; background:url(../images/bg_03.jpg) center no-repeat; background-size: cover;}
.zone_03>div{ position: absolute; width: 75.55%; top: 50%; left: 50%; z-index: 2; max-width: 1200px; transform: translate(-50%, -50%);}
.zone_03>div img{ max-width:100%; margin: 0 auto;}
.zone_03>div p{ text-align: center; color: #cc2e2f;}
.zone_03>div p img{ display: inline-block; margin: 30px 0;}
.zone_03>div img.gift_03a{ cursor: pointer; max-width: 40%;}

.twig_03a{ position:absolute; left: 0; top: 0; max-width: 100%;}
.leaf_03a{ position: absolute; width: 5.35%; z-index: 4; top: 16.5%; left: 86.5%;}
.leaf_03b{ position: absolute; width: 17.45%; z-index: 4; top: 48%; left: 68%;}
.leaf_03c{ position: absolute; width: 5.7%; z-index: 4; top: 58.3%; left: 37.5%;}
.leaf_03d{ position: absolute; width: 9.4%; z-index: 4; top: 65.8%; left: 11%;}

@media( max-width:1366px){
.zone_03>div{ width: 50%;}
.zone_03>div img.gift_03a{ max-width: 40%;}
	
.twig_03a{ max-width: 50%;}
}

@media( max-width:1000px){
.zone_03>div{ width: 100%; top: 50%; left: 0; transform: translateY(-50%);}	
.zone_03>div img{ max-width:90%; }
.zone_03>div p{ font-size: 12px; padding: 0 10px; box-sizing: border-box;}
.zone_03>div p img{ margin: 10px 0;}
.zone_03>div img.gift_03a{ max-width: 90%;}
}


.zone_04{ position: relative; height: 100vh; width: 100%; background:url(../images/bg_02.jpg) center no-repeat; background-size: cover;}
.zone_04>div{ position: absolute; width: 75.85%; top: 50%; left: 50%; z-index: 2; max-width: 1200px; transform: translate(-50%, -50%);}
.zone_04>div img{ max-width:100%; margin: 0 auto;}
.zone_04>div p{ text-align: center;}
.zone_04>div p img{ display: inline-block; margin: 30px 0 0;}

.btn_zone4{ cursor:pointer;}

.twig_04a{ position:absolute; right: 0; top: 0;}
.twig_04b{ position:absolute; right: 0; bottom: 0;}
.zone_04_pic01{ position:absolute; left: 0; bottom: 0; width: 30%;}
.zone_04>div img.gift_04a{ max-width: 72.85%;}

@media( max-width:1366px){
.zone_04>div{ width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.zone_04>div p{ max-width:50%; margin: 15px auto 0;}
.zone_04>div img.title_04{ max-width:50%; margin: 0 auto;}
.zone_04>div img.gift_04a{ max-width: 45%;}
.twig_04a{ width: 50%; }
.twig_04b{ width: 30%; }
}

@media( max-width:1000px){
.zone_04>div p{ max-width:100%; margin:auto; font-size: 12px; margin: 10px 0 0 0; padding: 0 10px; box-sizing: border-box;}
.zone_04>div p img{ margin: 10px 0; max-width: 90%;}
.zone_04>div img.title_04{ max-width:90%; margin: 0 auto;}
.zone_04>div img.gift_04a{ max-width: 90%;}
.zone_04>div img.btn_zone4{ max-width: 45%; margin: 10px auto;}
.twig_04a{ width: 80%; }
.twig_04b{ width: 100%; }
}



.zone_05{ position: relative; height: 100vh; width: 100%; background:url(../images/bg_03.jpg) center no-repeat; background-size: cover;}
.zone_05>div{ position: absolute; width: 68.2%; top: 50%; left: 50%; z-index: 2; max-width: 1200px; transform: translate(-50%, -50%);}
.zone_05>div>img{ max-width: 100%;}
.zone_05 p{ text-align:center; color: #cc2e2f;}
.zone_05 p img{ display: inline-block; margin: 30px 0 0;}

.zone_05 div div{ font-size: 0;}
.zone_05 div div img{ display: inline-block; width: 32%; cursor: pointer;}
.zone_05 div div img+img{ margin:0 0 0 2%;}

.twig_05a{ position:absolute; bottom: 0; left: 0;}
.twig_05b{ position:absolute; bottom: 0; right: 0;}

.leaf_05a{ position: absolute; width: 5.35%; z-index: 4; top: 23.5%; left: 74.5%;}
.leaf_05b{ position: absolute; width: 17.45%; z-index: 4; top: 8%; left: 89%;}
.leaf_05c{ position: absolute; width: 5.7%; z-index: 4; top: 32.3%; left: 37.5%;}
.leaf_05d{ position: absolute; width: 9.4%; z-index: 4; top: 42.8%; left: 11%;}

@media( max-width:1366px){
.zone_05>div{ width: 50%; top: 50%; left: 25%; transform: translateY(-50%);}

.twig_05a{ width: 33%;}
.twig_05b{ width: 33%;}
}

@media( max-width:1000px){
.zone_05 p{ font-size: 12px;}
.zone_05>div{ width: 90%; left: 5%;}
.zone_05 p img{  margin: 10px 0 0; max-width: 90%;}
}



.zone_06{ position: relative; height: 100vh; width: 100%; background:url(../images/bg_02.jpg) center no-repeat; background-size: cover;}
.zone_06>div{ position: absolute; width: 76.55%; top: 50%; left: 50%; z-index: 5; max-width: 1200px; transform: translate(-50%, -50%);}
.zone_06>div>img{ max-width:100%;}
.zone_06>div>div{ font-size: 0; margin: 50px 0 0 0;}
.zone_06 a{ display:inline-block; width: 50%; background: url(../images/zone_06_pic01.png) center no-repeat; padding: 1%; box-sizing: border-box; background-size: contain;}
.zone_06 a img{ max-width:100%; margin: 0 auto;}

@media( max-width:1366px){
.zone_06>div{ width: 50%; top: 50%; left: 25%; transform: translateY(-50%);}
}

@media( max-width:1000px){
.zone_06>div{ width: 90%; left: 5%;}
}



.zone_07{ min-height: 100vh; width: 100%; background:url(../images/bg_01.jpg) center no-repeat; background-size: cover;}

.zone_07>div{ margin: 0 auto ; width: 50%; padding: 20px 0;}
.zone_07 h3{ margin:0; font-size: 36px;}
.zone_07 li{ padding: 0 0 20px; font-size: 14px;}
.zone_07 a{ color:#000;}

@media( max-width:1000px){
.zone_07 h3{ font-size: 19px;}
.zone_07>div{ width: 90%; left: 5%;}
.zone_07 li{ font-size: 12px;}
}



/*----表格----*/
table{ width: 100%; border:1px solid #000; margin: 30px 0 0 0;}
tr{ font-size: 14px;}
th{ background: #e4e4e4; padding:10px; font-weight: normal;}
td{ padding:10px;}

@media( max-width:750px){
tr{ font-size: 12px;}
}


/*----彈窗----*/
.overlay{ position: fixed; z-index: 98; width: 100vw; height: 100vh; top: 0; left: 0; background:url(../images/overlay.png); cursor: pointer;}
.box{ width: 600px; max-height: 90vh; padding: 30px; position: fixed; z-index: 99; background: #fff; top: 50%; left: 50%; transform: translate(-50% ,-50%); box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.box h3{ font-size: 19px; border-bottom: 1px solid #e4e4e4; padding: 0 0 10px 0; margin: 0 0 20px 0;}
.box p{ margin:0; font-size: 14px;}
.box_link{ text-align: center; margin: 20px 0 0 0;}
.box_link a{ background: #cc2e2f; color: #fff; text-decoration: none; padding: 10px 20px; display: inline-block;}
.danger{ color: #cc2e2f; font-size: 12px !important; line-height: 18px;}
.close_btn{ display: inline-block; border: 1px solid #e4e4e4; background: #e4e4e4; padding: 5px 10px; font-size: 12px; float: right; cursor: pointer;}

@media( max-width:750px){
.box{ width: 90vw; z-index: 999; padding: 15px;}
.box_link a{ padding: 5px 10px; font-size: 14px;}
.box{ overflow: auto !important;}
}