@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, article, main,
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;}

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

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

body {
    font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
    background-color: #f1efef;    
   /* overflow-x:hidden;*/
}

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	line-height:1.8em;
	font-size:15px;
    color:#363636;
    background: url("../images/bg-circle.png") center top repeat-y;
}

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

header {  background: url("../images/bg-header.png") center top no-repeat; }
header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}

.mainpic {  max-width:1395px; margin:0 auto; }
/*.mainpic-xs { display: none; max-width: 100%; min-height: 230px; }*/

.mainpic-l { width:52% ; float: left; }
.mainpic-r { max-width:48% ; float:right; }
.rpic01 { margin-left: -50px; z-index: 150; position: relative; }
.rpic02 { margin-left: 20px; margin-top: -150px; z-index: 100; position: relative;  }
.main-title { margin-top: -40px;  margin-left: -2px; z-index: 200; position: relative;  }


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

#main-nav {
   z-index: 990;
   overflow: hidden;
}

.block_menu {
	width: 100%;
	text-align: center;
    font-family: 'Noto Serif TC', serif,Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    height: 70px;
    background: url("../images/bg-nav.jpg") 0 0 no-repeat;
    z-index: 990;
    
}

.sticky {
    top: 40px;
}

.menu_box {
	display:inline-block;
}
.menu_box a {
    display: inline-block;     
}

.menu { margin-right: 0px; line-height: 70px; overflow: hidden;  }
.menu:last-child { margin-right: 0px;  }
.menu a {  color: #336e7e; text-decoration: none;  /*padding:3px 8px;*/ text-indent: -5000px; margin-left: 20px; }
.menu a:hover ,.menu a.active {   border-radius: 8px; }


.menu .menu01 {  background: url("../images/nav.png") 0 0 no-repeat; width: 124px;  }
.menu a:hover .menu01 ,.menu .active .menu01 { background: url("../images/nav.png") 0 -71px no-repeat;   }

.menu .menu02 {  background: url("../images/nav.png") -179px 0 no-repeat; width: 161px; }
.menu a:hover .menu02 ,.menu .active .menu02 { background: url("../images/nav.png") -179px -71px no-repeat;  }

.menu .menu03 {  background: url("../images/nav.png") -396px 0 no-repeat; width: 155px; }
.menu a:hover .menu03 ,.menu .active .menu03 { background: url("../images/nav.png") -396px -71px no-repeat;  }

.menu .menu04 {  background: url("../images/nav.png") -612px 0 no-repeat; width: 138px;  }
.menu a:hover .menu04 ,.menu .active .menu04 { background: url("../images/nav.png") -612px -71px no-repeat;   }

.menu .menu05 {  background: url("../images/nav.png") -795px 0 no-repeat; width: 139px;  }
.menu a:hover .menu05 ,.menu .active .menu05 { background: url("../images/nav.png") -795px -71px no-repeat;   }


.active {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/*------------*/

main { background: url("../images/bg-main.png") center top repeat-y; }
#athens { padding-top:150px; margin-top: -120px; }
#mykonos,#santorini,#crete { padding-top:150px; margin-top: -150px; }

article {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}
article img {
    position: absolute;
    bottom:0;
    left: 0;
}
article p.mainpic-xs { 
   display: none; max-width: 400px; 
   
}

article p.subtitle,article p.subtitle2 {
    position: absolute;
    width: 198px;
    margin-top: 180px;
    margin-left: 56%;
    margin-right:5%;   
}
article p.subtitle2 { margin-left: 20%;}


article p.subtitle-w, article p.subtitle-w2 {
    position: absolute;
    width: 309px;
    height: 31px;
    margin-top: 190px;
    margin-left: 56%;
    background: #fff;
    padding:5px 15px; 
}

article p.subtitle-w2 { margin-left: 20%; }

article p.subtitle-w img, article p.subtitle-w2 img{
    padding:3px 15px; 
}

article p.intro ,article p.intro2 {
    position: absolute;
    width: 250px;
    margin-top: 232px;
    padding:15px 30px;
    font: 500 15px "微軟正黑體" ; 
    line-height: 1.6em;
    color: #fff;
    background: #0187d0;   
    margin-left: 57%;   
}
article p.intro2 { margin-left: 21%; } 

.triangle-t { 
    position: absolute; clip-path: polygon(1% 0, 100% 0%, 100% 0, 0 100%); 
    background: #ffffff; max-width:2000px; width: 100%; height: 32px; transform: rotate(0.2deg); 
    margin-top: -455px; text-indent: -3000px;
}
.triangle-b { 
    position: absolute; clip-path: polygon(0 0, 100% 0%, 100% 0, 99% 100%); 
    background: #ffffff; max-width:2000px; width: 100%; height: 32px; transform: rotate(-0.3deg); 
    margin-top: -5px; text-indent: -3000px; 
}

.intro-xs { 
    display: none; max-width: 88%; margin:0 auto; 
    background: #0187d0;   font: 500 15px "微軟正黑體" ; 
    padding:10px 16px;  line-height: 1.6em;  color: #fff; 
}
.subtitle-w-xs { color: #faf6da; font: 600 18px "微軟正黑體" ;  padding-top:20px; }

.row { max-width: 960px; margin:0 auto; padding:0 10px; }

.spic-box { background: url("../images/bg-pic.png") center top no-repeat;  margin:0 auto; margin-top: 20px; padding:25px 0 60px 35px; }

.frame1 { max-width:32%; display: inline-block; margin:-30px 10px 10px 0px; position: relative; }
.frame2 { max-width:29%; display: inline-block; margin:0px 10px 10px 0px; padding-top:40px; position: relative;  }
.frame3 { max-width:30%; display: inline-block; margin:0px 10px 10px 0px ; position: relative; }

.pic-title { background: #19bac8; font: 500 20px "微軟正黑體" ; color: #fff; display: inline; bottom:0px;  left:30px; position: absolute;  padding: 3px 15px; }

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

#tour {  padding-top:150px; margin-top: -150px;  }
.subtitle-tour { text-align: center;}
.tour-bg { background: #33cbe6 url("../images/bg-tour.png") center bottom no-repeat; padding-bottom: 160px; }
.tour-box { max-width: 860px; margin:0 auto;}
.tour-title { 
    background: url("../images/bg-tour-title.png") left 34px repeat-x; 
    height:41px;letter-spacing: 1px; display: inline-block; margin-top:20px;
    color:#ffffff; font: 600 20px "微軟正黑體" ;  padding:5px 15px;
    margin-bottom: 10px; text-indent: -10px;
}
.tour-title::before {     
    content: url("../images/icon01.png") ;
    width:10px; padding-right:6px;
    vertical-align: text-top;
}
.tour-list { margin-bottom: 20px; }
.tour-list li  { 
    font: 600 16px "微軟正黑體" ; color: #086289; line-height: 1.8em;
    background: #f5f5f5; border-left: 8px solid #99e7fc; overflow: auto;
    padding:7px 15px; margin-bottom:10px; 
}

.tour-list li a { color: #086289; text-decoration:none; display: block; width: 100%; height:100%; }
.tour-list li a em { font-style: normal; font: 600 14px "微軟正黑體" ; color:#e1794e; padding-left: 4px;  }

.name_l { width:75%; display: inline-block;  }
.price_r { width:25%;  color: #086289;  font-size:13px; display: inline-block; text-align:right;}
.price_r span { font-size:20px; color:#d45f00;  }



/*-----RWD----------*/

@media only screen and ( max-width:2000px) 
{ 
    article { height: 755px;  }
    .triangle-t { margin-top: -760px; }              
}

@media only screen and ( max-width:1500px) 
{ 
    article { height: 650px;  }
    .triangle-t { margin-top: -655px; }              
}

@media only screen and ( max-width:1350px) 
{ 
    article { height: 550px;  }
    .triangle-t { margin-top: -555px; }              
}


@media only screen and ( max-width:1050px) 
{ 
    .menu a {  margin-left: 0px; }
    article { height: 500px;  }
    .triangle-t { margin-top: -505px;  height: 25px;  }  
    .triangle-b {  height: 25px;  }

    article p.subtitle,article p.subtitle2 { margin-top: 150px; }
    article p.subtitle-w,article p.subtitle-w2 { margin-top: 160px;}
    article p.intro,article p.intro2  { margin-top: 202px; }
}
@media only screen and ( max-width:960px)
{     
    article { height: 450px;  }
    .triangle-t { margin-top: -455px; }                    
}

@media only screen and ( max-width:850px)
{     
    .mainpic {margin-top:40px; }
    article { height: 290px;  }
    .triangle-t { margin-top: -295px; }                    
    .tour-box { margin:0 20px; }   
    article p.subtitle-w,article p.subtitle-w2 { display:none;}    
    article p.intro,article p.intro2  { display:none;}
    .intro-xs { display: block; }    
    .pic-title { font-size:18px;} 
}

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

@media only screen and ( max-width:768px) 
{ 
    article { height: 290px;  }
    .triangle-t { margin-top: -295px; }                    
    #main-nav { display: none; }   
    #athens { padding-top:0px; margin-top: 30px; }
    #mykonos,#santorini,#crete,#tour { padding-top:0px; margin-top: -10px; }    
}

@media only screen and ( max-width:650px) 
{ 
    .mainpic-l { max-width:55% ; }   
    .mainpic-r { max-width:44% ; }
    .rpic01 { margin-left: -30px;margin-top: 15px;  }
    .rpic02 { display: none; }
    .main-title { margin-top: 0px;  margin-left: -6px;   }
    article { height: 250px;  }
    .triangle-t { margin-top: -255px; }  
    .name_l { width:100%; display: block;  }
    .price_r { width: 100%;  display: block; }
    .tour-list li a em { display: block; }
}


@media only screen and ( max-width:550px) 
{    
    #main-nav { display: none; }
    article { height: 200px;  }
    .triangle-t { margin-top: -205px; }                    
    .tour-box { margin:0 20px; }   
    article p.subtitle img,article p.subtitle2 img { max-width: 80%;  }    
    article p.subtitle,article p.subtitle2  {  margin-top:100px; } 
    .frame1,.frame2,.frame3 { max-width: 90%;  }
    .frame1 { margin-top: 50px; }
    .frame2 { margin-top: 0px;  }
    .frame3 { margin-top: 20px;  }
    .pic-title { left:60px; padding: 5px 20px; }    
}

/*---手機版-----*/
@media only screen and ( max-width:500px) 
{ 
    .tour-box { margin:0; }       
}

@media only screen and ( max-width:460px) 
{ 
    article { height: 160px;  }
    .triangle-t { margin-top: -165px; }  
}


@media only screen and ( max-width:410px) 
{ 
    article { height: 130px;  }
    .triangle-t { margin-top: -135px; }  
    .rpic01 { margin-left: -20px; }
    .main-title {  margin-left: -2px;   }  
}

@media only screen and ( max-width:380px) 
{ 
    article img.mainpic-lg { display: none;  }   
    article { height: auto; top:0; }   
    article p.mainpic-xs { display:block;  }
    .triangle-t { display: none; }  
    article p.subtitle,article p.subtitle2 {  margin-top:-35%; }
    article p.subtitle2 { margin-left: 5%;}
    article p.subtitle { margin-left: 48%;}
    
}

@media only screen and ( max-width:290px) 
{ 
    article p.subtitle,article p.subtitle2 {  margin-top:-45%; } 
    article p.subtitle2 { margin-left: 5%;}
    article p.subtitle { margin-left: 40%;}
}