#pic-topic.package::after{content:""; width:100%; height:100%; background:url("../images/pic-package.jpg") no-repeat; background-size:100%; position:absolute; z-index:-3;  opacity:.5; top:0; left:0;}

#top-head{padding:10px 25px 0 25px;}
#top-head .lang{right:25px;}
#p-banner{width:100%; margin-top:45px; border-radius:10px; overflow:hidden; display:block; position:relative;}
#p-banner .swiper-container img{width:100%; display:block; float:left;}
#p-banner .swiper-pagination-banner{width:auto; display:block; position:absolute; z-index:90; bottom:25px; left:50%; transform: translateX(-50%);}
#p-banner .swiper-pagination-bullet{width:18px; height:18px; cursor: pointer; margin: 0 5px; text-align: center; display: inline-block;
  border:2px solid #FFF; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; opacity:.7;}
#p-banner .swiper-pagination-bullet-active{background:#EF3937;}

#package-detail{width:100%; margin:45px 0 20px 0; padding:0; display:block; float:left; position:relative; z-index:30;}
#package-detail .content{width:100%; padding:25px; line-height:1.2; color:#000; border-radius:10px; border:1px solid #CCC; overflow:hidden;  display:block; font-family:'Kanit', sans-serif; background:#FFF; text-align:left;}
#package-detail .content h4{width:100%; color:#6668AA; margin:10px 0 15px 0; font-weight:500; display:block; float:left;}
#package-detail .content h5{width:100%; color:#6668AA; margin:10px 0 20px 0; font-weight:500; display:block; float:left;}
#package-detail .content h6{width:100%; color:#6668AA; margin:0; font-weight:600; font-size:1.1em; margin:25px 0 15px 0; display:block; float:left;}
/* #package-detail .content p{width:100%; height:auto; color:#000; font-weight:300; font-size:1.1em; display:block; float:left;} */
#package-detail .content p{width:100%; height:auto; margin:0 0 15px 0; color:#000; font-weight:300; font-size:1.1em; display:block; float:left;}
#package-detail .content p b{color:#6668AA;}
#package-detail .content p em{color:#EF3937; font-style:normal; font-weight:500;}
#package-detail .content p.sub-topic{color:#6668AA; line-height:1.2; font-size:1.1em; font-weight:300; margin:20px 0;}
#package-detail .content p.nopad{padding-left:0;}
#package-detail .content p.margin-min{line-height:1.2; margin:5px 0;}
#package-detail .content p .remark{line-height:1.2; font-size:.85em; font-weight:300;margin-top:5px; padding-left:58px; display:block;}
#package-detail .content .bullet{width:100%; margin:0; padding:0; display:block; clear: both;}
#package-detail .content .bullet li{width:100%; line-height:1.2; padding:0 0 0 20px; margin:0; font-size:1.1em; font-weight:300; display:block; position:relative;}
#package-detail .content .bullet li::before{content:""; width:5px; height:5px; border-radius:50%; background:#6668AA; display:block; position:absolute; top:8px; left:3px;}

/* #package-detail .options {width:100%; margin:0; padding:0; display:block; float:left; list-style:none;}
#package-detail .options li{width:100%; margin:5px 0; padding:0; display:block; float: left; list-style:none;}
#package-detail .options p.price{width:auto; color:#FFF; line-height:34px; font-size:1.6em; font-weight:500; padding:5px 15px 5px 40px; margin:0; border-radius:10px; overflow:hidden; position:relative; background:#6668AA; display:block; float:left;}
#package-detail .options p.price i{line-height:34px; color:#FFF; font-style:normal; font-size:.9em; position:absolute; top:8px; left:15px;}
#package-detail .options p.sub-topic{min-width:300px; color:#6668AA; line-height:40px; font-size:1.1em; font-weight:300; margin:0; padding-right:40px; display:block; float:left;} */

#package-detail .des {width:100%; margin:0 0 20px 0; padding:0; display:block; float:left; list-style:none;}
#package-detail .des li{width:100%; margin:5px 0; padding:0; display:block; float: left; list-style:none;}
#package-detail .des p{width:auto; margin:0; padding-left:40px; line-height:1.2; font-size:140%; font-weight:400; color:#6668AA; display:block; position:relative; font-family:'Kanit', sans-serif;}
#package-detail .des p i{width:auto; font-size:1em; color:#EF3937; display: block; position:absolute; left:0; top:3px;}
#package-detail .des p.sub-topic{min-width:300px; color:#6668AA; line-height:40px; font-size:1.1em; font-weight:300; margin:0; padding-right:40px; display:block; float:left;}

#package-detail .content .more{width:auto; height:50px; line-height:50px; font-size:1.2em; margin:0; padding:0 50px 0 20px; text-align:center; color:#FFF; border:0; border-radius:10px; display:block; float:left; background:#6668AA; position:relative; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -webkit-appearance:none;}
#package-detail .content .more i{line-height:50px; color:#FFF; position:absolute; right:20px; top:0; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
#package-detail .content .more:hover i{right:15px;}

#package-detail .content .bottom{width:100%; margin:30px 0; text-align:center; display:inline-block;}

.book{width:auto; padding:10px 45px 10px 70px; line-height:1.3; border-radius:10px; font-size:1.4em; color:#FFF; font-weight:500; font-family:'Kanit', sans-serif;  text-transform:uppercase; background:#EF3937; position:relative; display:inline-block;}
.book i{line-height:1.3; font-size:1em; color:#FFF; font-style:normal; position:absolute; left:45px; top:10px; transform: scale(1); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
.book:hover i{transform: scale(1.2); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}

.prev{width:auto; padding:10px 25px 10px 50px; line-height:1.3; border-radius:10px; font-size:1.2em; color:#FFF; font-weight:400; font-family:'Kanit', sans-serif;  text-transform:uppercase; background:#6668AA; position:relative; display:block; float:left;}
.prev i{line-height:1.3; font-size:1.2em; color:#FFF; font-style:normal; position:absolute; left:20px; top:9px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
.prev:hover i{left:15px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}

#other-package{width:100%; margin:40px 0 60px 0; display:block; float:left; position:relative;}
#other-package h3{margin:0 0 25px 0; padding:0; color:#6668AA; text-transform:uppercase; font-weight:500 !important; font-family:'Kanit', sans-serif;}
#other-package h3 a{color:#6668AA;}
#other-package h3 i{padding-right:10px; line-height:44px; font-size:25px; color:#EF3937;}
#other-package .swiper-wrapper{height:auto;}
#other-package .swiper-container{width:100%; display:block; float:left;}
#other-package .swiper-container img{width:100%; display:block;}
#other-package .content{width:100%; padding:0; display:block; list-style:none; float:left; font-family:'Kanit', sans-serif; transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;}
#other-package .content span{width:100%; border-radius:15px;
border:2px solid #6668AA; overflow:hidden; display:block;
-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);
}
#other-package .content span a{width:100%; text-align: center; display:block; text-decoration:none;}
#other-package .content span .pic{background:rgba(0,0,0,1); position:relative;}
#other-package .pic .price{width:auto; padding:0 5px; background:#025ABE; display:block; position:absolute; left:0; bottom:20px; z-index:30;overflow:hidden; box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#other-package .pic .price .num{width:auto; margin:0; padding:6px 10px 6px 40px; line-height:1.2; font-size:120%; font-weight:400; color:#FFF; display:block; position:relative; font-family:'Kanit', sans-serif; background:#025ABE;}
#other-package .pic .price .num i{width:auto; display: block; position:absolute; left:15px; top:9px;}
#other-package .content span a img{width:100%; opacity:.7; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
#other-package .content:hover span a img{scale:1.03; opacity:1; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
#other-package .content span a p{width:100%; height:48px; line-height:20px; font-size:1em; margin:0; padding:4px 3px; color:#000; display: flex;   font-weight:400; justify-content: center; align-items: center; background:#FFF;
}
#other-package .swiper-pagination-package{width:auto; display:none; position:absolute; z-index:50; bottom:-30px; left:50%; transform: translateX(-50%);}
#other-package .swiper-pagination-clickable .swiper-pagination-bullet{width:18px; height:18px; cursor: pointer; margin: 0 5px; text-align: center; display: inline-block;}
#other-package .swiper-pagination-clickable .swiper-pagination-bullet-active{background:#025ABE; transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;}
#other-package .package-next{right:-50px; top:calc(50% + 22px);}
#other-package .package-prev{left:-50px; top:calc(50% + 22px);}
#other-package .package-next, #other-package .package-prev{background-image:none !important;}
#other-package .package-next i, #other-package .package-prev i{width:27px; height:44px; font-size:50px; color:#EF3937; display:block;}

#ctrl{width:auto; margin:auto; margin-top:30px; display:inline-block;}
#ctrl a{width:45px; height:40px; line-height:40px; border:1px solid #CCC; background:#FFF; display:block; float:left; position:relative;}
#ctrl a::before{content:""; height:12px; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
#ctrl a:hover{color:#FFF; background:#EEE; }
#ctrl .first{border-radius:10px; border-bottom-right-radius:0; border-top-right-radius:0; overflow:hidden;}
#ctrl .first::before{width:18px; background:url(../images/icon-arrow1.png);}
#ctrl .last{border-radius:10px; border-bottom-left-radius:0; border-top-left-radius:0; overflow:hidden;}
#ctrl .last::before{width:18px; background:url(../images/icon-arrow1.png); transform:rotate(-180deg) translate(50%, 50%);}
#ctrl .prev{border-left:0; border-right:0px;}
#ctrl .prev::before{width:9px; background:url(../images/icon-arrow1.png);}
#ctrl .next{border-right:0px;}
#ctrl .next::before{width:9px; background:url(../images/icon-arrow1.png); transform:rotate(-180deg) translate(50%, 50%);}
#ctrl .num{border-right:0px; color:#AAA; text-align:center; display:block; float:left; font-weight:500; font-family:'Kanit', sans-serif;}
#ctrl .num:hover{color:#000;}
#ctrl .num::before{display:none;}
#ctrl .num.active{color:#FFF; background:#025ABE; pointer-events:none;}


footer{margin-top:60px;}

@media (min-width: 1921px) {
  #pic-topic.package::after{content:""; background:url("../images/pic-package.jpg") no-repeat top center; background-size:1920px;}
}
@media (max-width: 1300px) {
  #other-package{margin-bottom:90px;}
  #other-package .swiper-pagination-package{display:block;}
  #other-package .package-next{right:5px;}
  #other-package .package-prev{left:5px;}
  #other-package .package-next, #other-package .package-prev{display:none;}
}
@media (max-width: 1280px) { 
    #package ul li .pic img{width:150%;}
}
@media (max-width: 1122px) { 
    #package ul li .pic{width:41%;}
    #package ul li .content{width:59%; padding:20px;}
}
@media (max-width: 780px) {
    #package ul li .pic{width:100%;}
    #package ul li .content{width:100%; height:auto; padding:20px;}
    #package ul li .content p{height:auto;}
    #package ul li .content .booking{height:42px; line-height:42px;}
    #other-package h3, #review h3{margin-bottom:5px;}
    #other-package .content span a p{height:46px; line-height:18px; padding:5px 3px; font-size:1em; font-weight:400;}
}
@media (max-width: 480px) {
    #top-head{padding:10px 15px 0 15px;}
    #top-head .lang{right:15px;}
    #package{margin:30px 0 20px 0;}
    #package ul li .content .booking{width:115px; height:42px; line-height:42px; font-size:1em;}
    #package ul li .content p{font-size:.95em;}
    #ctrl{margin-top:15px;}

    #other-package{margin:14px 0 75px 0;}
    #other-package .content span a p{font-size:.9em;}
}
@media (max-width: 414px) {    
    #package ul li .content h5{font-size:1em;}
    #package ul li .content .booking{height:40px; line-height:40px;}
}
@media (max-width: 378px) {    
    #package ul li .content h5{font-size:1em;}
    #package ul li .content .booking{height:36px; line-height:36px;}
}