.inlineBlockSpacing {letter-spacing: -0.31em; *letter-spacing: normal; *word-spacing: -0.43em; text-rendering: optimizespeed;}

#mtkContainer,
#mtkContainer * { box-sizing: border-box;  }
body {background:#fff;}

#mtkContainer { background: #ffa8ba ; }






/* top鍵48px */

.top{z-index: 100;}
.toTop-arrow {width: 3rem;height: 3rem;
	border: 0;
	border-radius: 50%;
	opacity: 0.6;
	background: #000;
	cursor: pointer;
	position:fixed;right: 1rem;
	bottom: 13rem;
	display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 22px;
	height: 3px;
	border-radius: 3px;
	background: #fff;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.42rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.42rem;
}
.toTop-arrow:focus {outline: none;}
 


/* 版頭 */
/*
header.header { height: 871px; background: url(../images/sanrio_top.jpg) #ffa8ba top center no-repeat; }*/
header.header {  background: #ffa8ba;  }
/*header.header h2 img{ display: block;width: 100%; margin: 0 auto; }*/

header.header h1 img{width: 100%;}
header.header h1 img.pc2 , header.header h1 img.m{display: none;}





/*toptitle */

.titlebg{   background: #ffa8ba ; }
.titlebg2{  background: #ffcfe1 ; }
.titlebg3{  background: #ffcfe1 ; }
.titlebg4{  background: #6aa9ff ; }





.top-title{   margin: 0 auto;  }
.top-titlearea{ width: 100%; max-width: 1000px; margin: 0 auto;  }
.top-titlearea img{ display:block; width: 90%; margin: 0 auto;   }








/* 選單 */
.listbg2{ background:#ffcfe1;  }
.listbg3{ background:#ffcfe1;  }
.listbg4{ background:#6aa9ff;  }

.pageMenu ul { display: flex; margin: 0 auto; max-width: 1200px; text-align: center; justify-content: center;  }
.pageMenu ul li { display: inline-block;  flex-grow:0; flex-shrink:0;  padding: 2% 1%;}
.pageMenu ul li a { display: block; padding: 6px 30px;font:24px/1.4 "微軟正黑體"; color:#fb72a6; background: #fff; border-radius: 50px ; }
.pageMenu ul li a:hover,
.pageMenu ul li a.now { background: #47fcf1;   }




/*  模組1  */

.type1 { background: url(../images/sanrio_bg1.jpg) #ffa8ba top center no-repeat; margin: 0 auto; text-align: center;}
.type1 .group-type-ph { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; padding: 20px 0; max-width: 1200px; overflow: hidden;  align-items: stretch;  }
.type1 .ph { display: inline-block; margin: 15px 8px; width: 280px; flex-grow:0; flex-shrink:0; border: solid 3px  #647ae4;  background: #fff; border-radius: 13px ; cursor: pointer;}
.type1 .ph:hover{ transform: scale(0.98);}
.type1 .ph img { width: 100%; border-radius: 10px 10px 0 0 ;}
.type1 .ph-title { padding: 5px 10px; font:bold 20px/1.4 "微軟正黑體"; color: #5473e4;text-align: justify; }
.type1 .ph-detail { padding: 5px 10px; font:16px/1.4 "微軟正黑體"; color:#fa3cac; text-align: justify; }
.type1 .ph-feature { padding: 5px 10px; font:16px/1.4  "微軟正黑體"; color: rgba(0,0,0,0.7); }
.type1 .price { display: block;  padding: 2px  15px 7px 0; font:normal 16px/1.4 "微軟正黑體"; color: #d40000; text-align:end; }
.type1 .price span { display: inline-block; font-size: 28px; line-height: 0.9; font-weight: bold; color: #d40000; }
.type1 .price i { font-style: normal; }


/*  模組2  */
.c23Base {background: url(../images/sanrio_bg2.jpg) #ffa8ba top center no-repeat; margin: 0 auto; text-align: center; }
.carrier .box-head ,
.intro-anchors { display: none;}
.carrier h4 { display: none;}
.carrier li { width:75% ;  margin: 0 auto; padding: 1.5% 2%; cursor: pointer; transform: scale(0.98); border-bottom:solid 1px #fff; text-align: left; }
.carrier li strong { display: block;font:bold 24px /1.6 "微軟正黑體"; color: #5473e4; }
.carrier li a { font: 18px /1.6 "微軟正黑體"; color: #fa3cac;  }
.carrier li .price { font: 30px /1.6 "微軟正黑體"; color: #d40000 ;position: absolute; right: 20px; bottom: 0; }
.carrier li:hover { transform: scale(0.95); }









/* youtube */
.videobg{  background: url(../images/sanrio_bg1-2.jpg) #a8cfff top center no-repeat; margin: 0 auto;  }
.videobg2{  background: url(../images/sanrio_bg2-2.jpg) #91f1e5 top center no-repeat; margin: 0 auto;  }
.videobg3{  background: url(../images/sanrio_bg3-3.jpg) #91f1e5 top center no-repeat; margin: 0 auto;  }

/*
.video img{ display:block; width: 100%; cursor: pointer; border: solid 12px #fff; border-radius: 10px; margin: 0 auto; }
.video img:hover{ transform: scale(0.98);  }
*/


.video iframe{   display:block; border: solid 10px #fff;border-radius: 10px; margin: 0 auto;  }

/*RWD Youtube 以及 Vimeo*/

.video-container{

position:relative;

padding-bottom:34%;

padding-top:30px;height:0;overflow:hidden;

}








/*地圖 */
.map-area{  background: url(../images/sanrio_bg3-2.jpg) #ffcfe1 top center no-repeat; margin: 0 auto;  }
.map{ width: 100%; max-width: 1050px; margin: 0 auto;     padding: 1.5% 5%; }
.map img{ display:block; width: 100%; margin: 0 auto;   }



/*  地圖title  */
.map-content {  background: url(../images/sanrio_bg3-1.jpg) #a8cfff top center no-repeat; margin: 0 auto; }
.map-text{ margin: 0 auto; padding: 30px; width: 100%; max-width: 800px; }
.map-text li b{   font: bold 30px/1.6 "微軟正黑體"; text-align: left; color: #324986;  }
.map-text li { margin: 1% 0;  font: bold 22px/1.6 "微軟正黑體"; text-align: left; color: #545454;  }
.map-text li ol li { margin-left: 20px; list-style-type: disc; }
.map-content .text2{margin: 5% 0 0 0;}



/*  照片title  */

.photo-allarea{margin: 0 auto; width: 100%;  background: #6aa9ff  ;   }
.photo-text-area{ margin: 0 auto; width: 100%;   }
.photo-text{margin: 0 auto; width: 100%; max-width: 1200px; padding: 1% 1% 1% 1%; }
.photo-text h5{  margin: 0 auto; font: bold 36px/1 "微軟正黑體"; color: #fff;  }

.text-line{ border:solid 2px #fff100; width: 13%;  }
.photo-text p{   font:22px/1.6 "微軟正黑體"; color: #fff; margin-top: 1%; }

/*  照片  */
.photobg1{  background: url(../images/sanrio_bg4.jpg) #6aa9ff top center no-repeat; margin: 0 auto;   }
.photobg2{  background: url(../images/sanrio_bg4-22.jpg) #6aa9ff top center no-repeat; margin: 0 auto;  }
.photobg3{  background: url(../images/sanrio_bg4-3.jpg) #6aa9ff top center no-repeat; margin: 0 auto; padding: 0 0 5% 0;  }
.photobg4{  background: url(../images/sanrio_bg4-4.jpg) #fd8fb9 top center no-repeat; margin: 0 auto; padding: 10% 0;  }

.photo-content { margin: 0 auto; width: 100%; max-width: 1200px; text-align: center;  white-space: nowrap;  overflow: hidden;overflow-y: hidden; overflow-x: scroll;letter-spacing: normal; }
.photo-area{padding: 1% 0; margin: 0 auto;  text-align: center;  }
.photo-area li{ display: inline-block; padding: 0 0.2%; }
.photo-area li img{  border: solid 1px #fff; border-radius: 5px; }


/*  照片放大  */
.pic_zoombg { display: none; position: fixed; top:0; margin:0 auto ; width: 100%;  background-color: rgba(0,0,0,0.8); z-index: 100; text-align: center; padding: 5% 0 30% 0; }

.picarea img{ display: block; text-align: center;margin:0 auto ;}

.pic_zoombg .close_pic p { position: absolute; right: 9%; top: 5%; width: 40px; height: 40px; background: #4e94f3; border-radius: 50px; box-shadow: 2px 2px 5px 0px black; cursor: pointer;}
.pic_zoombg .close_pic p:hover { background: #0da1b7;}
.pic_zoombg .close_pic p:before { position: absolute; content: ''; width: 30px; height: 8px; background: white; transform: rotate(45deg); top: 16px; left: 5px;}
.pic_zoombg .close_pic p:after{ content: ''; position: absolute; width: 30px; height: 8px; background: white; transform: rotate(-45deg); top: 16px; left: 5px;}











@media only screen and (max-width: 1500px) {

/*RWD Youtube 以及 Vimeo*/
.video-container{ padding: 2% 1.5% 40% 1.5%; }



 }




@media only screen and (max-width: 1300px) {

/*RWD Youtube 以及 Vimeo*/
.video-container{ padding: 2% 1.5% 50% 1.5%; }



/*  模組2  */
.carrier li { width: 80%;padding: 1.5% 0 5% 0;}




/*  照片放大  */

.pic_zoombg .close_pic p { right: 1%;top: 4%; }
.picarea img{width:80%;}




}







@media only screen and (max-width: 1200px) {



/*  照片放大  */
.pic_zoombg{padding: 9% 0 28% 0;}

header.header h1 img.pc2{display: block;}
header.header h1 img.pc1 , header.header h1 img.m{display: none;}



}






@media only screen and (max-width: 1000px) {


/*toptitle */
.top-titlearea img{  width: 90%; margin: 0 auto;   }





/*RWD Youtube 以及 Vimeo*/
.video-container{ padding: 2% 1.5% 60% 1.5%; }



/*  照片title  */
.photo-text{padding: 5% 1% 1% 1%; }



/*  照片放大  */
.pic_zoombg{padding: 17% 0 50% 0;}


}







@media only screen and (max-width: 800px) {

/* 版頭 */
header.header { height: auto; background: #ffa8ba ; }













/*toptitle */
.top-title{   margin: 0 auto;  }
.top-titlearea{ width: 100%; max-width: 1000px; margin: 0 auto;  }
.top-titlearea img{ display:block; width: 90%; margin: 0 auto;   }





.infor-content {  width: 96%;  }



/*  模組1  */
.type1 .ph { width: 90%; }



/* 選單 */
.pageMenu {letter-spacing: normal; white-space: nowrap; width: 100%; overflow: hidden;overflow-y: hidden; overflow-x: scroll; }



/*  模組2  */
.carrier li { width: 90%;padding: 1.5% 0 5% 0;}
.carrier li .price {font: 27px /1.4 "微軟正黑體";}



/*  照片title  */
.photo-text{padding: 7% 3% 1% 3%; }
.text-line{  width: 25%;  }



/*  照片  */
.photobg3{  background-size: cover; background-position-x: 0;   }
.photobg4{  background-size: cover; background-position-x: 50%;     }


/*  照片放大  */

.picarea img{width:100%;}

.pic_zoombg{padding: 28% 0;}
.pic_zoombg .close_pic p { right: 2%;top: 7%; }




/* youtube */
.video iframe{   border: solid 6px #fff; }
/*RWD Youtube 以及 Vimeo*/
.video-container{ padding: 4% 1.5% 68% 1.5%; }



}













@media only screen and (max-width: 500px) {

	/*toptitle */
.top-title{   margin: 0 auto;  }
.top-titlearea{ width: 100%; max-width: 1000px; margin: 0 auto;  }
.top-titlearea img{ display:block; width: 100%; margin: 0 auto;   }



.infor-content {  width: 94%;  }


/* 選單 */
.pageMenu ul li a { font:15px/1.4 "微軟正黑體"; }

.video img{ border: solid 5px #fff; border-radius: 10px; margin: 2% 0; }



/*  照片title  */
.photo-text{ padding: 12% 3% 1% 3%; }
.photo-text h5{   font: bold 24px/1 "微軟正黑體"; color: #fff;  }
.text-line{  width: 20%;  }
.photo-text p{   font:16px/1.6 "微軟正黑體"; color: #fff;  }



/*  照片  */

.photo-area li{   padding: 0; width: 70%;}
.photo-area li img{ width: 98%; }




/*  照片放大  */
.pic_zoombg{padding: 50% 0;}
.pic_zoombg .close_pic p { right: 3%;top: 16%;width: 35px;height: 35px; }
.pic_zoombg .close_pic p:hover { background: #0da1b7;}
.pic_zoombg .close_pic p:before {  content: ''; width: 25px; height: 7px;  top: 14px; left: 5px;}
.pic_zoombg .close_pic p:after{ content: ''; width: 25px; height: 7px;  top: 14px; left: 5px;}




/*  模組2  */

.carrier li { width:90% ;  padding: 3% 0 6% 0;  }
.carrier li strong { font:bold 21px /1.4 "微軟正黑體";  }
.carrier li a { font: 16px /1.6 "微軟正黑體";  }
.carrier li .price { font: 25px /1.4 "微軟正黑體"; bottom: -4px; }





/*  地圖title  */
.map-content {  background: url(../images/sanrio_bg3-1.jpg) #a8cfff top center no-repeat; margin: 0 auto; }
.map-text{ margin: 0 auto; padding: 30px; width: 100%; max-width: 800px; }
.map-text li b{   font: bold 24px/1.6 "微軟正黑體"; text-align: left; color: #324986;  }
.map-text li { margin: 1% 0;  font: bold 17px/1.6 "微軟正黑體"; text-align: left; color: #545454;  }
.map-text li ol li { margin-left: 27px; list-style-type: disc; }
.map-content .text2{margin: 5% 0 0 0;}




}


@media only screen and (max-width: 400px) {
header.header h1 img.m{display: block;}
header.header h1 img.pc1 , header.header h1 img.pc2{display: none;}
}




@media only screen and (max-width: 340px) {



/*  照片title  */
.photo-text{ padding: 15% 3% 1% 3%; }
.photo-text h5{   font: bold 18px/1 "微軟正黑體"; color: #fff;  }
.text-line{  width: 26%;  }
.photo-text p{   font:14px/1.6 "微軟正黑體"; color: #fff;  }








}















/* 整個捲軸 */
::-webkit-scrollbar { width: 10px; border-radius: 99em; }
/* 捲軸的軌道 */
::-webkit-scrollbar-track { background: #fff; border-radius: 99em;  }
/*捲軸尚未滑到的軌道*/
::-webkit-scrollbar-track-piece{ background: #fff; border-radius: 99em; }
/* 滑動的區塊 */
::-webkit-scrollbar-thumb { background: #5473e4;border-radius: 99em; }
/* 滑鼠移到滑動的區塊上 */
::-webkit-scrollbar-thumb:hover { background: #aaa;border-radius: 99em;  }


