@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* ---reset.css--- */
html, body{	
	font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	-webkit-text-size-adjust:none;
}

html{
	
}
body{ 
	/*background:url("../images/bg.jpg") top center repeat;*/
	background: url("../images/texture.png") top center repeat,#ffefe0;
	
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	      line-height:1;
}

:focus { outline: 0; }

li{ list-style:none;} 
a { text-decoration:none;}






/* 滑鼠動態效果 */
.container li  { 
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out;}
.container li:hover{
	-webkit-transform: scale(0.98);;
		    transform: scale(0.98);}
.box4_ul li:active, .box4_ul li:focus, .box4_ul li:hover{
		    transform:none !important;}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden; background-image : url("../images/layout_01.jpg"),url("../images/layout_02.jpg"),url("../images/layout_03.jpg"),url("../images/layout_04.jpg"),
url("../images/layout_05.jpg"),url("../images/layout_06.jpg"),url("../images/layout_07.jpg");
background-repeat  : no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position: center 630px,center 1630px,center 2630px,center 3630px,center 4630px,center 5630px,center 6630px,center 7630px;
min-width:1200px;}
 	@media screen and ( max-width: 640px ){
		.WRAPPER{ min-width:100%;background-image:none;}
		body{ padding-bottom: 30px;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.titleitem{ position: absolute; z-index:0;}
.title01{ top:59px; left: 400px;}
.title02{ top:160px; left: 402px;}
.title03{ top:196px; left: 402px;}
.title04{ top:322px; left: 397px;}

.title05{ top:175px; left: 189px;}
.title06{ top:15px; left: 231px;}
.title07{ top:100px; left: 331px;}
.title08{ top:196px; left: 238px;}

.kv_pc {width: 100%;  position: relative; text-align:center; background:url("../images/kv.jpg") top center no-repeat;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }




/* m */
@media screen and ( max-width: 640px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	.kv_m .item50 {width:50%; text-align:center; margin:0%; float:left; }

}

.illsu01{position: absolute; left: -20px; bottom: 20px;}
.illsu02{position: absolute; right: -80px; bottom: 10px;}
.illsu03{position: absolute; left: 15px; bottom: 0px;}
.illsu04{position: absolute; left: -34px; bottom: 10px;}
	@media screen and ( max-width: 640px ){
		.illust{ display: none;}

	}

/* bg */
.bg01 {width:100%; height:auto; margin: auto; background:url("../images/bg01.jpg") top center no-repeat;}
.bg01 h2 { padding: 45px 0 0; margin: 0 ; color: #ea5914; }
.bg01 h2 p { padding: 20px 0 0; margin: 0 ; color: #56300c; letter-spacing: 3px; }


.bg07 {width:100%; height:auto; margin: auto; background:url("../images/bg06x.jpg") top center no-repeat; text-align: center; padding: 10px 0;}
.bg07 h2 { padding: 55px 0 0; margin: 0 ; color: #ea5914; }
.bg07 h2 p { padding: 10px 0 10px; margin: 0 ; color: #56300c; letter-spacing: 3px; }


h2 { padding:0; font-weight: 800; font-size: 55px;  line-height: 58px; letter-spacing:10px; text-align: center; margin: 30px 0 15px;/*text-shadow: 0px 0px 5px white;*/}
h2 p { font-weight: 500; font-size: 25px; line-height: 30px; padding: 10px 0 10px; margin: 0;}
h2 small { font-size: 30px;color: #e1435d; }
/*	@media screen and ( max-width: 1433px ){
		.bg02 { width: 100%;}
	}*/
	@media screen and ( max-width: 640px ){
		.bg01 {width:100%; height:auto; margin: auto; background:none; background:#fee0d3 url("../images/texture.png") top center repeat;}
        .bg01 h2 {background:url(../images/m/title-01.jpg) no-repeat center bottom/100%; height:29vw; margin:0; padding: 4vw 0 0; margin: 0 ; color: #ea5914; }
        .bg01 h2 p { padding: 1vw 0 0; margin: 0; color: #56300c; letter-spacing:0.1rem; }
		
		.bg07 {width:100%; height:auto; margin: auto; background:none;}
        .bg07 h1 {height:29vw; margin:0; padding: 10vw 0 0; margin: 0 ; color: #56300c; font-size: 2rem;  line-height: 2.5rem; letter-spacing:0.2rem;}
        .bg07 h1 p { padding: 1vw 0 0; margin: 0; color: #56300c; letter-spacing:0.1rem; }
		

		
		h2 { padding:2.5% 0 0% 0; font-size: 2.5rem; line-height: 3.4rem;  text-align: center; letter-spacing:0.1rem; margin: 1vw auto 3vw;}
		h2 p { font-size: 0.9rem; line-height: 1rem; padding: 0 0;  letter-spacing:0rem;  }
		h2 small { display: block;font-size: 1.2rem;line-height: 1.4rem;}
	}



/* Public Version 公版顏色設定 */
:root {
	--PV-font: #343434; /* 文字色-灰 */
	--PV-main: #96300f; /* 公版主色-橘紅 */
	--PV-price: #b70d27; /* 價格顏色-紅 */
	
	--bg-pink:repeating-linear-gradient( -45deg ,white 0%, white 7.5px, #f4b5b4 7.5px, #f4b5b4 15px, white 15px, white 22.5px, #f4b5b4 22.5px, #f4b5b4 30px); /* 粉色條紋 */
	--bg-green:repeating-linear-gradient( -45deg ,white 0%, white 7.5px, #91dfd4 7.5px, #91dfd4 15px, white 15px, white 22.5px, #91dfd4 22.5px, #91dfd4 30px); /* 綠色條紋 */
	--bg-pink2: #f06980 url(../images/texture.png) top center repeat; /* 粉色 */
	--bg-green2: #75acab url(../images/texture.png) top center repeat; /* 綠色 */
	
}



/*--------------------common--------------------*/
.P_box{ padding:0; margin:0 auto; display:flex; justify-content:center; text-align:center; align-items:flex-end; background:none;}
.P_box ul { padding:0; width:1180px;}
.P_box ul li{ display:inline-block; vertical-align:top; background:none; overflow:hidden;}
/*.P_box ul li img{ max-height:100%; max-width:100%; display:block; margin:0 auto; }*/
.P_box ul li img{ display:block; transition:all 0.3s; }
.P_box ul li img:hover{ transform:scale(0.95);}
	@media screen and ( max-width: 768px ){
		.P_box{ min-width:100%; display:block; }
		.P_box ul{ width:100%;}
		.P_box ul li{ position:initial; width:100%; padding:0.5%; margin:2% auto;}
		.P_box ul li img{ position:initial;}
	}

/*.productContentImg{ text-align:center; border-radius:2px; overflow:hidden; background:#ffffff; } */
div.productContentImg{ position:relative; width:auto; height:330px; margin:0 auto; background:#ffffff; }
div.productContentImg img{ 
	max-height:95%; max-width:95%; 
    width:auto; height:auto;
    position:absolute;  
    top:0; bottom:0; left:0; right:0;  
    margin:auto; }
span.sentence{ font-weight:500; display:block; line-height:35px; font-size:20px; margin:0% 0 1.5% 0; padding-top:1.5%; padding-bottom:1.5%; color:#ffffff; background:#902626; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
.pName{ font-weight:500; color:#343434; font-size:18px; line-height:26px;}
span.priceR{ font-weight:800; color:#b70d27; font-size:1.6em; line-height:1em; }
.mItem{ display:none;}
	@media screen and ( max-width: 768px ){
		div.productContentImg{ height:auto; padding:2% 0;}
		div.productContentImg img{ max-height:100%; max-width:100%; /*padding:2% 5%;*/}
		span.sentence{ line-height:1.2em; font-size:0.9em; padding:5px; border-bottom-left-radius:2px; border-bottom-right-radius:2px;}
		.pName{ font-size:0.9em; line-height:1.5em; color: #343434; }
		span.priceR{ font-size:1.3em;}
		span.priceY{ font-size:1.3em;}
		.mItem{ display:block; margin:0 auto;/*圖片垂直置中*/display:flex; justify-content:center; align-items:center;}
		.mItem img{ display:block; margin:0% auto; width:100%; padding:0 0%;}
	}

.sentenceCircle{ width:105px; height:105px; background:#b70d27; border-radius:50%; position:absolute; z-index:2; top:0; left:0; }
.sentenceCircle span{ display:block; color:#fff; font-weight: bold; font-size:22px; margin:27% auto; line-height:26px;}
	@media screen and ( max-width: 768px ){
		.sentenceCircle{ width:120px; height:120px; padding:0.1%;}
		.sentenceCircle span{ font-size:1.2em; line-height:1.2em; margin:28% auto;}
	}
	@media screen and ( max-width: 540px ){
		.sentenceCircle{ width:90px; height:90px; padding:0.1%;}
		.sentenceCircle span{ font-size:1.2em; line-height:1.2em; margin:28% auto;}
	}
	@media screen and ( max-width: 375px ){
		.sentenceCircle{ width:75px; height:75px; padding:1%;}
		.sentenceCircle span{ font-size:1em; line-height:1.2em; margin:24% auto;}
	}

/*公版(1x3)x2_誠品獨家*/
.s1{ width:100%; height:auto; margin:0 auto; /*background:url("../images/bg01.jpg") top center no-repeat;*/}
.s1_content{ width:1200px; margin:0 auto;}
	@media screen and ( max-width: 768px ){
		.s1{ height:auto; padding:0%;}
		.s1_content{ width:98%; height:auto; }	
	}

/* 4-7 hightlight_4p */
.hightlight_4p h2{font-size: 2.6rem;text-align: center;font-weight: 500;color: #ffffff;writing-mode: vertical-lr;position: absolute;top: -40px;left: 20px;background: #034d75;border-radius: 40px;padding: 40px 0px; }
.hightlight_4p h2 span{ font-size: 36px; display: inline-block;}
.hightlight_4p { width: 1160px; margin:60px auto 30px; border-radius: 10px; padding: 30px 0px 30px 80px; background:#ed8787 url("../images/texture.png") top center repeat;position: relative;border: double #034d75 7px;}
.hightlight_4p ul { padding: 0; overflow: hidden; display: flex; justify-content: center; }
.hightlight_4p ul li { width: 250px;padding: 0px ; margin: 5px;  text-align: center; position: relative;  background-color: #fff;}
.hightlight_4p ul li img { display: block; width: 250px;height: 250px;object-fit: cover; margin: 0 auto;  }
.hightlight_4p h3 { padding: 5px 0 ;  line-height: 32px; font-size: 22px;  color:#ffffff; background: #b70d27;font-weight: 500; }
.hightlight_4p p { font-weight: 300; font-size: 16px; line-height: 20px; color:var(--PV-font); margin: 6px 0 0;}
.hightlight_4p .sale { display: inline-block; line-height: 43px;   }
.hightlight_4p span {font-weight: bold; font-size: 22px; color:#b70d27; }
.hightlight_4p span small { font-size: 16px;}


.bg06 h2{ writing-mode: horizontal-tb; top: -60px; padding: 0px 10px 0px 40px;}
.bg06{ padding: 50px 0px 30px 0px; background: none;}
.bg06 ul li{width: 260px; margin: 7px; }
.bg06 ul li img{width: 260px;height: 260px; object-fit: contain; padding:10px 5px;} 

	@media screen and ( max-width: 640px ){
		.hightlight_4p h2{writing-mode: horizontal-tb;position: relative;padding: 5px 30px;top: 0px;left: 0px;font-size: 30px;line-height: 36px;}
		.hightlight_4p { width: 100%; padding: 2vw; margin: 0;}
		.hightlight_4p ul { padding: 1vw; flex-wrap: wrap;  }
		.hightlight_4p ul li { width: 43vw;padding: 0px ; margin: 1vw;   }
		.hightlight_4p ul li a {  }
		.hightlight_4p ul li img { width: 43vw;height: 43vw; margin: 0 auto;  }
		.hightlight_4p h3 { padding:0 ;  line-height: 1.8rem; font-size: 0.9rem; margin: 0 0 1vw;}
		.hightlight_4p p {  font-size: 0.8rem; line-height: 1rem; margin:0;}
		.hightlight_4p .sale {  line-height: 2rem;   }
		.hightlight_4p span { font-size: 1rem;  }
		.hightlight_4p span small { font-size: 0.7rem; }
		.bg06{margin-top: 3vw;}
	}



/* 4-4 circle_4p */
.circle_4p h2{font-size: 2.6rem;text-align: center;font-weight: 500;color: #ffffff;writing-mode: vertical-lr;position: absolute;top: -40px;left: 20px;background: #034d75;border-radius: 40px;padding: 40px 0px; }
.circle_4p { width: 1160px; margin:60px auto 30px; border-radius: 10px; padding: 30px 0px 30px 80px; background:#fedad2 url("../images/texture.png") top center repeat;position: relative;border: double #034d75 7px;}
.circle_4p ul { padding: 120px 15px 0px; overflow: hidden; display: flex; }
.circle_4p ul li { width: 250px; margin: 15px 5px; background-color: #fff; text-align: center; border-radius: 0 0 50px 50px; }
.circle_4p ul li a {  }
.circle_4p ul li img { display: block; border-radius:50%; margin: -132px auto 0 auto; height: 250px; width: 250px; border: solid 5px #f1f1f1;object-fit: contain;background: #ffffff; }
.circle_4p h3 { font-weight: 500; font-size: 22px; line-height: 60px; color:var(--PV-price); }
.circle_4p p { font-weight: 300; font-size: 16px; line-height: 20px; color:var(--PV-font); }
.circle_4p .sale {position: relative; display: inline-block; width: 210px; margin: 20px;overflow: hidden; padding: 0 33px 0 8px; line-height: 43px; text-align: center;  }
.circle_4p span {font-weight: 500; font-size: 20px; border-radius:50px; border: var(--PV-price) 1px solid; color:var(--PV-price); }
.circle_4p span small { font-size: 16px;}
.circle_4p span .go { position: absolute;right: 0; top: -15px; background-color:var(--PV-price); color: #fff; font-size: 16px; line-height: 63px; padding: 3px;}

.circle_4p:nth-child(4n+1){background:#be4624 url("../images/texture.png") top center repeat;}


	@media screen and ( max-width: 768px ){
		.circle_4p h2{writing-mode: horizontal-tb;position: relative;padding: 5px 30px;top: 0px;left: 0px;font-size: 30px;line-height: 36px;}
		.circle_4p { margin: 0 0 5% 0; padding: 2vw;width: 100%; }
		.circle_4p ul { padding:0 2%; flex-wrap: wrap;  }
		.circle_4p ul li { width: 48%; margin:1%; padding:1%; border-radius: 0 ; }
		.circle_4p ul li img {  width: 40vw; height: 40vw; margin: 0 auto 0 auto;}
		.circle_4p h3 {  font-size: 1rem; line-height: 1.2rem; margin: 2vw;  }
		.circle_4p p {  font-size: 0.8rem; line-height: 1rem;  }
		.circle_4p .sale { width: 85%; margin: 3vw; padding: 0 14% 0 0; line-height: 2rem;   }
		.circle_4p span { font-size: 0.9rem; border-radius:50px; }
		.circle_4p span small { font-size: 0.7rem;}
		.circle_4p span .go {  top: -18px;  font-size: 0.5rem; line-height: 4rem; padding: 1%;}
	}

p{font-size: 1rem; font-weight: 300;}/* 內文 */
small{font-size: 60%;}
big{font-size: 140%;color:#b70d27;font-weight: bold;}
.price{font-size: 0.9rem;font-weight: 500;color:var(--PV-main);display: block;}/* 價格 */
.font{color:var(--PV-font);}/* 文字顏色 */
.sm-pic{display: none;}

/* 2-5 triple */
.triple h2{font-size: 2.6rem;text-align: center;font-weight: 500;color: #ffffff;writing-mode: vertical-lr;position: absolute;top: -40px;right: 20px;background: #034d75;border-radius: 40px;padding: 40px 0px; }
.triple { width: 1160px; margin:60px auto 30px; border-radius: 10px; padding: 30px 80px 30px 0px; background:#448eb6 url("../images/texture.png") top center repeat;position: relative;border: double #034d75 7px;}
.triple ul{ display: flex; justify-content: center;}
.triple li{ width: 510px; background: #fff; margin: 5px; padding: 10px;}
.triple a { display: flex; }
.triple .font {  margin: 0 auto;padding: 0px 0px 0px 6px;width: 320px; text-align: center; display: flex;flex-direction: column;justify-content: space-between;height: 230px; overflow: hidden;}
.triple .font h4 { padding: 4px 0; background:#b70d27; color: #fff;}
.triple .font p { font-weight: 300; font-size: 16px; line-height: 20px; color:var(--PV-font); margin: 6px 0 0;  }
.triple .font .price {  }
.triple .font img {  width: 124px; height: 124px; vertical-align: bottom;}
.triple .sm-pic {display: block;}
.triple img {height: 230px;width: 230px; object-fit: contain; margin: auto;}
	@media screen and ( max-width: 640px ){
		.triple h2{writing-mode: horizontal-tb;position: relative;padding: 5px 30px;top: 0px;left: 0px;font-size: 30px;line-height: 36px; }
		.triple { width: 100%; padding: 2vw; margin: 4vw 0;}
		.triple ul{flex-wrap: wrap;width: 92vw;margin: 0 12vw 0 0vw;}
		.triple li{ width: 92vw; margin: 1vw; padding: 1vw;}
		.triple a {  }
		.triple .font { width: 44vw; height: 44vw; padding: 0 0 0 1vw;}
		.triple .font h4 { padding: 1vw 0; font-size: 1rem;}
		.triple .font p {font-size: 0.9rem; line-height: 1rem;}
		.triple .font .price {  }
		.triple .font img {  width: 15.5vw; height: 15.5vw;}
		.triple img { height: 44vw; width: 44vw;margin:auto;}
	}


.s1_content .P_box .box_1x3 ul{ padding:12% 0 2% 0;} 
.s1_content .P_box .box_1x3 ul li{ width:31.6%; text-align:center; margin:2% 0.7% 0 0.7%; position:relative;}
.s1_content .P_box .box_1x3 ul li.midCircle{ margin:0;}

.s1_content .productContentImg{ height:360px; width:360px; margin:4% auto; border-radius:50%; overflow:hidden; border:6px solid #b70d27; } 
.s1_content div.productContentImg img{ max-height:100%; max-width:100%;}

	@media screen and ( max-width: 768px ){
		/*.b1{ background:url("../images/m/bg_01.png") top center repeat; height:auto;}
		.b2{ height:auto;}*/

		.s1_content .P_box .box_1x3 ul{width: 97.5%; margin: 0 auto; padding:1%;} /**/
		.s1_content .P_box:last-child .box_1x3 ul{ padding:1% 0 5%;}

		.s1_content .P_box .box_1x3 ul li{ width:90%; margin:2% auto;}
		.s1_content .P_box .box_1x3 ul li.midCircle{ margin:2% auto;}

		.s1_content .productContentImg{ width:460px; height:460px;}
		.s1_content div.productContentImg img{ position:absolute; width:100%; height: 100%;}
	}
	@media screen and ( max-width: 540px ){
		.s1_content .productContentImg{ width:300px; height:300px;}
		.s1_content div.productContentImg img{ position:absolute; width:100%; height: 100%;}
	}
	@media screen and ( max-width: 320px ){
		.s1_content .productContentImg{ width:270px; height:270px; }
		.s1_content div.productContentImg img{ position:absolute; width:100%; height: 100%;}
	}




/*s2.1 公版(2x2)x2*/
.s2{ width:100%; margin:0 auto; position:relative;}
.s2_content{ width:1200px; margin:0 auto; position:relative;}
	@media screen and ( max-width: 768px ){
		.s2{ height:auto; background:url(../images/m/bg.jpg) repeat; padding:0% 2% 0% 2%;}
		.s2_content{ height:auto; width:100%; background:url(../images/m/bg-g.jpg) top center repeat;}	
	}

.s2_content .box_2x2_left ul, .s2_content .box_2x2_right ul
	{ margin:23% 0 0 0; padding:18% 0 0 0; width:590px;} /**/
.s2_content .box_2x2_left ul li, .s2_content .box_2x2_right ul li
	{ width:44%; margin:1% 1.25% 1.5% 1.25%; text-align: center;}

.s2_content .productContentImg{ height:270px; max-width:270px; } 
	@media screen and ( max-width: 768px ){
		.s2_content .box_2x2_left ul, .s2_content .box_2x2_right ul{ margin:0 auto; padding:1% 1% 5%; width:100%; background:url("../images/m/bg-w.jpg") top center repeat;} /**/
		.s2_content .box_2x2_left ul li, .s2_content .box_2x2_right ul li{ width:47%; margin:0.5%;}
		.s2_content .productContentImg{ width:100%; height:auto;} 
	}


/*.b5{background:url(../images/b5.png) top center no-repeat;}
.b8{background:url(../images/b8.png) top center no-repeat;}*/
/*s2.2 公版(1x4) */
.s3{ width:100%;  margin:0 auto; position:relative;}
.s3_content{ width:1200px; height:522px; margin:0 auto; position:relative;}
	@media screen and ( max-width: 768px ){
		.s3{ height:auto; background:url(../images/m/bg.jpg) repeat; padding:0% 2% 4% 2%;}
		.s3_content{ height:auto; width:100%; background:url(../images/m/bg-g.jpg) top center repeat;}	
	}

.s3_content .box_1x4 ul
	{ margin:1% auto; padding:6.2% 0 2% 0;} /**/
.s3_content .box_1x4 ul li
	{ width:23%; margin:1.25% 0.5% ; text-align: center;}

.s3_content .productContentImg{ height:270px; width:270px;}
	@media screen and ( max-width: 768px ){
		.s3_content .box_1x4 ul{ margin:0 auto; padding:1% 1% 5%; background:url("../images/m/bg-w.jpg") top center repeat;} /**/
		.s3_content .box_1x4 ul li{ width:47%; margin:0.5%;}
		.s3_content .productContentImg{ width:100%; height:auto;} 
	}
 




/* extra_keyword*/
.keyword3{ /*background:#92c9c6;*/ width:1200px; margin:0 auto; padding:0 20px; display:inline-flex; align-items:center; }

.kword{ flex:0.5;}
.kword-theme{ font-size:32px; letter-spacing:10px; font-weight:500; color:#ffffff; text-align: center;  }
.kword ul{ }
.kword ul li{ height:52px; font-size:1.5em; line-height:2.2em; font-weight:400;  }
.kword ul li a{ color:#0b5982;}
.kword ul li:nth-of-type(odd){background:#fdd5ca;}
.kword ul li:nth-of-type(even){background:#ef9b9b;}

.banner{ flex:0.6; padding-top:42px; }
.banner img{ max-width:90%; margin:1%;}

.bt-1{  padding-top:42px; }
.bt-1 img{ max-width:100%; }
.bt-1 ul li{ margin:12px auto;}
/*
.bt ul{ text-align:center;  }
.bt ul li{ color:#042620; width:195px; height:118px; margin:7% auto; font-size:1.2em; line-height:6em; font-weight:bold; background:#efe6d7; border:7px double #143f4f;}
*/
	@media screen and ( max-width: 640px ){	
		.keyword3{ width:100%; height:auto; margin:0 auto; padding:2vw 0; display:block; background: #0b5982 url("../images/texture.png") top center repeat; margin-bottom: 3vw;}

		.kword-theme{ letter-spacing:5px;  display: block;}
		.kword ul li{ display:inline-block; width:45.5vw; height:13vw; font-size:1em; line-height:13vw; margin:0 -2px; }
		.kword ul li:nth-child(2), .kword ul li:nth-child(5), .kword ul li:nth-child(6), .kword ul li:nth-child(9), .kword ul li:nth-child(10){background:#fdd5ca;}
		.kword ul li:nth-child(3), .kword ul li:nth-child(4), .kword ul li:nth-child(7), .kword ul li:nth-child(8) {background:#ef9b9b;}

		.banner{ padding:2vw 0; }
		.banner img{ max-width:95%; margin:1% auto 0.5% auto; }

		.bt-1{ padding:0; }
		.bt-1 ul li{ display:inline-block; width:45vw; height:auto; font-size:1em; line-height:auto; margin:0.5vw; background-size:100%; }
	}


/* AD */
.bn { width:1200px; min-width: 1200px; margin: 0 auto; padding:0 20px;}
.bn ul { margin:0 auto; text-align:center;}
.bn ul li { margin:5px; display:inline-block;}
.bn ul li img { width:562px; }
.bn ul li.bn1280 img{ width:1060px; } /*for 1280x307*/
	@media screen and ( max-width: 768px ){	
		.bn { padding:2vw; width:100%; min-width:100%; background: #0b5982 url("../images/texture.png") top center repeat; margin-bottom: 3vw;}
		.bn ul li { margin:1vw; }
		.bn ul li img { width:92vw; }
		.bn ul li.bn1280 img{ width:92vw; }
			
	}



/*--goto top--*/
#gotop {
  display: inline-block;
  background-color: #000;
  opacity:0.3;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 0px;
  right: 0px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  margin: 30px;
}
@media screen and ( max-width: 640px ){
#gotop {
  bottom: 30px;
  right: 0;
  margin: 2vw;	
	}
  	
}

#gotop::after {
  font-family: FontAwesome;
  content:'　';
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
    opacity:0.5;
	background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;
}
#gotop:hover {
  cursor: pointer;
  background-color: #666;
}
#gotop:active {
  background-color: #666;
}
#gotop.show {
  opacity: 0.4;
  visibility: visible;
}





/*navigation bar for pc*/
/* Style the navbar */
  #navbar {
	overflow: hidden;
	background:url("../images/navbg.jpg") top center no-repeat;
	/*max-width:1920px;*/
	   width:100%; min-width:1200px; 
	height:90px;
	z-index:999;
  }
  	@media screen and ( max-width: 768px ) {
		#navbar{ display:none;} 
		.sticky + .content { padding-top:0px !important;}
	}

  .nav_content{ width:1200px; margin:0 auto;}
  
  /* Navbar links */
  #navbar a {
	float: left;
	display: block;
	color: #fffbe4;
	text-align: center;
	text-decoration: none;
	width:300px;
	font-size:24px;
	font-weight: bold;
  }
  
  /* Page content */
  .content {
	padding: 0px;
  }
  
  /* The sticky class is added to the navbar with JS when it reaches its scroll position */
  .sticky {
	position: fixed;
	top: 0;
	width: 100%;
  }
  
  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + .content {
	padding-top: 90px;
  }


/*for mobile*/
menu{display:none;}
	@media screen and ( max-width: 768px ){
		menu{ display:block;}
	}
menu ul{
	position:fixed;
	bottom:0;
	left:0;
	margin:0;
	width:100%;
	display:flex;
	list-style: none;
	background-color:#0b5982;
	z-index:1000;
	padding:2px 0;
	border-top:none;
}
menu ul li{
	border-right:1px solid #ffffff;
	padding:4px;
	width:25%;
	box-sizing:border-box;
	text-align:center;
	font-size:13px;
	letter-spacing: -1px;
}
menu ul li a{
		font-size:13px;
}
menu ul li:nth-last-child(1){
	border-right:none;
}
menu a{
	color:#ffffff !important;
	text-decoration:none;

}