* { box-sizing:border-box; }
.row { margin:0px; }
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 { padding-left:0px; padding-right:0px; }
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { padding-left:0px; padding-right:0px; }

html {font-size:4.7vw; line-height:5vw; height:100%; width:100%; padding:0px; margin:0px; }  
body {
    font-size:4.7vw; 
    line-height:5vw; 
    height:100%; 
    font-weight:100;
    font-style:normal; 
    font-family: 'Noto Sans TC', sans-serif;
    background-color:#ffffff; 
    color:#666059; 
    padding:0px; 
    margin:0px; 
    background-attachment: fixed !important; 
    background-image:url('../images/02-bg.jpg'); 
    background-size:100% 100%;  
}

.fixed, .fixed body { position:fixed; overflow:hidden; width:100%; height:100%; }
label { margin:0px; }
a, a:visited { color:#878076; text-decoration:none; }
b, .bold { font-weight:600; } 
.fleft { float:left; } 
.fright { float:right; } 
.clear { clear:both; }
.clearfix:after { content:""; display:table; clear:both; }
ul, ol { padding:0px; margin:0px; }
table { width:100%; }
th { padding:0px; vertical-align:middle; }
td { padding:0px; vertical-align:middle; }
.no-display { display:none; }
.align-l { text-align:left; }
.align-c { text-align:center; }
.align-r { text-align:right; }
.fleft { float:left; }
.fright { float:right; }
.align-l, .align-l.m-align-l, .align-l.m-align-c, .align-l.m-align-r { text-align:left; }
.align-c, .align-c.m-align-l, .align-c.m-align-c, .align-c.m-align-r { text-align:center; }
.align-r, .align-r.m-align-l, .align-c.m-align-c, .align-c.m-align-r { text-align:right; }
.mobile-display { display:none; }
.desktop-display { display:block; }

/* HR */
.hr { background-repeat:no-repeat; background-size:100% 100%; background-position:center; background-image:url('../images/line.png'); width:90%; height:2vw; margin:4.5vw auto; }

/* BUTTON */
.btn-wrapper { display:inline-block; margin:5vw auto 0px; padding:1.5vw 0px; font-size:2.4vw; line-height:3vw; }
.btn-wrapper .button { padding:3vw; display:inline-block; background-repeat:no-repeat; background-size:100% 100%; background-position:center; background-image:url('../images/button.png'); font-weight:normal; }
.btn-wrapper .button .en { font-size:1.6vw; line-height:2.5vw; }
a.button:hover > div { background-color:#B8392F; }

/* CONTENT */
.content-wrapper.qrcode { background:none; }
.content-wrapper { width:100%; max-width:640px; min-height:176vw; position:relative; background-repeat:no-repeat; background-size:contain; background-position:top center; padding:5vw 0px; background-image:url('../images/02-bg.jpg'); margin:0px auto; }

.landing { background-image:url('../images/landing/bg-2.jpg'); }
.content-wrapper .logo { width:100%; height:11vw; background-repeat:no-repeat; background-size:contain; background-position:center; background-image:url('../images/landing/logo.png'); }

.text { width:100%; font-size:3.3vw; margin-top:7.3vw; } 
.text .tc { line-height:4vw; }
.text .en { font-size:2.5vw; line-height:3vw; }

.terms { width:80%; font-size:1.7vw; line-height:2.5vw; margin:9vw auto 0px; text-align:justify; } 
.text2 { width:90%; font-size:3.3vw; margin:3.3vw auto 0px; } 
.text2 .en { font-size:2.3vw; line-height:3vw; letter-spacing:-0.2vw; }
.line { width:100%; height:1vw; background-repeat:no-repeat; background-size:contain; background-position:center; background-image:url('../images/landing/line.png'); }
.line.last { position:absolute; bottom:0px; }

.landing .social-media { margin-top:8vw; height:21vw; position:relative; }
.landing .social-media .button { width:20%; height:100%; position:absolute; }
.landing .btn-fb { top:0px; bottom:0px; left:15%; margin:auto; background-repeat:no-repeat; background-size:9vw; background-position:center; background-image:url('../images/landing/fb.png'); }
.landing .btn-whatsapp { top:0px; bottom:0px; left:0px; right:0px; margin:auto; background-repeat:no-repeat; background-size:9vw; background-position:center; background-image:url('../images/landing/whatsapp.png'); }
.landing .btn-wechat { top:0px; bottom:0px; right:15%; margin:auto; background-repeat:no-repeat; background-size:9vw; background-position:center; background-image:url('../images/landing/wechat.png'); }

.text3 { width:100%; font-size:2.1vw; line-height:3vw; margin-top:2.6vw; } 
.text3 .en { font-size:1.6vw; line-height:2.5vw; }

.price-container { font-size:2.1vw; line-height:3vw; margin-top:15vw; padding:0px 4vw; }
.price-content { width:33%; float:right; position:relative; }
.price-content .row1, .price-content .row2, .price-content .row3 { padding:2vw 0px; position:relative; }
.price-container .line { position:absolute; top:0px; left:0px; }
.price-container .line.last { position:absolute; top:inherit; bottom:0px; left:0px; }

.qrcode-wrapper { padding:8vw; width:60%; max-width: 384px; margin:0px auto }
.qrcode-wrapper img { width:100%; }
.text.intro { padding:0px 8vw; margin-top:0px; }

@media only screen and (min-width:640px) {
    .content-wrapper { padding:32px 0px; min-height:inherit; max-height:1126px; }
    .content-wrapper .logo { height:70.4px; }
    .text { font-size:21.0936px; line-height:31.96px; margin-top:46.6616px; }
    .text .tc { line-height:25.568px; }
    .text .en { font-size:15.98px; line-height:19.176px; }
    
    .price-container { font-size:13.4232px; line-height:19.176px; margin-top:95.88px; padding:0px 25.568px; }
    .price-content .row1, .price-content .row2, .price-content .row3 { padding:12.832px 0px; }
    .terms { font-size:10.9072px; line-height:16.04px; margin:57.744px 62.475px 0px;  }
    
    .landing .social-media { height:134.4px; margin-top:51.2px; font-size:30.08px; line-height:32px; }
    .landing .btn-fb, .landing .btn-whatsapp, .landing .btn-wechat { background-size:57.6px; }
    .line {  height:6.4px; }
    .text2 { font-size:21.12px; line-height:32px; margin-top:21.12px; }
    .text2 .en { font-size:14.72px; letter-spacing:-1.28px; line-height:19.2px; }
    .text3 {  font-size:13.44px; line-height:19.2px; margin-top:16.64px; }
    .text3 .en { font-size:10.24px; line-height:16px; }
    .btn-wrapper { margin-top:32px; font-size:15.36px; line-height: 19.2px; padding:9.6px 0px; }
    .btn-wrapper .button { padding:19.2px; }
    .btn-wrapper .button .en { font-size:10.24px; line-height:16px; }
    
    .qrcode-wrapper { padding:51.2px; }
}