body { overflow-x: hidden; }
body{ }
#mtkContainer { position: relative;overflow-x: hidden;  font-size: 10px;  }
#mtkContainer,
#mtkContainer * { vertical-align: top; box-sizing: border-box; }

a,
a:hover { text-decoration: none; }

.widthStyle1 { margin: 0 auto; width: 100%; max-width: 1300px; }
.widthStyle1.contentW { width: 90%; }
.maxW1 { margin: 0 auto; max-width: 1000px; }

.bgYellowColor { background:#03609e; }

header.header { padding-top: 35px; padding-bottom: 350px;background: url(../images/headerBg.jpg) top center no-repeat; background-size: 100%; }

.pageMenu ul  { text-align: right; list-style: none;}
.pageMenu ul li { display: inline-block; padding: 29px 0; letter-spacing: normal; transition: .5s; }
.pageMenu ul li:hover {background:#03609e;}
.pageMenu ul li a,
.pageMenu ul li a:link,
.pageMenu ul li a:not([href]):not([tabindex]) { padding: 0 20px; font:1.8em/1em "微軟正黑體"; color: #fff; border-right:1px solid #fff; cursor: pointer; }
.pageMenu ul li:first-child a,
.pageMenu ul li:first-child a:link { border-left:1px solid #fff; }
.pageMenu ul li:last-child a,
.pageMenu ul li:last-child a:link { border-right:none;}


.pageMenu ul li.hasChid { position: relative; }
.pageMenu ul li.hasChid .chid { display: none; position: absolute; top:75px;left: 0; width: auto; min-width: 100%; z-index: 10;	}
.pageMenu ul li.hasChid .chid a,
.pageMenu ul li.hasChid .chid a:link { display: block; padding: 5px 0 !important; width: 100%; color: #fff; text-align: center; transition: .5s; background: rgba(0,0,0,0.75);}
.pageMenu ul li.hasChid .chid a:hover { color:#FFF;   background: #03609e;  }

.pageMenu ul li.hasChid .chid a {white-space: nowrap;}


h1 { margin-top: 33px;  text-align: center; }
h1 img { width: 100%;  }
h1 .forPcH1 { display: inline-block; max-width: 572px;}
h1 .mobileHeader { display: none; }
h1 .tableHeader { display: none; }

.indexPage { position: relative; margin-top: -130px; margin-bottom: 78px; z-index: 10;  }
.indexPage ul { text-align: center; }
.indexPage ul li { display: inline-block; margin: 0 0.8%; padding-bottom:15px; width: 23%; max-width: 287px; letter-spacing: normal; 
	border-top:10px solid #03609e; background:#fff; 	box-shadow: 0 10px 20px rgba(0,0,0,0.4); transition: .5s; }
.indexPage ul li img { width: 100%; }
.indexPage ul li h3 { padding: 5px 0; font: bold 2.4em/1em "微軟正黑體"; color: #2557b7; }
.indexPage ul li p { padding: 0 10px; font: 1.6em/1.5em "微軟正黑體"; color: #000; text-align: left; }
.indexPage ul li:hover { transform: translateY(-15px); }



.indexContent .contentRight { text-align: right; }
.indexContent .contentLeft { text-align: left; }
.indexContent .contentCenter { text-align: center; }
.indexContent .content { position: relative; display: inline-block; margin: 70px 0; width: 100%; max-width: 1000px; background:#fff;  }
.indexContent .content::after { content: ""; position: absolute; top:0; right: 0; width: 20%; height: 100%; background: #fbd123 ; }
.indexContent .content::before { content: ""; position: absolute; top: -1%; left: -1%; width: 20%; height: 100%;
 background: url(../images/imgYellowLine.png) top center no-repeat ; background-size: 100% auto;  }
.indexContent .content.one > div { width: 100%; }

.indexContent .content.blue::after { background: #fbd123 ; }
 .indexContent .content.blue::before { background: url(../images/imgBlackLine2.png) top center no-repeat ; background-size: 100% auto;  }

.indexContent .text { position: relative; display: inline-block; width: 32%; letter-spacing: normal; z-index: 2; }
.indexContent .img { position: relative; display: inline-block; padding: 20px; width: 67.5%; height: 100%; letter-spacing: normal; z-index: 2; }
.indexContent .img img {  width: 100%; height: auto; }
.indexContent .img a.videoPlay { position: absolute; top:0;left: 0;width: 100%;height: 100%;z-index: 20;}
.indexContent .img:after { content:""; position: absolute; top:10px; left: 10px; width: calc(100% - 40px); height:calc(100% - 40px);; border:5px solid #03609e; }
.indexContent h2 { padding: 60px 20px 10px 20px; font: bold 7em/1.2em "微軟正黑體"; color: #000; text-align: left; }
.indexContent p { padding: 0 20px 40px 20px; font: 1.6em/1.5em "微軟正黑體"; color: #000; text-align: left; }

.indexContent .text .roomSize { display: inline-block; padding: 0 8px; border-radius: 99em; color: #fff; background:#2557b7; }

.contentVideo { position: relative; display: block; padding: 90px 0 175px 0;width: 100%; z-index: 1; }
.contentVideo .text { display: inline-block; position: relative; width: 25%; z-index: 1; }
.contentVideo .text img { position: absolute; top:0; left: 0; z-index: -1 }
.contentVideo h2 { position: relative; color: #2557b7; }
.contentVideo h2::before { content: ""; position: absolute; top: -1%; left: -1%; width: 35%; height: 100%;
 background: url(../images/imgBlackLine.png) top center no-repeat ; background-size: 100% auto; z-index: 2;  }
.contentVideo .videoBase { position: relative; display: inline-block; margin-top:80px; width: 75%; z-index: 2;}
.videoBase .videoArea { position: relative; display: inline-block; margin: 0 1%; /*width: 30%; max-width: 287px;*/ width: 100%; background:#000; 
	overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.4);   }
.videoBase .videoArea img { opacity: 0.6; transition: .5s; }
.videoBase .videoArea:hover img { opacity: 1; transform: scale(1.05); }
.videoBase .videoArea  .videoText { position: absolute; top:48%; left: 0; width: 100%; text-align: center; }
.videoBase .videoArea  .videoText p { font: 1.6em/1.5em "微軟正黑體"; color: #fff; text-align: center; letter-spacing: normal; }
.videoArea  .videoText .ang { display: inline-block; border-top: 15px solid rgba(0,0,0,0);border-bottom: 15px solid rgba(0,0,0,0);border-left: 25px solid rgba(255,255,255,0.8);
	}



.information { padding-bottom: 60px; }
.information h3	{ font: bold 2.6em/1.5em "微軟正黑體"; color: #fff; text-align: center;}
.information p	{ font: 1.6em/1.5em "微軟正黑體"; color: #fff; text-align: left;}

.box2 .box2Inner { display: inline-block;width: 50%; letter-spacing: normal;  font: 1.6em/1.5em "微軟正黑體"; color: #000;} 
.box2Inner table { width: 100%; }
.box2Inner tr { width: 100%; }
.box2Inner tr:first-child { color: #03609e; background: #fbd123;  }
.box2Inner tr:last-child { background: #fff;  }
.box2Inner td { padding: 5px 0; width: 25%; }

.bgColorGray { background: #eee }
.bgColorWhite { background: #fff }

.indexCotentBg1 { /* background: url(../images/indexCotentBg1.jpg) top center repeat-y ;*/ }
.indexCotentBg2 {  background: url(../images/indexCotentBg2.jpg) center center repeat-y ; }
.indexCotentBg3 {  /*background: url(../images/indexCotentBg3.jpg) center center repeat-y */; }
.indexCotentBg4 {  background: url(../images/indexCotentBg4.jpg) center center repeat-y ; }
.indexCotentVideoBg { /*background: url(../images/indexCotentVideoBg.jpg) center center repeat-y ;*/ }

.informationCotentBg1 { background: url(../images/informationCotentBg1.jpg) center center repeat-y ; }
.informationCotentBg2 { background: url(../images/informationCotentBg2.jpg) top center repeat-y ; }
.informationCotentBg3 { background: url(../images/informationCotentBg3.jpg) top center repeat-y ; }

.roomABg1 { position: relative; background: url(../images/roomABg-1.jpg) top center repeat-y ; }
.roomABg2 { background: url(../images/roomABg-2.jpg) top center repeat-y ; }
.roomABg3 { position: relative; background: url(../images/roomABg-3.jpg) top center repeat-y ; }
.roomABg4 { background: url(../images/roomABg-4.jpg) top center repeat-y ; }
.roomABg5 { position: relative; background: url(../images/roomABg-5.jpg) top center repeat-y ; }
.roomABg1::before ,
.roomABg3::before ,
.roomABg5::before {content:""; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgba(3,96,158,.75); z-index: 0; }
.roomABg1 > div ,
.roomABg3 > div ,
.roomABg5 > div { position: relative;z-index: 5; }


.roomBBg1 { background: url(../images/roomBBg-1.jpg) top center repeat-y ; }
.roomBBg2 { background: url(../images/roomBBg-2.jpg) top center repeat-y ; }
.roomBBg3 { background: url(../images/roomBBg-3.jpg) top center repeat-y ; }
.roomBBg4 { background: url(../images/roomBBg-4.jpg) top center repeat-y ; }
.roomBBg5 { background: url(../images/roomBBg-5.jpg) top center repeat-y ; }

.tourokinawaBG2 { background: url(../images/tour-okinawaBG-2.jpg) top center repeat-y ; }
.tourokinawaBG4 { background: url(../images/tour-okinawaBG-4.jpg) top center repeat-y ; }

.tourishigakiBG2 { background: url(../images/tour-ishigakiBG-2.jpg) top center repeat-y ; }
.tourishigakiBG4 { background: url(../images/tour-ishigakiBG-4.jpg) top center repeat-y ; }


.tourmiyakoBG2 { background: url(../images/tour-miyakoBG-2.jpg) top center repeat-y ; }
.tourmiyakoBG4 { background: url(../images/tour-miyakoBG-4.jpg) top center repeat-y ; }

.tournagasakiBG2 { background: url(../images/tour-nagasakiBG-2.jpg) top center repeat-y ; }

.tourjejuBG2 { background: url(../images/tour-jejuBG-2.jpg) top center repeat-y ; }

.touryeosuBG2 { background: url(../images/tour-yeosuBG-2.jpg) top center repeat-y ; }

.toursaseboBG2 { background: url(../images/tour-saseboBG-2.jpg) top center repeat-y ; }



.buttonBase { margin-bottom: 30px;  }
.detailBase h2 { text-align: center; }
.buttonBase ul { list-style: none; text-align: center; }
.buttonBase ul li,
.detailSign { display: inline-block; margin: 0 5px; padding: 5px 8px; border-radius: 99em; text-align: center; letter-spacing: normal; background:#fbd123;  }
.buttonBase ul li a,
.detailSign { font: 1.6em/1em "微軟正黑體"; color: #000;  }
.buttonBase ul li:hover,
.buttonBase ul li.now,
.detailSign.blueSign { background:#2557b7; }
.buttonBase ul li:hover a,
.buttonBase ul li.now a,
.detailSign.blueSign { color: #fff;}

.detailAll { display: flex; padding-bottom:50px;  text-align: center; flex-wrap: wrap; justify-content: center; }
.aDetail { margin: 0 1% 3% 1%; padding-bottom: 10px; display: inline-block; flex-grow :0; flex-shrink:0;  width: 30%; max-width: 372px; background:#fff; }
.aDetail img { width: 100%; }
.detailText { letter-spacing: normal; }
.detailText h3 { padding: 5px 0; font: bold 2em/1em "微軟正黑體"; color: #fff; text-align: center; background:rgba(0,0,0,0.8); }
.detailText p { font: 1.6em/1.5em "微軟正黑體"; color: #000; text-align: left; }

.detailSignBase { text-align: center; }


.fixBase { position: fixed; bottom:20%; right: 0; width: auto; height: auto; z-index: 20;}
.fixBase ul { list-style: none; }
.fixBase ul li { margin-bottom:2em;  padding-top: 1.2em; width: 6em; height: 6em; border-radius: 99em; text-align: center; background:rgba(0,0,0,0.8);   }
.fixBase ul li a {  font: 1.7em/1.2em "微軟正黑體"; color: #fff; text-align: center;  }
.fixBase ul li:hover { background:#fbd123; }
.fixBase ul li:hover a { color: #000; }

.playBase { display: none; position: fixed; top:0; left: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.8); z-index: 80; }
.playContent  { position: relative; margin-top: 50px;  }
.playContent iframe { display: block; margin: 0 auto; }
.closePlay { margin: 0 auto; padding: 6px 0; width: 250px; height: auto;  font: 1.6em/1.5em "微軟正黑體"; color: #fff; text-align: center; border:1px solid #fff; 
 border-radius: 99em; background:rgba(0,0,0,0.8); cursor: pointer; }






.orderBase { position: relative; margin: -200px auto 0 auto; padding:30px;  width: 70%; height: auto; border-top:10px solid #03609e;
	border-radius: 5px;  background: rgba(255,255,255,0.9); z-index: 5; }
.orderBase .selectArea { display: inline-block; margin: 0 1%; width: 47.5% ; letter-spacing: 0;}
.orderBase .selectArea select {width: 100% ; padding: 7px 0; border:1px solid #bbb; font: 18px/20px "arial","微軟正黑體";  }
.orderBase .promotionArea { margin: 2px auto; padding:10px 0;  width: 98%;  letter-spacing: normal;font: 14px/18px "arial","微軟正黑體"; letter-spacing: 1px;color: #fff;}
.orderBase .promotionArea h3 { margin: 2px 0; color: #ffca00; letter-spacing: 0;}
.orderBase .promotionArea h6 { margin: 0 0 10px 0;  letter-spacing: normal;font: 14px/16px "arial","微軟正黑體"; letter-spacing: 1px;color: #000;}
.orderBase .content2Box > div:first-child,
.orderBase .content2Box > div:last-child { padding-right: 0; padding-left: 0;}
.orderBase .content2Box > div,
.orderBase .content2Box > div:first-child,
.orderBase .content2Box > div:last-child { padding: 10px;}

.orderBase .content2Box h6 { margin: 20px; padding: 0 0 10px 0; border-bottom:1px solid #bbb  }
.orderBase .content2Box h6,
.orderBase .content2Box h6 a,
.orderBase .content2Box h6 a:link,
.orderBase .content2Box h6 a:visited { letter-spacing: normal; font: 20px/20px "arial","微軟正黑體"; color: #000; letter-spacing: 1px}
.orderBase .content2Box h6 a .button { display: inline-block; margin: -5px 0 0 5px; padding: 5px 20px; font-size: 12px; color: #fff; background: #03609e;}
.orderBase .content2Box h6 a .slaeOut {background: #555}
.orderBase .content2Box h6 a .waiting {background: #4692fa}
.orderBase .content2Box h6 a.moreInformation { font-size: 12px; }
.orderBase .precautions { margin: 20px 0 0 0; letter-spacing: normal; font: 14px/20px "arial","微軟正黑體"; letter-spacing: 1px; text-align: left;}
.orderBase .precautions h6 { margin: 5px 0; font-size: 16px; font-weight: bold }
.orderBase .precautions li { margin: 0 0 0 20px; list-style: disc}

.orderBase .content2Box h6.room,
.orderBase .typeLeft { display: none; }
.customPriceTable { font:16px/1.3 "微軟正黑體";text-align: center; color: #000;  }

.orderBase .customPriceTable {margin-top:30px; border-top: 1px dotted #545454 }
.orderBase .customPriceTable > div {  padding: 10px 0 !important}
.orderBase .customPriceTable div div { padding: 10px 0; border: 1px solid #ddd }
.orderBase img { width: 100% }
.orderBase ul.customQA { margin-left:0%; }
.orderBase ul.customQA li {list-style: none; border-bottom: 1px solid #bbb}
.orderBase ul.customQA li:nth-child(even) { margin-bottom:40px; border-bottom: 1px solid #545454}
.orderBase ul.customQA li:nth-child(odd) {color: red}
.orderBase ul.customQA li:nth-child(even)::before {content: "A"}
.orderBase ul.customQA li:nth-child(odd)::before {content: "Q"}
.content1Box > div { display: inline-block; width: 80%; padding: 0 0 20px 0; letter-spacing: 0}
.content2Box > div { display: inline-block; width: 49.5%; padding: 0 0 -20px 0; letter-spacing: 0; }
.content2Box div .images { display: inline-block; position: relative; }
.custom1 { margin: 0px 30px -40px 0; padding: 0 0 50px 0; width: 80%; position: relative; z-index: 2 }
.content2Box div .images img {width: 80%}
.content2Box div .images::after {content: ""; display: block; position: absolute; top: -5%;left:5%; width: 90%; height: 110%; z-index: 1}
.content2Box > div:first-child { padding-left:10%; }
.content2Box > div:last-child { padding-right:10%; }
.customRoomUse > div p { padding: 10px 40px 0 0 }
.customTourUse > div:first-child {  margin-right: 5px; margin-left:-15px;  border-right: 1px solid #545454 }
.customTourUse > div:last-child { margin-right: -5px; margin-left: 15px; }

.content3Box > div { display: inline-block; width: 25%; padding: 0 0 -20px 0; letter-spacing: 0; }
.customTourUse2 > div { margin: 0 1% ;width:30%; }
.content3Box h3 { padding-top: 20px; text-align: center; font: 20px/1.4em "微軟正黑體"; letter-spacing: normal;  }

.content5Box > div { display: inline-block; margin: 1%; width: 18%; padding: 1%; letter-spacing: 0; }

.smallPhoto { display: inline-block; margin:0 0.5%;  width: 31% }

.shipName {text-align: center; font: 20px/1.4em "微軟正黑體"; color: #757575;background: #ddd;}



.customQA { padding: 0 20px; list-style: none; }
.customQA li { margin-bottom: 20px; font: 20px/1.4em "微軟正黑體"; color: #000; text-align: left; }
.customQA li:nth-child(odd) { font-weight: bold; }
.customQA li:nth-child(even) { padding-bottom: 5px; border-bottom: 1px solid #999; }


.group-type-ph { display: none; }
.typeColorRed { color: red !important; }


@media only screen and (max-width: 1280px) {
/*#mtkContainer { position: relative;overflow-x: hidden;  font-size: 9px;  }*/
 }


@media only screen and (max-width: 1024px) {
.customPriceTable { font:14px/1.3 "微軟正黑體";  }
}

@media only screen and (max-width: 850px) {


.pageMenu ul li {  padding: 15px 0;  }
.pageMenu ul li a,
.pageMenu ul li a:link { font:1.6em/1em "微軟正黑體";  }
.pageMenu ul li.hasChid .chid { top:47px;	}



.orderBase { margin: 0 auto; padding:2%;  width: 90%; height: auto; border-radius: 5px;  background: rgba(255,255,255,0.9) }
.orderBase .selectArea { display: inline-block; margin:0 1% 2% 1%; width: 48% ; letter-spacing: 0;}
.orderBase .selectArea select {width: 100% ; padding: 7px 0; border:1px solid #bbb;}
.orderBase .promotionArea { margin: 2px auto; padding:5%;  width: 98%; font: 14px/20px "arial","微軟正黑體"; letter-spacing: 1px;color: #fff;text-align: left;}
.orderBase .promotionArea h3 { margin: 2px 0; color: #ffca00; letter-spacing: 0; text-align: left;}
.orderBase .content2Box > div:first-child,
.orderBase .content2Box > div:last-child { padding-right: 0; padding-left: 0;}
.orderBase .content2Box > div,
.orderBase .content2Box > div:first-child,
.orderBase .content2Box > div:last-child { padding: 10px;}

.orderBase .content2Box h6 { margin: 20px; padding: 0 0 10px 0; border-bottom:1px solid #bbb  }
.orderBase .content2Box h6,
.orderBase .content2Box h6 a,
.orderBase .content2Box h6 a:link,
.orderBase .content2Box h6 a:visited { font: 20px/20px "arial","微軟正黑體"; letter-spacing: 1px}
.orderBase .content2Box h6 a .button { display: inline-block; margin: 10px 0 0 0; padding: 5% 20%; font-size: 16px; }
.orderBase .content2Box h6 a .slaeOut {background: #555}
.orderBase .content2Box h6 a .waiting {background: #4692fa}

.orderBase ul.customQA { margin-left:0}

}



@media only screen and (max-width: 800px) {
header.header {   padding-top: 0px; padding-bottom: 0px; background:none; }
header.header { }



h1 {margin-top:0;}
h1 .forPcH1 { display: none; }
h1 .tableHeader { display: block }

.indexPage { position: relative; margin-top: -20px; margin-bottom: 78px; z-index: 10;  }


.indexPage ul li { display: block; margin: 0 0 2% 0; padding-bottom:0px; width: 100%; max-width: 100%; letter-spacing: normal;box-shadow: 0 8px 10px rgba(0,0,0,0.2);
	 letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed;}
.indexPage ul li .img,
.indexPage ul li .text { display: inline-block; letter-spacing: normal; }
.indexPage ul li .img { width: 30%; overflow: hidden;  }
.indexPage ul li .img img { /*height: 100%; width: auto; */transform: translateX(-10%); }
.indexPage ul li .text { width: 70%; }

/*
.indexPage ul { text-align: center; }
.indexPage ul li { ; margin: 0 10px 20px 10px; width: 45%; max-width: 45%;  }
*/

.onlyPc { display: none; }	
.indexContent h2 { padding: 20px 20px 10px 20px; font: bold 5em/1.2em "微軟正黑體"; color: #000; text-align: left; }
.indexContent .text p {  }


.aDetail { margin: 0 1% 3% 1%; padding-bottom: 10px; display: inline-block; width: 48%; max-width: 48%; }



.fixBase { position: fixed; bottom: 0; width: 100%; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch; z-index: 50; }
.fixBase ul { position:relative; width: auto; z-index: 10;  white-space:nowrap; width:auto; border-radius: 0; }
.fixBase ul li { display: none; margin-bottom: 0em; padding: 14px 10px;width: auto; height: auto; border-radius: 0; }
.fixBase ul li:last-child { display: block; background:#fbd123; color: #000;}
.fixBase ul li a {  font: 2em/1em "微軟正黑體"; color: #000; text-align: center;  }
.fixBase ul li:last-child a { color: #000; }

}


@media only screen and (max-width: 550px) { 
/*#mtkContainer { position: relative;overflow-x: hidden;  font-size: 8px;  }	*/
h1 .mobileHeader { display: block; }
h1 .tableHeader { display: none ;}


.pageMenu { display: none; position: fixed; top:0; left: -80vw; width: 80vw; height: 100vh; z-index: 50; box-shadow: 0 10px 10px rgba(0,0,0,0.6);background:rgba(251,209,38,0.95)}
.pageMenu ul  { text-align: center;}
.pageMenu ul li { display: block; padding:5px ; width: 100%; }
.pageMenu ul li:hover {background:#fff;}
.pageMenu ul li a,
.pageMenu ul li a:link { width: 100%; padding:; font:1.6em/1em "微軟正黑體"; color: #000; text-align: center; border-right:none; }
.pageMenu ul li:first-child a,
.pageMenu ul li:first-child a:link { border-left:none;; }
.pageMenu ul li:last-child a,
.pageMenu ul li:last-child a:link { border-right:none;}


.pageMenu ul li.hasChid { position: relative; }
.pageMenu ul li.hasChid .chid { display: block; position:static; top:0;left: 0; width: 100%; z-index: 10;	}
.pageMenu ul li.hasChid .chid a,
.pageMenu ul li.hasChid .chid a:link { display: block; margin: 0 auto; width: 80%; color: #000; background: rgba(0,0,0,0.05);}
.pageMenu ul li.hasChid .chid a:hover { color:rgba(0,0,0,1);   background: rgba(236,194,0,0.9);  }


.mobileMenuIO { display: none; position: fixed; bottom:50px; right: 0; width: 50px; height: 50px; border-radius: 20px 0 0 20px; background:rgba(0,0,0,0.8); z-index: 50; }
.mobileMenuLineBase { position: relative; width: 100%; height: 100%; width: 100%; height: 100%; }
.mobileMenuLineBase .line { position: absolute; left: 15%; margin: 0 auto; width: 70%; height: 5px; background: white; transition: .5s; }
.mobileMenuLineBase .line:nth-child(1) { top:20%;  }
.mobileMenuLineBase .line:nth-child(2) { top:45%; }
.mobileMenuLineBase .line:nth-child(3) { top:70%;  }

.mobileMenuLineBase.open .line:nth-child(1) { top:45%; transform: rotate(45deg); }
.mobileMenuLineBase.open .line:nth-child(2) { top:50%; opacity: 0; }
.mobileMenuLineBase.open .line:nth-child(3) { top:45%; transform: rotate(-45deg);  }



.indexPage { position: relative; margin-top: 0; margin-bottom: 0; padding: 10% 0; z-index: 10; background:#03609e;  }
.indexPage ul li { display: block; margin: 0 0 10% 0; padding-bottom:0px; width: 100%; max-width: 100%; box-shadow: 0 7px 10px rgba(0,0,0,0.2);
border:none; 
	; letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed;}
.indexPage ul li .img,
.indexPage ul li .text { display: inline-block; letter-spacing: normal; }
.indexPage ul li .img { width: 35%; overflow: hidden;  }
.indexPage ul li .img img { height: 100%; width: auto; transform: translateX(-42%); }
.indexPage ul li .text { width: 65%; }
.indexPage ul li h3 { padding: 5px 0; font: bold 2em/1em "微軟正黑體"; color: #2557b7; }

.indexContent h2 { padding: 20px 20px 10px 20px; font: bold 3em/1.2em "微軟正黑體"; color: #000; text-align: center; }
.indexContent .text {  width: 100%; }
.indexContent .img {  width: 100%; }



.buttonBase ul li,
.detailSign { margin-bottom: 5px;  }


.aDetail { margin: 0 0% 10% 0%; padding-bottom: 10px; display: block; width: 100%; max-width: 100%; }

.contentVideo { position: relative; display: block; padding: 70px 0;width: 100%; z-index: 1; }
.contentVideo .videoBase { margin-top:3%; width: 100%;}
.videoBase .videoArea { position: relative; display: block; margin: 0 auto 10% auto; width: 80%; max-width: 287px;    }


.box2 .box2Inner { display: block;width: 100%; } 

.orderBase .content2Box > div,
.orderBase .content2Box > div:first-child,
.orderBase .content2Box > div:last-child { padding: 0px;}
.content2Box > div { display:-block; width: 100%; padding: 0 0 0 0; }
.moreInformation { display: inline-block; vertical-align: bottom !important; text-align: right; }

.customPriceTable .typeCenter div { min-height: 60px; }
.orderBase .customPriceTable div div { min-height: 80px; /*font-size: 10px; letter-spacing: -1px */}

/*
.customPriceTable { font:20px/1 "微軟正黑體";  }
*/

}



@media only screen and (max-width: 375px) {

.orderBase .content2Box h6,
.orderBase .content2Box h6 a,
.orderBase .content2Box h6 a:link,
.orderBase .content2Box h6 a:visited {/* font: 16px/20px "arial","微軟正黑體";*/ letter-spacing: 1px}
.orderBase {  padding:2%;  width: 96%;}





}