/*CSS Grid */
#base-grid, .content-grid { display: grid; display: -ms-grid; grid-template-columns: repeat(12, 1fr);  -ms-grid-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;grid-column-gap: 30px; height: 100%; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center;-ms-flex-line-pack: center;align-content: center;grid-gap: 30px;-ms-grid-column-align:center;}
.col { background: rgba(255,0,0,0.1);  }
*:after, *:before {-webkit-box-sizing: border-box; box-sizing: border-box;margin:0;}
/*p {-webkit-margin-before:0;-webkit-margin-after:0;}*/
sup {line-height: 0;}
.en sup {font-size: .6em;}
small {display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px;}
.spacing {letter-spacing: 0;}
.MR-5 {margin-left:-5px;}
/* */
body {font-family: Lato,Arial,"Noto Sans TC",'Microsoft YaHei',"Microsoft JhengHei","微軟正黑體","apple LiGothic Medium",Verdana,Geneva,sans-serif;font-size: 15px;}
a {text-decoration: none;}
.oblique-left {position: relative; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw) ); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw) );}
.oblique-right {position: relative; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100% ); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100% ); }
.oblique-top-right {position: relative; -webkit-clip-path: polygon(100% 100%, 100% 70px, 0 0, 0 100% ); clip-path: polygon(100% 100%, 100% 70px, 0 0, 0 100%); }

.content-wrapper {max-width: 1280px;margin:0 auto;}
.content-wrapper p {font-size: 20px; line-height: 1.5em; letter-spacing: 1px;padding:1.5em 0 0.5em;color:#333e48; text-align: justify;margin:0;}
.en .content-wrapper p {letter-spacing: 0px;text-align: left; line-height: 1.5em; font-size: 1.25em;}
.content-wrapper a {color:#333e48; text-decoration: underline;}
.content-wrapper small {font-size: 0.9em; line-height: 1.5em;padding-bottom:2em; color:#333e48; text-align: justify;margin:0;letter-spacing: 1px;}
.en .content-wrapper small {letter-spacing: 0px; text-align: left;}
.en .footerTC #tcBtn {display: inline-block!important;}

/* Button */
.content-wrapper button {color: #5c6e7b; border: solid 2px #5c6e7b; text-align: center;font-weight:bold;border-radius: 5px;  padding:0.6em 2em; cursor: pointer; overflow: hidden; -webkit-transition: color 0.3s; transition: color 0.3s; position: relative; display: block;z-index: 1;background: none; -webkit-backface-visibility: hidden;	-moz-osx-font-smoothing: grayscale; font-size:1.2em;}
.content-wrapper button::before {background-color:rgba(255, 255, 255, 0.40);}
.content-wrapper button::before, .content-wrapper button::after {content: ''; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.content-wrapper button::after {background-color:#ffffff;} 
.content-wrapper button:focus {outline: none;}
.content-wrapper button:hover::before, .content-wrapper button:hover::after {-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);}
.content-wrapper button:hover::after {-webkit-transition-delay: 0.175s;
	transition-delay: 0.175s;;}
.content-wrapper button:focus {outline: none; }
.content-wrapper a button:hover {text-decoration: none;}

/* Close button */
.close {position: absolute; right: 32px; top: 100px; width: 32px; height: 32px; opacity: 0.3;}
.close:hover {opacity: 1; }
.close:before, .close:after {position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #ffd300; }
.close:before {transform: rotate(45deg); }
.close:after {transform: rotate(-45deg); }


/* Expand Block */
#bodyContent .howto {max-width: 100%;height: 0;padding:0;margin: -50px 0 0;transition: all 0.5s ease;position: relative;z-index: 1; overflow: hidden; background-image: linear-gradient(to bottom, #202a43, #4e8095);}
#bodyContent .howto.active {height:100%; padding:20px 0 100px;}
#bodyContent .howto.tracking {margin:0;}
#bodyContent .howto.tracking.active {padding:20px 0 60px;}
#bodyContent #app.howto .text {padding:0 3em 0 1em;}
#bodyContent #app.howto .dktFrame .text {max-width: 650px;}
.en #bodyContent #app.howto .text {padding: 0 2em 0 1em;}
#bodyContent .howto .text {grid-column: 5/10; -ms-grid-column: 6; -ms-grid-column-span: 5;-ms-grid-row-align:center;}
#bodyContent .howto .slider {grid-column: 4/5;-ms-grid-column:4; -ms-grid-column-span: 2;}
#bodyContent .howto .text h1 {color:#ffd300; padding-bottom: .2em;}
#bodyContent .howto .text small {color: #ffd300; text-align: left; margin: 0 0 2em; line-height: 1.5;}
#bodyContent .howto .text ul li {opacity: 0.6;}
#bodyContent .howto .text ul li.active {color:#ffffff; opacity: 1;}
#bodyContent #app.howto .slider {border-top:40px solid #1c1e23; border-bottom:40px solid #1c1e23; border-left:10px solid #1c1e23; border-right:10px solid #1c1e23;}
#bodyContent #app.howto .dktFrame {margin-bottom: 50px;}
#bodyContent #app.howto .dktFrame .slider {border-top:45px solid #1c1e23; border-bottom:30px solid #1c1e23; border-left:10px solid #1c1e23; border-right:10px solid #1c1e23; max-width: 700px; display: block;}

.section-title img {width: 100%;}
#sectionTwo, #tracking {margin-top:-5.5%;}
.content-wrapper {padding:10em 0;}

/* Home */
#home {z-index: 4; background-color:#384450;}
.home-kv {width:100%; padding-bottom:805px;background:url("../img/kv-index.jpg") no-repeat center center; background-size: auto 100%;}
.en .home-kv {background:url("../img/kv-index-en.png") no-repeat center center; background-size: auto 100%;}
#home .intro { width:95%;margin:0 auto; padding:1em 0 8em;text-align: center;max-width: 826px;}
#home .intro h2 {font-size: 30px; line-height:34px;letter-spacing: 1px; color: #c3c4c8; margin-bottom: 15px; font-weight: 400;}
.en #home .intro h2 {letter-spacing: 0px; font-size: 26px;}
#home .intro p {font-size: 20px;letter-spacing: 1px; line-height: 34px;color: #c3c4c8;}
#sectionTwo { background-image: url(../img/300-kv.jpg); background-repeat: no-repeat; background-position: center 15%;  background-color:#ffd300; padding-top: 720px; padding-bottom: 160px;}
#sectionTwo .content-wrapper {font-size: 0; }
#sectionTwo .content-wrapper > section {display: inline-block; vertical-align: top; width: 50%; padding: 0 50px;}
.underline {font-weight: 600; position: relative; display: inline; padding-bottom: 3px; line-height: 1.75em; border-bottom: 2px solid #ff5400;}
.underline:after {content: ''; display: block; margin: 1em 0; }
/* Binding*/
#binding {}
#binding .content-wrapper {}
#binding .section-content{}
#binding button {width:355px; font-size: 20px; }
.en #binding button {line-height: 1.3; max-width: 100%;}
#binding .section-title img {max-width: 100%;}
.en #binding .section-title img {}
.binding .dktFrame, #app .content-grid {padding:5em 0 6.5em;}
#app .content-grid:last-child {border-top:2px solid #254258; }

/* Double Miles */
#doubleMiles.mob {display: none;}
#doubleMiles .content-wrapper {}
#doubleMiles .section-content {}
#doubleMiles p {}
#doubleMiles small {font-size: 13.5px; line-height: 1.8; display: block; margin-top: 20px; letter-spacing: 1px;}
#doubleMiles button {width:220px; font-size: 20px;}
.en #doubleMiles button {}
#doubleMiles .section-title img {max-width: 100%;}
.en #doubleMiles .section-title img {}

/* Tracking */
#tracking { z-index: 1; margin-top: -70px; background-color:#E3DDDD; padding-top: 70px; padding-bottom: 50px;}
#tracking .content-wrapper {background:url("../img/tracking-kv.jpg") no-repeat right top;}
#tracking .section-content {grid-column: 2/7;-ms-grid-column: 2; -ms-grid-column-span: 5;}
#tracking button {width:330px; padding: .6em 10px;}
.en #tracking button {width:16em;}
#tracking .banner {padding:1em 0;}
#tracking .banner img {width:100%;padding:1em 0;}
#tracking .section-title img {max-width: 200px}
.en #tracking .section-title img {max-width: 360px; width: 100%;}


@media (min-width: 1500px) { 
	body {font-size: 17px;}
	.close {top:120px;}
	#bodyContent .howto .slider {grid-column: 4/6;-ms-grid-column: 4; -ms-grid-column-span: 2;}
	#bodyContent .howto .text {grid-column: 6/9;-ms-grid-column: 6; -ms-grid-column-span: 3;}
	#trackgin {height:800px;}
	.content-wrapper {max-width: 1400px;}
	#bodyContent #app.howto .text {font-size: 22px; padding:0 2em 0 1em;}
	.en #bodyContent #app.howto .text {font-size:20px; padding:0;}
	#binding .section-content {}
	#doubleMiles .section-title, #doubleMiles p {}
	#tracking .content-wrapper {background-size: contain; padding: 10em 0 5em}

}

@media (max-width: 1200px) { 
	#tracking .section-content {grid-column: 2/6;-ms-grid-column: 2; -ms-grid-column-span: 4;}
 #bodyContent .howto .text {grid-column: 5/11;-ms-grid-column: 5; -ms-grid-column-span: 6;}
}

@media (max-width: 1000px) {
	body {font-size: 14px;}
	#bodyContent .howto.active {}
	#tracking .content-wrapper {background-size:initial;background-position: center top;}
	#binding .content-wrapper {background-color: #ffd300;}
	#doubleMiles .content-wrapper {background-color: #333e48}
	#tracking .section-content {grid-column: 2/12;-ms-grid-column: 2; -ms-grid-column-span: 10;padding-top:450px;}
	#bodyContent .howto.active {padding:8% 0 14%;}
	#bodyContent #app.howto .text {grid-column: 6/11;-ms-grid-column: 6; -ms-grid-column-span: 5;}
	#bodyContent #app.howto .slider {grid-column: 3/6;-ms-grid-column: 3; -ms-grid-column-span: 3;}
}

@media (max-width: 768px) {
	body {font-size: 13px;}
	.content-wrapper p {padding:1em 0; font-size: 17px;}
	#tracking .content-wrapper {background-size:contain;background-position: center top;}
	#home .intro {font-size: 18px;line-height: 2; padding: 1em 0 3em;}
	#bodyContent #app.howto .text {grid-column: 2/12; order: 1;-ms-grid-column: 2; -ms-grid-column-span: 10;}
	#bodyContent #app.howto .slider {grid-column: 2/12; order: 2;-ms-grid-column: 2; -ms-grid-column-span: 10;}
	#bodyContent .howto .text ul li {color:#bbbbbb;}
	#bodyContent .howto.active {padding:20% 0 28%;}
	#bodyContent .howto.tracking.active {padding:20% 0 30%;}
	.close {opacity: 1; right:0;left: 0;top:initial;bottom:45px;margin: auto;}
	#binding .section-title img {width: 100%;}
	#tracking .section-content {padding-top:85%;}
	.en #doubleMiles .section-title img, .en #tracking .section-title img {max-width: 65%;}
	#tracking .section-title img {max-width: 160px;}
	.howto.tracking .content-grid:last-child {margin-top:10%; border-top:2px solid #254258; padding-top:10%;}
}
@media (max-width: 500px) {
	.home-kv {background: url("../img/KV-index-m.jpg") no-repeat center top;background-size: cover;padding-bottom:460px;}
	#home .intro {width:85%;}
	#home .intro h2 {font-size: 17px; margin-bottom: 0;}
	#home .intro p {font-size: 17px}
	.content-wrapper p {line-height: 1.9em;}
	#sectionTwo  {background-image: url(../img/300-kv-m.jpg); background-position: center 5%; padding-top: 89%; background-size: contain; padding-bottom: 20px;}
	#sectionTwo .content-wrapper > section {display: block; width: 100%; padding: 0 30px;}
	#binding button {max-width: 100%; font-size: 16px; padding: .6em 0;}
	#bodyContent .howto.binding {margin: 0;}
	section#doubleMiles.dkt {display: none;}
	section#doubleMiles.mob {display: block; background-color: #ffd300; padding: 30px 30px 90px;}
	section#doubleMiles.mob p {font-size: 17px; color: #333e48; text-align: justify; letter-spacing: 1px; line-height: 1.9;padding: 1em 0;}
	section#doubleMiles.mob button {color: #5c6e7b;border: solid 2px #5c6e7b;text-align: center;font-weight: bold;
    border-radius: 5px;padding: 0.6em 0;cursor: pointer;
    overflow: hidden;-webkit-transition: color 0.3s;transition: color 0.3s;position: relative;display: block;z-index: 1;
    background: none;-webkit-backface-visibility: hidden;-moz-osx-font-smoothing: grayscale; font-size: 16px;}
    #doubleMiles .section-content {padding-top:20%;border-top:2px solid #e0b900;}
    #doubleMiles small {font-size: 11.5px;}
    #tracking {padding-bottom: 0;}
	#tracking .section-content {padding-top:80%;}
	#tracking button {width: 100%;}
	.oblique-top-right {-webkit-clip-path: polygon(100% 100%, 100% 30px, 0 0, 0 100% );
    clip-path: polygon(100% 100%, 100% 30px, 0 0, 0 100%)}
    #bodyContent #app.howto .text {padding:0 1em;}
    #bodyContent #app.howto .slider {margin:1em auto 0;}
}
@media (max-width: 320px) {
	#sectionTwo  {background-image: url(../img/300-kv-m.jpg); background-position: center 20%; padding-top: 89%; background-size: contain; padding-bottom: 20px;}
	#binding .section-content{padding-top:20%;}
/*	#doubleMiles .section-content {padding-top:20%;}*/
	#tracking .section-content {padding-top:75%;}
	.en #doubleMiles .section-title img, .en #tracking .section-title img {max-width: 75%;}
}
@supports not (display: grid) {
	#tracking .section-content {width: 45%;padding: 0 15px;}
	@media (max-width: 768px) {
		#tracking .section-content {width: 100%;}
	}
}