.inlineBlockSpacing {
     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; /* Webkit: fixes text-rendering: optimizeLegibility */   
}	

body { overflow-x: hidden; }

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

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

.middle{ width: 100%; max-width: 1280px; margin: 0 auto; position: relative;}
.width1600{width: 100%; max-width: 1600px; margin: 0 auto; position: relative;}


header.header { position: relative; padding: 0; margin: 0; width: 100%; height: 660px;}
header.header h1 img.mobile{display: none;}

/*--各國國家版頭--*/ 
body#allcountry #mtkContainer header.header {background: url(../images/header_index.jpg) top center no-repeat;}
body#france #mtkContainer header.header {background: url(../images/header_index_france.jpg) top center no-repeat; position: relative; padding: 0; margin: 0; width: 100%; height: 780px;}
body#uk #mtkContainer header.header {background: url(../images/header_index_uk.jpg) top center no-repeat; position: relative; padding: 0; margin: 0; width: 100%; height: 780px;}



/*--版頭選單--*/
.nav { position: relative; width:26%; height: 30px; background: rgba(0,0,0,0.7); text-align: center; z-index: 98;margin:0 auto;border-radius: 0 0 30px 30px;}

.nav>ul { display: inline-flex;  transition: all 0.2s; text-decoration: none;}
.nav a { display: block; color: white; padding: 0 10px; width: 130px; font: 16px/30px "arial","微軟正黑體";}
.nav a:hover,
.nav li:hover,
.nav>ul>li.active>a { background: #b5881a;}
.nav2 { display:none; background: #d2a63c;}
.nav>ul>li:hover .nav2 {  display: block;}



/*--各區背景--*/
.bg-white{ background: #fff; position: relative; width: 100%; margin: 0 auto; }
.bg-gray{ background: #eeeeee; position: relative; width: 100%; margin: 0 auto; }
.bg-blue{ position: relative; width: 100%;margin: 0 auto; background: url(../images/map_bg.png) #0168b7 top center repeat-y;}
.inBottom{ padding: 50px 0 0; }
.inBottom2{ padding: 50px 0 20px; }

.howToCraftsman{ margin:0 auto; width: 90%; max-width: 1400px; }




/*--版頭C23--*/
header.header h1 .goodsBox{ position: relative;}
header.header h1 .goodsBox .c23Box{ display: block; position: absolute; width: 100%; top: 460px;}

.intro-anchors{ display: none;} 
.carrier .box-head{ display: none;} 
.carrier{ width:100%; font-family:"Microsoft JhengHei","Apple LiGothic Medium"; } /*margin: 0 0 40px 0;*/ 
.carrier h4{ display: none; } /*position: relative; width: 96%; max-width: 200px; text-align: center; font:bold 1.6em/1.4 "arial","微軟正黑體"; 
  letter-spacing: 0; color: #fff; background: #cf5555;margin: 0px auto 20px; padding: 5px;*/ 

.carrier ul { width: 70% ; padding: 2% 0 0; /*margin: 36% auto 0;*/ margin: 0 auto 0;text-align: center;}
.carrier ul li{  font-family: "Arial","Microsoft JhengHei","微軟正黑體";position: relative; width: 100%; background: rgba(255,255,255,0.8); padding: 1%; border-left: 9px solid #06c; transition: all 0.3s;}
.carrier ul li a {display: block; position: relative; width: 100%; text-decoration: none; color: #000; font-size:0px; line-height: 1.4; transition: all 0.2s;}
.carrier ul li strong { display: block; width: 96%; font: bold 24px/1.4 "微軟正黑體"; color: #000; text-align: left; padding: 0px 5px 0 5px; transition: all .3s; }
.carrier ul li .txt-pp{ display: none; color: #ca1c1c;}
.carrier ul li .price{ display: none; }/*width: 24%; text-align: center; padding: 0; border-radius: 25px; border: solid 2px #ca1c1c; font-family: "Century Gothic","Helvetica","Microsoft JhengHei"; font-weight: bold;
font-size: 18px; color: #ca1c1c; transition: all 0.3s; display: inline-block; position: absolute; right: -30%; vertical-align: bottom !important;*/
.carrier ul li em.price { display: none; font-style: normal;}
/*.carrier ul li .price span { font-size: 27px;font-weight: normal;}
.carrier ul li:hover .price{ background: #ca1c1c; color: #fff; border: solid 2px #ca1c1c;}*/
.carrier ul li::after{
    content: "";
    position: absolute;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #06c;
    border-style: solid;
    margin: 5px;
    top: 30%;
    right: 12px;
    animation: link .5s infinite linear alternate;
    /*background: url(../images/hand.png);width: 40px;height: 40px; top: 5px; right: 0;*/
}

@keyframes link{
  from{transform:  translate(0,0);}
  to{transform:  translate(8px,0);}
}

.carrier ul li:hover{ background: rgba(255,255,255,1); transform: scale(0.95); border-left: 9px solid #df2525; }
.carrier ul li:hover strong{ color: #06c;}
.carrier ul li:hover::after{ border-color: transparent transparent transparent #df2525; animation:paused;}




/*--職人旅遊--*/
.contentBox { margin-top: 28px; padding-bottom: 70px;}
.contentBox .photo { position: relative; display: inline-block; width: 60%; float: left; cursor: pointer; overflow: hidden; }
.contentBox .photo img { width: 100%; transition: .5s; }
.contentBox .photo:hover img { transform: scale(1.1); }

.contentBox .text { display: inline-block; padding: 25px 0 0 25px; width: 40%; float: right; }
.contentBox .TextAlignCenter {text-align: center; }
.contentBox .text h3 { font: bold 28px/1.3 "arial","微軟正黑體"; color: #0168b7; letter-spacing: normal; margin-bottom: 10px; border-left: 8px solid; padding-left: 11px;}
.contentBox .text p { font: 18px/1.8 "arial","微軟正黑體"; color: #000; letter-spacing: normal; text-align: justify;}
.contentBox .text i.fa-check{color: #c6a037;margin-right: 5px; font-size: 20px;}

.contentBox .text .button { text-align: center; cursor: pointer;}
.contentBox .text .button p  { display: inline-block; padding: 5px 20px; font: 18px/1.8 "arial","微軟正黑體"; color: #fff; letter-spacing: normal; border-radius: 99em; background-image: linear-gradient(to right,#2194ed,#2870bb) ; transition: .5s; }
.contentBox .text .button p:hover { transform: translateY(5px); background-image: linear-gradient(to right,#007CDD,#00458D) ; }

.contentBox .text .info{display: none;}
.contentBox .text p.infoP{color: #ac851a; font: bold 18px/1.8 "arial","微軟正黑體"; letter-spacing: normal; padding-bottom: 10px;}



/*--分區標2色--*/

/*gold*/
.title_t1{ display: block;text-align: center; margin-bottom: 40px; padding-top: 10px;}
.title_t1 img{ display: block; width: 100%; max-width: 115px; margin: 0 auto;}
.title_t1 p{ display: block; font-family: 'Damion', cursive; font-size: 28px; line-height: 1; letter-spacing: 1px; color: #a87b00;}
.title_t1 h2{ display: inline-block; color: #a87b00; width: auto; font: bold 34px/1.2 "arial","微軟正黑體"; border-bottom: 2px solid #a87b00; position: relative; padding: 0 10px 10px 10px; }
.title_t1 h2::after{
    content: ''; position: absolute; top: 100%; left: 50%; height: 0; width: 0; border: 15px solid transparent; border-top: 15px solid #a87b00; 
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0); 
}

/*white*/
.title_t2{ display: block;text-align: center; margin-bottom: 40px; padding-top: 30px;}
.title_t2 p{ display: block; font-family: 'Damion', cursive; font-size: 28px; line-height: 1; letter-spacing: 1px; color: #fff;}
.title_t2 h2{ display: inline-block; color: #fff; width: auto; font: bold 34px/1.2 "arial","微軟正黑體"; border-bottom: 2px solid #fff; position: relative; padding: 0 10px 10px 10px; }
.title_t2 h2::after{
    content: ''; position: absolute; top: 100%; left: 50%; height: 0; width: 0; border: 15px solid transparent; border-top: 15px solid #fff;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0); 
}

/*blue*/
.title_t3{ display: block;text-align: center; margin-bottom: 40px; padding-top: 10px;}
.title_t3 p{ display: block; font-family: 'Damion', cursive; font-size: 28px; line-height: 1; letter-spacing: 1px; color: #06c;}
.title_t3 h2{ display: inline-block; color: #06c; width: auto; font: bold 34px/1.2 "arial","微軟正黑體"; border-bottom: 2px solid #06c; position: relative; padding: 0 10px 10px 10px; }
.title_t3 h2::after{
    content: ''; position: absolute; top: 100%; left: 50%; height: 0; width: 0; border: 15px solid transparent; border-top: 15px solid #06c;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}



/*--Hot精選旅程-國家分頁按鈕--*/
.cityBase{ margin: 2% auto; text-align: center;}
.cityBase .picbox{ display: inline-block; position: relative; width: calc(20% - -4px); margin: 1% 0.5%; overflow: hidden; transition: all .3s; }
.cityBase .picbox .img{ max-width: 260px; filter: brightness(60%); transition: all .3s;}
.cityBase .picbox .img img{ width: 100%;}
.cityBase .picbox .cityText{ display: block; position: absolute; top:38%; width: 100%; height: 100%; color: #fff;}
.cityBase .picbox .cityText h3{ font: bold 24px/1.2 "arial","微軟正黑體";text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 5px, rgba(0, 0, 0, 0.5) 1px 1px 5px;}
.cityBase .picbox .cityText p{ font: 18px/1.2 "arial","微軟正黑體";text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 5px, rgba(0, 0, 0, 0.5) 1px 1px 5px;}
.cityBase .picbox:hover{ background: rgba(0,104,183,1);}
.cityBase .picbox:hover .img{opacity: 0.3;filter: brightness(100%);}



/*--職人介紹--*/
.craftsmanArea{ padding-top: 10px }
.craftsmanArea .personBox{ width: 87%; margin: 70px auto; position: relative; text-align: center;}

/*--大頁籤--*/
ul.menuBtn { position: absolute;top:-50px;left:10%;width: 80%;display: flex;}
ul.menuBtn li{ display: inline-block;
    border-radius: 30px 30px 0 0;
    background-color: #003368;
    background-image: linear-gradient(180deg, #003368 0%, #001f40 74%);
    padding: 5px 10px;
    font:bold 22px/2 "arial","微軟正黑體";
    width: 20%;
    margin: 0 -2px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    z-index: 4;
    position: relative;
    color:#FFF;
    cursor: pointer;
    flex-grow:1;
}

.width1600 .craftsmanArea .personBox ul.menuBtn li.on{ background: #FFF;box-shadow: none; z-index: 6; color:#000;}
.width1600 .craftsmanArea .personBox ul.menuBtn li:hover{ filter: brightness(105%);}




/*--介紹區--*/
.introduceBase{ background: #FFF; box-shadow: 1px 1px 5px rgba(0,0,0,0.3); z-index: 5; position: relative;}
.introduceBase .infoBox{ width: 90%; margin: 0 auto; padding: 10px 0; display: none;}
.introduceBase .infoBox.on{ display: block;}
.introduceBase .infoBox .personBtn{ padding: 3% 0;}



/*--職人頁籤--*/
.introduceBase .infoBox .personBtn ul li{ display: inline-block; cursor: pointer; margin: 0 8px; position: relative; }
.introduceBase .infoBox .personBtn ul li .personPic{ display: block; max-width: 100%; height: auto; transform: translateY(40px);transition: all .3s;}
.introduceBase .infoBox .personBtn ul li .personPic img{}
.introduceBase .infoBox .personBtn ul li .name{ display: block; position: relative; font:bold 22px/1.2 "arial","微軟正黑體"; background: #c7edff; color: #06c; border:3px solid #06c; padding: 6px 10px; z-index: 6; transition: all .5s;}


.introduceBase .infoBox .personBtn ul li:hover .name{ background: #06c; color: #fff95b;}
.introduceBase .infoBox .personBtn ul li:hover .personPic{transform: translateY(20px);}
.introduceBase .infoBox .personBtn ul .button.active .personPic{transform: translateY(20px);}
.introduceBase .infoBox .personBtn ul .button.active .name{ background: #06c; color: #fff95b;}




/*--職人內圖文--*/
.textAndPic{ margin: 0 auto; padding: 30px 60px 60px; text-align: center;}

.textAndPic .textBoxInner{ position: relative; display: inline-block; width: 65%; height: 31vh; float: left; text-align: left; padding: 0 3%; overflow: auto; }
.textAndPic .textBoxInner .h3Box{ display: table; position: relative; margin-bottom: 20px;}
.textAndPic .textBoxInner .h3Box h3{ font:bold 26px/1.2 "arial","微軟正黑體"; z-index: 5;}
.textAndPic .textBoxInner .h3Box .h3Bg{ width: 100%; height: 20px; position: absolute; z-index: -1;bottom: 0px; left: 0px;background: #fff95b;}

.textAndPic .picBoxInner{ display: inline-block; width: 35%; float: right; /*background: rgba(255,0,0,0.5);*/ }
.textAndPic .picBoxInner .images{ max-width: 340px; margin-left: 56px; }
.textAndPic .picBoxInner img{ width: 100%; border-radius: 99em; overflow: hidden; }

.textAndPic .textBoxInner p{ font: 16px/1.8 "arial","微軟正黑體"; padding-bottom: 30px; text-align: justify;}
.textAndPic .textBoxInner p strong{ font: bold 18px/1.8 "arial","微軟正黑體"; color: #06c;}
.textAndPic .textBoxInner .line{ border-bottom: 1px dotted #06c; margin-bottom: 30px;}

.picBox.active{display:block;}
.picBox {display: none;}




/*---------------------------【分頁Page】---------------------------*/

/*--職人報告--*/
.bg-gray-2{ position: relative; width: 100%; height: 560px; margin: 0 auto; background: url(../images/france_p1bg.jpg) #eeeeee top center no-repeat; overflow: hidden; padding: 50px 0 20px;}
.middleArea{ width: 100%; max-width: 1280px; margin: 0 auto; position: relative;  padding: 0 2%; /*background: rgba(255,0,0,0.2);*/ }
.infoBase{ position: absolute; display: inline-block; width: 55%; text-align: left; padding: 2% 2%; left: 5%;}
.infoBase .h3Box{ display: table; position: relative; margin-bottom: 20px;z-index: 1; }
.infoBase .h3Box h3{ font:bold 26px/1.2 "arial","微軟正黑體"; z-index: 5; }
.infoBase .h3Box .h3Bottom{ width: 100%; height: 20px; position: absolute;bottom: 0px; left: 0px;background: #fff95b; z-index: -1;} 
.infoBase p{ font: 16px/2 "arial","微軟正黑體"; padding-bottom: 0px; text-align: justify; }
.infoBase p span.underline{ border-bottom: 2px solid #77d9f6 ; padding-bottom: 1px;}

.personPicBox{ position: absolute; top: 0; right: 8%; max-width: 420px; }
.personPicBox img{ width: 100%; }
.personPicBox .pMobile{display: none;}




/*--主打特色--*/
.bg-white-2{ background: #fff; position: relative; width: 100%;margin: 0 auto; padding: 50px 0 0; }

.roundBase{ position: relative; width: 100%; margin: 0 auto;}
.roundBase .slideBox{ position: relative; margin: 0 auto; }
.roundBase .slideBox img{ max-width:2000px; }

.roundBase .slideBox .textRound{ position: absolute; color: #fff; top: 50%; left: 20%; width: 420px; letter-spacing: 0.05em; background: rgba(0, 0, 0, 0.5); padding: 25px 40px;transform: translateY(-50%);}
.roundBase .slideBox .textRound h5{ font: bold 25px/1.5 "arial","微軟正黑體"; text-align: center; }
.roundBase .slideBox .textRound h5::after{ content: ""; width: 100%; margin: 10px auto 15px; display: block; border-bottom: 1px solid #fff; }
.roundBase .slideBox .textRound p{ font: 16px/1.5 "arial","微軟正黑體"; text-align: justify;}
.roundBase .slideBox .textRound span{ font-size: 12px; }

.roundBase .menuBtn{ position: absolute; transform: translate3d(0, -20px, 0); width: 100%; left: 0; z-index: 10; bottom: 10px; text-align: center; }
.roundBase .menuBtn .title{ display: inline-block; width: auto; height: auto; margin: 0 4px;  border-radius: 2em; background: #000; opacity: .7;
color: #fff; padding: 7px 14px; font-size: 14px; font-family: "arial","微軟正黑體"; font-weight: bold; cursor: pointer; }
.roundBase .menuBtn .title.active{ opacity:1; background: #06c; color: #fff; }


.slideBox.snow{ display: block;}
.slideBox{ display: none; }



/*--行程路線--*/
.bgRoute{ position: relative; width: 100%; height: 1080px; margin: 0 auto; background: url(../images/mapbg_france.jpg) top center no-repeat; padding: 50px 0 50px; }
.bgRoute-uk{ position: relative; width: 100%; height: 1000px; margin: 0 auto; background: url(../images/mapbg_uk.jpg) top center no-repeat; padding: 50px 0 50px; }

.routeBase{ position: relative;  }

.mapMenuBtn{ display: block; text-align: center; }
.mapMenuBtn .date{ display: inline-block; width: auto; height: auto;  background: #fff; margin: 4px 0px; padding: 10px 14px; color: #06c; font-size: 16px; font-family: "arial","微軟正黑體"; font-weight: bold; cursor: pointer;}
.mapMenuBtn .date.active{ background: #c8a040; color: #fff; opacity:1;}

.dayMapBox{ display: block; position: relative; text-align: center; margin: 0.5% auto; width: 100%;}
.travelDayInfo{ display: block; font: bold 18px/1.8 "arial","微軟正黑體"; padding: 1.5%; width: 82%; margin: 0 auto;}

.dayMapBox.snow{ display: block;}
.dayMapBox{ display: none; }

.mapImages{ width: 100%; margin: 0 auto;}
.mapImages img{ width: 100%; max-width: 630px; }

.city{ width: 250px; position: absolute; transition: 0.3s;}
.city h3{ position: absolute; font:bold 21px/1.4 "微軟正黑體"; color:#FFF; /*width: 120px;*/ padding: 0 5% ; bottom: 50px; z-index: 5;}
.city p{ position: absolute; width: 100%; color:#4e4e4e; font:bold 16px/1.2 "微軟正黑體"; top: -30px; text-align: left; /*bottom: 0;*/ }
.city img{ position: absolute; bottom: 40px; left:60px; border-radius: 99em; border: 2px solid #FFF; box-shadow: rgba(0,0,0,0.3) 1px 1px 10px;}
.city:hover{ transform:scale(0.95);}


/*--法國Day行程定位--*/


.day1-city1{ top: 55%; left: 5%; }
.day1-city1 h3{ background: #a364cf;}

.day2-city1{ bottom: 0; right: 25%; }
.day2-city1 h3{background: #a364cf;}
.day2-city2{ top: 55%; left: 5%; }
.day2-city2 h3{ background: #c8a040;}

.day3-city1{ top: 45%; right: 5%; }
.day3-city1 h3{ background: #a364cf;}
.day3-city2{ bottom: 5%; right: 10%; }
.day3-city2 h3{background: #c8a040;}
.day3-city3{ top: 60%; left: 4%; }
.day3-city3 h3{background: #a364cf;}

.day4-city1{ top: 60%; left: 4%;}
.day4-city1 h3{ background: #a364cf;}
.day4-city2{ bottom: 5%; right: 10%; }
.day4-city2 h3{background: #c8a040;}
.day4-city3{ top: 45%; right: 5%; }
.day4-city3 h3{background: #a364cf;}

.day5-city1{ bottom: 6%; right: 6% }
.day5-city1 h3{background: #a364cf;}
.day5-city2{ bottom: 6%; left: 4%;}
.day5-city2 h3{background: #c8a040;}

.day6-city1{ bottom: 6%; right: 6%; }
.day6-city1 h3{ background: #a364cf;}
.day6-city2{ bottom: 6%; left: 4%; }
.day6-city2 h3{background: #c8a040;}
.day6-city3{ top: 50%; left: 8%;}
.day6-city3 h3{background: #a364cf;}

.day7-city1{ right: 5%; bottom: 20%; }
.day7-city1 h3{background: #a364cf;}
.day7-city2{ left: 15%; bottom: 20%;}
.day7-city2 h3{background: #c8a040;}

.day8-city1{ bottom: 20%; right: 3%;}
.day8-city1 h3{ background: #a364cf;}
.day8-city2{ bottom: 20%; left: 4%; }
.day8-city2 h3{background: #c8a040;}

.day9-city1{ bottom: 15%; left: 2%; }
.day9-city1 h3{ background: #a364cf;}
.day9-city2{ bottom: 15%; right: 2%;}
.day9-city2 h3{background: #c8a040;}

.day10-city1{ top: 50%; right: 2%;}
.day10-city1 h3{ background: #a364cf;}
.day10-city2{ bottom: 0; right: 5%;}
.day10-city2 h3{background: #c8a040;}
.day10-city3{ bottom: 0; left: 8%;}
.day10-city3 h3{background: #a364cf;}
.day10-city4{ top: 50%; left: 2%; }
.day10-city4 h3{background: #c8a040;}

.day11-city1{ top: 55%; right: 5%; }
.day11-city1 h3{ background: #a364cf;}
.day11-city2{ left: 10%; bottom: 0; }
.day11-city2 h3{background: #c8a040;}
.day11-city3{ top: 55%; left: 5%;}
.day11-city3 h3{background: #a364cf;}

.day12-city1{ top: 55%; left: 5%;}
.day12-city1 h3{ background: #a364cf;}



/*--英國Day行程定位--*/
.day1-city1-uk{}

h3.cityTitle1{ background: #a364cf;}
h3.cityTitle2{ background: #c8a040;}


.day1-city1-uk{ top: 55%; left: 5%; }
.day2-city1-uk{ top: 55%; right: 5%; }

.day3-city1-uk{ top:40%; right: 15%; }
.day3-city2-uk{ bottom: 20%; left: 5%; }

.day4-city1-uk{ top:70%; right: 5%; }
.day4-city2-uk{ bottom: 7%; left: 5%; }
.day4-city3-uk{ top: 45%; left: 2%; }

.day5-city1-uk{ top:50%; right: 7%; }
.day5-city2-uk{ bottom: 7%; left: 5%; }


.day6-city1-uk{ top:35%; right: 5%; }
.day6-city2-uk{ bottom: 25%; left: 5%; }


.day7-city1-uk{ top: 45%; right: 2%;}
.day7-city2-uk{ bottom: 5%; right: 5%;}
.day7-city3-uk{ bottom: 5%; left: 5%;}
.day7-city4-uk{ top: 45%; left: 2%; }

.day8-city1-uk{ top:70%; right: 5%; }
.day8-city2-uk{ bottom: 7%; left: 5%; }
.day8-city3-uk{ top: 45%; left: 2%; }




/*--超夯景點--*/
.bg-white-hot{ position: relative; width: 100%; height: auto; margin: 0 auto; background: url(../images/viewbg_france.jpg) #fff top center no-repeat; overflow: hidden; padding: 50px 0 50px; }
.bg-white-hot-uk{ position: relative; width: 100%; height: auto; margin: 0 auto; background: url(../images/viewbg_uk.jpg) #fff top center no-repeat; overflow: hidden; padding: 50px 0 50px; }


.viewBase{ width: 85%; margin: 0 auto; padding: 10px 0;}
.viewBase2{ width: 85%; margin: 0 auto; padding: 10px 0;}

.viewBase .viewBasePic{ position: relative; display: inline-block; width: 40%; float: left;  transition: all .2s; }
.viewBase2 .viewBasePic{ position: relative; display: inline-block; width: 40%; float: right; transition: all .2s; }

.viewBasePic .pic{ max-width: 408px; }
.viewBasePic .pic img{ width: 100%; }
.viewBasePic:hover{ /*transform:rotate(-3deg); -moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -o-transform:rotate(-3deg); -ms-transform:rotate(-3deg);*/ }
.viewBase2 .viewBasePic:hover{ /*transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg); -ms-transform:rotate(3deg);*/ }

.viewBase .textOutside{ display: inline-block; width: 60%; padding: 70px 20px 0 20px; float: right; }
.viewBase2 .textOutside{ display: inline-block; width: 60%; padding: 70px 20px 0 20px; float: left; }

.textOutside .h3BoxInner{ display: block; color: #000;}
.textOutside .h3BoxInner span{ font: 28px/1.2 "Damion",cursive;  letter-spacing: 0.05em; color: #9f5a4e; }
.textOutside .h3BoxInner .h3Box{ display: inline-block; position: relative;margin-bottom: 15px; z-index: 1;}
.textOutside .h3BoxInner .h3Box h3{ font: bold 26px/1.2 "arial","微軟正黑體"; display: inline-block; z-index: 5; }
.textOutside .h3BoxInner .h3Box .h3Bottom{ width: 100%; height: 20px; position: absolute; bottom: 0px; left: 0px; background: #fff95b; z-index: -1;}
.textOutside p{ font: 16px/1.6 "arial","微軟正黑體"; text-align: justify;}




/*--左邊選單--*/
.fixBase{ display: block; position: fixed;  bottom: 25%; left: 2%; width: auto; height: auto; z-index: 100;}
.fixBase ul{ list-style: none;}
.fixBase ul li{ width: 60px; height: 60px; border-radius: 99em; margin: 0 0 7px 0; padding: 12px; text-align: center; background: rgba(0,0,0,0.65); transition: .3s; cursor: pointer;/*margin-bottom: 2em; padding-top: 1.2em;*/ }
.fixBase ul li a{font: 16px/1.2 "微軟正黑體"; color: #fff; text-align: center;}
.fixBase ul li.txtInner{ padding-top: 20px;}
.fixBase ul li:hover{ background: #c6a037; }


/*--goTop--*/
.goTop{display: none; position: fixed; bottom:8%; right: 2%; z-index: 48;text-align: center;}
.goTop a{color: #fff;}
.goTop li{display: block; cursor: pointer; font: 12px/1.2 "arial", "微軟正黑體"; color: #fff; background: #c6a037; border-radius: 99em; width: 50px; height: 50px; padding: 10px 10px;transition: all .5s;}
.goTop a:hover li{background: #ac7f14;}




/*-------------------------------Mobile-------------------------------*/

@media only screen and (max-width: 1400px){
.mapImages img{ width: 49%; }
}


@media only screen and (max-width: 1350px){
.city img { width: 60%; max-width: 160px;}
}


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

.nav{ width: 100%;border-radius: 0;}

.textAndPic{ padding: 30px 35px 60px;}
.textAndPic .textBoxInner{ width: 62%; height: 33vh;}
.textAndPic .picBoxInner{ width: 38%;}


.roundBase .slideBox img{ max-width: 1800px; }
.roundBase .slideBox .textRound{ left: 15%; }

.bgRoute{ height: 115vh; }
}


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

.carrier ul{ margin: 0 auto 0;}

.roundBase .slideBox img{ max-width: 1600px; }
.roundBase .slideBox .textRound{ left: 10%; }
}


@media screen and (max-width:1200px){
header.header h1 .goodsBox{  position: absolute;}
header.header h1 .goodsBox .hand{ right: 18%; }
.carrier ul{ width: 70%; margin: 0 auto 0; }

.personPicBox{ right: 4%; max-width: 35%;}

.bgRoute{ height: 105vh; padding: 50px 0 15%; }

.city h3{ font: 20px / 1.2 微軟正黑體; }
.city p {width: 80%; font: 14px / 1.2 微軟正黑體;}
.city img{ width: 55%; }

.day9-city1{ left: 5%;}
.day11-city1{ top: 85%;}
}



@media screen and (max-width:1100px){
.city img { width: 47%;}
}



@media screen and (max-width:1068px){
body #mtkContainer header.header,
body#france #mtkContainer header.header,
body#uk #mtkContainer header.header{ position: relative; padding: 0; margin: 0; width: 100%; height:auto;background:none; }

header.header h1 img.mobile{ display:block;max-width: 1300px;width: 100%;}

header.header h1 .goodsBox{ position: static; top:0; }
header.header h1 .goodsBox .c23Box{ position: static; background: #dddddd;; padding-bottom: 5%;}
header.header h1 .goodsBox .hand{ right: 15%; }

.carrier ul li strong{ font-size: 2.2vw; }

.textAndPic{ padding: 30px 30px 60px;}
.textAndPic .textBoxInner{ width: 55%; height: 33vh;}
.textAndPic .picBoxInner{ width: 45%;}
.textAndPic .picBoxInner .images{ margin-left: 40px;}

.travelDayInfo{ padding: 2%;}
.mapImages img {width: 47%;}

.day3-city1{ right: 4%;}
.day3-city2{ right: 4%;}
.day4-city2,.day4-city3{ right: 5%;}
.day5-city1{ right: 0;}
.day5-city2{ bottom: 6%; }
.day6-city1{ right: 3%; }
.day6-city2{ bottom: 6%; left: 6%;}
.day6-city3{ top: 60%; left: 6%; }
.day7-city1{ right: 0; }
.day7-city3{ bottom: 0;}
.day8-city1{ right: 0;}
.day9-city2{ right: 0;}
.day9-city3{ top: 60%;}
.day11-city1{ top: 60%; right: 0; }



.bgRoute-uk{height: auto;}
.day2-city1-uk{right: 0;}
.day3-city1-uk{right: 0;}
.day4-city1-uk{right: 0;}
.day5-city1-uk{right: 0;}
.day6-city1-uk{right: 0;}
.day7-city1-uk{right: 0;}
.day7-city2-uk{right: 0;}
.day8-city1-uk{right: 0;}





.fixBase{ position: fixed; left: 0; top: inherit; bottom: 0;  margin: 0; width: 100%; text-align: center; background: rgba(0,0,0,0.7); overflow-x: scroll;
overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; /*overflow-y: hidden; overflow-x: auto;*/}
.fixBase ul li{ display: inline-block; float: none; width: auto; height: 30px; margin: 0; padding: 5px 12px; font-size: 14px; line-height: 30px; background: none; border-radius: 0;}
.fixBase ul li.txtInner{ padding-top: 5px;}
}







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

.mapMenuBtn{ width: 95%; margin: 0 auto; }

.day2-city1{ right: 10%;}
.day3-city1{ right: 0; }
.day3-city2{ right: 3%; }
.day4-city2{ bottom: -16%;}
.day4-city3{ right: 4%;}
.day6-city1{ right: 4%;}
.day6-city3{ top: 65%;}
.day9-city3{ right: 0;}
}


@media screen and (max-width:960px){
.roundBase .slideBox .textRound{ width: 90%; top: 5%; left: 5%; padding: 25px; transform: translateY(0);}
.roundBase .slideBox .textRound h5{ font-size: 22px; }
.roundBase .slideBox .textRound p{ font-size: 14px; }

.roundBase .slideBox img{ max-width: 2500px; transform: translateX(-18%); height: 62vh;}
.roundBase .menuBtn .title { margin: 6px 4px 0; }

}





@media screen and (max-width:880px){
.inBottom{ padding: 30px 0 5px;}
.contentBox .photo { display: block; margin: 0 auto; width: 100%;  }
.contentBox .text { display: block; margin: 5% auto 0 auto; padding: 0; width: 100%; }

.carrier ul{ width: 80%;}
.carrier ul li::after{ top: 7px; }

.craftsmanArea .personBox{ width: 90%; }

.title_t2{ margin-bottom: 15px;}  /*white*/
/*.title_t3{ padding-bottom: 15px;} blue*/

.cityBase .picbox{ width: calc(30% - -6px);}

.textAndPic{ padding: 20px 20px 60px;}
.textAndPic .textBoxInner{ float: none; width: 90%;}
.textAndPic .picBoxInner{ float: none; width: 50%;}
.textAndPic .picBoxInner .images{ margin-left: 0; padding-bottom: 8%;}

.introduceBase .infoBox .personBtn ul .button .name,
.introduceBase .infoBox .personBtn ul .button.active .name{ font:bold 2.5vw/1.2 "arial","微軟正黑體"; }

.viewBase, .viewBase2{ margin: 35px auto; padding: 10px 12%; }
.viewBase .viewBasePic{ display: block; margin: 0 auto; width: 100%;}
.viewBase .viewBasePic .pic{ margin: 0 auto; }
.viewBase .textOutside{ display: block; margin: 4% auto 0 auto;padding: 0; width: 100%;}

.viewBase2 .viewBasePic{ display: block; margin: 0 auto; width: 100%;}
.viewBase2 .viewBasePic .pic{ margin: 0 auto; }
.viewBase2 .textOutside{ display: block; margin: 4% auto 0 auto;padding: 0; width: 100%;}

.textOutside .h3BoxInner .h3Box{ margin-bottom:15px; }

.day1-city1, .day12-city1{ top:110%; }

.day2-city1{ bottom: -12%;}
.day2-city2{ top: 110%; left: 2%;}

.day3-city1{ top: 120%; right: 0; }
.day3-city2{ bottom: -20%; right: 33%;}
.day3-city3{ top: 120%;}
.day3-city4{ left: 3%;}
.day3-city5{ left: 3%;}
.day4-city3{ right: 0; }
.day4-city1{ top: 120%; left: 3%;}
.day4-city2{ right: 34%; bottom: -20%;}
.day4-city3{ top: 120%; }
.day5-city1{ bottom: -30%; right: 5%;}
.day5-city2{ bottom: -30%; left: 30%;}
.day6-city1{ bottom: -30%; right: 8%}
.day6-city2{ bottom: -30%; left: 15%;}
.day6-city3{ bottom: 0; left: 5%;}

.day7-city1{ bottom: 0; }
.day7-city2{ bottom: 0; left: 10%;}
.day8-city1{ bottom: 0; left: 10%;}
.day8-city2{ bottom: -20%; left: 70%;}

.day9-city1{ left: 2%;}
.day9-city2{ right: -4%; }
.day10-city1{ top: 55%;right: -2%;}
.day10-city2{ bottom: -30%;right: 2%;}
.day10-city3{ bottom: -30%;}
.day10-city4{ top: 55%;}
.day11-city1{ top: 95%;}
.day11-city2{ bottom: -20%;}
.day11-city3{ top: 55%;}




.bgRoute-uk {padding:50px 0 30% 0;}

.day1-city1-uk{top: 110%;}

.day2-city1-uk{top: 110%;}
.day3-city2-uk{bottom: -5%;}

.day4-city1-uk{top: 136%;}
.day4-city2-uk{top: 136%;left: 36%;}
.day4-city3-uk{top: 136%;}


.day5-city1-uk{top: 126%;}
.day5-city2-uk{top: 110%;}

.day6-city1-uk{top: 136%;right: 10%;}
.day6-city2-uk{top: 136%;left:10%;}

.day7-city1-uk{top:136%;right:13%;}
.day7-city2-uk{bottom: 22%;right: 0%;}
.day7-city3-uk{bottom: 22%;left:2%;}
.day7-city4-uk{top:136%;left:13%;}

.day8-city1-uk{top: 136%;}
.day8-city2-uk{top: 136%;left: 36%;}
.day8-city3-uk{top: 136%;}


}



@media screen and (max-width:840px){
ul.menuBtn li{ font:bold 16px/1.8 "arial","微軟正黑體"}
ul.menuBtn { top: -36px; left: 5%;}
}


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


.carrier ul { padding: 1.5% 0;}
.carrier ul li::after{ top: 5px; }

.nav>ul{ overflow-x: hidden; white-space: auto; -webkit-overflow-scrolling: hidden; overflow-scrolling: hidden; m}
.nav a{ padding: 0 15px;width: auto;}

.cityBase .picbox{ width: 30%; /*width: calc(40% - 15px);*/ }

.introduceBase .infoBox .personBtn{ padding: 5% 0 1%; }
.introduceBase .infoBox .personBtn ul .button{ margin: 6px 6px; }
.introduceBase .infoBox .personBtn ul .button .personPic,
.introduceBase .infoBox .personBtn ul .button.active .personPic{ display: none; }

.bg-gray-2{ background-size: cover; height: 85vh; padding: 50px 0 0;}
.infoBase{ width: 85%; margin: 0 auto; position: relative; display: block; left: 0;}
.personPicBox{ position: relative; display: block; top: 88%; right: 0; margin: 0 0 0 31%; max-width: 45%;}
.personPicBox img{display: none;}
.personPicBox .pMobile{display: block;}

.roundBase .slideBox img{ height: 70vh; transform: translateX(-30%); }

.bgRoute{ height: auto; background-size: cover;}
.mapImages{ padding-bottom: 3%;}
.mapImages img{ width: 55%; }
.city { width: 40%; position: static; display: inline-block; text-align: center; margin: 0 auto; padding-bottom: 5%;}
.city img { position: static; width: 48%; margin-right: 160px;}
.city h3 { width: 43%;; position: relative; text-align: center; font: bold 22px/1.4 "微軟正黑體"; bottom: 124px; right: -157px; z-index: 5;}
.city p { position: relative; text-align: left; width: 48%; margin-top: -80px; font: bold 16px / 1.2 "微軟正黑體"; bottom: 18px; left: 157px; }


.bgRoute-uk {background-size: cover; height: auto; padding: 50px 0 20px 0;}



}





@media only screen and (max-width: 660px) {
.carrier ul li::after{ border-width: 6px 0 6px 10px; right: 5px; }
.carrier ul li strong{ font-size: 2.4vw; }

.city{ width: 45%;}
.city img{ width: 45%;}
.city h3{right: -140px;}
.city p{left: 140px;}
}





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

.carrier ul{ width: 80%; }
.carrier ul li strong{ font-size: 2.5vw; }

.contentBox{ padding-bottom:20px; }
.contentBox .photo,
.contentBox .text { float:none; }

.contentBox .text { padding: 5% 0; }
.contentBox .text h3{ font-size: 5vw; }
.contentBox .text p{ font-size: 3.2vw; padding-bottom: 5%; }


.title_t1 p, .title_t2 p, .title_t3 p, .title_t1 h2, .title_t2 h2, .title_t3 h2{ font-size: 5.5vw;}

.cityBase .picbox{ width: 40%;}
.cityBase .picbox .img{ filter: brightness(70%);}
.cityBase .picbox .cityText{ top: 33%; }
.cityBase .picbox .cityText h3{ font-size: 4vw;}
.cityBase .picbox .cityText p{ font-size: 2.5vw;}

.introduceBase .infoBox .personBtn ul .button .name,
.introduceBase .infoBox .personBtn ul .button.active .name{ padding: 5px 8px; }


.textAndPic{ padding: 20px 0px 50px; }
.textAndPic .picBoxInner{ width: 65%; }
.textAndPic .picBoxInner .images{ padding-bottom: 10%; }

.bg-gray-2{ height: auto; }
.personPicBox{ max-width: 48%; margin: 0 0 0 30%; }


.textOutside .h3BoxInner .h3Box h3{ font-size: 24px; }
.textOutside .h3BoxInner span{ font-size: 24px; }

.mapImages img{ width: 90%; }
.city h3{right: -125px;}
.city p{left: 125px;}
}



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

.carrier ul li::after{ display: none;}

.viewBase{ width: 82%;}
.textOutside .h3BoxInner .h3Box h3{ font-size: 22px; }
.textOutside .h3BoxInner span{ font-size: 22px; }
.textOutside p{ font-size: 14px;}

.city h3{right:0; bottom: 8px; font: bold 16px/1.4 "微軟正黑體"; width: 85%; text-align: center; margin: 0 auto; }

.city img{width: 89%; text-align: center; margin: 0 auto; } 
.city p { font: bold 14px/1.2 "微軟正黑體"; left: 0; margin: 0 auto;  width: 85%; bottom: 0; margin-top: 15%;}

}