/*
Theme Name: swap
Author: Dicky
Author URI: http://swwwap.hk
Description: This is a  bootstrap theme for wordpress. 
Version: 1.0
License: swwwap
*/
.mobile-item{display: none}
.desktop-item{display: block}
.contorl-arrow{display: none}

.menu{
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
     -moz-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    position: fixed;
    right:-90px;
    top:140px;
    z-index: 6
}
.en-btn{position: fixed;right: 18px;top:332px;z-index: 99;font-size: 12px;cursor: pointer}
.media{    position: fixed;    right:6px;    top:260px;    z-index: 6;width: 40px}
.media i{font-size: 18px;float: left;width: 40px;text-align: center;margin-bottom: 4px}

.menu li{ cursor: pointer}

.landing{position: fixed;z-index: 99;width: 100%;height: 100%;background: #FFF;top:0;left: 0}
.landing .holding{position: absolute;top:100%;left: 0;width: 100%;height: 100%}
.landing .holding img{margin: 0 auto;}
.i-c{position: fixed;right: 20px;bottom:20px;z-index: 6;;text-align: right}

.menu li{float: left;margin: 0 10px}
.top-bar{height: 10px;width: 100%;position: fixed;top:0;left: 0}
.bottom-bar{height: 10px;width: 100%;position: fixed;bottom:0;left: 0}
.left-bar{width: 10px;height: 100%;position: fixed;top:0;left: 0}
.right-bar{width: 50px;height: 100%;position: fixed;top:0;right: 0}

.bottom-bar,.top-bar,.left-bar,.right-bar{z-index: 5;background: #FFF}


.top-bar.active{height:20px;background: #FFF}
.bottom-bar.active{height:100px;background: #FFF}

.left-bar.active{width:20px;background: #FFF}


a,.info-wrap,.title-list,.title-list li,.welcome-title,.circle-step,.step-c li,.backtotop,.backtotop h3
,.last-ss li h2,.facebook,.photo-btn,.pop-image-mobile,.ion-ios-arrow-thin-up,.menu{
  -webkit-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
	
}
.bottom-bar,.top-bar,.left-bar,.right-bar,.landing-ani,.landing-text,.section-inner,.step-list li,.left-bg,.ss-title,.dd,.ss,.dds,.arrow-3,.arrow-4,.pop,.step-c,.pop-last,footer,.pop-people,.pop-news,.ppl-in-w,.ppl-ll,.last-ss-left,.hover-image,.disclaimer-wrap{
  -webkit-transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1);	
}


.landing-ani{position: fixed;width:100%;height:100%;left:-13%;top:0;z-index: 5;opacity: 1;pointer-events: none}
.landing-ani.active{left:-20%;opacity: 0}
.landing-text{position: absolute;width:100%;height:86%;left:0;top:0;z-index: 6;opacity:1;pointer-events: none}
.landing-text.active{opacity: 0;}

.read-more .read-long{display: block}
.read-more .read-short{display: none}
.read-more.active .read-long{display: none}
.read-more.active .read-short{display: block}


#sectiona{background: #F2F0ED}
#sectiona p{padding:  0 10%}

.section-inner{opacity: 0;position: absolute;top:0;left: 0;width: 100%;height: 100%;z-index: 9;}
.section-inner.active{opacity: 1}
.left-bg{width: 50%;height: 100%;position: absolute;left:-50%;top:0;background: #FFF;z-index: 2}
.left-bg.active{left: 0}
.welcome-title{position: relative;width: 50%;z-index: 3;opacity: 0;padding-right: 40px;padding-left:40px;background: #FFF;height: 100%;overflow: scroll;}
.section-inner.active .welcome-title{opacity: 1}
.welcome-title h2{color: #F59079}
.welcome-title-wrap{padding-top: 40px;padding-bottom: 80px}


.section-inner .right-ss{position: absolute;right:40px;width: 49%;height: 100%;top:0}
.line-b{width: 2px;background: #FFF;height: 20px;display: block;margin: 20px auto}
.step-list li{min-height: 30px;opacity: 0;position: relative;margin: 0 auto}
.step-list li.active{opacity: 1}
.step-list h5{ margin: 4px auto}
.circle-step h3.n{background: #FFF;display: inline-block;text-align: center;padding: 20px;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;pointer-events: auto;cursor: pointer}
.circle-step:hover h3.n{background: #0E322E;color: #FFF}
.circle-step:hover h3.n{color: #FFF}
.step-list li.hidec .circle-step .dd,.step-list li.hidec .circle-step .dds{left: 0;opacity: 0}
.step-list li.hidec .circle-step .ss{right: 0;opacity: 0}

.circle-step .dd{    padding-right: 40%;    position: absolute;    top: 20px;
    width: 100%;}
.circle-step .ss{ padding-left:40%;    position: absolute;    top: 20px;
    width: 100%;}
.circle-step .dds{position: absolute;left: -130px;top:20px}

.step-c{position: fixed;right:-40px;bottom:20px;z-index: 6}
.step-c.active{right: 12px}
.step-c li{-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;background: #CCC;text-align: center;width: 28px;height: 28px;margin-bottom:10px;cursor: pointer}
.step-c li:hover{background: #999}
.step-c li.active{background: #F59079}
.step-c h5{line-height: 30px;color: #FFF;font-size: 10px}
.step-c h4{line-height: 30px;color: #FFF}

.ss2-right{position:absolute;width: 100%;height: 100%;padding:0;padding-left: 400px}
.info-fixed{position: fixed;width: 100%;height: 100%;left: 0;top:0;z-index: 4;pointer-events: none}
.title-number{color:#F59079}
.info-wrap.active,.title-list.active{opacity: 1}
.ss-title{position: absolute;top:0 ;left: -400px;width: 400px;height: 100%;background: #FFF;padding: 40px 0 40px 20px;overflow: scroll}
.ss-title.active{left: 0}
.title-list{opacity: 0;position: relative}
.date-q{display: inline-block;background: #F59079;margin-top: 10px;padding: 0 16px;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;color: #FFF;text-transform: uppercase}
.ppl-in-w {float: left;width: 100%;}
.ppl-in-w li{position: relative;float: left;margin-right:16px;text-align: center}
.ppl-in-w .ppl-img,.ppl-ss .ppl-img{width: 60px;height: 60px;background: #EEE;float: left;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;margin-bottom: 6px}
.ppl-in .ppl-img{width: 60px;height:60px;background: #EEE;float: left;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;margin-bottom: 6px;background-size: cover !important;margin: 6px 10px}
.ppl-in li{float: left;margin-right: 10px;text-align: center;width: 80px}
.ppl-ss li{display: inline-block}
.ppl-ss {text-align: center}
.ppl-sl li:nth-child(1) .ppl-in-img,.ppl-ss li:nth-child(1) .ppl-img{background: url(img/pp/pp1.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(2) .ppl-in-img,.ppl-ss li:nth-child(2) .ppl-img{background: url(img/pp/pp2.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(3) .ppl-in-img,.ppl-ss li:nth-child(3) .ppl-img{background: url(img/pp/pp3.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(4) .ppl-in-img,.ppl-ss2 li:nth-child(1) .ppl-img{background: url(img/pp/pp4.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(5) .ppl-in-img,.ppl-ss2 li:nth-child(2) .ppl-img{background: url(img/pp/pp5.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(6) .ppl-in-img,.ppl-ss2 li:nth-child(3) .ppl-img{background: url(img/pp/pp6.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(7) .ppl-in-img,.ppl-ss2 li:nth-child(4) .ppl-img{background: url(img/pp/pp7.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(8) .ppl-in-img,.ppl-ss2 li:nth-child(5) .ppl-img{background: url(img/pp/pp8.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(9) .ppl-in-img,.ppl-ss2 li:nth-child(6) .ppl-img{background: url(img/pp/pp9.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(10) .ppl-in-img,.ppl-ss2 li:nth-child(7) .ppl-img{background: url(img/pp/pp10.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(11) .ppl-in-img,.ppl-ss2 li:nth-child(8) .ppl-img{background: url(img/pp/pp11.png) center center no-repeat;background-size: cover}
.ppl-sl li:nth-child(12) .ppl-in-img,.ppl-ss2 li:nth-child(9) .ppl-img{background: url(img/pp/pp12.png) center center no-repeat;background-size: cover}



.title-list>li{opacity: 0;max-height: 0;position: absolute;top:80px;background: #FFF;padding:0 20px;-webkit-border-radius:0;-moz-border-radius:0;;border-radius:0;float: left;overflow: scroll;pointer-events: auto;padding-bottom: 80px}
.title-list>li .title-wrap{position: relative;overflow: hidden}
.title-list>li.active{opacity: 1;max-height: 999px;top:0}

a{border-bottom: 1px solid #F54503;color: #F54503}
a:hover{border-bottom: 1px solid #F54503;color: #F54503;text-decoration: none}

.en-btn a{border-bottom: 0;color: #000}

#section0{background: #F2F0ED url(img/bg-brown.png) center center repeat;;background-size:14px}
#section1{background: #F2F0ED}
#section2{background: #F2F0ED;}
#section3{background: #F2F0ED;}
#section4{background: #F2F0ED;}
#section5{background: #F2F0ED;}
#section6{background: #F2F0ED}
.ss3-right,.ss4-right,.ss5-right{padding-left: 400px;height: 100%}


section{position: relative}

/*#section3{background: #FFECE1}
#section4{background: #E2FFF7}
#section5{background: #F6E8EA}*/
.title-list li h2{color: #F59079;font-size:26px !important;line-height: 32px !important}


.img-item{position: absolute;width: 20%}
.item-wrapper{position: relative}
.item-bg{position: absolute;width: 100%;height: 100%;background:url(img/bg-pink.png) center center repeat;left: 10px;bottom:-10px;background-size: 10px;z-index: 0}
.img-item{position: relative;float:left;z-index: 2;width: 33%}


.ppl-in{position: relative;float: left}
.title-wrap a,.ppl-in{pointer-events: auto;cursor: pointer}
.title-wrap {position: absolute;width: 400px;left: 0;top:0;padding:40px 60px 20px 30px;background: #FFF;height: 100%;z-index: 4}

.arrow-3,.arrow-4{position: fixed;right:90px;bottom:-100px;z-index: 99;display: inline;overflow: hidden}
.arrow-3 i,.arrow-4 i{margin-right: 1px;pointer-events: auto;cursor: pointer;color:#FFF;background: #999;padding: 0 14px}
.arrow-3 i:hover,.arrow-4 i:hover{background: #4B65A8}
.arrow-3.active,.arrow-4.active{bottom: 46px}
.flex-direction-nav{max-height: 1px;overflow: hidden;opacity: 0}
.step-list h3{line-height: 23px}

.ss3-info h5{margin-left:  60px;background: #FFF;display: inline-block;text-align: left;padding:4px 30px;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;color: #333}
.p-details{max-height:0;overflow: hidden;display: inline-block}
.p-details.active{max-height: 999px}
.pop{position: fixed;width: 100%;height: 100%;background:rgba(173,163,138,.9);top:100%;left: 0;z-index: 999;padding: 0 25%;opacity: 0}
.pop h2,.pop h4 ,.pop h3,.pop h5{color:#FFF}
.pop h4{margin-bottom: 20px}
.q-line{height: 40px;width: 1px;margin: 20px auto;background: #FFF}
.pop.active{top:0;opacity: 1}



.q-listing li{display: none}
.q-listing li.active{display: block}

.last-ss li{padding: 20px; border-bottom: 1px solid #FFF;cursor: pointer;position: relative}
.last-ss li:last-child{border-bottom: 0}
.last-ss {padding: 0 20%;margin-top: -80px}
.last-ss li:hover h2{color:#F59079}

.school-list li{    -webkit-border-radius: 40px;    -moz-border-radius: 40px;    border-radius: 40px;background: #FFF;text-align: left;padding:  0 20px;cursor: pointer;display: inline-block;margin-bottom: 10px}
.school-list li p{margin-bottom: 0 !important
}

.school-list li.active{background: #F59079}
.school-list li.active p{color:#FFF}

.image-cbtn{padding:  0 60px}
.school-list li p{margin: 4px 0}
.hover-image{width: 100%;height: 420px;padding: 20px;position: relative;max-height: 0;overflow: hidden}
.hover-image.active{max-height: 999px}
.hover-list{overflow: hidden;height: 420px;position: relative;}
.hover-list li{overflow: hidden;position: absolute;top:0;left: 0;height: 420px;width: 100%;padding: 20px;z-index: 2}
.hover-list li.active{z-index: 6}
.image-item-h {width: 100%;position:relative;left: 0;top:0;height: 420px}

.pop-people{position: fixed;right: 0;top:100%;width: 100%;height:100%;background: rgba(255,255,255,.9);z-index: 999;opacity: 0;overflow: hidden;padding: 100px}
.pop-people.active{top:0;opacity: 1}
.pop-news{position: fixed;right: -50%;top:0;width: 50%;height:100%;background: rgba(245,245,245,.9);z-index: 999;opacity: 0;overflow: hidden}
.pop-news.active{right:0;opacity: 1}
.ppl-ss li{width: 17%;position: relative;margin-bottom: 10px}
.ppl-ss {padding: 0 10%;float: left;width: 100%;text-align: center;overflow: hidden;margin-bottom: 40px}
.ppl-ss li .ppl-img{float: none;margin: 20px auto 10px auto;width: 80px;height:80px }
.pop-last{position: fixed;width: 100%;height: 100%;background:rgba(255,255,255,.9);top:100%;left: 0;z-index: 999;padding: 100px 25%;opacity: 0;overflow-y: scroll}
.pop-last.active{top:0;opacity: 1}
.pop-last i {color: #999}
.lineb{height: 1px ;background: #EEE;width: 100%;margin: 30px 0 }
.qa-ss{margin-bottom: 100px}
.qa{color: #F59079;display: inline-block;}
.qa-ss li{display: none}
.qa-ss li.active{display: block}
.news-ss{padding: 0 100px 0 40px;    overflow: scroll;    height: 100%;}
.news-ss li{padding-bottom: 20px;border-bottom: 1px solid #CCC;position: relative;float: left;width: 100%}
.news-ss li .left-ss{width: 100%;position: relative;float: left;margin-top: 60px}
.news-ss li .left-ss img {width: 30%;margin-right: 10px;float: left}
.news-ss li .right-ss{width:100%;position: relative;float: left}
.color-white{color: #FFF}

.ion-ios-close-empty{position: absolute;top:0;right:20px;color: #FFF;font-size: 72px;cursor: pointer;z-index: 9}
.ion-ios-arrow-thin-up{position: absolute;top:60px;right:20px;color: #FFF;font-size: 72px;cursor: pointer;z-index: 9;opacity: 0}
.ion-ios-arrow-thin-up.active{opacity: 1}
footer{position: fixed;bottom:-200px;left: 0;width: 100%;height: 80px;padding:10px 20px;z-index: 9;opacity: 0}
footer.active{bottom:0;opacity: 1}
.facebook{position: absolute;top:24px;right:54px;border-bottom: 0}
.facebook:hover{opacity: .6;border-bottom: 0}

.ppl-ll{position: absolute;width: 100%;height: 100%;left: 0;top:0;z-index: 1;overflow: scroll}
.ppl-ll.active{top:-100%}
.ppl-in-w{position: absolute;width: 100%;height: 100%;left: 0;top:100%;padding: 100px 30%;;z-index:3;overflow: scroll}
.ppl-in-w.active{top:0}
.ppl-in-img{width: 100px;height: 100px;background: #999;;-webkit-border-radius: 60px;-moz-border-radius: 60px;border-radius: 60px;margin-bottom:40px}
.ppl-sl li{display: none;padding: 40px 0 }
.ppl-sl li.active{display: block}
.ppl-back{overflow: hidden}
.video-block{width: 30%;margin: 0 1%;float: left;position: relative}
.video-block-wrapper{margin: 0 60px}
#sectiona h2{color: #F59079}
.black-layer{position: absolute;width: 100%;height:100%;background: rgba(0,0,0,.5)}
.last-ss-left{position: absolute;width: 50%;right: 0;top:0;height: 100%;background: #FFF}
.last-ss-right{position: absolute;width: 50%;left:  0;top:0;height: 100%}
.ss4-right{height: 100%}
.disclaimer h5{display: inline-block;color:#f54503 ;padding-bottom: 2px;text-transform: uppercase}

.photo-btn>div{display: none}


.scroll-down-wrap{
	position: fixed;
	top:0;
	left: 0;
	height:92%;
	width: 100%;;z-index: 21;
	pointer-events: none
}
.scroll-down-wrap.active{
	opacity: 0
}


.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: block;
  text-align: center;
  font-size: 20px;
  z-index: 100;
  text-decoration: none;
  text-shadow: 0;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #0e322e;
  border-right: 2px solid #0e322e;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
  -webkit-animation: fade_move_down 2s ease-in-out infinite;
  -moz-animation: fade_move_down 2s ease-in-out infinite;
  animation: fade_move_down 2s ease-in-out infinite;
  	cursor: pointer;
  	pointer-events: auto
}
.scroll-down-wrap.active .scroll-down {
  	pointer-events: none
}

.new-info{overflow: hidden;max-height: 0}
.active .new-info{max-height: 999px}


/*animated scroll arrow animation*/

@-webkit-keyframes fade_move_down {
  0% {
    -webkit-transform: translate(0, -10px) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 10px) rotate(45deg);
    opacity: 0;
  }
}

@-moz-keyframes fade_move_down {
  0% {
    -moz-transform: translate(0, -10px) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -moz-transform: translate(0, 10px) rotate(45deg);
    opacity: 0;
  }
}

@keyframes fade_move_down {
  0% {
    transform: translate(0, -10px) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 10px) rotate(45deg);
    opacity: 0;
  }
}
.mobile-menu-btn{width: 40px;height: 40px;background: #EEE;position: fixed;top:0;right: 0;z-index: 9999;;text-align: center;display: none}
.mobile-menu-btn h2{line-height: 40px}
.media a{color: #333}
.disclaimer-wrap{position: fixed;display: block;width: 100%;height: 100%;background: rgba(255,255,255,.9);z-index: 999;top:-100%;left: 0;padding: 20px;opacity: 0}
.disclaimer-wrap i{color: #000}
.disclaimer-wrap.active{top:0;opacity: 1}
/*en */
#en-v .menu{right:-76px;top:130px;z-index: 6}
#en-v .welcome-title p{padding-right: 0}
#en-v .circle-step {padding: 16px 20px}
#en-v .step-c h5,#en-v .step-c h4{line-height: 26px}
#en-v .en-btn{right: 17px;}
#en-v .welcome-title h2{font-size: 18px;line-height: 22px}
#en-v .circle-step .ss,#en-v .circle-step .dd{top:30px}
#en-v .circle-step .dd{padding-right: 40%}