@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}


/* Reset */
* { border:0px; margin: 0px; padding: 0px; box-sizing: border-box;}


/*font*/

/*@font-face {
    font-family: 'caviar_dreamsbold';
    src: url('fonts/Caviar_Dreams_Bold-webfont.eot');
    src: url('fonts/Caviar_Dreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Caviar_Dreams_Bold-webfont.woff') format('woff'),
         url('fonts/Caviar_Dreams_Bold-webfont.ttf') format('truetype'),
         url('fonts/Caviar_Dreams_Bold-webfont.svg#caviar_dreamsbold') format('svg');
    font-weight: normal;
    font-style: normal;

} */




body {  font-size: 1em; 
        font-family: 'Arial', "宋体", STXihei, "华文细黑", sans-serif; 
        color: #505050;}

a {text-decoration: none;
    color: #505050;
}                

h2 {font-family: 'Open Sans', sans-serif;
        font-weight: 300;}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}



/* =========================== Mobile Layout: 480px and below. ============================ */
  
.gridContainer {
	margin-left: 0;
	margin-right: 0;
	width:100%;
	padding-left:0;
	padding-right:0;
	clear: none;
	float: none;
	background-color:#fff;
	min-width:290px;
}


/* nav */

.nav-collapse,
.nav-collapse * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
} 

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;

}

.nav-collapse li {
  float: left;
  width: 100%;
    position: relative;

}

.nav-collapse a {
  color: #666;
  text-decoration: none;
  width: 100%;
  padding: 0.4em 1em;
  float: left;
}


.nav-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 60px;
  height: 55px;
  float: right;
  text-indent: -9999px;
  overflow: hidden;
  background: #999 url("images/hamburger.gif") no-repeat 50% 33%;
}

.nav-collapse li a:hover {
	color:#A80000;	}

.nav-collapse .active {color: #A80000; text-decoration: underline;}

/* Submenu   */
    
        ul.sub1 li, ul.sub2 li  {width: 100%;
                            left: 20px;
        }



/* content */

.logotitle {position: relative;
            z-index: 1;
            margin: 10px 0 10px 15px;
            font-size: 1.2em;
            width: 50%;
            float: left;
            padding: 0 4px 20px;
            font-family: 'Playfair Display','Helvetica', serif;
                color: #666;
}

.logotitle a {color: #505050;}
.logotitle a:hover {color: #A80000 ;}

.langbox {position: absolute;
            z-index: 2;
            left: 20px;
            top: 4em;
            font-size: 0.9rem; 
            color: #bababa;
            }

.language a {color: #bababa;}
.language a:hover {color: #535353;}

header .language .active { color:#000;   }



nav > menu {float:left;
            width: 40%;}



.secondtitle {background:#FFFFB8;
                text-align: center;
                padding: 25px 0;
}

.submenu {padding-bottom: 20px;}

.submenu ul {list-style-type: none;
            text-align:center;              
}

.submenu ul li a { font-size: 1.4em;
                    border: 1px solid #ddd ;
                   /* border-radius: 5px; */
                    color: #606060;
                    text-decoration: none;
                    width: 100%;
                    background: none repeat scroll 0% 0% #ffffd6;
                    padding: 0.7em 1em;
                    float: left; }


.submenu ul li a:hover { background-color: #ffff66; }


.partwo {background-color:#FFFFE0;}

.parone, .partwo, .parthree { padding: 24px 0; line-height: 1.7; }


 .hideimg {display: none;}

.hideh2 {display: none;} 

.parone, .partwo, .parthree {padding: 40px 20px 20px;}
.parone p, .partwo p, .parthree p{padding-bottom: 20px;}



#home .maincontent, #home_eng .maincontent {margin-top: 20px }

#service .maincontent, #partner .maincontent {padding: 50px 20px 40px;}

#partner span.rfcsmall {font-size: 0.9em;}

#service .maincontent h2, #partner .maincontent h2{text-align: center;
                        margin-bottom: 40px;
                        font-size: 2.2em;}

#partner .maincontent .rfcsmall{font-size: 0.8em;}

#service .fee .imgexpense {width: 96%;
                            height: auto;
                            padding-bottom:36px; }

/* add line before & after the title */
.maincontent >.firstitle {   text-align: center; 
                            font-size: 1.8em; 
                            line-height: 1.5; }

.maincontent .firstitle > span, .imgcontent .firstitle > span {position: relative;
                                display: inline-block;}

.maincontent .firstitle > span:before, .maincontent .firstitle > span:after,
.imgcontent .firstitle > span:before, .imgcontent .firstitle > span:after{
            content: "";
            position: absolute;
            top: 50%;
            border-bottom: 1px solid #999;
            width: 65%;
            margin: 0 8px;   
}

.imgcontent .objectspan > span:before, .imgcontent .objectspan > span:after { width:44%;}
.imgcontent .objectEspan > span:before, .imgcontent .objectEspan > span:after { width: 33%;}


.maincontent .firstitle > span:before, .imgcontent .firstitle > span:before {right: 100%;}
.maincontent .firstitle > span:after, .imgcontent .firstitle > span:after {left: 100%;}

.imgcontent >.firstitle {  text-align: center; 
                            font-size: 1.8em; 
                            line-height: 1.5;}

.imgcontent .firstitle {margin-top: 60px;}

/////////////////////////////////////////////


/* .imgfloatL {display: none;} */

/* #service */.maincontent ol, .process ul, .skill ul, .success ul {  list-style-position: inside; }

/* #service*/ .maincontent ol li, .skill ul li{   text-indent: 0em;
                                margin-left: 1.4em;
                                padding-bottom: 6px;}

/* #service */ .submenu .active {background-color:#ffff66; }

nav .hidesub {display: none;}

.process p, .fee p, .advantage p, .rfc p, .skill p, .success p {line-height: 1.6;}
.process ul, .object ol {margin-top: 14px;}
.process ul li {padding-bottom: 6px; padding-top: 28px;}

.fee p, .advantage p, .rfc p, .success p, .legal p {padding-bottom: 30px;}
.fee h3, .advantage h3, .legal h4 {margin-bottom: 8px;}


.boldtitle {font-weight: bold;}

/* partner */
.rfclogo {margin:26px 0 30px;
            text-align: center;}

/* partner - success rate */
.success ul li { text-indent: 0; margin-left: 1em;
                                padding-bottom: 8px;}

.success ul li {line-height: 1.6;}

.success a {color: #808080; text-decoration: underline;}
.success a:hover{color: #505050;}



/* contact */
.contentimg {width: 100%; height: auto; padding: 55px 0 0;}

#contactinfo h1 {text-transform: uppercase;
                font-size: 2.2em;
                letter-spacing: 0.05em; 
                padding: 0 0 8px 0;}



.eng #contactinfo h1 { font-size: 1.6em;}

#contactinfo .contactsmart {font-family: 'Playfair Display','Helvetica', serif; 
                            padding-bottom: 20px;}

#contactinfo a {color:#808080;}

#contactinfo a:hover {color: #505050;}

#contactinfo {  background-color: #DCDCDC;
                padding: 50px 30px 50px 35px;
                width: 100%;
                float: left;}

#contactinfo .plus {color:#000;
                    font-size: 1.2em;
                    margin-left: 10px;
                    padding-right: 18px;}

#contactinfo .iconemail {width: 1.5rem;
                        height: auto;}



#contactinfo .icontel { margin-top: 10px; padding: 0 0 30px 0;}

#contactinfo  .icontel, .emailink {font-size: 1.4rem;}

#contactinfo .iconemail {float: left;
                        width: 2em ;
                        margin-top: 4px;
                        margin-left: 4px;}

#contactinfo .emailink {float: left;
                        width: 100%;
                        }

#contactinfo .tel i, .emailink i {color: #000;}
#contactinfo .tel i {position: relative;
                        top: 8px}

/* #home_eng #contactinfo h1 {font-size:1.6em;} */
 
footer {font-size: 0.8em;
        text-align: center;
        padding: 40px 0; }

.hidesitemap, .hidecallus, .hidemenu {display: none;}

 .hidereturn, hidefa {display: block;}

.clear { clear:both; line-height:0; font-size:1px; height:0;}


.zeroMargin_mobile {
    margin-left: 0;
}
.hide_mobile {
    display: none;
}

/* return to to button    */
#return-to-top {  
    position: fixed;
    bottom: 274px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 14px;
    top: 8px;
    font-size: 2em;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 2px;
}


#rfcvideo iframe {width: 100%; height: auto;}


/* ============= Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. ================= */

@media only screen and (min-width: 480px) {

.gridContainer {
            width: 100%;
            padding-left: 0;
            padding-right: 0;
            clear: none;
            float: none;
            margin-left: auto;
            background-color:#fff;}

            .logotitle {width: 40%;
                    top: 14px;
                    z-index: 1;
                    }   

            .langbox { position: static;
                    width: 24%;
                    font-size: 0.75em;
                    float: right;
                    margin: 34px 20px 0 0 ;
                    text-align: right;}
    
    
             .callus {width:100%;
                font-size: 0.9rem;
                color: #999 ;
                 padding: 6px 0 0;}
    
    
        .imgbabies {width: 100%;
                    height: auto;}

        #partner span.rfcsmall {font-size: 1em;}

    
        .submenu ul {width: 100%;
                    padding: 40px 30px 30px;}
    
        .submenu ul li {display: inline-block;
                        margin-right:20px ;}
    
        .submenu ul li a {font-size: 1.2em;}
        

        #service .maincontent, #partner .maincontent {margin: 0 auto; width: 92%; }
        
        #partner .skill h3 {padding-bottom: 10px;}
        .submenu {padding-top: 30px;}
    
        .submenu ul li a { 
                    width: 100%;
                    background: none repeat scroll 0% 0% #ffffd6;
                    padding: 0.7em 1em;
                    float: none; }
    
        #service .fee .imgexpense {width: 100%;
                                    padding-bottom: 42px;}
    
        .parone {padding: 40px 50px;  }
    
        .partwo {padding: 70px 45px 50px;}
    
        .parthree {padding: 70px 45px 40px;}
    
    
        .txtright {float: right;
                    width: 45%;}
    
        .txtleft {float: left;
                    width: 45%;}
    
        .hideimg {display: block;}
       
        .secondtitle {font-size: 1.4em; }

        #contactinfo h1 {text-align: center;
                        padding: 0 0 30px;}
    
        #contactinfo .contactinfobx { width: 100%;  
                                margin: 0 auto; 
                                overflow: hidden;}
    
        #contactinfo .icontel, #contactinfo .emailink { width: 45%;
                                margin: 0 auto;}
        
        #contactinfo .icontel {position: relative;
                                left: 4px;}
    
        #contactinfo .emailink { float: none; }
    
        #contactinfo .iconemail {width: 2em;
                                    margin-top: 8px;
                                    max-width: 45px;}
             
        #contactinfo { width: 75%;
                       /* padding: 60px 30px 40px 35px; */}
    
    
        /* nav */
         nav {background-color: #777; 
                margin:18px 0 0 0;}    
       
          .nav-collapse ul {margin: 0 auto;}
        
          .nav-collapse li {
            width: 25%;
           /* *width: 24.9%; /* IE7 Hack */
           /* _width: 19%; /* IE6 Hack */
          }

           .nav-collapse a {
            color: #fff;
            margin: 0;
            padding: 1em; 
            float: left;
            text-align: center;
            border-bottom: 0;      
          }

          .nav-collapse a {
            font-size:0.9em;} 
    
        .nav-collapse .active, .nav-collapse a:hover {color:#ffff99;
                                    display: block; }
            
            .nav-collapse .active {text-decoration: none;}
    
        /* add line before & after the title */
            .maincontent >.firstitle { font-size: 2.2em; }


            .maincontent .firstitle > span:before, .maincontent .firstitle > span:after,
            .imgcontent .firstitle > span:before, .imgcontent .firstitle > span:after{
                         width: 258px;
                        margin: 0 10px;   }

           /* .imgcontent >.firstitle {  text-align: center; 
                                        font-size: 1.5em; 
                                        line-height: 1.5;} */

            .imgcontent .firstitle {margin-top: 60px;}
    
            
    
            /* contact */
            #contactinfo .contactitle  {   text-align: center; 
                                        font-size: 1.6em; 
                                        line-height: 1.5; }

            #contactinfo .contactitle  > span {position: relative;
                                                display: inline-block;}

            #contactinfo .contactitle  > span:before, #contactinfo .contactitle  > span:after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        border-bottom: 1px solid #999;
                        width: 166px;
                        margin: 0 10px;   }
    
            #home_eng #contactinfo .contactitle  > span:before, #home_eng #contactinfo .contactitle  > span:after,
            #service #contactinfo .contactitle  > span:before, #service #contactinfo .contactitle  > span:after,
            #partner #contactinfo .contactitle  > span:before, #partner #contactinfo .contactitle  > span:after {
                        width: 66%;
                         }
    


            #contactinfo .contactitle  > span:before {right: 100%;}
            #contactinfo .contactitle  > span:after {left: 100%;}
            
    
            #btmbox {   width: 100%; 
                        height: 280px;
                        background-color: #DCDCDC;
                        overflow: hidden; }
    
            
            .scrollbox {position: absolute;
                        top: 90px;
                        width: 85%;
                        height: 130px;
                        overflow-y: scroll;
                        }
    
            .hidereturn, .hidefa {display: none;}
    
            .hidesitemap, .hidecallus, .hidemenu {display: block;}

            .sitemap { float: left;
                        width: 25%;
                        background-color:#909090; 
                        height: 280px;
                        padding: 0 0 0 15px;}
            
            .sitemapbox {margin: 40px 0 0 28px;
                        position: relative;}
    
            .sitemap ul {position: absolute;    
                            top: 86px;}
            
            .sitemap ul li {list-style-type: none;
                            padding: 0 0 10px 0;}
    
            .sitemap h3 {position: absolute;
                            top: 22px;
                            color: #606060;}
    
            .sitemap ul li a:link, .sitemap ul li a:visited {color:#D8D8D8 ;}
    
            .sitemap ul li a:hover {color: #fff;}
    
    
        #service .maincontent, #partner .maincontent {padding: 80px 20px 40px;}

    
    /* rules ===== submenu ====== */
    
         .nav-collapse li {width: 25%;
                           text-align: center;
                            position: relative;}

               ul.sub1, ul.sub2  {width: 100%; }

                ul.sub1 li, ul.sub2 li  {left: 0}

                ul.sub1 li a, ul.sub2 li a {margin-top: 2px;
                                             font-size: 0.8em;
                                            background: rgba(170,170,170,0.8);}
    
                .nav-collapse .sub1, .nav-collapse .sub2 {position: absolute;
                                                            top: 48px;
                                                            z-index: 20;}
    
                 ul.sub1 li a:hover, ul.sub2 li a:hover {background:#ffff99;
                                                         color:#333; } 
    
          .nav-collapse li:hover > a{color: #ffff99;}
          .nav-collapse li:hover, a:hover { background-color: rgb(160,160,160,1);  }

        .hidesubmenu {display: none;}
    
    /* ============= subnav  ========== */
        .subcontainer { width: 100%;
                        margin: 60px 0 40px 15px;
                        overflow: hidden;}
        .subcontainer ul {display: inline;}
    
        .subcontainer > .col3 { float:left;
                                width: 24%;
                                text-align: center; }
    
        .subcontainer p a {color: #999 ;}
        .subcontainer p a:hover {color: #000;}
         
    
    /*   icon link   */
        .circle-bkg { position: relative;
                    width: 90px;
                    height: 90px;
                    display: block;
                    background-color: rgba(255, 230, 16, 0.7);
                    -webkit-border-radius: 50px;
                    -moz-border-radius: 50px;
                    border-radius: 50px;
                    margin: 0 auto 10px;
                    -webkit-transition: all 1s ease-in-out; 
                       -moz-transition: all 1s ease-in-out;
                            transition: all 1s ease-in-out; }
    
        .circle-bkg:hover i { color: #000;
                                -webkit-transform: scale(2);
                                   -moz-transform: scale(2);
                                        transform: scale(2); }
       
        .circle-bkg:hover {background-color: rgba(255, 230, 16, 0);}
        
    
        .circle-bkg i {position: absolute;
                        top: 28px;
                        left: 30px;
                        color:#999; }
    
        .circle-bkg #users { left: 28px;}
        .circle-bkg #sitemap { left: 30px;}
        .circle-bkg #lightbu { left: 36px;}
        .circle-bkg #usdollar { left: 36px;}
        .circle-bkg #rfc { left: 33px;}
        .circle-bkg #skill { left: 34px; top: 30px }
        .circle-bkg #success { left: 29px;}
        .circle-bkg #legal { left: 33px;}
    
    /* active */
        .subcontainer .col3 .active { color: #000;}
        .subcontainer .active {background-color: rgba(256,256,256, 0);}
        .subcontainer .active .fa-2x {color: #000; font-size: 4em; top: 10px; }
        
        .subcontainer .active #users {left: 8px;}
    
        .subcontainer .colbox {position: relative; top: 16px;}
        .subcontainer .activetitle {padding-top: 19px;}
        
    #rfcvideo {margin: 0 auto;
                text-align: center;}
    
    #rfcvideo iframe { max-width: 640px;
                        height:360px;
                        margin: 50px auto 30px;}
    		
        .zeroMargin_tablet { margin-left: 0;}
    
        .hide_tablet { display: none;}
    
        .hr {border-bottom: 1px solid #999;
            width: 91%;
            margin: 0 auto;}
    
        .hideh2 {display:block;} 

    
}



/* ======= Desktop Layout: 769px to a max of 1280px.  Inherits styles from: Mobile Layout and Tablet Layout. ====== */

@media only screen and (min-width: 769px) {

    .gridContainer {
        width: 100%;
        max-width: 1280px;
        padding-left: 0;
        padding-right: 0;
        margin: auto;
        clear: none;
        float: none;
        margin-left: auto;
        background-color:#fff;
    }
    
    .logotitle {width: 23%; 
                top: 18px;
                left: 10px;
                font-size: 1.4em;
                margin: 10px 0 10px 0;}
    
    .langbox {margin: 38px 20px 0 0 ;}
    
    
    .maincontent .firstitle {font-size: 3em;}
    
    .nav-collapse a {font-size: 1em; }
    
    .parone, .partwo, .parthree { font-size: 1.2em; margin: 0 auto;}
    
    .partwo .txtspace {padding-top: 35px;}
    
    .parthree .txtcenter {margin-top: 20px;
                            text-align: center;
                            font-size: 1.3em;}
    
    
   #contactinfo .contactinfobx { width: 85%;  
                                margin: 20px auto;  }
    
    #contactinfo .icontel {float: left; width: 35%;}
    
    #contactinfo .emailink {float: right; width: 39%; padding-top: 14px;}

    #contactinfo .emailbox {width: 30%;}
    
 /* rules ===== nav & submenu ====== */
    
    .nav-box {width: 62%; float: left;}
    
    .nav-collapse .sub1, .nav-collapse .sub2 {top: 55px; }
    
     ul.sub1 li a, ul.sub2 li a { font-size: 0.9em; }
        
    
}






@media only screen and (min-width: 980px){
 
    
    .submenu ul li {margin-right: 36px;}
    
    .submenu ul li a { font-size: 1.4em; 
                        padding: 0.8em 1.1em;}
    
    #service .fee .imgexpense {text-align: center; }
    
    .maincontent .firstitle > span:before, .maincontent .firstitle > span:after,
            .imgcontent .firstitle > span:before, .imgcontent .firstitle > span:after{
                        width: 355px;
                        margin: 0 15px;   
            }
    
  
}



@media only screen and (min-width:1280px) {

        .maincontent .firstitle > span:before, .maincontent .firstitle > span:after,
        .imgcontent .firstitle > span:before, .imgcontent .firstitle > span:after{
                        width: 448px;
                        margin: 0 18px;   }
    
        #contactinfo .contactinfobx { width: 85%;  
                                margin: 20px 0 0 108px;  }
    
        #contactinfo {padding: 50px 30px 65px 35px;}
    
        .hr {width: 86%;}
    
        .maincontent .firstitle > span:before, .maincontent .firstitle > span:after,
        .imgcontent .firstitle > span:before, .imgcontent .firstitle > span:after{
                        width: 468px; }
    
        #home_eng #contactinfo .contactitle  > span:before, #home_eng #contactinfo .contactitle  > span:after,
            #service #contactinfo .contactitle  > span:before, #service #contactinfo .contactitle  > span:after,
            #partner #contactinfo .contactitle  > span:before, #partner #contactinfo .contactitle  > span:after {
                        width: 242px;}
    
}


@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  .nav-toggle {
    background-image: url("images/hamburger-retina.gif");
    -webkit-background-size: 100px 100px;
    -moz-background-size: 100px 100px;
    -o-background-size: 100px 100px;
    background-size: 100px 100px;
  }
}