@charset "utf-8";


/*--------------------------------------MV*/
#MV{background-image: url(../../images/malaysia-airlines/bg_cloth_big.webp);background-repeat: no-repeat;background-size: cover;overflow: hidden;position: relative;padding: 60px 0;}
#MV:before,
#MV:after{content:"";background-position: center;background-size: contain;background-repeat: no-repeat;display: block;position: absolute;opacity: 0.2;top: -20px;}
#MV:before{background-image: url(../../images/malaysia-airlines/deco_flower_S_white.png);width: 200px;height: 170px;}
#MV:after{background-image: url(../../images/malaysia-airlines/deco_flower_L_white.png);width: 227px;height: 227px;bottom: -30px;top: auto;right: -30px;}
#MV .Inner{
    color: #fff;
    text-align: center;
}
#MV .Inner strong{
    color: var(--PointColoTthin);
}
#MV .Inner span{
    font-style: italic;
}

#MV .Inner h1{
    margin-bottom: 15px;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
#MV .Inner h1 p{
    font-style: italic;
    font-size: 30px;
}
#MV .Inner .en{
}

/*---------------------------------Area*/
#Area{
    /* background-image: url(../../images/malaysia-airlines/deco_line_top.png); */
    /* background-position: top center; */
    /* background-repeat: repeat-x; */
    position: relative;
    padding: var(--Padding);
    }

#Area h2{margin-bottom: 60px;}

#Area .Tab{
    display: flex;
}
#Area .Tab li{
    flex: 1;
    aspect-ratio: 3 / 2;
    max-height: 220px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 190px;
    position: relative;
    color: var(--PointColoTthin);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 3px;
    -webkit-transition: all .3s ease-out;
}
#Area .Tab li:hover{
    cursor: pointer;
    color: #fff;
}
#Area .Tab li.select{
    color: var(--MainColor);
}
#Area .Tab li:before{content:"";background-color: rgb(10 70 142 / 70%);position: absolute;width: 100%;height: 100%;top: 0;left: 0;-webkit-transition: all .3s ease-out;}
#Area .Tab li:hover:before{background-color: rgb(166 145 74 / 70%);}
#Area .Tab li.select:before{
    background-color: rgb(255 255 255 / 80%);
}
#Area .Tab li p{
    position: relative;
}
#Area .Tab li .main{
    font-size: 21px;
    font-style: italic;
}
#Area .Tab li .sub{
    font-size: 11px;
}
#Area .Tab li:after{position: absolute;left: 50%;bottom: 0;content: "\f107";font-family:FontAwesome;line-height: 1;font-weight: normal;font-size: 64px;transform: translate(-50%, 0px);}

#Area .Tab li.asiacity{ background-image: url(../../images/malaysia-airlines/photo_asiacity.webp)}
#Area .Tab li.asiabeach{ background-image: url(../../images/malaysia-airlines/photo_asiabeach.webp)}
#Area .Tab li.europe{ background-image: url(../../images/malaysia-airlines/photo_europe.webp)}
#Area .Tab li.oceania{ background-image: url(../../images/malaysia-airlines/photo_oceania.webp)}


/*-----------------------------------TabEntry*/
.TabEntry{}
.TabEntry .icon img{
}
.TabEntry .SC{
    width: var(--Width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding: 50px 0;
    column-gap: 10px;
}
.TabEntry .SC li{
    position: relative;
}
.TabEntry .SC li .icon{
    width: 27px;
    position: absolute;
    top: -9px;
    left: 14px;
    border: 3px solid #fff;
    box-sizing: border-box;
    line-height: 0;
    border-radius: 3px;
}
.TabEntry .SC li a{
    color: var(--MainColor);
    text-decoration: none;
    padding: 10px 20px 5px 20px;
    display: block;
    border: 1px solid var(--MainColor);
    border-radius: 3px;
    font-size: 15px;
    font-weight: bold;
}
.TabEntry .SC li a:after{content: "\f107";font-family:FontAwesome;width: 100%;display: block;text-align: center;line-height: 1;margin-top: 3px;}
.TabEntry .SC li a:hover{
    background-color: var(--MainColor);
    color: #fff;
}

.TabEntry .Sec{
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 210px;
    position: relative;
}

.TabEntry .Sec .Inner{
    background-color: rgb(255 255 255 / 80%);
    width: var(--Width);
    margin: 0 auto;
    border-radius: 5px;
    padding: 30px 35px 100px 35px;
    box-sizing: border-box;
    max-width: var(--Maxwidth);
    min-width: var(--MinWidth);
    position: relative;
    z-index: 2;
}
.TabEntry .Sec .Title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.TabEntry .Sec .Title h3{
    color: var(--MainColor);
    font-size: 25px;
    font-style: italic;
    line-height: 1;
}
.TabEntry .Sec .Title h4{
    display: flex;
    line-height: 1;
    align-items: center;
    column-gap: 5px;
}
.TabEntry .Sec .Title h4 .icon{
    width: 24px;
    line-height: 0;
}
.TabEntry .Sec .Title h4 .txt{
    font-size: 20px;
    font-style: italic;
    color: var(--PointColor);
}
.TabEntry .Sec .Intro{
    color: var(--MainColor);
    display: flex;
    column-gap: 30px;
    margin-bottom: 25px;
    letter-spacing: 1px;
}
.TabEntry .Sec .Intro .txt{
    font-size: 15px;
    line-height: 2;
    flex: 1;
}
.TabEntry .Sec .Intro dl{
    flex: 1;
    border: 1px solid var(--MainColor);
    border-radius: 4px;
    padding: 10px 15px;
    box-sizing: border-box;
}
.TabEntry .Sec .Intro dt{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}
.TabEntry .Sec .Intro dd{
    line-height: 1.8;
}

.TabEntry .Sec .TourLink{}
.TabEntry .Sec .TourLink .subttl{
    color: var(--PointColor);
    font-size: 35px;
    margin-bottom: 15px;
}
.TabEntry .Sec .TourLink .subttl:before,
.TabEntry .Sec .TourLink .subttl:after{
    background-color: var(--PointColor);
    width: 70px;
}

.TabEntry .Sec:after{content: "";background: linear-gradient(to bottom, rgba(255,255,255,0) 20%,rgba(255,255,255,1) 100%);width: 100%;position: absolute;top: 0;height: 340px;}
.TabEntry .Sec:before{content: "";width: 100%;display: block;height: 340px;position: absolute;top: 0;background-repeat: no-repeat;background-position: center;background-size: cover;}
.TabEntry .Sec#kuala:before{ background-image:url(../../images/malaysia-airlines/MV_kuala.webp)}
.TabEntry .Sec#bangkok:before{ background-image:url(../../images/malaysia-airlines/MV_bangkok.webp)}
.TabEntry .Sec#singapore:before{ background-image:url(../../images/malaysia-airlines/MV_singapore.webp)}
.TabEntry .Sec#bali:before{ background-image:url(../../images/malaysia-airlines/MV_bali.webp)}
.TabEntry .Sec#phuket:before{ background-image:url(../../images/malaysia-airlines/MV_phuket.webp)}
.TabEntry .Sec#crabi:before{ background-image:url(../../images/malaysia-airlines/MV_crabi.webp)}
.TabEntry .Sec#langkawi:before{ background-image:url(../../images/malaysia-airlines/MV_langkawi.webp)}
.TabEntry .Sec#london:before{ background-image:url(../../images/malaysia-airlines/MV_london.webp)}
.TabEntry .Sec#paris:before{ background-image:url(../../images/malaysia-airlines/MV_paris.webp)}
.TabEntry .Sec#australia:before{ background-image:url(../../images/malaysia-airlines/MV_australia.webp)}
.TabEntry .Sec#auckland:before{ background-image:url(../../images/malaysia-airlines/MV_auckland.webp)}
.TabEntry .Sec#maldives:before{ background-image:url(../../images/malaysia-airlines/MV_maldives.webp)}

.TabEntry .Sec .btn{
    text-align: center;
    margin-top: 30px;
}
.TabEntry .Sec .btn.multi{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    column-gap: 10px;
    width: var(--WidthFix);
    margin: 0 auto;
    margin-top: 20px;
}
.TabEntry .Sec .btn a{
    display: inline-block;
    font-size: 17px;
    background-color: var(--MainColor);
    padding: 25px 100px;
    border-radius: 3px;
    border: 2px solid var(--MainColor);
}
.TabEntry .Sec .btn.multi a{
    font-size: 15px;
    width: 26%;
    padding: 20px 30px;
}
.TabEntry .Sec .btn a:hover{
    background-color: #fff;
    color: var(--MainColor);
}

.TabEntry .ItemInner{
    width: 100%;
}
.TabEntry .None{background-color: #f3f1e6;padding: 30px 0;border-radius: 5px;}
.TabEntry .None p{
    text-align: center;
    color: var(--MainColor);
    font-size: 20px;
}
.TabEntry .None ul{
    display: flex;
    justify-content: center;
    column-gap: 20px;
}
.TabEntry .None li{}
.TabEntry .None li a{}

/*----------------------------------------------------------Item*/
#Item{    background-image: url(../../images/malaysia-airlines/deco_line_top.png);
    background-position: top center;
    background-repeat: repeat-x;
    position: relative;
    padding: var(--Padding);}


/*-------------------------------------------------RefineSearch*/
#RefineSearch{
    width: 1000px;
    margin: 0 auto;

}
#RefineSearch .SMPaccrTtl{
    display: none;
}

#RefineSearch .Main{
    padding-bottom: 20px;
    border-bottom: 2px solid var(--MainColor);
    }
#RefineSearch .Main dl{
    width: 100%;
    display: flex;
    padding-bottom: 7px;
}
#RefineSearch .Main dl + dl{
    border-top: 1px solid #ccc;
    padding-top: 9px;
}
#RefineSearch .Main dl#DayTags,
#RefineSearch .Main dl#DeptTags{
    width: 50%;
}
#RefineSearch .Main dl#DeptTags{
    border-left: 1px solid #ccc;
    box-sizing: border-box;
}
#RefineSearch .Main dl#PickupTags{}
#RefineSearch .Main dt{
    color: #a88faf;
    font-weight: bold;
    width: 4.5em;
    text-align: right;
    padding-right: 9px;
}
#RefineSearch .Main dt span{
    display: none;
}
#RefineSearch .Main dd{
    flex: 1;
}
#RefineSearch .Main ul{
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 5px;
}
#RefineSearch .Main li{
    font-weight: bold;
    width: 19.5%;
}
#RefineSearch .Main li + li{
}
#RefineSearch .Main li.All{}
#RefineSearch .Main li input{}
#RefineSearch .Main li input[type=radio]{display:none}
#RefineSearch .Main li input[type=radio] span{}
#RefineSearch .Main li input[type=radio]+label{text-align:center;border:1px solid #ccc;border-radius:3px;display:flex;align-items:center;justify-content: flex-start;font-size:14px;line-height:1;font-weight:700;background-color:#fff;padding: 10px 15px;}
#RefineSearch .Main li input[type=radio]+label:hover{cursor:pointer;border-color: var(--MainColor);color: var(--MainColor);}
#RefineSearch .Main li input[type=radio]+label:hover::before{color:#a88faf}
#RefineSearch .Main li input[type=radio]:checked+label{color: var(--MainColor);font-weight:700;background-color: var(--MainColor);color: #fff;border-color: var(--MainColor);}
#RefineSearch .Main li input[type=radio]+label::before{content:"\f1db";font-family:FontAwesome;font-size: 16px;display:inline-block;padding-right: 3px;color: #a8a8a8;font-weight:400;padding-bottom:3px}
#RefineSearch .Main li input[type=radio]:checked+label::before{content:"\f058";color: #fff;}

#RefineSearch .Main li input[type=checkbox]{display: none;}
#RefineSearch .Main li input[type=checkbox]+label {position: relative;cursor: pointer;display: flex;/* align-items: center; */}
#RefineSearch .Main li input[type=checkbox]+label:hover{color: #a88faf;}
#RefineSearch .Main li input[type=checkbox]+label::before{font-family:FontAwesome;font-size: 15px;display: inline-block;padding-right: 3px;color: #b5b5b5;font-weight: normal;content:"\f096";}
#RefineSearch .Main li input[type=checkbox]:checked+label{color: #a88faf;}
#RefineSearch .Main li input[type=checkbox]:checked+label::before{content:"\f14a";color: #a88faf;}
#RefineSearch .Main li input[type=checkbox]+label:hover::before  { 
    color: #a88faf;
}

#RefineSearch .Main li span{
    font-size: 80%;
}
#RefineSearch .Main .lowWrap{
    flex: 1;
    display: flex !important;
    flex-wrap: wrap;
    padding-top: 5px;
}
#RefineSearch .Main .low{width: 50%;border-top: none;margin-bottom: 5px;}
#RefineSearch .Main .low dt{
    color: #333;
    font-weight: normal;
    background-color: #eeeeee;
    font-size: 12px;
    width: 8em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-sizing: border-box;
    margin-right: 7px;
    font-weight: bold;
}
#RefineSearch .Main .low dd{}
#RefineSearch .Main .low dd ul{}
#RefineSearch .Main .low dd li{
    font-size: 13px;
}
#RefineSearch .Main .low + .low{
    padding-top: 0;
}

#RefineSearch .Foot{
    display: flex;
    padding: 20px 0 40px 0;
    justify-content: space-between;
}
#RefineSearch .Foot #count{}
#RefineSearch .Foot #count ul{
    display: flex;
    font-size: 15px;
    align-items: center;
    line-height: 1;
    font-weight: bold;
}
#RefineSearch .Foot #count li{
    padding-right: 6px;
}
#RefineSearch .Foot #count span{}
#RefineSearch .Foot #count strong{
    font-size: 30px;
    color: var(--MainColor);
    line-height: 0.5;
    display: inline-block;
    padding-right: 3px;
    font-weight: normal;
    padding-bottom: 10px;
}
#RefineSearch .Foot #Sort{
    display: flex;
}
#RefineSearch .Foot #Sort li{
    margin: 0 10px;
    position: relative;
}
#RefineSearch .Foot #Sort li:hover{
    border-bottom: 1px solid #a88faf;
    cursor: pointer;
    /* color: #a88faf; */
}
#RefineSearch .Foot #Sort li.act{
    font-weight: bold;
    color: var(--MainColor);
    border-bottom: 1px solid var(--MainColor);
}