@charset "utf-8";
html, body { height: 100%;}
body { font-family: 'Poppins', sans-serif; overflow-x:hidden }
* { box-sizing:border-box; -webkit-box-sizing:border-box;}
body, h1, h2, h3, h4, h5, h6, ul, li { margin:0; padding:0;}
a, a:hover, a:focus, input, button { color:inherit; text-decoration:none; outline:none; transition: all ease 0.1s; -webkit-transition: all ease 0.1s; -moz-transition: all ease 0.1s;}
header, section { display:block; }
li { list-style:none; }
img { max-width:100%;}
.banner-contents h1{ color: #111 }
.footer-menu a:hover { color: #2488f6 }
.content-block.light-blue:before { background-color:#2488f6 }
.container { width:100%; max-width: 1650px; padding:0 15px; margin:0 auto; position:relative; }
header { position:absolute; width:100%; height:auto; left:0; top:0; padding:40px 0; z-index:99 }
.banner { position:relative; width:100%; height:100%; min-height:100%; min-width:100%; overflow:hidden; background-color:#fff; }
.banner-contents { position:absolute; width:50%; height:300px; margin:auto; left:0; top:0; bottom:0; padding:0 15px; z-index: 5; }
.banner-contents h1 { font-size:48px; font-weight:700; margin:60px 0; line-height: 60px; }
.banner-contents h1 img { width:50px; display:inline-block; vertical-align:sub; }
.banner-iphone { position:absolute; right:0; top:40px; margin:auto; width:50%; max-width:760px; }
.banner .container { height:100% }
.banner-contents a.appbtn, .bottom-contents a.appbtn { display:inline-block;}
.banner-contents a.appbtn img, .bottom-contents a.appbtn img { float:left; width: 220px; } 
.banner-contents a.appbtn:hover img, .bottom-contents a.appbtn:hover img { opacity:.8 }
.content-block { position:relative; width:100%; min-height:100%; height:100%; overflow-y:hidden; background-color:#fff; }
.content-block .container { height:100%; }
.content-block:before { width:50%; content:""; height:100%; position:absolute; left:0; top:0; }
.content-block.yellow:before { background-color:#fffc00; right:0; left:auto;}
.content-block.light-blue:before { background-color:#74829a; right:0; left:auto; }
.content-block.green:before { background-color:#00d56b; background-image:url(../images/final.gif); background-position:center; background-repeat:no-repeat; background-size:100%; }
.content-block.dark-blue:before { background-color:#162743;	}
.left-block, .right-block { width:50%; position:absolute; top:0; height:100%; }
.left-block { left:0;  }
.right-block { right:0; text-align:left; }
.content-block img { max-height: 90%; display: block; position: absolute; top: 0; bottom: 0; left:0; right:0; margin: auto; }
.content-block .container { max-width:1300px;}
.content-block h2 { font-size:42px; font-weight:600; color:#111; line-height: 53px;}
.content-block p, .bottom-contents p { font-size:24px; font-weight:400; line-height: 30px; color:#6e6e6e; margin:30px 0; }
.content-block.light-blue { margin-bottom:734px; box-shadow: 0 30px 30px rgba(0,0,0,0.2); -webkit-box-shadow: 0 30px 30px rgba(0,0,0,0.2); -moz-box-shadow: 0 30px 30px rgba(0,0,0,0.2); }
.block-contents { position:absolute; width:100%; top:0; bottom:0; margin:auto; height:300px; padding:0 73px;}
.bottom-contents { display:inline-block; padding:160px 0 0; text-align:center; width:100%; position: fixed; bottom: 0; left: 0; z-index: -1; background-color: #162743; }
.bottom-contents h3 { font-size:36px; font-weight:600; color:#fff; line-height: 46px; } 
.bottom-contents p { max-width: 700px; margin:40px auto; color: #74829a;}
.footer { display:inline-block; width:100%; margin-top: 160px; }
.footer .container { max-width:1250px; border-top:1px solid #243552; }
.copyright { float:left; margin:30px 0; }
.footer-menu { float:right; }
.footer .container p { margin:60px 0; font-size:24px; font-weight:400; line-height: 30px; color:#6f809c;  }
.footer-menu a { padding:0 10px; }
.footer-menu a:last-child { padding-right:0; }

@-webkit-keyframes fadeInUp {
  from { opacity: 1; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInUp {
  from { opacity: 1; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
.fadeInUp {-webkit-animation-name: fadeInUp; animation-name: fadeInUp;}

@media(max-width:1440px){
.container { max-width:1250px; }
.banner-contents { width: 60%;}
.banner-contents h1 { font-size: 42px;}
.banner-iphone { top: 11%; width: 45%;}
.content-block img { max-height: 80%;}
.content-block h2 { font-size:36px; }
.content-block p, .bottom-contents p, .footer .container p { font-size:20px; }
.block-contents { height:180px; }
}
@media(max-width:1024px){
.banner-iphone { position: static; margin: 20px auto 0; display: block; width: 95%; }
.banner-contents { position: relative; height:auto; width: 100%; text-align: center; margin-top: 210px;}
.banner-contents h1 { margin: 0 0 20px 0; }
.banner-contents a { position: absolute; top: -190px; right: 0px;}
header { padding: 18px 0; width:50%; }
.block-contents { padding: 0 40px;}
}
@media(max-width:768px){
.banner-contents h1 { font-size: 40px; line-height: 47px;}
.left-block, .right-block { width: 100%; position: relative; display:inline-block; text-align:center; float:left;}
.content-block img, .block-contents, .content-block { position:relative;}
.content-block { overflow:visible; height:auto; min-height:auto; width: 100%; float: left; }
.content-block:before { width:100%;} 
.block-contents { height:auto; padding:0 15px 50px; }
.content-block img { max-height: 580px; margin: 40px auto;}
.content-block:before { display:none;}
.content-block .container { padding: 0;}
.content-block.dark-blue .left-block { overflow:hidden; }
.content-block.dark-blue .left-block:before { background-color:#162743; width:100%; position:absolute; height:70%; content:""; top:0; left:0;}
.content-block.yellow .right-block { overflow:hidden;}
.content-block.yellow .right-block:before { background-color:#fffc00; width:100%; position:absolute; height:70%; content:""; top:0; left:0;}
.content-block.light-blue .right-block { overflow:hidden; }
.content-block.light-blue .right-block:before { background-color:#74829a; width:100%; position:absolute; height:70%; content:""; top:0; left:0;}
.content-block.green .left-block { overflow:hidden; }
.content-block.green .left-block:before { background-color:#00d56b; width:100%; position:absolute; height:70%; content:""; top:0; left:0;}
.content-block h2 { font-size: 38px; line-height: 50px;}
.bottom-contents { padding: 100px 0 0;}
.content-block.light-blue { margin-bottom:0px; }
.bottom-contents { position:static; }
.footer { margin-top:40px; }
}
@media(max-width:580px){
.banner-contents a { width: 30%;}
header { width: 35%;}
}
@media(max-width:480px){
header {padding: 20px 0; text-align: center; width: 43%;}
.banner-contents a.appbtn img{ width: 100%}
.banner-contents h1 { font-size: 30px; line-height: 35px;}
.banner-contents h1 img { width: 40px;}
.banner-contents { width: 100%; margin-top: 110px; padding: 0;} 
.banner-contents a { top: -82px; }
.banner-iphone { margin: 0px -20% ; width: 140%;}
.content-block h2, .bottom-contents h3 { font-size: 30px; line-height: 38px;}
.content-block p, .bottom-contents p { font-size: 18px; line-height: 24px;}
.footer  { padding:0 0 20px; }
.footer .container { padding:20px 15px; }
.footer .container p { margin:0; font-size: 16px; line-height:24px; width: 100%; text-align:center;}
.bottom-contents a.appbtn img { width: 170px;}
}
@media(max-width:375px){
.logo { margin-left: -10px;}
header { padding: 10px 0;}
.banner-contents a {top:-100px; width:40%;}
.banner-contents h1 { font-size: 27px;  line-height: 27px;}
.banner-contents h1 img {  width: 25px;}
.content-block h2, .bottom-contents h3 { font-size: 26px; line-height: 35px;}
.content-block p, .bottom-contents p {  font-size: 16px; line-height: 22px;}
}