/*
 * File: d:\AppServ\www\birdie\themes\front\css\main.css
 * Project: d:\AppServ\www\birdie\themes\front\css
 * Created: 2020-07-14 11:26:01
 * Author : Jason
 * Email : jasonworks@qq.com
 * ----
 * Last Modified: 2020-07-30 Thursday 5:46:30
 * Modified By: Jason
 * ----
 * Company : Clickr
 * Description: 
 */


/*
    import component css and icon font
*/
@import url("../js/bootstrap/bootstrap.min.css");
@import url("../js/bootstrap/bootstrap-expand.css");
@import url("../fonts/fontawesome-free/css/all.min.css");
@import url("../fonts/IconFont/iconfont.css");
@import url("../js/swiper/swiper.min.css");
@import url("list.css");
@import url("notification.css");
@import url("wallet.css");




/*
    main frame
*/

/* body */
body{ background: #F7F7F7; font-family: Tahoma, Helvetica, Arial, sans-serif; }

/* basic initialize */
h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0; }
a,a:hover{ text-decoration: none; transition: all .3s; }
img{ max-width: 100%;}

/* wrapper */
.wrapper{ max-width: 720px; margin: 0 auto; padding-bottom: 56px; }
.wrapper-fixed-top-bottom{ padding-top: 60px; }

/* logo */
.logo{ display: inline-block; }
.logo img{ max-height: 28px; max-width: 200px; }

/* header */
.header{padding: 30px 0;}
.header-func a{border: 1px solid rgba(255,255,255,0.5);cursor: pointer;color: #FFF;line-height:26px;display: block;border-radius: 10px; padding: 0 10px;margin-top:0;}
.header-func a:hover{background: rgba(0,0,0,0.5); border-color:rgba(0,0,0,0.3);color:#FFF;}

/* page-top */
.page-top{ background: url('../images/main/home-bg.png') no-repeat center top; background-size: 100% auto; }

/* page-top-set */
.page-top-set{ height: 60px; background: url('../images/main/home-bg.png') no-repeat center top; background-size:cover; }
.page-top-set h3{ text-align: center; height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 18px; color: #FFF; font-weight:700; }
.page-top-set .link-trigger{ display: block; line-height: 60px; color: #FFF; width: 60px; text-align: center; }
.page-top-set .link-trigger i{ font-size: 20px; }

/* pager */
.pager ul{ display: flex; padding-left: 0; list-style: none; border-radius: .25rem; justify-content: center!important; }
.pager li:first-child a { margin-left: 0; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; }
.pager li.active a , .pager a:hover{ z-index: 1; background: #3abfe4; border-color: #3abfe4; color: #FFF; }
.pager a { color: #3abfe4; position: relative; display: block; padding: .5rem .75rem; line-height: 1.25; background-color: #fff; border: 1px solid #dee2e6; }

/* footer-links */
.footer-links{ list-style: none; text-align: center; padding: 15px; }
.footer-links li{ display: inline-block; font-size: 14px; border-right: 1px solid #ccc; }
.footer-links li:last-child{ border-right: 0; }
.footer-links a{ color: #3abfe4; margin: 0 10px; }

/* lang-trigger */
.lang-trigger{margin-top:8px;display:block;padding:0 5px;border: 1px solid rgba(255,255,255,0.5);border-radius:10px;cursor: pointer;color: #FFF;text-align: center;font-size: 14px;}
.lang-trigger:hover{background: rgba(0,0,0,0.5); border-color:rgba(0,0,0,0.3);color: #FFF;}
.lang-trigger span{display: block;}




/*
    titles
*/
/* box-title */
.box-title h3{ font-size: 18px; font-weight: 700; color: #555555; line-height: 30px; }
.box-title .more{ line-height: 30px; }
.box-title .more a{ color: #999999; font-size: 14px; }




/*
    menu
*/

/* nav-list */
.nav-list a{ display: block; text-align: center; }
.nav-list span{ display: block; font-size: 14px; color: #555555; }
.nav-list i{ color: #5ea7cb; font-size: 34px; display: inline-block; height: 50px; line-height: 50px; }
.nav-list a:hover span{ color: #5ea7cb; }
.nav-list .row>div:last-child i{ font-size: 32px; }

/* nav-list-style02 */
.nav-list-style02 .item{ float: left; width: 33.33333%;margin-bottom: 10px;}

/* nav-list-style03 */
.nav-list-style03 .row{ margin: 0 -5px; }
.nav-list-style03 .row>div{ padding: 0 5px; }
.nav-list-style03 a{ background: #FFF; border-radius: 10px; padding: 5px 0;margin-bottom: 10px;}

/* menu */
.menu{ height: 56px; background: #F8F8F8; border-top: 1px solid #EDEDED; }
.menu .row{ max-width: 720px; margin: 0 auto; }
.menu a{ display: block; text-align: center; padding-top: 5px; color: #A9A9A9; }
.menu i{ font-size: 26px; display: block; height: 26px; line-height: 26px; overflow: hidden; }
.menu span{ display: block; font-size: 14px; }
.menu a.active i, .menu a:hover i{
  background: rgb(55,236,186);
  background: -moz-linear-gradient(left,  rgba(55,236,186,1) 0%, rgba(97,166,209,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(55,236,186,1) 0%,rgba(97,166,209,1) 100%);
  background: linear-gradient(to right,  rgba(55,236,186,1) 0%,rgba(97,166,209,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37ecba', endColorstr='#61a6d1',GradientType=1 );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all .3s;
}
.menu a.active span , .menu a:hover span{ color: #5ea7cb; transition: all .3s; }




/*
    tabs
*/
/* tab-white */
.tab-white{ height: 60px; line-height: 60px; border-bottom: 1px solid #EDEDED; }
.tab-white .row{ margin: 0; }
.tab-white .row>li{ padding: 0; }
.tab-white a{ display: block; text-align: center; color: #555555; font-size: 16px; position: relative; }
.tab-white a.active , .tab-white a:hover{ color: #3abfe4; }
.tab-white a.active:after , .tab-white a:hover:after{ content: ''; background: #3abfe4; height: 2px; width: 100%; position: absolute; left: 0; bottom: 0; }




/*
    tips
*/
/* tips-box */
.tips-box{ text-align: center; }
.tips-box .icon-area{ font-size: 30px; margin-bottom: 15px; color: #5ea7cb; }
.tips-box .content{ color: #999999; font-size: 14px; }




/*
    popup
*/
/* wechat-popup */
.wechat-btn{ width: 45px;height: 45px;display: block;border-radius: 100%;line-height: 45px; text-align: center; color: #fff;background-color: #02c805;position: fixed; right: 20px; top: 20px;z-index: 1031;font-size: 24px;}
.wechat-btn:hover{ color: #fff;opacity: 0.8;}
.wechat-popup{ display: none; background: rgba(0,0,0,0.75); position: fixed; left:0; top: 0; bottom: 0; right: 0; z-index: 1060; }
.wechat-popup .main{ margin-top: 220px; position: relative; text-align: center; }
.wechat-popup .title{ color: #FFF; font-size: 14px; margin-bottom: 15px; }
.wechat-popup figure{ margin-bottom: 25px; }
.wechat-popup .btn-close{ border: 1px solid #fff; width: 60px; height: 60px; border-radius: 100%; color: #FFF; display: inline-block; line-height: 58px; font-size: 20px; }
.wechat-popup .btn-close:hover{ background: #3abfe4; border-color: #3abfe4; }
.wechat-qrcode img{ max-width: 300px;}

/* lang-popup */
#lang-popup .title{ color: #404040; font-weight: 700; font-size: 14px; }
#lang-popup .icon-area i{ font-size: 60px; color: #3abfe4; }
/* popup-agreement-body */
.popup-agreement-body{ max-height: 400px; overflow-y: scroll; }

/*language*/
.language{ position: fixed;top: 85px;right: 20px; color: #fff;background-color: #5ea7cb;font-size: 18px; border-radius: 100%;font-weight: normal;display: block; width: 45px;height: 45px; line-height: 45px;text-align: center;margin: 0; padding: 0; border: none;box-shadow: none;z-index: 1031;}



/*
    buttons
*/
/* btn-primary */
.btn-primary{ background: #5ea7cb; border-color: #5ea7cb; }
.btn-primary:hover , .btn-primary:focus , .btn-primary:active , .btn-primary.focus , .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{  border-color: #3681a7; background: #3681a7; }




/*
    links
*/
.link-orange{ color:#5ea7cb; }
.link-gray{ color: #606060; }




/*
    home
*/
/* home-banner */
.home-banner{ overflow: hidden; position: relative; padding-bottom: 30px; }
.home-banner .swiper-container{ border-radius: 10px; overflow: hidden; background: #FFF; }
.home-banner .swiper-pagination{ text-align: center; left: 0; right: 0; bottom: 0; }
.home-banner .swiper-pagination-bullet{ background: #DDDDDD; opacity: 1; width: 40px; height: 4px; border-radius: 4px; margin: 0 3px; }
.home-banner .swiper-pagination-bullet-active{ background: #5ea7cb; }

/* home-address-list */
.home-address-list{ padding: 0 15px; }
.home-address-list .address-list-style02{ border-radius: 10px; }



/*
    user center
*/

/* uc-index-top */
.uc-index-top{ background-image: url('../images/main/uc-home-bg.png'); }

/* uc-info */
.uc-info{ overflow: hidden; position: relative; }
.uc-info figure{ width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin: 0; position: relative; float: left; }
.uc-info img{ z-index: 2; position: relative; border-radius: 106px; }
.uc-info .user-name,
.uc-info .user-code{ color: #FFF; margin-left: 75px; margin-right: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-info .user-name{ font-size: 16px; font-weight: 700; margin-top: 5px; }
.uc-info .user-code{ font-size: 14px; }
.uc-info .btn-area{ position: absolute; right: 0; top: 15px; }

/* uc-counter */
.uc-counter{ border-radius: 10px; padding: 24px 0; box-shadow: 0 0 20px 10px rgba(0,0,0,0.06); }
.uc-counter a{ display: block; text-align: center; }
.uc-counter .number{ color: #5ea7cb; }
.uc-counter .txt{ display: block; color:#A9A9A9; font-size: 14px; }

/* uc-login */
.uc-login{ padding: 15px; }
.uc-login .verify img{ max-height: 38px; }




/*
    address
*/
/* address-top-set */
.address-top-set{ height: 122px; }
.address-top-set .tips{ margin: 0 20px; line-height: 42px; text-align: center; height: 42px; border-radius: 5px; background:#FFF; border: 1px solid #3abfe4; color: #3abfe4; font-size: 14px; }
/* address-rules */
.address-rules img{ max-width: 100%; }
/* wrapper-address */
.wrapper-address{ padding-top: 122px; }




/*
    single
*/
/* single-page */
.single-page{ padding: 0 20px;min-height: 736px; }
.single-page .title{ border-bottom: 1px solid #EDEDED; padding: 20px 0; font-size: 18px; color: #555555; font-weight:700; }
.single-page .date{ padding: 15px 0; color: #AAAAAA; font-size: 14px; }
.single-page .content{ color: #555555; font-size: 16px; padding-bottom: 20px; }
.single-page img{ max-width: 100%; }


/*
    calc
*/
/* calc-box */
.calc-box{ overflow: hidden; padding: 15px; }
.calc-box label{ font-size:14px; color: #999999; text-align: center; display: block; }
.calc-box .txt-number{ margin-bottom: .5rem; text-align: center; }
.calc-box .btn-submit{ height: 142px; }
.calc-box .btn-submit i{ display: block; font-size: 24px; margin-bottom: .5rem; }
/* calc-notice */
.calc-notice img{ max-width: 100%; }
.calc-notice{ padding: 15px;}



/*
    search
*/
/* search-box */
.search-box{ padding: 15px; }




/*
    contact
*/
/* main */
.contact{ padding: 15px; }




/*
    bind wechat
*/
/* wechat-info */
.wechat-info figure>img{ border-radius: 100%; overflow: hidden; }


/*recharge*/
.change-btn { margin:15px 0;}
.change-btn button{ border: none; padding: 6px; box-shadow: none;border-radius: 5px;width: 100%;}
.change-btn button i{transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);}
.change-btn button:hover{ background-color: #5ea7cb;color: #fff;}
.calc-result.recharge{ margin-top: 20px; text-align: center;}


/*
    media query
*/
@media only screen and (max-width:767px){
    .hidden-phone{ display: none !important; }
    .wechat-btn{ top: 120px;right: 10px;}
    .language{ top: 175px;right: 10px;}
}