/* 設定CSS變數 */
:root{    
    --pri01:#647B87; /*主色1藍*/
    --pri02:#80CDE8; /*主色2藍2*/
    --pri03:#5C7B47; /*主色3綠*/
    --pri04:#8EAD2B; /*主色4綠2*/
    --pri05:#cb007c; /*主色5紅*/
    --pri06:#A81B04; /*主色6深紅*/
    
    --pd:20px;                 /* common padding space */
    --pd2:calc(var(--pd)*2);   /* common padding space x2 */
    --pdh:calc(var(--pd)/2);   /* common padding space 1/2 */
    
    --fsS:16px; /* font-size S */
    --fsP:20px; /* font-size P */
    --fsM:28px; /* font-size M */
    --fsL:36px; /* font-size L */
    --fsXL:50px; /* font-size XL */
    
    --gradient01: linear-gradient(0deg, var(--pri01) 0%, var(--pri02) 50%, var(--pri03) 100%); /* logo 漸層 */
    
}
/* 專案CSS */
body{ background-color: #1E1E1E;}
p{ font-size: var(--fsP); line-height: 1.5;}
img{ display: inline-block; max-width: 100%;}
.mainContent{ padding-bottom: 130px; color: #FFF;}
.mainContent .container{ max-width: 1000px; padding: var(--pd);}

header{ background-color: var(--pri01);}

header nav{ font-size: 0; width: 100%; line-height: 70px; height: 70px; display: inline-block; text-align: center;}
header nav .logo{width: 130px; height: 70px; background-image: url('../Images/logo_white.svg'); background-position: center; background-repeat: no-repeat;}
header a.UI{ font-size: 0; color: #FFF; position:absolute; top: 0;}
header a.UI::before{ font-size: 50px;}
header a.UI.prev{ left: 10px;}

menu{ position: fixed; bottom: 0; left: 0; background-color: var(--pri01); width: 100%; text-align: center; z-index: 99;}
menu nav{ width: 100%; height: 90px; max-width: 1200px; display: flex; justify-content: space-evenly; align-items: center; margin: 0 auto;}
menu nav a{ font-size: var(--fsS); color: #FFF;}
menu nav a::before{ font-size: 50px;}
menu nav a span{ width: 100%; display: inline-block;}
menu nav b.line{ width: 0px; height: 40px; border-left: 1px solid #FFF;}

h6.title{ font-size: var(--fsL); letter-spacing: 4px; color: #FFF; text-align: center; position: relative; padding-bottom: 16px; margin-top: 30px;}
h6.title::after{content: ''; width: 100%; max-width: 394px; height: 12px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-image: url('../Images/ui/title_line.png'); background-repeat: repeat-x; background-position: center; background-size: auto 12px;}

.news_list{ width: 100%; max-width: 1000px; padding: 20px; margin: 0 auto;}
.news_list .item{border-radius: 0 20px 0 20px; border: 1px solid var(--pri01); overflow: hidden; color: #FFF; margin-bottom: 40px; font-size: 0;}
.news_list .item .info,
.news_list .item p{ font-size: 0; padding: var(--pd); }
/*.news_list .item .info{ padding-bottom: 0;}*/
.news_list .item .info li{ display: inline-block; font-size: var(--fsP);}
.news_list .item .info .i1.photo{ width: 40px; height: 40px; background-size: cover; background-position: center; border-radius: 50%; overflow: hidden; margin-right: 10px; vertical-align: top;}
.news_list .item .info .i2{ width: calc(100% - 40px - 10px); position: relative;}
.news_list .item .info .i2 a{color: #FFF; margin:0 5px; text-decoration: underline;}
.news_list .item .info .i2 a.who{margin-left: 0;}
.news_list .item .info .i2 .time{ font-size: var(--fsS);display: block;}
.news_list .item .info .i2 a.id { color: var(--pri02); position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.news_list .item .pic{ width: 100%; display: inline-block; background-image: url('../Images/ui/empty_pic.png'); background-size: cover; background-position: center; position: relative;}
.news_list .item .pic::after{ content: ''; display: block; padding-top: 56.25%;}
.news_list .item p{ font-size: var(--fsP); padding-top: 0;}
.news_list .action{ display: flex; font-size: 0;}
.news_list .action a{ width: calc(100%/3); color: #FFF; font-size: 36px; text-align: center; line-height: 1; padding: 5px 0; transition: .3s;}
.news_list .action a:hover{ background-color: rgba(255,255,255,.1);}
.news_list .action a.message{ border-left: 1px solid var(--pri01); border-right: 1px solid var(--pri01);}
.news_list .action i{ display: inline-block; vertical-align: middle; font-style: normal; font-size: var(--fsP);}
.news_list .action i::before,
.news_list .action i::after{ content: '('; display: inline-block; margin: 0 3px;}
.news_list .action i::after{ content: ')';}

.news_list .sharetxt{ font-size: 28px; width: calc(100% - 40px); height: 200px; margin: 0 var(--pd) var(--pd); color: #FFF; }
.news_list .sharetxt:focus { border-color:var(--pri04);}

/* 輸入區塊 */
.inputbox{ padding: 20px;}
.inputbox input,
.inputbox textarea{ width: 100%; margin-bottom: 20px; color: #FFF; font-size: var(--fsM);}
.inputbox textarea{ height: 300px;}
.inputbox input:last-child{ margin-bottom: 0;}

/* index */
/*body.index{ background-color: #1E1E1E;}*/
.index .KV{ padding: 30px 0 80px; position: relative; background-size: 100% auto; background-repeat: no-repeat; background-position: center top;}
.index .KV::after{ content: ''; display: block; position: absolute; width: 100%; bottom: -1px; left: 0; height: 80%; z-index: 0; background:linear-gradient(0deg, rgba(30,30,30,1) 0%, rgba(30,30,30,0) 100%); }
.index .KV .logo{ height: 70px; background-image: url('../Images/logo_white.svg'); background-position: center; background-repeat: no-repeat; margin-bottom: 20px; filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.4));}
.index .KV .group{ font-size: 0; text-align: center; position: relative; z-index: 1;}
.index .KV a{font-family: 'Noto Sans TC', sans-serif; text-align: center; margin: 12px;}
.index a.index-btn{ width: 295px; height: 295px; font-size: 80px; line-height: 85px; padding: 60px; color: #333; font-weight: 900; background-color: rgba(217,217,217,.8); transition: .3s;}
.index a.index-btn:hover{ background-color: rgba(217,217,217,.9);}
.index a.index-btn2{ width: 136px; height: 136px; font-size: 36px; padding: 25px; line-height: 40px; color: #FFF; font-weight: 700; border-radius: 10px; transition: .3s;}
.index a.index-btn2:hover{ transform: scale(1.05);}
.index a.index-btn2:first-child{ margin-left: 0;}
.index a.index-btn2:last-child{ margin-right: 0;}

.index .KV a.a1{border-radius: 30px 0 30px 0;}
.index .KV a.a2{border-radius: 0 30px 0 30px;}
.index .KV a.a1 b{color: var(--pri04);}
.index .KV a.a2 b{color: var(--pri01);}
.index .KV a.b1{ background-color: var(--pri03);}
.index .KV a.b2{ background-color: var(--pri04);}
.index .KV a.b3{ background-color: var(--pri02);}
.index .KV a.b4{ background-color: var(--pri01);}

/* 我要分享 */
/*.news_list.edit{ padding-bottom: 0;}*/

/* 留言區 */
.share h6.title::after{background-image: url('../Images/ui/title_line2.png');}
.share .news_list .action a.UI.message{ background-color: #333;}
.share .news_list .action a.UI.like,
.share .news_list .action a.UI.share{ border-bottom: 1px solid #FFF;}
.share .board{ padding: 20px; background-color: #333;}
.share .board .inputbox{ width: 100%;}
.share .board .inputbox input{ width: calc(100% - 36px - 10px); color: #FFF; margin-bottom: 0;}
.share .board .inputbox input:focus { border-color:var(--pri04);}
.share .board .inputbox a.UI{ display: inline-block; vertical-align: middle; font-size: 0;}
.share .board .inputbox a.UI::before{ font-size: 36px; margin-left: 10px;}
.share .board .inputbox a.UI:hover{color:var(--pri04);}
.board .msg_list{ display: inline-block; width: 100%;}
.board .msg_list > ul > li{ font-size: var(--fsP); display: inline-block;}
.board .msg_list ul{ margin-bottom: 10px;}
.board .msg_list ul.lv2{ padding-left: 50px;}
.board .msg_list ul li.photo{ width: 40px; height: 40px; background-size: cover; background-position: center; border-radius: 50%; overflow: hidden; margin-right: 10px; vertical-align: top;}
.board .msg_list ul li.l2{ width: calc(100% - 40px - 10px); padding: 15px; background-color: rgba(255,255,255,.2); border-radius: 15px;}
.board .msg_list ul.lv2 li.l2{background-color: rgba(255,255,255,.1);}
.board .msg_list ul li.l2 b{ display: block; font-size: 18px; margin-bottom: 5px; font-weight: normal;}
.board .msg_list ul li.l2 b a{ color: #FFF; float: right; margin-left: 10px;}

/* 開團參團 */
.tour h6.title::after{background-image: url('../Images/ui/title_line.png');}
.tour_list{ width: 100%; max-width: 1000px; padding: 20px; margin: 0 auto; }
.tour_list .item{width: 100%; display: inline-block; border-radius: 0 20px 0 20px; border: 1px solid var(--pri01); overflow: hidden; color: #FFF; margin-bottom: 40px; font-size: 0;}
.tour_list .item h6,
.tour_list .item p{ padding: var(--pd);}
.tour_list .item h6{ padding-bottom: 0; font-size: var(--fsM); font-weight: 700; color: var(--pri02);}
.tour_list .action{ display: flex; font-size: 0; border-top: 1px solid var(--pri01); margin-top: var(--pd);}
.tour_list .action a{ width: calc(100%/2); color: #FFF; font-size: 36px; text-align: center; line-height: 1; padding: 5px 0; transition: .3s;}
.tour_list .action a span{ font-size: var(--fsP); display: inline-block; vertical-align: middle;}
.tour_list .action a:hover{ background-color: rgba(255,255,255,.1);}
.tour_list .action a.share{ border-right: 1px solid var(--pri01);}
.tour_list .action i{ display: inline-block; vertical-align: middle; font-style: normal; font-size: var(--fsP);}
.tour_list .action i::before,
.tour_list .action i::after{ content: '('; display: inline-block; margin: 0 3px;}
.tour_list .action i::after{ content: ')';}

/* 路線 */
.route h6.title::after{background-image: url('../Images/ui/title_line.png');}

.departure_select{width: 100%; text-align: center; padding: var(--pd);}
.departure_select select{ color: #FFF; font-size: var(--fsM); border-radius: 50px; background-image: url(../Images/ui/icon_form_select_arrow_white.svg); padding: 10px 50px 10px 35px;}

.route_list{ width: 100%; max-width: 1000px; padding: 20px; margin: 0 auto; font-size: 0;}
.route_list .item{width: calc((100% - var(--pd))/2); display: inline-block; vertical-align: top; margin-right: var(--pd); border-radius: 20px 0 20px 0; border: 1px solid var(--pri01); overflow: hidden; color: #FFF; margin-bottom: 40px; font-size: 0; transition: .3s;}
.route_list .item:nth-of-type(even){margin-right: 0;}
.route_list .item:hover{ border-color: var(--pri02);}
.route_list .item .pic{ width: 100%; display: inline-block; background-image: url('../Images/ui/empty_pic.png'); background-size: cover; background-position: center; position: relative; border-bottom: 1px solid #333;}
.route_list .item .pic::after{ content: ''; display: block; padding-top: 100%;}
.route_list .item .name{ font-size: var(--fsS); padding: 10px var(--pd) 5px; text-align: right;}
.route_list .item .name b{ margin-right: 8px;}
.route_list .item .subject{ padding: 0 var(--pd); font-size: var(--fsM); font-weight: 700; color: var(--pri02); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.route_list .item p{ padding: var(--pd); padding-bottom: 0; margin-bottom: var(--pd); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis;}
.route_list .action{ display: flex; font-size: 0; border-top: 1px solid var(--pri01); margin-top: var(--pd);}
.route_list .action a{ width: calc(100%/2); color: #FFF; font-size: 36px; text-align: center; line-height: 1; padding: 5px 0; transition: .3s;}
.route_list .action a span{ font-size: var(--fsP); display: inline-block; vertical-align: middle;}
.route_list .action a:hover{ background-color: rgba(255,255,255,.1);}
.route_list .action a.like{ border-right: 1px solid var(--pri01);}
.route_list .action i{ display: inline-block; vertical-align: middle; font-style: normal; font-size: var(--fsP);}
.route_list .action i::before,
.route_list .action i::after{ content: '('; display: inline-block; margin: 0 3px;}
.route_list .action i::after{ content: ')';}

/* route detail */
.route .id{ color: #FFF; font-size: var(--fsM);}
.route h5{ color: var(--pri02); font-size: var(--fsL); margin: var(--pd) 0;}
.route p.txt{ padding-top: var(--pd);}
.route p.txt:first-letter{font-size: var(--fsL);}
.route .photobox{width: 100%;}
.photobox .large{width: 100%; position: relative; border: 1px solid var(--pri01); background-color: #111;}
.photobox .large::after,
.photobox .thumbnail a::after{ content: ''; display: block; padding-top: 100%;}
.photobox .large img{width: 100%; height: 100%; object-fit: contain; position: absolute;}
.photobox .thumbnail{ width: 100%; display: inline-block; text-align: center; font-size: 0; padding-top: 10px;}
.photobox .thumbnail a{width: 90px; margin: var(--pdh); border: 2px solid var(--pri01); background-size: cover; background-position: center; transition: 0.3s;}
.photobox .thumbnail a:hover,
.photobox .thumbnail a.focus{border-color: var(--pri02);}








/* 新聞 */
.news h6.title::after{background-image: url('../Images/ui/title_line3.png');}

/* 我的 */
.my h6.title::after{background-image: url('../Images/ui/title_line.png');}
.my-info{ width: 100%; text-align: center; margin: var(--pd2) auto var(--pd); position: relative;}
.my-info a.UI{ color: #FFF; position: absolute;}
.my-info a.setting{ font-size: 60px; top: 0; right: var(--pd); }
.my-info a.camera::before{font-size: 50px;}
.my-info a.camera{ font-size: 0; bottom: var(--pd2); right: var(--pd2); padding: 10px; background-color: var(--pri02); line-height: 1; border-radius: 50%; border: 5px solid #FFF; }
.my-info .photo{ width: 500px; margin: 0 auto; position: relative;}
.my-info .photo .pic{ display: inline-block; width: 100%; border-radius: 50%; background-size: cover; background-position: center; border: 5px solid var(--pri02);}
.my-info .photo .pic::after{content: ''; display: block; padding-top: 100%;}
.my-info h4.name{ color: #FFF; font-size: var(--fsXL); letter-spacing: 5px; font-weight: 700; margin: var(--pdh) auto 0;}

.my-link{ display: flex; padding: var(--pd); justify-content: space-evenly;}
.my-link a{ width: 136px; height: 136px; font-size: 36px; text-align: center; padding: 25px; line-height: 40px; color: #FFF; font-weight: 700; border-radius: 10px; transition: .3s;}
.my-link a:hover{ transform: scale(1.05);}
.my-link a.b1{ background-color: var(--pri03);}
.my-link a.b2{ background-color: var(--pri04);}
.my-link a.b3{ background-color: var(--pri02);}
.my-link a.b4{ background-color: var(--pri01);}


/* ------------------- mediaqueries ------------------- */
@media screen and (max-width: 720px) {
	/* mobile view */
    :root{    
        --pd:28px;

        --fsS:20px;
        --fsP:26px;
        --fsM:36px;
        --fsL:48px;
        --fsXL:56px;
    }
}