@charset "utf-8";

/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,figure,article,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;	
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

.clearfix {
  overflow: auto;
}

img { max-width:100%;}

.left { float: left;}
.right { float: right;}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

#backtop { z-index: 9999; position: relative;}

body {
    font-family:"Noto Serif TC","Newsreader", serif;
    font-optical-sizing: auto;
    font-style: normal;
    background:url("images/bg.jpg") left top repeat-y;

}

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
    background:url("images/bg-top.jpg") left top no-repeat;
}

/*h2,h3 { display:none; }*/


/*======================
====Main CSS=====
=======================*/

.menu-line { padding: 55px 0 5px 0; text-align: center;  }

.menu{
    position:relative;
    z-index: 999;
}
/*======================
==== Slider CSS=====
=======================*/

.mainpic { display:block; max-width: 2000px; margin:0 auto; margin-top:40px; margin-bottom: 20px; }
.maintitle-outer { position: relative; display:inline-block; max-width: 22%; z-index: 300; vertical-align:top; margin-top: 15%; }
header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}

.pic-outer { position: relative;  display:inline-block; max-width: 77%; /*margin-left: -20%;*/z-index: 100; }
.swiper {
    max-width: 100%;
    height: 100%;
    border-radius: 150px 0 0 0; 
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


/*======================
====nav CSS=====
=======================*/


.first { padding-top:120px; margin-top: -120px;}
.second { padding-top:90px; margin-top: -90px;}

.resort-box { margin:0 auto; padding-bottom: 100px;  }

.feature-outer { max-width: 1360px; margin:0 auto; }
.news-outer {  max-width: 1600px; margin:0 auto;}

/*---------*/
.feature-title { display: flex; flex-wrap: nowrap; margin:0 auto; max-width: 100%; }
.title-box  { 
    flex:0 0 50%; justify-content:space-between; align-items:flex-start;  align-content: stretch; 
}
.feature-title .title-black { 
    color:#2c2c2c;
    font-size: 24px; 
    text-align: right;  
    padding:8px 0px 8px 8px; 
    font-family:"Noto Serif TC","Newsreader", serif;
    font-weight: 700;
}
.feature-title h2.title-black img { margin-right:16px;}

.feature-title .title-blue { 
    color:#ffffff;
    background: #26abb3;
    font-size: 18px;  
    padding:8px; 
    font-family:"Noto Serif TC","Newsreader", serif;
    font-weight: 700;
    border-radius: 18px;
    margin-right: 80px;
    margin-left:16px;
    text-align: left;
}
.feature-titl h2.title-blue img { margin-left:16px;}



.news-title { display: flex; flex-wrap: nowrap; margin:0 auto; max-width: 100%; }
.title-box  { 
    flex:0 0 50%; justify-content:space-between; align-items:flex-start;  align-content: stretch; 
}
.news-title .title-black { 
    color:#2c2c2c;
    font-size: 24px; 
    padding:8px 8px 8px 0px; 
    font-family:"Noto Serif TC","Newsreader", serif;
    font-weight: 700;
    text-align: left;
}
.news-title h2.title-black img { margin-left:16px;}

.news-title .title-blue { 
    color:#ffffff;
    background: #26abb3;
    font-size: 18px;  
    padding:8px; 
    font-family:"Noto Serif TC","Newsreader", serif;
    font-weight: 700;
    text-align: right;  
    border-radius: 18px;
    margin-left: 80px;
    margin-right:16px;
}
.news-title h2.title-blue img {margin-right:16px;}

.phuket-box, .kiroro-grand-box, .finolhu-box, .albion-box, .seychelles-box, .sahoro-box , .cherating-box, .beidahu-box,
.kiroro-peak-box, .bintan-box, .yabuli-box, .bali-box, .tomamu-box, .kani-box, .okinawa-box, .cannoniers-box , .changbain-box,
.lijiang-box , .guilin-box ,.larosiere-box ,.samoens-box { padding:5px 0; margin-top: -36px; margin-left: 0; }

.phuket-box { background:rgba(126, 141, 204, 0.2) ; } 
.kiroro-grand-box { background:rgba(126, 141, 204, 0.2) ; }
.finolhu-box { background:rgba(126, 141, 204, 0.2) ; }
.albion-box { background:rgba(126, 141, 204, 0.2) ; }
.seychelles-box { background:rgba(126, 141, 204, 0.2) ; }
.samoens-box { background:rgba(126, 141, 204, 0.2) ; }

.sahoro-box { background:rgba(36, 159, 128, 0.2) ; }
.cherating-box { background:rgba(36, 159, 128, 0.2) ; }
.beidahu-box { background:rgba(36, 159, 128, 0.2) ; }

.kiroro-peak-box { background:rgba(191, 152, 142, 0.2) ; }
.bintan-box { background:rgba(191, 152, 142, 0.2) ; }
.yabuli-box { background:rgba(191, 152, 142, 0.2) ; }

.bali-box { background:rgba(253, 186, 0, 0.2) ; }
.tomamu-box { background:rgba(253, 186, 0, 0.2) ; }
.larosiere-box { background:rgba(253, 186, 0, 0.2) ; }


.kani-box { background:rgba(234, 152, 55, 0.2) ; }
.okinawa-box  { background:rgba(234, 152, 55, 0.2) ;}
.cannoniers-box  { background:rgba(234, 152, 55, 0.2) ; }
.changbain-box  { background:rgba(234, 152, 55, 0.2) ;}
.lijiang-box  { background:rgba(234, 152, 55, 0.2) ; }

.guilin-box { background:rgba(116, 206, 207, 0.2) ;}


.resort-title {
    color:#2c2c2c; 
    font-family:"Noto Serif TC","Newsreader", serif;
    font-weight: 700;
    display: flex;
    flex-wrap: nowrap; margin:0 auto;
    align-items:center;  justify-content: center;
}
.item { justify-content:space-between;  }
.icon img { vertical-align:middle;}
.icon { padding-right: 8px;}
.country {
	font-size: 22px;
    writing-mode: vertical-lr;
    padding-right: 6px;
 }
 .country-long {
	font-size: 22px;
    writing-mode: vertical-lr;
    height:50px;
    padding-right: 6px;
}
.city {
	font-size:46px;
    padding-bottom: 6px;
    padding-left: 8px;
}

/*----slick 自訂-----*/

.slick-box {   position: relative ;}
.slick-box .txt { position:absolute; bottom:0 ;background:rgba(0, 0, 0, 0.5); padding: 20px 30px; text-align: left;  font-family:"Noto Serif TC","Newsreader", serif; line-height: 26px;}
.slick-box .txt span { color:#ffffff;  }

* {
    box-sizing: border-box;
  }
  
  .slider {
      width: 60%;
      margin: 80px auto;
  }
  
  .slick-slide {
    margin: 0px 20px;
  }
  
  .slick-slide img {
    width: 100%;
  }
  
  .slick-prev:before,
  .slick-next:before {
    color: #ffffff;
  }
  
  
  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
  }
  
  .slick-active {
    opacity: .6;
  }
  
  .slick-current {
    opacity: 1;
  }
  @media only screen and ( max-width:1400px)
  { 
  .slider {
      width: 80%;
  }
}
  @media only screen and ( max-width:1200px)
  { 
  .slider {
      width: 100%;
  }
}

  @media only screen and ( max-width:768px)
  { 
    .slick-box .txt { position:relative; background:rgba(0, 0, 0, 0.6); font-size: 15px; }
  }


  .tour-line { text-align: center; padding:20px 0 50px 0;}

  /*----sp-tour-box----*/

.tour-box { display:flex; flex-wrap: wrap; margin:0 auto; max-width: 1024px; margin-bottom: 50px; padding-top:50px; padding-left: 1%; }
.sp-tour { flex:0 0 48%; margin:0 1%; justify-content:space-between; align-items:center; justify-content:center;  align-content: stretch; margin: auto;  }
.sp-tour a { text-decoration: none;  width: 100%; height: 100%; display: block;position: relative; background-color: #fffcf4; border-radius: 30px 0; margin-bottom: 26px;}
.sp-tour-name { 
    color:#303030;  font-family:"Noto Serif TC","Newsreader", serif;  line-height: 1.6em; text-align: left; padding:14px 20px; font-size: 20px; font-weight: 700;border-radius: 30px 0; 
}

.yellow a { border:1px solid #fdbe00; }
.yellow .sp-tour-name {background: #ffda69;}

.green a { border:1px solid #3da57d; }
.green .sp-tour-name {background:#79e7bc;}

.purple a { border:1px solid #9988d1; }
.purple .sp-tour-name {background:#c0c9f1;}

.blue a { border:1px solid #4eafb0; }
.blue .sp-tour-name {background:#7fdadb;}

.brown a { border:1px solid #da9d8e; }
.brown .sp-tour-name {background:#ebc3b8;}

.orange a { border:1px solid #eaa048; }
.orange .sp-tour-name {background:#fdbf76;}


.sp-tour-date { margin: 15px 0; text-align: left;}
.sp-tour-date span { background: #ebe6d9; color:#262524; padding:5px; }
.sp-tour-date span:empty {
	display:none;
}
.tour-info-list { margin:0px 0px 60px 0px; padding:8px 10px; box-sizing: border-box; }

.tour-info-list li { 
    font-family: "Noto Serif TC","Newsreader", serif; color:#353535; line-height: 1.6em;
    font-weight: 700;
    font-size: 15px;
    padding-left: 20px; text-indent: -20px; 
    text-align: left;
    letter-spacing: 1px;
}
.tour-info-list li::before {
    content: url("images/icon03.png");
    font-size:14px;
    padding-right: 6px;
    padding-top:6px;
}

.tour-price { color: #303030; font: 600 14px "Noto Serif TC","Newsreader", serif; text-align: center; background: url("images/price-deco01.png") center center no-repeat; line-height: 40px; margin-top:20px; position:absolute;  bottom:0; left:0; right:0; }
.tour-price span {  color:#ff0600;  font: 600 32px "Newsreader", serif; }
.tour-price em { color: #303030; font: 600 14px "Noto Serif TC","Newsreader", serif; font-style: normal; }
.note span { 
    color:#2c2c2c; background: rgba(38, 171, 179,0.2); font-size: 15px;  padding:8px 20px; 
    font-family:"Noto Serif TC","Newsreader", serif;
    font-weight: 700;
    border-radius: 18px; 
    display: inline-block;
    line-height: 20px;
}

/*------media query----------*/

@media only screen and ( max-width:1024px) 
{ 
  .swiper { border-radius: 80px 0 0 0; }
}

@media only screen and ( max-width:960px) 
{
    .menu_content{ margin-left: 10px; }
}
@media only screen and ( max-width:812px) 
{ 
    .maintitle-outer {  max-width: 27%;  }
    .pic-outer { max-width: 72%;  } 
}

/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    .first { padding-top:0px; margin-top: 0px;}
    .second { padding-top:0px; margin-top: 0px;}
    .menu { display: none;}
    .menu-line { display: none;}
    .maintitle-outer {  display: block; max-width: 40%; margin-top: 0; margin-bottom: 15px; padding-left: 30px;  }
    .pic-outer {display: block;  max-width: 96%; margin:0 2%;} 
    /*.tour-box { flex-wrap: wrap; }*/
    .sp-tour { flex:0 0 96%; margin:0 auto; justify-content:center; margin-bottom: 30px; }
}

/*---手機版-----*/

@media only screen and (max-width:480px) 
{
    .maintitle-outer {max-width: 60%; }
    .feature-title { flex-wrap: wrap; }
    .news-title { flex-wrap: wrap; }
    .swiper { border-radius: 40px 0 0 0; }

    .city { font-size:36px; }
    .city-xs { font-size:28px; text-align: left; line-height: 32px; }
    
    .title-box  { flex:0 0 90%; }    
    .feature-title .title-black { text-align:center; }
    .news-title .title-black { text-align:center; }
    .news-title .title-blue { 
        text-align: center;  
        margin-left: 16px;
        margin-right:80px;
    }
}