@font-face {font-family: 'sf_pro_displaybold'; src: url('../fonts/sf_pro_display_bold-webfont.woff2') format('woff2'), url('../fonts/sf_pro_display_bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face {font-family: 'sf_pro_displaymedium'; src: url('../fonts/sf_pro_display_medium-webfont.woff2') format('woff2'), url('../fonts/sf_pro_display_medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face {font-family: 'sf_pro_displayregular'; src: url('../fonts/sf_pro_display_regular-webfont.woff2') format('woff2'), url('../fonts/sf_pro_display_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}

@font-face {font-family: 'sf_pro_displaysemibold'; src: url('../fonts/sf_pro_display_semibold-webfont.woff2') format('woff2'), url('../fonts/sf_pro_display_semibold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face {font-family: 'sf_pro_displaylight'; src: url('../fonts/sf_pro_display_light-webfont.woff2') format('woff2'), url('../fonts/sf_pro_display_light-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}

@font-face {font-family: 'sf_pro_displayheavy'; src: url('../fonts/fontsfree-net-sfprodisplay-heavy-webfont.woff2') format('woff2'),
         url('../fonts/fontsfree-net-sfprodisplay-heavy-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
 

body {font-size: 16px; color:#0d293a; line-height:28px; background:#fff; font-family: 'sf_pro_displayregular'; font-weight:normal; letter-spacing: 0; margin: 0; padding: 0;}
* {list-style:none; margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
li{display:list-item; border:0; margin:0; padding:0;}
::selection{background:#a4a4a4; color:#fff}
img{ padding: 0; margin:0; line-height: 0 }
a{ color: #00b7e1; text-decoration: none;  transition:all 0.2s ease-in 0s; cursor: pointer; }
a:hover, a:focus{ color: #353854; text-decoration: none; outline: none}
h1,h2,h3,h4,h5,h6{margin:0;padding:0 0 10px;letter-spacing:0;font-weight:normal;line-height:normal;text-transform:none; font-family: 'sf_pro_displaybold'; color: #353854}
li{list-style: none; padding: 0; margin: 0;}
.container{ max-width:1230px; padding: 0 15px; margin:0 auto; width: 100% }

.header{ position:absolute; left: 0; top: 0; z-index: 111; background:none; width: 100%; padding:40px 0; clear: both; -moz-transition:all .3s linear;-webkit-transition:all .3s linear; transition:all .3s linear; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;  }



/* home banner */

.main-banner{ width: 100%; clear: both; padding:210px 0 210px; }
.webp .main-banner{background:url(../images/affiliate_program_banner.webp) center no-repeat; background-size:cover; }
.no-webp .main-banner{background:url(../images/affiliate_program_banner.jpg) center no-repeat; background-size:cover; }
.main-banner .banner-content h3.banner-first-title{ font-size:26px; color: #fff; font-family: 'sf_pro_displaysemibold'; line-height:34px; text-transform:uppercase; padding-bottom: 4px; }
.main-banner .banner-content h1.banner-title{ font-size:65px; color: #00b7e1; font-family: 'sf_pro_displaybold'; line-height:80px; padding-bottom:20px; text-transform:uppercase; }
.main-banner .banner-content p.banner-text{ font-size:20px; color: #fff; font-family: 'sf_pro_displaylight'; line-height:26px; }
.main-banner .banner-content p.banner-text span{font-family: 'sf_pro_displaysemibold';}
.main-banner .banner-btn{ width: 100%; padding: 50px 0 0 }
.start-btn{  font-size: 15px; color: #fff; border-radius: 50px; line-height:30px; padding: 18px 36px; font-family: 'sf_pro_displayheavy'; background: #00b7e1; text-align: center; letter-spacing: 0.080em}
.start-btn:hover{ background: #353854; color:#fff }
.main-banner .banner-btn .start-btn:hover{ background:#fff; color: #00b7e1 }




h2.sec-tit{font-size:40px; color: #353854; font-family: 'sf_pro_displaybold'; line-height:50px; padding-bottom:20px;}

.section-affiliate{width:100%; clear: both; padding: 70px 0 100px; position: relative; z-index: 1}
.section-affiliate:before{ position:absolute; content: ''; background:url(../images/right_bg.png) right top no-repeat; right: 0; top:130px; width:257px; height: 698px; background-size: 60% 120%; z-index: -1 }
.section-affiliate .sec-title{ position: relative;width: 100%; clear: both; padding-bottom: 50px; text-align: center; }
.section-affiliate h3.first-title{ font-size: 22px; color: #00b7e1; font-family: 'sf_pro_displaybold';line-height: 30px; padding-bottom: 15px; text-transform:uppercase; letter-spacing: 0.060em; position: relative;z-index:1 }
.section-affiliate h2.sec-tit{ padding-bottom: 0px; position: relative; z-index: 1; }
.section-affiliate h2.title-bg, .section-about h2.title-bg{ font-size:182px; font-family: 'sf_pro_displaybold'; line-height:120px; padding-bottom: 0px; position:absolute; left: 0; top:-20px; right: 0; margin: 0 auto; text-transform: uppercase; background: -moz-linear-gradient(top, rgba(239,246,255,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(239,246,255,1) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(239,246,255,1) 0%,rgba(255,255,255,0) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.section-affiliate .row{ display: flex; margin:0 -15px; align-items: center; }
.section-affiliate .left-img{ width: 50%; padding: 0px 15px }
.section-affiliate .left-img .img-box{ padding-right: 50px }
.section-affiliate .left-img img{ width: 100% }
.section-affiliate .right-content{ width: 50%; padding: 0px 15px}
.section-affiliate .right-content p{ padding-bottom: 20px; line-height: 30px; }
.section-affiliate .right-content p span, .section-about .content-info p span{ font-family: 'sf_pro_displaysemibold'; }

.section-second{ width: 100%; padding: 0; clear: both; }
.section-second .sec-content{ width: 100%; padding:80px 90px 100px; clear: both; box-shadow: 0 7px 46px 0 rgba(44,47,69,0.08) }
.section-second .sec-content ul.sec-point{ padding: 20px 0 0; margin: 0 }
.section-second .sec-content ul.sec-point li{ font-size: 18px; font-family: 'sf_pro_displaymedium'; line-height: 28px; position: relative; padding: 0 0px 30px 55px }
.section-second .sec-content ul.sec-point li:before{position: absolute; content:''; background:url(../images/check_icon.png) center center no-repeat; width:30px; height: 30px; left: 0; top: 1px; background-size: 90%;}
.section-second .sec-button{width: 100%; clear: both; text-align: center; padding-top: 40px}

.section-about{ width: 100%; clear: both;  padding: 100px 0 ;text-align:center;}
.section-about .sec-title{ position: relative; width: 100%; padding: 50px 0 25px}
.section-about h2.title-bg{ top: 10px }
.section-about .sec-title h2.sec-tit{position: relative; z-index: 1}
.section-about .content-info{ width: 100%; max-width:930px; margin: 0 auto }
.section-about .content-info p{ font-size: 18px; line-height:34px; padding-bottom: 0px }

.footer{ width: 100%; background: #10b6ec; color: #fff; text-align: center; padding: 24px 0 }
.footer p{ padding-bottom: 0px }
.footer a.copy-link{ color: #fff }
.footer a.copy-link:hover{ color: #fff; text-decoration: underline; }


@media only screen and (max-width:991px){
.container, .section-about .content-info{ max-width:768px}
.main-banner{padding: 170px 0 160px;}
.section-affiliate{ padding: 70px 0 50px;}
.main-banner .banner-content h1.banner-title{font-size: 50px; line-height: 67px;}
.section-affiliate .row{ display: block; }
.section-affiliate .left-img, .section-affiliate .right-content{ width: 100% }
.section-affiliate .right-content{ padding-top: 30px }
.section-second .sec-content{ padding: 60px 50px 80px;}
h2.sec-tit{font-size: 33px; line-height: 43px; padding-bottom: 20px;}
.section-about{padding: 60px 0;}
.section-affiliate h2.title-bg, .section-about h2.title-bg{font-size: 102px;}
.section-affiliate h2.title-bg{top: -40px}
.section-about h2.title-bg{top:-10px;}
.section-about .sec-title{padding: 30px 0 5px;}
.section-affiliate .left-img .img-box{ padding-right: 0px }
.section-affiliate .right-content p:last-child{ padding-bottom: 0px }
}



@media only screen and (max-width:599px){
.main-banner{padding: 130px 0 110px;}
.main-banner .banner-content h1.banner-title{font-size: 39px; line-height: 61px; padding-bottom: 11px;}
.main-banner .banner-content h3.banner-first-title{ font-size:20px }
.main-banner .banner-content p.banner-text{font-size: 16px;}
.section-affiliate:before{ display: none; }
.section-affiliate h2.title-bg, .section-about h2.title-bg{ font-size:80px }
.start-btn{padding: 16px 28px;}
h2.sec-tit br{ display: none; }
h2.sec-tit{font-size: 26px; line-height: 36px;}
.section-affiliate h3.first-title{font-size: 20px; line-height: 30px;}
.section-affiliate h2.title-bg{top:-50px;}
.section-affiliate {padding: 40px 0 30px;}
.section-second .sec-content{padding: 30px 25px 50px;}
.section-second .sec-content ul.sec-point li{font-family: 'sf_pro_displayregular'; font-size: 16px; padding-bottom: 15px}
.section-second .sec-button{padding-top: 25px;}
.section-about{ padding: 30px 0 }
.section-about .content-info p{ font-size: 16px; line-height:30px }
}


@media only screen and (max-width:479px){ 
.section-affiliate h2.title-bg, .section-about h2.title-bg {font-size: 54px;}
h2.sec-tit {font-size: 24px; line-height: 32px}
.section-second .sec-content ul.sec-point li{ padding-left: 55px; }
.start-btn {padding: 16px 20px; font-size: 14px;}
.section-about h2.title-bg {top: -30px;}
.main-banner .banner-content h1.banner-title {font-size: 28px; line-height: 43px; }
.main-banner .banner-content h3.banner-first-title {font-size: 18px;}
.section-affiliate .sec-title{padding-bottom:30px}
.section-second .sec-content ul.sec-point li{ padding-left: 45px }
.section-about .sec-title{padding: 20px 0 5px;}
.footer p{line-height: 24px}
}