body {
  -webkit-font-smoothing: antialiased;
}

.wrapper {
	position: absolute;
	top: 1000px;
	width: 100%;
}

	
/* Home ------------------------------------------ */
.section-first{
	float:left;
	width: 100%;
	height: 1000px;
	display: block;
}	
header {
	width: 100%;
	position: absolute;
	overflow: hidden;
	text-align: center;
	color: #fff;
	
}
.ctrl-bg-color{
	background: #fff;
}
header .container {
	height: 100%;
	position: relative;
	display:block;
}

.header-fancyworld{
	width: 100%;
	float: left;
	margin-top:110px;		
}
.header-fancyworld-inner{
	width: 1365px;
	margin: 0 auto;
	display: block;		
}
.header-fancyworld-inner img{
	width: 100%;
	height: auto;
	display: block;
	max-width: 1365px;	
}

.header-scroll{
	width: 100%;
	float:left;
	display: none;
}
.header-scroll-inner{
	width: 105px;
	display:block;
	margin: 0 auto;
}
.header-scroll-inner img{
	max-width: 105px;
	width: 100%;
	height: auto;
	display:block;
}
.logo-yung{
	width: 430px;
	display: block;
	left: 50px;
	top: 40px;
	position: absolute;
	z-index: 95;
}
.logo-yung-1{
	width: 55px;
	height: auto;
	display: block;
	float: left;	
}
.logo-yung-2{
	width:356px;
	margin-left: 10px;
	display: block;
	float: left;
	font-size: 18px;
	line-height: 40px;
	color: #000;
	text-align: left;
	font-family: 'Open Sans', sans-serif;
}
.section-second-index{
	width: 100%;
	display: block;
	float:left;
	background: #FFF;
}

.section-second-index-inner{
	width: 1750px;
	margin: 0 auto;
	padding: 0;
}
.row1{
	width: 100%;
	display: block;
	float:left;
	margin-bottom: 10px;
	margin-top: 140px;
}
.left-area1{
	width: 57%;
	display: block;
	float: left;
}
.left-area1 img{
	width: 100%;
	display: block;
	height: auto;
	max-width:990px;
}
.right-area2{
	width: 43%;
	display: block;
	float: left;
}
.right-area2-inner{
	width: 100%;
	display: block;
	float: left;
}
.right-area2-a{
	width: 21%;
	display: block;
	float: left;
}
.right-area2-a img{
	width: 100%;
	display: block;
	height:auto;
}
.right-area2-b{
	width: 79%;
	display: block;
	float: left;
}
.inter-ctrl{
	font-family: 'Open Sans', sans-serif;
	display: block;
	float: left;
	font-size: 40px;
	color: #21b2f8;
	margin-top: 90px;
	font-weight:400;	
}
.inter-ctrl-word{
	font-family: 'Source Sans Pro', sans-serif;
	display: block;
	float: left;
	font-size: 18px;
	color: #131313;
	margin-top: 47px;
	width: 95%;
	margin-left: 5%;
	line-height: 32px;
	font-weight:normal;	
}
.inter-ctrl-pic{
	width: 32%;
	display: block;
	float: left;
	margin-top: 15px;
}
.switch-a{
	display: block;
}
.switch-b{
	display: none;
}



.section-third-index{
	width: 100%;
	display: block;
	float:left;
	background: #21b2f8;
}
.section-third-index-inner{
	width: 1750px;
	margin: 0 auto;
	padding: 0;
}
.row2{
	width: 100%;
	display: block;
	float:left;
	margin: 120px 0 120px 0;
	background: #21b2f8;
}
.left-area-c{
	width: 44%;
	display: block;
	float: left;
	
}

.right-area-d{
	width: 56%;
	display: block;
	float: left;
}
.right-area-d img{
	width: 100%;
	display: block;
	height: auto;
	max-width:983px;
}
.third-inner{
	width: 100%;
	display:block;
	float: left;
}
.third-inner-1{
	width: 35%;
	display:block;
	float: left;

}
.third-inner-2{
	width: 65%;
	display:block;
	float: left;

}
.inter-third-word{
	display:block;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}
.inter-third-word-2{
	display:block;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 17px;
	color: #FFF;
	line-height: 28px;
}
.space-ctrl-a{
	color:#FFF;
	font-size: 45px;
	line-height: 65px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	margin-top: 40px;
}
.brand-a1{
	display:block;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 17px;
	color: #FFF;
	line-height: 28px;
	width: 90%;
	margin-left: 10%;
	float: left;
}
.brand-b1{
	width: 18%;
	float: left;
	display:block;	
}
.brand-b2{
	width: 79%;
	float: left;
	display:block;
	margin-left: 3%;
	font-family: 'Open Sans', sans-serif;
	color: #b2e6ff;
	margin-top: 20px;
	font-size: 17px;
	line-height: 28px;		
}
.inter-space-h{
	margin-top: 20px;
}
.inter-space-h2{
	margin-top: 40px;
}
.inter-space-h0{
	margin-top: 40px;
}
.inter-space-h3{
	margin-top: 40px;
}
.inter-space-h4{
	margin-top: 20px;
}
.switch-c{
	display: block;
}
.switch-d{
	display: none;
}
.section-forth-index{
	width: 100%;
	display: block;
	float:left;
	background: #FFF;
}
.section-forth-index-inner{
	width: 1750px;
	margin: 0 auto;
	padding: 0;
}
.row3{
	width: 100%;
	display: block;
	float:left;
	margin: 50px 0 50px 0;
}
.forth-inner-a{
	width: 54%;
	float:left;
}
.forth-inner-a img{
	width: 100%;
	height: auto;
	display: block;
	max-width: 945px;
}
.forth-inner-b{
	width: 46%;
	display: block;
	float:left;
}
.word-forth-inner{
	width: 100%;
	display: block;
	float: left;
}
.title-forth-1{
	font-size: 37px;
	color: #21b2f8;
	width: 90%;	
	display: block;
	float: left;
	font-family: 'Open Sans', sans-serif;
}
.forth-ctrl-word{
	font-family: 'Source Sans Pro', sans-serif;
	display: block;
	float: left;
	font-size: 18px;
	color: #131313;
	margin-top: 40px;
	width: 83%;
	margin-left: 17%;
	line-height: 32px;
	font-weight:normal;	
}
.forth-ctrl-h1{
	margin: 140px 0 0 10%;
}
.forth-ctrl-h2{
	margin: 40px 0 0 10%;
}
.forth-ctrl-h3{
	margin: 20px 0 0 7%;
}
.forth-ctrl-pic{
	width: 203px;
	display: block;
	float: left;
}

.forth-ctrl-pic img{
	width: 100%;
	height: auto;
	max-width: 203px;
	display: block;
}
/*Preloader*/
/*@-webkit-keyframes rotate{
            0% {
                    -webkit-transform:rotate(0deg);
                    -ms-transform:rotate(0deg);
                    transform:rotate(0deg);
                }
          100% {
                    -webkit-transform:rotate(360deg);
                    -ms-transform:rotate(360deg);
                    transform:rotate(360deg)
                }
        }
@-moz-keyframes rotate{
              0% {
                   -webkit-transform:rotate(0deg);
                   -ms-transform:rotate(0deg);
                   transform:rotate(0deg);
                }
                100% {
                    -webkit-transform:rotate(360deg);
                    -ms-transform:rotate(360deg);
                    transform:rotate(360deg);
                }
        }
@-o-keyframes rotate{
                0% {
                    -webkit-transform:rotate(0deg);
                    -ms-transform:rotate(0deg);
                    transform:rotate(0deg);
                }
                100% {
                    -webkit-transform:rotate(360deg);
                    -ms-transform:rotate(360deg);
                    transform:rotate(360deg);
                }
}
@keyframes rotate
            {
                0% {
                    -webkit-transform:rotate(0deg);
                    -ms-transform:rotate(0deg);
                    transform:rotate(0deg)
                }
                100% {
                    -webkit-transform:rotate(360deg);
                    -ms-transform:rotate(360deg);
                    transform:rotate(360deg)
                }
}*/
.loader {
            position: fixed;
            z-index: 99999;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background-color: #fff;
        }
body.loaded .loader {
            display: none;
}
.loader p {
            position: absolute;
            font-family: effra, arial;
            font-size: 17px;
			width: 100%;
            left: 0;
			display: block;
        }
.loader .inter-gif-space{
	width: 310px;
	margin: 400px auto 0 auto;
	display: block;
}
.inter-gif-space-a{
	width: 12%;
	display: block;
	float: left;
	margin-left: 3%;
}
.inter-gif-space-a img{
	width: 50%;
	display: block;
	height: auto;
}
.inter-gif-space-b{
	width: 85%;
	display: block;
	float: left;
	line-height: 20px;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 1px;
	font-size: 16px;
	
}
.inter-gif-space-c{
	width: 100%;
	display: block;
	float: left;
	margin-bottom: 30px;
	text-align: center;
}
.scrollup{
	width:40px;
	height:40px;			
	text-indent:-9999px;
	opacity:0.8;
	position:fixed;
	bottom:20px;
	right:30px;
	display:none;			
	background: url('../img/icon_top.png') no-repeat;
	z-index: 9999;
}
@media only screen and (max-width : 1919px) {
.section-second-index-inner{
	width: 95%;
}
.section-third-index-inner{
    width:95%;
}
.section-forth-index-inner{
    width:95%;
}
.row3{
	margin: 60px 0 80px 0;
}
}
@media only screen and (max-width : 1680px) {

.header-scroll{
	bottom: 50px;
}
.wrapper {
	top: 950px;
}

.row1{
	margin-bottom: 50px;
	margin-top: 140px;
}
.section-second-index-inner{
	width: 95%;
	margin: 0 auto;
	padding: 0;
}
.section-third-index-inner{
    width:95%;
}
.inter-space-h3{
	margin-top: 0px;
}
.inter-ctrl{
	font-size: 40px;
	margin-top: 70px;
}
}
@media only screen and (max-width : 1440px) {
.loader .inter-gif-space{
	width: 310px;
	margin: 300px auto 0 auto;
	display: block;
}
.header-scroll{
	bottom: 50px;
}
.wrapper {
	top: 800px;
}

.header-fancyworld{
	margin-top:90px;		
}
.header-fancyworld-inner{
	width: 82%;
	margin: 0 auto;
	display: block;		
}

.section-second-index-inner{
	width: 97%;
	margin: 0 auto;
	padding: 0;
}
.inter-ctrl-word{
	font-size: 16px;
	margin-top: 30px;
	width: 95%;
	margin-left: 5%;
	line-height: 30px;
}
.section-third-index-inner{
    width:99%;
}
.brand-a1{
	font-size: 15px;
}
.brand-b2{
	font-size: 15px;
	margin-top: 0px;
}
.inter-space-h2{
	margin-top: 20px;
}
.inter-space-h4{
	margin-top: 0px;
}
.row2{
	margin: 100px 0 120px 0;
}
.inter-ctrl{
	font-size: 40px;
	margin-top: 50px;
}
.space-ctrl-a{
	font-size: 45px;
	line-height: 60px;
	margin-top: 30px;
}
.forth-inner-a img{
	width: 100%;
	margin-top: 110px;
}
.section-forth-index-inner{
	width: 97%;
	margin: 0 auto;
	padding: 0;
}
.row3{
	margin: 20px 0 40px 0;
}
.forth-ctrl-pic{
	width: 203px;
	display: block;
	float: left;
}
.forth-ctrl-pic{
	width:180px;
	display: block;
	float: left;
}
.forth-ctrl-word{
	font-size: 17px;
	color: #131313;
	margin-top: 25px;
	width: 83%;
	margin-left: 17%;
	line-height: 32px;

}
}

@media only screen and (max-width : 1366px) and (max-height : 1024px){
.loader .inter-gif-space{
	width: 310px;
	margin: 430px auto 0 auto;
}
.header-scroll{
	bottom: 60px;
}
.wrapper {
	top: 960px;
}

.header-fancyworld{
	margin-top:130px;		
}
.header-fancyworld-inner{
	width: 94%;	
}
.row1{
	margin-bottom: 130px;
	margin-top: 170px;
}
.row2{
	margin: 180px 0 160px 0;
}
.row3{
	margin: 70px 0 100px 0;
}
}
@media only screen and (max-width : 1366px) and (max-height : 768px) {
.loader .inter-gif-space{
	width: 310px;
	margin: 300px auto 0 auto;
}
.header-scroll{
	bottom: 60px;
}
.wrapper {
	top: 770px;
}

.header-fancyworld{
	margin-top:60px;		
}
.header-fancyworld-inner{
	width: 82%;
	margin: 0 auto;	
}
.row1{
	margin-bottom: 40px;
	margin-top: 70px;
}
.row2{
	margin: 80px 0 50px 0;
}
.space-ctrl-a{
	font-size: 35px;
	line-height: 60px;
	margin-top: 20px;
}
.inter-ctrl{
	font-size: 35px;
	margin-top: 50px;
}
.row3{
	margin: 40px 0 40px 0;
}
.forth-inner-a img{
	width: 100%;
	margin-top: 40px;
}
.forth-ctrl-h1{
	margin: 100px 0 0 10%;
}
.forth-ctrl-pic{
	display: none;
}
.title-forth-1{
	font-size: 34px;
	width: 90%;	
}
}
@media only screen and (max-width : 1280px) {
.loader .inter-gif-space{
	width: 310px;
	margin: 260px auto 0 auto;
}
.header-scroll{
	bottom: 30px;
}
.wrapper {
	top: 700px;
}

.header-fancyworld{
	margin-top:60px;		
}
.header-fancyworld-inner{
	width: 82%;
	margin: 0 auto;	
}
.inter-ctrl-pic{
	display:none;
}
.inter-space-h4{
	margin-top: 20px;
}
.right-area-d{
	padding-top: 30px;
}
.space-ctrl-a{
	font-size: 35px;
	line-height: 50px;
	margin-top: 20px;
}
.third-inner-1{
	width: 30%;
}
.brand-b1{
	width: 18%;
	float: left;
	display:block;	
}
}
@media only screen and (max-width : 1024px) {
.logo-yung{

left: 20px;
top: 40px;
	
}
.wrapper {
	top: 750px;
}

.header-scroll{
	bottom: 50px;
}
.header-fancyworld{
	margin-top:80px;		
}
.header-fancyworld-inner{
	width: 92%;
	margin: 0 auto;	
}
.left-area1{
	width: 90%;
	margin: 0 5%;
	float: left;	
}
.right-area2{
	width: 90%;
	margin: 0 5%;
	float: left;
}
.row1{
	margin-bottom: 80px;
	margin-top: 60px;
}
.switch-a{
	display: none;
}
.switch-b{
	display: block;
}
.right-area2-a{
	width: 13%;
	display: block;
	float: left;
}
.left-area-c{
	width: 90%;
	margin: 0 5%;
	display: block;
	float: left;
}
.right-area-d{
	width: 90%;
	display: block;
	margin: 0 5%;
	float: left;
}
.inter-third-word{
	display: inline;
}
.third-inner-1{
	width: 20%;
}
.space-ctrl-a{
	font-size: 40px;
	line-height: 50px;
	margin-top: 50px;
	width: 75%;
}
.brand-a1{
	line-height: 28px;
	width: 100%;
	margin-left: 0%;
}
.brand-b1{
	width: 13%;
}
.brand-b2{
	width: 85%;
	margin-left: 0%;
	margin-top: 40px;	
}
.right-area-d{
	padding-top: 60px;
}
.section-third-index-inner{
    width:95%;
}
.forth-inner-a{
	width: 90%;	
	margin: 0 5%;
	float: left;
}
.forth-inner-b{
	width: 90%;
	margin: 0 5%;
	float: left;
	display: block;
}
.forth-ctrl-h1{
	margin: 100px 0 0 0;
}
.forth-ctrl-word{
	font-size: 17px;
	color: #131313;
	margin-top: 25px;
	width: 100%;
	margin-left: 0;
	line-height: 32px;
}
.forth-ctrl-h2{
	margin: 40px 0 0 0;
}
.forth-inner-a img{
	width: 100%;
	margin-top: 0;
}
.row3{
	margin:0;
}
}
@media only screen and (max-width : 800px) {
.logo-yung{
left: 10px;
top: 40px;	
}
.loader .inter-gif-space{
	width: 310px;
	margin: 390px auto 0 auto;
}
.header-tsai{
	width: 29px;
	left: 30px;
	bottom: 80px;	
}
.wrapper {
	top: 1000px;
}

.switch-c{
	display: none;
}
.switch-d{
	display: block;
}
.header-fancyworld{
	margin-top:50px;		
}
.row2{
	margin: 60px 0 50px 0;
}
.space-ctrl-a{
	font-size: 34px;
	line-height: 50px;
	margin-top: 30px;
	width: 75%;
}
.inter-ctrl{
	font-size: 30px;
	margin-top: 30px;
}
.brand-b1{
	width: 16%;
}
.brand-b2{
	width: 82%;
	margin-left: 0%;
	margin-top: 20px;	
}
.inter-space-h2{
	margin-top: 40px;
}
.ak{
	display: none;
}
.title-forth-1{
	font-size: 34px;
}

}
@media only screen and (max-width : 768px) {
	
.logo-yung{
left: 30px;
top: 40px;	
}
}
@media only screen and (max-width : 601px) {
.loader .inter-gif-space{
	width: 310px;
	margin: 400px auto 0 auto;
}
.header-fancyworld{
	margin-top:100px;		
}
.header-fancyworld-inner{
	width: 97%;
	margin: 0 auto;	
}
.logo-yung{
	width: 430px;
	display: block;
	left: 20px;
	top: 40px;
	position: absolute;
	z-index: 95;
}
.header-scroll{
	width: 100%;
	float: left;
	display: block;
}
.header-scroll-inner{
	width: 105px;
	display:block;
	margin: 0 auto;
}
.section-second-index-inner{
	width: 100%;
	margin:0;
}
.section-third-index-inner{
	width: 100%;
	margin:0;
}
.right-area2-a{
	width: 17%;
	display: block;	
}

.third-inner-1{
	width: 25%;
}
.third-inner-2{
	width: 75%;
	display:block;
	float: left;
}
.space-ctrl-a{
	font-size: 25px;
	line-height: 50px;
	margin-top: 20px;
	width: 75%;
}
.left-area-c{
	width: 92%;
	margin: 0 4%;
	display: block;
	float: left;
}
.right-area-d{
	width: 92%;
	display: block;
	margin: 0 4%;
	float: left;
}
.left-area1{
	width: 100%;
	margin: 0;
	float: left;	
}
.right-area2{
	width: 92%;
	margin: 0 4%;
	float: left;
}
.inter-ctrl-word{
	width: 100%;
	margin-left: 0;
	line-height: 30px;
}
.brand-b1{
	width: 20%;
}
.brand-b2{
	width: 80%;
	margin-left: 0%;
	margin-top: 0;	
}
.section-forth-index-inner{
	width: 100%;
	margin: 0;
}
.forth-inner-a{
	width: 92%;	
	margin: 0 4%;
	float: left;
}
.forth-inner-b{
	width: 92%;
	margin: 0 4%;
	float: left;
	display: block;
}
.forth-ctrl-word{
	font-size: 16px;
}
.title-forth-1{
	font-size: 30px;
}

}
@media only screen and (max-width : 480px) {
.loader .inter-gif-space{
	width: 310px;
	margin: 320px auto 0 auto;
}
.wrapper {
	top: 800px;
}

.space-ctrl-a{
	font-size: 21px;
	line-height: 50px;
	margin-top: 20px;
	width: 75%;
}
.logo-yung{
	width: 370px;
	display: block;
	left: 20px;
	top: 33px;
	position: absolute;
	z-index: 95;
}
.logo-yung-1{
	width: 13%;
	height: auto;
	display: block;
	float: left;	
}
.logo-yung-1 img{
	width: 100%;
	display: block;
	height: auto;	
}
.logo-yung-2{
	width:85%;
	margin-left: 2%;
	font-size: 15px;
	line-height: 37px;
}
.inter-ctrl{
	font-size: 25px;
	margin-top: 30px;
}
.title-forth-1{
	font-size: 25px;
}

}
@media only screen and (max-width : 414px) {
.loader .inter-gif-space{
	width: 310px;
	margin: 240px auto 0 auto;
}
.wrapper {
	top: 740px;
}

.header-scroll{
	bottom: 85px;
}
.inter-ctrl{
	font-size: 25px;
	margin-top: 24px;
}

.logo-yung-1{
	display: none;
}
.logo-yung{
	width: 370px;
	display: block;
	left: 10px;
	top: 33px;
	position: absolute;
	z-index: 95;
}
.right-area2-a{
	width: 25%;
}
.right-area2-b{
	width: 75%;
	display: block;
	float: left;
}
.inter-ctrl{
	font-size: 25px;
	margin-top: 40px;
}
.third-inner-1{
	width: 35%;
	display:block;
	float: left;

}
.third-inner-2{
	width: 65%;
	display:block;
	float: left;

}
.space-ctrl-a{
	font-size: 28px;
	line-height: 40px;
	margin-top: 10px;
}
.brand-b1{
	width: 20%;
}
.brand-b2{
	width: 76%;
	margin-left: 2%;
}
.title-forth-1{
	width: 100%;
}
.forth-ctrl-h1{
	margin: 70px 0 0 0;
}

.logo-yung{
	width: 80%;
	left: 20px;
	top: 33px;
}
.logo-yung-2{
	width:100%;
	margin-left: 0%;
	font-size: 16px;
	line-height: 37px;
}
.scrollup{
	width:30px;
	height:30px;					
	background: url('../img/icon_top2.png') no-repeat;
	right:20px;
}

}
@media only screen and (max-width : 375px) {
.loader .inter-gif-space{
	width: 305px;
	margin: 220px auto 0 auto;
	font-size: 16px;
}	
.wrapper {
	top: 670px;
}

.header-scroll{
	bottom: 100px;
}


.space-ctrl-a{
	font-size: 26px;
	line-height: 40px;
	margin-top: 10px;
}
.title-forth-1{
	font-size: 22px;
}
.logo-yung{
	width: 84%;
	left: 15px;
	top: 33px;
}
.logo-yung-2{
	font-size: 15px;
}
.header-fancyworld{
	margin-top:50px;		
}
.header-fancyworld-inner{
	width: 96%;
	margin: 0 auto;	
}
.header-scroll-inner{
	width: 95px;
	display:block;
	margin: 0 auto;
}
}
@media only screen and (max-width : 360px) {
.loader .inter-gif-space{
	width: 305px;
	margin: 230px auto 0 auto;
}	
.wrapper {
	top: 650px;
}


.header-scroll{
	bottom: 60px;
}
.space-ctrl-a{
	font-size: 24px;
	line-height: 40px;
	margin-top: 10px;
}
.title-forth-1{
	font-size: 22px;
	width: 100%;
}
.logo-yung{
	display: none;
}
}
@media only screen and (max-width : 320px) and  (max-height : 568px){
.loader .inter-gif-space{
	width: 287px;
	margin: 200px auto 0 auto;
	font-size: 15px;
	letter-spacing:0px;
}	
.wrapper {
	top: 600px;
}

.header-scroll{
	bottom: 80px;
}
.header-scroll-inner{
	width: 85px;
}
.inter-ctrl{
	font-size: 25px;
	margin-top: 30px;
}
.space-ctrl-a{
	font-size: 22px;
	line-height: 35px;
	margin-top: 10px;
}
.title-forth-1{
	font-size: 21px;
	width: 100%;
}
.inter-gif-space-b{
	font-size: 15px;
}
}
@media only screen and (max-width : 320px) and  (max-height : 480px){
.loader .inter-gif-space{
	width: 287px;
	margin: 120px auto 0 auto;
}	
.wrapper {
	top: 520px;
}

.header-scroll{
	bottom: 40px;
}
}