@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
@import url("owl.carousel.css");
@import url("owl.carousel5.css");
@import url("owl.theme.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

    html, body {
      height: 100%;
      margin: 0;
    }
/* 載入畫面樣式 */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
  }
   
  
  .spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
  }
  
  /* 旋轉動畫 */
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }
  
body {
	font-size:.9rem;
	line-height: 180%;
	margin: 0;
	padding: 0;
	color:#000;
	text-align: left;
	font-family: 'Noto Sans TC','sans-serif';
	letter-spacing	:1px;
	font-weight: 400;
	background-image:url(../images/bg.jpg);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-color: #f2d0cf;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
a, a:hover, a:active {
	text-decoration:none !important;
	color: rgba(255, 66, 78, 1);
}
.im{
	color: #ba121a;
	font-weight: bold;
}
img {border:0px;}

#topcontrol { z-index:99999;}
.nowLoading {
	position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -20px;
  width: 200px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}


.ball {
  width: 11px;
  height: 11px;
  border-radius: 5px;
  display: inline-block;
  margin: 0 5px;
  
  animation: 2s bounce ease infinite;
}

.blue {
  background-color: #3db3bf;
}

.red {
  background-color: #ffda04;
  animation-delay: .25s;
}

.yellow {
  background-color: #3db3bf;
  animation-delay: .5s;
}

.green {
  background-color: #ffda04;
  animation-delay: .75s;
}

@keyframes bounce {  
    50% {
        transform: translateY(25px);
    }
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
.wrapper { width:100%; 	 margin:0 auto;  height: auto; overflow-x: hidden;}
.container{width:100%; margin:56px auto 0 auto;position: relative; } 
#box{width:100%; height:1200px;}
#top_pic {width:1068px; height:1377px; position: relative; left:60px;  overflow:hidden;}
#top{ 
	width:100%; 
	max-width: 1121px;
	position:relative; 
	z-index: 1; 

 }
.main{
	width: 100%;
	position: relative;
	margin:  0 auto;
	padding: 4rem 0;
	text-align: center;
	background-size: contain;
	max-width: 1200px;
} 
.main a{
	cursor: pointer;
}
.pctop{
	margin:  0 auto;
	width: 100%;
	max-width: 1400px;

}
.kv {
	position: relative;
	width: 100%;
	z-index: 99;
	text-align: center;
	padding: 0 0 0 3vw;
	margin: 0 auto 1rem auto;
	max-width: 1200px;
}

.kv img {	
	width: 100%;
	height: auto;
	max-width: 700px;
}

.top-gift{
	width: 100%;
	position: relative;
	max-width: 1000px;
	text-align: center;
	display: inline-block;
}
.slogan {
	width: 100%;
	position: relative;
	z-index: 1;
	display: flex;
	padding: 0 4rem 2rem 4rem;
	overflow: hidden;
	flex-wrap: wrap;
}

.slogan li {
	width: 16.6666%;
}
.slogan li img{
	width: 90%;
}

.slogan2,.slogan3{
	position: absolute;
	top: 0;
}
.event-rule {
	width: 100%;
	position: relative;
	top:0px;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	font-size: 1.25rem;
	padding-bottom: 2rem;
}
.event-rule img {
	width: 100%;
}

.event-rule p {
	background-color: #fff;
	display: inline-block;
	padding: .5rem;
	margin-bottom: .5rem;
}

.rule-s {
	font-size: .75rem;
	padding: .25rem !important;
}
.event-rule .rule-h1{
	font-size: 1.5rem;
	background-color: #F4C200;
	padding: .5rem 1rem;
	font-weight: bold;
	letter-spacing: .5rem;
	display: inline-block;
	margin: 1rem;
}

.white-popup {
    position: relative;
    background: #fff;
    padding: 40px;
    width: auto;
    max-width: 100%;
    margin: 20px auto;
	display: flex;
	z-index: 999999;
}
.white-popup img {
	width: 100%;
}
.card_list{
	text-align: center; 
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
}
.card_list img{
	width: 100%;
    margin: 1rem;
    border-radius: 0.5rem;
}
.card_list li {
	display: flex;
}
.stage-att-txt{
	padding: 2rem;
	line-height: 1.6rem;
}
ul.dot {
    padding-top: 0.5rem;
    padding-left: 1.5rem;
}
ul.dot li {
    list-style: circle;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}
#main_out{
	width:100%; 
	position: relative; 
	margin: 0 auto;  
	overflow:hidden;
	z-index: 99;
}

#main_bg{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
#main_cont{
	z-index: 1;
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding-bottom: 4rem;
	background: rgb(255, 217, 0,0.8);
}



.title{
	text-align: center;
	margin: 0 auto;
	padding: 5rem 0 1rem 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* 水平置中 */
    align-items: center; 
	flex-direction: column; 
}
.title h1 {
	font-size: 2rem;
	line-height: 3rem;
	color: #373737;
}
.title h3 {
	font-size: 1.2rem;
	color: #000;
}
.title h2 {
	font-size: 1.3rem;
	color: #000;
	font-weight: bold;
	font-style: normal;
	font-family: "Noto Sans JP", sans-serif;
}

.title-b{
	margin: 0 auto;
	display: inline-block;
}
.title-b img{
	max-width: 350px;
}
.title-s {
	background-color: #c55857;
	color: #fff;
	text-align: center;
	border-radius: 999px;
	padding: .1rem 1.5rem;
	font-size: 1.5rem;
	margin: 0 auto;
	white-space: nowrap;
	display: inline-block;
	font-weight: bold;
	margin-bottom: .5rem;
}
.title3{
	text-align: center;
	width: 100%;
	max-width: 600px;
	margin: 2rem auto 0 auto;
}

#sec01-add{
	margin: 0 auto;
	width: 100%;
	max-width: 1050px;
}
.sp-add-out{
	max-width: 1000px;
	display: flex;
	align-items: stretch;
	margin: 0 auto;
}
.sp-add{
	width: 33%;
	max-width: 1000px;
	display: flex;
	margin: 2rem .5rem 0 .5rem;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 1rem;
	align-items: center;
	flex-wrap: wrap;
}

.sp-main{
	width: 100%;
	padding: 1rem 1rem 0 1rem;
}
.sp-main img {
	width: 100%;
}

.sp-right {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 1rem;
	text-align: center;
}

.sp-txt{
	text-align: center;
}

.sp-goods{
	display: flex;
	width: 100%;
	justify-content: center;
}

.sp-goods li{
	width: 49%;
	margin: .5rem;
}

.sp-goods li img{
	width: 100%;
}

.adds-bn{
	background-color: #034761;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.3rem;
    line-height: 1.2;
    z-index: 2;
    position: relative;
	width: 100%;
	color: #fff;
}
.adds-bn-t {
	border: solid 1px #fff;
}
.gift-a {
	width: 65%;
}
.gift-a img {
	max-width: 909px;
}
.gift-b{
	width: 34%;
}
.gift-b img {
	max-width: 458px;
}

.gift{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	text-align: center;
	align-content: flex-start;
    align-items: flex-start;
    position: relative;
	flex-wrap: wrap;
	justify-content: center;
}
.gift img {
	width: 100%;
}
.gift_btn{
	width: 100%;
	font-weight: bold;
	font-size: 1rem;
	line-height: 2rem;
	margin: 3rem auto;
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	text-align: center;
}
.gift_btn a{
	padding: .5rem 3rem;
	background-color: rgba(3, 71, 97, 1);
	color: #fff;
	margin: 0;
	moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
	border-radius: 99rem;
border: solid 2px #fff;
}
.gift_btn a:hover{
	background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
	background-color: rgba(79, 146, 150, 0);
	color: #fff;
	border: solid 2px #fff;
}
.shop {
	padding: .5rem 3rem;
	color: #fff;
	margin: 0;
	border-radius: 99rem;
	border: solid 2px #fff;
	font-weight: bold;
	font-size: 1rem;
}
.gift h1{
	font-size: 1.8rem;
	line-height: 2.5rem;
	padding: 0 0 .5rem 0;
}
.gift-title{
	width: 100%;
	display: flex;
	margin: 0 auto;
	text-align: center;
	justify-content: center;
}
.gift-title h1{
	font-size: 1.8rem;
	line-height: 2rem;
}
.gift-s{
	width: 100%;
	display: flex;
	margin: 0 auto;
	text-align: center;
	justify-content: center;
}
.gift-s li{
	width: 33.333%;
	padding: 2rem;
	margin: 1rem;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 1rem;
}

.gift-new {
	display: grid;
	grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
	max-width: 1000px;
}
.gift-new li{
	background-color: rgba(255, 255, 255, 1);
	border-radius: 1rem;
	padding: 1rem;
}

.gift-new2 {
	/* display: grid;
	grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
	gap: 1rem; */
	max-width: 1000px;
	align-items: stretch;
}
.gift-new2 li{
	background-color: rgba(255, 255, 255, 1);
	border-radius: 1rem;
	padding: 1rem;
	width: 350px;
}
.gift-new2 li img{
	max-width: 360px;
}
.gift-new2 .txt{
	padding: 1rem;
}

.gift-new3 {
	display: grid;
	grid-template-rows: 1fr;
  	grid-template-columns: repeat(5, 1fr); /* 將容器分為三等分的列 */
	gap: 1rem;
	max-width: 1000px;
	align-items: stretch;
}
.gift-new3 li{
	background-color: rgba(255, 255, 255, 1);
	border-radius: 1rem;
	padding: 1rem;
}
.gift-new3 li img{
	max-width: 360px;
}
.gift-new3 .txt{
	padding: 1rem;
}

.gift-new4 {
	display: grid;
	grid-template-rows: 1fr;
  	grid-template-columns: repeat(3, 1fr); /* 將容器分為三等分的列 */
	gap: 1rem;
	max-width: 1000px;
	align-items: stretch;
}
.gift-new4 li{
	background-color: rgba(255, 255, 255, 1);
	border-radius: 1rem;
	padding: 1rem;
}
.gift-new4 li img{
	max-width: 360px;
}
.gift-new4 .txt{
	padding: 1rem;
}
.gift .txt {
	font-size: 1rem;
	line-height: 1.2rem;
	text-align: left;

}

.gift-new4-title {
	margin: 1rem auto;
	text-align: center;
}
.gift-new4-title h3{
	font-weight: bold;
	  display: inline;
  background: linear-gradient(to top, #70edff 60%, transparent 40%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 1.2rem;
}

.gift-new5 {
	display: grid;
	grid-template-rows: 1fr;
  	grid-template-columns: repeat(4, 1fr); 
	gap: 1rem;
	max-width: 1000px;
	align-items: stretch;
}
.gift-new5 li{
	background-color: rgba(255, 255, 255, 1);
	border-radius: 1rem;
	padding: 1rem;
}
.gift-new5 li img{
	max-width: 360px;
}
.gift-new5 .txt{
	padding: 0;
}
.gift .txt {
	font-size: 1rem;
	line-height: 1.2rem;
	text-align: left;

}

.gift-stick {
	margin: 0 auto;
	display: grid;
	grid-template-rows: 1fr;
  	grid-template-columns: repeat(2, 1fr); /* 將容器分為三等分的列 */
	gap: 1rem;
	max-width: 1000px;
	align-items: stretch;
}

.gift .txt2 {
	font-size: 1rem;
	line-height: 1.2rem;
	text-align: center;

}

.list_book2 li{
	margin: .5rem;
	width: 23%;
	background-color: rgba(255,217,0,1);
	border-radius: .75rem;
	border: 1px solid white;
	padding: 1rem;
	text-align: left;
}
.list_book2 .sp-b-t{
	font-weight: 600;
    line-height: 1.4;
    background-color: black;
    color: #FFD900;
    padding: 0 3px;
    margin-bottom: 0.25em;
	width: 100%;
}
.list_book2 .txt2 {
	text-align: left;
}
.list_book2 .txt2 p {
	padding: 0;
}
.list_book3 li{
	background-color: rgba(255, 255, 255, 1);
	border-radius: .5rem;
	padding: .5rem;
	min-height: 320px;
}
.list_book3 .txt{
	font-weight: normal;
}

.list_book4 li{
	background-color: rgba(255,217,0,1);
	border-radius: .75rem;
	border: 1px solid white;
	padding: .5rem;
	text-align: left;
}

.list_book4 .txt2 p {
	padding: 0;
}
.nb-bn{
    font-weight: 600;
    font-size: 1rem;
    padding: 0.3rem;
    line-height: 1.2;
    z-index: 2;
    position: relative;
	width: 100%;
	color: #fff;
}

.new-c{
	background-color: #4e373f;
}
.new-n{
	background-color: #4d8e91;
}
.new-c2{
	background-color: #d2697b;
}
.new-n2{
	background-color: #3db3bf;
}
.new-s{
	background-color: #7c3671;
}
.goodsbtn{
	width: 100%;
	max-width: 1400px;
	margin: -1px auto;
	text-align: center;
	background-color: #fff;
	border-radius: 0 0 1rem 1rem;
	display: flex;
	justify-content: center;
	padding: 1rem 0;
}


.goodsbtn > li{
	border-radius: 999rem;
	background:#00c799;
	color: #fff;
    letter-spacing: 2px;
    display: flex;
    font-size: 1rem;
    line-height: 2rem;
    position: relative;
    text-align: center;
    z-index: 2;
	font-weight: 400;
	width: 15%;
	justify-content: center;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	align-items: center;
}
.goodsbtn > li:hover, .goodsbtn > li:focus, .goodsbtn > li:active {
	background-color: #e15a83;
	color: white;
}

.goodsbtn > li a{
	padding: 0.5rem !important;
	color: #fff;
}



h1{
	font-size: 1.8em;
    letter-spacing: 1px;
    line-height: 1.5em;
	font-weight: bold;
}
.gift_title{
	margin: 0 auto;
	width: 100%;
	max-width: 1400px;
	text-align: center;
	padding: 0 2rem;
}
.hl{
	color: #ff424e;
}

#web_out{
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	border-radius: 5px;
	margin: 0 5rem;
}
#web_out img {
	width: 100%;
}

#book_out{
	width:100%; 
	position: relative; 
	margin: 0 auto;  
	overflow:hidden; 
	background-color: #0164BB;
	background-image: url(../images/bg2.jpg);
	background-size: cover;
	z-index: 1;
	padding-bottom: 2rem;
}
#book_bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.owl-carousel5 .owl-nav button.owl-prev{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_pre.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height:60px;
	right: 3rem; 
	top:-20%;
	}
.owl-carousel5 .owl-nav button.owl-next{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_next.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height: 60px;
	right: 0;
	top:-20%;
}
.owl-carousel5 .item {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.owl-carousel5 {
  display: flex;
  align-items: stretch;
}
.owl-carousel2 .owl-nav button.owl-prev{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_pre.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height:60px;
	right: 3rem; 
	top:-20%;
	}
.owl-carousel2 .owl-nav button.owl-next{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_next.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height: 60px;
	right: 0;
	top:-20%;
}
.owl-prev span, .owl-next span{ display:none}
.owl-carousel .owl-nav button.owl-prev:hover,.owl-carousel .owl-nav button.owl-next:hover{ opacity: 1;}
.owl-next:focus, .owl-prev:focus {outline: none;}

.btna_swap {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
  }
  .btna_swap:hover, .btna_swap:focus, .btna_swap:active {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  }

.hvr-fade {
	display: flex;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	overflow: hidden;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: color, background-color;
	transition-property: color, background-color;
  }
  .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
	background-color: #2098D1;
	color: white;
  }



#list_cont{
	width: 100%;
	max-width: 1200px;
	margin:  0 auto;
}

.list_menu{
	display: flex;
	justify-content: center;
}

.list_menu > li{
	border-radius: 999rem;
	background:#00c799;
	color: #fff;
    letter-spacing: 2px;
    display: flex;
    font-size: 1rem;
    line-height: 2rem;
    position: relative;
    text-align: center;
    z-index: 2;
	font-weight: 400;
	width: 15%;
	justify-content: center;
	/* padding: 0.5rem; */
	margin-right: 1rem;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	align-items: center;
}
.list_menu > li:hover, .list_menu > li:focus, .list_menu > li:active {
	background-color: #e15a83;
	color: white;
}

.list_menu > li a{
	padding: 0.5rem !important;
	color: #fff;
}


.spset{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.spset img {
	width: 100%;
	max-width: 1000px;
}

.list_book{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
	align-content:flex-start;
	align-items: stretch;
	padding: 0 2rem;
	position: relative;
	z-index: 1;
}

.list_book  li{
	display: flex;
	flex-wrap: wrap;
	align-content:flex-start;
	align-items: stretch;
}

.list_book  li img {
	width: 100%;
	max-width: 500px;
}
.list_book .txt {
	width: 100%;
	text-align: left;
}
.list_book .txth1{
	font-weight: bold;
	font-size: 1rem;
}
.list_book .book-tag{
	display: inline-block;
    font-size: 0.75rem;
    color: white;
    margin-right: 1rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
	margin-top: .2rem;
}
.list_book .tag-novel{
	background-color: #01b3de;
}
.list_book .tag-comic{
	background-color: #ff8d9b;
}

.list_book3 > li{
	width: 33% ;
}
.list_book4 > li{
	width: 25% ;
}


#goods_out{
	width:100%; 
	position: relative; 
	margin: 0 auto;  
	overflow:hidden; 
	z-index: 99;
}

.goodsout{
	width: 100%;
	max-width: 1000px;
	margin: 2rem auto 3rem auto;
	display: flex;
	position: relative;
	z-index: 1;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 ;
}
.title2 {
	width: 100%;
	max-width: 1400px;
	margin: 20px auto;
	text-align: center;
}
.goods1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 2rem 0;
}
.goods1 > li {
	width: 22%;
	margin: 10px;
	border-radius: .75rem;
	padding: 1rem;
	background-color: rgba(255,217,0,1);
	border: 1px solid white;
}

/* .goods_A-t {
	border-radius:0;
} */
/* .goods_A-t a{
	background-color: rgb(255, 255, 255,1);

} */
/* .goods_B-t a{
	background-color: rgb(255, 255, 255,1);

} */
/* .goods_B-t {
	border-radius: 0;
} */
/* .goods_C-t a{

	border-radius: 0;
} */
/* .goods_D-t a{

	border-radius: 0;
} */
.goodsout li img {
	width: 100%;
	max-width: 500px;
	border-radius: .75rem;
}
.goodsout li p{
	padding: 0;
}
.goods-card-title{
	margin:.5rem 0;
	font-weight: bold;
}
.sp-att{
	margin-top: .5rem;
	color: #373737;
}
.n {
    padding-left: 1rem;
    padding-top: 0.5rem;
}

.n li{
	list-style: decimal;
    color: #57575d;
    line-height: 1.2;
    font-size: 0.7rem;
}

.sale{
	display: flex;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    position: relative;
	flex-wrap: wrap;
}
.sale > li{
	padding: 2rem;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 1rem;
	margin: 1rem;
	text-align: left;
}

.sale > li p{
	font-size: 1rem;
	padding: 0;
}

.sale > li h1 {
	padding: 0;
	text-align: center;
}
.sale .im{
	font-size: 1rem;
	color: #ba121a;
	font-weight: bold;
	font-family: 'Noto Sans TC';
}
.goods_title {
	display: flex;
	width: 100%;
	position: relative;
	z-index: 9;
	margin: 0 auto;
	justify-content: center;
	flex-wrap: wrap;
}

.goods_title > li{
    letter-spacing: 2px;
    font-size: 1rem;
    position: relative;
	text-align: center;
	font-weight: 900;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 100%;
	background-color: #fff;
	border-radius: 999rem;
	border: solid 2px #4f9296;
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
	-webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	margin: 0 .5rem .5rem 0;
}

.goods_title > li a:hover, .goods_title > li.here a{
	color: rgba(0, 0, 0, 1);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 999rem;
}
/* .goods_A-t.here a{
	color: rgba(0, 0, 0, 1);
	background-color: rgb(255, 255, 255);
	
}
 .goods_B-t.here a{
	color: rgba(0, 0, 0, 1);
	background-color: rgb(255, 255, 255);

}
.goods_C-t a:hover, .goods_C-t.here a{
	color: rgba(0, 0, 0, 1);
	background-color: rgb(255, 134, 197);
	border-radius: 1rem 1rem 0 0;	
} */
.goods_D-t a:hover, .goods_D-t.here a{
	color: rgba(0, 0, 0, 1);
	background-color: rgb(0, 199, 153);
	border-radius: 1rem 1rem 0 0;	
}
.goods_title > li a{
	width: 100%;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	padding: .5rem !important;
	color: rgba(0, 0, 0, 0.7);
	
}

.goods_title > li h1 {
	font-size: .9rem;	
	line-height: 1.5rem;
	font-weight: normal;
}
.goods_title > li h2 {
	font-size: 1rem;
	line-height: 1rem;
}


#stage-out{
	margin: 0 auto;
	width: 100%;
	background-color: rgb(42, 233, 255,0.8);
	text-align: center;
	padding-bottom: 2rem;
}

.stage ul{
	border: 1rem;
}
.stage ul img {
	width: 100%;
	border: 1rem;	
}
.sheet-area {
    max-width: 963px;
    margin: 0 auto;
}
.border-radius-wrap {
    overflow: hidden;
    border-radius: 1rem;
}


#store_out{
	background-color: rgba(59, 100, 98, 0.7);
	padding-bottom: 2rem;
}
.logo_out{ 
	/* display: flex;
	margin: 0 auto;
	width: 100%;
	flex-wrap: wrap;
	align-items: flex-start;
	text-align: center;
	justify-content: center;
	max-width: 1400px;
	padding: 0 2rem; */
	margin: 0 auto;
	display: grid;
	grid-template-rows: 1fr;
  	grid-template-columns: repeat(4, 1fr); 
	gap: .5rem;
	max-width: 800px;
	justify-content: center;
	justify-items: center;
	padding: 0 2rem;
}

.logo_li {

	background-color: #fff;
}
.logo_pic {
	width: 100%;
	margin: 0 auto;
	padding-top: 5px;
}
.logo_li,.logo_pic img {
	width: 100%;

}

.logo_pic2 img {
	width: 100%;
	max-width: 300px;
}
.logo_txt {
	width: 100%;
	text-align: center;
}

#logo {width: 100%; max-width: 1400px; margin: 0 auto; padding-top: 150px;}
#logo img {width: 100%; max-width: 664px}
.mob{
	display: none;
}


#intro { width:380px; height:270px; background-image:url(../images/intro_0.png); position:absolute; right:20px; top:530px;}
#cp
{width:100%;letter-spacing:0.5pt;
	line-height:1.8rem;text-align: center; padding:40px; position: relative;font-weight: bold;
	font-size :0.8rem;margin:0 auto; color:#000;z-index:99;
}
#cp img {
	width: 100%;
	max-width: 1200px;
}

#ct1,#ct2,#ct3,#ct4,#ct5,#ct6,#ct7,#ct8
{	cursor:pointer; list-style:none;}
	
pre {
white-space: pre-wrap;
word-wrap: break-word;
/* font-family: 'Kosugi Maru','Noto Sans TC','sans-serif'; */
}
.link { text-align:center;
    width: 226px;color: #fff;
    font-size: 0.75rem; letter-spacing:1px;
    text-decoration: none;
    background: #000;
    padding: 15px;
    margin-top: 31px; display:inline-block; margin-right:17px; z-index: 99}
.link a{ color:#fff; text-decoration:none;}
.link:hover{background: #373737;}
.buy { text-align:center;
    width: 226px;color: #fff;
    font-size: 0.75rem; letter-spacing:1px;
    text-decoration: none;
    background: #000;
    padding: 10px;
    margin-top: 31px; position: relative;top:550px; left:80px;}
.buy a{ color:#fff; text-decoration:none;}
.buy:hover{background: #373737;}
/* Specific style for the examples */


.titleout{width: 100%; margin: 0 auto;}
#title{
	margin: 40px auto 20px auto; 
	position: absolute;
	bottom: 60px;
	right: 25px;
}
#title li{ height:45px; list-style:none; float:left; padding:5px; -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;}
#title li:hover {opacity: 0.9; -webkit-transform: translateY(-5px);
  transform: translateY(-5px);}

.booklist { position:relative; max-width:1400px; width: 100%; top:10px; margin:0px auto; overflow:hidden;text-align: center}
.booklist li { list-style:none; padding:10px 10px 10px 10px; display: inline-block}
.booklist li img {max-width:200px;  width:100%; border:none;
		/*
	-moz-box-shadow:2px 2px 4px #8e8e8e;
	-webkit-box-shadow:2px 2px 4px #8e8e8e;
	box-shadow:2px 2px 4px #8e8e8e;

	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-transition: all 0.2s ease-in-out;
	*/}
.bookout{width: 100%; margin:100px auto; padding: 0 0 30px 0; overflow: hidden;background-color: rgba(128, 78, 33, 1)}
.more{ position:relative; width:100%; margin: 30px auto;cursor:pointer; max-width: 1400px; text-align: center;}
.more img {border:0;}


/*----------------------------- 
header
------------------------------*/
#header { width:100%; margin:0 auto; background-color:#fff; overflow:hidden; min-width:1004px; z-index: 999; position: fixed; padding:5px 10px;}
.header { width:100%; margin:0 auto; overflow:hidden; display: flex; justify-content:space-between}
.header_logo { width:113px;  padding:5px; position: relative; top: 5px}
.header_right { padding-top:15px; text-align: right;color:rgba(0,0,0,.9); right:10px; cursor: pointer;}
.header_right a,.header_right a:after { color:rgba(0,0,0,.9); }
.header_right a:hover{ color: rgba(0,0,0,.5);}
#m_header{ display:none;}
#header img {width: 100%; max-width: 113px;}
.fat-nav{display: none}
/*----------------------------- 
header
------------------------------*/
/* ==========================================================================
    Footer
========================================================================== */
footer {
	padding: 2rem 3rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
		-ms-flex-direction: row;
			flex-direction: row;
	-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: space-between;
	-webkit-box-align: start;
		-ms-flex-align: start;
			align-items: flex-start;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.75rem;
	background-color: #034761;
  }
  
  footer .footer-left .copy-mobile {
	display: none;
  }
  
  footer .footer-right {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
		-ms-flex-direction: column;
			flex-direction: column;
	-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: space-between;
	-webkit-box-align: end;
		-ms-flex-align: end;
			align-items: flex-end;
	gap: 2rem;
  }
  
  footer .footer-right .social {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
		-ms-flex-direction: row;
			flex-direction: row;
	-webkit-box-pack: end;
		-ms-flex-pack: end;
			justify-content: flex-end;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	gap: 1.5rem;
  }
  
  footer .footer-right .social a {
	width: 3rem;
	height: 3rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
		-ms-flex-direction: row;
			flex-direction: row;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	border-radius: 3rem;
	background-color: #f4c200;
	-webkit-transition: -webkit-transform .2s;
	transition: -webkit-transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s;
  }
  
  footer .footer-right .social a:hover {
	-webkit-transform: scale(1.2);
			transform: scale(1.2);
  }
  
  footer .footer-right .social img {
	width: 1.5rem;
	height: 1.5rem;
  }
  
  footer .footer-right .copyright {
	font-size: 0.875rem;
	line-height: 1.5rem;
	text-align: end;
  }
  
  @media (max-width: 768px) {
	.owl-carousel5 .owl-nav button.owl-prev{ 

		bottom: 35%; 
		width:52px; 
		height:60px;
		right: 3rem; 
		top:-28%;
		}
	.owl-carousel5 .owl-nav button.owl-next{ 
		bottom: 35%; 
		width:52px; 
		height: 60px;
		right: 0;
		top:-28%;
	}
	footer {
	  -webkit-box-orient: vertical;
	  -webkit-box-direction: normal;
		  -ms-flex-direction: column;
			  flex-direction: column;
	  -webkit-box-align: center;
		  -ms-flex-align: center;
			  align-items: center;
	  gap: 1rem;
	}
	footer .footer-left .copy-web {
	  display: none;
	}
	footer .footer-left .copy-mobile {
	  margin-bottom: 1rem;
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  overflow-x: auto;
	  -ms-scroll-snap-type: x mandatory;
		  scroll-snap-type: x mandatory;
	  scrollbar-width: none;
	  width: 90vw;
	}
	footer .footer-left .copy-mobile::-webkit-scrollbar {
	  display: none;
	}
	footer .footer-left .copy-mobile .scroll-item {
	  display: -webkit-inline-box;
	  display: -ms-inline-flexbox;
	  display: inline-flex;
	  -webkit-box-pack: start;
		  -ms-flex-pack: start;
			  justify-content: start;
	  -webkit-box-align: start;
		  -ms-flex-align: start;
			  align-items: flex-start;
	  scroll-snap-align: start;
	  -webkit-box-flex: 0;
		  -ms-flex: 0 0 280px;
			  flex: 0 0 280px;
	}
	footer .footer-right {
	  -webkit-box-align: center;
		  -ms-flex-align: center;
			  align-items: center;
	  gap: 1rem;
	}
	footer .footer-right .copyright {
	  text-align: center;
	}

	.gift-new{
		grid-template-columns:1fr;
	}
	.gift-new2{
		grid-template-columns:1fr 1fr;
	}
	.gift-new2 li{
		width: auto;
	}
	.gift-new3{
		gap: .5rem;
		grid-template-columns: repeat(3, 1fr);
		justify-content: center;
	}
	.gift-new3 li{
		padding: .5rem;
	}
	.gift-new4 .txt{
		padding: 0;
	}
	.gift-new5{
		grid-template-columns: repeat(2, 1fr);
	}

}
@media (max-width: 680px) {
	.title img {
		width: 65%;
		max-width: none;
	}
  
}
@-webkit-keyframes hvr-bob {
	0% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
	50% {
	  -webkit-transform: translateY(-1px);
	  transform: translateY(-1px);
	}
	100% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
  }
  @keyframes hvr-bob {
	0% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
	50% {
	  -webkit-transform: translateY(-1px);
	  transform: translateY(-1px);
	}
	100% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
  }
  @-webkit-keyframes hvr-bob-float {
	100% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
  }
  @keyframes hvr-bob-float {
	100% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
  }
  .hvr-bob {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
	-webkit-animation-name: hvr-bob-float, hvr-bob;
	animation-name: hvr-bob-float, hvr-bob;
	-webkit-animation-duration: .3s, 1.5s;
	animation-duration: .3s, 1.5s;
	-webkit-animation-delay: 0s, .3s;
	animation-delay: 0s, .3s;
	-webkit-animation-timing-function: ease-out, ease-in-out;
	animation-timing-function: ease-out, ease-in-out;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-direction: normal, alternate;
	animation-direction: normal, alternate;
  }


  @-webkit-keyframes bob {
	0% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
	50% {
	  -webkit-transform: translateY(-4px);
	  transform: translateY(-4px);
	}
	100% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
  }
  @keyframes bob {
	0% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
	50% {
	  -webkit-transform: translateY(-4px);
	  transform: translateY(-4px);
	}
	100% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
  }
  @-webkit-keyframes hvr-bob-float {
	100% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
  }
  @keyframes hvr-bob-float {
	100% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
  }
  .bob {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-animation-name: bob;
	animation-name: bob;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-direction:  alternate;
	animation-direction: alternate;
  }  
/* Float */
.hvr-float {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
  }
  .hvr-float:hover, .hvr-float:focus, .hvr-float:active {
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
  }  

@media all and (max-width: 1000px){ 
.wrapper {
	background-image:url(../images/bg-m.jpg);
	background-size: 960px auto;
	background-attachment: fixed;
	min-height: 100vh;
}
.main{
	width: 100%;
	margin-top: 3rem;
	padding-bottom: 0;
}
.mob {
	display: block;
}
.pc {
	display: none !important;
}
.event-rule .rule-h1 {
	font-size: 1.1rem;
}
.rule-s {
	font-size: .75rem !important;
}
.event-rule p{
	font-size: 1rem;
}

.slogan li {
	width: 30%;
}
.slogan {
	justify-content: center;
	padding: 0 4vw 2rem 4vw;
}
.container{
	width:100%; 
	margin:0 auto;
	position: relative; 
	height:auto; 
	overflow:hidden;
	background-image: none;
} 

#top{ width:100%; position:relative; margin:0 auto 20px auto; height:auto; cursor:auto; background-image: none}
#main{width:100%; position: relative; margin:0 auto;overflow:hidden; padding-bottom:0px; height:auto;  top: auto;}
#main_out{
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 0;
}
.card_list {
	flex-wrap: wrap;
	justify-content: center;
}
.card_list .li{
	display: flex;
	justify-content:center;
}
.event-rule {
	width: 80%;
	margin: 2rem auto;
}
.gift-s {
	flex-wrap: wrap;
}
.gift-s li {
	width: 100%;
}
#main_cont{
	padding: 1rem 1rem 2rem 1rem;
}

.white-popup {
	padding: 1rem;
	z-index: 99999999;
}

.title h1 {
	font-size: 1.3rem;
	line-height: 2rem;
}
.title h2 {
	font-size: 1.2rem;
	line-height: 1.5rem;
	padding: 0;
	margin: 0 auto;
	width: 80%;
}
.title h3 {
	font-size: 1.2rem;
	padding: 0 0 .5rem 0;
}
.sale {
	padding-top: 1rem;
}
.sale > li{
	padding: 1rem;
}

.sale > li p{
	font-size: 1rem;
	padding: 0;
}

.sale > li h1 {
	padding: 0;
}
.sale .im{
	font-size: 1.5rem;
}
.gift_btn {
	padding: 0;
	margin: 0;
}
.gift {
	margin: 0 auto;
	padding: 0;
}
.m_gift-all{
	width: 100%;
}
.m_gift-all img{
	width: 100%;
	margin-top: 1rem;
}
.gift-title h1{
	line-height: 2.2rem;
}
.gift h1{
	font-size: 1.5rem;
	line-height: 1.8rem;
}
.cs>p {
	text-align: center;
}
.cont_right .btna .a{
	font-size: 1.3rem;
}
#list_cont {
	text-align: center;
	margin: 2rem auto;
	padding: 0 .5rem;
}
.list_menu {
	justify-content: center;
}
.list_menu > li {
	margin: 0.3rem;
}
.list_menu > li{
	width: 100%;
	line-height: 1.3rem;
}
.list_book > li{
	width: 33%;
	padding: 1rem;
}
.list_book2 > li{
	width: 45% !important;
	padding: 1rem;
}

.list_book li img {
	max-width: 100%;
}
.list_book3 > li{
	width: 50%;
	
}

h1 {
	font-size: 1rem; 
	color: #000;
	text-transform: uppercase;
	font-weight: bold; 
	text-align:center;

}
.title {
	margin: 2rem auto 0 auto;
	padding-top: 2rem;
}

.gift p {
	line-height: 1.5rem;
	font-size: 1rem;
}
#book_out{
	padding-top: 0;
}
.list_book{
	padding: 0;
}
.m_gift-all {
	padding: 0;
}
.gift-s {
	padding: 0;
}
.sp-add-out {
	flex-wrap: wrap;
}
.sp-add {
	flex-wrap: wrap;
	width: 100%;
}
.sp-main {
	width: 100%;
}
.sp-right {
	width: 100%;
	margin: 0;
	padding: 0;
}
.sp-txt{
	padding: 0 1rem;
}
.sp-goods li {
	padding: 0;
}
.list_book .txth1 {
	display: flex!important;
	font-size: .8rem;
	line-height: 1.2rem;
}
.nb-bn {
	font-size: .7rem;
}
.owl-carousel5 .owl-nav button.owl-prev{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_pre.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height:60px;
	right: 3rem; 
	top:-60px;
	}
.owl-carousel5 .owl-nav button.owl-next{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_next.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height: 60px;
	right: 0;
	top:-60px;
}
.owl-carousel5 {
	margin-top: 1rem;
}
.flex-container {
	display: flex;
	flex-wrap: nowrap;
}

.logo_out {
	padding: 0 1rem 1rem 1rem;
}
#book_out {
	padding-bottom: 0;
	margin-bottom: 0;
}
#goods_out{
	padding-top: 0;

}
.goodsout{
	padding: 0 0 2rem 0;
	margin: 0;
}
.title2 {
	margin: 10px auto 20px auto;
}
.title3 {
	max-width: 400px;
}
.goodsout li {
	box-sizing: border-box;
	width: calc((100% / 3) - (10px * 2));
	margin: 5px;
}
.goods1 {
	padding: 0;
}
.goods1 > li{
	padding: 5px;
}
.goodsout li p {
	font-size: .75rem;
}
.n li {
	width: 100%;
}
.n{
	padding-left: 10px;
}
.goods_A-t a, .goods_B-t a,.goods_C-t a,.goods_D-t a{
	background-color: transparent;
}

.stage {
	padding: 1rem .75rem;
}
#stage-out{
	padding-bottom: 1rem;
}
#store_out{
	padding-top: 1rem;
}
#title { width:100%;}

#header, #title  { display:none;}
.att_in { position:relative ; width:95%; margin:0 auto; overflow: hidden;}
#cp,.cp_i  { width:100%; padding: 10px;background-image: none; color: #fff; font-weight: normal; text-shadow: none}
#cp img {
	width: 100%;
}
.mob_clear{ display:none;}
.booklist { position:static; width:95%; margin:20px auto 0 auto; overflow:hidden;  height:auto;}
.booklist li {list-style:none; width:30%; padding:5px; display: inline-block}
.booklist li img {width: 100%; height:auto;}
.bookout {margin: 0 auto;}



.list_book {
	margin-top:0 ;
}
.goods_title{
	flex-wrap: wrap;
	justify-content:center;
}
.goods_title > li{
	align-items: center;
	margin: .4rem;
	padding: 0;
	width: auto;
	max-width: 80vw;
}
.goods_title > li h1 {
	font-size: .75rem;
	padding: .2rem .5rem;
}
.goods_title > li a {
	padding: .2rem !important;
}

/*----------------------------- 
header
------------------------------*/
#m_header{  width:100%; margin:0 auto; background-color:#ffffff; overflow:hidden;  display: flex; position: fixed; z-index: 999; padding: 5px 0;}
.m_header { width:100%; margin:0 auto; overflow:hidden;display: flex; justify-content:center}
.m_header_logo { width:113px;  position: relative; top: 5px}
.m_header_logo img {width: 113px;}


/*----------------------------- 
header
------------------------------*/
	/*選單*/
.fat-nav,.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before{-moz-transition-duration:.4s;-o-transition-duration:.4s;-webkit-transition-duration:.4s}
.hamburger{
	display:block;
	width:50px;
	height:40px;
	position:fixed;
	top:5px;
	left:0;
	z-index:9999;
	padding:12px;
	background:#ffffff;
	opacity:0.8;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-tap-highlight-color:transparent;
	-ms-touch-action:manipulation;
	touch-action:manipulation;
}
.hamburger__icon{
	position:relative;
	margin-top:7px;
	margin-bottom:7px
}
.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before{
	display:block;
	width:25px;
	height:2px;
	background-color:#000;
	-moz-transition-property:background-color,-moz-transform;
	-o-transition-property:background-color,-o-transform;
	-webkit-transition-property:background-color,-webkit-transform;
	transition-property:background-color,transform;
	transition-duration:.4s
}
.hamburger__icon:after,.hamburger__icon:before{
	position:absolute;content:""
}
.hamburger__icon:before{top:-7px}
.hamburger__icon:after{top:7px}
.hamburger.active .hamburger__icon{background-color:transparent}
.hamburger.active .hamburger__icon:after,.hamburger.active .hamburger__icon:before{background-color:#000}
.hamburger.active .hamburger__icon:before{
	-moz-transform:translateY(7px)rotate(45deg);
	-ms-transform:translateY(7px)rotate(45deg);
	-webkit-transform:translateY(7px)rotate(45deg);
	transform:translateY(7px)rotate(45deg)
}
.hamburger.active .hamburger__icon:after{
	-moz-transform:translateY(-7px)rotate(-45deg);
	-ms-transform:translateY(-7px)rotate(-45deg);
	-webkit-transform:translateY(-7px)rotate(-45deg);
	transform:translateY(-7px)rotate(-45deg)
}
.fat-nav{
	top:0;
	left:0;
	z-index:9999;
	position:fixed;
	display:none;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.8);
	-moz-transform:scale(1.4);
	-ms-transform:scale(1.4);
	-webkit-transform:scale(1.4);
	transform:scale(1.4);
	-moz-transition-property:-moz-transform;
	-o-transition-property:-o-transform;
	-webkit-transition-property:-webkit-transform;
	transition-property:transform;
	transition-duration:.4s;overflow-y:auto;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch
}
.fat-nav__wrapper{
	width:100%;
	height:100%;
	display:table;
	table-layout:fixed
}
.fat-nav.active{
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-webkit-transform:scale(1);
	transform:scale(1)
}
.fat-nav ul{
	display:table-cell;
	vertical-align:middle;
	margin:0;
	padding:0
}
.fat-nav li{
	list-style-type:none;
	text-align:center;
	padding:15px;
	font-size:2em
}
.fat-nav li,.fat-nav li a{
	color:#fff;
	font-size:25px;
}
.fat-nav li a{text-decoration:none}

.fat-nav.active {
	background: #000;
	opacity:0.8;
}
#topcontrol,.more { display: none;}

/* .logo_li {
	width: 25%;
	margin: .5rem;
} */

}
@media all and (max-width: 425px){ 
	#web_out{
		flex-wrap: wrap;
	}
	.web_pic{
		width: 100%;
	}
	.web_txt{
		width: 100%;
		padding-top: 0;
		font-size: 1rem;
		line-height: 1.5rem;
	}
	.web_con{
		display: block;
	}
	body{
		background-size: cover;
		background-position: center top;
	}
}