@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');

body{
	font-family:'微軟正黑體', Arial, "sans-serif";
	font-size:16px;
	color:#333333;
	overflow-x:hidden;
}

.webout{
	max-width:2000px;
	margin:0 auto;
	position:relative;
}

.out{
	max-width:1200px;
	padding:0 20px;
	margin:0 auto;
	position:relative;
}

/*BANNER-----------------------------------------*/
.banner{
	background-image:url("../images/banner.jpg");
	background-position:top center;
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-size:cover;
}

.banner .out{
	max-width:1030px;
	height:80vh;
	min-height:600px;
	max-height:820px;
	text-align:right;
}

.banner h6{
	position:relative;
	top:11%;
	font-size:60px;
	color:#FFFFFF;
	line-height:1.2em;
	font-weight:normal;
}

.banner .en{
	position:relative;
	top:34%;
	font-size:20px;
	color:#FFFFFF;
}

.banner .en div{
	font-size:1.5em;
	margin-top:5px;
}

.banner span{
	display:inline-block;
}

.banner .mb{
	display:none;
}

@media only screen and (max-height:700px){
	.banner h6{
		top:8%;
		font-size:36px;
	}
	
	.banner .en{
		font-size:15px;
	}
}

/*S1-----------------------------------------*/
.s1{
	padding:95px 0;
	min-height:580px;
	position:relative;
}


/*S1_LEFT-----------------*/
.s1 .left{
	max-width:42%;
}

.s1 h6{
	position:relative;
	padding-top:35px;
	font-size:30px;
	font-weight:normal;
}

.s1 h6:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	height:5px;
	width:67px;
	background:#FF9900;
}

.s1 h6 div{
	font-size:36px;
	color:#00428E;
	font-weight:bold;
	line-height:1.2em;
	max-width:10em;
	padding-top:0.3em;
}

.s1 p{
	line-height:1.7em;
	margin:40px 0;
}

.s1 a{
	display:inline-block;
	background:#DCE1EF;
	font-size:13px;
	color:#00428E;
	padding:8px 23px;
	border-radius:20px;
	transition:0.2s;
}

.s1 a:hover{
	padding:8px 28px;
}

/*S1_RIGHT-----------------*/
.s1 .right{
	max-width:53%;
	position:absolute;
	top:50%;
	right:20px;
	transform:translateY(-40%);
}

.s1 .right img{
	position:absolute;
}

.s1 .right .bg{
	position:static;
	width:100%;
}

.s1 .right .img1{
	width:9%;
	top:0;
	left:18%;
}

.s1 .right .img2{
	width:10%;
	top:0;
	left:49%;
}

.s1 .right .img3{
	width:9%;
	top:15%;
	left:31%;
}

.s1 .right .img4{
	width:9%;
	top:28.5%;
	left:0.6%;
}

.s1 .right .img5{
	width:7%;
	top:28%;
	left:21%;
}

.s1 .right .img6{
	width:13.7%;
	top:33.3%;
	left:40.3%;
}

.s1 .right .img7{
	width:12%;
	top:20.5%;
	left:61%;
}

.s1 .right .img8{
	width:6.5%;
	top:22%;
	left:82.5%;
}

.s1 .right .img9{
	width:5%;
	top:52.5%;
	left:12%;
}

.s1 .right .img10{
	width:9.4%;
	top:53.5%;
	left:37%;
}

.s1 .right .img11{
	width:10.5%;
	top:60%;
	left:62%;
}

.s1 .right .img12{
	width:6%;
	top:50%;
	left:92.5%;
}

.s1 .right .img13{
	width:7.5%;
	top:71.3%;
	left:69.5%;
}

/*S1_CLOUD-----------------*/
.s1 .cloud,
.s4 .cloud{
	position:absolute;
}

.s1 .left_c1,
.s4 .left_c1{
	left:50%;
	bottom:195px;
	margin-left:-1000px;
}

.s1 .left_c2,
.s4 .left_c2{
	left:50%;
	z-index:1;
	bottom:-20px;
	margin-left:-1000px;
}

.s1 .right_c1{
	right:50%;
	bottom:465px;
	margin-right:-1000px;
}

.s1 .right_c2,
.s4 .right_c2{
	right:50%;
	bottom:0;
	z-index:1;
	margin-right:-1000px;
}

.s1 .right_c3{
	right:50%;
	bottom:-30px;
	z-index:2;
	margin-right:-1000px;
}

/*S2-----------------------------------------*/
.s2{
	background:#F0F0F0;
	padding-top:80px;
	margin-bottom:-150px;
}

/*S2_TOP-----------------*/
.s2 .top{
	text-align:center;
	font-size:0;
}

.s2 .top .list,
.s2 .top li{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:50%;
}

.s2 .top h6{
	font-size:30px;
	line-height:1.2em;
	color:#023771;
	margin-bottom:40px;
}

.s2 .top .list:nth-child(1) h6{
	line-height:2.4em;
}

.s2 .top .text{
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
	margin-top:-30px;
	font-size:20px;
	line-height:1.2em;
	font-weight:bold;
	width:100%;
}

.s2 .top .text div{
	font-family:'Play', sans-serif;
	font-size:40px;
	font-weight:700;
	margin-bottom:10px;
}

.s2 .top .year{
	font-family:'Play', sans-serif;
	font-size:40px;
	font-weight:700;
	margin-top:0.5em;
}

.s2 .top img{
	width:90%;
	max-width:240px;
}

/*S2_BOTTOM-----------------*/
.s2 .bottom{
	font-size:0;
	margin-top:70px;
	position:relative;
	z-index:1;
}

.s2 .bottom li{
	display:inline-block;
	vertical-align:top;
	width:50%;
	position:relative;
	overflow:hidden;
}

.s2 .bottom img{
	width:100%;
}

.s2 .bottom .box{
	position:absolute;
	top:50%;
	left:12%;
	width:300px;
	height:205px;
	transform:translateY(-50%);
	color:#FFFFFF;
	font-weight:bold;
}

.s2 .bottom h6{
	font-size:24px;
	padding-bottom:1em;
	margin-bottom:1em;
	border-bottom:rgba(255,255,255,0.3) 1px solid;
}

.s2 .bottom .text{
	font-size:36px;
}

.s2 .bottom .left .text div{
	font-family:'Play', sans-serif;
	font-size:96px;
}

.s2 .bottom .right .text div{
	font-size:50px;
	margin-bottom:10px;
}

.s2 .bottom .right .text span{
	font-family:'Play', sans-serif;
}

.s2 a,
.s4 .text a,
.s5 .text a,
.s9 a{
	display:block;
	width:115px;
	font-size:13px;
	color:#00428E;
	text-align:center;
	padding:10px 0;
	background:#F0F0F0;
	border-radius:20px;
	margin:20px 0 0 auto;
	position:relative;
	z-index:1;
	transition:0.2s;
}

.s2 a:hover,
.s4 .text a:hover,
.s5 .text a:hover,
.s9 a:hover{
	width:130px;
}

/*S3-----------------------------------------*/
.s3{
	background:#FDB906;
	padding:180px 20px 65px;
	font-family:'Noto Sans TC', sans-serif;
	color:#00244A;
	font-weight:700;
	text-align:center;
	position:relative;
}

.s3:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-35px;
	z-index:1;
	border-style:solid;
	border-width:35px 55px 0 55px;
	border-color:#FDB906 transparent transparent transparent;
	margin-left:-55px;
}

.s3 .top{
	font-size:36px;
	line-height:1.2em;
	margin-bottom:0.5em;
}

.s3 .top img{
	width:40px;
	vertical-align:top;
	margin:0 15px;
}

.s3 .bottom{
	font-size:54px;
	line-height:1.2em;
}

/*S4-----------------------------------------*/
.s4, .s5{
	background-image:url("../images/s4_bg.jpg");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	padding:160px 0 100px;
	position:relative;
	background-attachment:fixed;
}

/*S4_TOP-----------------*/
.s4 .top,
.s5 .top{
	margin-bottom:90px;
	position:relative;
}

.s4 .top img,
.s5 .top img{
	position:absolute;
	top:0;
	right:0;
	width:56%;
	animation-delay:0.3s;
}

.s4 .text,
.s5 .text{
	color:#FFFFFF;
	width:42%;
	max-width:460px;
}

.s4 .text h6,
.s5 .text h6{
	font-family:'Noto Sans TC', sans-serif;
	font-size:46px;
	font-weight:700;
	position:relative;
}

.s4 .text h6:after,
.s5 .text h6:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:120px;
	height:2px;
	background:#FF9900;
}

.s4 .text h6 div,
.s5 .text h6 div{
	font-family:'Play', sans-serif;
	font-size:33px;
	padding:0.5em 0 1em;
}

.s4 .text p,
.s5 .text p{
	font-size:20px;
	line-height:1.5em;
	margin:40px 0 30px;
}

.s4 .text a,
.s5 .text a{
	margin:0;
}

/*S4_BOTTOM-----------------*/
.s4 .bottom,
.s5 .bottom,
.s7 .out{
	max-width:1030px;
	margin:0 auto;
}

.s4 .bottom h6,
.s5 .bottom h6,
.s7 p{
	font-size:22px;
	line-height:1.3em;
	color:#FFFFFF;
	margin-bottom:1em;
}

.s4 .bottom .video_out,
.s5 .bottom .video_out,
.s7 .video_out{
	padding-bottom:56.25%;
	border:#E1E1E1 10px solid;
	position:relative;
}

.s4 .bottom iframe,
.s5 .bottom iframe,
.s7 iframe{
	position:absolute;
	top:0;
	left:0;
}

/*S5-----------------------------------------*/
.s5{
	background-image:url("../images/s5_bg.jpg");
	padding:160px 0 0;
}

.s5 .top{
	margin-bottom:10px;
}

.s5 .bottom{
	position:relative;
	bottom:-80px;
}

/*S6-----------------------------------------*/
.s6{
	background:url("../images/s6_bg.png") top center no-repeat;
	padding:160px 0 30px;
}

.s6 .title{
	position:absolute;
	top:0;
	left:20px;
	width:19%;
	max-width:210px;
	font-size:28px;
	color:#FFFFFF;
	text-align:right;
	padding:40px 20px;
	background:url("../images/s6_img.png");
}

.s6 .title div{
	font-family:'Play', sans-serif;
	font-size:35px;
	line-height:1.2em;
	font-weight:700;
	margin-bottom:10px;
}

.s6 ul,
.s8 .bottom ul{
	font-size:0;
	text-align:right;
}

.s6 li,
.s8 .bottom li{
	display:inline-block;
	vertical-align:top;
	width:23%;
	text-align:left;
	margin:0 0 50px 20px;
}

.s6 li a,
.s8 .bottom li a{
	position:relative;
	top:0;
	transition:0.2s;
}

.s6 li:hover a,
.s8 .bottom li:hover a{
	top:-10px;
}

.s6 h6,
.s8 .bottom h6{
	font-size:22px;
	color:#008282;
	line-height:1.2em;
	height:2.4em;
}

.s6 p,
.s8 .bottom p{
	font-size:16px;
	color:#333333;
	line-height:1.5em;
	height:7.5em;
	padding:1em 0 2em;
	border-bottom:#CCCCCC 1px solid;
	margin-bottom:10px;
	transition:0.2s;
}

.s6 li:hover p{
	border-bottom:#357C6F 1px solid;
}

.s6 span{
	font-size:13px;
	color:#357C6F;
}

/*S7-----------------------------------------*/
.s7{
	padding:120px 0 80px;
	background:url("../images/s7_bg.jpg") top center no-repeat;
	background-size:cover;
	background-attachment:fixed
}

.s7 h6{
	font-family:'Noto Sans TC', sans-serif;
	font-size:40px;
	color:#FFFFFF;
	font-weight:700;
	text-align:center;
	position:relative;
	padding-bottom:2.3em;
}

.s7 h6:after{
	content:"";
	position:absolute;
	left:50%;
	top:1.8em;
	width:106px;
	height:1px;
	background:#FFFFFF;
	margin-left:-53px;
}

.s7 p{
	font-weight:bold;
	text-align:center;
}

/*S8-----------------------------------------*/
.s8{
	padding:80px 0 100px;
	background:#FFFFFF url("../images/s8_bg.png") bottom center no-repeat;
}

.s8 .out{
	max-width:1440px;
}

.s8 h5{
	font-family:'Noto Sans TC', sans-serif;
	font-size:40px;
	font-weight:700;
	text-align:center;
	position:relative;
	padding-bottom:2.3em;
}

.s8 h5:after{
	content:"";
	position:absolute;
	left:50%;
	top:1.8em;
	width:106px;
	height:1px;
	background:#F3690B;
	margin-left:-53px;
}

/*S8_TOP-----------------*/
.s8 .top{
	font-size:0;
	margin:20px;
}

.s8 .top li{
	display:inline-block;
	vertical-align:middle;
	width:33.33%;
	margin-bottom:50px;
}

.s8 .top a{
	display:block;
	margin:0 1px;
	position:relative;
	z-index:1;
	transition:0.2s;
}

.s8 .top a:hover{
	z-index:9;
	transform:scale(1.1);
}

.s8 .top a div{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	font-size:22px;
	color:#FFFFFF;
	font-weight:bold;
	background:rgba(0,102,204,0.7);
	padding:1em 1.5em;
	transition:0.2s;
}

.s8 .top a:hover div{
	font-size:30px;
	color:#FFFFFF;
	font-weight:bold;
	background:rgba(137,165,12,1);
	padding:1em;
}

.s8 .top a span{
	position:absolute;
	top:37px;
	right:30px;
	font-size:13px;
	padding-right:15px;
	opacity:0
}

.s8 .top a:hover span{
	opacity:1;
}

.s8 .top a span:after{
	content:"";
	position:absolute;
	top:50%;
	right:0;
	width:6px;
	height:6px;
	border-color:#FFFFFF;
	border-style:solid;
	border-width:2px 2px 0 0;
	transform:rotate(45deg);
	margin-top:-2px;
}

.s8 .top img{
	display:block;
	width:100%;
}

/*S8_BOTTOM-----------------*/
.s8 .bottom{
	max-width:1200px;
	margin:0 auto;
	min-height:320px;
	position:relative;
}

.s8 .title{
	position:absolute;
	top:0;
	left:0;
	width:19%;
	max-width:210px;
}

.s8 .title div{
	position:absolute;
	top:22%;
	left:0;
	width:100%;
	font-size:28px;
	color:#FFCC00;
	font-weight:bold;
	line-height:1.3em;
	text-align:center;
}

.s8 .title img{
	width:100%;
}

.s8 .bottom li{
	width:24.5%;
}

.s8 .bottom h6{
	color:#02468A;
}

.s8 .bottom p{
	height:6em;
}

.s8 .bottom li:hover p{
	border-bottom:#02468A 1px solid;
}

.s8 .bottom span{
	font-size:13px;
	color:#02468A
}

/*S9-----------------------------------------*/
.s9{
	padding:70px 0;
	background:#FFCC00 url("../images/s9_bg.png") top 317px center no-repeat;
}

.s9 .out{
	max-width:1265px;
}

/*S9_TOP-----------------*/
.s9 .top .left{
	float:left;
	width:45%;
	max-width:530px;
	box-shadow:20px 20px 40px rgba(0,0,0,0.2);
	margin-top:-120px;
}

.s9 .top .text{
	float:right;
	width:51%;
}

.s9 .top h6{
	font-family:'Noto Sans TC', sans-serif;
	font-size:38px;
	color:#0066AB;
	font-weight:700;
	position:relative;
}

.s9 .top h6:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:106px;
	height:1px;
	background:#2680DC;
}

.s9 .top h6 div{
	font-size:28px;
	color:#333333;
	line-height:1.2em;
	font-weight:normal;
	padding:0.6em 0;
}

.s9 .top p{
	font-size:20px;
	line-height:1.5em;
	margin:2em 0 1em;
}

.s9 a{
	color:#FFFFFF;
	background:#4D8FD1;
	margin:0;
}

.s9 a:hover{
	background:#0066AB;
}

.s9 .top .ps{
	margin-top:45px;
	position:relative;
	min-height:70px;
	padding-left:80px;
	font-size:20px;
	line-height:1.5em;
	color:#003877;
	font-weight:bold;
}

.s9 .top .ps img{
	position:absolute;
	top:0;
	left:0;
	width:70px;
}

/*S9_BOTTOM-----------------*/
.s9 .bottom{
	max-width:1160px;
	margin:50px auto 0;
}

.s9 .bottom li{
	padding-top:70px;
	position:relative;
}

.s9 .bottom li img{
    width:50%;
	max-width:230px;
    min-width:160px;
	position:absolute;
	top:70px;
	left:0;
}

.s9 .bottom .text{
	padding-left:270px;
}

.s9 .bottom h6{
	font-size:26px;
	line-height:1.3em;
}

.s9 .bottom p{
	font-size:20px;
	line-height:1.5em;
	padding:0.5em 0;
}

.s9 .bottom .button{
	font-size:18px;
	font-weight:bold;
	padding:1em 0;
	border-bottom:#4D8FD1 1px solid;
	cursor:pointer;
	margin-top:1em;
	position:relative;
}

.s9 .bottom .button:before{
	content:"展開";
}

.s9 .bottom .button.active:before{
	content:"收合";
}

.s9 .bottom .button:after{
	content:"";
	position:absolute;
	top:1em;
	left:2.5em;
	width:10px;
	height:10px;
	border-style:solid;
	border-color:#4D8FD1;
	border-width:0 0 2px 2px;
	transform:rotate(-45deg);
	transition:0.2s;
}

.s9 .bottom .button.active:after{
	top:1.4em;
	transform:rotate(135deg);
}

.s9 .bottom .button + p{
	display:none;
}

/*S10-----------------------------------------*/
.s10{
	padding:80px 0;
	position:relative;
	z-index:1;
	background:#FFFFFF;
}

.s10 .out{
	max-width:1060px;
}

.s10 h6{
	position:absolute;
	top:50%;
	left:20px;
	font-size:33px;
	padding-bottom:25px;
	margin-top:-29px;
}

.s10 h6:before{
	content:"";
	position:absolute;
	right:0;
	bottom:0;
	width:83px;
	height:1px;
	background:#004088;
}

.s10 h6:after{
	content:"";
	position:absolute;
	right:0;
	bottom:0;
	width:25px;
	height:1px;
	background:#004088;
	transform:rotate(-45deg);
	transform-origin:right top;
}

.s10 ul{
	padding-left:25%;
	font-size:0;
}

.s10 li{
	display:inline-block;
	vertical-align:top;
	width:50%;
}

.s10 a{
	display:block;
	background:#F0F0F0;
	margin:2px;
	color:#333333;
	padding-top:30px;
	transition:0.1s;
}

.s10 a:hover{
	color:#FFFFFF;
	background:#003B7E;
}

.s10 a div{
	padding-top:30px;
	margin:0 30px;
	font-size:22px;
	line-height:1.3em;
	font-weight:bold;
	min-height:2.6em;
	padding-bottom:2.6em;
	position:relative;
	border-bottom:#F0F0F0 10px solid;
	transition:padding-left 0.1s;
}

.s10 a:hover div{
	padding-left:1em;
	border-bottom:#FFCC00 10px solid;
}

.s10 a:hover div:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	border-style:solid;
	border-width:17px 17px 0 0;
	border-color:#FFCC00 transparent transparent transparent;
}

.s10 a span:before{
	content:"";
	position:absolute;
	left:0;
	bottom:1.3em;
	display:block;
	width:53px;
	height:1px;
	background:#00428E;
}

.s10 a:hover span:before{
	content:"";
	left:auto;
	right:0;
	background:#FFCC00;
}

.s10 a:hover span:after{
	content:"";
	position:absolute;
	right:0;
	bottom:29px;
	width:17px;
	height:1px;
	background:#FFCC00;
	transform:rotate(45deg);
	transform-origin:right bottom;
}

.s10 li:nth-child(3) a span:before{
	content:"- 下載領取活動好禮 -";
	color:#CC0000;
	left:0;
	right:auto;
	bottom:0.8em;
	width:auto;
	height:auto;
	background:none;
	transition:0.1s;
}

.s10 li:nth-child(3) a:hover span:before{
	color:#FFCC00;
	left:1em;
}

.s10 li:nth-child(3) a span:after{
	display:none;
}




/*COMMON--------------------------------------------------------------------*/
article{
	margin-top:98px;
	transition:0.2s;
}

header.active + article{
	margin-top:78px;
}

/*HEADER-----------------------------------------*/
header{
	position:fixed;
	top:0;
	left:0;
	z-index:1000;
	padding:30px 0;
	width:100%;
	background:#FFFFFF;
	box-shadow:0px 2px 2px rgba(0,0,0,0.1);
	transition:0.2s;
}

header.active{
	padding:20px 0;
}

header .logo{
	display:inline-block;
	position:absolute;
	top:50%;
	left:20px;
	z-index:1;
	width:40%;
	max-width:175px;
	transform:translateY(-50%);
	transition:max-width 0.2s;
}

header.active .logo{
	max-width:130px;
}

header .logo img{
	width:100%;
}

/*HEADER_MENU-----------------*/
header .pc{
	text-align:right;
}

header .pc li{
	display:inline-block;
	font-size:18px;
	margin:0 4px;
}

header .pc li:last-child{
	margin-right:0;
}

header .pc li a{
	display:block;
	color:#333333;
	font-weight:bold;
	padding:10px 15px;
	border-radius:5px;
	cursor:pointer;
	transition:0.1s;
}

header .pc li a:hover,
header .pc li a.active{
	color:#FFFFFF;
	background:#E75803;
}

header .pc ul{
	display:inline-block;
}

header .mb,
header .mb_bt{
	display:none;
}

/*IMAGE_ANIMATION-----------------------------------------*/
.imagemask.animated,
.maskmove.animated{
	animation-timing-function:cubic-bezier(0.77, 0, 0.175, 1);
}

.wow{
	animation-fill-mode:both;
	animation-duration:1s;
}

.imagemask{
	position:absolute;
	top:0;
	z-index:1;
	height:100%;
	background:#FFFFFF;
}

@keyframes maskmove{
	0%{
	right:100%;
	width:100%;
	}
	70%{
	right:0%;
	width:100%;
	}
	100%{
	right:0%;
	width:0%;
	}
}

.maskmove{
	animation-name:maskmove;
}

@keyframes imagemove{
	0%{
	transform:translateX(-101%);
	}
	70%, 100%{
	transform:none;
	}
}

.imagemove{
	position:relative;
	animation-name:imagemove;
	animation-delay:0.3s;
}

.right .maskmove{
	animation-delay:0.7s;
}

.right .imagemove{
	animation-delay:1s;
}

@keyframes textmove{
	0%{
		opacity:0;
		margin-left:-5%;
	}
	70%, 100%{
		opacity:1;
		margin-left:0%;
	}
}

.textmove{
	position:relative;
	z-index:1;
	animation-name:textmove;
	animation-delay:1s;
}

.right .textmove{
	animation-delay:1.7s;
}

@keyframes fadeInUp{
    0%{
        opacity:0;
        transform:translateY(100%);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.fadeInUp{
    animation-name:fadeInUp;
}

/*GIFT-----------------------------------------*/
.gift{
	display:inline-block;
	position:fixed;
	top:50%;
	right:0;
	z-index:90;
	font-size:18px;
	font-weight:bold;
	line-height:1.5em;
	background:#004C9D;
	box-shadow:0 3px #CC6600;
	border-radius:10px 0 0 10px;
	transform:translateY(-45%);
	animation:gift 0.5s both;
	transition:background 0.2s;
}

.gift:hover{
	background:#003472;
}

.gift a{
	display:block;
	color:#EFC60D;
	padding:1em;
	transition:0.2s;
}

.gift:hover a{
	padding:1.5em 1em;
}

.gift div{
	color:#FFFFFF;
	position:relative;
	padding-bottom:1em;
}

.gift div:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0.5em;
	width:100%;
	border-top:#003384 1px solid;
	height:1px;
	background:#2B63A0;
}

.gift img{
	width:20px;
	vertical-align:top;
	margin-right:5px;
}

.gift span{
	display:none;
}

@keyframes gift{
	0%{
		right:-170px;
	}
	100%{
		right:0;
	}
}

/*FOOTER-----------------------------------------*/
footer{
	padding:25px 0;
	background:#00428E;
	font-size:15px;
	color:#A6BDD8;
	font-weight:bold;
}

footer img{
	width:150px;
	margin-right:5px;
	vertical-align:bottom;
}

/*MOBILE----------------------------------------------------------------------------*/
@media only screen and (max-width:1000px){
	/*BANNER-----------------------------------------*/
	.banner{
		background-image:none;
	}
	
	.banner .out{
		display:none;
	}
	
	.banner .mb{
		display:block;
		width:100%;
	}
	
	/*S1-----------------------------------------*/
	.s1{
		padding:60px 0 20px;
		min-height:0;
	}
	
	.s1 .out{
		max-width:540px;
	}
	
	.s1 .left{
		max-width:none;
		margin-bottom:50px;
	}
	
	.s1 .right{
		max-width:100%;
		position:relative;
        top:0;
        right:0;
		transform:none;
	}
	
	/*S2-----------------------------------------*/
	.s2 .out{
		max-width:600px;
	}
	
	/*S2_TOP-----------------*/
	.s2 .top .list,
	.s2 .top li{
		display:block;
		width:auto;
	}
	
	.s2 .top img{
		max-width:200px;
	}
	
	.s2 .top .list li{
		margin-bottom:50px;
	}
	
	.s2 .top .list:nth-child(1) h6{
		line-height:1.2em;
	}
	
	/*S2_BOTTOM-----------------*/
	.s2 .bottom li{
		display:block;
		width:auto;
	}
	
	.s2 .bottom .box{
		width:auto;
		height:auto;
	}
	
	/*S4-----------------------------------------*/
	.s4{
		padding:100px 0;
	}
	
	.s4 .out,
	.s5 .out{
		max-width:500px;
	}
	
	.s4 .top img,
	.s5 .top img{
		position:static;
		width:100%;
		margin-top:50px;
	}
	
	.s4 .text,
	.s5 .text{
		width:auto;
		max-width:none;
	}
	
	.s4 .text h6,
	.s5 .text h6{
		font-size:46px;
	}
	
	.s4 .text h6 div,
	.s5 .text h6 div{
		font-size:30px;
	}
	
	/*S5-----------------------------------------*/
	.s5{
		padding:80px 0 0;
	}
	
	/*S6-----------------------------------------*/
	.s6 .out,
	.s8 .bottom{
		max-width:280px;
	}
	
	.s6 .title,
	.s8 .title{
		position:static;
		width:210px;
		margin-bottom:50px;
	}
	
	.s6 .title{
		width:170px;
		text-align:left;
	}
	
	.s6 li,
	.s8 .bottom li{
		display:block;
		width:auto;
		margin:0 0 50px;
	}
	
	.s6 h6,
	.s6 p,
	.s8 .bottom h6,
	.s8 .bottom p{
		height:auto;
	}
	
	/*S7-----------------------------------------*/
	.s7 h6,
	.s8 h5{
		font-size:36px;
	}
	
	/*S8-----------------------------------------*/
	.s8 .out{
		max-width:480px;
	}
	
	/*S8_TOP-----------------*/
	.s8 .top li{
		display:block;
		width:auto;
	}
	
	/*S8_BOTTOM-----------------*/
	.s8 .title{
		position:relative;
	}
	
	/*S9-----------------------------------------*/
	.s9 .out{
		max-width:550px;
	}
	
	/*S9_TOP-----------------*/
	.s9 .top .left{
		display:block;
		float:none;
		width:80%;
		margin:-120px auto 50px;
	}
	
	.s9 .top .text{
		float:none;
		width:auto;
	}
	
	/*S9_BOTTOM-----------------*/
	.s9 .bottom{
		margin:0 auto;
	}
	
	.s9 .bottom li img{
		position:static;
		margin-bottom:20px;
	}
	
	.s9 .bottom .text{
		padding-left:0;
	}
	
	/*S10-----------------------------------------*/
	.s10{
		padding:80px 0 60px;
	}
	
	.s10 h6{
		position:relative;
		top:0;
		left:0;
		margin-top:0;
		width:6em;
		margin:0 auto 50px;
	}
	
	.s10 ul{
		padding-left:0;
		max-width:400px;
		margin:0 auto;
	}
	
	.s10 li{
		display:block;
		width:auto;
		margin-bottom:20px;
	}
	
	/*COMMON--------------------------------------------------------------------*/
	article,
	header.active + article{
		margin-top:60px;
	}
	
	.cloud{
		display:none;
	}
	
	/*HEADER-----------------------------------------*/
	header,
	header.active{
		padding:0;
	}
	
	/*HEADER_MENU-----------------*/
	header nav{
		height:60px;
	}
	
	header .logo,
	header.active .logo{
		left:50%;
		max-width:110px;
		transform:translate(-50%,-50%);
	}
	
	header .pc{
		display:none;
	}
	
	/*HEADER_BT-----------------*/
	header .mb_bt{
		display:block;
		position:absolute;
		top:50%;
		right:20px;
		width:40px;
		height:40px;
		margin-top:-20px;
		text-align:left;
		cursor:pointer;
	}

	header .mb_bt span{
		display:block;
		height:2px;
		width:100%;
		background:#666666;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
		transition:0.3s;
	}
	
	header .mb_bt span:before,
	header .mb_bt span:after{
		content:"";
		position:absolute;
		right:0;
		height:2px;
		width:100%;
		background:#666666;
		transition:0.3s;
	}

	header .mb_bt span:before{
		top:-8px;
	}

	header .mb_bt span:after{
		top:8px;
	}
	
	header .mb_bt.active span:before{
		top:0;
		transform:rotate(45deg);
	}
	
	header .mb_bt.active span:after{
		top:0;
		transform:rotate(-45deg);
	}
	
	header .mb_bt.active:hover span{
		transform:rotate(-90deg);
	}
	
	header .mb_bt.active span{
		background:none;
	}
	
	/*HEADER_MB-----------------*/
	header .mb{
		display:block;
		position:fixed;
		top:60px;
		bottom:0;
		left:0;
		width:100%;
		overflow-y:auto;
		background:#F0F0F0;
		box-shadow:inset 0 2px 2px rgba(0,0,0,0.1);
		transform:translateX(100%);
		transition:0.3s ease-in-out;
		-webkit-overflow-scrolling:touch;
	}
	
	header .mb.active{
		transform:translateX(0);
	}
	
	/*HEADER_MENU-----------------*/
	header .mb ul{
		padding:40px 40px 100px;
		text-align:center;
	}
	
	header .mb a{
		display:inline-block;
		color:#333333;
		font-weight:bold;
		width:200px;
		padding:0.7em 0;
		margin:0.3em 0;
		cursor:pointer;
		transition:0.1s;
	}
	
	header .mb a:hover,
	header .mb a.active{
		color:#FFFFFF;
		background:#E65802;
	}
	
	/*GIFT-----------------------------------------*/
	.gift{
		display:block;
		position:-webkit-sticky;
		position:sticky;
		top:auto;
		bottom:0;
		width:100%;
		border-radius:0;
		box-shadow:none;
		transform:none;
		animation:none;
		text-align:center;
	}
	
	.gift:hover a{
		padding:1em;
	}
	
	.gift div{
		display:inline;
		padding-bottom:0;
	}
	
	.gift div:after{
		display:none;
	}
	
	.gift br{
		display:none;
	}
	
	.gift span{
		display:inline;
	}
	
	.gift .pc{
		display:none;
	}
}

@media only screen and (max-width:550px){
	/*S2-----------------------------------------*/
	
	/*S2_BOTTOM-----------------*/
	.s2 .bottom h6{
		font-size:4.4vw;
	}
	
	.s2 .bottom .text{
		font-size:6.5vw;
	}
	
	.s2 .bottom .left .text div{
		font-size:17.5vw;
	}
	
	.s2 .bottom .right .text div{
		font-size:9vw;
	}
	
	/*S3-----------------------------------------*/
	.s3 .top{
		font-size:6.5vw;
	}
	
	.s3 .top img{
		width:8%;
	}
	
	.s3 .bottom{
		font-size:9vw;
	}
	
	.s3{
		padding:180px 20px 12%;
	}
}