@charset "big5";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Ramabhadra&display=swap');
/* CSS Document */
body { min-width: 1200px; color: #000; font-family: 'Noto Sans TC', sans-serif;}
a {display: block; text-decoration: none; transition: linear .3s;}
:focus {outline: none;}
i {font-style: normal;}
.header, .footer {text-align: center; background: #fff;}
.display_pc {display: block}
.display_m {display: none}

/**main_wrapper**/
.main_wrapper {background: url(../images/bg_main.png) center 500px #e4f5f5;}
.red {color: #c00; font-weight: bold;}
.blue {color: #1070bd; font-weight: bold;}
.brown {color: #7c442f; font-weight: bold; font-size: 1.1em;}

/**kv**/
.kv_wrapper {position: relative; z-index: 500; width: 100%; overflow: hidden; background: url(../images/kv_bg.jpg) no-repeat center top;
    -webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 20%);
    box-shadow: 0px 5px 5px rgb(0 0 0 / 20%);}
.kv_container {position: relative; margin: auto; width: 1100px; height: 499px; z-index: 1;}
.kv_slogan {position: absolute; top: 43px; left: 330px; z-index: 1;}

/**prod**/
.prod_wrapper {position: relative;}
.ProductList {position: relative; z-index: 100;}

/**group**/
.group {position: relative; z-index: 1; width: 100%; margin:auto; padding: 60px 0; overflow: hidden;}

#group_1, #group_3, #group_4 {background: #84dadf;}
#group_7 {background: #fff6f1;}

#group_1 {display: none;}
#group_2 {padding: 0;}

/*btn*/
.go_btn {position: relative; font-size: 28px; font-weight: 600; border-radius: 30px; display: inline-block;
    margin-top: 5px; margin-left: 5px; margin-right: 5px; padding: 10px 25px 12px;
    background-image: linear-gradient(90deg, #b81e62 0%, #e25292 50%, #b81e62 100%); border-bottom: 4px #970f4b solid;}
a .go_btn {color: #fff; line-height: 1em; transition: linear .3s;}
.go_btn img.icon_hand {position: absolute; top: 14px; right: -20px;}

@media(hover:hover) {
.go_btn:hover {filter: brightness(120%); transform: scale(0.98);}
}

 /**best**/
.best_wrapper {position: relative; width: 1000px; margin: 60px auto; padding-bottom: 30px;}
.best_title {text-align: center; padding-bottom: 20px;}
.best_container:before {content: ''; position: absolute; top: 60px; bottom: 0; left: -50px; right: 0; z-index: -1;
    margin: auto; width: 1100px; height: auto; background: #fff; border-radius: 100px;}
.best_container {width: 940px; margin: auto;
    display: flex;
    justify-content: space-evenly;}
.best_container a {text-align: center;}

@media(hover:hover) {
.best_container a:hover {filter: brightness(120%); transform: scale(0.98);}
}

.best_img {padding-bottom: 10px;}
.best_container a .txt {color: #000; font-size: 25px; font-weight: 500; text-align: center;}
.best_container a .desc {color: #000;font-size: 32px; font-weight: 700;}
.pink {color: #e25292; font-weight: 700;}


/**/
.coupon_wrapper {width: 1200px; margin: 10px auto 60px;}
.coupon_container {position: relative; text-align: center;}
.coupon_container:before {content: ''; position: absolute; top: 54px; bottom: -20px; left: -50px; right: 0; z-index: -1;
    margin: auto; width: 1100px; height: auto; background: #fff; border-radius: 100px;}
.coupon_title {text-align: center;}
.coupon_txt {font-size: 30px; align-items: center; font-weight: 500; padding-bottom: 20px;
    display: flex;
    justify-content: center;}
.coupon {width: 850px; margin: 0 auto;}
.coupon ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;}
.coupon li {padding: 5px 10px;}
.coupon a {display: inline-block; transition: transform .35s; -webkit-transform: translate(0, 0);}
.coupon a:hover {-webkit-transform: translate(0, -5px);  transform: translate(0, -5px);}

.coupon_note {width: 1200px; margin: auto; padding-top: 80px;}
.coupon_btn {text-align: center; padding-top: 10px;}

 /**order**/
.order_wrapper {position: relative; width: 1000px; margin: auto; padding-bottom: 30px; text-align: center;}
.order_title {text-align: center; padding-bottom: 20px;}
.order_container {width: 100%; margin: auto; padding-bottom: 15px;
    display: flex;
    justify-content: space-evenly;}
.order_container:before {content: ''; position: absolute; top: 60px; bottom: 0; left: -50px; right: 0; z-index: -1;
    margin: auto; width: 1100px; height: auto; background: #fff; border-radius: 100px;}
.order_container a {text-align: center;}

@media(hover:hover) {
.order_container a:hover {filter: brightness(120%); transform: scale(0.98);}
}

.order_container .txt {color: #000;font-size: 31px; font-weight: 700;}
.order_container .desc {color: #000; font-size: 23px; font-weight: 500; text-align: center;}


/**tour-discount**/
.tour-discount_wrapper {padding-top: 120px;}
.tour-discount_container {width: 1000px; margin: auto;}
.tour-discount {position: relative; border-radius: 5px; border: 3px solid #4d4d4d; font-size: 18px; line-height: 1.5; background: #fff4e8;}
.tour-discount_title {position: absolute; top: -65px; left: 160px;}
.tour-discount h3 {padding-top: 40px;}
.tour-discount tr td {padding: 10px 0; border-bottom: 1px #a0a0a0 solid; border-right: 1px #a0a0a0 solid;}
.box01 tr.tr001 {background-color: #fff; font-size: 24px; font-weight: bold;}
.box01 tr.tr001 ul {display: inline-block; margin: auto;}
.box01 tr.tr001 li {float: left; background: #ffcb8e; padding: 5px 20px; border-radius: 4em; font-size: 18px; font-weight: bold; margin: 5px;}
.box01 tr.tr005 {color: #fff; font-weight: bold; font-size: 20px;}
.box01 tr.tr002 {color: #fff; font-weight: bold; font-size: 20px;}
.box01 tr.tr003 {color: #000; font-size: 22px;}
.box01 tr.tr003 p {color: #fff; font-size: 20px;}
.box01 tr.tr003 span.customer {font-size: 18px;}
.box01 tr.tr004 {color: #000;}
.box01 tr.tr004 ul {margin-left: 40px; padding: 10px 0;}
.box01 tr.tr004 li {font-size: 16px; list-style: auto;}

/**free-travel-qa**/
.container {width: 96%; margin: auto; padding-bottom: 10px; padding-top: 5px;}
.container li { }
.container h4 {background-color: #bd8151; border-radius: 20px; font-size: 22px; line-height: 30px; font-weight: bold; padding: 5px 20px; display: inline-block; margin: 7px; color: #fff;}

.flip a {display: inline-block; font-weight: bold; font-size: 18px; margin: 5px 3px; border-radius: 10px; color: #fff; background-color: #bc453d; padding: 5px 20px; line-height: 25px; transition: transform .35s;   
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);}
.flip {margin: 0 auto; padding: 13px; text-align: left; border-bottom: dotted 2px #bfbfbf; font-size: 20px; font-weight: 700; color: #bb6c34;
    position: relative; transition: .2s ease-in-out; z-index: 1; cursor: pointer;}
.flip:hover, .flip:focus, .flip:active {color: #bb6c34;}

div.panel {height: 0; overflow: hidden; background-color: #fff; transition: .5s linear height;}
.active div.panel {height: auto; overflow-y: auto; padding: 15px 30px; text-align: left; font-size: 16px;}
.open, .close, .open01, .close01 {border-radius: 30px; border: 1px solid #2f2f2f; color: #2f2f2f; display: inline-block; padding: 6px 10px; font-size: 10px; line-height: 12px;
    position: relative; float: right; left: 0px; transition: .3s ease-in-out; cursor: pointer;}
.close {display: none;}
.open01 {display: none;}
.flip:hover .open, .flip:hover .close {background-color: #2f2f2f; color: white;}

.active .open01 {display: block;}
.active .close01 {display: none;}
.active .open {display: none;}
.active .close {display: block;}

.box02 {margin-top: 10px; font-size: 17px; border: 2px solid #6b1a1a;}
.box02 tr td {padding: 10px; border-bottom: 1px #a0a0a0 solid; border-right: 1px #a0a0a0 solid;}
.box02 tr.tr002 {color: #2d1a1a; font-weight: bold; font-size: 20px;}
.box02 tr.tr003 {color: #000;}
.box02 tr.tr003 p {color: #fff;}

/**hotel-discount**/
.hotel-discount_wrapper {padding-top: 120px;}
.hotel-discount_container {width: 1000px; margin: auto;}
.hotel-discount {position: relative; border-radius: 5px; border: 3px solid #4d4d4d; font-size: 18px; line-height: 1.5; background: #fff;}
.hotel-discount_title {position: absolute; top: -65px; left: 160px;}
.hotel-discount h3 {padding-top: 40px;}

.hotel-discount tr td {padding: 10px 0; border-bottom: 1px #a0a0a0 solid; border-right: 1px #a0a0a0 solid;}
table.box03 tr.tr001 td {font-size: 24px; font-weight: bold;}
table.box03 tr.tr001 ul {display: inline-block; margin: auto;}
table.box03 tr.tr001 li {float: left; background: #ffcb8e; padding: 5px 20px; border-radius: 4em; font-size: 18px; font-weight: bold; margin: 5px;}
table.box03 tr.tr002 {color: #fff; font-weight: bold; font-size: 20px;}
table.box03 tr.tr003 {color: #000; font-size: 22px;}
table.box03 tr.tr003 p {color: #fff; font-size: 20px;}
table.box03 tr.tr003 span.customer {font-size: 18px;}
table.box03 tr.tr004 {color: #000;}
table.box03 tr.tr004 ul {margin-left: 40px; padding: 10px 0;}
table.box03 tr.tr004 li {font-size: 16px; list-style: auto;}

/*優惠qa*/
.discount-qa_wrapper {padding-top: 120px;}
.discount-qa_container {width: 1000px; margin: auto;}
.discount-qa {position: relative; border-radius: 5px; border: 3px solid #4d4d4d; font-size: 18px; line-height: 1.5; background: #fff4e9; padding-top: 55px;}
.title_qa {position: absolute; top: -50px; left: 160px;}
.discount_qa {width: 96%; margin: 10px auto;}
.discount_qa ul {width: 98%; margin: auto;}
.discount_qa li {padding-bottom: 15px;}
.discount_qa h4 {background-color: #bd8151; border-radius: 20px; font-size: 22px; line-height: 30px; font-weight: bold; padding: 5px 20px;
    display: inline-block; margin: 7px; color: #fff;}
.discount_q {color: #b15d22; font-weight: bold; font-size: 20px; padding-bottom: 3px; border-bottom: dotted 2px #bfbfbf;}
.discount_a {background: #fff; padding: 10px; font-size: 16px;}


/*檔期活動*/
.gotravel {width: 1000px; margin: auto; transition: linear .3s;}
@media(hover:hover) {
.gotravel:hover {filter: brightness(120%); transform: scale(0.98);}
}


/**9大館別**/
.type_wrapper {position: relative; width: 1000px; margin: auto; padding-bottom: 30px; text-align: center;}
.type_title {text-align: center; padding-bottom: 20px;}
.type_container {width: 96%; margin: auto; padding-top: 50px; padding-bottom: 55px;
    display: flex;
    justify-content: space-evenly;}
.type_container:before {content: ''; position: absolute; top: 60px; bottom: 0; left: -50px; right: 0; z-index: -1;
    margin: auto; width: 1100px; height: auto; background: #fff; border-radius: 100px;}
.type_container a {text-align: center;}
.type_pie a .txt {color: #fff; font-size: 35px; line-height: 1; font-weight: 700; text-align: center; padding-bottom: 10px;}
.type_pie a .desc {color: #fff; font-size: 21px; line-height: 1.3; font-weight: 500; text-align: center;}

.type_pie {position: relative; width: 573px; height: 572px; background: url(../images/type_pie.png) no-repeat center top;}
a.type_rail {position: absolute; top: 0; left: 0; width: 286px; height: 282px;}
a.type_uniair {position: absolute; top: 0; right: 0; width: 286px; height: 282px;}
a.type_ticket {position: absolute; bottom: 0; left: 0; width: 286px; height: 289px;}
a.type_season {position: absolute; bottom: 0; right: 0; width: 286px; height: 289px;}

.type_rail_txt {position: absolute; top: 151px; left: 170px; font-size: 35px; line-height: 1.1; font-weight: 700; color: #fff;}
.type_uniair_txt {position: absolute; top: 151px; right: 178px; font-size: 35px; line-height: 1.1; font-weight: 700; color: #fff;}
.type_ticket_txt {position: absolute; bottom: 156px; left: 170px; font-size: 35px; line-height: 1.1; font-weight: 700; color: #fff;}
.type_season_txt {position: absolute; bottom: 156px; right: 178px; font-size: 35px; line-height: 1.1; font-weight: 700; color: #fff;}

a.type_grouptour, a.type_hotel, a.type_airticket, a.type_free, a.type_experience {position: absolute; width: 292px; height: 164px; border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;}
a.type_grouptour {top: -53px; left: 136px; background: url(../images/type_grouptour.jpg) no-repeat center center; background-size: 120%;}
a.type_hotel {top: 197px; left: -150px; background: url(../images/type_hotel.jpg) no-repeat center center; background-size: 120%;}
a.type_airticket {top: 197px; right: -150px; background: url(../images/type_airticket.jpg) no-repeat center center; background-size: 120%;}
a.type_free {top: 445px; left: -40px; background: url(../images/type_free.jpg) no-repeat center center; background-size: 120%;}
a.type_experience {top: 445px; right: -40px; background: url(../images/type_experience.jpg) no-repeat center center; background-size: 120%;}

@media(hover:hover) {
a.type_grouptour:hover, a.type_hotel:hover, a.type_airticket:hover, a.type_free:hover, a.type_experience:hover, 
.type_rail:hover, .type_uniair:hover, .type_ticket:hover, .type_season:hover {filter: brightness(130%); transform: scale(0.98);}
}


/**平台優惠*/
.travelweb_wrapper {position: relative; width: 1030px; margin: auto; padding-bottom: 30px; text-align: center;}
.travelweb_title {text-align: center; padding-bottom: 20px;}
.travelweb_container {width: 100%; margin: auto;
    display: flex;}
.travelweb_container:before {content: ''; position: absolute; top: 60px; bottom: 0; left: -40px; right: 0; z-index: -1;
    margin: auto; width: 1100px; height: auto; background: #fff; border-radius: 50px;}
.travelweb_container a {text-align: center;}
.travelweb_container a .txt {color: #fff; font-size: 35px; line-height: 1; font-weight: 700; text-align: center; padding-bottom: 10px;}
.travelweb_container a .desc {color: #fff; font-size: 21px; line-height: 1.3; font-weight: 500; text-align: center;}


/*左*/
.travelweb_hotel_main {width: 294px; padding-right: 15px;}
a.travelweb_hotel, a.travelweb_global, a.travelweb_customized {border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;}
a.travelweb_hotel {width: 294px; height: 212px; background: url(../images/type_hotel.jpg) no-repeat center center; background-size: 120%;}
a.travelweb_global {width: 412px; height: 289px; background: url(../images/travelweb_global.png) no-repeat center center; background-size: 120%;}
a.travelweb_customized {width: 294px; height: 212px; background: url(../images/travelweb_customized.jpg) no-repeat center center; background-size: 120%;}

.travelweb-bookroom {width: 90%; margin: 15px auto;}
.box_bookroom {
    display: flex;
    flex-wrap: wrap;}
.box_bookroom img {width: 100%;}
.box_bookroom li {width: calc((100% / 2) - 10px); padding: 5px; overflow: hidden;}

.travelweb_grouptour_main {width: 412px; padding-right: 15px;}
.travelweb_number {background: #fef6f0; border-radius: 20px; padding: 10px 0 20px;}
.travelweb_number .box_number {}
.travelweb_number .value {color: #ff987d; font-size: 45px; font-weight: 700;}
.travelweb_number .name {color: #929292; font-size: 20px; font-weight: 600;}

/*中間*/
.travelweb_grouptour_main {}
.travelweb_discount {padding-bottom: 10px;}
.travelweb-agency {width: 100%; margin: 15px auto;}
.box_agency {
    display: flex;
    flex-wrap: wrap;}
.box_agency img {width: 100%;}
.box_agency li {width: calc((100% / 4) - 6px); padding: 3px; overflow: hidden;}
a.travelweb_global .txt {letter-spacing: 5px;}
.logo_payeasy {width: 160px; margin: 0 auto; padding: 3px 0 7px;}
.logo_payeasy img {width: 100%;}

/*右*/
.travelweb_customized_main {}
.travelweb-airline {width: 100%; margin: 15px auto;}
.box_airline {
    display: flex;
    flex-wrap: wrap;}
.box_airline img {width: 100%;}
.box_airline li {width: calc((100% / 4) - 6px); padding: 3px; overflow: hidden;}

@media(hover:hover) {
a.travelweb_hotel:hover, a.travelweb_global:hover, a.travelweb_customized:hover, a.type_free:hover, a.type_experience:hover {filter: brightness(130%); transform: scale(0.98);}
}

/**otherbn**/
.otherbn-main {width: 1400px; margin: auto; overflow: hidden; display: flex;}
.others_title {text-align: center;}
.otherbn-slide {margin: 7px;}
.otherbn-slide img {width: 100%;}
.otherbn-slide a:hover {transform: scale(0.98);filter: brightness(110%);}

/*bg_wrapper*/
.bg_wrapper {display: none; position: absolute; width: 100%; height: 100%; top: 0; z-index:1; pointer-events: none;}
.bg_fly {width: 100%; height: 100%; background: url("../images/float.png") center 0;}

/* Lightbox */
.lightbox {display: none; box-sizing: border-box; background: #fff; max-width: 850px; width: 80%; height: 80%; margin: auto; padding: 15px; border-radius: 20px;
    position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000;}
.lightbox-01 {background: #ffd567; height: 562px;}
.lightbox .lightbox_head {position: relative;}
.lightbox_content {box-sizing: border-box; background: #fff; width: 95%; margin: 0 auto auto; padding:2em; border-radius: 20px;
    position: absolute; top: 90px; bottom: 4%; left: 0; right: 0;
    overflow-y: auto; overflow-x: hidden;}
.lightbox_mask {display: none; background-color: rgba(0, 0, 0, 0.75); position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999;}
.lightbox_title {display: table; margin: auto; font-size: 35px; font-weight: bold; padding-top: 5px; color: #522b1a;}
.lightbox_content h3 {color: #00589f; font-weight: bold; font-size: 20px; line-height: 25px; margin-top: 15px;}
.lightbox_content p {font-size: 16px; line-height: 1.5em;}
.lightbox_content h3 {color: #00589f; font-weight: bold; font-size: 20px; line-height: 25px; margin-top: 15px;}
.lightbox_content h4 {font-size: 20px; color: #552c3b; line-height: 1.4em; padding-top: 10px; font-weight: bold;}
.lightbox table {margin-top: 3px;}

.lightbox_close {color: #000; box-sizing: border-box; width: 31px; height: 31px; border-radius: 20px;
    position: absolute; top: 15px; right: 15px; cursor: pointer;}
.lightbox_close .icon_close {color: #fff; width: 31px; height: 31px;}
.lightbox_close .icon_close:before, .lightbox_close .icon_close:after {width: 31px; box-shadow: 0 0 15px 3px #ff1100;}
.icon_close {position: absolute; color: #000; margin-top: 0; margin-left: 0; width: 21px; height: 21px;}
.icon_close:before {content: ''; position: absolute; top: 10px; width: 21px; height: 3px; background-color: currentColor;
        -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.icon_close:after {content: ''; position: absolute; top: 10px; width: 21px; height: 3px; background-color: currentColor;
        -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.lightbox_content li {font-size: 15px;}


@media screen and (min-width: 1025px) {
.NavArea {display: none; width: 100px; position: fixed; top: 50px; right: 0; z-index: 500;}
.Nav-slide.active {background-color: rgb(0 0 0 / 40%);}
.Nav-slide.active a {color: yellow;}
.float_main { width: 138px; opacity: 0.9; filter: alpha(opacity=90);}
.go_top { display: block; cursor: pointer;}
   
.Nav {position: relative;}
.Nav-wrapper {background-color: #f9815f; width: 100px; border-radius: 20px; overflow: hidden; padding-top: 5px; text-align: center;}
.Nav-wrapper li {font-size: 16px; line-height: 22px; text-align: center; background: transparent; margin: auto; padding: 5px 0; position: relative;}
.Nav-wrapper li.word {font-size: 24px; line-height: 28px; color: yellow; font-weight: bold;}
.Nav-wrapper li.goback {font-size: 24px; border-radius: 0 0 20px 20px; padding-bottom: 15px; padding-left: 2px;}
.Nav-wrapper li a {color: #fff; font-weight: bold; cursor: pointer; position: relative; z-index: 500;}
.Nav-wrapper li a:hover {color: #fff100;}
.Nav-wrapper li.highlight2:after {background: #ee703e;}
.Nav-wrapper li:after {position: absolute; right: 51%; bottom: 0;left: 51%;z-index: 1; height: 2px; background: yellow; content: ""; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: left, right; transition-property: left, right;}
.Nav-wrapper li:hover:after {right: 10%; left: 10%;}
.Nav-wrapper li.word:after, .Nav-wrapper li.goback:after {height: 0;}
.Nav-wrapper li.word span {font-size: 17px; line-height: 18px;}
}

@media screen and (max-width:1024px) {
body {width: 100vw; min-width: inherit;}
.gotop {background: url(//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png) no-repeat;  height: 36px; position: fixed; right: 5px; width: 36px; bottom: 10px; z-index: 999; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.header {width: 100vw;}
.display_m {display: block;}
.display_pc {display: none;}
.main_wrapper {background: #e4f5f5;}
    
/**kv_m**/
.kv_wrapper{background: url("../images/kv_bg.jpg")no-repeat center top; background-size: 170%; height: 42.5vw;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw;}
.kv_slogan {width: 49vw; top: 3.2vw; left: 26vw;}

/**group**/ 
.group {width: 100vw; padding: 35px 0;}
.tit {width: 60vw; margin: auto;}
.tit img {width: 100%;}

/**/
.go_btn {font-size: 22px;}
.go_btn.big {font-size: 24px; line-height: 1.2em;}
.go_btn img {width: 100%;} 
a .go_btn {padding: 1vw 3vw;}
.go_btn img.icon_hand {width: 5vw; top: 0.7vw; right: -2vw;}

/**best_m**/
.best_wrapper {width: 100vw; margin: 35px auto;}	
.best_container {width: 96vw;}
.best_container:before {top: 5vw; left: 0; width: 96%; border-radius: 60px}
.best_img {width: 16vw; height: 16vw; margin: auto;}
.best_img img {width: 100%;}
.best_container a .txt {font-size: 20px;}
.best_container a .desc {font-size: 23px;}
	
/*折價券*/
.coupon_wrapper {width: 100vw; margin: 10px auto 30px;}
.coupon_container:before {top: 5vw; left: 0; width: 96%; border-radius: 60px}
.coupon_txt {font-size: 26px;}	
.coupon {width: 85vw;}
.coupon img {width: 100%;}
.coupon li {width: 30%; padding: 5px 1%;}
.coupon_note {width: 100vw; padding-top: 45px;}
.coupon_note img {width: 100%;}
.coupon_btn {padding-top: 0;}
	
/**order**/
.order_wrapper {width: 100vw;}	
.order_container {width: 96vw;}
.order_container:before {top: 5vw; left: 0; width: 96%; border-radius: 60px}
.order_img {width: 16vw; height: 15vw; margin: auto;}
.order_img img {width: 100%;}	
.order_container .txt {font-size: 23px;}
.order_container .desc {font-size: 20px;}	
	
/***/
.tour-discount_wrapper {padding-top: 60px;}
.tour-discount_container {width: 96vw;}
.tour-discount_title {top: -4.7vw; left: 20vw;}
.tour-discount h3 {padding-top: 30px;}
	
.container h4 {font-size: 17px; line-height: 25px; margin: 7px 0 0;}
.flip {padding: 10px; font-size: 17px;}
.active div.panel {font-size: 13px;}
	
/***/
.hotel-discount_wrapper {padding-top: 60px;}
.hotel-discount_container {width: 96vw;}
.hotel-discount_title {top: -4.7vw; left: 20vw;}
.hotel-discount h3 {padding-top: 30px;}
	
/***/
.discount-qa_wrapper {padding-top: 50px;}
.discount-qa_container {width: 96vw;}
.title_qa {top: -3.7vw; left: 20vw;}
.discount_q {font-size: 17px;}
.discount_a {font-size: 13px;}

/***/
.gotravel {width: 96vw; padding-bottom: 15px;}
.gotravel img {width: 100%;}
	
/***/
.type_wrapper {width: 100vw;}	
.type_title {padding-bottom: 5px;}
.type_container {padding-top: 0; padding-bottom: 0;}	
.type_container:before {top: 5vw; left: 0; width: 96%; border-radius: 60px}
.type_title_domestic, .type_title_abroad {width: 60vw; margin: auto;}
.type_title_domestic img, .type_title_abroad img {width: 100%;}
	
.type_pie {position: initial; width: 92vw; height: auto; background: none;}
	
.type_domestic_main {overflow: hidden; padding-bottom: 10px;}	
a.type_rail, a.type_uniair, a.type_ticket, a.type_season {position: initial; width: auto; height: auto; float: left; margin: 0.5vw; border-radius: 15px;}
a.type_rail {background: #81af36;}
a.type_uniair {background: #00b1c5;}
a.type_ticket {background: #f58400;}
a.type_season {background: #eb4734;}
.type_rail_txt, .type_uniair_txt, .type_ticket_txt, .type_season_txt {position: initial; font-size: 45px; width: 22vw; height: 22vw;
    display: flex;
    justify-content: center;
    align-items: center;}
.type_abroad_main {overflow: hidden;
    display: flex;
    flex-wrap: wrap;}	
a.type_hotel, a.type_airticket, a.type_free, a.type_experience, a.type_grouptour {position: initial; border-radius: 15px; margin: 0.5vw;
    display: flex;
    justify-content: center;}
a.type_hotel, a.type_airticket, a.type_free, a.type_experience {width: 45vw; height: 22vw;}
a.type_grouptour {width: 91vw; height: 22vw; background-size: 100%;}
	
/** **/	
.type-discount_container {width: 96vw; padding: 5vw 2vw; border-radius: 30px;}
.type-discount_container img {width: 100%;}	
	
/***/
.travelweb_wrapper {width: 100vw; padding-bottom: 20px;}	
.travelweb_title {padding-bottom: 5px;}
.travelweb_container { width: 92%;}
.travelweb_container:before {top: 5vw; left: 0; width: 96%; border-radius: 50px;}

.travelweb_hotel_main {width: 25vw; padding-right: 1.5vw;}	
a.travelweb_hotel {width: 25vw; height: 19vw;}
.travelweb_container a .txt {font-size: 28px;}
.travelweb_container a .desc {font-size: 18px;}	
.travelweb_number .value {font-size: 40px;}
.travelweb_number .name {font-size: 16px;}
	
.travelweb_grouptour_main {width: 39vw; padding-right: 1.5vw;}
.travelweb_discount {width: 39vw; margin: auto;}
.travelweb_discount img {width: 100%;}
a.travelweb_global {width: 40vw; height: 25vw;}
.box_agency li {width: calc((100% / 4) - 10px); padding: 4px 5px;}
	
.travelweb_customized_main {width: 25vw;}
a.travelweb_customized {width: 25vw; height: 19vw;}	

/**otherbn**/
.otherbn-main {width: 96%;}
.otherbn-main img {width: 100%;}
	
.product_main {width: 98vw;}
	
/**nav-top**/ 
.float_tit {display: none;}
.NavArea {display: none; position: fixed; top: 0; left: 0; right: 0;z-index: 998;}
.NavArea .Nav {position: relative; margin: 0; padding: 0; overflow-x: scroll; background: #000; border-bottom: 2px solid #ccc;}
.NavArea .Nav ul {display: flex;}
.NavArea .Nav li {z-index: 10;flex: none;}
.NavArea .Nav a {color: #fff; padding: 0 15px; height: 50px; font-size: 15px; line-height: 50px; font-weight: 400;}
.Nav-slide.active a {color: yellow;}
.NavArea li.highlight0 {display: none;}
.Nav-slide.active a {color: yellow; border-bottom: 2px solid yellow; background: #525252;}
.NavArea .Nav li.word {display: none;}
}

@media screen and (max-width:768px) {
.prod_wrapper { }	
.tit {width: 60vw;}	

.coupon {width: 94vw;}
		
/***/
.order_container .desc {font-size: 15px;}	
	
.tour-discount_wrapper {padding-top: 50px;}
.tour-discount h3 {width: 94%; text-align: left; padding-top: 32px; padding-bottom: 3px; line-height: 1.3;}
.box01 tr.tr001 ul {width: 96%;}
.box01 tr.tr001 li {margin: 3px;}
	
.box01 tr.tr001 {background-color: #fff; font-size: 15px;}
.box01 tr.tr001 li {padding: 5px 20px; font-size: 13px;}

.box01 tr.tr005 {font-size: 14px;}

.box01 tr.tr002 {font-size: 14px;}

.box01 tr.tr003 {font-size: 14px;}
.box01 tr.tr003 p {font-size: 12px;}
.box01 tr.tr003 span.customer {font-size: 12px;}

.box01 tr.tr004 ul {margin-left: 23px; padding:0;}
.box01 tr.tr004 li {font-size: 12px;}	
	
.container h4 {font-size: 14px; line-height: 22px;}
.flip {padding: 10px 0 5px; font-size: 14px; overflow: hidden;}
.active div.panel {padding: 15px;}
	
	
/***/
.hotel-discount_wrapper {padding-top: 30px;}
.hotel-discount h3 {width: 94%; padding-top: 30px; line-height: 1.3;}	
	
table.box03 tr.tr001 td {font-size: 15px;}

table.box03 tr.tr002 {font-size: 14px;}

table.box03 tr.tr003 {font-size: 14px;}
table.box03 tr.tr003 p {font-size: 12px;}
table.box03 tr.tr003 span.customer {font-size: 12px;}

table.box03 tr.tr004 ul {margin-left: 23px; padding: 0;}
table.box03 tr.tr004 li {font-size: 12px;}
	
.discount-qa {padding-top: 40px;}
	
#group_4 {padding-top: 10px;}
	
/**/
.type_title_domestic, .type_title_abroad {width: 100vw;}
.type_rail_txt, .type_uniair_txt, .type_ticket_txt, .type_season_txt {font-size: 30px;}
.type_pie a .txt {font-size: 30px; padding-bottom: 7px;}
.type_pie a .desc {font-size: 17px; letter-spacing: 1px; line-height: 1.4;}
	
/***/
.travelweb_hotel_main {order: 2; width: 45vw;}	
a.travelweb_hotel {width: 45vw; height: 30vw; border-radius: 10px;}
.travelweb-bookroom {margin: 5px auto; height: 16vw;}
.travelweb_container {
    display: flex;
    flex-wrap: wrap;}	
.travelweb_number {border-radius: 15px; padding: 0; height: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: center;}

.travelweb_grouptour_main {order: 1;width: 92vw;}
.travelweb_discount {width: 80vw;}
a.travelweb_global {width: 92vw; height: 50vw;}
.travelweb-agency {margin: 5px auto 10px;}
		
.travelweb_customized_main {order: 3; width: 45vw;}
a.travelweb_customized {width: 45vw; height: 30vw; border-radius: 10px;}
.travelweb-airline {margin: 5px auto; height: 16vw;}	
	
/**/
.otherbn-main {width: 90%;
    display: flex;
    flex-wrap: wrap;}
.otherbn-slide {width: 100%;}

/**lightbox**/
.lightbox {width: 96%; padding: 20px 10px;}
.lightbox-01 {height: 90%;}
.lightbox_close {top: 0; right: 0;}
.lightbox_content {padding: 0.5em 1em; top: 10vw;}
.lightbox_area {float: none; width: 100%; padding-top: 2vw;}
.lightbox_title {font-size: 23px; /*padding-top: 3%;*/ padding-right: 3%;}
.lightbox_content h3 {font-size: 15px; margin-top: 6px;}
.lightbox_content p {font-size: 13px;}
.lightbox_content h4 {font-size: 18px; line-height: 1.2em;}
.box02 td {font-size: 13px;}
.lightbox_content li {font-size: 13px;}	
		
}

@media screen and (max-width:560px) {
.group {padding: 20px 0;}
.group .tit {width: 100%;}
	
.go_btn {font-size: 12px; line-height: 1.2em; padding: 1vw 3vw 1.2vw;}
.go_btn.big {font-size: 20px; line-height: 1.2em; padding: 1vw 5vw 1.2vw;}
a .go_btn {border-bottom: 2px #970f4b solid;}	
.go_btn img.icon_hand {width: 6vw; top: 0.5vw; right: -3vw;}	
.go_btn.big img.icon_hand {width: 7vw; top: 1.2vw; right: -3vw;}	

.best_wrapper {padding-bottom: 0; margin: 20px auto 40px;}
.best_title {padding-bottom: 10px;}
.best_container {width: 96vw;}
.best_container:before {bottom: -4vw; width: 96%; border-radius: 25px;}
.best_container a .txt {font-size: 13px;}
.best_container a .desc {font-size: 16px; line-height: 1.2em;}
span.desc_br {display: block;}
	
.coupon_wrapper {margin: 0 auto 20px;}
.coupon_container:before {width: 96%; border-radius: 25px;}
.coupon_txt {font-size: 18px; padding-bottom: 14px;
    display: flex;
    flex-wrap: wrap;}
.coupon li {padding: 0 1%;}
.coupon_note {padding-top: 20px;}
	
.order_wrapper {padding-bottom: 0;}
.order_title {padding-bottom: 10px;}
.order_container {width: 90vw; padding-bottom: 0;
    display: flex;
    flex-wrap: wrap;}
.order_container:before {bottom: -4vw; width: 96%; border-radius: 25px;}	
.order_icon {width: 50%; padding-bottom: 15px;}
.order_img {width: 20vw; height: 18vw;}
.order_container .txt {font-size: 20px; line-height: 1.5em;}
.order_container .desc {line-height: 1.3em;}

.tour-discount_title {left: 0;}	
.hotel-discount_title {left: 0;}
.title_qa {left: 0;}
	
/**/
.type_wrapper {padding-bottom: 0;}	
.type_container {padding-bottom: 20px;}
.type_container:before {width: 96%; border-radius: 25px;}		
.type_rail_txt, .type_uniair_txt, .type_ticket_txt, .type_season_txt {font-size: 20px;}
.type_pie a .txt {font-size: 20px;}
.type_pie a .desc {font-size: 11px; letter-spacing: 0;}
		
a.type_rail, a.type_uniair, a.type_ticket, a.type_season {border-radius: 10px;}

a.type_hotel, a.type_airticket, a.type_free, a.type_experience, a.type_grouptour {border-radius: 10px;}
a.type_hotel, a.type_airticket, a.type_free, a.type_experience {height: 24vw;}
a.type_grouptour {height: 24vw;}	
	
/**/
.travelweb_container:before {width: 96%; border-radius: 25px;}
.travelweb_container a .txt {font-size: 20px; padding-bottom: 5px;}
.travelweb_container a .desc {font-size: 11px;}	
.travelweb_number .value {font-size: 24px;}
.travelweb_number .name {font-size: 11px;}

/**/
.otherbn-main {width: 92%;
    display: flex;
    flex-direction: column;}	
	
/**/
.lightbox_title {padding-top: 0;}
.lightbox_content {top: 15vw;}
	
}

@media screen and (max-width:375px) {


	
}
	
@media screen and (max-width:320px) {
.go_btn {font-size: 11px;}	
.go_btn.big {font-size: 17px;}
	
.best_container a .txt {font-size: 11px;}
.best_container a .desc {font-size: 14px;}
	
.order_container .txt {font-size: 18px;}
.order_container .desc {font-size: 13px;}
	
.coupon_txt {font-size: 16px;}
	
.type_rail_txt, .type_uniair_txt, .type_ticket_txt, .type_season_txt {font-size: 18px;}
.type_pie a .txt {font-size: 18px;}

.travelweb_number .value {font-size: 18px; line-height: 1.2;}
.travelweb_number .name {font-size: 10px;}
	
}