body { background-position: left top; background-attachment: scroll; } body .block-item { background-position: left top; background-attachment: scroll; border-style: none; } body .widget-item { background-position: left top; background-attachment: scroll; border-style: none; } body .header { background-position: left top; background-attachment: scroll; border-style: none; } body .left { background-position: left top; background-attachment: scroll; border-style: none; } body .right { background-position: left top; background-attachment: scroll; border-style: none; } body .footer { background-position: left top; background-attachment: scroll; border-style: none; } /**** sunshinetour style ****/ /* 共用 */ .sunshine-width{ max-width: 1530px; -ms-flex: 0 0 100%; flex: 0 0 100%; } .sunshine-width>.module-container>.main { padding: 0 46px; } .sunshine-title>.module-container>.main>.header-title{ position: relative; display: table; width: auto; margin: 48px auto 54px; color: #06082b; text-align: center; font-size: 30px; font-weight: 600; } .sunshine-title>.module-container>.main>.header-title::after { content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/96f9677b-f0e9-423b-8c64-5fa8366fa4a8.png); background-position: center; background-repeat: no-repeat; width: 39px; height: 9px; bottom: -7px; left: 50%; transform: translate(-50%,0); } .sunshine-top-title .bgfixed::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,0), #06082B); z-index: 0; opacity: .3; } .sunshine-top-title h1{ position: absolute; top: 50%; left: 50%; font-size: 44px; font-weight: 600; padding: 0 46px 20px; color: #ffffff; transform: translate(-50%,-50%); width: 100%; text-align: center; text-shadow: 1px 1px 3px rgb(0 0 0 / 50%); max-width: 1530px; z-index: 1;} .sunshine-top-title h1:after{ content: ''; position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 0px; height: 4px; width: 70px; background: #ffffff; -webkit-box-shadow: 1px 1px 3px rgb(0 0 0 / 50%); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.5); box-shadow: 1px 1px 3px rgb(0 0 0 / 50%); } .sunshine-breadcrumb.theme-breadcrumb{ position: absolute; z-index: 1; } .sunshine-breadcrumb.theme-breadcrumb.sunshine-width>.module-container>.main { padding: 0 20px; } .sunshine-breadcrumb .breadcrumb{ background-color: transparent; font-size: 13px; padding: 0.75rem 0;} .sunshine-breadcrumb.theme-breadcrumb .breadcrumb{ max-width: 1530px; margin: 0 auto; padding: 0.75rem 1rem;} .sunshine-breadcrumb .breadcrumb li.breadcrumb-item a { color: #666666;} .sunshine-breadcrumb .breadcrumb .breadcrumb-item.active { color: #666666; font-weight: 600;} .sunshine-breadcrumb .breadcrumb-item+.breadcrumb-item::before { padding-right: 2px; color: #E74191; font-weight: 400; font-family: FontAwesome !important; content: "\f101"; font-size: 13px; line-height: 14px; } .mt-48{margin-top: 48px;} .mb-48{margin-bottom:48px;} .my-48{margin-top: 48px; margin-bottom:48px;} .mt-54{margin-top: 54px;} .mb-54{margin-bottom:54px;} .my-54{margin-top: 54px; margin-bottom:54px;} .sunshine_btn_pink { text-align: center; width: 100%; margin-top: 50px; } .sunshine_btn_pink a{ background: #E74191; border-radius: 25px; padding: 10px 40px 10px 60px; font-size: 16px; font-weight: 700; color: #ffffff; text-align: center; text-decoration: none; position: relative; opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .sunshine_btn_pink a:hover { -webkit-filter: saturate(0.5); } .sunshine_btn_pink a::before { content: ""; position: absolute; width: 16px; height: 16px; background: url(https://www.sunshinetour.com.tw/material-alias/主題頁/pen-icon.svg) no-repeat center; left: 40px; top: 10px; } @media(max-width: 767px){ .sunshine-top-title h1{ font-size: 30px;} } @media(max-width: 575px){ .sunshine-width>.module-container>.main { padding: 0 20px; } .sunshine-title>.module-container>.main>.header-title{ font-size: 24px; margin: 40px auto 20px;} .sunshine-top-title h1{ padding-bottom: 10px; text-align: center; } .sunshine-top-title h1:after{ left: 50%; transform: translate(-50%, 0);} .sub_menu-trip .server_menu > ul > li.download-fixed-btn ul li i { line-height: 50px; } .mb-54{ margin-bottom: 40px; } .mb-54{ margin-bottom:40px;} .my-54{ margin-top: 40px; margin-bottom:40px;} } /* header */ body .header{ position: fixed; top: 0; left: 0; right: 0; z-index: 1001; } .row.header + .row { padding-top: 165px; } @media(max-width: 767px){ body .header { z-index: 1049; } .row.header + .row { padding-top: 50px; } } /* 上標logo區 header */ .sunshine_header .web-header{ max-width: 1530px; height: 112px; padding:16px 26px;} .sunshine_header .headerAdBox{ line-height: 80px; width: auto; height: 80px; display: table; padding-left: 15px;} .sunshine_header .headerAdBox>div>img{ width: auto; height: 67px; display: inline !important; -webkit-filter: grayscale(1); filter: grayscale(1); opacity: .4;} .sunshine_header .headerAdBox>div>img:hover{ -webkit-filter: grayscale(0); filter: grayscale(0); opacity: 1;} .sunshine_header .headerAdBox>div>img:nth-child(1){width: 67px; height: 67px;} .sunshine_header .headerAdBox>div>img:nth-child(2){width: 112px; height: 67px;} .sunshine_header .headerAdBox>div>img+img { margin-left: 15px; } .sunshine_header .hnav{display:none;} .sunshine_header .web-header .logobar{ height: 80px;} .sunshine_header .web-header .logo{ width: 130px;} .sunshine_header .web-header .logo a img { width: 107px; height: 72px; top:5px; transform: translate(0, 0);} .sunshine_header .logobar .search-panel.pull-right{ width: 300px; text-align: right;} .sunshine_header .link-row{ line-height:initial; margin: 0; } .sunshine_header .link-row li{float: initial; position: relative;} .sunshine_header .link-row li a,.sunshine_header .link-row li:first-child a:hover{ color:#06082b; font-size: 14px; text-decoration: none;} .sunshine_header .link-row li:not(:first-child) a:hover{ color:#e74191;} .sunshine_header .link-row li:first-child { position: relative; margin-left: 0; height: 36px; background: #f1f1f1; padding: 8px 0 8px 28px;} .sunshine_header .link-row li:first-child a{ cursor:default;} .sunshine_header .link-row li:first-child::after{content:""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/b004d6f6-d46b-4964-8248-5395bc24c710.svg); background-position: center;background-repeat: no-repeat; width: 20px; height: 20px; left: 6px;} .sunshine_header .link-row li:first-child::before,.sunshine_header .link-row li:nth-child(2)::before,.sunshine_header .link-row li:nth-child(3)::before{ display: none;} .sunshine_header .link-row li:nth-child(2) { margin-left: -5px; background: #f1f1f1; padding: 4px 8px 3px 5px; height: 36px; width: auto; } .sunshine_header .link-row li:nth-child(2) a{ font-family: 'Raleway', sans-serif !important; font-weight: 600; font-style: italic; font-size: 20px; line-height: initial; color:#e74191;} .sunshine_header .link-row li:nth-child(3),.sunshine_header .link-row li:nth-child(4),.sunshine_header .link-row li:nth-child(5){ line-height: 20px; margin-left: 0px; margin-top: 20px; text-align: center; } .sunshine_header .link-row li:nth-child(4), .sunshine_header .link-row li:nth-child(5) { padding-left: 6px; } .sunshine_header .link-row li:not(:last-child):before { content: ""; margin-right: 5px; width: 1px; height: 14px; background: #06082b; position: absolute; top: 50%; left: 1px; transform: translate(0, -50%); } .sunshine_header .link-row li:last-child:before{content: ""; margin-right: 5px; width: 1px; height: 14px; background: #06082b; position: absolute; top: 50%; left: 1px; transform: translate(0, -50%); } .sunshine_header .link-row li:last-child { padding-right: 70px; } /* .sunshine_header .link-row li:last-child { margin-left: 12px; } .sunshine_header .link-row li:last-child::before { content: ""; background: #06082b; position: absolute; width: 22px; height: 22px; border-radius: 50%;} .sunshine_header .link-row li:last-child::after{content:""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/9896d441-de9b-4aa8-9bce-4e1844742a83.svg); background-position: center;background-repeat: no-repeat; background-size: 16px; width: 20px; height: 20px; left: 1px; top: 1px;} .sunshine_header .link-row li:last-child a { padding-left: 27px; } */ .header_read { position: absolute; left: 50%; transform: translate(-50%, 16px); -ms-flex: 0 0 290px; flex: 0 0 290px; max-width: 290px; height: 83px; width: 290px;} .header_read a{display: block; position: relative;text-align: center; height: 61px;} .header_read img{max-width: 240px; display: block; width: 240px; height: 61px; margin: 0 auto; -webkit-filter: brightness(0); filter: brightness(0);} .header_read:hover a img{ -webkit-filter: brightness(1); filter: brightness(1); } /* .header_read:hover a::before{ content:""; position: absolute; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/0255b996-6767-4def-8980-83c59a352068.png"); background-repeat: no-repeat;background-position: top; background-size: 240px;width:240px; height: 62px; left: 50%; transform: translate(-50%,0);} */ .header_read::after{ content: "一次的旅行,永遠的朋友"; position: absolute; width: 100%; text-align: center; color:#777777; font-size: 11.5px; letter-spacing: 0.2rem; left: 50%; bottom: 0; transform: translate(-50%,0);} .header_read .header-title { display: none; } @media(max-width: 1199px){ .sunshine_header .headerAdBox{ padding-left: 5px;} .sunshine_header .headerAdBox>div>img{ height: 67px;} .sunshine_header .headerAdBox>div>img+img{ margin-left: 5px;} } @media(max-width: 991px){ .sunshine_header .nav_sw,.sunshine_header .headerAdBox{ display: none;} .sunshine_header .web-header{ height: initial;} } @media screen and (max-width: 930px){ .sunshine_header .web-header .logobar .search-panel { margin-right: 0;} } /* 上標會員登入 */ .header-member { position: fixed; top: 80px; max-width: 1530px; left: 50%; transform: translate(-50%,0); display: -ms-flexbox; display: flex; height: 0; } .header-member .member-block { position: absolute; top:-10px; right: 16px; width: 70px;} .header-member .member-block>a{ text-decoration: none;} .header-member .member-block>a>span { position: relative; color: #06082b; font-size: 14px; padding-left: 32px;} .header-member .member-block>a>span::before { content: ""; background: #06082b; position: absolute; width: 22px; height: 22px; border-radius: 50%;top: -1px; left: 4px; } .header-member .member-block>a>span::after{content:""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/9896d441-de9b-4aa8-9bce-4e1844742a83.svg); background-position: center;background-repeat: no-repeat; background-size: 16px; width: 20px; height: 20px; top: -1px; left: 5px; } /* .header-member .member-block>a:hover>span.loginicon::before {background: #e74191; } */ .header-member .member-block>a>span.loginicon:hover { color:#e74191;} .header-member .showName .member-name { position: absolute; right: 265px; top: -50px; width: 210px; color: #06082b; } .header-member .showName .SignOut { margin-left: 0; font-size: 14px; padding: 1px; background: transparent; color: #06082b; position: absolute; right: 10px; width: 30px; top: 0px; } .header-member .showName .SignOut:hover{ color:#e74191;} .showName .member-name .greet::after { content: "會員中心"; color: #e74191; border: 1px solid #e74191; padding: 2px; } @media screen and (max-width: 1529px){ .header-member .member-block{ right: 10px;} } @media screen and (max-width: 1199px)and (min-width: 992px){ .header-member .showName .member-name { right: 260px; width: 140px; } .showName .member-name .greet::after { position: absolute; top: 30px; left: 0; } } @media screen and (max-width: 767px){ .header-member.mobile{ z-index:1049; top:0;} .header-member.mobile .member-block{ right: 50px; top: 10px; width: auto;} .header-member.mobile .member-block>a>span{ color:#ffffff; font-size: 12px; height: 32px; display: block; border: 1px solid rgb(255 255 255 / 50%); padding: 0px 5px; line-height: 30px; } .header-member.mobile .member-block>a>span::before{ display: none;} .header-member.mobile .member-block>a>span::after{ display: none;} /* .header-member.mobile .member-block>a>span::after { background-size: 22px; width: 22px; height: 22px;top: -20px; left: 0px;} */ .header-member.mobile .showName{ position: relative; width: auto; right: initial; top: initial; padding: 0; justify-content: flex-end;} .header-member.mobile .showName .member-name { position: relative; width: auto; right: initial; top: initial; color: #ffffff; font-size: 12px; text-align: right; padding-left: 5px;} .main_nav .mega-menu .menu-logo > li > a img{ left:5px;} .showName .member-name .greet{ margin-left: 0;} .showName .member-name .greet::after{ padding: 2px; font-size: 12px; width: 56px; color: #ffffff; background: #e74191;} .header-member.mobile .showName .SignOut{ position: relative; margin-left: 0; font-size: 12px; color: #06082b; width: 40px; right: initial; top: initial; line-height: 20px; background: #ffffff; text-align: center; padding: 2px; height: 22px; border-radius: 0; margin-top: 4px; } } @media(max-width: 575px){ .header-member.mobile .showName .member-name{ font-size: 0; padding-left: 0px;} } /* 主選單 main_nav */ .main_nav .mega-menu > section.menu-list-items { border-top: 3px solid #e74191; } .main_nav .mega-menu .mg-drop-down{background: rgb(6 8 43 / 90%);} .main_nav .mega-menu .mg-drop-down .megamenu_box{ margin: 0 auto; max-width: 1530px; min-height: 100px; padding: 10px 40px 15px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .main_nav .mega-menu .menu-links { max-width: 1530px; float: initial; margin: 0 auto; } .main_nav .mega-menu .menu-links > li { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .main_nav .mega-menu .menu-links > li:hover { background-color: #e74191 !important; } .main_nav .mega-menu .menu-links li .list_box { float: inherit; margin-right: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 10px 5px 0; flex-direction: column; } .main_nav .mega-menu .menu-links > li > a { font-size: 18px; padding: 0px 18px; text-align: center; } .main_nav .mega-menu .menu-links > li:hover>a { background-color: #e74191; } .main_nav .mega-menu .menu-links > li > a i.fa { font-size: 0.8em; } .main_nav .mega-menu .mg-drop-down h4{ font-size: 18px; margin-bottom: 0;} .main_nav .mega-menu .menu-links li .list_box ul{ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0;} .main_nav .mega-menu .menu-links li .list_box ul li { -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; } .main_nav .mega-menu .menu-links li .list_box ul li a{font-size: 16px;} .main_nav .mega-menu .menu-links li .list_box a p{ color:#ffffff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .main_nav .mega-menu .menu-links li .list_box a p:hover{color:#e74191;} .main_nav .mega-menu .menu-links li .list_tag ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .main_nav .mega-menu .menu-links li .list_tag li { -ms-flex: 0 0 16.66666%; flex: 0 0 16.66666%; max-width: 16.66666%; display: flex; margin: 0;} .main_nav .mega-menu .menu-links li .list_tag li a p{ font-size: 16px; color:#ffffff; } .main_nav .mega-menu .menu-links li .list_tag li a p:hover{color:#e74191;} .main_nav .mega-menu .menu-mobile-collapse-trigger{ height: 45px; width: 35px; background: transparent; top: 50%; right: 10px; transform: translate(0, -50%);} .main_nav .mega-menu .menu-mobile-collapse-trigger:hover { background: transparent; } .main_nav .mega-menu .menu-mobile-collapse-trigger span,.main_nav .mega-menu .menu-mobile-collapse-trigger:before,.main_nav .mega-menu .menu-mobile-collapse-trigger:after{ top: 8px; height: 2px; width: 26px;} .main_nav .mega-menu .menu-mobile-collapse-trigger span{ top: 14px; position: relative;} .main_nav .mega-menu .menu-mobile-collapse-trigger span:after{ content: "選單"; position: absolute; color: #ffffff; font-size: 10px; width: 26px; line-height: 24px; letter-spacing: 0.1em; bottom: -28px;} .main_nav .mega-menu .menu-mobile-collapse-trigger:after { top: 20px;} .main_nav .mega-menu .menu-mobile-collapse-trigger.active:before { -webkit-transform: rotate( 35deg); -ms-transform: rotate(35deg); transform: rotate( 35deg); width: 24px; left: 3px; top: 7px; } .main_nav .mega-menu .menu-mobile-collapse-trigger.active:after { -webkit-transform: rotate( -35deg); -ms-transform: rotate(-35deg); transform: rotate( -35deg); width: 24px; left: 3px; top: 21px; font-size: 0;} .main_nav .mega-menu .menu-mobile-collapse-trigger:hover.active:hover { height: 30px; width: 45px; } .main_nav .mega-menu .menu-mobile-collapse-trigger.active { height: 30px; width: 45px; } @media (max-width:1600px){ .main_nav .mega-menu > section.menu-list-items{ padding: 0 50px;} } @media (max-width:1300px){ .main_nav .mega-menu .menu-links > li > a{ padding: 0px 10px;} } @media (max-width: 1199px){ .main_nav .mega-menu .menu-links li .list_box ul li { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .main_nav .mega-menu .menu-links li .list_box ul li a,.main_nav .mega-menu .menu-links li .list_tag li a p { font-size: 15px; } .main_nav .mega-menu .menu-links li .list_tag li { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .main_nav .mega-menu .menu-links > li > a { font-size:17px;} } @media (max-width: 1099px){ .main_nav .mega-menu .menu-links > li > a { font-size: 16px;} } @media(max-width: 991px){ .main_nav .mega-menu .menu-links > li > a { font-size: 14px; line-height: 35px; padding: 0px 5px;} .main_nav .mega-menu .menu-links > li > a i.fa.fa-indicator { padding-left: 0; display: block !important; text-align: center; padding-bottom: 10px; } } @media(max-width:767px){ .main_nav { position: fixed; top: 60px; right: 0; left: 0; z-index: 1049; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; top: 0; } .main_nav .mega-menu .menu-logo { width: 100%; height: 54px; border-bottom: 2px solid #e74191;} .main_nav .mega-menu > section.menu-list-items { border-top: 0; padding: 0;} .main_nav .mega-menu .menu-logo > li, .main_nav .mega-menu .menu-logo > li > a { float: initial; height: 54px; } .main_nav .mega-menu .menu-logo > li > a { padding: 0; width: 100%; } .main_nav .mega-menu .menu-logo > li > a img {width: auto;} .main_nav .mega-menu .menu-logo > li:hover > a:before{ width: 18px; height: 16px;} .main_nav .mega-menu .menu-logo > li > a:hover,.main_nav .mega-menu .menu-links > li:hover>a{ background-color: #06082b;} .main_nav .mega-menu .menu-links { width: 100%; height: 100vh; max-height: initial !important; border-top: 1px solid rgba(0,0,0,0.21); padding-bottom: 150px;} .main_nav .mega-menu .menu-links > li { border-bottom: 1px solid #656786; width: 100%; margin: 0 auto; padding: 0 15px;} .main_nav .mega-menu .menu-links > li > a { font-size: 16px; line-height: 16px; width: calc(100% - 50px); text-align: left; height: 50px; padding-top: 15px; } .main_nav .mega-menu .menu-links > li:hover,.main_nav .mega-menu .menu-links > li.activeTriggerMobile{ background-color: #06082b !important;} .main_nav .mega-menu .menu-links > li:hover a i{ color:#e74191 !important; } .main_nav .mega-menu .menu-links > li > a i.fa { font-size: 1.2em; } .main_nav .mega-menu .menu-links > li:last-child { position: relative; width: 100%; background: rgb(255 255 255 / 30%); border: 0; padding: 0px; } .main_nav .mega-menu .menu-links > li:last-child a { padding-left: 20px; } .main_nav .mega-menu .menu-links > li:last-child:hover, .main_nav .mega-menu .menu-links > li:last-child.activeTriggerMobile { background: rgb(255 255 255 / 30%)!important; } .main_nav .mega-menu .menu-logo > li:last-child > a:hover, .main_nav .mega-menu .menu-links > li:last-child:hover>a { background: transparent; } .main_nav .mega-menu .menu-links > li:last-child::before { content: ""; width: 100%; height: 1px; position: absolute; background: #06082b; top: -1px; left: 0; } .main_nav .mega-menu .menu-links li div.mg-drop-down{ padding: 10px 18px;} .main_nav .mega-menu .mg-drop-down{ background: rgb(6 8 43 /100%);} .main_nav .mega-menu .mg-drop-down .megamenu_box{ padding: 0; min-height: initial;} .main_nav .mega-menu .menu-links li .list_box{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0;} .main_nav .mega-menu .menu-links li .list_box ul li { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-right: 10px;} .main_nav .mega-menu .mg-drop-down h4 { font-size: 16px; } .main_nav .mega-menu .menu-links li .list_box ul li a, .main_nav .mega-menu .menu-links li .list_tag li a p { opacity: 0.6; } .main_nav .mega-menu .menu-links li .list_tag li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .main_nav .mega-menu .menu-links > li:last-child > a i.fa.fa-indicator { right: 20px; } .main_nav .mega-menu .menu-mobile-collapse-trigger{right:5px; } } @media(max-width:575px){ .main_nav .mega-menu .menu-logo > li > a img {width: 230px;} } @media(min-width:768px){ .main_nav .mega-menu .menu-logo{display: none;} .main_nav .mega-menu .menu-links { width: calc(100% - 50px); display:-ms-flexbox; display: flex !important; justify-content: space-between;} .main_nav .mega-menu .menu-links > li:last-child{ display: none;} } /* 首頁大圖輪播 main_slider */ .main_slider .header-title>h1{ font-size: 0; margin-bottom: 0;} .main_slider .slider_title{ color:#ffffff; align-items: center;} .main_slider .slider_title h3{ font-size: 26px; margin-right: 18px; margin-bottom: 0;} .main_slider .slider_title span{ font-size: 24px; margin-right: 18px; font-family: 'Raleway', sans-serif !important; font-style: italic;} .main_slider .slider_title button{ background-color: #e74191; border:1px solid #e74191; color:#ffffff; font-style: italic; font-size: 16px; border-radius: 3px; padding:3px 13px; outline: none;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .main_slider .slider_title button:hover{ background: rgb(231 65 145 / 80%) !important; border: 1px solid rgb(231 65 145 / 80%);} .main_slider .carousel-indicators{ display: none;} .main_slider .carousel-caption{ width: 100%; left: 0; height: 80px; display: flex !important; bottom: 0; background: rgb(40 40 40 / 80%); } .main_slider .carousel-control-next,.main_slider .carousel-control-prev{ opacity:1; width: 10%; } .main_slider .carousel-control-next-icon,.main_slider .carousel-control-prev-icon { position: relative; width: 50px; height: 96px; background: no-repeat 50%/100% 100%; z-index: 1;} .main_slider .carousel-control-next-icon::before,.main_slider .carousel-control-prev-icon::before{ content: ""; position:absolute; left:2px; width:50px; height: 96px; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/b986d112-9dde-4a6a-9d68-609f051465d7.png"); background-position: center; background-repeat: no-repeat; opacity: 0.5; background-size: 52px; z-index: -1;} .main_slider .carousel-control-next:hover .carousel-control-next-icon::before,.main_slider .carousel-control-prev:hover .carousel-control-prev-icon::before{ opacity: 0.8;} .main_slider .carousel-control-next-icon::after,.main_slider .carousel-control-prev-icon::after{ content: ""; position:absolute; left:0; width:50px; height: 96px; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/4aa7d2cf-76c2-4282-86d4-dd899a33017a.svg"); background-position: center; background-repeat: no-repeat; z-index: 1;} .main_slider .carousel-control-prev-icon{transform: rotate(180deg); } .main_slider .carousel-inner picture img{ width: 100% !important; height: auto; aspect-ratio: 5 / 1.7813; object-fit: cover; object-position: center center;} @media(max-width: 767px){ .main_slider .carousel-caption{ height: 60px;} .main_slider .slider_title{ justify-content: center;} .main_slider .slider_title h3 { font-size: 18px;} .main_slider .slider_title span,.main_slider .slider_title button{ display: none;} .main_slider .carousel-caption{ height: 40px;} .main_slider .carousel-control-next, .main_slider .carousel-control-prev {width: 50px;} .main_slider .carousel-control-prev { left: 5px; } .main_slider .carousel-control-next { right: 5px; } } @media(max-width: 576px){ .main_slider .carousel-inner picture img { aspect-ratio: 5 / 2.93; object-fit: cover; object-position: center center; } } /* 首頁搜尋 main-search */ .main-search-bg>.module-container>.main{ background: rgb(26 28 128 / 20%); display: flex; padding: 25px 25px 0; } .main-search .search-area .container { max-width: 100%; padding: 0; } .main-search .search-area .search-box{ height: 80px;} .main-search .search-area .search-box .select-goal .title h6,.main-search .search-area .search-box .select-place .title h6, .main-search .search-area .search-box .select-date .title h6,.main-search .search-area .search-box .select-keywords .title h6{font-weight: 600; display: block; margin: 0px;} .main-search .search-area .search-box .select-keywords .title,.main-search .search-area .search-box .select-goal .title, .main-search .search-area .search-box .select-date .title,.main-search .search-area .search-box .select-place .title {padding-left: 22px; height: 25px;} .main-search .search-area .search-box .select-keywords .title i,.main-search .search-area .search-box .select-goal .title i, .main-search .search-area .search-box .select-place .title i,.main-search .search-area .search-box .select-date .title i{ display:none;} .main-search .search-box .title::before{ content:""; position:absolute; left:8px; right:6px; width:20px; height:20px; } .main-search .search-box .select-goal .title::before{ background-image: url('https://materials.fillo.com.tw/materials/sunshinetour/images/8578aaa4-13f5-4b1a-8b63-6ca8f28794d4.svg'); } .main-search .search-box .select-place .title::before{ background-image: url('https://materials.fillo.com.tw/materials/sunshinetour/images/ec7f43ae-2f3f-4594-a4b6-610be7f4a992.svg'); } .main-search .search-box .select-date .title::before{ background-image: url('https://materials.fillo.com.tw/materials/sunshinetour/images/f193cda9-e58d-4b3c-a420-dc43cb51f797.svg'); } .main-search .search-box .select-keywords .title::before{ background-image: url('https://materials.fillo.com.tw/materials/sunshinetour/images/46138968-2d8c-46d0-8c15-736a8e61a843.svg');} .main-search .search-area .search-box .select-goal,.main-search .search-area .search-box .select-place, .main-search .search-area .search-box .select-date,.main-search .search-area .search-box .select-keywords{ background: transparent;padding: 0 10px;height: 80px; } .main-search .search-area .search-box .search-btn { background: #e74191; width: 92%; height: 45px; margin-top: 25px; float: right; display: flex; padding: 0; justify-items: center; align-items: center; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .main-search .search-area .search-box .search-btn:hover{ opacity: 0.8;} .main-search .search-area .search-box .search-btn h5 { position: relative; display: table; margin: 0 auto; width: 120px; height: 30px; font-size: 1rem; line-height: 2rem; } .main-search .search-area .search-box .search-btn i { display: none; } .main-search .search-area .search-box .select-goal .select select, .main-search .search-area .search-box .select-place .select select, .main-search .search-area .search-box .select-date .select input, .main-search .search-area .search-box .select-keywords .select input{ height: 45px; padding: 5px 10px; border: none; background-color: transparent; color: #06082b; cursor: pointer; border-bottom: 1px solid #06082b; outline: none; outline: none; border-radius: 0;} .main-search .search-area .search-box .select-goal .select select, .main-search .search-area .search-box .select-place .select select { background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/f2daf3a2-adab-46bd-9ad6-38b6fbbf70c0.svg); background-size: 15px auto; } .main-search .search-area .search-box .select-date .select { width: 100%; } .main-search .search-area .search-box .select-date .select input { width: calc(46%); } .main-search .search-area .search-box .select-date .select .divide { margin: 25px 10px 0px 10px; width: 10px;} .main-search .search-area .search-box .select-keywords .select input{ font-size: 13px;} @media screen and (max-width:1529px) { .main-search-bg>.module-container>.main{padding: 25px 0 0;} } @media screen and (max-width:1300px) { .main-search .search-area .search-box .select-date .select input { width: calc(45%); } .main-search .search-area .search-box .select-date .select { display: block; } } @media screen and (max-width:1300px) { .main-search .search-area .search-box .select-date .select input { width: calc(44%);} } @media screen and (max-width:991px) { .main-search .search-area .search-box { height: auto; } .main-search .search-area .search-box > div { padding: 5px 0px 10px;} .main-search .search-area .search-box .select-keywords .title, .main-search .search-area .search-box .select-goal .title, .main-search .search-area .search-box .select-date .title, .main-search .search-area .search-box .select-place .title{ height: 20px;} .main-search .search-area .search-box .select-date .select input { width: calc(50% - 15px); } .main-search .search-area .search-box .search-btn { width: 300px; margin: 0 auto; display: block; margin-top: 10px; } .main-search .search-area .search-box .select-goal, .main-search .search-area .search-box .select-place, .main-search .search-area .search-box .select-date, .main-search .search-area .search-box .select-keywords{ height: 60px;} .main-search .search-area .search-box .select-goal .select select, .main-search .search-area .search-box .select-place .select select, .main-search .search-area .search-box .select-date .select input, .main-search .search-area .search-box .select-keywords .select input{ height: 35px;} .main-search .search-area .search-box .search-btn{ float: initial; margin-top: 0;} .main-search .search-area .search-box > div:last-child{ margin-bottom: 10px;} .main-search .search-area .search-box .select-date .select .divide { margin: 18px 10px 0px 10px; } } /* 搜尋月曆 datepicker*/ .datepicker{padding: 4px 8px;} .datepicker.dropdown-menu{ border: 1px solid #e5e5e5;} .datepicker.datepicker-dropdown:before{ border-bottom-color: #e5e5e5;} .datepicker.datepicker-dropdown.datepicker-orient-top:before{ border-top: 7px solid #e5e5e5;} .datepicker td, .datepicker th { width: 30px;height: 30px;} .datepicker table tr td.active:hover:hover,.datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active,.datepicker table tr td.active:hover:hover{ background-color: rgba(0,20,95,0.5);} .datepicker table tr td.active.active,.datepicker table tr td span.active.active,.datepicker table tr td span.active.active{background:#06082b;} .datepicker .datepicker-switch,.datepicker .next, .datepicker .prev { color:#06082b;} /*熱搜標籤 main-hashtag */ .main-hashtag{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 765px; padding-top: 10px;} .main-hashtag section.link.text-link { display: flex; align-items: center; background: #ffffff; } .main-hashtag-bg>.module-container>.main{ background: rgb(26 28 128 / 20%); display: flex; justify-content: center; padding: 0 25px 25px;} .web-page-frame .widget-item.main-hashtag.hashtag01 > .module-container > .main{ padding-left: 46px; } .web-page-frame .widget-item.main-hashtag.hashtag02 > .module-container > .main{ padding-right: 46px; } .main-hashtag section.text-link h2{ position: relative; font-weight: 600; margin: 0; padding-right: 10px; flex-grow: 0; max-width: 121px; min-width: 121px; text-align: center !important; } .main-hashtag section.text-link h2::after{ content: ""; position: absolute; background-color: #e74191; width: 1px; height: 20px; transform: rotate(25deg);; right: 0;} .main-hashtag div.link-list{ min-height: 45px; background: transparent; padding-left: 5px;} .main-hashtag div.link-list ul li a,.main-hashtag div.link-list ul li span{ padding: 8px 10px;} .main-hashtag div.link-list ul li i{ display: block;} @media screen and (max-width:1529px) { .main-hashtag-bg>.module-container>.main{padding: 0 0 25px;} } @media(max-width: 1300px){ .main-hashtag section.text-link h2{ max-width: 115px; min-width: 115px; font-size: 15px !important;} .main-hashtag div.link-list ul li a, .main-hashtag div.link-list ul li span{ padding: 8px 5px;} .main-hashtag div.link-list ul li a, .main-hashtag div.link-list ul li span { font-size: 15px !important; } } @media(max-width: 1199px){ .main-hashtag-bg>.module-container>.main{ flex-flow: column;} .main-hashtag { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-top: 0; } .web-page-frame .widget-item.main-hashtag.hashtag01 > .module-container > .main{ padding-right: 46px; } .web-page-frame .widget-item.main-hashtag.hashtag02 > .module-container > .main{ padding-left: 46px; } .main-hashtag div.link-list { min-height: 30px;} .main-hashtag div.link-list ul li a, .main-hashtag div.link-list ul li span { line-height: 20px; } } /* 手機版搜尋 mobile-search */ .mobile-search-module{ display: none !important;} .mobile-search-btn .bottom-bar{ position: fixed; z-index: 1048; bottom:0; left:0; width: 100%;border-top: 1px solid #eee; background-color: #ffffff; display:-ms-flexbox; display: flex; justify-content: space-around; height: 62px; padding: 10px 0;align-items: center; } .mobile-search-btn a{ border: 0; background: transparent; font-size: 22px; height: 62px; text-align: center; text-decoration: none; flex: 1; color: #999; outline: none; display: flex; flex-flow: column; align-items: center; justify-content: center;} .mobile-search #hide button{ width: 42px; height: 42px; border: 0; border: 1px solid #06082b; border-radius: 50%; background: url("https://materials.fillo.com.tw/materials/sunshinetour/images/4f4a0400-2174-431c-833c-15bf71f8703d.svg"); background-size: 24px; background-repeat: no-repeat; background-position: center;} .mobile-search-btn a p{ font-size: 13px; line-height: 1; margin: 6px 0 0; color: #999;} .mobile-search-btn a>i { font-size: 20px; color: #06082b;} .mobile-search-btn a .line-icon p{ letter-spacing: 0.2px; font-size: 13px; color: #ffffff; margin: 0; line-height: 18px; text-align: center; padding-left: 2px;} .mobile-search-btn .bottom-bar .line-icon{ position: absolute; width: 62px; height: 62px; background: #06c755; border-radius: 50%; bottom: 0; left: 50%; transform: translate(-50%, 0); font-size: 12px;} .mobile-search-btn .bottom-bar .btn-icon-image { background-image: url(https://www.sunshinetour.com.tw/material-alias/line-icon.svg); background-repeat: no-repeat; background-position: center 9px; background-size: 20px; width: 100%; height: 34px; } .mobile-search-btn .bottom-bar .icon-image{ width: 20px; height: 20px;} .mobile-search-btn .bottom-bar .icon-image.info{ background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/64707dfe-266b-4a43-b0e5-cfe6ae9f6e90.svg");background-repeat: no-repeat; background-position: center; background-size: 20px;width: 100%; height: 20px; } .mobile-search-btn .bottom-bar .icon-image.line{ background-image: url("https://www.sunshinetour.com.tw/material-alias/LINE_green.svg");background-repeat: no-repeat; background-position: center; background-size: 20px;width: 100%; height: 20px; } .mobile-search-block { position: fixed; z-index: 9999; background-color: rgb(255 255 255 / 90%); top: 0; left:0; width: 100%; height: 100vh; padding: 20px 0px; } .mobile-search-block>div { height:auto; background:transparent; clear: both; } .mobile-search-block #hide { text-align: center; margin-top: 30px;} .mobile-search .search-area{ min-height: 50px;} .mobile-search .search-area .search-box>div{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 5px 0;} .mobile-search .search-area .search-box .title h6 { color: #06082b; font-weight: 600; padding-left: 22px; height: 25px; font-size: 16px;} .mobile-search .search-area .search-box .select-goal,.mobile-search .search-area .search-box .select-place, .mobile-search .search-area .search-box .select-date,.mobile-search .search-area .search-box .select-keywords{padding:0; height: auto; flex-flow: column; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: flex-start; background-color: transparent;} .mobile-search .search-area .search-box .select-goal .title,.mobile-search .search-area .search-box .select-place .title, .mobile-search .search-area .search-box .select-date .title,.mobile-search .search-area .search-box .select-keywords .title{ height: auto; width: 110px;} .mobile-search .search-area .search-box .select-goal .title h6,.mobile-search .search-area .search-box .select-place .title h6, .mobile-search .search-area .search-box .select-date .title h6,.mobile-search .search-area .search-box .select-keywords .title h6{margin: 0;} .mobile-search .search-area .search-box .select-goal .title i,.mobile-search .search-area .search-box .select-place .title i, .mobile-search .search-area .search-box .select-date .title i,.mobile-search .search-area .search-box .select-keywords .title i{ display: none;} .mobile-search .search-box .title::before{ content:""; position:absolute; left:0; top:6px; width:20px; height:20px; } .mobile-search .search-box .select-goal .title::before{ background-image: url('https://materials.fillo.com.tw/materials/sunshinetour/images/8578aaa4-13f5-4b1a-8b63-6ca8f28794d4.svg'); } .mobile-search .search-box .select-place .title::before{ background-image: url('https://materials.fillo.com.tw/materials/sunshinetour/images/ec7f43ae-2f3f-4594-a4b6-610be7f4a992.svg'); } .mobile-search .search-box .select-date .title::before{ background-image: url('https://materials.fillo.com.tw/materials/sunshinetour/images/f193cda9-e58d-4b3c-a420-dc43cb51f797.svg'); } .mobile-search .search-box .select-keywords .title::before{ background-image: url('https://materials.fillo.com.tw/materials/sunshinetour/images/46138968-2d8c-46d0-8c15-736a8e61a843.svg');} .mobile-search .search-area .search-box .select-goal .select,.mobile-search .search-area .search-box .select-place .select, .mobile-search .search-area .search-box .select-date .select,.mobile-search .search-area .search-box .select-keywords .select{ width: 100%;} .mobile-search .search-area .search-box .select-goal .select, .mobile-search .search-area .search-box .select-place .select{ position: relative;} .mobile-search .search-area .search-box .select-goal .select::before, .mobile-search .search-area .search-box .select-place .select::before { content: ""; width: 13px; height: 13px; position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); z-index: 1; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/f2daf3a2-adab-46bd-9ad6-38b6fbbf70c0.svg); background-size: 15px auto; background-repeat: no-repeat; background-size: 13px; } .mobile-search .search-area .search-box .select-goal .select select,.mobile-search .search-area .search-box .select-place .select select, .mobile-search .search-area .search-box .select-date .select input,.mobile-search .search-area .search-box .select-keywords .select input{ background-color: transparent; border-radius: 0; padding: 5px 10px; font-size: 14px; border: 0; border-bottom: 1px solid #06082b; height: 35px; color: #06082b; outline: none;} .mobile-search .search-area .search-box .select-date .select input{ width: calc(46%);} .mobile-search .search-area .search-box .select-date .select .divide { margin: 15px 6px;width: 5%; } .mobile-search .search-area .search-box .search-btn { line-height: 45px; height: 45px; display: inline-block; border: none; color: white; background: #e74191; width: 100%; height: 45px; margin: 0 auto; margin-top: 15px; max-width: 180px; /* float: right; */ display: flex; padding: 0; justify-items: center; align-items: center; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .mobile-search .search-area .search-box .search-btn:hover{ opacity: 0.8;} .mobile-search .search-area .search-box .search-btn h5 { position: relative; margin: 0 auto; width: 120px; height: 30px; font-size: 1rem; line-height: 2rem; } .mobile-search .search-area .search-box .search-btn i{display: none;} .mobile-search-block .hashtag-container{ max-width: 510px; margin: 0 auto; margin-top: 20px; padding: 15px; border: 1px solid #b6b6b6; } section.link.text-link + section{ margin-top: 10px; } .mobile-search-block .hashtag-container h2{ position: relative; color: #E74191; font-weight: 600; font-size: 16px; display: table; margin: 0 auto 0.5rem;} .mobile-search-block .hashtag-container h2::before { content: ""; position: absolute; background-color: #e74191; width: 1px; height: 20px; transform: rotate( 25deg ); right: -10px; display: none;} .mobile-search-block .hashtag-container ul{ margin: 0;} .mobile-search-block .hashtag-container li{ padding: 0 10px; } .mobile-search-block .hashtag-container li a{ color: #06082B; font-size: 16px; font-weight: 600; line-height: 28px;} @media (max-width: 767.98px){ .mobile-search .search-area { bottom: initial; position: initial;} .mobile-search .search-area h6 { font-size: 1rem; } } @media(max-width:575px){ .mobile-search .search-area .search-box .select-date .select input{ width: calc(45%);} .mobile-search .search-area .search-box .select-date .select .divide { margin: 15px 5px; } .mobile-search-block .hashtag-container { max-width: 100%; margin: 20px 15px 0; } .mobile-search .search-area .search-box .search-btn{ max-width: 100%;} } /* 手機版LINE 選單*/ .LINE-block{ position: fixed; background-color: rgb(255 255 255 / 90%); display: flex; align-items: center; justify-content: center; top: -54px; left: 0; width: 100%; height: 0; padding: 20px 0px; overflow: hidden; z-index: 1049; opacity: 0;} /* .line-block-container { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; height: 100%; z-index: 5001; width: 100%; overflow: hidden; } */ .LINE-block .line-hide{ text-align: center; margin-top: 30px; } .LINE-block .line-hide button{ width: 42px; height: 42px; border: 0; border: 1px solid #06082b; border-radius: 50%; background: url("https://materials.fillo.com.tw/materials/sunshinetour/images/4f4a0400-2174-431c-833c-15bf71f8703d.svg"); background-size: 24px; background-repeat: no-repeat; background-position: center;} .mobileline__box { display: flex; align-items: center; flex-direction: column;} .mobileline__btnbox { width: 100%; display: flex;justify-content: center;} .mobileline__btn { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; font-family: 'Noto Sans TC', '微軟正黑體'; color: #fff; font-size: 20px; opacity: 0; border-radius: 50%; background: #02C501; -webkit-transition: transform .4s ease, opacity .5s ease; -moz-transition: transform .4s ease, opacity .5s ease; transition: transform .4s ease, opacity .5s ease; } .LINE-block.mobileline--open{ opacity: 1; height: 100%; top:0} .mobileline--open .mobileline__btn { opacity: 1; -webkit-transform: translate(0)!important; -moz-transform: translate(0)!important; transform: translate(0)!important; } .mobileline__btn:first-child { transform: translate(100px, 100px); margin-top: 40px; } .mobileline__btn:nth-child(2) { margin: 0 20px; transform: translate(0, 140px); transition-delay: .2s; } .mobileline__btn:last-child { transform: translate(-100px, 100px); transition-delay: .4s; margin-top: 40px; } .mobileline__btn:hover { color: #fff; } /* 近期出發 recent*/ .recent .swiper-container { padding: 0 45px; } .recent .swiper-slide-style { border-radius: 0; border: 1px solid #e5e5e5; box-shadow: 4px 4px 0px rgb(0 0 0 / 10%); margin-top: 0; margin-bottom: 20px;} .recent .swiper-slide .swiper-img img{ border-radius: 0;} .recent .swiper-button-prev.swiper-button-white,.recent .swiper-button-next.swiper-button-white{ width: 40px; height: 40px; background: #282828; border-radius: 50%; opacity: 0.6;} .recent .swiper-button-prev.swiper-button-white:hover,.recent .swiper-button-next.swiper-button-white:hover{ opacity: 0.4;} .recent [class*='swiper-button-']:after { font-size: 16px; font-weight: 600; background: transparent; padding: 5px 12px 5px 12px;} .recent .swiper-button-prev,.recent .swiper-container-rtl .swiper-button-next { left:0px; } .recent .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 0px;} .recent figure.swiper-img { position: relative; margin: 0 0 28px; } .recent .swiper-slide .swiper-img img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: 5 / 3.318; object-position: center center; object-fit: cover;} .recent figure.swiper-img::after { display: block; content: ''; width: 100%; padding-top: 58.2%; } .recent .swiper-slide .swiper-title { position: relative; margin: 0 27px 0; padding: 20px 20px 0; font-size: 20px; font-weight: 600; min-height: 76px; text-align: justify; color: #06082b; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 28px; } .recent h3.swiper-title::before{ content: ""; width: 14px; height: 1px; position: absolute; background: #e74191; top: 0; left: 0;} .recent h3.swiper-title::after{ content: ""; width: 1px; height: 14px; position: absolute; background: #e74191; top: 0; left: 0;} .recent .swiper-slide .swiper-content { color: #666666; letter-spacing: 0.05em; min-height: 48px; margin: 3px 44px 40px; padding: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-align: justify;} .recent .swiper-pagination-bullet { width: 10px; height: 10px; background: rgb(26 28 128 / 50%); } .recent .swiper-pagination-bullet:hover{background: rgb(26 28 128 / 80%); } .recent .swiper-pagination-bullet-active { color: #fff; background: #e74191; } @media (max-width: 1299px){ .recent .swiper-slide .swiper-title{ margin: 0 15px 0;} .recent .swiper-slide .swiper-content{ margin: 3px 35px 40px;} } @media (max-width: 1099px){ .recent .swiper-container { padding:0 30px;} .recent .swiper-button-prev,.recent .swiper-container-rtl .swiper-button-next { left:10px; } .recent .swiper-button-next,.recent .swiper-container-rtl .swiper-button-prev { right: 10px;} } @media (max-width: 1023px){ .recent .swiper-container { padding: 0 25px; } .recent .swiper-button-prev,.recent .swiper-container-rtl .swiper-button-next { left:0px; } .recent .swiper-button-next,.recent .swiper-container-rtl .swiper-button-prev { right: 0px;} } /* 四大保證 guarantee */ .guarantee .hover-wall{display: block;} .guarantee .hover-wall .htpro_tit,.guarantee .hover-wall .htpro_tit h2{ margin: 0; } .guarantee .hover-wall .icon_info{ box-shadow:none;} .guarantee .hover-wall .icon_info a,.guarantee .hover-wall .icon_info a:hover {cursor: default; } .guarantee .hover-wall .icon_info:hover { bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow:none; } .guarantee .hover-wall .icon_info figure { width: 118px; height: 118px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #e8e8e8; } .guarantee .hover-wall figure .b_img { width: 73px; height: auto; aspect-ratio: 5 / 4.9; object-position: center center; object-fit: cover; max-height: 68px; transition: 0.5s;} .guarantee .hover-wall .icon_info:hover figure .b_img { -webkot-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .guarantee .hover-wall figure .overlay{ display: none;} .guarantee .hover-wall .icon_info h3{ font-size: 20px; margin-top: 18px; margin-bottom: 13px;} .guarantee .hover-wall .icon_info p.animate-text { font-size: 14px; width: 200px; margin: 0 auto; padding: 0; line-height: 22px; text-align: justify; } /* 熱門主題 hot */ .hot .wall-wrapper .theme_info{top:0; background: rgb(6 8 43 / 0%) !important; } .hot .wall-wrapper .thicon_info:hover .theme_info { background: rgb(6 8 43 / 60%) !important; } .hot .wall-wrapper .thicon_info figure{ background: #06082b; } .hot .wall-wrapper .thicon_info figure .b_img{ opacity: 0.8; aspect-ratio: 5 / 3.318; object-position: center center; object-fit: cover; height: auto;} .hot .wall-wrapper .thicon_info:hover figure .b_img { -webkot-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .hot .wall-wrapper .wall-row>div{ padding: 5px !important;} .hot .wall-wrapper .thicon_info h3{ font-size: 22px; letter-spacing: 1px; bottom: 45px; left: 50%; width: 50%; text-align: center; transform: translate(-50%, 0); text-shadow: none; border: 1px solid rgb(255 255 255 / 40%); border-radius: 2px; margin-bottom: 0; padding: 10px 0px; } .hot .wall-wrapper .thicon_info:hover h3{ bottom:40%; } @media (max-width:991px) { .hot .wall-wrapper .thicon_info h3{ width: 60%;} } @media (max-width:767px) { .hot .wall-wrapper .thicon_info h3{ width: 70%;} } @media (max-width:991px){ .hot .wall-wrapper .wall-row>div{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;} .hot .wall-wrapper .wall-row>div:first-child { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media (max-width:575px) { .hot .wall-wrapper .thicon_info h3 { width: 100%; border: 0; background: rgb(32 33 38 / 60%); bottom: 0; font-size: 16px; padding: 7px 5px 7px 20px; text-align: left; } .hot .wall-wrapper .thicon_info h3::before{ content: ""; background-color: #e74191; position: absolute; height: 16px; width: 2px; top: 9px; left: 10px;} } /* 提供優質服務 main-service*/ .main-service .indexservice { padding: 0 15px; } .main-service>.module-container>.main{padding-bottom: 70px;} .main-service>.module-container>.main::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00145F; opacity: .7; } .sunshine-title.main-service>.module-container>.main>.header-title{ color:#ffffff;} .main-service .counterbox { display: flex; flex-wrap: wrap; align-items: flex-start; } .main-service .counterbox__itembox { display: flex; flex-wrap: wrap; align-items: flex-start; flex: 1;} .main-service .counterbox__item { width: 33.3333%; } .main-service .counterbox__counter { color: #fff; font-family: 'Raleway', sans-serif !important; font-size: 60px; font-weight: 200; font-style: italic; line-height: 1; margin: 0; } .main-service .counterbox__counter::after { content: ''; display: block; width: 60px; height: 4px; background-color: #e74191; margin: 25px 0; } .main-service .counterbox__title { color: #fff; font-size: 20px; line-height: 1; margin: 0; font-weight: 600; } .main-service .counterbox__sbubtitle { color: #fff; font-size: 16px; font-weight: 200; font-style: italic; line-height: 1; margin: 12px 0 0; } .main-service .counterbox__ratingbox { width:400px; margin-left: 110px; } .main-service .counterbox__ratingrow:nth-child(n + 2) { margin-top: 20px; } .main-service .counterbox__ratingrow-title { color: #fff; font-size: 16px; letter-spacing: .1em; line-height: 1; margin-bottom: 6px; } .main-service .counterbox__bar { width: 100%; height: 4px; background-color: rgba(255,255,255,.4); } .main-service .counterbox__animationbar { position: relative; width: 0%; height: 4px; overflow: visible!important; } .main-service .counterbox__animationbar-text { position: absolute; right: 0; bottom: calc(100% + 8px); color: #fff; font-size: 16px; font-weight: 300; line-height: 1; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); transform: translateX(50%); } .main-service .counterbox__animationbar-text::after { content: '%';} @media (max-width: 991px){ .main-service .indexservice { padding: 0; max-width: 80%; margin: 0 auto; } .counterbox__ratingbox { display: none;} } /* 活動訊息 main-event */ .main-event .module_carousel{ padding-bottom: 0; background: rgba(255, 255, 255, 0.7);} .main-event .country_tab{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .main-event .country_tab .module_box_title ul li { padding: 1em; border-bottom: 1px solid #d1d2e6; } .main-event .country_tab .module_box_title ul li:hover { border-bottom: 1px solid #e74191; } .main-event .country_tab .tab_container,.main-event .country_tab .module_box_title{ width:50%; padding: 15px;} .main-event .country_tab .module_box_title ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-flow: column; margin: 0; justify-content: center; height: 100%; } .main-event .country_tab .module_box_title ul li a span{ margin-right: 8px; padding: 4px 15px; border-radius: 25px; background: #ffffff; border: 1px solid #e74191; color:#e74191;} .main-event .country_tab .module_box_title ul li a span::after{ border: 0;} .main-event .country_tab .module_box_title ul li a p{ color:#06082b; line-height: 24px; font-size: 18px; font-weight: 600;} .main-event .country_tab .module_box_title ul li:hover a p{ color:#e74191;} .main-event .tab_content img { aspect-ratio: 5 / 3.2186; object-position: center center; object-fit: cover; } @media screen and (max-width:1499px){ .main-event .country_tab .tab_container { width: 45%;} .main-event .country_tab .module_box_title { width: 55%; padding: 20px 0} .main-event .country_tab .module_box_title ul li { padding: 0.7em; } } @media screen and (max-width:991px){ .main-event .widget-item {padding: 0 40px;} .main-event .country_tab{ flex-flow: column;} .main-event .country_tab .tab_container,.main-event .country_tab .module_box_title{ width: 100%; } .main-event .country_tab .module_box_title { padding-top: 0px; } .main-event .country_tab .module_box_title ul li{ padding: 15px; } .main-event .country_tab .module_box_title ul li a p{ font-size: 16px;} } @media screen and (max-width:575px){ .main-event .country_tab .module_box_title ul li a p{ display: block;} .main-event .country_tab .module_box_title ul li a span{ margin-bottom: 10px; } } /* 旅客分享 main-read */ .main-read .swiper-container { padding: 0 100px; } .main-read .swiper-slide-style{ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 0; margin-bottom: 12px; padding: 27px 32px 27px; box-shadow: 0 0 black; border: 1px solid #dddddd; border-radius: 0;} .main-read .swiper-slide-style::before { content: ""; border: 1px solid #dddddd; position: absolute; left: 50%; transform: translate(-50%, 0); top: 4px; width: calc(100% - 8px); height: calc(100% - 8px); } .main-read .swiper-slide-style::after { content: ""; border: 1px solid #dddddd; position: absolute; background: #f8f8f8; left: -6px; top: 8px; left: 50%; transform: translate(-50%, 0); width: 99%; height: 100%; z-index: -2; } .main-read .swiper-slide .swiper-img{-ms-flex: 0 0 710px; flex: 0 0 710px; max-width: 710px; height: 422px; } .main-read .swiper-slide .swiper-img img{ width: 100%; height: auto; border-radius: 0; aspect-ratio: 5 / 3.5; object-fit: cover; object-position: center center;} .main-read .swiper-slide .swiper-title { position: absolute; right: 15%; top: 40px; transform: translate(-15%, 0); border: 1px solid #c79f62; margin: 0; padding: 10px 24px; color: #c79f62; } .main-read .swiper-slide .swiper-content { position: absolute; background: #ffffff; width: 612px; height: 274px; box-shadow: 0px 0px 10px rgb(0 0 0 / 20%); right: 40px; bottom: 80px; margin: 0; padding: 32px 24px; } .main-read .swiper-button-prev.swiper-button-white,.main-read .swiper-button-next.swiper-button-white{ width: 40px; height: 40px; background: #282828; border-radius: 50%; opacity: 0.6;} .main-read .swiper-button-prev.swiper-button-white:hover,.main-read .swiper-button-next.swiper-button-white:hover{ opacity: 0.4;} .main-read [class*='swiper-button-']:after { font-size: 16px; font-weight: 600; background: transparent; padding: 5px 12px 5px 12px;} .main-read .swiper-button-prev,.main-read .swiper-container-rtl .swiper-button-next { left:0px; } .main-read .swiper-button-next,.main-read .swiper-container-rtl .swiper-button-prev { right: 0px;} .main-read .swiper-pagination { text-align: right; position: absolute; right: 140px; bottom: 40px; } .main-read .swiper-pagination-bullet { width: 10px; height: 10px; line-height: 10px; background: #cccccc; } .main-read .swiper-pagination-bullet-active { background: #ffffff; box-shadow: 0 0 5px rgb(0 0 0 / 20%); border: 2px solid #06082b; } .main-read .swiper-content {-webkit-line-clamp: initial;} .main-read .swiper-content h3{ position: relative; font-size: 20px; color:#06082b; font-weight: 600; letter-spacing: 0; padding-left: 32px; border-left: 3px solid #e74191;} .main-read .swiper-content h3::before{ content: ""; position: absolute; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/1b6cd247-bb4d-4f9a-b5a4-9a4f748690a5.svg"); background-repeat: no-repeat; background-position: center; left: 10px; top: 3px; width: 20px; height: 20px;} .main-read .swiper-content h4{ font-size: 16px; color: #777777; font-weight: 600; letter-spacing: 0; margin-bottom: 0; padding-left: 10px; padding-bottom: 10px; border-left: 3px solid #e74191; } .main-read .swiper-content article{ height: 120px;display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; } .main-read .swiper-content p { font-size: 13px; color: #06082b; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: normal; text-align: justify; } .main-read .swiper-content button { right: 24px; bottom: 32px; position: absolute; background: #c79f62; color: #ffffff; font-size: 15px; border: 1px solid #c79f62; padding: 2px 6px; } .main-read .swiper-content button:hover{ opacity: 0.7;} .main-read-btn div.link-list { background: transparent; position: absolute; text-align: center;z-index: 1; top: -30px; left: 50%; transform: translate(-50%, 0);} .main-read-btn div.link-list ul li a,.main-read-btn div.link-list ul li span { background: #e74191; width: 197px; height: 42px; padding: 7px;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .main-read-btn div.link-list ul li a:hover{ background: rgb(203 59 128); } .web-page-frame .widget-item.main-read-btn > .module-container > .main{ margin-bottom: 54px;} @media screen and (max-width:1499px){ .main-read .swiper-slide .swiper-title { right: 20px; } } @media screen and (max-width:1300px){ .main-read .swiper-slide .swiper-content,.main-read .swiper-slide .swiper-title{ position: relative;} .main-read .swiper-slide .swiper-img { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; height: auto; order: 2; margin: 0;} .main-read .swiper-slide-style { align-items: flex-start; justify-content: center; } .main-read .swiper-slide .swiper-title { right: 0; transform: translate(0, 0); top: initial; order: 1; margin-bottom: 16px;} .main-read .swiper-slide .swiper-content{ right: inherit; bottom: inherit; width: 100%; order: 3;} .main-read .swiper-pagination { position: relative; text-align: center; margin-top: 20px; right: inherit; bottom: inherit;} .web-page-frame .widget-item.main-read-btn > .module-container > .main{ margin-bottom: 60px;} .main-read-btn div.link-list{ top:30px} } @media screen and (max-width:1023px){ .main-read .swiper-container { padding: 0 50px;} } @media screen and (max-width:767px){ .main-read .swiper-slide-style{border:0; padding: 0;} .main-read .swiper-slide .swiper-title{ font-size: 22px; font-weight: 600; width: 100%;} .main-read .swiper-slide .swiper-content{ height: 300px;} .main-read .swiper-slide-style::before,.main-read .swiper-slide-style::after{ display: none;} } @media screen and (max-width:575px){ .main-read-btn div.link-list ul li a{ font-size:16px !important;} } /* footer 下標 */ .footer_bg>.module-container>.main::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #06082B; opacity: .7; } .sunshine_footer .footer-wrap,.sunshine_footer .footer-wrap .footer_center{ background: transparent; } .sunshine_footer .footer-sample .fnav_wrap,.sunshine_footer .footer-sample .footer_center .company-info,.sunshine_footer .footer-sample .footer_center .fb-info{display: none;} .sunshine_footer .footer-wrap .contact-info{ -ms-flex: 0 0 100%; flex: 0 0 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 1530px; margin: 0 auto; margin-top: 0 !important; padding: 70px 0;} .sunshine_footer .footer-wrap .contact-box:not(:last-child) { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width:20%; padding-right: 40px;} .sunshine_footer .footer-wrap .icon_wrap{ padding: 25px 15px;} .sunshine_footer .footer-wrap .icon_wrap p{ opacity: 0.5; font-size: 14px;} .sunshine_footer .footer-wrap .contact-box h2 { margin-bottom: 15px; font-size: 24px; font-weight: bold; letter-spacing: 0.1em; color: #FFF; line-height: 1.5em; } .sunshine_footer .footer-wrap .contact-box h4 { font-size: 16px; line-height: 1.1em; color: #FFF; margin-top: 18px; margin-bottom: 0;padding-left: 10px; -webkit-transition: margin .4S ease, opacity .4S ease; -moz-transition: margin .4S ease, opacity .4S ease; transition: margin .4S ease, opacity .4S ease; } .sunshine_footer .footer-wrap .contact-box:not(:last-child) h4{ opacity: .5;} .sunshine_footer .footer-wrap .contact-box:not(:last-child) h4:hover{ margin-left: 10px; opacity: 1;} .sunshine_footer .footer-wrap .contact-box h4 i { font-size: 13px; margin-right: 5px; padding: 0; top: 2px;} .sunshine_footer .footer-wrap .contact-box:nth-child(3)>a { width: calc(50% - 2px); display: inline-block; padding-bottom: 15px;} .sunshine_footer .footer-wrap .contact-box:nth-child(3)>a:hover h4{ text-shadow: 0px 0px 5px rgb(255 255 255 / 70%);} .sunshine_footer .footer-wrap .contact-box:nth-child(3)>a:hover h4 i { text-shadow: 0 0 black;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(5),.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(9), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(13){width: calc(50% - 2px); display:inline-block;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(6),.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(7), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(10),.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(11), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(14),.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(15){ display: inline-block; width: auto;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(4),.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(8),.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(12){ border-top: rgba(255,255,255,.5) 1px solid; padding-top: 15px;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(7),.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(11),.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(15){ padding-left: 20px; } .sunshine_footer .footer-wrap .contact-box:nth-child(3) p a { color: #ffffff; border-top:0; border-bottom:0; font-size: 14px; opacity: 0.5; line-height: 24px; margin-bottom: 10px; padding:0;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(4) a,.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(8) a,.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(12) a{ font-size: 16px; opacity: 1; padding-left: 20px;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p a::after{ display: none;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p a:hover { background: transparent; opacity: 1; text-shadow: 0px 0px 5px rgb(255 255 255 / 70%);} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(7) a,.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(11) a,.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(15) a{ cursor: default; } .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(7) a:hover,.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(11) a:hover,.sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(15) a:hover{ opacity: 0.5; text-shadow: 0px 0px 5px rgb(255 255 255 / 0%); } .sunshine_footer .footer-wrap .contact-box:nth-child(3) h4{padding-left: 20px;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) h4 i{ font-size: 18px; width: 18px; height: 16px;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p a i { font-size: 18px; top: 4px; margin: 0;} @media screen and (max-width:991px){ .sunshine_footer .footer-wrap .contact-info{ padding: 30px 0 0;} .sunshine_footer .footer-wrap .contact-box h2 { margin-bottom: 0;} .sunshine_footer .footer-wrap .contact-box>a { display: inline-block; } .sunshine_footer .footer-wrap .contact-box:not(:last-child) { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(5), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(9), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(13) { width: 100%; margin: 0; } .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(6), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(7), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(10), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(11), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(14), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(15) { width: calc(50% - 2px); margin: 0; } } @media screen and (max-width:767px){ .sunshine_footer .footer-wrap .footer_center{ padding-bottom: 0;} .sunshine_footer .footer-wrap .contact-box:nth-child(3)>a{ width: 100%;} .sunshine_footer .footer-wrap .contact-box:nth-child(3)>a:nth-child(3) h4{ margin-top: 0;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p a{ line-height: 20px;} .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(4) a, .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(8) a, .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(12) a{ line-height: 24px;} } @media screen and (max-width:575px){ .sunshine_footer .footer-wrap .footer_center{padding-right: 15px; padding-left: 15px;} .sunshine_footer .footer-wrap .contact-info>div:not(:last-child){ display: none;} .sunshine_footer .footer-wrap .contact-box { margin-bottom: 0 !important; } .sunshine_footer .footer-wrap .contact-box:nth-child(3) p a { margin-bottom: 0px; } .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(6), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(7), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(10), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(11), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(14), .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(15){ width: 100%; margin: 0; padding-left: 0; } .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(4) a, .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(8) a, .sunshine_footer .footer-wrap .contact-box:nth-child(3) p:nth-child(12) a{ margin-bottom: 10px;} } /* gotop 回頂部 */ .sunshine_gotop .actGotop{bottom: 40px; right: 5px; width: 40px; height: 40px; z-index: 1048 !important;} .sunshine_gotop .actGotop a,.sunshine_gotop .actGotop a:link{ background: rgb(6 8 43 / 50%); width: 40px; height: 40px; border-radius: 5px;} .sunshine_gotop a:link { width: 40px; height: 40px;} .sunshine_gotop .actGotop a{font-size: 0;} .sunshine_gotop .actGotop a::before { content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/bdbf7fa4-43e4-41fd-bd98-7b5e4ad6a983.svg); background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%);-webkit-filter: brightness(5); filter: brightness(5); } .sunshine_gotop .actGotop a:hover{ background: #e74191; } .sunshine_gotop .actGotop a i{ display: none;} @media screen and (max-width:767px){ .sunshine_gotop .actGotop { bottom: 120px;} } /* side-nav 側選單 */ .side-nav .bottom-bar{flex-flow: column; width: 46px; right: 0; left: inherit; top: 50%; bottom: initial; transform: translateY(-50%); z-index: 99; background: transparent !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .side-nav .bottom-bar:hover{ width: 70px;} .side-nav .bottom-bar .btm-btn{ padding: 40px 0; background-position: center; } .side-nav .bottom-bar .btm-btn:nth-child(6){background-position: 1px !important;} .side-nav .bottom-bar .btm-btn:nth-child(7){background-color: #3b5998 !important; } .side-nav .bottom-bar .btm-btn:nth-child(8){background-color: #ffffff !important;} .side-nav .bottom-bar .btm-btn:nth-child(9){background-color: #00c500 !important;} .side-nav .bottom-bar .btm-btn:nth-child(11){background-color: #e74191 !important;} .side-nav .bottom-bar .open-box{ bottom: inherit; top: 50%; right: 70px; width: 72px; background: #ffffff; padding: 0; } .side-nav .bottom-bar .open-box .open-box-row{ flex-flow: column;} .side-nav .bottom-bar .close-line {background: transparent;} .side-nav .bottom-bar .open-box .open-box-item span { margin-top: 7px; font-size: 20px; font-weight: 600;} .side-nav .bottom-bar .open-box .open-box-item:not(:first-child){border-top: 1px solid #ddd;} .side-nav .bottom-bar .open-box i::before{ position: absolute;font-size: 0; width: 20px; height: 20px; top: 8px; left: 50%; transform: translate(-50%, 0); opacity: 0.4; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/a521cfc8-7969-4bb7-bdc8-fb402a2d10f1.svg"); background-repeat: no-repeat; background-position: center;} /*公版-展開式側選單*/ .side_button_nav .btn_collapzion{z-index: 1048 !important;} .side_button_nav .line-menu { width: 60px; height: 100px; right: 0px; display: flex; justify-content: center; flex-flow: column; position: absolute; color: rgb(255, 255, 255); background-color: #ffffff; top: 50%; transform: translate(0px, -50%);filter: drop-shadow(0 0 3px rgba(0,0,0,.15));} .side_button_nav .line-menu::before{ content: ''; position: absolute; top: 50%; left: 100%; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 12px; border-color: transparent transparent transparent #fff; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%);} .side_button_nav .line-menu>a { display: block; color: #333333; text-decoration: none; text-align: center; padding: 5px 0; text-align: center; font-weight: 600;} .side_button_nav .line-menu>a:hover{ opacity: 0.8;} .side_button_nav a._collapz_parant._close,.side_button_nav a._collapz_parant._open{ position: relative; background-color: #06082B;} .side_button_nav a._collapz_parant._close:after,.side_button_nav a._collapz_parant._open:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; color: #fff; width: 25px; height:25px; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/e39ac32e-de23-411a-bf1d-7700a19a7bdd.svg); } .side_button_nav a._collapz_parant { color: #fff; background:#06082B; opacity: 1; width: 40px; height: 40px; border-radius: 5px; display: inline-block; text-decoration: none; float: right;; margin-right: 5px; } .side_button_nav a._collapz_parant:hover{ opacity: 0.8;} .side_button_nav ul._child_collapzion { position: absolute; margin: 0; list-style: none; padding-right: 5px; top: 0; right: 0; width: 100%; overflow: auto; z-index: 10; -webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; transition: transform .3s ease-in-out; } .side_button_nav ul._child_collapzion li.line-btn .line-menu{ display: none; } .side_button_nav ul._child_collapzion li.line-btn:hover .line-menu{ display: flex; } .side_button_nav ul._child_collapzion li a._collapz_child { color: #fff; width: 40px; height: 40px; border-radius: 5px; display: inline-block; margin-bottom: 5px; text-align: center; opacity: 1;-webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; transition: transform .3s ease-in-out;} .side_button_nav ul._child_collapzion li a._collapz_child.bg-fb{background-color: #3b5998; } .side_button_nav ul._child_collapzion li a._collapz_child.bg-ig{background-color: #ffffff; } .side_button_nav ul._child_collapzion li a._collapz_child.bg-line{background-color: #00c500; } .side_button_nav ul._child_collapzion li a._collapz_child.bg-email{background-color: #e74191; } .side_button_nav ul._child_collapzion li a._collapz_child:hover{ opacity: 0.8;} .side_button_nav ul._child_collapzion li a._collapz_child img { width: 25px; height: 25px; margin: 8px auto; } .side_button_nav ul._child_collapzion li { text-align: right; position: relative; } .side_button_nav ul._child_collapzion li span._title { position: absolute; right: 50px; top: 0; padding: 3px; top: 50%; transform: translate(0, -50%); z-index: 1;} .side_button_nav ._col_shadow { box-shadow: 0 0 5px 0 rgb(0 0 0 / 14%); } /* 主題頁 theme */ .theme-width{ max-width: 1330px; -ms-flex: 0 0 100%; flex: 0 0 100%; } .theme-block .img-mode .img-box{ text-align: center;} .theme-width h2{ font-size: 20px; font-weight: 600;} /* 舊版主圖 */ .theme-banner .bgfixed{ height: 60vh;} .theme-banner .banner-photo a { content: ""; display: block; width: 100%; height: 100%; left: 0; top: 0; z-index: 0; background-color: rgba(0,0,0,0.3); } .theme-banner .banner-photo section { display: flex; justify-content: center; align-items: center; flex-flow: column; height: 100%;padding: 0 10px;} .theme-banner .banner-photo section p{ font-size: 24px; margin-bottom: 30px;} .theme-banner .banner-photo section h2{ font-size: 46px; font-weight: 300; letter-spacing: 0.1em; display: flex; align-items: center; margin-bottom: 35px;} .theme-banner .banner-photo section button { position: relative; font-size: 18px; border: 1px solid rgb(255 255 255 / 30%); background: transparent; color: #ffffff; padding: 10px 37px 10px 55px; border-radius: 2px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; outline: none;} .theme-banner .banner-photo section button:hover{ background-color: rgb(255 255 255 / 30%);} .theme-banner .banner-photo section button::before{ content:""; position: absolute; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/e5bfa9a0-8ef6-4be2-89dc-0cee28baf937.svg"); background-position: center; background-repeat: no-repeat; width: 16px; height: 16px; left: 35px; top: 15px;} .theme-banner .banner-photo section .divider{ width:1px; height: 46px; background: #ffffff; margin: 0 15px 0 10px;} /* 新版主圖(Bootstrap原生輪播) */ .theme-banner .banner-img{z-index: 0; margin-top: -100px;} .theme-banner .banner-img .carousel-caption { width: 100%; right: initial; bottom: initial; left: 50%; top: 50%; transform: translate(-50%, -50%); } .theme-banner .banner-img section{ display: flex; justify-content: center; align-items: center; flex-flow: column; height: 100%;padding: 0 10px;} .theme-banner .banner-img section .divider{ width:1px; height: 46px; background: #ffffff; margin: 0 15px 0 10px;} .theme-banner .banner-img .carousel-control-next,.theme-banner .banner-img .carousel-control-prev,.theme-banner .banner-img .carousel-indicators{ display:none;} .theme-banner .banner-img section section h2{ letter-spacing: 0.1em; display: flex; align-items: center; } .theme-banner .banner-img .bs-carousel .carousel-item section p{ text-shadow: none;} .theme-banner .banner-text{ height: 100px; } .theme-nav div.link-list{ min-height: 76px; position: absolute; bottom: 0; width: 100%; display: flex; justify-content: center; align-items: center; background: rgb(17 54 93 / 40%); } .theme-nav div.link-list>ul { padding: 0; width: 1300px; height: 76px; display: flex;} .theme-nav div.link-list>ul li { width: 100%; border-left: 1px solid rgb(236 236 236 / 30%);} .theme-nav div.link-list>ul li:last-child{ border-right: 1px solid rgb(236 236 236 / 30%) } .theme-nav div.link-list>ul li a{ display: flex; padding: 10px; width: 100%; height: 100%; justify-content: center; align-items: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .theme-nav div.link-list>ul li a:hover{ opacity: 0.7; } .theme-nav div.link-list ul li i{ margin-right: 0;} .theme-title .header-title { position: relative;font-size: 32px; color: #11375c; display: table; margin: 40px auto; font-weight: 600; letter-spacing: 0.05em; } .theme-title .header-title::before{ content: ""; position: absolute; left: 50%; bottom: -10px; transform: translate(-50%,0); width:32px; height:9px; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/0e22cfae-e6d5-4825-b966-f323a0e0a2ec.png"); background-repeat: no-repeat; background-position: center;} .theme-nav .link-list.scroll-to-fixed-fixed{ height: 56px; min-height: 56px; background: rgb(17 54 93 / 80%);} .theme-nav div.link-list.scroll-to-fixed-fixed>ul{height: 56px;} .theme-nav div.link-list.scroll-to-fixed-fixed>ul li a{ font-size: 20px !important;} @media screen and (max-width:991px){ .theme-nav .link-list.scroll-to-fixed-fixed{ top: 168px !important;} } @media screen and (max-width:767px){ /* 舊版主圖 */ .theme-banner .banner-photo section{ padding: 0 20px; } .theme-banner .banner-photo section h1{ font-size: 24px;} .theme-banner .banner-photo section p { font-size: 20px; margin-bottom: 16px; } .theme-banner .banner-photo section h2{ font-size: 32px; margin-bottom: 16px; letter-spacing: 0em;} .theme-banner .banner-photo section .divider{ height: 32px;} .theme-banner .banner-photo section button{ padding: 5px 30px 5px 45px; font-size: 16px;} .theme-banner .banner-photo section button::before{ width: 15px; height: 15px; left: 28px; top: 9px; } /* 新版主圖(Bootstrap原生輪播) */ .theme-banner .banner-img .carousel-caption { display: block !important; transform: translate(-50%,-20%); top: 20%; } .theme-banner .banner-img .bs-carousel .carousel-item section h1{ font-size: 24px} .theme-nav div.link-list>ul li a{ font-size: 20px !important;} .theme-nav .link-list.scroll-to-fixed-fixed{ top: 54px !important;} } @media screen and (max-width:575px){ .theme-banner .banner-photo section{ padding: 0 30px; } .theme-banner .banner-photo section h2{ font-size: 28px; } .theme-nav div.link-list { min-height: 50px;} .theme-nav .link-list.scroll-to-fixed-fixed { height: 50px; min-height: 50px; background: rgb(17 54 93 / 100%); } .theme-nav div.link-list>ul,.theme-nav div.link-list.scroll-to-fixed-fixed>ul{ height: 50px; } .theme-nav div.link-list>ul li a,.theme-nav div.link-list.scroll-to-fixed-fixed>ul li a{ font-size: 16px !important; padding: 10px 5px 10px 10px; } .theme-title .header-title{font-size: 24px; margin: 40px auto; } } @media screen and (max-width:440px){ .theme-nav div.link-list>ul,.theme-nav div.link-list.scroll-to-fixed-fixed>ul{ display: block; overflow: scroll; white-space: nowrap;} .theme-nav div.link-list>ul li{ width: auto;} .theme-nav div.link-list>ul li:first-child { padding-left: 20px; position: relative;} .theme-nav div.link-list>ul li:last-child { padding-right: 24px; position: relative;} .theme-nav div.link-list>ul li:first-child::before,.theme-nav div.link-list>ul li:last-child::after{ content: ""; position: absolute; width: 20px; height: 20px; top: 15px; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/323643c0-ad89-4957-aa2d-bea0a1d0cc83.svg); background-repeat: no-repeat; background-position: center; opacity: 0.8; } .theme-nav div.link-list>ul li:first-child::before { left: 5px;} .theme-nav div.link-list>ul li:last-child::after{ right: 5px; } } /* 左圖右文 */ .block-1p1w .mix-wrapper{ padding: 15px 25px;} .block-1p1w .editor-content { padding: 0 25px; display: flex; flex-flow: column; justify-content: center; } .block-1p1w h2{ font-size: 22px; font-weight: 600; color:#005a3e; line-height: 1.5em; } .block-1p1w p{ font-size: 18px; line-height: 30px; color:#000000;} @media screen and (max-width:767px){ .block-1p1w .mix-wrapper{ padding-top: 0; padding-bottom: 0;} .block-1p1w .pic-content,.block-1p1w .editor-content{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} .block-1p1w .editor-content { padding: 0 15px;} } @media screen and (max-width:575px){ .block-1p1w h2{ font-size: 20px; margin-bottom: 15px;} .block-1p1w p{ font-size: 17px; line-height: 28px; } } /* 雙上圖下文 */ .block-2tpbw .mix-wrapper{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding: 15px 25px;} .block-2tpbw .mix-wrapper>div{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 574px; margin: 0; } .block-2tpbw .editor-content, .block-2tpbw .pic-content{ padding: 0; } .block-2tpbw h2{ font-size: 22px; font-weight: 600;line-height: 1.5em;} .block-2tpbw p{ font-size: 18px; line-height: 30px;} @media screen and (max-width:1200px){ .block-2tpbw .mix-wrapper>div { padding: 0; } .block-2tpbw .mix-wrapper>div:first-child { padding-right: 20px; } .block-2tpbw .mix-wrapper>div:last-child { padding-left: 20px; } } @media screen and (max-width:575px){ .block-2tpbw .mix-wrapper{ padding-top: 0; padding-bottom: 0;} .block-2tpbw .mix-wrapper>div{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .block-2tpbw h2{ font-size: 20px; margin-bottom: 15px;} .block-2tpbw p{ font-size: 17px; line-height: 28px; } .block-2tpbw .mix-wrapper>div:first-child { padding-right: 0px; } .block-2tpbw .mix-wrapper>div:last-child { padding-left: 0px; } } /* 雙上圖下文-圖文交錯 */ .block-2tpbw-2 .mix-wrapper{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; padding: 15px 25px;} .block-2tpbw-2 .mix-wrapper>div{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 574px; margin: 0; } .block-2tpbw-2 .editor-content,.block-2tpbw-2 .pic-content { padding: 0; } .block-2tpbw-2 h2{ font-size: 22px; font-weight: 600; line-height: 1.5em;} .block-2tpbw-2 p{ font-size: 18px; line-height: 30px;} @media screen and (max-width:1200px){ .block-2tpbw-2 .mix-wrapper>div { padding: 0; } .block-2tpbw-2 .mix-wrapper>div:first-child { padding-right: 20px; } .block-2tpbw-2 .mix-wrapper>div:last-child { padding-left: 20px; } } @media screen and (max-width:575px){ .block-2tpbw-2 .mix-wrapper{ padding-top: 0; padding-bottom: 0;} .block-2tpbw-2 .mix-wrapper>div{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .block-2tpbw-2 h2{ font-size: 20px; } .block-2tpbw-2 p{ font-size: 17px; line-height: 28px; } .block-2tpbw-2 .mix-wrapper>div:first-child { padding-right: 0px; } .block-2tpbw-2 .mix-wrapper>div:last-child { padding-left: 0px; } } /* 1張圖*/ .web-page-frame .widget-item.block-1p{ padding: 0 25px; } .web-page-frame .widget-item.block-1p > .module-container > .main { text-align: center; padding: 0 15px; } /* 3塊上圖下文-正方形圖文交錯 */ .block-3tpbw .mix-wrapper{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding: 15px 25px;} .block-3tpbw .mix-wrapper>div{-ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; align-items: center; max-width: 340px; margin: 0; } .block-3tpbw .editor-content,.block-3tpbw .pic-content { padding: 0; } .block-3tpbw h2{ font-size: 22px; font-weight: 600; line-height: 1.5em;} .block-3tpbw p{ font-size: 18px; line-height: 30px;} @media screen and (max-width:1200px){ .block-3tpbw .mix-wrapper>div { padding: 0 20px; } .block-3tpbw .mix-wrapper>div:first-child { padding-left: 15px; } .block-3tpbw .mix-wrapper>div:last-child { padding-right: 15px; } } @media screen and (max-width:991px){ .block-3tpbw .mix-wrapper>div { max-width: 300px; } } @media screen and (max-width:767px){ .block-3tpbw .mix-wrapper>div { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .block-3tpbw .pic-content { flex-grow: 0; max-width: 300px; min-width: 300px; } .block-3tpbw .mix-wrapper>div { padding: 0px; } .block-3tpbw .mix-wrapper>div:first-child { padding-left: 0px; } .block-3tpbw .mix-wrapper>div:last-child { padding-right: 0px; } } @media screen and (max-width:767px) and (min-width:576px){ .block-3tpbw .editor-content { padding-left: 20px; } .block-3tpbw .mix-wrapper>div:first-child .editor-content, .block-3tpbw .mix-wrapper>div:last-child .editor-content{ -ms-flex-order: -1; order: -1; padding-left: 0; padding-right: 20px;} } @media screen and (max-width:575px){ .block-3tpbw .pic-content { flex-grow: 1; max-width: 100%; min-width: 100%;} .block-3tpbw h2{ font-size: 20px;} .block-3tpbw p{ font-size: 17px; line-height: 28px; } } /* 圓形2圖文 */ .block-r2pw .mix-wrapper{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; padding: 15px 25px;} .block-r2pw .mix-wrapper>div{-ms-flex: 0 0 50%; flex: 0 0 50%;margin: 0; max-width:600px; align-items: center;} .block-r2pw .editor-content,.block-r2pw .pic-content { padding: 0; } .block-r2pw .pic-content { flex-grow: 0; max-width: 270px; min-width: 270px; } .block-r2pw .editor-content {padding-right: 30px; padding-left: 20px; } .block-r2pw .pic-content img{ width: 260px; border-radius: 50%; } .block-r2pw h2{ font-size: 22px; font-weight: 600; line-height: 1.5em;} .block-r2pw p{ font-size: 18px; line-height: 30px;} @media screen and (max-width:1200px){ .block-r2pw .mix-wrapper>div { padding: 0 20px; } .block-r2pw .mix-wrapper>div:first-child { padding-left: 15px; } .block-r2pw .mix-wrapper>div:last-child { padding-right: 15px; } .block-r2pw .pic-content { max-width: 220px; min-width: 220px; } .block-r2pw .pic-content img{ width: 220px;} } @media screen and (max-width:991px){ .block-r2pw .mix-wrapper>div{ flex-flow: column;} .block-r2pw .editor-content { text-align: center; } } @media screen and (max-width:767px){ .block-r2pw .mix-wrapper>div { flex-flow: inherit; } .block-r2pw .pic-content { max-width: 100%; min-width: 100%; } .block-r2pw .editor-content { padding-right: 0; padding-left: 0; } .block-r2pw .img-mode .img-box { padding: 5px; text-align: center; } } @media screen and (max-width:575px){ .block-r2pw .mix-wrapper>div { -ms-flex: 0 0 100%; flex: 0 0 100%; } .block-r2pw .mix-wrapper>div { padding: 0px; } .block-r2pw .mix-wrapper>div:first-child { padding-left: 0; } .block-r2pw .mix-wrapper>div:last-child { padding-right: 0; } .block-r2pw h2{ font-size: 20px;} .block-r2pw p{ font-size: 17px; line-height: 28px; } } /* 3塊上圖下文 */ .block-3tpbw-2 .mix-wrapper{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding: 15px 25px;} .block-3tpbw-2 .mix-wrapper>div{-ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 378px; margin: 0; } .block-3tpbw-2 .editor-content,.block-3tpbw-2 .pic-content { padding: 0; } .block-3tpbw-2 h2{ font-size: 22px; font-weight: 600;line-height: 1.5em;} .block-3tpbw-2 p{ font-size: 18px; line-height: 30px;} @media screen and (max-width:1200px){ .block-3tpbw-2 .mix-wrapper>div { padding: 0 20px; } .block-3tpbw-2 .mix-wrapper>div:first-child { padding-left: 15px; } .block-3tpbw-2 .mix-wrapper>div:last-child { padding-right: 15px; } } @media screen and (max-width:991px){ .block-3tpbw-2 .mix-wrapper>div { padding:0; flex: 0 0 100%; max-width: 100%;} .block-3tpbw-2 .mix-wrapper>div:first-child { padding-left: 0; } .block-3tpbw-2 .mix-wrapper>div:last-child { padding-right: 0; } .block-3tpbw-2 .pic-content { -ms-flex: 0 0 300px; flex: 0 0 300px; max-width: 300px; } .block-3tpbw-2 .editor-content { padding-left: 20px; } } @media screen and (max-width:575px){ .block-3tpbw-2 .pic-content { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .block-3tpbw-2 .editor-content { padding-left: 0; } .block-3tpbw-2 h2{ font-size: 20px; } .block-3tpbw-2 p{ font-size: 17px; line-height: 28px; } } /* 影片 */ .theme-video>.module-container>.main { padding: 15px 25px; } /* 文字壓圖 */ .block-wonp .editor-content{ position: absolute; max-width: 40%; top: 50%; transform: translate(0, -50%); padding: 0 20px;} .block-wonp.left .editor-content{ left: 100px;} .block-wonp.right .editor-content{ right: 100px; } .block-wonp h2{ margin-top: 20px; font-size: 22px; font-weight: 600;line-height: 1.5em;} .block-wonp p{ margin-bottom: 20px; font-size: 18px; line-height: 30px;} @media screen and (max-width:991px){ .block-wonp.left .editor-content{ left: 60px;} .block-wonp.right .editor-content{ right: 60px;} } @media screen and (max-width:767px){ .block-wonp .editor-content { position: relative; max-width: 100%; top: initial; transform: translate(0, 0); padding: 0 15px; } .block-wonp.left .editor-content{ left: initial;} .block-wonp.right .editor-content{ right: initial; } .block-wonp h2{ margin-top: 0; } .block-wonp p{ margin-bottom: 10px;} } @media screen and (max-width: 575px){ .block-wonp .mix-wrapper { padding-top: 0; padding-bottom: 0; } .block-wonp h2{ font-size: 20px; } .block-wonp p { font-size: 17px; line-height: 28px; } } /* 改變主題圖文順序 */ @media screen and (max-width:767px){ .mobile_txtfirst .editor-content{order:1;} .mobile_txtfirst .pic-content{order:2;} } /* 主題頁按鈕 */ .theme-btn .function-row .row-content { justify-content: center; } .theme-btn .function-row li{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} .theme-btn .function-row li a{ padding: 10px 40px; border-radius: 0; opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .theme-btn .function-row li a:hover{ -webkit-filter: saturate(0.5);} .theme-btn .function-row li a h3 { margin-top: 0;} .theme-btn img{ max-width: 16px;} /*主題頁右側下載按鈕*/ .side_download{z-index: 1048 !important; width: 40px; position: fixed; right: 5px; bottom: 90px; text-align: center; display: block;} .side_download a { position: relative; background-color: #e74191; color: #fff; text-decoration: none; opacity: 1; width: 40px; height: auto; border-radius: 5px; display: inline-block; text-decoration: none; margin-right: 0; font-size: 15px; padding-top: 34px; padding-bottom: 8px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .side_download a:hover{ opacity: 0.8;} .side_download a:after { content: ""; position: absolute; left: 50%; top: 10px; transform: translate(-50%, 0); font-style: normal; color: #fff; width: 18px; height: 18px; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/3778b543-b612-45e6-abab-b265e749a5fd.svg); } @media screen and (max-width:767px){ .side_download{ bottom: 170px;} } /* 金質獎專區 */ .golden-award>.module-container>.main{ position: relative; justify-content: center;} .golden-award>.module-container>.main::before { content: ""; position: absolute; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/920237d6-6f09-4538-b303-c8c363fa9789.jpg"); width: 100%; height: 100%; left: 0; top: 0; background-repeat: no-repeat; background-position: left top; background-attachment: scroll; } .golden-route-detial>.module-container>.main::before{content: ""; position: absolute; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/29fea34d-b73b-4422-be94-6f933c2ca8ed.jpg") ; width: 100%; height: 100%; left: 0; bottom: 0; background-repeat: no-repeat; background-position: left bottom; background-attachment: scroll; } .golden-left-banner>.module-container,.golden-left-banner>.module-container>.main, .golden-right-banner>.module-container,.golden-right-banner>.module-container>.main{ height: 100%;} .golden-left-banner>.module-container>.main,.golden-right-banner>.module-container>.main{ display: -ms-flexbox; display: flex; justify-content: center; align-items: center;} .golden-route .hover-wall .icon_info{background: transparent; box-shadow: none;} .web-page-frame .widget-item.golden-route .hover-wall .container-fluid { padding: 0; } .golden-route>.module-container>.main{ border: 4px solid; border-bottom: 0; border-image: linear-gradient(90deg, #E3B54D,#AD7A37) 1; clip-path: inset(0 round 5px 5px 0 0); padding: 20px 30px 0; margin-top: 80px;} .golden-route .hover-wall .htpro_tit{display: none;} .golden-route .hover-wall .icon_info:hover{-webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none;} .golden-route .hover-wall .icon_info>a{ display: -ms-flexbox; display: flex; flex-flow: column; align-items: flex-start;} .golden-route .hover-wall .icon_info>a h3{-ms-flex-order: 2; order: 2;} .golden-route .hover-wall .icon_info>a h4{-ms-flex-order: 1; order: 1;} .golden-route .hover-wall .icon_info>a p{-ms-flex-order: 3; order: 3;} .golden-route .hover-wall .icon_info>a figure{-ms-flex-order: 4; order: 4;} .golden-route .hover-wall .icon_info figure .overlay i{ display: none;} .golden-route .hover-wall .icon_info:hover figure .b_img { -webkot-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .golden-route .hover-wall .icon_info>a h3{ position: relative; font-size: 24px; padding: 0 20px; height: 44px; line-height: 44px; font-weight: 300; margin: 0 auto; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/66f1e807-e4fc-4ba1-89dc-b7b41e9a7bea.png); background-position: center; background-size: 10px; } .golden-route .hover-wall .icon_info>a h3::before,.golden-route .hover-wall .icon_info>a h3::after{ content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/58bb1715-e237-41b0-be00-ae8b3d704f65.png); background-position: center; background-repeat: no-repeat; background-size: 44px; top:0; width:44px; height: 44px;} .golden-route .hover-wall .icon_info>a h3::before{ left:-44px; } .golden-route .hover-wall .icon_info>a h3::after{ right:-44px; -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1);} .golden-route .hover-wall .icon_info>a h4 { position: relative; color: #1F296A; margin: 0 auto; } .golden-route .hover-wall .icon_info>a h4::before,.golden-route .hover-wall .icon_info>a h4::after{ content: ""; position: absolute; bottom: 6px; width: 30px; height:1px; background-color: #1F296A;} .golden-route .hover-wall .icon_info>a h4::before{ left: -4px; } .golden-route .hover-wall .icon_info>a h4::after{ right: -4px;} .golden-route .hover-wall .icon_info p.animate-text { position: relative; margin: 0 auto; font-size: 20px; min-height: 80px; padding: 10px 40px; display: -ms-flexbox; display: flex; align-items: center; } .golden-route .hover-wall .icon_info p.animate-text::before,.golden-route .hover-wall .icon_info p.animate-text::after{ content:""; position: absolute; text-align: center; background: url(https://materials.fillo.com.tw/materials/sunshinetour/images/64601d65-4d34-4c1e-9f61-3474e85a5531.png); background-size: 30px; background-position: center; background-repeat: no-repeat; width: 40px; height: 80px; top: 0;} .golden-route .hover-wall .icon_info p.animate-text::before{ left:0;} .golden-route .hover-wall .icon_info p.animate-text::after{ right:-0; -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1);} .what-is-goldaward>.module-container>.main{ border: 4px solid; border-bottom: 0; border-top: 0; border-image: linear-gradient(90deg, #E3B54D,#AD7A37) 1; padding: 20px 30px 0; } .what-is-goldaward article { max-width: 1000px; margin: 0 auto; } .what-is-goldaward article h3 { position: relative;; color: #1F296A; margin-bottom: 25px; padding-left: 20px; } .what-is-goldaward article h3::before{ content: ""; position: absolute; background-color: #1F296A; width: 7px; height: 35px; left: 0; top:0;} .what-is-goldaward article p{font-size: 20px; line-height: 34px; color: #000000;} .golden-route-detial .detail-banner{ margin-top: 80px; margin-bottom: 35px; padding-bottom: 40px;} .golden-route-detial .detail-banner::after{ content: ""; position: absolute; width: 100%; height: 4px; left:0; bottom: 0;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1f296a+0,1f296a+50,1f296a+100&0+0,1+50,0+100 */ background: -moz-linear-gradient(left, rgba(31,41,106,0) 0%, rgba(31,41,106,1) 50%, rgba(31,41,106,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(31,41,106,0) 0%,rgba(31,41,106,1) 50%,rgba(31,41,106,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(31,41,106,0) 0%,rgba(31,41,106,1) 50%,rgba(31,41,106,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001f296a', endColorstr='#001f296a',GradientType=1 ); /* IE6-9 */ } .golden-route-detial .detail-banner a { text-align: center; display: block; cursor:default;} .route-detial-content .editor-content a{ text-decoration: none;} .route-detial-content .editor-content h3{ font-size: 30px; color:#1F296A;} .route-detial-content .editor-content h4{ font-size: 36px; color:#1F296A; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #1F296A;} .route-detial-content .editor-content p{ font-size: 20px; line-height: 34px; color:#000000; margin-bottom: 0;} .route-detial-content .editor-content img{ max-width: 100%; } .route-detial-content .editor-content img.more-btn{ max-width: 140px; margin-top: 20px; float: right;} .golden-route-detial .customer-feedback { margin-bottom: 55px; } .golden-route-detial .customer-feedback> .module-container > .main{padding: 0 25px; } .golden-route-detial .customer-feedback .header-title { color: #e74191; text-align: right; font-size: 20px; padding: 5px 10px; } .golden-route-detial .customer-feedback + .route-detial-content> .module-container > .main{padding-top: 40px; } .golden-route-detial .customer-feedback + .route-detial-content> .module-container > .main::before{ content: ""; position: absolute; width: 100%; height: 4px; left:0; top:0;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ac8440+0,ac8440+50,ac8440+100&0+1,1+50,0+100 */ background: -moz-linear-gradient(left, rgba(172,132,64,0) 0%, rgba(172,132,64,0) 1%, rgba(172,132,64,1) 50%, rgba(172,132,64,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(172,132,64,0) 0%,rgba(172,132,64,0) 1%,rgba(172,132,64,1) 50%,rgba(172,132,64,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(172,132,64,0) 0%,rgba(172,132,64,0) 1%,rgba(172,132,64,1) 50%,rgba(172,132,64,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ac8440', endColorstr='#00ac8440',GradientType=1 ); /* IE6-9 */ } .golden-route-detial .gold-slogan { margin: 0 auto; padding: 0 25px; } .golden-route-detial .gold-slogan>.module-container>.main{ padding: 0 25px; } .golden-route-detial .gold-slogan img{ max-width: 100%; border: 4px solid; border-image: linear-gradient(90deg, #E3B54D,#AD7A37) 1; clip-path: inset(0 round 5px); padding: 40px; margin-bottom: 60px;} @media (max-width:1600px){ .golden-award.sunshine-width>.module-container>.main,.golden-route-detial.sunshine-width>.module-container>.main{ margin: 0 30px;} .golden-route-detial>.module-container>.main::before{width: calc(100% - 90px); left: 50%; transform: translate(-50%, 0);} } @media (max-width:991px){ .golden-award.sunshine-width>.module-container>.main, .golden-route-detial.sunshine-width>.module-container>.main { margin: 0; } .golden-route-detial>.module-container>.main::before { width: calc(100% - 30px); } .what-is-goldaward article h3 { font-size: 24px; } .what-is-goldaward article h3::before{ height: 30px;} .what-is-goldaward article p { font-size: 16px; line-height: 28px; } .route-detial-content .editor-content h3 { font-size: 24px; } .route-detial-content .editor-content h4 { font-size: 30px; } .route-detial-content .editor-content p { font-size: 16px; line-height: 28px; } } @media (max-width:767px){ .golden-award,.golden-route-detial{ margin: 0; padding: 0; } .golden-award.sunshine-width>.module-container>.main, .golden-route-detial.sunshine-width>.module-container>.main { padding: 0 15px; } .golden-route-detial>.module-container>.main::before { width: calc(100%); } .golden-route-detial .gold-slogan img { padding: 10px; } } @media (max-width:575px){ .golden-route-detial .detail-banner a { padding: 0 15px; } .golden-route>.module-container>.main { border: 2px solid; border-bottom: 0; border-image: linear-gradient(90deg, #E3B54D,#AD7A37) 1; } .what-is-goldaward>.module-container>.main { border: 2px solid; border-bottom: 0; border-top: 0; border-image: linear-gradient(90deg, #E3B54D,#AD7A37) 1; } .golden-route-detial .customer-feedback> .module-container > .main { padding: 0; } .route-detial-content .mix-wrapper { padding: 15px 10px; } .golden-route-detial .gold-slogan { padding: 0 10px; } .golden-route-detial .gold-slogan>.module-container>.main{ padding: 0 10px;} .golden-route-detial .gold-slogan img { border: 2px solid; border-image: linear-gradient(90deg, #E3B54D,#AD7A37) 1;} .route-detial-content .editor-content img.more-btn { max-width: 120px; } .golden-route-detial .customer-feedback .header-title { text-align: left; font-size: 14px; padding: 5px 0; } } /* 國家地理專區 */ .NGJ.sunshine-width>.module-container>.main { margin: 0; } .NGJ-banner .mix-wrapper { padding: 0;} .NGJ-banner .pic-content,.NGJ-banner .editor-content { padding: 0; } .NGJ-banner .pic-content{margin-top: 0;} .NGJ-banner .pic-content::before{ content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/5bb2a5e5-65d5-4752-987f-035f0f624576.png); background-repeat: no-repeat; background-position: center; background-size: 400px; width:400px; height: 400px; right: 100px; top:50%; transform: translate(0,-50%); z-index: 1;} .NGJ-banner .editor-content { text-align: center; } .NGJ-banner .editor-content h1{ position: relative; padding-left: 30px; padding-right: 30px; font-size: 3rem; display: table; margin: 30px auto;} .NGJ-banner .editor-content h1::before,.NGJ-banner .editor-content h1::after{ content: ""; position: absolute; background-color: #000000; width: 5px; height: 40px; top: 50%; transform: translate(0, -50%); } .NGJ-banner .editor-content h1::before { left: 0;} .NGJ-banner .editor-content h1::after { right: 0; } .NGJ-banner .editor-content article.text p { font-size: 1.4rem; color: #545454; margin-bottom: 0; line-height: 2.4rem; } .NGJ-banner .editor-content article.top-slogan { max-width: 600px; margin: 0 auto; border: 5px solid #FCDE02; padding: 20px; } .NGJ-banner .editor-content article.top-slogan p{ margin-bottom: 0; font-size: 1.4em; font-weight: 500; } .NGJ-banner .editor-content article.top-slogan img { margin: 10px; } .NGJ-about .pic-content{ margin-top: 0; padding: 0; } .NGJ-about .mix-wrapper{ display: -ms-flexbox; display: flex; padding: 0; background: #ffdc00;} .NGJ-about .mix-wrapper>.row { -ms-flex: 1; flex:1; margin: 0;} .NGJ-about .mix-wrapper>.row:nth-child(2){ color:#ffffff; } .NGJ-about .mix-wrapper>.row .editor-content h2{ margin-bottom: 1.2rem; } .NGJ-about .mix-wrapper>.row:nth-child(1) .editor-content h2 { display: table; font-size: 1.8rem; padding: 12px; border: 2px solid #000000; } .NGJ-about .mix-wrapper>.row:nth-child(2) .editor-content h2 { display: table; font-size: 1.8rem; padding: 12px; border: 2px solid #ffffff; float: right;} .NGJ-about .mix-wrapper>.row .editor-content { margin-top: 30px; margin-bottom: 30px; padding: 0 30px; } .NGJ-about .mix-wrapper>.row .editor-content article p:first-child{ clear: both; width: 70%;} .NGJ-about .mix-wrapper>.row:nth-child(2) .editor-content article p{ float: right;} .NGJ-about .mix-wrapper>.row .editor-content p { font-size: 19px; letter-spacing: 0.03rem; line-height: 36px; } .NGJ-idea .mix-wrapper{ padding: 0; } .NGJ-idea .editor-content{ padding: 35px 50px 50px; } .NGJ-idea .editor-content h2 { position: relative; font-size: 1.8rem; margin-bottom: 30px; padding-bottom: 30px; text-align: center;} .NGJ-idea .editor-content h2:before { content: ""; position: absolute; background: #FCDE02; width: 140px; height: 5px; bottom: 0; left: 50%; transform: translate(-50%, 0); } .NGJ-idea .editor-content article p{font-size: 1.4rem; color: #545454; margin-bottom: 0; line-height: 2.4rem; letter-spacing: 0.03rem;} .NGJ-idea .pic-content{ margin: 0; padding: 50px 0; } .NGJ-about .mix-wrapper>.row:nth-child(1) .editor-content::after { content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/39582d15-fa0e-44e2-b468-45a27a228bfb.jpg); width: 50%; height: 200px; max-width: 100%; top: 25%; transform: translate(0,-25%); right: -25%; background-size: 90%; background-position: center; background-repeat: no-repeat; } .NGJ-Donna-Peter article{ position: absolute; right: 40px; top: 50%; transform: translate(0, -50%); background: rgb(255 255 255 / 20%); width: 440px; height: auto; padding: 40px; } .NGJ-Donna-Peter article h2{ position: relative; font-size: 1.8rem; line-height: 42px;} .NGJ-Donna-Peter article p{ font-size: 19px; letter-spacing: 0.03rem; line-height: 36px; text-align: justify; margin-bottom: 0;} .NGJ-Donna-Peter .bgfixed{ border-top: 5px solid #FCDE02;} .NGJ-Donna-narrative .mix-wrapper{ padding: 0 15px;} .NGJ-Donna-narrative .editor-content{ padding: 35px 30px 35px 50px;} .NGJ-Donna-narrative article { max-width: 700px; margin: 0 auto; height: 100%; display: flex; flex-flow: column; justify-content: center; } .NGJ-Donna-narrative article p{ font-size: 19px; letter-spacing: 0.03rem; line-height: 36px; text-align: justify; margin-bottom: 0; color:#ffffff; } .NGJ-Donna-narrative .pic-content { padding: 35px 50px 35px 15px; } .NGJ.collection{ padding: 0 45px 50px;} .NGJ-collection-title { text-align: center; padding: 50px;} .NGJ-collection-title article h2{ font-size: 3rem; position: relative; padding-bottom: 10px; } .NGJ-collection-title article p{ margin-bottom: 0; font-size: 1.4em; font-weight: 500; position: relative; padding-bottom: 30px;} .NGJ-collection-title article p:before { content: ""; position: absolute; background: #FCDE02; width: 140px; height: 5px; bottom: 0; left: 50%; transform: translate(-50%, 0); } .NGJ.collection.sunshine-width>.module-container>.main { padding: 0; } .NGJ.collection .mix-wrapper { padding:0 15px; } .NGJ.collection .mix-wrapper>.row+.row { border-top: 4px solid #08A4A0; } .NGJ.collection .pic-content,.NGJ.collection .editor-content { padding: 0; margin: 0; } .NGJ.collection .editor-content { display: flex; align-items: center; padding: 0 50px; } .NGJ.collection .editor-content article a{ color:#ffffff; text-decoration: none;} .NGJ.collection .editor-content article h2{font-size: 1rem; margin-bottom: 15px;} .NGJ.collection .editor-content article h3{margin-bottom: 25px; font-size: 1.8rem; color:#FCDE02;} .NGJ.collection .editor-content article p{font-size: 19px; letter-spacing: 0.03rem; line-height: 36px; text-align: justify; margin-bottom: 30px;} .NGJ.collection .editor-content article button { float: right; background: #FCDE02; border: 0; padding: 8px 30px; font-size: 17px; letter-spacing: 0.2rem; } .NGJ-Inquire div.link-list { background: #241816; padding: 35px 30px 20px; } .NGJ-Inquire div.link-list ul li { text-align: center; } .NGJ-Inquire div.link-list ul li:first-child a { background: #FCDE02; border: 0; padding: 8px 30px; font-size: 17px; letter-spacing: 0.2rem; } .NGJ-Inquire div.link-list ul li:first-child a,.NGJ-Inquire div.link-list ul li:first-child a:hover{ color:#000000;} .NGJ-Inquire div.link-list ul li:last-child a,.NGJ-Inquire div.link-list ul li:last-child a:hover{color:#ffffff; font-size: 16px;} @media (max-width:1199px){ .NGJ-banner .pic-content::before { background-size: 300px; right: 0px; } } @media (max-width:991px){ .NGJ-about .mix-wrapper>.row:nth-child(2) .editor-content h2 { font-size: 1.6rem; } .NGJ-about .mix-wrapper>.row .editor-content p{ font-size: 16px; line-height: 30px;} .NGJ-about .mix-wrapper>.row .editor-content article p:first-child { width: 75%; } .NGJ-idea .editor-content article p{ font-size: 1rem;} .NGJ-Donna-Peter article { right: 10px; width: 350px; padding: 20px; } .NGJ-Donna-Peter article h2 { font-size: 1.4rem; line-height: 36px; } .NGJ-Donna-Peter article p { font-size: 16px; letter-spacing: 0rem; } .NGJ-Donna-narrative article p { font-size: 16px; } .NGJ.collection .editor-content { padding: 30px; } .NGJ.collection .editor-content article h3 {font-size: 1.6rem; } .NGJ.collection .editor-content article p { font-size: 16px; line-height: 28px;} } @media (max-width: 767px){ .NGJ.sunshine-width{ margin-top: 0; padding: 0;} .NGJ.sunshine-width>.module-container>.main { margin: 0; padding: 0 15px; } .NGJ-banner .pic-content::before { background-size: 200px; width: 240px; height: 240px; } .NGJ-banner .editor-content { padding: 0 30px; } .NGJ-banner .editor-content h1{ font-size: 2.2rem;} .NGJ-banner .editor-content article.top-slogan { padding: 20px 10px;} .NGJ-banner .editor-content article.top-slogan p{ font-size: 1.1rem;} .NGJ-banner .editor-content article.text p { font-size: 1.1rem; line-height: 1.8rem; } .NGJ-about .mix-wrapper { display: block;} .NGJ-about .mix-wrapper>.row:nth-child(1) .editor-content::after{ display: none;} .NGJ-about .mix-wrapper>.row .editor-content article p:first-child { width: 100%; } .NGJ-about .mix-wrapper>.row:nth-child(2) .editor-content h2 { font-size: 1.4rem; } .NGJ-idea .pic-content{ padding: 0;} .NGJ-idea .editor-content { padding: 0px 30px 15px; } .web-page-frame .widget-item.NGJ-Donna-Peter > .module-container > .main{ position: relative;} .NGJ-Donna-Peter article { position: absolute; right: 0; top: initial; transform: translate(0, 0); bottom: 0; background: rgb(255 255 255 / 20%); width: 100%; height: auto; padding: 20px; } .NGJ-Donna-Peter .bgfixed { background-position: -300px center; } .NGJ-Donna-narrative .img-mode .img-box{ text-align: center;} .NGJ-Donna-narrative .pic-content { padding: 15px; } .NGJ-Donna-narrative .editor-content { padding: 0 30px 30px; } .NGJ-collection-title article h2 { font-size: 2.2rem; } } @media (max-width: 575px){ .NGJ-banner .pic-content::before { background-size: 170px; width: 190px; height: 190px; } .NGJ-banner .editor-content h1 { font-size: 1.8rem; padding: 0 20px; } .NGJ-banner .editor-content h1::before, .NGJ-banner .editor-content h1::after{ height: 30px;} .NGJ-banner .editor-content article.top-slogan h2{ font-size: 1.4rem;} .NGJ-banner .editor-content article.top-slogan p{ font-size: 1rem;} .NGJ-banner .editor-content article.text p { font-size: 1rem; line-height: 1.6rem; } .NGJ-Donna-Peter .bgfixed { background-position: -350px center; } } /* 請假攻略 longweekend */ .longweekend-title .header-title { position: relative;font-size: 32px; color: #06082b; display: table; margin: 40px auto; font-weight: 600; letter-spacing: 0.05em; } .longweekend-title .header-title::before{ content: ""; position: absolute; left: 50%; bottom: -10px; transform: translate(-50%,0); width:32px; height:9px; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/0e22cfae-e6d5-4825-b966-f323a0e0a2ec.png"); background-repeat: no-repeat; background-position: center;} .longweekend-banner .bgfixed{ height: 60vh;} .longweekend-nav div.link-list{ min-height: 76px; position: absolute; bottom: 0; width: 100%; display: flex; justify-content: center; align-items: center; background: rgb(255 255 255 / 60%); } .longweekend-nav div.link-list>ul { padding: 0; width: 1000px; height: 76px; display: flex;} .longweekend-nav div.link-list>ul li { width: 100%; border-left: 1px solid rgb(61 50 42 / 30%);} .longweekend-nav div.link-list>ul li:last-child{ border-right: 1px solid rgb(61 50 42 / 30%) } .longweekend-nav div.link-list>ul li a{ display: flex; position: relative; padding: 10px 10px 10px 24px; width: 100%; height: 100%; color:#6b4d32; justify-content: center; align-items: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .longweekend-nav div.link-list>ul li a:hover{ opacity: 0.7; color:#6b4d32;} .longweekend-nav div.link-list>ul li a::before{ content: ""; background-position: center; background-repeat: no-repeat; background-size: 26px; width: 32px; height: 32px; } .longweekend-nav div.link-list.scroll-to-fixed-fixed>ul li a:before{-webkit-filter: brightness(10); } .longweekend-nav div.link-list>ul li:first-child a::before{ background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/7c21965e-151a-406a-9d5f-202072425d8a.svg);} .longweekend-nav div.link-list>ul li:nth-child(2) a::before{ background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/238163bc-50b3-47fa-bdb5-c865513b9d9f.svg);} .longweekend-nav div.link-list>ul li:last-child a::before{ background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/3fdb71e9-4bd1-4787-b820-3ccf1725322f.svg);} .longweekend-nav div.link-list ul li i{ margin-right: 0;} .longweekend-nav .link-list.scroll-to-fixed-fixed{ height: 56px; min-height: 56px; background: rgb(201 160 99 / 80%);} .longweekend-nav div.link-list.scroll-to-fixed-fixed>ul{height: 56px;} .longweekend-nav div.link-list.scroll-to-fixed-fixed>ul li a,.longweekend-nav div.link-list.scroll-to-fixed-fixed>ul li a:hover{ font-size: 20px !important;color:#ffffff; } .longweekend-cld .swiper-slide-style{ box-shadow: none; border: 1px solid #e5e5e5; border-radius: 0; display: -ms-flexbox; display: flex; flex-flow: column; } .longweekend-cld .swiper-slide-style:hover { border: 1px solid #c9a063; } .longweekend-cld .swiper-slide .swiper-title{ position: absolute; top: -9px; width: 56px; height: 56px; background: #c9a063; border-radius: 40px; left: 17px; font-size: 1.2rem; padding: 0; line-height: 52px; color: #ffffff; font-style: italic;} .longweekend-cld .swiper-slide .swiper-content{ margin-bottom: 5px; margin-top: 10px; padding: 0px 15px 0px 84px; position: absolute; width: 100%; color: #c9a063; letter-spacing: 0; text-align: left; font-size: 16px;} .longweekend-cld .swiper-slide .swiper-img{ margin-top: 77px;} .longweekend-cld .swiper-slide .swiper-img img{ max-width: 270px;} .longweekend-cld .swiper-container{ padding: 0 30px;} .longweekend-cld .swiper-button-prev.swiper-button-white,.longweekend-cld .swiper-button-next.swiper-button-white{ width: 40px; height: 40px; background: #282828; border-radius: 50%; opacity: 0.6;} .longweekend-cld .swiper-button-prev.swiper-button-white.swiper-button-disabled,.longweekend-cld .swiper-button-next.swiper-button-white.swiper-button-disabled{ opacity: 0;} .longweekend-cld .swiper-button-prev.swiper-button-white:hover,.longweekend-cld .swiper-button-next.swiper-button-white:hover{ opacity: 0.4;} .longweekend-cld [class*='swiper-button-']:after { font-size: 16px; font-weight: 600; background: transparent; padding: 5px 12px 5px 12px;} .longweekend-cld .swiper-button-prev,.longweekend-cld .swiper-container-rtl .swiper-button-next { left:5px; } .longweekend-cld .swiper-button-next,.longweekend-cld .swiper-container-rtl .swiper-button-prev { right: 5px;} .longweekend-block+.longweekend-block>.module-container>.main { border-top: 1px dotted #9d9d9d; padding-top: 35px; } .longweekend-theme .header-title { color: #e74291; font-size: 24px; font-weight: 600; font-style: italic; display: table; letter-spacing: 0.1rem; margin: 0 auto 35px; padding-bottom: 10px; border-bottom: 3px solid #e74291; } .longweekend-tour .swiper-container { padding: 0 45px; } .longweekend-tour .swiper-slide-style { border-radius: 0; border: 1px solid #e5e5e5; box-shadow: 4px 4px 0px rgb(0 0 0 / 10%); margin-top: 0; margin-bottom: 20px;} .longweekend-tour .swiper-slide .swiper-img img{ border-radius: 0;} .longweekend-tour .swiper-button-prev.swiper-button-white,.longweekend-tour .swiper-button-next.swiper-button-white{ width: 40px; height: 40px; background: #282828; border-radius: 50%; opacity: 0.6;} .longweekend-tour .swiper-button-prev.swiper-button-white:hover,.longweekend-tour .swiper-button-next.swiper-button-white:hover{ opacity: 0.4;} .longweekend-tour .swiper-button-prev.swiper-button-white.swiper-button-disabled,.longweekend-tour .swiper-button-next.swiper-button-white.swiper-button-disabled{ opacity: 0;} .longweekend-tour [class*='swiper-button-']:after { font-size: 16px; font-weight: 600; background: transparent; padding: 5px 12px 5px 12px;} .longweekend-tour .swiper-button-prev,.longweekend-tour .swiper-container-rtl .swiper-button-next { left:0px; } .longweekend-tour .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 0px;} .longweekend-tour figure.swiper-img { position: relative; margin: 0 0 28px; } .longweekend-tour .swiper-slide .swiper-img img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .longweekend-tour figure.swiper-img::after { display: block; content: ''; width: 100%; padding-top: 58.2%; } .longweekend-tour .swiper-slide .swiper-title { position: relative; margin: 0 27px 0; padding: 20px 20px 0; font-size: 20px; font-weight: 600; min-height: 76px; text-align: justify; color: #06082b; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 28px; } .longweekend-tour h3.swiper-title::before{ content: ""; width: 14px; height: 1px; position: absolute; background: #e74191; top: 0; left: 0;} .longweekend-tour h3.swiper-title::after{ content: ""; width: 1px; height: 14px; position: absolute; background: #e74191; top: 0; left: 0;} .longweekend-tour .swiper-slide .swiper-content { color: #666666; letter-spacing: 0.05em; margin: 3px 44px 40px; padding: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-align: justify;} .longweekend-tour .swiper-pagination-bullet { width: 10px; height: 10px; background: rgb(26 28 128 / 50%); } .longweekend-tour .swiper-pagination-bullet:hover{background: rgb(26 28 128 / 80%); } .longweekend-tour .swiper-pagination-bullet-active { color: #fff; background: #e74191; } .theme-btn .function-row .row-content { justify-content: center; } .longweekend-btn .function-row li{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} .longweekend-btn .function-row li a{ padding: 10px 60px; border-radius: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .longweekend-btn .function-row li a:hover{ background: rgb(203 59 128) !important;} .longweekend-btn .function-row li a h3 { margin-top: 0;} .longweekend-btn img{ max-width: 16px;} @media (max-width: 1299px){ .longweekend-tour .swiper-slide .swiper-title{ margin: 0 15px 0;} .longweekend-tour .swiper-slide .swiper-content{ margin: 3px 35px 40px;} } @media (max-width: 1099px){ .longweekend-tour .swiper-container { padding:0 30px;} .longweekend-tour .swiper-button-prev,.longweekend-tour .swiper-container-rtl .swiper-button-next { left:10px; } .longweekend-tour .swiper-button-next,.longweekend-tour .swiper-container-rtl .swiper-button-prev { right: 10px;} } @media (max-width: 1023px){ .longweekend-cld .swiper-container { padding: 0 25px; } .longweekend-tour .swiper-container { padding: 0 25px; } .longweekend-tour .swiper-button-prev,.longweekend-tour .swiper-container-rtl .swiper-button-next { left:5px; } .longweekend-tour .swiper-button-next,.longweekend-tour .swiper-container-rtl .swiper-button-prev { right: 5px;} } @media screen and (max-width:1000px){ .longweekend-nav div.link-list>ul li:first-child{ border-left: 0;} .longweekend-nav div.link-list>ul li:last-child{ border-right: 0;} } @media screen and (max-width:991px){ .longweekend-nav .link-list.scroll-to-fixed-fixed{ top: 168px !important;} } @media screen and (max-width:767px){ .longweekend-nav div.link-list>ul li a{ font-size: 20px !important;} .longweekend-nav .link-list.scroll-to-fixed-fixed{ top: 54px !important;} } @media screen and (max-width:575px){ .longweekend-nav div.link-list { min-height: 50px;} .longweekend-nav .link-list.scroll-to-fixed-fixed { height: 50px; min-height: 50px; background: rgb(17 54 93 / 100%); } .longweekend-nav div.link-list>ul,.longweekend-nav div.link-list.scroll-to-fixed-fixed>ul{ height: 50px; } .longweekend-nav div.link-list>ul li a,.longweekend-nav div.link-list.scroll-to-fixed-fixed>ul li a{ font-size: 16px !important; padding: 10px 5px 10px 10px; } .longweekend-title .header-title{ font-size: 24px; margin: 40px auto 20px; } .longweekend-nav div.link-list.scroll-to-fixed-fixed>ul li a, .longweekend-nav div.link-list.scroll-to-fixed-fixed>ul li a:hover{ font-size: 16px;} } /* 領隊專區 */ .leader_block{ padding-top: 70px; padding-bottom: 70px} .leader_block .fancybox-wrapper>figure{ -webkit-transition: background-color .4S ease; transition: background-color .4S ease;} .leader_block .fancybox-wrapper>figure:hover{ background-color: #fff; -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 10%); -moz-box-shadow: 0 0 10px rgba(0,0,0,.1); box-shadow: 0 0 10px rgb(0 0 0 / 10%); border-radius: 3px; } .leader_block .fancybox-wrapper>figure>a { width: 210px; height: 210px; margin: 0 auto; } .leader_block .fancybox-wrapper a img{ height: 100%; object-fit:cover; border-radius: 50%;} .leader_block .fancybox-wrapper figure.position-bottom > .content-bottom{ text-align: center;} .leader_block .leaderzone_name{ font-size: 28px; color: #333; line-height: 1; font-weight: bold; margin: 25px 0 0;} .leader_block .leaderzone_en{font-size: 16px; color: #777; font-style: italic; font-weight: 400; line-height: 1; margin: 5px 0 0;} .leader_block .leaderzone_text{color: #777; font-size: 14px; font-weight: 400; line-height: 1.7; margin: 20px auto 0; max-width: 210px;} /* .fancybox-container.fancybox-is-open .fancybox-stage { overflow: hidden; width: 80%; margin: 0 auto; background: #ffffff; height: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); } */ /* .fancybox-stage .fancybox-slide--image{ padding: 0;} */ .leaderzone_block { background-color: #ffffff; margin: 10px auto 0; padding: 30px 50px 30px 150px; max-width: 1000px; color: #333; width: 90%; position: relative; text-align: left; } .leaderzone_block::before { content: ''; position: absolute; top: 3px; left: 32px; width: 1px; height: 26%; background-color: #eee; } .leaderzone_block .leaderzone_editor h4 {font-size: 18px; font-weight: 800; } .leaderzone_block .leaderzone_editor p { color: #777; font-size: 16px; line-height: 1.7; font-weight: 400; margin: 22px 0 0; padding-bottom: 30px;} .leaderzone_block .leaderzone_namebox { position: absolute; left: 20px; bottom: 40px;} .leaderzone_block p.leaderzone__maintitle { color: #ccc; font-size: 14px; line-height: 1; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; position: absolute; top: calc(26% + 10px); left: 10px; } .leaderzone_block h5.leaderzone_namebox_name { color: #333; font-size: 28px; font-weight: bold; line-height: 1; margin: 0; } .leaderzone_block p.leaderzone_namebox_enname { color: #999; font-size: 20px; font-weight: 400; line-height: 1; margin: 10px 0 0; font-style: italic; } .leaderzone_block .leaderzone_info { margin: 10px 0 60px; display: flex; align-items: flex-start; flex-flow: column; } .leaderzone_block .leaderzone_info p { color: #ccc; font-size: 16px; line-height: 1.875; margin: 0; } .leaderzone_block .fancybox-is-open .fancybox-stage { overflow: hidden; width: 40%; right: 0; left: initial; } .leaderzone_block .fancybox-is-sliding{ transform: translate(0, 0) !important; } .leaderzone_block .fancybox-slide--image { overflow: hidden; padding: 44px 0; padding: 0 !important; } .leaderzone_block .fancybox-caption,.leaderzone_block .fancybox-show-caption .fancybox-caption { width: 60%; background: transparent; padding: 0; top: 50%; bottom: initial; left: 0; transform: translate(0, -50%); max-height: 80vh; margin-top: 0; opacity: 1; } .leaderzone_block button.fancybox-button.fancybox-button--zoom{ display: none !important;} @media (max-width: 991px){ .leader_block .leaderzone_name{ font-size: 24px;} } @media (max-width: 767px){ .leaderzone_block{ padding: 20px 10px 20px 50px;} .leaderzone_block::before{ left: 22px;} .leaderzone_block p.leaderzone__maintitle{ left: 0;} .fancybox-caption, .fancybox-show-caption .fancybox-caption{width: 100%; padding: 0; top: initial; bottom: 20px; left: 0; transform: translate(0, 0); max-height: 400px; } .leaderzone_block .leaderzone_editor h4 { font-size: 17px; } .leaderzone_block .leaderzone_editor p{ padding-bottom: 10px; font-size: 15px; } .leaderzone_block .leaderzone_info p{font-size: 15px; } .leaderzone_block .leaderzone_namebox { left: 20px; bottom: 20px; } .leaderzone_block h5.leaderzone_namebox_name { font-size: 20px; } .leaderzone_block p.leaderzone_namebox_enname { font-size: 16px; margin: 5px 0 0; } .leaderzone_block .fancybox-is-open .fancybox-stage{ width: 100%;} .leaderzone_block .fancybox-stage .fancybox-slide--image .fancybox-content { transform: translate(-50%,0) !important; left: 50%; top: 80px; height: 50% !important;} .leaderzone_block .fancybox-stage .fancybox-slide--image .fancybox-content .fancybox-image{ top: 50%; transform: translate(0, -50%); height: auto; } } /* 關於我們 */ .about-width{ max-width: 1000px; margin: 0 auto; } .about-top>.module-container>.main { margin-top: 48px; } .about-top-logo{ padding: 150px 0 150px 20%; } .about-block-1,.about-block-2,.about-block-4{overflow: hidden;} .about-block-1::before{ content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/a45527fe-77b8-4d75-b991-ed7954b0d4c8.png); left: -100px; top: -150px; width: 560px; height: 370px; } .about-block-1::after{ content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/b190f811-dea1-4e22-b227-e90df310ca57.png); right: -100px; top: -50px; width: 415px; height: 518px; } .about-block-1 .about-title,.about-block-1 .about-content{ z-index: 1;} .about-block-1 .about-title h2{ position: relative; font-size: 30px; font-weight: 600; text-align: center; display: table; margin: 0 auto; margin-bottom: 10px; padding: 0 20px; } .about-block-1 .about-title h2::before,.about-block-1 .about-title h2::after{content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/9e696498-4a1d-4e78-9f7c-5213093421ce.svg); background-repeat: no-repeat; background-position: center; width: 13px; height: 13px; top: 50%; transform: translate(0,-50%); } .about-block-1 .about-title h2::before{left: 0; } .about-block-1 .about-title h2::after{ right: 0; transform: translate(0,-50%) rotate(180deg); } .about-block-1 .about-title h3{ position: relative; font-size: 20px; font-weight: 600; letter-spacing: 4px; text-align: center; display: table; margin: 0 auto; padding-bottom: 20px; } .about-block-1 .about-title h3:after{ content: ""; width: 70px; position: absolute; height: 3px; background-color: #e4007f; bottom: 0; left: 50%; transform: translate( -50%, 0);} .about-block-1 article,.about-block-2 p,.about-block-3 p,.about-block-4 p{ color: #231815; font-size: 19px; line-height: 38px; margin: 0 auto; letter-spacing: 1px; } .about-block-1 article{ max-width: 900px;} .about-block-2::before{ content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/b8ae4281-d77c-478c-8cf4-f41dd39451ae.svg);background-repeat: no-repeat; left: 35px; bottom: 20px; width: 180px; height: 360px;} .about-block-2 article img{ max-width: 300px; margin: 0 auto; display: block; } .about-block-2 .about-content .mix-wrapper{ padding: 0;} .about-block-2 .cycle-slide{ border: 8px solid #f3f3f3; } .about-block-2 article h2,.about-block-3 article h2,.about-block-4 article h2{ position: relative; font-size: 24px; letter-spacing: 2px; font-weight: 600; text-align: center; display: table; margin: 0 auto; margin-bottom: 10px; padding: 10px 20px; } .about-block-2 article h2::before,.about-block-2 article h2::after, .about-block-3 article h2::before,.about-block-3 article h2::after, .about-block-4 article h2::before,.about-block-4 article h2::after{content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/bb6366f2-3f68-429e-a5b1-3106e202c165.svg); background-repeat: no-repeat; background-position: center; width: 13px; height: 13px; top: 50%; transform: translate(0,-50%); } .about-block-2 article h2::before,.about-block-3 article h2::before,.about-block-4 article h2::before{left: 0; } .about-block-2 article h2::after,.about-block-3 article h2::after,.about-block-4 article h2::after{ right: 0; } .about-block-2 .about-content,.about-block-3 .about-content,.about-block-3 .about-theme,.about-block-4 .about-content{ max-width: 900px; margin: 0 auto; z-index: 1;} .about-block-3::before{ content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/9e310351-5fc4-43d1-a072-74e40a865db1.svg); background-repeat: no-repeat; left: 35px; top: 20px; width: 250px; height: 500px;} .about-block-3::after { content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/71e0c9ad-3333-4c40-b528-b23d83426482.png); background-repeat: no-repeat; background-size: 60px; right: 35px; top: 70px; width: 80px; height: 1000px; z-index: 1;} .about-block-3 article img { max-width: 350px; margin: 0 auto; display: block; } .about-block-3 .about-theme .hover-wall>.container-fluid>.row{justify-content: center;} .about-block-3 .about-theme .hover-wall .htpro_tit{margin-bottom: 0;} .about-block-3 .about-theme .hover-wall .icon_info { background: transparent; border-radius: 0; box-shadow: none; } .about-block-3 .about-theme .hover-wall .icon_info figure{ margin: 0 0 0.5rem;} .about-block-3 .about-theme .hover-wall .icon_info h3{ font-size: 17px; } .about-block-3 .about-theme .hover-wall figure .overlay i{ display: none;} .about-block-4 .about-content article{ display: flex; flex-flow: column; align-items: flex-end;} .about-block-4::before,.about-block-4::after{ content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/e4fde4dd-6908-4dd9-a03d-e3c1d611c2e0.png); background-repeat: no-repeat; width: 412px; height: 516px;} .about-block-4::before{ left: -60px; top: -50px;} .about-block-4::after{ right: -180px; bottom: -130px; } .about-block-4 .about-content article img { max-width: 300px; margin-top: 40px;} .about-block-3 .about-theme .hover-wall .row>div:nth-child(8) .icon_info h3{ padding: 0 0 0 80px; position: relative;} .about-block-3 .about-theme .hover-wall .row>div:nth-child(8) .icon_info h3::before{ position: absolute; content: ""; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/79c7669f-aa36-4780-82e1-02464ac7b43e.png); background-repeat: no-repeat; background-size: 80px; left: 10px; top: 0; width: 80px; height: 20px; } @media screen and (max-width: 1529px){ .about-top>.module-container>.main { margin-top: 0px; } } @media screen and (max-width: 767px){ .about-top>.module-container>.main { background-size: 1000px !important; } .about-top-logo { padding: 100px 0 100px 10%; } .about-block-2 .about-content .img-mode .img-box { text-align: center; } .about-block-1::after,.about-block-2::before,.about-block-3::before{ display: none;} .about-block-1 article, .about-block-2 p, .about-block-3 p, .about-block-4 p{ font-size: 16px; line-height: 34px;} } @media (min-width: 576px) and (max-width: 767px){ .about-block-3 .about-theme .hover-wall .row>div.col-sm-12 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media screen and (max-width: 575px){ .about-top-logo { padding: 150px 0; } .about-top-logo>.module-container>.main{ text-align: center;} .about-block-1 .about-title h2{ font-size: 24px;} .about-block-2 article h2, .about-block-3 article h2, .about-block-4 article h2{ font-size: 20px;} .about-block-1 .about-title h3{ font-size: 16px;} .about-block-3::after{ right: 0;z-index: 0;} .about-block-4::after{ display: none;} } /* 隱私權政策 */ .privacy-content{ max-width: 1000px; margin: 0 auto;} .privacy-content .header-title{ color: #333; font-size: 30px; font-weight: bold; line-height: 1; text-align: center; margin-top: 50px; } .privacy-content article{ color: #777; font-size: 16px; line-height: 1.875; margin-top: 0; padding-top: 10px;} .privacy-content.item article{ border-top: 1px solid #ccc; } .privacy-content .header-title,.privacy-content article{ margin-bottom: 30px;} .privacy-content article a,.privacy-content article a:hover{ text-decoration: none} .privacy-content.item .header-title{display: table; position: relative; font-size: 20px; line-height: 1.4; text-align: left; margin-top: 0; margin-bottom: 0; padding-bottom: 10px;} .privacy-content.item .header-title::after{content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #e74191; } @media screen and (max-width: 575px){ .privacy-content .header-title{ font-size: 24px;} } /* 最新訊息 */ .news-nav div.link-list ul{border-bottom: 1px solid #ddd;} .news-nav div.link-list ul li{border: 1px solid #ffffff;} .news-nav div.link-list ul li a{color: #999; padding: 0 19px; line-height: 1.5em;} .news-nav.offer .link-list li:first-child,.news-nav.credit-offer .link-list li:nth-child(2),.news-nav.news .link-list li:nth-child(3),.news-nav.travel-info .link-list li:nth-child(4),.news-nav .link-list li:hover { border-style: solid; border-width: 1px; border-color: #ddd #ddd #fff #ddd; margin-bottom: -1px; color: #4d4d4d; line-height: 42px; font-size: 15px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .news-nav.offer div.link-list ul li:first-child a,.news-nav.credit-offer .link-list ul li:nth-child(2) a,.news-nav.news div.link-list ul li:nth-child(3) a,.news-nav.travel-info div.link-list ul li:nth-child(4),.news-nav div.link-list ul li a:hover{color: #4d4d4d;} .news-nav div div.link-list ul li i{ display: block;} .new-content .list-wrapper{ border: 1px solid #cccccc; border-bottom: 0; padding-right: 0; padding-left: 0;} .new-content .list-wrapper .row{padding:0 35px 30px 35px; position: relative;} .new-content .list-wrapper>.row::after{ content: ""; position: absolute; font-size: 14px; bottom: 30px; right: 35px; color: #999; letter-spacing: 0; line-height: 20px; width: 80px; height: 20px; padding-left: 24px;} .new-content .list-wrapper .row:hover::after{color:#fff; } .new-content.news .list-wrapper>.row::after{ content: "新進快訊"; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/ba530901-de39-45f7-b2c2-0d3427c859cd.svg); background-repeat: no-repeat;} .new-content.news .list-wrapper .row:hover::after{background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/7e1b382f-c0ed-4a01-9c6b-bade5979fb9e.svg); background-repeat: no-repeat;} .new-content.offer .list-wrapper>.row::after{ content: "優惠活動"; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/dfe0d1b9-c1dd-480d-afa4-9683b1daf0ca.svg); background-repeat: no-repeat;} .new-content.offer .list-wrapper .row:hover::after{ background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/75a5ae6c-9784-4da6-a49d-fc1214b0d480.svg); background-repeat: no-repeat;} .new-content.travel-info .list-wrapper>.row::after{ content: "旅遊資訊分享"; width: 108px; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/d57137a1-52c0-452e-9420-6e0601ddb1db.svg); background-repeat: no-repeat;} .new-content.travel-info .list-wrapper .row:hover::after{ background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/79975bc8-d9be-4126-a1db-f5c569d12ae2.svg); background-repeat: no-repeat;} .new-content .list-wrapper .name-block{ padding: 0; position: relative; } .new-content .list-wrapper .name-block a{ color:#333; width: 100%; padding: 30px 0 10px 15px;font-weight: 600; font-size: 20px; } .new-content .list-wrapper .price-block{ position: absolute; color: #ffffff; width: 50px; background: #e74191; padding: 2px 0 6px; text-align: center; left:35px; top: 50%; transform: translate(0, -50%);} .new-content .price-block p:first-child{ font-size: 31px; line-height: 1.2; font-weight: 200; margin-bottom: 0;} .new-content .price-block p:last-child{ font-size: 16px; line-height: 1.2; font-weight: 500; margin-bottom: 0;} .new-content .list-wrapper .note-block{ color:#777; padding: 0 15px 20px; padding-top: 0; padding-bottom: 0; font-size: 16px; line-height: 1.75;} .new-content .list-wrapper .row:hover .name-block a,.new-content .list-wrapper .row:hover .note-block{ color: #ffffff;} .new-content .note-block,.new-content .list-wrapper .name-block{ flex: 0 0 calc(100% - 50px); max-width: calc(100% - 50px); width: 100%; left: 50px; text-align: left;} .credit-offer-content .expand-graphics .item_box{border: 1px solid #ddd; padding:20px 20px 80px; height: 100%; position: relative;} .credit-offer-content .expand-graphics .item_box:hover{border-color: #e74191;} .credit-offer-content .expand-graphics .item_box figure{ border-radius: 0; border: 1px solid #eee;} .credit-offer-content .expand-graphics .item_box:hover figure img { transition: initial; opacity: 1; } .credit-offer-content .item_box .item_more_txt h3 { font-size: 20px; line-height: 1.4; max-height: 2.8em; overflow: hidden; margin: 0; font-weight: 600; } .credit-offer-content .expand-graphics .item_box .item_more_txt span.item_tag { display: block; padding: 0; font-size: 14px; line-height: 2; margin: 0;} .credit-offer-content .expand-graphics .item_box span.item_btn,.credit-offer-content .expand-graphics .item_box span.item_btn_hover{ float: initial; position: absolute; display: block; padding: 0; border-radius: 0; width: calc(100% - 40px); height: 50px; bottom: 20px; left: 20px; color: #999; font-size: 18px; text-align: center; line-height: 48px; border: 1px solid #ddd; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .credit-offer-content .expand-graphics .item_box:hover span.item_btn_hover { background: #ddd !important; color: #555; } /* 銀行信用卡優惠新版(多連結) */ .credit-offer-list .module-container .mix-wrapper{ padding: 0; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;} .credit-offer-list .mix-wrapper>.row { flex-flow: column; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; padding-left: 15px; margin: 0; padding-right: 15px; } .credit-offer-list .mix-wrapper>.row .pic-content{ flex: 0 0 30%; border: 1px solid; border-color: #ddd; margin-bottom: 0; padding: 20px 20px 0; border-bottom: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .credit-offer-list .mix-wrapper>.row .editor-content{flex: 1; border: 1px solid; border-color: #ddd; margin-top: 0; padding: 16px 20px 80px; border-top: 0; position: relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .credit-offer-list .mix-wrapper>.row:hover .pic-content,.credit-offer-list .mix-wrapper>.row:hover .editor-content{ border-color: #e74191;} .credit-offer-list .img-mode .img-box>a{ display: block;} .credit-offer-list .img-mode .img-box>a>img{ width: 100%;} .credit-offer-list .mix-wrapper>.row .editor-content h2 { font-size: 18px; font-weight: 600; color: #333333; line-height: 23px; margin-bottom: 0.5em; } .credit-offer-list .mix-wrapper>.row .editor-content p{ margin-top: 0; margin-bottom: 5px; padding: 0; font-size: 14px; line-height: 2; color: #555;} .credit-offer-list .mix-wrapper>.row .editor-content p a{ color: #555;} .credit-offer-list .mix-wrapper>.row .editor-content .credit_btn { position: absolute; padding: 0; border-radius: 0; width: calc(100% - 40px); height: 50px; bottom: 20px; left: 20px; color: #999; font-size: 18px; text-align: center; line-height: 48px; border: 1px solid #ddd; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .credit-offer-list .mix-wrapper>.row .editor-content .credit_btn:hover { background: #ddd; color: #555;} .credit-offer-list .mix-wrapper>.row .editor-content .credit_btn a{ color: #555; text-decoration: none; display: block;} @media screen and (max-width: 991px){ .credit-offer-list .mix-wrapper>.row { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;} } @media screen and (max-width: 767px){ .credit-offer-list .mix-wrapper>.row { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} } @media screen and (max-width: 575px){ .news-nav div.link-list{ overflow: scroll;} .news-nav div.link-list ul{ white-space: nowrap; display: inline-block; } .new-content .list-wrapper .row { padding: 50px 25px; } .new-content .list-wrapper>.row::after{ display: none;} .new-content .note-block, .new-content .list-wrapper .name-block { flex: 0 0 100%; max-width: 100%; left: 0; text-align: center; } .new-content .list-wrapper .price-block { width: 70px; padding: 10px 0; left: 50%; top: 0; transform: translate(-50%, 0); display: flex; flex-flow: row-reverse; justify-content: center; align-items: center; } .new-content .list-wrapper .price-block p { font-size: 16px; } .new-content .price-block p:first-child{ padding-left: 5px;} } /* 最新消息分頁 */ .news-side .widget-item .header-title{ display: table; position: relative; font-size: 20px; font-weight: bold; line-height: 1.4; margin-top: 48px; padding-bottom: 10px; color: #333; } .news-side .widget-item .header-title::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #e74191; } .news-subnav .text-container{ border-top: 1px solid #ccc;} .news-subnav .text-container div.link-list ul{padding-left: 25px;} .news-subnav .text-container div.link-list ul li { border-bottom: 1px solid #ccc; position: relative; } .news-subnav .text-container div.link-list ul li::before { content: ""; width: 5px; height: 5px; background: #333; position: absolute; border-radius: 10px; top: 22px; left: -15px; } .news-subnav .text-container div.link-list ul li a,.news-subnav .text-container div.link-list ul li span { padding: 15px 0; color: #333; font-size: 15px; line-height: 1.2; } .sub-news .side-menu{ border-top: 1px solid #ccc;} .sub-news .side-menu ul{ box-shadow: none;} .sub-news .side-menu ul li input[type='checkbox']:checked ~ label{ background: #ffffff;} .sub-news .side-menu ul li.block { text-indent: 0; border-bottom: 1px solid #ccc; padding-bottom: 15px; background: #ffffff;} .sub-news .side-menu ul li label,.sub-news .side-menu ul li input[type='checkbox']:checked ~ label { background: #ffffff; padding: 15px 0 0 0; border-top: 0; border-bottom: 0; text-shadow: none; font-size: 15px; line-height: 1.2; color: #999999; letter-spacing: 0; } .sub-news .side-menu ul ul{ box-shadow:none;} .sub-news .side-menu ul ul li a { padding: 0; font-size: 15px; color: #333; font-weight: bold; height: 3em; overflow: hidden; } .sub-news .side-menu ul ul li a:hover { color: #333; opacity: .8; } .sub-news .side-menu ul ul.options li{ text-indent: 0;} .sub-news .side-menu ul li i{ display: none;} .newsarticle>.module-container>.row, .news-side>.module-container>.row{ padding-right: 20px; padding-left: 20px; } .newsarticle-titlebox { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 0 0 30px; margin-bottom: 22px; border-bottom: 1px solid #ddd; } .newsarticle-content-title{ color: #333; font-size: 24px; font-weight: 600; line-height: 1.16; margin: 0;} .newsarticle-datebox{width: 50px; display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; color: #fff; padding: 2px 0 6px; margin-right: 15px; background-color: #d62b85;} .newsarticle-content{ flex:1;} .newsarticle-datebox-day { font-size: 31px; line-height: 1.2; font-weight: 200; margin: 0; } .newsarticle-datebox-month { font-size: 16px; font-weight: 400; line-height: 1.2; margin: 0; } .newsarticle-content-text { display: flex; flex-wrap: wrap; align-items: center; color: #999; line-height: 2; margin: 10px 0 0; } .newsarticle-text p{ font-size: 16px; font-weight: 400; color: #777; line-height: 1.7; margin-bottom: 1px;} .newsarticle-card .hover-wall .icon_info,.newsarticle-card .hover-wall .icon_info:hover{ box-shadow: none; bottom: 0;} .newsarticle-card .hover-wall figure .overlay{ background: rgb(255 255 255 / 40%)} .newsarticle-card .hover-wall figure .overlay i{ display: none;} .newsarticle-card .hover-wall .icon_info:hover figure .b_img {-webkot-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .news-share .widget-item.facebook,.news-share .widget-item.line{ -ms-flex: 0 0 120px; flex: 0 0 120px; max-width: 120px; } .news-share .widget-item.twitter{-ms-flex: 0 0 26px; flex: 0 0 26px; max-width: 26px;} .news-share .widget-item.twitter a.sharing__list-btn.sharing__list-twitter{ font-size: 0; background-color: #4facf1; width: 26px; height: 20px; display: block; border-radius: 3px; text-align: center; } .news-share .widget-item.twitter a i{ font-size: 14px; line-height: 20px; color: #ffffff; } .mobile-newsnav {display: none !important; position: absolute; max-height: calc(100vh - 300px); width: 250px; position: fixed; top: 100px; right: 15px; } .mobile-newsnav .full-menu,.mobile-newsnav .responsive-drop-down-menu{ background-color: transparent;} .mobile-newsnav .responsive-drop-down-menu .menu-button { position: relative; padding: 25px 2px 2px 2px; font-size: 16px; width: 50px; text-align: center; height: 55px; background-color: #e74191; box-shadow: 0 0 5px rgb(0 0 0 / 30%); float: right; } .mobile-newsnav .responsive-drop-down-menu .menu-button:before { height: 10px; width: 20px; border-top: 2px solid white; border-bottom: 2px solid white; left: 50%; top: 10px; transform: translate(-50%, 0); } .mobile-newsnav .responsive-drop-down-menu .menu-button:after { height: 10px; width: 20px; border-top: 2px solid white; left: 50%; top: 26px; transform: translate(-50%, 0); } .mobile-newsnav .responsive-drop-down-menu > ul.open{background-color: #f3f3f3; border: 1px solid #ccc;} .mobile-newsnav .responsive-drop-down-menu ul > li + li{ border-top: 1px solid #ccc;} .mobile-newsnav .responsive-drop-down-menu ul li a{ padding: 13px 25px; color: #333; font-size: 15px; line-height: initial;} .mobile-newsnav .responsive-drop-down-menu > ul > li:hover > a,.mobile-newsnav .responsive-drop-down-menu > ul > li.active > a{ color: #ffffff;} @media (min-width: 768px) and (max-width: 991px){ .news-side{ -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media screen and (max-width: 767px){ .row.header+.row .row .d-none.d-md-block.hidden-xs.hidden-sm.col-lg-3 { display: block !important; } } @media screen and (max-width: 575px){ .news-subnav{ display: none !important;} .mobile-newsnav{ display: block !important;} } /* 下載列表 */ .download-menu>.module-container>.main { padding-left: 46px; } .download-menu .header-title{ color: #fff; font-size: 20px; text-align: center; line-height: 50px; background-color: #06082B; font-weight: 600; } .download-menu .nav-pills .nav-link{ display: flex; flex-wrap: wrap; align-items: center; border-radius: 0; color: #777; font-size: 15px; line-height: 49px; background-color: #f3f3f3; border-top: 1px solid #ddd; padding: 0 10px; -webkit-transition: border-color .4s ease, color .4s ease, background-color .4s ease; -moz-transition: border-color .4s ease, color .4s ease, background-color .4s ease; transition: border-color .4s ease, color .4s ease, background-color .4s ease;} .download-menu .nav-pills .nav-link.active,.download-menu .nav-pills .show>.nav-link { color: #fff; border-color: #e74191; background-color: #e74191; } .download-menu .nav-pills .nav-link::before{ content: ''; display: block; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; background-color: #777; -webkit-transition: background-color .4s ease; -moz-transition: background-color .4s ease; transition: background-color .4s ease; } .download-menu .nav-pills .nav-link.active::before,.download-menu .nav-pills .show>.nav-link::before{background-color: #fff;} .download-menu .nav-pills .nav-link:hover{ color:#333} .download-menu .nav-pills .nav-link.active:hover,.download-menu .nav-pills .show>.nav-link:hover{ color:#ffffff; } .download-width { max-width:1280px; -ms-flex: 1; flex: 1; } .list-wrapper .note-block{ -ms-flex-order: 1; order: 1;} .download-content .list-wrapper{ line-height: 23px; font-size: 16px; margin-top: 0; margin-bottom: 0; padding-right: 46px; padding-left: 30px; } .download-content .list-wrapper>.row:first-child{ border-bottom: 0;} .download-content .list-wrapper .note-block,.download-content .list-wrapper .pic-block, .download-content .list-wrapper .price-block,.download-content .list-wrapper .name-block{color: #545454; align-items: center; display: flex; padding: 25px 0; } .download-content .list-wrapper>.row:first-child .note-block, .download-content .list-wrapper>.row:first-child .pic-block, .download-content .list-wrapper>.row:first-child .price-block, .download-content .list-wrapper>.row:first-child .name-block{ color: #999; font-size: 14px; font-weight: bold; text-align: center; line-height: 1; padding-top: 0; padding-bottom: 10px; border-bottom: 4px solid #e74191; } .download-content .list-wrapper .note-block{ -ms-flex-order: 1; order: 1; -ms-flex: 1; flex: 1; max-width: 100%; font-size: 16px;} .download-content .list-wrapper>.row:first-child .note-block{ justify-content: center;} .download-content .list-wrapper .pic-block{ -ms-flex-order: 2; order: 2; -ms-flex: 0 0 90px; flex: 0 0 90px; max-width: 90px; justify-content: center; text-align: center; margin-left: 20px; } .download-content .list-wrapper .pic-block img{ max-width: 24px;} .download-content .list-wrapper>.row:first-child .pic-block::before{ content: "類型";} .download-content .list-wrapper>.row:first-child .pic-block img{ display: none;} .download-content .list-wrapper .price-block{ -ms-flex-order: 3; order: 3; -ms-flex: 0 0 180px; flex: 0 0 180px; justify-content: center; max-width: 180px; color: #545454; font-size: 16px; text-align: center; margin-left: 20px; } .download-content .list-wrapper .name-block{ -ms-flex-order: 4; order: 4; -ms-flex: 0 0 130px; flex: 0 0 130px; justify-content: center; max-width: 130px; text-align: center; margin-left: 20px;} .download-content .list-wrapper .name-block a { color: #ffffff; width: 26px; height: 26px; background: #333; border-radius: 2px; font-size: 13px; padding-top: 1px; } .download-content .list-wrapper .name-block a:hover{ background-color: #e74191; color:#ffffff} .download-content .list-wrapper>.row:first-child .name-block a,.download-content .list-wrapper>.row:first-child .name-block a:hover{ color: #999; cursor: text; background-color: transparent; } @media screen and (max-width: 1199px){ .download-content .list-wrapper .pic-block{ -ms-flex: 0 0 60px; flex: 0 0 60px; max-width: 60px; } .download-content .list-wrapper .name-block { -ms-flex: 0 0 70px; flex: 0 0 70px; max-width: 70px; } .download-content .list-wrapper .price-block{-ms-flex: 0 0 110px; flex: 0 0 110px; max-width: 110px; } } @media screen and (min-width: 992px){ .download-menu{ -ms-flex: 0 0 296px; flex: 0 0 296px; max-width: 296px;} .download-menu .nav{ flex-flow: column; } } @media screen and (max-width: 991px){ .download-menu,.download-width{ margin-top: 30px;} .download-menu{ margin-bottom: 0px;} .download-menu>.module-container>.main { padding-left: 15px; padding-right: 15px; } .download-menu .header-title{ display: none;} .download-menu .nav-pills .nav-link::before{ display: none;} .download-menu .nav{ justify-content: center; } .download-menu .nav-pills .nav-link{ padding: 0 20px; border-top:0; line-height: 40px;} .download-menu .nav-pills .nav-item + .nav-item .nav-link{ border-left: 1px solid #ddd;} .download-content .list-wrapper{ padding-left: 46px;} .download-content .list-wrapper>.row:first-child .pic-block{ display: none;} .download-content .list-wrapper .pic-block { -ms-flex: 0 0 60px; flex: 0 0 60px; max-width: 60px; -ms-flex-order: 1; order: 1; margin-left: 0; } .download-content .list-wrapper .note-block { -ms-flex-order: 2; order: 2;} } @media screen and (max-width: 767px){ .download-content .list-wrapper{ padding-left: 15px; padding-right: 15px;} } @media screen and (max-width: 575px){ .download-menu>.module-container>.main{ padding: 0;} .download-content .list-wrapper>.row:first-child{ display: none;} .download-content .list-wrapper .row{flex-flow: column; position: relative; padding: 20px 35px 20px 35px; } .download-content .list-wrapper .note-block, .download-content .list-wrapper .pic-block, .download-content .list-wrapper .price-block, .download-content .list-wrapper .name-block{ padding: 0; align-items: flex-start; color:#545454;} .download-content .list-wrapper .note-block,.download-content .list-wrapper .price-block{ flex:0 0 100%; max-width: 100%; justify-content: left; margin-left: 0; line-height: 26px; } .download-content .list-wrapper .name-block { -ms-flex: 0 0 30px; flex: 0 0 30px; max-width: 30px; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); margin-left: 0; } .download-content .list-wrapper .pic-block { position: absolute; -ms-flex: 0 0 30px; flex: 0 0 30px; max-width: 30px; left: 0; top: 25px; } .download-content .list-wrapper .pic-block img { max-width: 20px; } } /* 旅遊講座 */ .lecture_tab .nav-link { font-size: 15px; padding: 0 19px; line-height: 42px; color: #999; } .lecture_tab .nav-tabs .nav-link:hover { border-color: #e9ecef #e9ecef #ddd; background-color: #eee; color: #555;} .lecture_tab .nav-tabs .nav-link:focus,.lecture_tab .nav-tabs .nav-item.show .nav-link,.lecture_tab .nav-tabs .nav-link.active{ border-color: #ddd #ddd #fff #ddd;color: #4d4d4d; background-color: #ffffff;} .sunshine_lecture .ads-wrapper .item-box{ padding: 0;} .sunshine_lecture .ads-wrapper .item_box a{ border: 1px solid #ddd; } .sunshine_lecture .ads-wrapper .item_box figure{ position: relative; border-radius: 0; } .sunshine_lecture .ads-wrapper .item_box figure::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; transition: opacity .4s ease; z-index: 1; } .sunshine_lecture .ads-wrapper .item-box:nth-child(even) .item_box a figure { float: right; } .sunshine_lecture .ads-wrapper .item_box:hover figure::before{ opacity: 0.7;} .sunshine_lecture .ads-wrapper .item_box figure::after{content:"詳細內容"; position: absolute; opacity: 0; top: 50%; left: 50%; color: #ffffff; border: 1px solid #ffffff; padding: 10px 22px; border-radius: 2px; z-index: 1; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-transition: opacity .4s ease, transform .4s ease; -moz-transition: opacity .4s ease, transform .4s ease; transition: opacity .4s ease, transform .4s ease; } .sunshine_lecture .ads-wrapper .item_box:hover figure::after { opacity: 1; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .sunshine_lecture .ads-wrapper .item_box:hover figure img { opacity: 1; } .sunshine_lecture .ads-wrapper .item-box:nth-child(even) .item_box .item_more_txt{ left:0} .sunshine_lecture .ads-wrapper .item_box h4{ position: absolute; top: 50px; right: 20px; font-size: 65px; font-family: 'Raleway', sans-serif !important; font-weight: 300; font-style: italic; margin-top: 0;} .sunshine_lecture .ads-wrapper .item-box:nth-child(even) .item_box h4{ right:calc(50% + 20px);} .sunshine_lecture .ads-wrapper .item_box h4::before { content: "/"; position: absolute; left: -28px; bottom: 10px; } .sunshine_lecture .ads-wrapper .item_box h4 span { font-size: 65px; font-weight: 300; position: absolute; top: -45px; left: -75px; } .sunshine_lecture .ads-wrapper .item_box span.item_btn{ background: transparent !important; color: #E74191; font-weight: 600; } .sunshine_lecture .ads-wrapper .item-box:nth-child(even) .item_box span.item_btn{ right:calc(50% + 20px);} .sunshine_lecture .ads-wrapper .item_box:hover span.item_btn{ display: block;} .sunshine_lecture .ads-wrapper .item_box:hover span.item_btn_hover{ display: none;} .sunshine_lecture .ads-wrapper .item_box .item_more_txt{display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;} .sunshine_lecture .ads-wrapper .item_box .item_more_txt span.item_tag{ margin-left: 0; padding-left: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;} .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(2) { order: 1; position: relative; padding-left: 28px; } .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(2)::before { content: "\f130"; font: normal normal normal 14px/1 FontAwesome; position: absolute; top: 2px; left: 5px; color: #cccccc; font-size: 22px; } .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(3) { order: 2; position: relative; margin-left: 15px; padding-left: 32px; } .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(3)::before { content: "\f0c0"; font: normal normal normal 14px/1 FontAwesome; position: absolute; top: 3px; left: 5px; color: #cccccc; font-size: 18px; } .sunshine_lecture .ads-wrapper .item_box .item_more_txt>h3 { order: 3; flex: 0 0 100%; margin: 10px 0 0; padding-right: 160px; font-size: 24px; font-weight: 600; line-height: 1.33; color: #333;} .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(4) { order: 4; flex: 0 0 100%; font-size: 14px; line-height: 1.2; margin-top: 10px;} .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(5) { order: 5; flex: 0 0 100%; font-size: 14px; line-height: 1.2; margin-top: 10px;} .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(6) { order: 6; flex: 0 0 100%; margin-top: 10px; font-size: 16px; line-height: 1.875;} @media screen and (min-width: 992px){ .sunshine_lecture .ads-wrapper .item_box figure { width: 50%; margin: -1px 0 -1px -1px; } .sunshine_lecture .ads-wrapper .item_box .item_more_txt{ width: 50%; position: absolute; top: 0; left: 50%; padding: 20px 20px 50px; } .sunshine_lecture .ads-wrapper .item_box span.item_btn{position: absolute; right: 20px; bottom: 20px; padding: 0;} } @media screen and (max-width: 1530px){ .lecture_block{ max-width: 1140px;} .sunshine_lecture .ads-wrapper .item_box figure { height:265px; } .sunshine_lecture .ads-wrapper .item_box figure img{ width: auto; object-fit: cover;} } @media screen and (max-width: 1200px){ .lecture_block{ max-width: 940px;} .sunshine_lecture .ads-wrapper .item_box figure { height: 300px; } } @media screen and (max-width: 991px){ .lecture_block{ max-width: 720px; padding: 0 15px;} .sunshine_lecture .ads-wrapper .item-box { flex: 0 0 100%; max-width: 100%; } .sunshine_lecture .ads-wrapper .item_box figure { height: auto; } .sunshine_lecture .ads-wrapper .item_box figure img { width: 100%; object-fit: initial; } .sunshine_lecture .ads-wrapper .item_box .item_more_txt>h3, .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(4), .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(5), .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(6){ padding: 0 20px;} .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(2){ padding-left: 48px;} .sunshine_lecture .ads-wrapper .item_box .item_more_txt>span:nth-child(2)::before{ left: 25px;} .sunshine_lecture .ads-wrapper .item_box span.item_btn{ padding: 0 20px 20px;} .sunshine_lecture .ads-wrapper .item_box h4{ display: none;} } /* 新版旅遊講座(模組v2) */ .lecture_tab .nav-link { font-size: 15px; padding: 0 19px; line-height: 42px; color: #999; } .lecture_tab .nav-tabs .nav-link:hover { border-color: #e9ecef #e9ecef #ddd; background-color: #eee; color: #555;} .lecture_tab .nav-tabs .nav-link:focus,.lecture_tab .nav-tabs .nav-item.show .nav-link,.lecture_tab .nav-tabs .nav-link.active{ border-color: #ddd #ddd #fff #ddd;color: #4d4d4d; background-color: #ffffff;} .sunshine_lecture .expand-graphics .item-box{ padding: 0;} .sunshine_lecture .expand-graphics .item_box a{ border: 1px solid #ddd; } .sunshine_lecture .expand-graphics .item_box figure{ position: relative; border-radius: 0; } .sunshine_lecture .expand-graphics .item_box figure::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; transition: opacity .4s ease; z-index: 1; } .sunshine_lecture .expand-graphics .item-box:nth-child(even) .item_box a figure { float: right; } .sunshine_lecture .expand-graphics .item_box:hover figure::before{ opacity: 0.7;} .sunshine_lecture .expand-graphics .item_box figure::after{content:"立即報名"; position: absolute; opacity: 0; top: 50%; left: 50%; color: #ffffff; border: 1px solid #ffffff; padding: 10px 22px; border-radius: 2px; z-index: 1; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-transition: opacity .4s ease, transform .4s ease; -moz-transition: opacity .4s ease, transform .4s ease; transition: opacity .4s ease, transform .4s ease; } .sunshine_lecture .expand-graphics .item_box:hover figure::after { opacity: 1; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .sunshine_lecture .expand-graphics .item_box:hover figure img { opacity: 1; } .sunshine_lecture .expand-graphics .item-box:nth-child(even) .item_box .item_more_txt{ left:0} .sunshine_lecture .expand-graphics .item_box h4{ position: absolute; top: 50px; right: 20px; font-size: 65px; font-family: 'Raleway', sans-serif !important; font-weight: 300; font-style: italic; margin-top: 0;} .sunshine_lecture .expand-graphics .item-box:nth-child(even) .item_box h4{ right:calc(50% + 20px);} .sunshine_lecture .expand-graphics .item_box h4::before { content: "/"; position: absolute; left: -28px; bottom: 10px; } .sunshine_lecture .expand-graphics .item_box h4 span { font-size: 65px; font-weight: 300; position: absolute; top: -45px; left: -75px; } .sunshine_lecture .expand-graphics .item_box span.item_btn{ background: transparent !important; color: #E74191; font-weight: 600; } .sunshine_lecture .expand-graphics .item-box:nth-child(even) .item_box span.item_btn{ right:calc(50% + 20px);} .sunshine_lecture .expand-graphics .item_box:hover span.item_btn{ display: block;} .sunshine_lecture .expand-graphics .item_box:hover span.item_btn_hover{ display: none;} .sunshine_lecture .expand-graphics .item_box .item_more_txt{display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;} .sunshine_lecture .expand-graphics .item_box .item_more_txt span.item_tag{ margin-left: 0; padding-left: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;} .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(2) { order: 1; position: relative; padding-left: 28px; } .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(2)::before { content: "\f130"; font: normal normal normal 14px/1 FontAwesome; position: absolute; top: 2px; left: 5px; color: #cccccc; font-size: 22px; } .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(3) { order: 2; position: relative; margin-left: 15px; padding-left: 32px; } .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(3)::before { content: "\f0c0"; font: normal normal normal 14px/1 FontAwesome; position: absolute; top: 3px; left: 5px; color: #cccccc; font-size: 18px; } .sunshine_lecture .expand-graphics .item_box .item_more_txt>h3 { order: 3; flex: 0 0 100%; margin: 10px 0 0; padding-right: 160px; font-size: 24px; font-weight: 600; line-height: 1.33; color: #333;} .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(4) { order: 4; flex: 0 0 100%; font-size: 14px; line-height: 1.2; margin-top: 10px;} .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(5) { order: 5; flex: 0 0 100%; font-size: 14px; line-height: 1.2; margin-top: 10px;} .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(6) { order: 6; flex: 0 0 100%; margin-top: 10px; font-size: 16px; line-height: 1.875;} @media screen and (min-width: 992px){ .sunshine_lecture .expand-graphics .item_box figure { width: 50%; margin: -1px 0 -1px -1px; } .sunshine_lecture .expand-graphics .item_box .item_more_txt{ width: 50%; position: absolute; top: 0; left: 50%; padding: 20px 20px 50px; } .sunshine_lecture .expand-graphics .item_box span.item_btn{position: absolute; right: 20px; bottom: 20px; padding: 0;} } @media screen and (max-width: 1530px){ .lecture_block{ max-width: 1140px;} .sunshine_lecture .expand-graphics .item_box figure { height:265px; } .sunshine_lecture .expand-graphics .item_box figure img{ width: auto; object-fit: cover;} } @media screen and (max-width: 1200px){ .lecture_block{ max-width: 940px;} .sunshine_lecture .expand-graphics .item_box figure { height: 300px; } } @media screen and (max-width: 991px){ .lecture_block{ max-width: 720px; padding: 0 15px;} .sunshine_lecture .expand-graphics .item-box { flex: 0 0 100%; max-width: 100%; } .sunshine_lecture .expand-graphics .item_box figure { height: auto; } .sunshine_lecture .expand-graphics .item_box figure img { width: 100%; object-fit: initial; } .sunshine_lecture .expand-graphics .item_box .item_more_txt>h3, .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(4), .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(5), .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(6){ padding: 0 20px;} .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(2){ padding-left: 48px;} .sunshine_lecture .expand-graphics .item_box .item_more_txt>span:nth-child(2)::before{ left: 25px;} .sunshine_lecture .expand-graphics .item_box span.item_btn{ padding: 0 20px 20px;} .sunshine_lecture .expand-graphics .item_box h4{ display: none;} } /* 郵輪專區 */ .cruise_slider a.carousel-item::before { content: ""; position: absolute; background: rgb(0 0 0 / 20%); width: 100%; height: 100%; left: 0; top: 0; } .cruise_slider .carousel-caption { top: 80px; right: initial; bottom: initial; left: 50%; transform: translate(-50%,0); padding-top: 0; padding-bottom: 0; } .cruise_slider .bs-carousel .carousel-item h5,.cruise_slider .bs-carousel .carousel-item p { font-weight: normal; text-shadow: none; } .cruise_slider .carousel-control-next,.cruise_slider .carousel-control-prev{ display: none;} .cruise_slider .carousel-indicators{ align-items: center;} .cruise_slider .carousel-indicators li{ width:8px; height: 8px; border-radius: 50%; opacity: 1;} .cruise_slider .carousel-indicators .active{ background-color: #06082b; width:12px; height: 12px;} .cruise_slider .bs-carousel .carousel-item .carousel-caption h5{ font-size: 24px; font-family: 'Raleway', sans-serif !important; font-weight: 300; } .cruise_slider .bs-carousel .carousel-item .carousel-caption h3{ font-size: 46px; letter-spacing: 0.08rem; font-weight: 300;} .cruise_slider .bs-carousel .carousel-item .carousel-caption span{ font-size: 20px; letter-spacing: 0.08rem; font-weight: 300;} .cruise_slider .bs-carousel .carousel-item .carousel-caption span:nth-child(2){ font-family: 'Raleway', sans-serif !important; } .cruise_slider .bs-carousel .carousel-item .carousel-caption p{ margin-bottom: 0;} .curise_block.block1{background-color: #EEF2F6;} .curise_block.block2{background-color: #d6e3f0;} .curise_block>.module-container>.main{ max-width: 1530px; margin: 0 auto; padding-top: 60px; padding-bottom: 60px; -ms-flex-wrap: nowrap; flex-wrap: nowrap;} .curise_block.block1>.module-container>.main{ padding-top: 80px;} .cruise_block_title { flex: 0; min-width: 329px; max-width: 329px;} .cruise_block_title img{ max-width: 100%;} .cruise_block_title p { margin: 0; } .cruise_block_title article { position: absolute; top: 43px; left: 50%; transform: translate(-50%, 0); width: 100%; text-align: center;} .cruise_block_title article h3 { font-size: 20px; color: #ffffff; margin-top: 28px; letter-spacing: 0.05rem; } .curise_block>.module-container>.main>.header-title.dp-tbl, .curise_block>.module-container>.main>.blk-tabs.dp-tbl {display: none; } .cruise_ship_type { flex: 1; padding-left:20px;} .cruise_ship_type .swiper-slide-style { border-radius: 0; margin-top: 0; margin-bottom: 0; box-shadow: 0px 4px 5.7px 0.3px rgb(0 0 0 / 8%); } .web-page-frame .widget-item.cruise_ship_type > .module-container { height: 100%; } .web-page-frame .widget-item.cruise_ship_type > .module-container > .main { margin: 0; height: 100%;} .web-page-frame .widget-item.cruise_ship_type > .module-container > .main>div:nth-child(2),.cruise_ship_type .swiper-container{ height: 100%; } .cruise_ship_type .swiper-container { padding: 0 30px; } .cruise_ship_type .swiper-slide .swiper-img { margin: 0 0 27px; background: #000000;} .cruise_ship_type .swiper-slide .swiper-img img { border-top-left-radius: 0; opacity: 1; border-top-right-radius: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .cruise_ship_type .swiper-slide:hover .swiper-img img{ opacity: 0.5;} .cruise_ship_type .swiper-slide .swiper-title { margin-bottom: 12px; padding: 0 22px; text-align: left; font-size: 20px; color: #333333; } .cruise_ship_type .swiper-slide .swiper-content { padding: 0px 22px; } .cruise_ship_type .swiper-slide .swiper-content>h4 { margin-bottom: 17px; font-size: 15px; text-align: left; color: #666666;font-family: 'Raleway', sans-serif !important; } .cruise_ship_type .swiper-slide .swiper-content button { position: absolute; right: 24px; bottom: 18px; outline: none; background: #ffffff; border: 1px solid #96a8b4; color: #96a8b4; font-size: 15px; padding: 3px 27px 5px; font-family: 'Raleway', sans-serif !important; letter-spacing: 0.05rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .cruise_ship_type .swiper-slide:hover .swiper-content button{ background: #96a8b4; border: 1px solid #96a8b4; color: #ffffff; } .cruise_ship_type .swiper-button-prev.swiper-button-white,.cruise_ship_type .swiper-button-next.swiper-button-white { width: 40px; height: 40px; background: #282828; border-radius: 50%; opacity: 0.8; } .cruise_ship_type .swiper-button-prev.swiper-button-white:hover, .cruise_ship_type .swiper-button-next.swiper-button-white:hover{ opacity: 1; } .cruise_ship_type [class*='swiper-button-']:after { font-size: 17px; font-weight: 600; color: #ffffff; background: transparent; padding: 5px 12px 5px 12px; } .cruise_ship_type .swiper-button-prev,.cruise_ship_type .swiper-container-rtl .swiper-button-next { left: 5px; } .cruise_ship_type .swiper-button-prev.swiper-button-disabled,.cruise_ship_type .swiper-button-next.swiper-button-disabled{ display: none;} @media (min-width: 1024px) and (max-width: 1300px){ .cruise_block_title { flex: 0; min-width: 260px; max-width: 260px; } } @media (min-width: 1200px) and (max-width: 1300px){ .cruise_ship_type .swiper-slide .swiper-img img { aspect-ratio: 5/3; object-fit: cover; object-position: center center; } } @media (min-width: 1024px) and (max-width: 1199px){ .cruise_ship_type .swiper-slide .swiper-img { margin: 0 0 18px; } .cruise_ship_type .swiper-slide .swiper-title { margin-bottom: 8px;} .cruise_ship_type .swiper-slide .swiper-img img { aspect-ratio: 5/4;} } @media (min-width: 992px) and (max-width: 1023px){ .cruise_ship_type .swiper-slide .swiper-img img { aspect-ratio: 5/2.6; } } @media screen and (max-width: 991px){ .curise_block.block1>.module-container>.main{ padding-top: 40px;} .curise_block>.module-container>.main{ -ms-flex-wrap: wrap; flex-wrap: wrap;} .cruise_ship_type { flex: 0 0 100%; max-width:100%; padding: 0;} .cruise_ship_type .swiper-slide .swiper-img { margin: 0 0 20px;} .cruise_ship_type .swiper-slide-style{ padding-bottom: 50px;} .cruise_block_title.mobile { flex: 0 0 100%; max-width: 100%; min-width: initial; margin-bottom: 30px; padding: 0 45px; } .cruise_block_title.mobile p.bg{background-position: right; background-repeat: no-repeat; height: 180px; position: relative;} .cruise_block_title article { top: 25px; left: 70px; width: auto; transform: initial; text-align: left; } } @media screen and (max-width: 767px){ .cruise_slider .carousel-caption { display: block !important; top: inherit; bottom: 40px; width: 100%;} .cruise_slider .bs-carousel .carousel-item .carousel-caption h5{ font-size: 18px; } .cruise_slider .bs-carousel .carousel-item .carousel-caption h3{ font-size: 28px; } .cruise_slider .bs-carousel .carousel-item .carousel-caption span{ font-size: 16px;;} .cruise_slider .carousel-indicators{margin-bottom: 5px;} .cruise_block_title article { left: 60px; } .cruise_ship_type .swiper-button-prev, .cruise_ship_type .swiper-container-rtl .swiper-button-next { left: 0; } .cruise_ship_type .swiper-button-next,.cruise_ship_type .swiper-container-rtl .swiper-button-prev { right: 0; } } @media screen and (max-width: 639px){ .cruise_ship_type .swiper-container { padding: 0 15px; } .cruise_block_title.mobile { margin-bottom: 20px; padding: 0 30px; } .cruise_block_title article { left: 0; top: 50%; transform: translate(0, -50%); text-align: center; width: 100%;} .cruise_block_title.mobile p.bg::before{content: ""; position: absolute; width: 100%; height: 100%; opacity: 0.7;} .sevenseas .cruise_block_title.mobile p.bg::before { content: ""; position: absolute; background: #3aa0ba; width: 100%; height: 100%; opacity: 0.7; } .oceania .cruise_block_title.mobile p.bg::before { content: ""; position: absolute; background: #28a1d9; width: 100%; height: 100%; opacity: 0.7; } .NCL .cruise_block_title.mobile p.bg::before { content: ""; position: absolute; background: #9a92cb; width: 100%; height: 100%; opacity: 0.7; } .cruise_block_title article h3{ margin-top: 18px;} } /* 郵輪船隻介紹 */ .ship_btn .function-row .row-content { justify-content: center; } .ship_btn .function-row li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .ship_btn .function-row li a { padding: 10px 40px; border-radius: 0; opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .ship_btn .function-row li a:hover { opacity: 0.5; } .ship_btn img { max-width: 16px; } .ship_btn .function-row li a h3 { margin-top: 0; } .ship-width{ max-width: 1330px; -ms-flex: 0 0 100%; flex: 0 0 100%; } .ship-block .img-mode .img-box{ text-align: center;} .ship-width h2{ font-size: 20px; font-weight: 600;} .ship-banner .ship-img{z-index: 0; margin-top: -100px;} .ship-banner .ship-img .carousel-caption { width: 100%; right: initial; bottom: initial; left: 50%; top: 50%; transform: translate(-50%, -50%); } .ship-banner .ship-img section{ display: flex; justify-content: center; align-items: center; flex-flow: column; height: 100%;padding: 0 10px;} .ship-banner .ship-img section .divider{ width:1px; height: 46px; background: #ffffff; margin: 0 15px 0 10px;} .ship-banner .ship-img .carousel-control-next,.ship-banner .ship-img .carousel-control-prev,.ship-banner .ship-img .carousel-indicators{ display:none;} .ship-banner .ship-img section section h2{ letter-spacing: 0.1em; display: flex; align-items: center; } .ship-banner .ship-img .bs-carousel .carousel-item section p{ text-shadow: none;} .ship-banner .banner-text{ height: 100px; } .ship-nav div.link-list{ min-height: 60px; position: absolute; bottom: 0; width: 100%; display: flex; justify-content: center; align-items: center; background: #D6E3F0; } .ship-nav div.link-list>ul { padding: 0; width: 1300px; height: 60px; display: flex;} .ship-nav div.link-list>ul li { width: 100%; border-left: 1px solid #b6d2f0;} .ship-nav div.link-list>ul li:last-child{ border-right: 1px solid #b6d2f0; } .ship-nav div.link-list>ul li a{ display: flex; font-size: 17px !important; padding: 10px; width: 100%; height: 100%; justify-content: center; align-items: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .ship-nav div.link-list>ul li a:hover{ opacity: 0.7; } .ship-nav div.link-list ul li i{ margin-right: 0;} .ship-title .header-title { position: relative;font-size: 32px; color: #11375c; display: table; margin: 40px auto; font-weight: 600; letter-spacing: 0.05em; } .ship-title .header-title::before{ content: ""; position: absolute; left: 50%; bottom: -10px; transform: translate(-50%,0); width:32px; height:9px; background-image: url("https://materials.fillo.com.tw/materials/sunshinetour/images/0e22cfae-e6d5-4825-b966-f323a0e0a2ec.png"); background-repeat: no-repeat; background-position: center;} .ship-nav .link-list.scroll-to-fixed-fixed{ height: 50px; min-height: 50px; } .ship-nav div.link-list.scroll-to-fixed-fixed>ul{height: 50px;} .ship-nav div.link-list.scroll-to-fixed-fixed>ul li a{ font-size: 16px !important;} .ship_intro .header-title{ font-size: 32px; color: #023d79; display: table; margin: 40px auto; font-weight: 600; letter-spacing: 0.05em; text-align: center;} .ship_intro section{ display: -ms-flexbox; display: flex; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 0 50px;} .ship_intro section .shipdata{ flex:1; text-align: center;} .ship_intro section .shipdata+.shipdata { border-left: 1px solid #ccc; } .ship_intro section .shipdata>div{ font-size:15px; color:#333333; margin-bottom: 10px;} .ship_intro section .shipdata>span{ font-family: 'Raleway', sans-serif !important; font-style: italic; font-size: 26px; line-height: initial; color: #333333; } .ship_intro section article{ margin:50px 0 20px;} /* .ship_food_block{ padding: 0; } */ .ship_food_left .module-container .main{ margin: 0; background-size: cover; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/6e495e0f-3f77-4d45-a7cf-54eb642098f4.jpeg); background-position:left top; background-repeat: no-repeat;} .ship_food_left .module-container .main::before { content: ""; position: absolute; background: rgb(90 105 115 / 60%); width: 100%; height: 100%; left: 0; top: 0; z-index: 0; } .ship_food_left .module-container, .ship_food_left .module-container .main { height: 100%; } .ship_food_left{ -ms-flex: 0 0 300px; flex: 0 0 300px; max-width:300px; } .ship_food_left section { padding-top: 127px; } .ship_food_left h2,.ship_food_left h3 { font-size: 32px; color: #ffffff; position: absolute; letter-spacing: 16px; left: 50%; top: 50%; transform: translate(-50%, -50%); writing-mode: vertical-lr; margin: 0; } .ship_food_left h2::before,.ship_food_left h3::before { content: ""; width: 60px; height: 1px; background: #ffffff; position: absolute; top: -20px; left: 50%; transform: translate(-50%, 0); } .ship_food_left h2::after,.ship_food_left h3::after { content: ""; width: 60px; height: 1px; background: #ffffff; position: absolute; bottom: -20px; left: 50%; transform: translate(-50%, 0); } .ship_food_left article { padding: 0 20px; } .ship_food_left p { margin-bottom: 0; line-height: 38px; } .ship_food_right { -ms-flex:1; flex:1; max-width:initial; } .ship_food_right>.module-container{ padding:0 0 0 30px;} .ship_food_right .swiper-slide .swiper-title { text-align: center; padding: 5px; font-size: 16px; font-weight: 400; line-height: 34px; position: absolute; bottom: 150px; left: 50%; transform: translate(-50%, 0); color: #ffffff; background: #11375C; width: 90%; } .ship_food_right .swiper-slide .swiper-content { height: 125px; -webkit-line-clamp: 5; color: #333333; font-size: 14px; letter-spacing: 0; line-height: 24px; margin-top: 30px; } .ship_food_right .swiper-slide .swiper-content>p { margin-bottom: 5px; } .ship_food_right .swiper-slide .swiper-content button { position: absolute; right: 24px; bottom: 18px; outline: none; background: #ffffff; border: 1px solid #96a8b4; color: #96a8b4; font-size: 15px; padding: 3px 27px 5px; font-family: 'Raleway', sans-serif !important; letter-spacing: 0.05rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .ship_food_right .swiper-slide:hover .swiper-content button{ background: #96a8b4; border: 1px solid #96a8b4; color: #ffffff; } .ship_food_right .swiper-button-prev.swiper-button-white,.ship_food_right .swiper-button-next.swiper-button-white { display: none; width: 40px; height: 40px; background: #ffffff; border: 1px solid #96a8b4; border-radius: 50%; opacity: 0.6; } .ship_food_right .swiper-button-prev.swiper-button-white:hover,.ship_food_right .swiper-button-next.swiper-button-white:hover{ opacity: 1; } .ship_food_right [class*='swiper-button-']:after { font-size: 17px; font-weight: 600; color: #96a8b4; background: transparent; padding: 5px 12px 5px 12px; } .ship_food_right .swiper-button-prev,.ship_food_right .swiper-container-rtl .swiper-button-next { left: 5px; } .ship_food_right .swiper-button-prev.swiper-button-disabled,.ship_food_right .swiper-button-next.swiper-button-disabled{ display: none;} .ship_food_right .swiper-pagination { padding-bottom: 20px;} .ship_food_right .swiper-pagination-bullet { width: 40px; height: 4px; border-radius: 0; background: rgb(255 255 255 / 30%); } .ship_food_right .swiper-pagination-bullet-active { background: rgb(255 255 255 / 80%); } .ship_food_right .swiper-slide-style{ border-radius: 0;} .ship_food_right .swiper-slide .swiper-img img { border-top-left-radius: 0; border-top-right-radius:0;} .ship_room .editor-content .room_content { background: #f2f2f2; height: 100%; padding: 10px; } .ship_room .mix-wrapper{ padding: 0;} .room_content_top{ display: flex; align-items: flex-start; padding: 20px 20px 15px; border-bottom: 1px solid #ddd; } .room_content_top_item{ color:rgb(17, 55, 92); font-size: 20px; line-height: 1.4; font-weight: bold; } .room_content_top_item:first-child { flex: 1; padding-right: 10px; } .room_content_top_item:first-child::before { content: '房型'; display: block; color:#7596b7; font-size: 14px; font-weight: 400; line-height: 1; margin: 0 0 3px; } .room_content_top_item:nth-child(2) { width: 50px; padding: 0 5px; } .room_content_top_item:nth-child(2)::before { content: '代碼'; display: block; color:#7596b7; font-size: 14px; font-weight: 400; line-height: 1; margin: 0 0 3px; } .room_content_top_item:last-child { width: 66px; text-align: center; padding: 0 5px; } .room_content_top_item:last-child::before { content: '容納人數'; display: block; color:#7596b7; font-size: 14px; font-weight: 400; line-height: 1; margin: 0 0 3px; } .room_content_bottom { padding: 10px 15px; } .room_content_bottom_text { color: #545454; font-size: 15px; line-height: 26px; letter-spacing: .05em; margin: 0; } .ship_facility .swiper-slide .swiper-title { padding: 5px; font-size: 16px; font-weight: 400; line-height: 34px; text-align: center; position: absolute; top: 0; left: 0; color: #ffffff; background: #023d79; letter-spacing: 1px; width: 100%; } .ship_facility .swiper-slide .swiper-content { height: auto; -webkit-line-clamp: 5; color: #333333; font-size: 14px; letter-spacing: 0; line-height: 24px; margin-top: 30px; } .ship_facility .swiper-slide .swiper-content button { position: absolute; right: 24px; bottom: 18px; outline: none; background: #ffffff; border: 1px solid #96a8b4; color: #96a8b4; font-size: 15px; padding: 3px 27px 5px; font-family: 'Raleway', sans-serif !important; letter-spacing: 0.05rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .ship_facility .swiper-slide:hover .swiper-content button{ background: #96a8b4; border: 1px solid #96a8b4; color: #ffffff; } .ship_facility .swiper-button-prev.swiper-button-white,.ship_facility .swiper-button-next.swiper-button-white { width: 40px; height: 40px; background: #282828; border-radius: 50%; opacity: 0.8; } .ship_facility .swiper-button-prev.swiper-button-white:hover,.ship_facility .swiper-button-next.swiper-button-white:hover{ opacity: 1; } .ship_facility [class*='swiper-button-']:after { font-size: 17px; font-weight: 600; color: #ffffff; background: transparent; padding: 5px 12px 5px 12px; } .ship_facility .swiper-button-prev,.ship_facility .swiper-container-rtl .swiper-button-next { left: 5px; } .ship_facility .swiper-button-prev.swiper-button-disabled,.ship_facility .swiper-button-next.swiper-button-disabled{ display: none;} .ship_facility .swiper-pagination-bullet { width: 40px; height: 4px; border-radius: 0; background: rgb(150 168 180 / 40%);} .ship_facility .swiper-pagination-bullet-active { background:#96A8B4; } .ship_facility .swiper-slide-style{ border-radius: 0; margin-top: 0; margin-bottom: 10px;} .ship_facility .swiper-slide .swiper-img img { border-top-left-radius: 0; border-top-right-radius:0;} .ship_deck_tab>.module-container>.main { margin-bottom: 15px; } .ship_deck_tab .nav-pills .nav-item + .nav-item { margin-left: 5px; } .ship_deck_tab .nav-pills .nav-link{ margin-bottom: 8px; border: 1px solid #023d79; background-color:#ffffff; border-radius: 0; color: #023d79; font-weight: 600; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .ship_deck_tab .nav-pills .nav-link:hover, .ship_deck_tab .nav-pills .nav-link.active{ background-color: #023d79; color: #ffffff;} .ship_deck_infopic { flex: 0 0 50%; max-width: 50%; text-align: center; } .fancybox-show-caption .fancybox-caption{ font-size: 20px; letter-spacing: 1px; padding-bottom: 50px;} .ship_info_block .header-title { text-align: center; padding-bottom: 10px; } /* .ship_deck .bs-carousel .carousel-item h5{ font-size: 20px; font-weight: 400; display: table; background: #000000bd; padding: 10px;} .ship_deck .carousel-fade .carousel-item { border: 1px solid #e7e7e7; } .ship_deck .carousel-control-next,.ship_deck .carousel-control-prev{ display: none;} .ship_deck .carousel-indicators{ align-items: center; bottom: -20px;} .ship_deck .carousel-indicators li{ width: 30px; height: 5px; border-radius: 0; opacity: 1; background-color: #96a8b4;} .ship_deck .carousel-indicators .active{ background-color: #06082b; width: 30px; height: 5px;} */ .ship_route .swiper-slide .swiper-title { padding: 0 22px; text-align: left; font-size: 20px; line-height: 34px; color: #333333; } .ship_route .swiper-slide-style { box-shadow: none; border-radius: 0; border: 1px solid #e7e7e7; margin-top: 0; margin-bottom: 0; } .ship_route .swiper-slide .swiper-img img { border-top-left-radius:0; border-top-right-radius: 0; } .ship_route .swiper-slide .swiper-content button { position: absolute; right: 24px; bottom: 18px; outline: none; background: #ffffff; border: 1px solid #96a8b4; color: #96a8b4; font-size: 15px; padding: 3px 27px 5px; font-family: 'Raleway', sans-serif !important; letter-spacing: 0.05rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .ship_route .swiper-slide:hover .swiper-content button{ background: #96a8b4; border: 1px solid #96a8b4; color: #ffffff; } .ship_route .swiper-button-prev.swiper-button-white,.ship_route .swiper-button-next.swiper-button-white { width: 40px; height: 40px; background: #282828; border-radius: 50%; opacity: 0.8; } .ship_route .swiper-button-prev.swiper-button-white:hover,.ship_route .swiper-button-next.swiper-button-white:hover{ opacity: 1; } .ship_route [class*='swiper-button-']:after { font-size: 17px; font-weight: 600; color: #ffffff; background: transparent; padding: 5px 12px 5px 12px; } .ship_route .swiper-button-prev,.ship_route .swiper-container-rtl .swiper-button-next { left: 5px; } .ship_route .swiper-button-prev.swiper-button-disabled,.ship_route .swiper-button-next.swiper-button-disabled{ display: none;} @media screen and (min-width:576px){ .fancybox-can-pan .fancybox-stage .fancybox-content,.fancybox-can-swipe .fancybox-stage .fancybox-content { transform: translate(-50%, -50%) !important; left: 50%; top: 50%; width: 100% !important; height: 50% !important; } .fancybox-content .fancybox-image{ height: auto;} } @media screen and (min-width:1199px){ .fancybox-can-pan .fancybox-stage .fancybox-content,.fancybox-can-swipe .fancybox-stage .fancybox-content { transform: translate(-50%, -50%) !important; left: 50%; top: 50%; width: 80% !important; height: 50% !important; } .fancybox-content .fancybox-image{ height: auto;} } @media screen and (max-width:1400px){ .ship-width { max-width: calc(100% - 30px); -ms-flex: 0 0 calc(100% - 30px); flex: 0 0 calc(100% - 30px); } .ship_food_left { -ms-flex: 0 0 220px; flex:0 0 220px; max-width: 220px;} .ship_food_right>.module-container { padding: 0 50px; } } @media screen and (max-width:991px){ .ship-nav .link-list.scroll-to-fixed-fixed{ top: 168px !important;} .ship_room .pic-content{ -ms-flex-order: 1; order: 1; } .ship_room .editor-content{ -ms-flex-order: 2; order: 2; } .ship-nav div.link-list>ul li a{ font-size: 16px !important;} .ship_deck_tab .dp-tbl { display: block; } .ship_deck_tab .nav-pills { overflow-x: scroll; overflow-y: hidden; flex-wrap: nowrap; justify-content: left !important;} .ship_deck_tab .nav-pills .nav-link { padding: 6px 20px; white-space: nowrap; font-size: 15px;} } @media screen and (max-width:767px){ /* 新版主圖(Bootstrap原生輪播) */ .ship-banner .banner-img .carousel-caption { display: block !important; transform: translate(-50%,-20%); top: 20%; } .ship-nav .link-list.scroll-to-fixed-fixed { height: 40px; min-height: 40px; top: 54px !important;} .ship-nav div.link-list.scroll-to-fixed-fixed>ul { height: 40px; } .ship_food_left { -ms-flex: 0 0 100%; flex: 0 0 100%; height: 140px; max-width: 100%;} .ship_food_left h2,.ship_food_left h3 { font-size: 24px; letter-spacing: 4px; writing-mode: initial; } .ship_food_left h2::before,.ship_food_left h3::before { content: ""; width: 30px; height: 1px; background: #ffffff; position: absolute; top: 50%; left: -40px; transform: translate(0, -50%); } .ship_food_left h2::after,.ship_food_left h3::after{ content: ""; transform: translate(0, -50%); width: 30px; height: 1px; background: #ffffff; position: absolute; left: initial; top: 50%; right: -40px;} .ship_food_right { -ms-flex: 0 0 100%; flex: 0 0 100%; } .ship_food_right>.module-container { padding: 0 15px; } .ship_intro section { padding: 0 15px; } .ship_intro section .shipdata{ flex: 0 0 50%; margin-bottom: 30px;} .ship_intro section .shipdata:nth-child(3){ border: 0;} } @media screen and (max-width:575px){ .ship-banner .banner-photo section{ padding: 0 30px; } .ship-banner .banner-photo section h2{ font-size: 28px; } .ship-title .header-title{font-size: 24px; margin: 40px auto; } .ship-nav div.link-list>ul li a { font-size: 15px !important; } .ship-nav div.link-list.scroll-to-fixed-fixed>ul li a{ padding: 5px; } .ship-nav div.link-list.scroll-to-fixed-fixed>ul li:first-child::before { top: 10px; } .ship-nav div.link-list.scroll-to-fixed-fixed>ul li:last-child::after { top: 10px; } .ship_info_block .header-title { font-size: 15px; } .ship_deck_infopic { flex: 0 0 100%; max-width: 100%; } } @media screen and (max-width:440px){ .ship-nav div.link-list>ul,.ship-nav div.link-list.scroll-to-fixed-fixed>ul{ display: block; overflow: scroll; white-space: nowrap;} .ship-nav div.link-list>ul li{ width: auto;} .ship-nav div.link-list>ul li:first-child { padding-left: 20px; position: relative;} .ship-nav div.link-list>ul li:last-child { padding-right: 24px; position: relative;} .ship-nav div.link-list>ul li:first-child::before,.ship-nav div.link-list>ul li:last-child::after{ content: ""; position: absolute; width: 20px; height: 20px; top: 15px; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/323643c0-ad89-4957-aa2d-bea0a1d0cc83.svg); background-repeat: no-repeat; background-position: center; opacity: 0.8; } .ship-nav div.link-list>ul li:first-child::before { left: 5px;} .ship-nav div.link-list>ul li:last-child::after{ right: 5px; } } /* ClubMed專區 */ .clubmed_slider a.carousel-item::before { content: ""; position: absolute; background: rgb(0 0 0 / 20%); width: 100%; height: 100%; left: 0; top: 0; } .clubmed_slider .carousel-caption { top: 50%; right: initial; bottom: initial; left: 50%; transform: translate(-50%,-50%); padding-top: 0; padding-bottom: 0; } .clubmed_slider .carousel-control-next,.clubmed_slider .carousel-control-prev{ display: none;} .clubmed_slider .carousel-indicators{ align-items: center;} .clubmed_slider .carousel-indicators li{ width:8px; height: 8px; border-radius: 50%; opacity: 1;} .clubmed_slider .carousel-indicators .active{ background-color: #06082b; width:12px; height: 12px;} .clubmed_slider .bs-carousel .carousel-item .carousel-caption h3{ font-size: 36px; letter-spacing: 0.3rem; font-weight: 600; margin-top: 15px; margin-bottom: 20px;} .clubmed_slider .bs-carousel .carousel-item .carousel-caption p{ margin-bottom: 0;} .clubmed_slider .bs-carousel .carousel-item p span { position: relative; font-weight: normal; text-shadow: none; letter-spacing: 1.15rem; padding:6px 0 6px 20px;} .clubmed_slider .bs-carousel .carousel-item p span::before { content: ""; position: absolute; width: 260px; height: 1px; background: #ffffff; top: 0; left: 20px; } .clubmed_slider .bs-carousel .carousel-item p span::after { content: ""; position: absolute; width: 260px; height: 1px; background: #ffffff; bottom: 0; left: 20px; } .clubmed_slider .slider_logo{ width: 260px; max-width: 100%;} .clubmed_block.block1{background-color: #EEF2F6;} .clubmed_block.block2{background-color: #d6e3f0;} .clubmed_block>.module-container>.main{ max-width: 1530px; margin: 0 auto; padding-top: 60px; padding-bottom: 60px; -ms-flex-wrap: nowrap; flex-wrap: nowrap;} .clubmed_block.block1>.module-container>.main{ padding-top: 80px;} .clubmed_block_title { flex: 0; min-width: 329px; max-width: 329px;} .clubmed_block_title img{ max-width: 100%;} .clubmed_block_title p { margin: 0; } .clubmed_block_title article { position: absolute; top: 43px; left: 50%; transform: translate(-50%, 0); width: 100%; text-align: center;} .clubmed_block_title article img { width: 80px; opacity: 90%; } .clubmed_block_title article h3 { font-size: 24px; color: #ffffff; margin-top: 18px; letter-spacing: 0.15rem; } .clubmed_block>.module-container>.main>.header-title.dp-tbl, .clubmed_block>.module-container>.main>.blk-tabs.dp-tbl {display: none; } .clubmed_ship_type { flex: 1; padding-left:20px;} .clubmed_ship_type .swiper-slide-style { border-radius: 0; margin-top: 0; margin-bottom: 0; box-shadow: 0px 4px 5.7px 0.3px rgb(0 0 0 / 8%); } .web-page-frame .widget-item.clubmed_ship_type > .module-container { height: 100%; } .web-page-frame .widget-item.clubmed_ship_type > .module-container > .main { margin: 0; height: 100%;} .web-page-frame .widget-item.clubmed_ship_type > .module-container > .main>div:nth-child(2),.clubmed_ship_type .swiper-container{ height: 100%; } .clubmed_ship_type .swiper-container { padding: 0 30px; } .clubmed_ship_type .swiper-slide .swiper-img { margin: 0 0 27px; background: #000000;} .clubmed_ship_type .swiper-slide .swiper-img img { border-top-left-radius: 0; opacity: 1; border-top-right-radius: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .clubmed_ship_type .swiper-slide:hover .swiper-img img{ opacity: 0.5;} .clubmed_ship_type .swiper-slide .swiper-title { margin-bottom: 12px; padding: 0 22px; text-align: left; font-size: 20px; color: #333333; } .clubmed_ship_type .swiper-slide .swiper-content { padding: 0px 22px; height: 70px; } .clubmed_ship_type .swiper-slide .swiper-content>h4 { margin-bottom: 17px; font-size: 15px; text-align: left; color: #666666;font-family: 'Raleway', sans-serif !important; } .clubmed_ship_type .swiper-slide .swiper-content>h5 { position: absolute; color: #b4b4b4; left: 23px; bottom: 18px; margin: 0; font-size: 15px;} .clubmed_ship_type .swiper-slide .swiper-content>h5 i{ margin-right: 5px;} .clubmed_ship_type .swiper-slide .swiper-content button { position: absolute; right: 24px; bottom: 18px; outline: none; background: #ffffff; border: 1px solid #96a8b4; color: #96a8b4; font-size: 15px; padding: 3px 27px 5px; font-family: 'Raleway', sans-serif !important; letter-spacing: 0.05rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .clubmed_ship_type .swiper-slide:hover .swiper-content button{ background: #96a8b4; border: 1px solid #96a8b4; color: #ffffff; } .clubmed_ship_type .swiper-button-prev.swiper-button-white,.clubmed_ship_type .swiper-button-next.swiper-button-white { width: 40px; height: 40px; background: #282828; border-radius: 50%; opacity: 0.8; } .clubmed_ship_type .swiper-button-prev.swiper-button-white:hover, .clubmed_ship_type .swiper-button-next.swiper-button-white:hover{ opacity: 1; } .clubmed_ship_type [class*='swiper-button-']:after { font-size: 17px; font-weight: 600; color: #ffffff; background: transparent; padding: 5px 12px 5px 12px; } .clubmed_ship_type .swiper-button-prev,.clubmed_ship_type .swiper-container-rtl .swiper-button-next { left: 5px; } .clubmed_ship_type .swiper-button-prev.swiper-button-disabled,.clubmed_ship_type .swiper-button-next.swiper-button-disabled{ display: none;} @media (min-width: 1024px) and (max-width: 1300px){ .clubmed_block_title { flex: 0; min-width: 260px; max-width: 260px; } } @media (min-width: 1200px) and (max-width: 1300px){ .clubmed_ship_type .swiper-slide .swiper-img img { aspect-ratio: 5/3; object-fit: cover; object-position: center center; } } @media (min-width: 1024px) and (max-width: 1199px){ .clubmed_ship_type .swiper-slide .swiper-img { margin: 0 0 18px; } .clubmed_ship_type .swiper-slide .swiper-title { margin-bottom: 8px;} .clubmed_ship_type .swiper-slide .swiper-img img { aspect-ratio: 5/4;} } @media (min-width: 992px) and (max-width: 1023px){ .clubmed_ship_type .swiper-slide .swiper-img img { aspect-ratio: 5/2.6; } } @media screen and (max-width: 991px){ .clubmed_block.block1>.module-container>.main{ padding-top: 40px;} .clubmed_block>.module-container>.main{ -ms-flex-wrap: wrap; flex-wrap: wrap;} .clubmed_ship_type { flex: 0 0 100%; max-width:100%; padding: 0;} .clubmed_ship_type .swiper-slide .swiper-img { margin: 0 0 20px;} .clubmed_ship_type .swiper-slide-style{ padding-bottom: 40px;} .clubmed_block_title.mobile { flex: 0 0 100%; max-width: 100%; min-width: initial; margin-bottom: 30px; padding: 0 45px; } .clubmed_block_title.mobile p.bg{background-position: right; background-repeat: no-repeat; height: 150px; position: relative;} .clubmed_block_title article { top: 25px; left: 70px; width: auto; transform: initial; } } @media (max-width: 991px) and (min-width: 640px){ .clubmed_ship_type .swiper-slide .swiper-content>h4{ margin-bottom: 12px;} .clubmed_ship_type .swiper-slide .swiper-content>h5{ position: initial; left: 0; bottom: initial;} } @media screen and (max-width: 767px){ .clubmed_slider .carousel-caption { display: block !important; width: 100%;} .clubmed_slider .bs-carousel .carousel-item .carousel-caption h3{ font-size: 26px; margin-bottom: 15px; } .clubmed_slider .bs-carousel .carousel-item .carousel-caption span{ font-size: 16px; letter-spacing: 0.9rem;} .clubmed_slider .bs-carousel .carousel-item p span::before,.clubmed_slider .bs-carousel .carousel-item p span::after{ width: 200px;} .clubmed_slider .slider_logo{width: 180px;} .clubmed_block_title article { left: 60px; } .clubmed_ship_type .swiper-button-prev, .clubmed_ship_type .swiper-container-rtl .swiper-button-next { left: 0; } .clubmed_ship_type .swiper-button-next,.clubmed_ship_type .swiper-container-rtl .swiper-button-prev { right: 0; } } @media screen and (max-width: 639px){ .clubmed_ship_type .swiper-container { padding: 0 15px; } .clubmed_block_title.mobile { margin-bottom: 20px; padding: 0 30px; } .clubmed_block_title article { left: 0; top: 50%; transform: translate(0, -50%); text-align: center; width: 100%;} .island .clubmed_block_title.mobile p.bg::before { content: ""; position: absolute; background: #00add5; width: 100%; height: 100%; opacity: 0.7; } .ski .clubmed_block_title.mobile p.bg::before { content: ""; position: absolute; background: #3d7ec7; width: 100%; height: 100%; opacity: 0.7; } .nature .clubmed_block_title.mobile p.bg::before { content: ""; position: absolute; background: #49aadd; width: 100%; height: 100%; opacity: 0.7; } .clubmed_block_title article h3{ margin-top: 18px;} .clubmed_ship_type .swiper-slide-style { padding-bottom: 10px; } } /* 自由行專區 */ .free_slider .carousel-caption { top: 50%; right: initial; bottom: initial; left: 50%; transform: translate(-50%,-50%); padding-top: 0; padding-bottom: 0; } .free_slider .carousel-control-next,.free_slider .carousel-control-prev{ display: none;} .free_slider .carousel-indicators{ align-items: center;} .free_slider .carousel-indicators li{ width:8px; height: 8px; border-radius: 50%; opacity: 1;} .free_slider .carousel-indicators .active{ background-color: #06082b; width:12px; height: 12px;} .free_slider .bs-carousel .carousel-item .carousel-caption h3{ letter-spacing: 0.3rem; font-weight: 600; margin-top: 0; margin-bottom: 0; font-size: 46px;} .free_slider .bs-carousel .carousel-item .carousel-caption p{ margin-bottom: 0; font-size: 24px; font-family: 'Raleway', sans-serif !important; font-weight: 300; text-shadow: none;} .free_block.block1{background-color: #EEF2F6;} .free_block.block2{background-color: #d6e3f0;} .free_block>.module-container>.main{ max-width: 1530px; margin: 0 auto; padding-top: 60px; padding-bottom: 60px; -ms-flex-wrap: nowrap; flex-wrap: nowrap;} .free_block.block1>.module-container>.main{ padding-top: 80px;} .free_block_title { flex: 0; min-width: 329px; max-width: 329px;} .free_block_title img{ max-width: 100%;} .free_block_title p { margin: 0; } .free_block_title article { position: absolute; top: 43px; left: 50%; transform: translate(-50%, 0); width: 100%; text-align: center;} .free_block_title article h3 { font-size: 24px; color: #ffffff;letter-spacing: 0.15rem; } .free_block_title article h4 { font-size: 20px; font-family: 'Raleway', sans-serif !important; font-weight: 300; color: #ffffff; margin: 0 20px; padding-bottom: 25px; border-bottom: 1px solid rgb(255 255 255 / 70%); } .free_block>.module-container>.main>.header-title.dp-tbl, .free_block>.module-container>.main>.blk-tabs.dp-tbl {display: none; } .free_trip { flex: 1; padding-left:20px;} .free_trip .swiper-slide-style { border-radius: 0; margin-top: 0; margin-bottom: 0; box-shadow: 0px 4px 5.7px 0.3px rgb(0 0 0 / 8%); } .web-page-frame .widget-item.free_trip > .module-container { height: 100%; } .web-page-frame .widget-item.free_trip > .module-container > .main { margin: 0; height: 100%;} .web-page-frame .widget-item.free_trip > .module-container > .main>div:nth-child(2),.free_trip .swiper-container{ height: 100%; } .free_trip .swiper-container { padding: 0 30px; } .free_trip .swiper-slide .swiper-img { margin: 0 0 27px; background: #000000;} .free_trip .swiper-slide .swiper-img img { border-top-left-radius: 0; opacity: 1; border-top-right-radius: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .free_trip .swiper-slide:hover .swiper-img img{ opacity: 0.5;} .free_trip .swiper-slide .swiper-title { margin-bottom: 12px; padding: 0 22px; text-align: left; font-size: 20px; color: #333333; } .free_trip .swiper-slide .swiper-content { padding: 0px 22px; height: 70px; } .free_trip .swiper-slide .swiper-content>h4 { margin-bottom: 17px; font-size: 15px; text-align: left; color: #666666;font-family: 'Raleway', sans-serif !important; } .free_trip .swiper-slide .swiper-content>h5 { position: absolute; color: #b4b4b4; left: 23px; bottom: 18px; margin: 0; font-size: 15px;} .free_trip .swiper-slide .swiper-content>h5 i{ margin-right: 5px;} .free_trip .swiper-slide .swiper-content button { position: absolute; right: 24px; bottom: 18px; outline: none; background: #ffffff; border: 1px solid #96a8b4; color: #96a8b4; font-size: 15px; padding: 3px 27px 5px; font-family: 'Raleway', sans-serif !important; letter-spacing: 0.05rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .free_trip .swiper-slide:hover .swiper-content button{ background: #96a8b4; border: 1px solid #96a8b4; color: #ffffff; } .free_trip .swiper-button-prev.swiper-button-white,.free_trip .swiper-button-next.swiper-button-white { width: 40px; height: 40px; background: #282828; border-radius: 50%; opacity: 0.8; } .free_trip .swiper-button-prev.swiper-button-white:hover, .free_trip .swiper-button-next.swiper-button-white:hover{ opacity: 1; } .free_trip [class*='swiper-button-']:after { font-size: 17px; font-weight: 600; color: #ffffff; background: transparent; padding: 5px 12px 5px 12px; } .free_trip .swiper-button-prev,.free_trip .swiper-container-rtl .swiper-button-next { left: 5px; } .free_trip .swiper-button-prev.swiper-button-disabled,.free_trip .swiper-button-next.swiper-button-disabled{ display: none;} @media (min-width: 1024px) and (max-width: 1300px){ .free_block_title { flex: 0; min-width: 260px; max-width: 260px; } } @media (min-width: 1200px) and (max-width: 1300px){ .free_trip .swiper-slide .swiper-img img { aspect-ratio: 5/3; object-fit: cover; object-position: center center; } } @media (min-width: 1024px) and (max-width: 1199px){ .free_trip .swiper-slide .swiper-img { margin: 0 0 18px; } .free_trip .swiper-slide .swiper-title { margin-bottom: 8px;} .free_trip .swiper-slide .swiper-img img { aspect-ratio: 5/4;} } @media (min-width: 992px) and (max-width: 1023px){ .free_trip .swiper-slide .swiper-img img { aspect-ratio: 5/2.6; } } @media screen and (max-width: 991px){ .free_block.block1>.module-container>.main{ padding-top: 40px;} .free_block>.module-container>.main{ -ms-flex-wrap: wrap; flex-wrap: wrap;} .free_trip { flex: 0 0 100%; max-width:100%; padding: 0;} .free_trip .swiper-slide .swiper-img { margin: 0 0 20px;} .free_trip .swiper-slide-style{ padding-bottom: 40px;} .free_block_title.mobile { flex: 0 0 100%; max-width: 100%; min-width: initial; margin-bottom: 30px; padding: 0 45px; } .free_block_title.mobile p.bg{background-position: right; background-repeat: no-repeat; height: 150px; position: relative;} .free_block_title article {top: 50%; left: 80px; transform: translate(0, -50%); width: auto; } .free_block_title article::before { content: ""; left: -50px; top: 15px; width: 40px; height: 1px; background: #ffffff; position: absolute; } .free_block_title article h4 { margin: 0; padding-bottom: 0; border-bottom: 0; } } @media (max-width: 991px) and (min-width: 640px){ .free_trip .swiper-slide .swiper-content>h4{ margin-bottom: 12px;} .free_trip .swiper-slide .swiper-content>h5{ position: initial; left: 0; bottom: initial;} } @media screen and (max-width: 767px){ .free_slider .carousel-caption { display: block !important; width: 100%;} .free_slider .bs-carousel .carousel-item .carousel-caption h3{ font-size: 26px; margin-bottom: 15px; } .free_block_title article { left: 60px; } .free_trip .swiper-button-prev, .free_trip .swiper-container-rtl .swiper-button-next { left: 0; } .free_trip .swiper-button-next,.free_trip .swiper-container-rtl .swiper-button-prev { right: 0; } } @media screen and (max-width: 639px){ .free_trip .swiper-container { padding: 0 15px; } .free_block_title.mobile { margin-bottom: 20px; padding: 0 30px; } .free_block_title article { left: 0; top: 50%; transform: translate(0, -50%); text-align: center; width: 100%;} .free_block .free_block_title.mobile p.bg::before{content: ""; position: absolute; width: 100%; height: 100%; opacity: 0.7; } .japan .free_block_title.mobile p.bg::before { content: ""; position: absolute; background: #80bc46; width: 100%; height: 100%; opacity: 0.7; } .europe .free_block_title.mobile p.bg::before { content: ""; position: absolute; background: #5896e1; width: 100%; height: 100%; opacity: 0.7; } .southeastasia .free_block_title.mobile p.bg::before { content: ""; position: absolute; background: #3bb1c2; width: 100%; height: 100%; opacity: 0.7; } .island .free_block_title.mobile p.bg::before { content: ""; position: absolute; background: #298dd4; width: 100%; height: 100%; opacity: 0.7; } .free_block_title article h3{ margin-top: 18px;} .free_trip .swiper-slide-style { padding-bottom: 10px; } } /* 主題自動上架專區 */ .auto-theme-push .swiper-container { padding: 0 45px 36px;} .auto-theme-push .swiper-slide .swiper-content{ padding: 0 20px 95px;} .auto-theme-push .swiper-slide-style{ height: auto; margin-top: 0; border-radius: 0; box-shadow: 0px 0px 0px rgb(209 209 209); border: 1px solid transparent;} .auto-theme-push .swiper-slide-style:hover{ box-shadow: 1px 3px 10px rgb(209 209 209); border: 1px solid #e74191;} .auto-theme-push .swiper-slide .swiper-img { margin: 0 0 32px; } .auto-theme-push .swiper-slide .swiper-img img { aspect-ratio: 5/4; object-fit: cover; object-position: center center; border-top-left-radius: 0; border-top-right-radius: 0; } .auto-theme-push .swiper-slide .swiper-title { position: relative; margin-bottom: 12px; padding: 0 25px; text-align: left; color: #06082b; font-size: 22px; line-height: 32px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;} .auto-theme-push .swiper-slide .swiper-title::before { content: ""; width: 6px; height: 24px; background: #e74191; position: absolute; left: 0; top: 3px; } .auto-theme-push .swiper-content h4 { font-size: 15px; color: #666666; letter-spacing: 0.02rem; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;} .auto-theme-push .swiper-slide .swiper-content article { position: absolute; height: 115px; width: calc( 100% - 40px); padding-top: 15px; bottom: 0; left: 25px;} .auto-theme-push .swiper-slide .swiper-content article::before{ content: ""; position: absolute; background-image: linear-gradient(to right, #545454 0%, #545454 10%, transparent 30%); background-size: 5px 1px; background-repeat: repeat-x; width: 100%; height: 1px; left: 0; top:0;} .auto-theme-push .swiper-content article p.date{ text-align: left; font-size: 16px; letter-spacing: 0.01rem; color: #666666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 22px; } .auto-theme-push .swiper-content article p.price{ position: absolute; right: 0; bottom:0; font-size: 23px; color: #e74191; letter-spacing: 0.01rem; padding-right: 18px; padding-left: 16px;} .auto-theme-push .swiper-content article p.price::before{ content: "$"; position: absolute; left: 0; bottom: 2px; font-size: 21px;} .auto-theme-push .swiper-content article p.price::after{ content: "起"; position: absolute; right: 0; bottom: 3px; font-size: 15px;} .auto-theme-push .swiper-pagination-bullet { width: 10px; height: 10px; background: rgb(26 28 128 / 50%); } .auto-theme-push .swiper-pagination-bullet:hover{background: rgb(26 28 128 / 80%); } .auto-theme-push .swiper-pagination-bullet-active { color: #fff; background: #e74191; } .auto-theme-push .swiper-button-prev.swiper-button-white,.auto-theme-push .swiper-button-next.swiper-button-white{ width: 40px; height: 40px; background: #282828; border-radius: 50%; opacity: 0.6;} .recent .swiper-button-prev.swiper-button-white:hover,.recent .swiper-button-next.swiper-button-white:hover{ opacity: 0.4;} .auto-theme-push [class*='swiper-button-']:after { font-size: 16px; font-weight: 600; background: transparent; padding: 5px 12px 5px 12px;} .auto-theme-push .swiper-button-prev,.auto-theme-push .swiper-container-rtl .swiper-button-next { left:0px; } .auto-theme-push .swiper-button-next,.auto-theme-push .swiper-container-rtl .swiper-button-prev { right: 0px;} .auto-theme-content .content-container{ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 25px; } /* .auto-theme-content .product_all { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 25px; } */ .auto-theme-content .product_box { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; margin: 0 25px 50px; padding-bottom: 110px; background-color: #ffffff; -ms-flex: 0 0 calc(33.33333% - 50px); flex: 0 0 calc(33.33333% - 50px); max-width: calc(33.33333% - 50px); position: relative; position: relative; width: 100%; border:1px solid #e5e5e5; box-shadow: 3px 3px 0px rgb(229 229 229); -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .auto-theme-content .product_img{ position: relative; overflow: hidden; -webkit-order: 1; order:1; } .auto-theme-content .product_box:hover .product_img a::after { content: ""; background: rgb(0 0 0 / 40%); position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .auto-theme-content .product_box:hover .product_img img{ transition: 0.5s; -webkot-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);} .auto-theme-content .product_img img{ max-width:100%; aspect-ratio: 5/3.5; object-fit: cover; object-position: center center; transition: 0.5s;} .auto-theme-content .product_name { margin-bottom: 18px; padding-top: 20px; -webkit-order: 2; order:2; } .auto-theme-content .product_name,.auto-theme-content .departure_date{ margin-left: 20px; margin-right: 20px;} .auto-theme-content .departure_date{ position: absolute; padding-top: 15px; bottom: 0; left: 0; width: calc( 100% - 40px); height: 110px; padding-top: 15px; -webkit-order: 4; order:4; font-size: 15px; color:#666666; } .auto-theme-content .departure_date::before { content: ""; position: absolute; background-image: linear-gradient(to right, #545454 0%, #545454 10%, transparent 30%); background-size: 5px 1px; background-repeat: repeat-x; width: 100%; height: 1px; left: 0; top: 0; } .auto-theme-content .product_name,.auto-theme-content .product_name a { text-align: left; color: #06082b; font-size: 22px; line-height: 32px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-decoration: none; } .auto-theme-content .departure_date a:hover { text-decoration: underline;} .auto-theme-content .departure_date a { color: #666666; } .auto-theme-content .product_price{ position: absolute; -webkit-order: 5; order:5; margin: 10px 15px; right: 0; bottom: 0px;} .auto-theme-content .product_price span { display: block; font-size: 23px; color: #e74191; letter-spacing: 0.01rem;} .auto-theme-content .product_price span::first-letter{ font-size: 21px; padding-right: 3px;} /* .auto-theme-content .product_price::after { content: "起"; position: absolute; right: 5px; bottom: 3px; color: #e74191; font-size: 15px; } */ /* .auto-theme-content .product_price::before { content: ""; background: #ffffff; width: 22px; height: 30px; position: absolute; right: 0; top: 0; } */ .auto-theme-content .product_offer{ position:relative; -webkit-order: 3; order:3; margin: 0 15px 15px; font-size: 15px; line-height: 1.5em; color:#666666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } @media (max-width: 1023px){ .auto-theme-push .swiper-container { padding: 0 25px 36px; } .auto-theme-content .content-container{ padding:0;} /* .auto-theme-content .product_all { padding:0; } */ .auto-theme-content .product_box{ -ms-flex: 0 0 calc(50% - 50px); flex: 0 0 calc(50% - 50px); max-width: calc(50% - 50px); } } @media (max-width: 767px){ .auto-theme-content .product_box{ -ms-flex: 0 0 calc(100% - 50px); flex: 0 0 calc(100% - 50px); max-width: calc(100% - 50px); } } @media (max-width: 575px){ .auto-theme-push .swiper-slide .swiper-title {font-size: 20px; line-height: 29px;} .auto-theme-push .swiper-content article p.price{ font-size: 20px;} .auto-theme-push .swiper-content article p.price::before{ font-size: 18px;} .auto-theme-content .product_name{font-size: 20px; line-height: 29px; } .auto-theme-content .product_price span{ font-size: 20px;} .auto-theme-content .product_price span::first-letter{ font-size: 18px;} .auto-theme-content .product_price::before{ width: 20px;} } /* 土耳其專區 */ .turkey-width{ max-width: 1500px; -ms-flex: 0 0 100%; flex: 0 0 100%; } .turkey_top .module-container .main .bgfixed > a{vertical-align:initial;} .turkey_top .top_title { position: relative; background: url(https://materials.fillo.com.tw/materials/sunshinetour/images/17bf37da-2400-4b8f-8c64-40dd3c7f09ac.png); background-position: center; background-repeat: no-repeat; height: 281px; font-family: 'Noto Serif TC', serif; text-align: center; margin-top: 60px; padding-top: 120px; } .turkey_top .top_title h1,.turkey_top .top_title h2{ color: #ffffff;} .turkey_top .top_title h1{ font-size: 3.1rem; font-weight: 700; letter-spacing: 0.1rem; text-shadow: 2px 2px 2px rgb(0 0 0 / 40%);} .turkey_top .top_title h2{ font-size: 2.7rem; font-weight: 600; letter-spacing: 0.1rem; text-shadow: 2px 2px 2px rgb(0 0 0 / 40%); } .turkey_top .top_title .top_award { position: absolute; right: 80px; bottom: -50px; } .turkey_reason { padding: 74px 65px 150px; } .turkey_reason .module-container .main .bgfixed > a{vertical-align:initial;} .turkey_reason::before { content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/c6527244-0bd0-4ad3-856f-038f94ef8e77.png); background-position: left; background-repeat: no-repeat; width: 184px; height: 235px; left: 0; top: 12px; } .turkey_reason .reason_content { padding: 70px 30px 30px 145px; } .turkey_reason .reason_content h3{ margin-bottom: 28px; font-family: 'Noto Serif TC', serif; font-size: 2.7rem; font-weight: 600; letter-spacing: 0.1rem; color: #092554;} .turkey_reason .reason_content div{ position: relative; font-size: 24px; color: #333333; line-height: 36px; margin-bottom: 8px; padding-left: 38px;} .turkey_reason .reason_content div::before { content: ""; position: absolute; width: 33px; height: 38px; left: 0; top: -2px; } .turkey_reason .reason_content div:nth-child(2):before{ background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/724ad2a0-76f3-4c08-96cf-13feab4bf910.png); background-repeat: no-repeat; background-position: center; } .turkey_reason .reason_content div:nth-child(3):before{ background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/585d936b-0170-4faa-8051-cad164280385.png); background-repeat: no-repeat; background-position: center; } .turkey_reason .reason_content div:nth-child(4):before{ background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/028c099c-8879-4634-876c-991bbdf761ed.png); background-repeat: no-repeat; background-position: center; } .turkey_reason .reason_content div:nth-child(5):before{ background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/0507cc70-7bfa-4715-850c-3cf12d64b8de.png); background-repeat: no-repeat; background-position: center; } .turkey_reason .reason_content div:nth-child(6):before{ background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/6b69e28a-dbca-4a07-84a0-97d6c0f2300e.png); background-repeat: no-repeat; background-position: center; } .reason_icons_block { position: absolute; bottom: 0; } .reason_icons_block .reason_icons { position: absolute; bottom: 25px; left: 50%; display: flex; width: 75%; justify-content: space-between; transform: translate(-50%, 0); } .reason_icons_block .reason_icons>div:nth-child(even) { margin-top: 30px; } #service_block1,#service_block3,#service_block4,#service_block5,#service_block6,#service_block7{ font-size: 0; } .turkey_service1 { margin-top: 60px; } .turkey_service1 .hover-wall>.container-fluid>.row, .turkey_service3 .hover-wall>.container-fluid>.row { padding: 0 135px; justify-content: space-between;} .turkey_service1 .hover-wall>.container-fluid>.row>div, .turkey_service3 .hover-wall>.container-fluid>.row>div { padding: 0; -ms-flex: 0 0 calc(50% - 40px); flex: 0 0 calc(50% - 40px); max-width: calc(50% - 40px); } .turkey_service1 .hover-wall .icon_info,.turkey_service3 .hover-wall .icon_info{ border-radius: 0; box-shadow: none; height: 100%; padding-bottom: 40px;} .turkey_service1 .hover-wall .icon_info::before,.turkey_service3 .hover-wall .icon_info::before { content: ""; background: #bb913b; width: 2px; height: 100%; position: absolute; } .turkey_service1 .hover-wall .icon_info:hover,.turkey_service3 .hover-wall .icon_info:hover{ bottom:0; box-shadow: none;} .turkey_service1 .hover-wall .icon_info figure,.turkey_service3 .hover-wall .icon_info figure{ margin-bottom: 40px;} .turkey_service1 .hover-wall .icon_info h3,.turkey_service3 .hover-wall .icon_info h3{ font-size: 24px; padding: 0px 40px;} .turkey_service1 .hover-wall .icon_info p.animate-text , .turkey_service3 .hover-wall .icon_info p.animate-text { padding: 0px 40px; font-size: 18px; letter-spacing: 0; line-height: 32px; margin-bottom: 0; } .turkey_service1 .hover-wall .htpro_tit,.turkey_service3 .hover-wall .htpro_tit{ display: none;} .turkey_service1 .hover-wall figure .overlay,.turkey_service3 .hover-wall figure .overlay{ display: none;} .turkey_service2{ margin: 25px 0 50px; padding: 0 150px; } .turkey_service2 .service_block2 { display: flex; flex-wrap: wrap; position: relative; align-items: center; } .turkey_service2 .service_block2::before{ content: ""; position: absolute; width: 70%; height: 100%; right: 0; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 9%, rgba(255,255,255,1) 27%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 9%,rgba(255,255,255,1) 27%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 9%,rgba(255,255,255,1) 27%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .turkey_service2 .service2_img,.turkey_service2 .service2_info { flex: 0 0 50%; max-width: 50%; } .turkey_service2 .service2_img img{ max-width: 100%; max-height: 383px; aspect-ratio: 5/3; object-fit: cover; object-position: center center;} .turkey_service2 .service2_info{ z-index: 1; padding: 0px 40px 0px 80px; position: relative;} .turkey_service2 .service2_info::before { content: ""; background: #bb913b; width: 2px; height: 100%; position: absolute; left: 40px; } .turkey_service2 .service2_info h3{ font-size: 24px;} .turkey_service2 .service2_info .service2_text{font-size: 18px; letter-spacing: 0; line-height: 32px; font-family: '微軟正黑體', Arial; text-align: justify;} .turkey_airplane{ padding: 70px 65px 0; } .turkey_airplane .module-container .main .bgfixed > a{ vertical-align: initial;} .turkey_airplane::before { content: ""; position: absolute; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/160cd0fd-86d9-48a0-9591-9ab515d9a922.png); background-position: left; background-repeat: no-repeat; width: 184px; height: 235px; left: 0; top: 12px; } .turkey_airplane .airlane_content { padding: 77px 126px; display: flex; flex-wrap: wrap; color: #ffffff;} .turkey_airplane .airlane_content h3{ margin-bottom: 0; font-family: 'Noto Serif TC', serif; font-size: 2.7rem; font-weight: 600; letter-spacing: 0.1rem; line-height: 3.8rem; flex: 0 0 60%; max-width: 60%;} .web-page-frame .turkey_airplane ul { list-style: none; flex: 0 0 40%; max-width: 40%; margin-bottom: 0; } .turkey_airplane .airlane_content li { position: relative; font-size: 24px; font-weight: 400; line-height: 42px; padding-left: 28px; text-align: justify; } .turkey_airplane .airlane_content li::before { content: ""; width: 12px; height: 12px; position: absolute; left: 0; top: 15px; background: #ffffff; border-radius: 2px; } .turkey_airplane_img{ padding: 10px 50px 0 50px;} .turkey_airplane_img .airplane_img1,.turkey_airplane_img .airplane_img2,.turkey_airplane_img .airplane_img3{ display: inline-block; width: calc(33.333333% + 23.3333px);} .turkey_airplane_img .airplane_img1{-webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%); clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);} .turkey_airplane_img .airplane_img2{-webkit-clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%); clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%); margin-left: -40px;} .turkey_airplane_img .airplane_img3{-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 10% 50%); clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 10% 50%); margin-left: -40px;} .turkey_footer { margin-top: 55px; } .turkey_footer .bgfixed{ padding-top: 20px; text-align: center;} .turkey_footer .module-container .main .bgfixed > a{ padding-top: 160px; vertical-align: initial; font-size: 28px; font-weight: 600; color: #333333;} .footer_slogan{ letter-spacing: 1px; line-height: 46px;} .turkey_footer_icon { position: absolute; bottom: 60px; left: 50%; width: 880px; transform: translate(-50%, 0); display: flex; flex-wrap: wrap; justify-content: space-between; } .turkey_footerpic_left,.turkey_footerpic_right{ position: absolute;} .turkey_footerpic_left { bottom: 160px; left: 40px; } .turkey_footerpic_left img{ width: 250px;} .turkey_footerpic_right1 { position: absolute; right: 40px; bottom: 340px; z-index: 1; } .turkey_footerpic_right1 img { width: 160px; } .turkey_footerpic_right2 { position: absolute; right: 100px; bottom: 190px; } .turkey_footerpic_right2 img{ width: 200px;} .turkey_footer_button{ margin-bottom: 60px;} .turkey_btn { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;padding: 50px 30px 70px; } .turkey_btn>div { border: 1px solid #ffd890; background-color: transparent; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} .turkey_btn>div:hover{ border: 1px solid #af873b; background-color:#af873b;} .turkey_btn>div+div { margin-left: 40px; } .turkey_btn>div a { color: #fff1d6; letter-spacing: 1.5px; font-size: 18px; text-decoration: none; padding: 10px 40px; display: block;} @media (max-width: 1500px){ .turkey-width { max-width: 1140px; } .turkey_top .top_title{ padding-top: 140px;} .turkey_top .top_title h1 { font-size: 2.4rem; } .turkey_top .top_title h2{ font-size: 1.8rem;} .turkey_top .top_title .top_award { right: 40px; } .reason_icons_block .reason_icons{ width: 85%;} .turkey_airplane .airlane_content{ padding: 77px 80px;} .turkey_airplane .airlane_content h3 { font-size: 2rem; line-height: 3.2rem; } .turkey_airplane .airlane_content li { font-size: 18px; padding-left: 22px; line-height: 32px; } .turkey_airplane .airlane_content li::before{ top: 10px;} } @media (max-width: 1199px){ .turkey-width { max-width: 100%; } .turkey_top_block{ margin-top: 0 !important;} .turkey_top .top_title { padding-top: 125px; } .turkey_top .top_title .top_award{ top: 220px;} .turkey_top .top_title .top_award img { width: 90%; } .reason_icons_block .reason_icons a { padding: 5px; display: block; } .reason_icons_block .reason_icons img { max-width: 100%; } .turkey_airplane_img .airplane_img1, .turkey_airplane_img .airplane_img2, .turkey_airplane_img .airplane_img3{ width: calc(33.333333% + 17px)} .turkey_airplane_img .airplane_img2,.turkey_airplane_img .airplane_img3{ margin-left: -30px;} .turkey_footer_button{ margin-bottom: 0;} } @media (max-width: 991px){ .turkey_footer_icon{ width: 90%;} .turkey_footer_icon img { max-width: 100%; } .turkey_reason .reason_content { padding: 70px 30px 30px 60px; } .turkey_reason .reason_content h3{ font-size: 1.8rem; margin-bottom: 16px;} .turkey_reason .reason_content div { font-size: 18px; line-height: 28px; padding-left: 30px; } .turkey_reason .reason_content div::before { width: 30px; height: 35px; } .turkey_service1 .hover-wall>.container-fluid>.row, .turkey_service3 .hover-wall>.container-fluid>.row { padding: 0 50px; } .turkey_service1 .hover-wall>.container-fluid>.row>div, .turkey_service3 .hover-wall>.container-fluid>.row>div { -ms-flex: 0 0 calc(50% - 20px); flex: 0 0 calc(50% - 20px); max-width: calc(50% - 20px); } .turkey_service2 { padding: 0 65px;} .turkey_service2 .service2_info h3{ font-size: 18px;} .turkey_service2 .service2_info .service2_text { font-size: 14px; line-height: 24px; } .turkey_service1 .hover-wall .icon_info h3, .turkey_service3 .hover-wall .icon_info h3 { font-size: 18px; } .turkey_service1 .hover-wall .icon_info p.animate-text, .turkey_service3 .hover-wall .icon_info p.animate-text{ font-size: 14px; line-height: 24px; } .turkey_airplane .airlane_content { padding: 30px 30px 0 70px; } .turkey_airplane .airlane_content h3 { font-size: 1.6rem; line-height: 2rem; flex: 0 0 100%; max-width: 100%; margin-bottom: 10px; } .web-page-frame .turkey_airplane ul{flex: 0 0 100%; max-width: 100%; } .turkey_airplane .airlane_content li{ font-size: 16px; padding-left: 16px;} .turkey_airplane .airlane_content li::before { top: 12px; width: 8px; height: 8px; } .turkey_airplane_img .airplane_img2, .turkey_airplane_img .airplane_img3 { margin-left: -20px; } .turkey_airplane_img .airplane_img1, .turkey_airplane_img .airplane_img2, .turkey_airplane_img .airplane_img3 { width: calc(33.333333% + 10.5px); } .footer_slogan { line-height: 40px; font-size: 20px; } .turkey_footerpic_left img,.turkey_footerpic_right1 img,.turkey_footerpic_right2 img{ width: 80%; } .turkey_footerpic_left { bottom: 280px; left: 20px; } .turkey_footerpic_right1{ right: 20px; bottom: 380px;} .turkey_footerpic_right2 { right: 40px; bottom: 290px; } } @media (max-width: 767px){ .turkey_top .top_title { padding-top: 110px; height: 220px; } .turkey_top .top_title h1 { font-size: 1.8rem; } .turkey_top .top_title h2 { font-size: 1.1rem; letter-spacing: 0; } .turkey_top .top_title .top_award { top: -40px; right: 0px; } .turkey_top .top_title .top_award img { width: 80%;} .turkey_top .module-container .main .bgfixed, .turkey_top .module-container .main .bgfixed > a{ min-height: 700px !important;} .turkey_reason { padding: 20px 25px 100px; } .turkey_reason .reason_content { padding: 70px 20px 30px 20px; } .turkey_reason .reason_content h3 { font-size: 1.4rem; } .turkey_reason::before { background-position: left top; background-size: 100px; width: 50%; height: 100%; left: 0; top: -50px;} .turkey_reason .reason_content div { font-size: 15px; line-height: 20px; padding-left: 25px; } .turkey_reason .reason_content div::before { width: 20px; height: 25px; background-size: 90%; } .turkey_reason .module-container .main .bgfixed, .turkey_reason .module-container .main .bgfixed > a{ min-height: 700px !important;} .reason_icons_block .reason_icons { bottom: 20px; flex-wrap: wrap; width: 95%; justify-content: center;} .reason_icons_block .reason_icons>div { flex: 0 0 33.333333%; max-width: 33.333333%; } .reason_icons_block .reason_icons>div:nth-child(even) { margin-top: 0; } .turkey_service1 .hover-wall>.container-fluid>.row, .turkey_service3 .hover-wall>.container-fluid>.row { padding: 0 10px; } .turkey_service1 .hover-wall>.container-fluid>.row>div, .turkey_service3 .hover-wall>.container-fluid>.row>div { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .turkey_service2 .service2_img, .turkey_service2 .service2_info { flex: 0 0 100%; max-width: 100%; } .turkey_service2 { padding: 0 25px; margin: 0 0 1.5em; } .turkey_service2 .service_block2::before{ display: none;} .turkey_service2 .service2_info { z-index: 1; padding: 40px; position: relative; background: #ffffff; } .turkey_service2 .service2_info::before { left: 0; top: 0; } .turkey_service2 .service2_img img { max-height: initial; aspect-ratio: initial; object-fit: initial; } .turkey_airplane { padding: 20px 25px 0; } .turkey_airplane::before{ background-position: left top; background-size: 100px; width: 50%; height: 100%; left: 0; top: -50px;} .turkey_airplane .airlane_content { padding: 30px 30px 0 60px; } .turkey_airplane .airlane_content h3 { font-size: 1.3rem; line-height: 1.8rem; } .turkey_airplane .airlane_content li { font-size: 15px; padding-left: 12px; } .turkey_airplane_img { padding: 10px 10px 0 10px; } .turkey_airplane_img .airplane_img1, .turkey_airplane_img .airplane_img2, .turkey_airplane_img .airplane_img3 { width: 100%; clip-path: initial;} .turkey_airplane_img .airplane_img2, .turkey_airplane_img .airplane_img3 { margin-left: 0; } .turkey_footerpic_left img, .turkey_footerpic_right1 img, .turkey_footerpic_right2 img{ display: none;} .turkey_footer_icon img { width: auto; max-height: 80px; } .turkey_btn{ padding: 50px 10px 70px;} .turkey_btn>div+div { margin-left: 20px; } } @media (max-width: 500px){ .turkey_airplane .module-container .main .bgfixed{ background-position: -400px bottom; min-height: 560px !important; } .turkey_footer_icon img { width: auto; max-height: 60px; } .footer_slogan { line-height: 35px;} .turkey_footer .module-container .main .bgfixed > a{ padding-top: 100px;} .turkey_footer .module-container .main .bgfixed, .turkey_footer .module-container .main .bgfixed > a{ min-height: 350px !important;} .turkey_footer_icon { bottom: 40px; } .turkey_btn { padding: 40px 10px 40px; } } /* 時計顯示模組共用 */ @media (max-width: 767px){ .sunshine_timer .flipTimer h2{ font-size:25px; margin-bottom: 20px;} .sunshine_timer .flipTimer{ font-size: 30px; line-height: 30px;} .sunshine_timer .flipTimer .seconds,.sunshine_timer .flipTimer .minutes,.sunshine_timer .flipTimer .hours,.sunshine_timer .flipTimer .days{ height: 38px;} .sunshine_timer .flipTimer .digit-set{width: 38px;} .sunshine_timer .flipTimer .digit > div.shadow-bottom,.sunshine_timer .flipTimer .digit > div.shadow-top{width: 36px;} .sunshine_timer .flipTimer .word { font-size: 20px; margin-left: 10px; } } @media (max-width: 575px){ .sunshine_timer .flipTimer h2{ font-size:20px} .sunshine_timer .flipTimer { font-size: 18px; line-height: 20px; padding: 20px 0; width: 100%; } .sunshine_timer .flipTimer .seconds,.sunshine_timer .flipTimer .minutes,.sunshine_timer .flipTimer .hours,.sunshine_timer .flipTimer .days { height: 24px; } .sunshine_timer .flipTimer .digit > div.shadow-bottom,.sunshine_timer .flipTimer .digit > div.shadow-top{width: 20px;} .sunshine_timer .flipTimer .digit-set { width: 22px; border-radius: 6px; } .sunshine_timer .flipTimer .word { font-size: 15px; margin-left: 5px; } .sunshine_timer .flipTimer .digit > div{ padding: 0 5px;} .sunshine_timer .flipTimer .digit > div.digit-top,.sunshine_timer .flipTimer .digit > div.shadow-top { border-radius: 5px 5px 0 0;} .sunshine_timer .flipTimer .digit > div.digit-bottom,.sunshine_timer .flipTimer .digit > div.shadow-bottom { border-radius: 0 0 5px 5px; } } /* 表單按鈕 */ .contac_form .form-row:last-child .form-group .btn-primary:disabled,.contac_form .form-row:last-child .form-group .btn-primary.disabled, .contac_form .form-row:last-child .form-group .btn-primary:active,.contac_form .form-row:last-child .form-group .btn-primary.active, .contac_form .form-row:last-child .form-group .btn-primary:focus,.contac_form .form-row:last-child .form-group .btn-primary.focus{ color: #ffffff; background: #b6b6b6 !important; border-color: #b6b6b6 !important; cursor: default !important; } /**** 公版樣式調整 ****/ /* 公版GO TOP */ .go-to-top{display: none !important;} /* 搜尋列表 */ .search_con .filter_list{display: none;} .search_con .list_con{ flex: 0 0 100%; max-width: 100%;} .WinChrome section.group_banner .search-area .search-box, .WinIe section.group_banner .search-area .search-box { height: 70px;} .WinChrome section.group_banner .search-area, .WinIe section.group_banner .search-area { min-height: 70px; bottom: calc(50% - (70px/2)); } section.group_banner .search-area .search-box .select-goal:nth-child(4), .WinIe section.group_banner .search-area .search-box .select-goal:nth-child(4) { display: none; } .WinChrome section.group_banner .search-area .search-box .select-goal, .WinChrome section.group_banner .search-area .search-box .select-place, .WinIe section.group_banner .search-area .search-box .select-goal, .WinIe section.group_banner .search-area .search-box .select-place{ width: calc(18% - 10px);} .WinChrome section.group_banner .search-area .search-box .select-status, .WinIe section.group_banner .search-area .search-box .select-status{ display: none !important;} .search-area .search-box .select-place .title i, .search-area .search-box .select-goal .title i, .search-area .search-box .select-goal .title i, .search-area .search-box .select-date .title i, section.search_banner .search-area .search-box .select-input .data-icon-search{color: #e74191; } .search_table tbody td.go-airport h6 { font-size: 0.875rem; } .list_con .style_icon{ display: none;} .list_con .title>.text-right>p>span { color: #1b1c80; } .search_table .thead,.search_table .thead:hover{background: #1b1c80; font-size: 16px;} .list_con .search_table tbody td.tour-name a.title_main{ color: #333;} .list_con .search_table .main_words .title_main:hover { color: #1b1c80 !important; } .list_con .search_table tbody td.tour-price span { font-size: 1.4rem; font-family: 'Raleway', sans-serif !important; font-size: 1.4rem; color: #e74191 !important; font-weight: 500; } .search_banner .search-area .search-box .search-btn { background: #e74191;} section.search_con .pagination .page-item .page-link:hover, section.search_con .pagination .page-item .page-link:active{border-color: rgb(231 65 145 / 50%); color: #e74191;} section.search_con .pagination .page-item.active .page-link { border-color: rgb(231 65 145 / 50%); color: #e74191; } .search_table tbody td.go-airport img{margin: 0 auto;} .search_table tbody td.go-date .item_days{display: none;} /* .search_table tbody th.go-airport{font-size: 0; line-height: 0;} .search_table tbody th.go-airport::before { content: "出發地"; font-size: 1rem; line-height: 3.125rem;} */ .btn-info.disabled, .btn-info:disabled{ background-color: #d0d0d0; border-color: #d0d0d0;} .search_table tbody td.go-airport>.row>div:first-child>h6 { display: none; } .search_table tbody td.go-airport>.row>div>h6>span:last-child { display: none; } .search_table tbody td.go-airport>.row>div:last-child>h6 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } section.group_table.tripdown .search_table tbody td.go-airport img{ margin: 0;} /* 20240112更改額滿顯示位置 */ .D_products_group_search div#search-table table.search_table.table .row.main_words { display: block; } .D_products_group_search div#search-table table.search_table.table .row.main_words .tag_all { width: auto; float: right; } .D_products_group_search .list_con .search_table tbody td.tour-name a.title_main { width: auto !important; } .D_products_group_search div#search-table table.search_table.table .tag{ font-size: 0.875rem;} /* 20250213更改頁表售價按鈕 */ .D_products_group_search .search_table a.btn{ font-size: 16px; padding: 0.375rem 0.75rem;} .D_products_group_search .search_table a.btn.btn-primary { background-color: #e74191; border-color: #e74191;} /* 隱藏月曆,強制顯示列表模式 */ .D_products_group_mold #search-calendar, .D_products_group_detail #search-calendar{display: none;} .D_products_group_mold #search-table, .D_products_group_detail #search-table{display: block;opacity: 1;} .D_products_group_mold #pills-tab .nav-item #pills-home-tab, .D_products_group_mold #pills-tab .nav-item #pills-contact-tab, .D_products_group_detail #pills-tab .nav-item #pills-home-tab, .D_products_group_detail #pills-tab .nav-item #pills-contact-tab{opacity: 0;} .D_products_group_mold #pills-tab .nav-item, .D_products_group_mold #pills-tab .nav-item #pills-contact-tab, .D_products_group_detail #pills-tab .nav-item, .D_products_group_detail #pills-tab .nav-item { list-style: none; } @media screen and (max-width: 1199px){ .WinChrome section.group_banner .search-area .search-box .select-date, .WinIe section.group_banner .search-area .search-box .select-date{ margin-right: 0; } .WinChrome section.group_banner .search-area .search-box .select-goal, .WinChrome section.group_banner .search-area .search-box .select-place, .WinIe section.group_banner .search-area .search-box .select-goal, .WinIe section.group_banner .search-area .search-box .select-place { width: calc(29% - 10px); } .WinChrome section.group_banner .search-area .search-box .select-input, .WinIe section.group_banner .search-area .search-box .select-input{ width: calc(58% - 10px); } .WinChrome section.group_banner .search-area .search-box .search-btn, .WinIe section.group_banner .search-area .search-box .search-btn { width: 42%; } .WinChrome section.group_banner .search-area .search-box, .WinIe section.group_banner .search-area .search-box { height: 110px; } } @media screen and (max-width: 767px){ .WinChrome section.group_banner.search_banner, .WinIe section.group_banner.search_banner { height: 460px; } /* .WinChrome section.group_banner .search-area, .WinIe section.group_banner .search-area { min-height: 300px; bottom: calc(50% - (300px/2)); } */ } /* 搜尋列表a改成100%寬 */ .list_con .tab-content > .tab-pane>.all_box>.search_table>tbody>tr { position: relative; } /* .list_con .search_table tbody td.tour-name a.title_main { position: absolute; margin: 0; padding-left: 17%; padding-right: 48%; top: 50%; right: 0; transform: translate(0,-50%); z-index: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-align: justify; line-height: 28px; } */ .list_con .search_table tbody td.tour-name a.title_main { margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-align: justify; line-height: 28px; } /* .list_con .search_table tbody td.tour-name .bird { margin-top: 5px; position: absolute; font-size: 0.8rem; bottom: 0; padding-left: 15px; } */ .list_con .search_table tbody td.tour-name .bird { font-size: 0.8rem; } @media screen and (max-width: 991px){ .list_con .search_table tbody td.tour-name>.row{ width: 100%; } .list_con .search_table tbody td.tour-name a.title_main { position: relative; padding-left:0; padding-right: 0; top:0; right: 0; transform: translate(0,0);min-height: 60px; -webkit-line-clamp: initial;} .list_con .search_table .tour-price h6 small{font-size: 0.9rem;} .list_con .search_table tbody td.tour-name .bird { position:initial; padding-left: 0; } } @media screen and (max-width: 767px){ .list_con .search_table tbody td.tour-name a.title_main{ font-size: 1.1rem; line-height: 24px;} .list_con .search_table .tour-name .main_words .seat{ padding-right: 0px; } section.group_banner.search_banner{ height:500px;} section.group_banner .search-area .search-box{ position: relative; margin: 0; -webkit-box-shadow: none; box-shadow: none; } } /*團型列表*/ section.group_banner .info .col{ padding-top: 30px;} section.group_banner .info .btn-primary{background-color: #e74191; border-color:#e74191; display: none;} section.group_banner .info .btn-primary:hover{ opacity: 0.8; } section.group_banner .info .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):active:focus{ background-color: #e74191; border-color:#e74191; opacity: 0.8;} section.group_banner .info .btn-primary:focus,.btn-primary:not(:disabled):not(.disabled):active:focus{ box-shadow: 0 0 black;} .search_table tbody td.sale-situation>.btn-primary { background-color: #e74191; border-color: #e74191; } .search_table tbody td.sale-situation>a:hover { color: #ffffff; } section.group_banner .media-grouop{ display: none;} .search_table .main_words .title_main { font-size: 1.2rem; font-weight: 600; color: #333; } .search_table .main_words .title_main:hover { color: #1b1c80 !important; } section.group_banner .media-grouop .share_box:hover, section.group_banner .media-grouop .forword_box:hover { background: #e74191; } /* .search_table .thead th.total-seat,.search_table .thead th.booking-num,.search_table .thead th.waiting-num, .search_table tbody td.total-seat,.search_table tbody td.booking-num,.search_table tbody td.waiting-num{ display: none;} */ section.group { margin-top: 3rem; } section.group .intro { margin-top:0; max-width: 1200px; } section.group .intro .number,section.group .group_l .words .number,section.group .group_r .words .number { display: none;} section.group .intro .words{ width: 100%; } section.group .group_l, section.group .group_r { max-width: 1200px; margin: 0 auto; padding: 0; padding-right: 15px; padding-left: 15px; } section.group .group_l .container, section.group .group_r .container { max-width: 100%; margin: 0 auto; padding-left: 0; padding-right: 0; } section.group .group_l .img_box,section.group .group_r .img_box { display: none; } section.group .group_l .words, section.group .group_r .words { position: relative; left: initial; bottom: initial; max-width: 100%; } section.group .intro .SunTemplate h2,section.group .group_l .SunTemplate h2,section.group .group_r .SunTemplate h2{ margin-top: 0; margin-bottom: 15px; padding: 8px; font-size: 22px; font-weight: bold; color:#3c3c3c; text-shadow: none; text-align: center; background:#c3c3c3; } section.group .intro .GroupContactBtn a,section.group .group_l .words .GroupContactBtn a,section.group .group_r .words .GroupContactBtn a { display: table; background: #E74191; margin: 1rem auto 3rem; padding: 10px 60px; color: white; text-decoration: none; border-radius: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } section.group .intro .GroupContactBtn a:hover,section.group .group_l .words .GroupContactBtn a:hover,section.group .group_r .words .GroupContactBtn a:hover{ background: rgb(203 59 128);} section.group .intro .GroupContactBtn a h3,section.group .group_l .words .GroupContactBtn a h3,section.group .group_r .words .GroupContactBtn a h3{ font-size: 16px; font-weight: 600; position: relative; padding-left: 20px;} section.group .intro .GroupContactBtn a h3::before,section.group .group_l .words .GroupContactBtn a h3::before,section.group .group_r .words .GroupContactBtn a h3::before{ content: ""; position: absolute; width: 16px; height: 16px; left: 0; background-image: url(https://www.sunshinetour.com.tw/material-alias/%E4%B8%BB%E9%A1%8C%E9%A0%81/pen-icon.svg);} section.group .group_l .words .word_bg, section.group .group_r .words .word_bg, section.group .group_mix .words .word_bg {padding: 0; flex: 0 0 100%; max-width: 100%; padding-right: 15px; padding-left: 15px; background: transparent; } @media (min-width: 576px){ .web-page-frame > .row:nth-child(2) > div > div > .row > div:nth-child(2) > .row > table.search_table{ max-width: 540px; } } @media (min-width: 768px){ .web-page-frame > .row:nth-child(2) > div > div > .row > div:nth-child(2) > .row > table.search_table{ max-width: 720px; } } @media (min-width: 992px){ .web-page-frame > .row:nth-child(2) > div > div > .row > div:nth-child(2) > .row > table.search_table{ max-width: 960px; } } @media (min-width: 1200px){ .web-page-frame > .row:nth-child(2) > div > div > .row > div:nth-child(2) > .row > table.search_table{ max-width: 1440px; } } .web-page-frame > .row:nth-child(2) > div > div > .row > div:nth-child(2) > .row > table.search_table{ background: #fff; width:calc(100% - 30px); margin-left:auto; margin-right:auto; } .web-page-frame > .row:nth-child(2) > .col-md-12 > div > .row > .col-lg-12 > .row > .text-center{ width: 100%; margin-bottom: 3rem; } .web-page-frame > .row:nth-child(2) > .col-md-12 > div > .row > .col-lg-12 > .row > .text-center>a{background: #e74191; border: 1px solid #e74191; color: #ffffff; border-radius: 0; line-height: 1.3rem;} .web-page-frame > .row:nth-child(2) > div > div > .row > div:nth-child(2) > .row > table.search_table tbody td{ padding: 10px;vertical-align: middle;} .web-page-frame > .row:nth-child(2) > div > div > .row > div:nth-child(2) > .row > table.search_table tbody td.go-airport>div>div:nth-child(2)>h6>span:last-child{ display: none;} .D_products_group_mold #tripFeatures,.D_products_group_mold #tripNote{ display: none;} .D_products_group_mold section.group, .D_products_group_mold section#tripDown.group_table.tripdown{ margin-top: 0;} .D_products_group_mold section#tripDown.group_table.tripdown .container .group_table_box { margin-bottom: 3rem; } .D_products_group_mold section.group_table .table .tag { float: right; margin-bottom: 0 !important;} .D_products_group_mold .search_table .main_words .tag_all {width: auto; float:right; } @media (max-width: 991px){ .search_table .tour-name .main_words .title_main{ display: block; font-weight: bold; font-size: 1.25rem; line-height: 1.5rem; margin-top: 5px; min-height: 60px;} .search_table .tour-name .main_words .bird {font-size: 1rem; margin-bottom: 10px; } .search_table .tour-name .main_words .seat{ margin-top: 10px; font-size: 0.875rem;text-align: right; } .search_table .tour-name .main_words .seat .total-seat,.search_table .tour-name .main_words .seat .waiting-num,.search_table .tour-name .main_words .seat .booking-num{ display: none;} /* .search_table .main_words .seat span { margin-right: 0px; } */ .search_table tbody td.go-airport>.row h6{ font-size: 0.875rem;} .search_table tbody td.go-date{ margin-bottom: 0;padding-bottom: 0;} .search_table .tour-name .main_words .time{ margin-bottom: 5px; font-size: 1.2rem;} .search_table .tour-name .main_words .time .go-date{font-size: 1.2rem;} /* .search_table .go-airport{ padding-top: 0; } */ /* .search_table .go-airport .no-gutters>div:first-child{ display: none;} */ .search_table .go-airport .no-gutters>div:last-child>h6{text-align: right;} .search_table .tour-price h6 small{font-size: 0.9rem;} .web-page-frame > .row:nth-child(2) > div > div > .row > div:nth-child(2) > .row > table.search_table tbody td.go-airport { padding: 0; } section.group .group_l .words, section.group .group_r .words{ margin-top: 0;} section.group .group_l .words .word_bg, section.group .group_r .words .word_bg, section.group .group_mix .words .word_bg { padding-right: 0; padding-left: 0; } .D_products_group_mold .search_table .main_words .tag_all{ display: flex; width: 100%; padding-bottom: 8px;} .D_products_group_mold .search_table .no-gutters.main_words.align-content-center { width: 100%; } } @media (max-width: 575.98px){ section.group { margin-top: 1rem; } section.group_banner { margin-top: 0rem; } section.group_banner .img_box{ min-height: 200px; height: 33.333vh !important;} section.group_banner .media-grouop{bottom: 5px; } section.group_banner .info .col{ padding-top: 5px; padding-bottom: 10px; } section.group_banner .info h1{ font-size: 1.4rem; line-height: 1.8rem; margin: 0.5rem 0 1rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-align: center;} section.group_banner .info .btn-primary { font-size: 1rem; padding: 0.425rem 0.9375rem; } section.group_banner .info .btn-primary small { font-size: 0.8rem; } section.group_banner .media-grouop .share_box, section.group_banner .media-grouop .forword_box{font-size: 1rem; width: 30px; height: 30px; } .WinChrome section.group_banner .media-grouop .share_box .data-icon:before, .WinChrome section.group_banner .media-grouop .forword_box .data-icon:before, .WinIe section.group_banner .media-grouop .share_box .data-icon:before, .WinIe section.group_banner .media-grouop .forword_box .data-icon:before, .Firefox section.group_banner .media-grouop .share_box .data-icon:before, .Firefox section.group_banner .media-grouop .forword_box .data-icon:before { margin-top: 16px; margin-left: 6px; } } /*行程明細 */ section.group_table.trip_features:before, section.group_table.trip_airline:before, section.group_table.trip_day:before, section.group_table.trip_note:before, section.group_table.view_intro:before, section.group_table.tripdown:before{ opacity: 0.4; -webkit-filter: grayscale(1);} section.group_table.trip_features:after, section.group_table.trip_airline:after, section.group_table.trip_day:after, section.group_table.trip_note:after, section.group_table.view_intro:after, section.group_table.tripdown:after{ background: #f3f3f3;} section.group_table .group_table_box .title_s{ position: relative; display: table; margin: 0 auto 45px; padding: 0; font-size: 28px; font-weight: 600; border-radius: 0; border: 0; line-height: 1.2; color: #06082b; } section.group_table .group_table_box .title_s::before{ content: ""; position: absolute; background: #e74191; width: 52px; height: 4px; bottom: -16px; left: 50%; transform: translate(-50%,0);} section.group_table.trip_features .container>div>h2, section.group_table.trip_airline .container>div>h2, section.group_table.trip_day .container>div>h2, section.group_table.trip_note .container>div>h2, section.group_table.view_intro .container>div>h2, section.group_table.tripdown .container>div>h2{ position: relative; display: table; margin: 0 auto; font-size: 28px; color: #06082b; text-shadow: none; } section.group_table.trip_features .container>div>h2::before, section.group_table.trip_airline .container>div>h2::before, section.group_table.trip_day .container>div>h2::before, section.group_table.trip_note .container>div>h2::before, section.group_table.view_intro .container>div>h2::before, section.group_table.tripdown .container>div>h2::before{ content: ""; position: absolute; background: #e74191; width: 52px; height: 4px; bottom: -16px; left: 50%; transform: translate(-50%,0); } section.group_table.trip_features .container .group_table_box, section.group_table.trip_airline .container .group_table_box, section.group_table.trip_day .container .group_table_box, section.group_table.trip_note .container .group_table_box, section.group_table.view_intro .container .group_table_box, section.group_table.tripdown .container .group_table_box{ margin-top: 3rem;} section.group_banner.trip_banner h3.price{font-family: 'Raleway', sans-serif !important; font-weight: 600; font-style: italic; font-size: 28px; line-height: initial; color: #e74191; } section.group_banner.trip_banner .brief h5{ font-size: 1rem;} section.group_banner .price_content .panel-info {border: 1px solid #2e3091; } section.group_banner .price_content .panel-info .panel-heading { padding: 2px 10px; background:#2e3091; color:#ffffff; font-size: 0.95rem; } section.group_banner .price_content .panel-info .panel-body { padding: 10px 10px; font-size: 1.2rem; font-family: 'Raleway', sans-serif !important; font-style: italic; } section.group_table.trip_features{ text-align: initial; } section.group_banner .group_num #qrcode { display: none !important; } section.group_banner.trip_banner h6 { padding:0; font-size: 1rem; color: #666; } section.group_banner .basic-air-info { border: 1px solid #2e3091; } section.group_banner .basic-air-airport i { color: #2e3091; } section.group_banner .basic-air-info .go h3,section.group_banner .basic-air-info .back h3 { color: #2e3091; } section.group_banner .basic-air-info .go i,section.group_banner .basic-air-info .back i { color: #2e3091; } section.group_banner .basic-air-btn a{ background: #d6518f; border: 1px solid #d6518f; } section.group_banner .basic-air-btn a:hover { background: #cb3b80; border: 1px solid #cb3b80; } #tripFeatures>.container>div:first-child{ display: none; } .trip_day .group_table_box .day_con { margin-top: 0px; } .trip_day .group_table_box .day_con::before { content: ""; width: 1px; height: 100%; background: #ddd; position: absolute; left: 60px; } .trip_day .group_table_box .day_con .info_box{ margin-bottom: 0;} .trip_day .group_table_box .day_con .info_box>.row>.col-lg-4.col-sm-12{ display: none;} .trip_day .group_table_box .day_con .info_box>.row>.col-lg-8.col-sm-12{ flex: 0 0 100%; max-width: 100%; justify-content: flex-end;} section.group_table.trip_day .group_table_box>.table>tbody>.thead{ background: #2e3091} section.group_table.trip_day table.table tr.thead th:nth-child(2),section.group_table.trip_day table.table tr.thead th:nth-child(2)::before{ background: #d6518f; } section.group_table.trip_day .info_box .info_box_title{ display: flex; flex-wrap: wrap; width: calc(100% - 140px); border: 0; margin-left: 0;} section.group_table.trip_day .info_box .info_box_title > div { padding: 15px 0; margin-left: -140px; width: calc(100% + 140px); } section.group_table.trip_day .info_box .info_box_title .day_title{font-size: 2.8rem; font-family: 'Raleway', sans-serif !important; font-style: italic; font-weight: 500; padding: 22px 36px; letter-spacing: 0.08em; line-height: 30px; text-align: center; color: #fff; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #E6B4D2 0,#DE87B3 18%,#d6518f 60%,#d6518f 90%,#d6518f 95%,#d6518f 100%);} section.group_table.trip_day .info_box .info_box_title h3.day_title.text_blue::first-line{ color: transparent; } section.group_table.trip_day .info_box .info_box_title .day_sub-title { flex: 1; border-left: 0; font-weight: bold; line-height: 2rem; font-size: 1.2rem; } section.group_table.trip_day .info_box .info_box_title .day_title::before { content: ""; position: absolute; width: 105px; height: 105px; border-radius: 50%; border: 1px solid #ffffff; display: block; background: transparent; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.5; } section.group_table.trip_day .info_box .info_box_title .day_title::after { content: ""; width: 36px; height:25px; color: #ffffff; font-size: 1rem; font-weight: 400; letter-spacing: 0.08em; position: absolute; left: 50%; top: 26px; transform: translate(-50%, 0); background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/323c9de4-ea64-411f-b20d-f63a1209c79f.svg); background-repeat: no-repeat; background-position: center;} section.group_table.trip_day .info_box .info_box_title p.meal,section.group_table.trip_day .info_box .info_box_title p.hotel{-ms-flex: 0 0 50%; flex: 0 0 50%; position: relative; max-width: 50%;padding: 56px 20px 20px 66px; font-size: 15px; line-height: 26px; } .day_con .info_box>div.col-12 { padding: 0; display: flex; justify-content: end; } .day_con .info_box>div>.info { width: calc(100% - 140px); } section.group_table.trip_day .info_box .info_box_title p { background: #f9f9f9; box-shadow: 0px 1px 2px rgb(0 0 0 / 20%); } .day_con .info_box_title .data-icon {font-size: 18px; vertical-align: middle; position: absolute; top:15px; left: 15px; line-height: 40px; width: 40px; text-align: center; height: 40px; background: rgb(214 84 143); border-radius: 50%; color: #ffffff;} section.group_table.trip_day .info_box .info_box_title p.meal::before,section.group_table.trip_day .info_box .info_box_title p.hotel::before { content: ""; color: rgb(214 84 143); font-size: 18px; font-weight: 600; font-family: Microsoft JhengHei; position: absolute; top: 22px; } section.group_table.trip_day .info_box .info_box_title p.meal::before{ content: "餐食 Dining"; } section.group_table.trip_day .info_box .info_box_title p.hotel::before { content: "住宿 Hotel"; } .trip_day .info_box .info_box_title p.meal span,.trip_day .info_box .info_box_title p .hotel span { display: block; color: #888888;} section.group_table.trip_day .info_box .info_box_title p.hotel span { margin-left: -12px;} section.group_table.trip_day .info_box .info_box_title p.hotel span::before { content: ""; background: #f9f9f9; width: 10px; height: 22px; position: absolute; } section.group_table.trip_day .info_box .info_box_title p.meal>span:not(:first-child) i { display: none; } .trip_day .day_con .info_box .info_box_title p.hotel .data-icon-hotel:before{ content: ""; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/bd7eed05-2156-4eb1-9014-129464566840.svg); width: 25px; height: 38px; background-repeat: no-repeat; background-position: center;} .trip_day .day_con .info_box .info_box_title p.meal .data-icon-breakfast:before{ content: ""; background-image: url(https://materials.fillo.com.tw/materials/sunshinetour/images/2b8006b4-b5d3-4627-9f9e-fa988b795b85.svg); width: 26px; height: 40px; background-repeat: no-repeat; background-position: center;} .day_con .info_box_title s{ color: #888888; } .trip_day .day_con .info_box .info_box_title p.hotel s{ display: none; } .Day_menu .swiper_day .swiper-slide a:hover { color: #fff; background: #e74191; border: 1px solid #e74191; } section.trip_note .card-header .btn:hover{background: #2e3091;} section.trip_note .card-header .btn[aria-expanded="true"]{ background: #1b1c80;} .D_products_group_detail section.group_table .table .tag { float: right; margin-bottom: 0 !important;} .D_products_group_detail .search_table .main_words .tag_all {width: auto; float:right; } /* 航班詳情 */ .modal-dialog h5.modal-title strong { color: #2e3091; } .flight_details { border: 1px solid #2e3091; } .flight_details .details_box > h4 { background: #2e3091; } .flight_details .details_box > h4 i { color: #ffffff; } .flight_details .details_box .flight_infor .time hr { background: #2e3091; } .flight_details .details_box .flight_infor .time::after{ color: #2e3091;} /* 每日行程 */ section.group_table.trip_day:before { background: url(https://www.sunshinetour.com.tw/material-alias/trip_day_bg.jpg);} /* 其他說明 */ #tripNote .card-body li { list-style: decimal; } section.group_table.trip_note:before{ background: url(https://www.sunshinetour.com.tw/material-alias/trip_note_bg.jpg);} /* 行程明細行程特色 */ .trip_features ol { list-style:auto ; } .trip_features ul { list-style: initial; } section.group_table.trip_features:before { background: url(https://www.sunshinetour.com.tw/material-alias/trip_features_bg.jpg);} /* 行程明細出發日期 */ .fc .fc-toolbar-title { font-size: 1.4em; } .fc .fc-button{padding: 0.2em 0.4em; } .fc .fc-button-primary{ color: #1b1c80;} .fc .fc-button-primary:hover { background-color: #e74191; background-color: var(--fc-button-hover-bg-color, #e74191); border-color: #e74191; border-color: var(--fc-button-hover-border-color, #e74191); } .fc .fc-toolbar.fc-header-toolbar{ background: #1b1c80; padding: 5px 10px;} section.group_table.tripdown .container .fc-toolbar h2.fc-toolbar-title{ text-shadow: none;} /* section.group_table.tripdown .style_icon ul{ display: none;} */ section.group_table.tripdown .style_icon ul li a.nav-link { border: 1px solid #7e7e7e; color: #7e7e7e; } section.group_table.tripdown .style_icon ul li a.nav-link.active{ border: 1px solid #e74191; color: #e74191; background-color: #ffffff;} section.group_table.tripdown .style_icon ul li a.nav-link.active svg { fill: #e74191; } section.group_table.tripdown .style_icon ul li a.nav-link svg { fill: #7e7e7e; } section.group_table.tripdown .search_table tbody td.tour-price span { font-family: 'Raleway', sans-serif !important; font-size: 1.4rem; color: #e74191 !important; font-weight: 500;} .fc-h-event{ display: block; padding: 10px; border: 1px solid #f9f9f9; border: 1px solid var(--fc-event-border-color, #f9f9f9); background-color: #f9f9f9; background-color: #f9f9f9; } .fc-h-event .fc-event-main .seat{ color:#8a8a8a;} .fc-h-event .fc-event-main .price{ color: #e74291; text-align: right;} .fc-h-event .fc-event-main .status{ background: #e74291; color: #ffffff; padding:5px; display:inline-block; border-radius:4px; margin-bottom:5px; } section.group_table:before{ background: url(https://www.sunshinetour.com.tw/material-alias/group_table_bg.jpg);} /*預設備註開*/ #collapseFour.collapse {display: block!important;} #collapseFour.collapse.show {display: none!important;} section.trip_note #headingFour.card-header a[aria-expanded="false"]:after{content: "−"!important;transform: rotate(180deg);} section.trip_note #headingFour.card-header a[aria-expanded="true"]:after{content: "+"!important;transform: rotate(90deg);} section.trip_note .card-header .btn {background: #1b1c80;color: #fff;} section.trip_note .card-header a[aria-expanded="false"]:after{color: #fff;} #collapseFour.collapsing{ height: 0 !important;} /*隱藏郵輪麵包屑*/ section.group_banner.trip_banner p#crumb { display: none; } /*行程明細-每日行程-2圖2文*/ .StarTemplate{ padding-bottom: 10px;} .StarTemplate img{max-width: 100%;} .StarTemplate.OnePhoto,.SunTemplate.TwoPhoto,.SunTemplate.ThreePhoto{ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; position: relative; } .SunTemplate.TwoPhoto .col{ -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 5px;} .SunTemplate.ThreePhoto .col{ -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; padding: 0 5px;} section.group_table.trip_day .container .SunTemplate h2 { margin-top: 0; padding: 8px; font-size: 22px; color:#3c3c3c; text-shadow: none; text-align: center; background:#c3c3c3; } .SunArticle { margin-bottom: 28px;} .SunArticle h3{ font-size: 17px; font-weight: 600; margin-bottom: 6px;} .SunArticle p, .SunArticle ul,.SunArticle ol{ margin: 0; font-size: 15px; line-height: 28px;} .SunArticle ul{ list-style-type: disc; padding-inline-start: 20px;} .SunArticle ol{ list-style-type: decimal; padding-inline-start: 20px;} .SunArticle .black{ color:#3c3c3c;} .SunArticle .blue{ color:#1b1c80;} .SunArticle .pink{color: #e74291;} .SunArticle .gold{color: #c9a063;} /*行程明細-地圖*/ .SunTemplate.Map img{ margin: 0 auto; display: block;} section.group_table .group_table_box .SunTemplate.Map .title_s { margin-top: 50px; } @media (max-width: 991.98px){ section.group_table>.container,section.group_banner.trip_banner .container{ max-width: 100%; width: 88%;} section.group_table.trip_day .info_box .info_box_title .day_sub-title{ padding-left: 20px;} section.group_table.tripdown .search_table > tbody > tr.thead{ display: none;} section.group_table.trip_day .group_table_box table.table { display: none; }/*隱藏航班資訊*/ section.group_banner .basic-air-btn{ margin-top: 5px; margin-bottom: 5px;} section.group_banner .basic-air-btn a{ float: initial; } .D_products_group_detail .search_table .main_words .tag_all{ display: flex; width: 100%; padding-bottom: 8px;} .D_products_group_detail .search_table .no-gutters.main_words.align-content-center { width: 100%; } } @media (max-width: 767px){ .Day_menu{ padding-bottom: 20px;} .Day_menu.day_fixed,.Day_menu.day_fixScroll.day_fixed { top: 54px !important; } section.group_table.trip_features .container .group_table_box, section.group_table.trip_airline .container .group_table_box, section.group_table.trip_day .container .group_table_box, section.group_table.trip_note .container .group_table_box, section.group_table.view_intro .container .group_table_box, section.group_table.tripdown .container .group_table_box { padding: 20px 20px 30px; } section.group_table.trip_day .info_box .info_box_title { width: calc(100% - 100px); } section.group_table.trip_day .info_box .info_box_title > div { margin-left: -100px; width: calc(100% + 100px); } .trip_day .group_table_box .day_con::before{ left: 40px;} section.group_table.trip_day .info_box .info_box_title .day_title{ font-size: 1.6rem; padding: 22px 16px; line-height: 17px; width: 80px; height: 80px; } section.group_table.trip_day .info_box .info_box_title .day_title::before { width: 65px; height: 65px; } section.group_table.trip_day .info_box .info_box_title .day_title::after { font-size: 0.9rem; top: 18px; width: 30px; height: 20px; } section.group_table.trip_day .info_box .info_box_title p.meal, section.group_table.trip_day .info_box .info_box_title p.hotel{ flex: 0 0 100%; max-width: 100%; } .day_con .info_box>div>.info { width: calc(100% - 100px); } } @media (max-width: 575px){ section.group_banner.trip_banner h1 {font-size: 1.6em;} section.group_banner.trip_banner h3.price{ font-size: 1.3rem;} section.group_banner .price_content .panel-info .panel-body { padding: 5px; font-size: 1rem; } section.group_banner.trip_banner .brief h5 { font-size: 0.9rem;} section.group_table .group_table_box .title_s,section.group_table.trip_features .container>div>h2, section.group_table.trip_airline .container>div>h2, section.group_table.trip_day .container>div>h2, section.group_table.trip_note .container>div>h2, section.group_table.view_intro .container>div>h2, section.group_table.tripdown .container>div>h2{ font-size: 1.4rem; } section.group_table .group_table_box .title_s::before,section.group_table.trip_features .container>div>h2::before, section.group_table.trip_airline .container>div>h2::before, section.group_table.trip_day .container>div>h2::before, section.group_table.trip_note .container>div>h2::before, section.group_table.view_intro .container>div>h2::before, section.group_table.tripdown .container>div>h2::before{ bottom: -12px; width: 40px;} .trip_day .group_table_box .day_con::before{ display: none;} section.group_table.trip_day .info_box .info_box_title { width: 100%; } section.group_table.trip_day .info_box .info_box_title > div{ flex-flow: column; position: relative; margin-left: 0; width: 100%;} section.group_table.trip_day .info_box .info_box_title > div::before { content: ""; position: absolute; background: #cca07b; width: 100%; height: 1px; top: 55px; } section.group_table.trip_day .info_box .info_box_title .day_sub-title { padding-left: 0; font-size: 1.1rem; } .day_con .info_box>div>.info { width: 100%; } .SunTemplate.TwoPhoto .col,.SunTemplate.ThreePhoto .col { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0 5px; } section.group_table.trip_day .container .SunTemplate h2 { font-size: 16px; } } /* 行銷企劃文案 */ section.group .group_l iframe, section.group .group_r iframe{padding-bottom: 28px; margin: 0 auto;} section.group .group_l iframe[title="每晚售價"], section.group .group_r iframe[title="每晚售價"]{ max-width: 100%;overflow: scroll;} section.group .group_l .video, section.group .group_r .video{ position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;} section.group .group_l .video iframe, section.group .group_r .video iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} section.GroupTab { display: flex; justify-content: center; margin-bottom: 3rem; } section.GroupTab a { padding: 10px 60px; background: transparent; border-top: 1px solid #c79f62; border-bottom: 1px solid #c79f62; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;} section.GroupTab a:hover{background:#c79f62 } section.GroupTab a:first-child{ border-left: 1px solid #c79f62;} section.GroupTab a:last-child{ border-right: 1px solid #c79f62;} section.GroupTab a + a { border-left: 1px solid #c79f62; } section.GroupTab a h3 { font-size: 19px; font-weight: 600; color: #c79f62; } section.GroupTab a:hover h3{ color:#ffffff } table.ClubmedFlight{ width: 100%; margin-top: 20px; margin-bottom: 20px;} table.ClubmedFlight th{ color:#ffffff; font-weight: 400;} table.ClubmedFlight th,table.ClubmedFlight td{padding:5px 3px;} table.ClubmedFlight td { background: #e4e4e4; } table.ClubmedFlight tr+tr>td { border-bottom: 1px solid #ccc; } @media (max-width: 991px){ section.GroupTab a { padding: 10px 40px; } } @media (max-width: 767px){ section.GroupTab a { padding: 10px 20px; } } @media (max-width: 575px){ section.GroupTab{ margin-bottom: 1rem; display: block; overflow: scroll; white-space: nowrap; text-align: center;} section.GroupTab a{ display: inline-block; border: 1px solid #c79f62;} section.GroupTab a h3 { font-size: 16px; } table.ClubmedFlight{ font-size: 15px;} } /* 右側報名快捷列 */ .sub_menu-trip .server_menu > ul{ margin-bottom: 0;} .sub_menu-trip .server_menu > ul > li,.sub_menu-trip .server_menu > ul > li.join-fixed-btn{ font-size: 1rem;} .sub_menu-trip .server_menu > ul > li{ height: 50px;} .sub_menu-trip .server_menu li:nth-child(1) { background: #e74191; } .sub_menu-trip .server_menu > ul > li.download-fixed-btn { background:#7E7E7E; } .sub_menu-trip .server_menu > ul > li > a { padding: 0 5px; width: 107px;} .sub_menu-trip .server_menu > ul > li > a > i{ margin-right: 2px; line-height: 50px;} .sub_menu-trip .server_menu > ul > li a i{ font-size: 16px;} .sub_menu-trip .server_menu > ul > li.share-fixed-btn, .sub_menu-trip .server_menu > ul > li.query-fixed-btn, .sub_menu-trip .server_menu > ul > li.favor-fixed-btn{ display: none; } .sub_menu-trip .trip_menu{ border: 1px solid #e8e8e8;} .sub_menu-trip .trip_menu ul { margin-bottom: 10px; } .sub_menu-trip .trip_menu li { margin: 0 auto 5px auto; } .sub_menu-trip .trip_menu li.feature{ display: none;} .sub_menu-trip .trip_menu li a{ padding-bottom: 5px; font-size: 0.8rem; border-bottom: 1px solid #e8e8e8;} .sub_menu-trip .trip_menu li a:hover span{color: rgb(201 160 99); } .sub_menu-trip .trip_menu li:last-child a { border-bottom: 0; padding-bottom: 0; } .sub_menu-trip .trip_menu li a span{ padding-top: 0; font-size: 0.9rem; color: #06082b;} .sub_menu-trip .trip_menu i { display: none;} .D_products_group_mold nav.server_menu { display: none;}/*隱藏團型頁洽詢按鈕*/ .sub_menu-trip .server_menu > ul > li.download-fixed-btn ul{ height: 50px;} .sub_menu-trip .server_menu > ul > li.download-fixed-btn ul li{ height: 50px;} .sub_menu-trip .server_menu > ul > li.download-fixed-btn ul li a{ padding: 0 15px;} /*隱藏右側選單列印的word,且選單直接展開 START*/ .sub_menu-trip .server_menu > ul > li.download-fixed-btn ul{ width: 100%; right: 0;} .sub_menu-trip .server_menu > ul > li.download-fixed-btn ul li:nth-child(1) { background: #7E7E7E; } .sub_menu-trip .server_menu > ul > li.download-fixed-btn ul li:nth-last-child(2){ width: 100%;} .sub_menu-trip .server_menu > ul > li.download-fixed-btn ul li:nth-child(2){ display: none;} .sub_menu-trip .server_menu > ul > li.download-fixed-btn ul li a .fa-print:before { content: "\f019"; margin: 0 6px; } .sub_menu-trip .server_menu > ul > li.download-fixed-btn ul li a::after { content: "下載"; } /*隱藏右側選單列印的word,且選單直接展開 END*/ @media (max-width: 991.98px){ .sub_menu-trip .trip_menu{ display: none; } .sub_menu-trip .server_menu { width: 100vw;} .sub_menu-trip .server_menu > ul > li a{ width: 100%;} } @media (max-width: 767px){ .sub_menu-trip{ bottom: 62px; } } @media (max-width: 576px){ .sub_menu-trip .server_menu > ul > li a { font-size: initial; } } /* 訂購流程 */ .stepCont div#page2 .stepPage_btn>div>div { flex: 1; max-width: initial; }