@charset "utf-8";
*, *:before, *:after{font-family:inherit}
body{line-height:1.5;font-size:16px;background:#3f4850;font-family:df_icon,"Segoe UI",Arial, Helvetica, "Microsoft JhengHei Correct", 'Microsoft JhengHei',PMingLiU,sans-serif;}
#new-footer{font-family:"Segoe UI",Arial, Helvetica, "Microsoft JhengHei Correct", 'Microsoft JhengHei',PMingLiU,sans-serif;}
#wrapper{position:relative;}
.bg{position:fixed;height:100%;width:100%;margin:0;overflow:hidden;top:0;}
img{object-fit: cover;}
.bg img{height:100%;top:0;left:50%;position:absolute;transform:translate(-50%,0);}

#m_appdata{position: fixed;bottom: 0;left: 0;right: 0;z-index:60}
.applink{background:#FFF;}

#header{position:relative;}
#header .slogan{width:1180px;max-width:95%;margin:auto;position:relative;color:#FFF;}
#header .link{position:absolute;top:0;left:0;height:100%;width:50%;}
#header h1{margin:0 0 10px 0;overflow:hidden;width:400px;max-width:67vw;height:200px;max-height:33.5vw;background:url(../images/h1bg.png) no-repeat;background-size:cover;text-align:center;font-size:1.8em}
#header strong{display:block;overflow:hidden;position:relative;margin:0.3em auto auto auto;font-size:2em}
#header p{color:#000;padding:0.5em;position:absolute;top:50px;left:0;margin:0 0 0 410px;line-height:1.8;}

.menu{width:1180px;max-width:95%;margin:auto;position:relative;cursor:pointer;}
.menu::after,
.menu::before{width:45px;content:"";display:block;position:absolute;top:-150px;right:2%;filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));transition:all 0.2s }
.menu::after{border-bottom:6px solid #FFF;border-top:6px solid #FFF;height:34px}
.menu::before{background:#fff;height:6px;transform:translate(0,14px)rotate(0deg);}
.menu:hover:after,
.menu:hover:before{filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.9));}
.menu.on::after{border:0;background:#fff;height:6px;transform:translate(0,14px)rotate(-45deg);}
.menu.on::before{transform:translate(0,14px)rotate(45deg);}

.menu #menu{background:rgba(0,0,0,0.5);max-height:0;overflow:hidden;position:absolute;right: 0;top:-80px;transition:max-height 0.5s;z-index: 2;}
.menu.on #menu{display:block;max-height: 33em;}
.menu li{border-bottom:1px solid rgba(0,0,0,0.5);}
.menu a{display: block; color:#fff;padding:5px 20px;}
.menu a:hover,
.taiwan-north-coast .menu .btn01 a,
.taiwan-northeast-coast .menu .btn02 a,
.central-cross-island-highway-yilan .menu .btn03 a,
.suhua-highway .menu .btn04 a,
.central-cross-island-highway-east .menu .btn05 a,
.east-coast-north .menu .btn06 a,
.east-coast-south .menu .btn07 a,
.coastal-range-south .menu .btn08 a,
.hengchun .menu .btn09 a,
.kaohsiung-badlands-south .menu .btn10 a,
.kaohsiung-badlands-north .menu .btn11 a,
.tri-mountain-national-scenic-area .menu .btn12 a,
.central-taiwan-faults .menu .btn13 a{color:#FC0;background:rgba(0,0,0,0.4);}

.taiwan-north-coast .menu_nav .btn01 a,
.taiwan-northeast-coast .menu_nav .btn02 a,
.central-cross-island-highway-yilan .menu_nav .btn03 a,
.suhua-highway .menu_nav .btn04 a,
.central-cross-island-highway-east .menu_nav .btn05 a,
.east-coast-north .menu_nav .btn06 a,
.east-coast-south .menu_nav .btn07 a,
.coastal-range-south .menu_nav .btn08 a,
.hengchun .menu_nav .btn09 a,
.kaohsiung-badlands-south .menu_nav .btn10 a,
.kaohsiung-badlands-north .menu_nav .btn11 a,
.tri-mountain-national-scenic-area .menu_nav .btn12 a,
.central-taiwan-faults .menu_nav .btn13 a{background:rgba(0,0,0,0.08);}

.bot,
#content,
.attr_size{width:1180px;max-width:100%;margin:auto;position:relative;}
.bot{color: #fff;font-style: normal;font-size:0.85em;padding: 20px 5px;text-align: center;}
#list_all{position:relative;padding:0 0 50px 0;}
#list_all .taiwan_map{width:350px;position:relative;margin:20px 0 30px 180px}
#list_all .list{position:relative;transition:opacity 0.5s;}
#list_all .list.on{opacity:1}
#list_all .txt a{color:#FF6}
#list_all .txt a:hover{text-decoration:underline}
#list_all a.link {color: #000;}
#list_all .list .txt{position:absolute;top:-230px;left:620px;padding:10px;background:rgba(0,0,0,0.8);color:#FFF;opacity:0;z-index:3;margin:0 10px 0 0;transition:opacity 0.5s;}
#list_all .list .name{display: block;}
#list_all .list .name::before{content:"";position:absolute;display:block;border-radius:50%;width:10px;height:10px;background:#690;bottom:-5px;right:-5px;transition:background 0.5s;}
#list_all .list.on .name::before{background:#000;}
#list_all .list.on .txt{opacity:1;z-index:4;}
#list_all .list img{width:120px;height:90px;position:absolute;border:1px solid #690;box-shadow:0 3px 3px rgba(0,0,0,0.7);transition:border 0.5s;z-index:0;}
#list_all .list.on img{border:1px solid #000;z-index: 2;}
#list_all .tour{margin:10px 0 0 0;}

#attractions,
.hotel2{position:relative;background:rgba(63,72,80,0.8);overflow:hidden;}
#attractions .title{color:#FFF;background:rgba(0,0,0,0.8);float:left; font-size:1.25em;padding: 10px 20px 10px 20px;margin:0 0 10px 0}
#attractions .swiper-slide{width:220px;margin: 0 8px;text-align:center;color:#ccc;}
#attractions a{color:#ccc;transition:color 0.5s;}
#attractions a:hover{color:#FFF;}
#attractions img{border:10px solid rgba(0,0,0,0.2);transition:border 0.5s;border-radius:50%;display:block;margin:auto auto 5px auto;height:220px;width: 100%;}
#attractions a:hover img{border:10px solid rgba(0,0,0,0.5);}
#attractions .address{position:absolute;top:190px;left:0;background:#FFF;padding:0 7px;font-size: 0.95em;border:3px solid rgba(0,0,0,0.4);border-radius:0.5em;color:#000;background-clip: padding-box;}
#attractions .address .icon-map_icon{margin:0 -7px 0 0;}
#content{/* color:#fff; */ }
#content .map{float:right;margin: 0 0 0 10px}
#content .map img{max-width:100%;}
#content h2{font-size:1.5em;font-weight:bold;padding:0 10px}
#content .hotel2 h2{padding:25px 30px 5px 30px}
#content .hotel2 h2 b{font-weight:normal}
.hotel2{position:relative;overflow:hidden;border-top:1px solid #999;padding:5px 0 20px;color:#FFF}
.hotel2 .swiper-container{padding:0 10px;}
.hotel2 .swiper-slide{width:270px;padding:10px;color:#ccc;}
.hotel2 .link{position:absolute;top:0;left:0;width:100%;height:100%;transition:background 0.5s;z-index:2}
.hotel2 .link:hover{background:rgba(0,0,0,0.1);}
.hotel2 h3{color:#fff;}
.hotel2 p{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.hotel2 .pic img{width:250px;height: 185px;object-fit: cover;}
.hotel2 .price{color:#F66}
.hotel2 .book{float:right;position:relative;z-index:3}
.hotel2 .book a{display:block;padding:0 10px;background:#F90;transition:background 0.2s;color:#fff;}
.hotel2 .book a:hover{background:#F60;}
#main{padding:25px 20px 15px 20px;background:rgba(63,72,80,0.8);color:#FFF}
#main a{color:#FFF;text-decoration: underline}
#main a:hover{color:#FF0;}
#main h3{font-size:1.1em;font-weight:bold;margin:0 0 3px 0}
#main .tt{padding:20px 10px;color:#000;background: rgba(255,255,255,0.5);overflow:hidden;}
#main .tt a{color:#000;}
#main .tt a:hover{color:#C00;}
#main .tt .tour{border-top:1px solid rgba(0,0,0,0.2);padding: 10px 0 0 0;margin: 10px 0 0 0;}
#main .list{padding:20px 10px;border-bottom:1px solid rgba(255,255,255,0.3);overflow:hidden;}
#main .list:last-child{border-bottom:0;}

#main .list .pic{float:right;margin:0 0 10px 10px}
#main .list .pic img{width:200px;}
#main h3::before{background:#FFF;color:rgba(63,72,80,1);display:inline-block;margin:0 5px 0 0;width:20px;height:20px;position:relative;top:-1px;vertical-align:initial;font-size: 0.75em;text-align:center;border-radius:50%;}
#no1 h3::before{content:"1"}
#no2 h3::before{content:"2"}
#no3 h3::before{content:"3"}
#no4 h3::before{content:"4"}
#no5 h3::before{content:"5"}
#no6 h3::before{content:"6"}
#no7 h3::before{content:"7"}
#no8 h3::before{content:"8"}
#no9 h3::before{content:"9"}
#no10 h3::before{content:"10"}
#no11 h3::before{content:"11"}
#no12 h3::before{content:"12"}
#no13 h3::before{content:"13"}
#no14 h3::before{content:"14"}
#no15 h3::before{content:"15"}
#no16 h3::before{content:"16"}
#no17 h3::before{content:"17"}
#no18 h3::before{content:"18"}
#no19 h3::before{content:"19"}

.swiper-button-next, .swiper-button-prev{width: auto;color: #FFF; bottom: 10px;top: auto;height: 282px;background:rgba(0,0,0,0);display: flex;align-items: center;text-align: center; font-size: 50px;transition:background 0.2s}
.swiper-button-next:hover,
.swiper-button-prev:hover{background:rgba(0,0,0,0.6);}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled{opacity:0;}
.swiper-button-prev{left: 0}
.swiper-button-next{right: 0}
.swiper-button-prev::before{content:"\a00a4";flex: 1}
.swiper-button-next::before{content:"\a00a2";flex: 1}
@media screen and (min-width:990px){
	#list_all .list{opacity:0.9}
	#list_all .list .name{border:0px solid;border-bottom-width:1px;border-color:#690;transition:border 0.5s;padding:0 10px;display:block;position:absolute;background:-moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);background:-webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);background:linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );}
	#list_all .list.on .name{border-color:#000;}
	#list_all .list .name::before{}
	#list_all .list .name::before{}
	#list_all .list .link{}
	#list_all .list.list01 .name,
	#list_all .list.list10 .name,
	#list_all .list.list11 .name,
	#list_all .list.list12 .name,
	#list_all .list.list13 .name{background:-moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);background:-webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );}
	#list_all .list.list01 .name{bottom:624px;left:268px;}
	#list_all .list.list02 .name{bottom:618px;left:503px;}
	#list_all .list.list03{z-index:2}
	#list_all .list.list03 .name{bottom:530px;left:457px;}
	#list_all .list.list04 .name{padding:0 10px 0 260px;bottom:490px;left:480px;}
	#list_all .list.list05 .name{padding:0 10px 0 135px;border-bottom:0;border-top-width:1px;bottom:452px;left:431px;}
	#list_all .list.list06 .name{border-bottom:0;border-top-width:1px;bottom:395px;left:455px;}
	#list_all .list.list07 .name{padding:0 10px 0 180px;border-bottom:0;border-top-width:1px;bottom:297px;left:425px;}
	#list_all .list.list08 .name{border-bottom:0;border-top-width:1px;bottom:235px;left:387px;padding:5px 10px 0 0;}
	#list_all .list.list09 .name{bottom:45px;left:316px;padding:0 10px 0 40px;}
	#list_all .list.list10 .name{border-bottom:0;border-top-width:1px;bottom:175px;left:120px;}
	#list_all .list.list11 .name{bottom:222px;left:155px;}
	#list_all .list.list12 .name{bottom:487px;left:183px;}
	#list_all .list.list13 .name{border-bottom:0;border-top-width:1px;bottom:395px;left:150px;}
	#list_all .list.list02 .name::before{left:-5px;}
	#list_all .list.list03 .name::before{left:-5px;}
	#list_all .list.list04 .name::before{left:-5px;}
	#list_all .list.list05 .name::before{top:-5px;left:-5px;}
	#list_all .list.list06 .name::before{top:-5px;left:-5px;}
	#list_all .list.list07 .name::before{top:-5px;left:-5px;}
	#list_all .list.list08 .name::before{top:-5px;left:-5px;}
	#list_all .list.list09 .name::before{left:-5px;}
	#list_all .list.list10 .name::before{top:-5px;}
	#list_all .list.list13 .name::before{top:-5px;}
	#list_all .list.list01 img{bottom:575px;left:150px;}
	#list_all .list.list02 img{bottom:605px;left:600px;}
	#list_all .list.list03 img{bottom:505px;left:604px;}
	#list_all .list.list04 img{bottom:475px;left:810px;}
	#list_all .list.list05 img{bottom:387px;left:672px;}
	#list_all .list.list06 img{bottom:339px;left:552px;}
	#list_all .list.list07 img{bottom:258px;left:695px;}
	#list_all .list.list08 img{bottom:200px;left:490px;}
	#list_all .list.list09 img{bottom:35px;left:430px;}
	#list_all .list.list10 img{bottom:110px;left:0px;}
	#list_all .list.list11 img{bottom:222px;left:35px;}
	#list_all .list.list12 img{bottom:483px;left:65px;}
	#list_all .list.list13 img{bottom:360px;left:30px;}
}

@media screen and (min-width:1300px){
	.bg img{width:100%;height:auto;}
}
@media screen and (max-width:990px){
	.bg img{width:100%;height:auto;top:60px;transform: translate(-50%,0);}
	.fixed{position:fixed;width:100%;z-index:50;}
	.ii .fixed{position:absolute;}
	#wrapper.ii{height:1078px;overflow: hidden;}
#header{padding: 60px 0 0 0;}
.menu,
	#header p{display:none;}
#header .link{width:440px;max-width:68vw}
	#content{padding:70px 0 0 0}
	#content h2{padding: 0;}
	#main{position: relative;overflow: hidden;}
	#main .tt{position: relative;margin: 0 -10px}
	#main .list{padding: 20px 0px;}
	#content .map{float:none;position: absolute;top: 0;text-align: right;right:-100%;transition:right 0.2s; width: 100%;z-index: 3}
	#content .map.hover{right:0%;}
	#content .map::before{content:"\a00a4 路線圖";text-align:left;width:6em;padding:0.2em 0 0.2em 0.5em;display: block;background: #C00;color: #FFF;position: relative;left: -6em;margin: 28px 0 0 0}
	#content .map::after{content:"關閉地圖 \e941";display: block;background: #000;color: #FFF;width:7em;padding:0.2em 0 0.2em 1em;margin:0 0 0 auto;text-align:left;}
	#content .map img{position: relative;margin: -58px 0 0 0}
	#list_all{}
	#list_all .taiwan_map{position:fixed;top:60px;right:0;width:170px;max-width:31vw;margin:0;z-index:45;}
	#list_all .list{background:rgba(63,72,80,0);transition:background 0.5s;}
	#list_all .list.on{background:rgba(63,72,80,0.8);}
	#list_all .list .name{color:#000;margin:60px 0 0 0;text-indent:0;font-size:12px;line-height: 1.5;position:fixed;padding: 20px 13px 0 0;transition:padding 0.2s,height 0.2s; z-index:46;overflow: hidden;height: 20px;}
	#list_all.map_hide .taiwan_map,
    #list_all.map_hide .list .name::before{display:none}
	#list_all .list.on .name{padding: 2px 13px 0 0;}
	#list_all .list .name::before{background:#8a0;position:absolute;top:5px;right:0;}
	#list_all .list.on .name::before{background:#350;}
	#list_all .list.list01 .name{top:8px;right:50px}
	#list_all .list.list02 .name{top:15px;right:8px}
	#list_all .list.list02.on .name{padding:15px 0 0 0;height:35px;}
	#list_all .list.list03 .name{top:55px;right:30px}
	#list_all .list.list03.on .name{padding: 0px 13px 0 0;}
	#list_all .list.list04 .name{top:71px;right:20px}
	#list_all .list.list04.on .name{padding: 0px 12px 0 0;}
	#list_all .list.list05 .name{top:83px;right:33px}
	#list_all .list.list05 .name::before{right:10px;}
	#list_all .list.list05.on .name{padding:14px 0 0 0;height:35px;}
	#list_all .list.list06 .name{top:115px;right:33px}
	#list_all .list.list07 .name{top:160px;right:45px}
	#list_all .list.list08 .name{top:190px;right:65px}
	#list_all .list.list09 .name{top:295px;right:98px}
	#list_all .list.list10 .name{top:224px;right:144px}
	#list_all .list.list11 .name{top:210px;right:130px}
	#list_all .list.list11.on .name{padding: 0px 13px 0 0;}
	#list_all .list.list12 .name{top:82px;right:106px}
	#list_all .list.list13 .name{top:115px;right:115px}
	#list_all a.link {position: absolute;top:0;left:0;width:100%;height:100%;z-index:5}
	#list_all .list img{opacity: 0;transition:opacity 0.5s; width:16vw;height:12vw;float:left;position:relative;left:0;top:0;margin:10px 0 10px 0;}
	#list_all .list.on img{opacity: 1;}
	#list_all .list .txt{margin:0;background:none;opacity:0;transition:opacity 0.5s;display:block;position:relative;left:0;top:0;overflow:hidden;padding:10px 10px 60px 10px;}
	#list_all .list.on .txt{opacity: 1;}
	#list_all .list .txt::after{content:"詳細行程 \a00a2";display:block;text-align:right;width:7em;padding:3px 10px 3px 0;position:relative;background:#000;margin:0 -10px 0 auto}
	#list_all .list:hover .txt::after{color:#FF6;}
}
@media screen and (max-width:550px){
	#header h1{font-size:4.75vw;max-width:13.6em;max-height:7em;}
	/*
	.bg{margin:60px 0 0 0;height:100vw}
	 */
	.bg img{width:160%;}
	#content{padding:6vw 0 0 0;}
	#list_all .taiwan_map{top:70px;}
	#list_all .list .name{margin:60px -2px 0 0;height:30px;padding: 30px 9px 0 0;}
	#list_all .list.on .name{padding: 0 9px 0 0;}
	#list_all .list .name::before{width:1.2vw;height:1.2vw;top:.6vw;right:.6vw;margin:5px 0 0 0}
	#list_all .list.list01 .name{top:1.5vw;right:0}
	#list_all .list.list01 .name::before{top:2.1vw;
right: 9.6vw;}
	#list_all .list.list02 .name{top:4.6vw;right:1.9vw}
	#list_all .list.list02.on .name{padding: 0.6vw 2vw 0 0;}
	#list_all .list.list03 .name{top:9.2vw;right:1.5vw}
	#list_all .list.list03 .name::before{top:3vw;right:4vw;}
	#list_all .list.list03.on .name{padding: 0 8px 0 0;}
	#list_all .list.list04 .name{top:14vw;right:3.5vw}
	#list_all .list.list04 .name::before{top:1.9vw;}
	#list_all .list.list04.on .name{padding: 0px 6px 0 0;}
	#list_all .list.list05 .name{top:16.7vw;right:8vw}
	#list_all .list.list05.on .name{padding: 7px 0 0 0;}
	#list_all .list.list06 .name{top:21.6vw;right:6.3vw}
	#list_all .list.list06.on .name{padding:9px 0 0 0;}
	#list_all .list.list07 .name{top:29.6vw;right:8.6vw}
	#list_all .list.list08 .name{top:35vw;right:12vw}
	#list_all .list.list09 .name{top:54.2vw;right:18vw}
	#list_all .list.list10 .name{top:41vw;right:26.4vw}
	#list_all .list.list11 .name{top:38vw;right:23.8vw}
	#list_all .list.list11 .name::before{top:1.8vw;}
	#list_all .list.list11.on .name{padding: 0 8px 0 0;}
	#list_all .list.list12 .name{top:14.8vw;right:9.7vw;}
	#list_all .list.list12 .name::before{top:3.2vw;right:10vw}
	#list_all .list.list13 .name{top:22.1vw;right:7.6vw}
	#list_all .list.list13 .name::before{right:14vw}
	#list_all .list.list13.on .name{padding:9px 0 0 0;}
	#list_all .list img{float:none;margin:0;width:auto;max-width:100%;height:auto;}
	
	
#main .list .pic{float:none;overflow: hidden;height:150px;position:relative;margin:0 0 10px 0}
#main .list .pic img{width:inherit;max-width:100%;position:relative;top:50%;transform:translateY(-50%)}
}
@media screen and (max-width:500px){
}