@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,
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 主要區塊
*************************************************************************************/


body {
	font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
}

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
	line-height:1.8em;
	font-size:15px;
    color:#646464;
}

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

.header-bg {
    background: url("../images/bg-head.png") center top no-repeat;
    position: relative;
}

.header-bg2 {
    background: url("../images/bg-head-draw.png") center 110px no-repeat;
    height: 664px;
}

.head-pic01,.head-pic02,.head-pic03,.head-pic04,.head-pic05 { position: absolute; top:0; }

.head-pic01 { padding-left:8%; padding-top: 93px;}
.head-pic02 { padding-left:25.5%; padding-top: 65px; }
.head-pic03 { padding-left:47%; margin-top: -20px; }
.head-pic04 { padding-left:77.5%; padding-top: 50px;}
.head-pic05 { padding-left:89%; padding-top: 360px;}

.head-xs { display: none;}
.float {
    animation: float_1 4s linear infinite;
    transform-origin: 50% 50%;
  }
  
  @keyframes float_1 {
    0% { transform: translateY(0) }
    50% { transform: translateY(-8px) }
    100% { transform: translateY(0) }
  }

  .float2 {
    animation: float_2 6s linear infinite;
    transform-origin: 50% 50%;
  }
  
  @keyframes float_2 {
    0% { transform: translateY(0) }
    50% { transform: translateY(-8px) }
    100% { transform: translateY(0) }
  }  

.main-title {
    max-width: 621px;   
    margin:0 auto;  
    padding-top:300px;     
}

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

#main-nav {
    margin-top: -150px;
    
}

.block_menu {
	width: 100%;
	text-align: center;
    font-family: 'Noto Serif TC', serif,Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    /*background: url("../images/nav-bg.png") center top no-repeat;   */
    height: 118px;
}

.sticky {
    top: 40px;
}

.menu_box {
    display:inline-block;
    
}
.menu_box a {
    display: inline-block;   
}   
.menu .menu_l_title1, .menu .menu_l_title2,.menu .menu_l_title3,.menu .menu_l_title4,.menu .menu_l_title5,.menu .menu_l_title6 { width:115px;  height: 114px;  text-indent: -5000px;    }

.menu .menu_l_title1 {  background: url("../images/nav-bg.png") 0 0 no-repeat;  }
.menu a:hover .menu_l_title1 ,.menu .active .menu_l_title1 { background: url("../images/nav-bg.png") 0 -114px no-repeat;   }

.menu .menu_l_title2 { background: url("../images/nav-bg.png") -122px 0 no-repeat;  }
.menu a:hover .menu_l_title2 ,.menu .active .menu_l_title2 { background: url("../images/nav-bg.png") -122px -114px no-repeat;  }

.menu .menu_l_title3 { background: url("../images/nav-bg.png") -245px 0 no-repeat;  }
.menu a:hover .menu_l_title3 ,.menu .active .menu_l_title3 { background: url("../images/nav-bg.png") -245px -114px no-repeat;  }

.menu .menu_l_title4 { background: url("../images/nav-bg.png") -367px 0 no-repeat;  }
.menu a:hover .menu_l_title4 ,.menu .active .menu_l_title4 { background: url("../images/nav-bg.png") -367px -114px no-repeat;  }

.menu .menu_l_title5 { background: url("../images/nav-bg.png") -489px 0 no-repeat;  }
.menu a:hover .menu_l_title5 ,.menu .active .menu_l_title5 { background: url("../images/nav-bg.png") -489px -114px no-repeat;  }

.menu .menu_l_title6 { background: url("../images/nav-bg.png") -615px 0 no-repeat;  }
.menu a:hover .menu_l_title6 ,.menu .active .menu_l_title6 { background: url("../images/nav-bg.png") -615px -114px no-repeat;  }


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

#tour { background: url("../images/bg-tour01.jpg") center top repeat-y; }
.greenland-bg,.iceland-bg,.sweden-bg,.finland-bg,.denmark-bg,.norway-bg { padding-top:30px; padding-bottom: 100px; }
.tour-bg { background: url("../images/bg-tour02.png") center bottom no-repeat;  }
.greenland-bg { background: url("../images/bg-greenland.png") center top no-repeat; }
.iceland-bg { background: url("../images/bg-ice.png") center top no-repeat; }
.sweden-bg { background: url("../images/bg-sweden.png") center top no-repeat; }
.finland-bg { background: url("../images/bg-finland.png") center top no-repeat; }
.denmark-bg { background: url("../images/bg-denmark.png") center top no-repeat; }
.norway-bg { background: url("../images/bg-norway.png") center top no-repeat; }

.greenland-bg-xs { background: url("../images/bg-green-pic.png") center 260px no-repeat; }
.iceland-bg-xs { background: url("../images/bg-ice-pic.png") center 260px no-repeat; }
.sweden-bg-xs { background: url("../images/bg-swe-pic.png") center 125px no-repeat; }
.finland-bg-xs { background: url("../images/bg-fin-pic.png") center 235px no-repeat; }
.denmark-bg-xs { background: url("../images/bg-den-pic.png") center 90px no-repeat; }
.norway-bg-xs { background: url("../images/bg-nor-pic.png") center 220px no-repeat; }

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

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

#tour { padding-top:120px; margin-top: -120px; }
.tour-box { margin: 0px 30px; padding-bottom: 80px; /*background: url("../images/spic01.png") right bottom no-repeat; */ }
.tour-main-tle { margin:25px 0 15px 0;}
.tour-tle { 
    background: url("../images/bg-tour.png") left top no-repeat;  margin-top:20px; max-width: 116px; text-align: center;
    /*padding:10px 10px 0 16px;*/ height: 42px; font: 600 18px "微軟正黑體" ; color:#ffffff;  line-height: 42px;
}

 .tour-list { margin:0px 20px 10px 20px;}

 .tour-list li a { text-decoration:none; display: block; width: 100%; height:100%; padding:10px 0px;}

 .tour-list li a span.txt-l {
    font: 600 15px "微軟正黑體" ; color:#68844c;  
    line-height: 1.8em;
 }

 .tour-list li a span.txt-l {
    padding-left: 20px;
    text-indent: -30px;
    width:80%; display: inline-block;
 }

 .no-price li a span.txt-l {
    width:100%; 
 }

 .tour-list li a span.txt-l em {
    color:#e69302; font-style: normal;  
    font-size: 15px; padding-left: 6px;
 }

 .tour-list li a  span.price {
    color:#ff0000; font-weight: bold;
    width:17%; display: inline-block; text-align: right;    
 }

  .tour-list li a span.price strong {
    color:#ff0000; font-weight: bold; 
	font-size:18px;
 }

 .tour-list li a span.txt-l::before {
    content: url("../images/icon-dot.png");
    padding: 0 10px;
    background:transparent;
 }

 .tour-list li a div.note {
    padding:6px 0 10px 0;
 }
 .tour-list li a div.note span {
    display: block;
    font: 500 13px "微軟正黑體" ; color:#646464 ; 
    line-height: 1.8em;
    padding-left: 30px;
    text-indent: -10px;
 }

 .tour-list li a div.note span::before {
    content: "◆";
    padding-right: 4px;
}


.tour-list li { border-bottom: 1px dotted #adb7a4; }
 .tour-list li:hover {
    background-color: #dff6f6;
}

.more  { width: 191px; height: 41px;  background: url("../images/bg-more.png") left top no-repeat;  float: right; margin-top: 10px; padding-right:20px;  }
.more a  { 
    font: bold 16px "微軟正黑體" ; color:#4c7821;  line-height: 41px; 
    width: 100%; height: 100%; text-decoration: none; padding-left: 20px;
}
.more a:hover { color:#e69302;}


/*---------*/
#greenland,#iceland,#norway,#sweden,#finland,#denmark { padding-top:120px; margin-top: -120px;   }

.ct-box { max-width: 960px; margin:0 auto; clear:both; padding-bottom: 20px; }

.ct60-l { width:65%; float:left;  }
.ct40-r { width:35%; float:right;  }

.box-tle { padding-top:60px;}
.ct-box h2 { font: bold 16px "微軟正黑體" ; color:#505050; line-height: 1.9em; margin: 10px 30px; max-width: 500px; }



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

@media only screen and ( max-width:1500px)
{ 
.greenland-bg-xs { background:none; }   
.iceland-bg-xs { background:none; }
.sweden-bg-xs { background:none; }
.finland-bg-xs { background:none;  }
.denmark-bg-xs { background:none;  }
.norway-bg-xs { background:none;  }
}

@media only screen and ( max-width:1100px)
{ 
    .head-pic01 { padding-left:4%; }
    .head-pic02 { padding-left:37%; padding-top: 120px; }
    .head-pic02 img { max-width: 80%;}    
    .head-pic03 { padding-left:55%;  }
    .head-pic03 img { max-width: 85%;}
    .head-pic04,.head-pic05 { display: none;}   
}

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

@media only screen and ( max-width:768px) 
{ 
    .header-bg2 { background: url("../images/bg-head-draw.png") 58% 110px no-repeat; }  
    .head-pic02 { padding-left:32%; }
    .head-pic02 img { max-width: 70%;}    
    .main-title { max-width: 550px; margin-left: 50px;}
    #main-nav { display: none;} 
    #tour { margin-top:-300px;}   
    .tour-main-tle { margin-left:20px;}    
    #greenland,#iceland,#norway,#sweden,#finland,#denmark { padding-top:0px; margin-top: 0px;   }
    .tour-list li a span.price { width:100%; display: block; padding-top:10px; }    
    .tour-list li a span.txt-l { width:100%; display: block;}

}

@media only screen and ( max-width:700px) 
{
    .head-pic01 { padding-left:15%; }    
    .head-pic02 { display: none; }
    .head-pic03 { padding-left:45%;  }    
    .main-title { max-width: 500px; }    
}

@media only screen and (max-width:600px) 
{
    .ct60-l { width:100%; }
    .ct40-r { width:30%; }
    .box-tle { padding-top:0px;}
    .head-xs { display:block;}
    .header-bg { background: none; height: auto;}
    .header-bg2 { display: none;}
    #tour { margin-top:-140px;}       
    .tour-box { margin: 0px 20px; }
    .tour-bg { background: url("../images/bg-tour02.png") center top no-repeat;  }
    
    
    
}

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

@media only screen and (max-width:480px) 
{
    .ct60-l { width:100%; }
    .ct40-r { display: none; }
    .greenland-bg,.iceland-bg,.sweden-bg,.finland-bg,.denmark-bg,.norway-bg {padding-bottom: 30px; }
    
}