@charset "utf-8";

@media screen and (max-width: 699px){
	
	.bg{
		background:#eff1ff;
	}

	.MuBox{
		background:#686ea7;
		width:100%;
		height:40px;
		display:block;
		z-index:14;
		position:fixed;
		top:0;
		left:0;
	}

	.Mob{
		display:block;		
	}

	.BG_Mob{
		display:none;
		background:rgba(0,0,0,0.5);
		top:0;
		left:0;
		position:fixed;
		width:100%;
		height:100%;
		z-index:13;
	}
	
	.MobLogo{
		display:block;
		width:300px;
		height:30px;
		line-height:20px;
		color:#fff;
		background:url("../../img/logo.png")no-repeat left 10px center;
		background-size:30px;
		padding:5px 0 5px 45px;
	}
	
	.MobLogo:hover{
		color:#fff;
		text-decoration:none;
	}	

	.MobLogo .c{
		height:15px;
		font-size:14px;
		font-weight:bold;
	}

	.MobLogo .e{
		font-size:12px;
	}


	a.Fb
	{
		display:none;
	}

	a.MuHome{
		width:40px;
		height:40px;
		line-height:40px;
		text-align:center;
		color:#fff;
		position:fixed;
		top:0;
		right:41px;
		border-left:1px rgba(255,255,255,0.3) solid;
		display:block;
	}
	
	a.MuFb{
		width:40px;
		height:40px;
		line-height:40px;
		text-align:center;
		color:#fff;
		background:#006fe0;
		position:fixed;
		top:0;
		right:81px;
		border-left:1px rgba(255,255,255,0.3) solid;
		display:block;
	}
	
	a.Mu{
		width:40px;
		height:40px;
		line-height:40px;
		text-align:center;
		color:#fff;
		position:fixed;
		top:0;
		right:0;
		border-left:1px rgba(255,255,255,0.3) solid;
	}
	
	a.MuX{
		width:40px;
		height:40px;
		line-height:40px;
		text-align:center;
		color:#fff;
		position:fixed;
		top:0;
		right:0;
		border-left:1px rgba(255,255,255,0.3) solid;
		display:none;
	}

	a.Mu:hover,
	a.MuX:hover
	{
		background:#4882A3;
		text-decoration:none;
	}
	


	.top_lnk{	
		display:none;
	}

	.top{
		width:300px;
		height:100%;
		padding:20px;
		background:#fff;
		position:fixed;
		top:40px;
		left:0;
		z-index:13;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;			
		display:none;
	}

	.tops{
	}

	a.logo{
		width:300px;
		height:40px;
		background:url("../../img/logo.png")no-repeat left center;
		display:block;
		float:left;
		padding:10px 0px 10px 56px;
		color:#000;
		background-size:50px 50px;
	}

	a.logo .c{
		font-size:17px;
		font-weight:bold;
	}

	a.logo .e{
		font-size:12px;
		line-height:14px;
	}

	a.logo:hover{
		text-decoration:none;
	}


	.mu{
		width:300px;
		height:100%;
		background:#fff;
		position:fixed;
		top:40px;
		left:0;
		z-index:13;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;			
	}

	.mu a{
		display:block;
		height:30px;
		line-height:30px;
		padding:10px 20px;
		font-size:14px;
		color:#000;
		font-weight:bold;
		border-bottom:1px #eee solid;
	}

	#Mycanvas,
	.ixbrBg,
	.ixbr,
	.ixbrs,
	.brL,	
	.brL .Img,
	.brL .Label,
	.brL .Label img,
	.brL .Nam,
	.brL .Nam .EN,
	.brL .Nam .CT,
	.brL .brLImg,
	.brL .Ito,
	.brL .IconBox,
	.brL .IconBox .IconBok,
	.brL .IconBox .IconBok .Icon,
	.brL .IconBox .IconBok .Nam,
	.brL .BtnBox,
	.brL .BtnBox .Btn,
	.brL .BtnBox .Btn:hover,
	.ixbrs .ixbrs_lnk,
	.ixbrs .ixbrs_lnk div
	{
		display:none;
	}

	.isbr{
		height:80px;
		/* 藍色
		background: #68bcdc; /* Old browsers
		background: -moz-linear-gradient(left, #68bcdc 0%, #68c1b1 100%);
		background: -webkit-linear-gradient(left, #68bcdc 0%,#68c1b1 100%);
		background: linear-gradient(to right, #68bcdc 0%,#68c1b1 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68bcdc', endColorstr='#68c1b1',GradientType=1 );
		*/
		/*
		background: #bec4fa; /* Old browsers 
		background: -moz-linear-gradient(45deg, #bec4fa 0%, #99a0e5 48%, #888ec9 100%);
		background: -webkit-linear-gradient(45deg, #bec4fa 0%,#99a0e5 48%,#888ec9 100%); 
		background: linear-gradient(45deg, #bec4fa 0%,#99a0e5 48%,#888ec9 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bec4fa', endColorstr='#888ec9',GradientType=1 );
		*/
		
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8989ba+0,8989ba+100&1+0,0+100 */
		/*
		background: -moz-linear-gradient(top, rgba(137,137,186,1) 0%, rgba(137,137,186,0) 100%); /* FF3.6-15 
		background: -webkit-linear-gradient(top, rgba(137,137,186,1) 0%,rgba(137,137,186,0) 100%); /* Chrome10-25,Safari5.1-6 
		background: linear-gradient(to bottom, rgba(137,137,186,1) 0%,rgba(137,137,186,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8989ba', endColorstr='#008989ba',GradientType=0 ); /* IE6-9 
		*/
		
		position:relative;	
		text-align:center;
		margin-top:90px;
	}

	.isbr .nam{
		width:300px;
		height:40px;
		padding:10px 0px;
		margin:0 auto 30px auto;	
		border-top:1px #686ea7 solid;
		border-bottom:1px #686ea7 solid;
	}

	.isbr .nam .ct{
		height:20px;
		font-size:20px;
		font-weight:bold;
		padding-bottom:5px;
		color:#686ea7;	
		position:relative;	
	}

	.isbr .nam .en{
		height:20px;
		font-size:13px;
		color:#686ea7;	
		position:relative;
		font-family: 'Oswald', sans-serif;	
		color:#bbb;
	}



	.Wrap{
		word-wrap: break-word;
		text-align: justify;
		text-justify:inter-ideograph;
		position:relative;
	}


	.Wraps{
		width:90%;
		margin:0 auto;
		word-wrap: break-word;
		text-align: justify;
		text-justify:inter-ideograph;
		position:relative;
	}

	.WrapsIxFix{
		margin-top:0;
	}


	.BgAbout1{
		background:url(../../img/BgAbout1.jpg)no-repeat right 30% center;
		background-size:cover;
	}	
	
	.About1{
		height:650px;
		margin:30px 0;
		position:relative;
	}


	.About1Nam{
		font-size:25px;
		line-height:25px;
		font-weight:bold;
		color:#686ea7;	
		margin:0 0 20px 0;
		padding:10px;
		position:relative;		
	}

	.Wraps .txtBoxLeft{
		width:90%;
		height:95%;
		text-align:left;
		position:absolute;
		top:0;
		margin:5%;
		word-wrap: break-word;
		text-align: justify;
		text-justify:inter-ideograph;	
		padding:30px;
		background:rgba(255,255,255,0.9);
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;			
	}

	.Wraps .txtBoxCenter{
		padding:30px 0;
	}

	.Wraps .Nam{
		font-size:25px;
		font-weight:bold;
		color:#686ea7;	
		margin:0 0 20px 0;
		padding:10px;
		border:1px #e2e4f6 solid;
		border-left:5px #e2e4f6 solid;
		position:relative;
	}
	
	.Wraps .Nams{
		font-size:20px;
		font-weight:bold;
		color:#ff6b49;	
		margin:0 0 20px 0;
	}		
	
	.Wraps .Ito{
		padding:0 0 30px 0;
		line-height:26px;
		font-size:16px;	
	}
	
	.Wraps .btn_lnk{
		background: #686ea7;
		color:#fff;
		padding:7px 26px;
		border-radius:40px;
	}

	.ix_photo{
		height:auto;
		margin:0 auto;	
	}

	.ix_photo img{
		width:16.6%;
		height:10%;
		margin:0;
		float:left;
	}



	.CertificateBoxL{
		width:90%;
		background:#686ea7;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		padding:50px;
		margin:50px auto 0 auto;
	}
	
	.CertificateBoxL .Nam{
		font-size:33px;
		color:#fff;
		line-height:37px;
	}	
	
	.CertificateBoxL .Btn{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9c00+0,f46255+100 */
		background: #ff9c00; /* Old browsers */
		background: -moz-linear-gradient(left, #ff9c00 0%, #f46255 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #ff9c00 0%,#f46255 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #ff9c00 0%,#f46255 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#f46255',GradientType=1 ); /* IE6-9 */
		color:#fff;
		text-align:center;
		font-size:16px;
		border-radius:2px;
		display:block;
		height:40px;
		line-height:40px;
		margin:30px 0;
		border:1px #f46255 solid;
		
	}

	
	.CertificateBoxL .Btn:hover{
		text-decoration:none;
		background:#99A0E5;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;	
		border:1px #99A0E5 solid;
	}


	.CertificateBoxR{
		width:90%;
		background:#e2e4f6;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		padding:50px;
		margin:0 auto 50px auto;
	}

	.CertificateBoxRs{
		width:100%;
		height:300px;
	}


	.CertificateBoxRs .Img{
		width:48%;
		height:300px;
		float:left;
		margin:0 1%;
	}




	.ContactBoxL{
		width:90%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		padding:50px 0 50px 100px;		
		position:relative;
	}
	
	
	.ContactBoxR{
		width:90%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		padding:50px 0 50px 100px;
		position:relative;		
	}		

	
	.ContactBoxL .IconTelandFax{
		width:50px;
		height:50px;
		background:url("../../img/telephone.png")no-repeat center center;
		background-size:35px;
		border:1px #e2e4f6  solid;
		position:absolute;
		top:50px;
		left:0px;
	}
	
	.ContactBoxR .IconEmail{
		width:50px;
		height:50px;
		background:url("../../img/mail.png")no-repeat center center;
		background-size:35px;
		border:1px #e2e4f6  solid;
		position:absolute;
		top:50px;
		left:0px;
	}
	
	.ContactBoxL .IconLocation{
		width:50px;
		height:50px;
		background:url("../../img/location.png")no-repeat center center;
		background-size:50px;
		border:1px #e2e4f6  solid;
		position:absolute;
		top:50px;
		left:0px;
	}


	.video_box{	
		width:100%;
		margin:0 auto 100px auto;
		position:relative;
		right:-1%;
	}

	.video_box .bok{	
		width:24%;
		margin:0px 1% 1% 0px;
		float:left;
		position:relative;
	}

	.video_box .bok:nth-child(4n){	
		width:24%;
		margin:0px 1% 1% 0px;
		float:right;
		position:relative;
	}

	.video_box .bok a img{	
		width:100%;
	}

	.video_box .bok .nam{	
		height:80px;
		width:100%;
		background:rgba(0,0,0,0.8);
		color:#fff;
		position:absolute;
		z-index:2;
		bottom:0;
		left:0px;
		padding:10px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		font-size:15px;
		font-weight:bold;
	}

	.video_box .bok .nam a{	
		color:#ea5440;
		font-size:12px;
	}


	.showcase_img{
		width:100%;
		height:300px;
		margin:30px 0;
		background:url("../../img/showcase_img.jpg")no-repeat center center;
		background-size:cover;
	}
	
	.map{
		height:500px;
		margin:50px auto;
		position:relative;
	}

	.Wraps .NewsBox{
		padding:0;
	}
	
	.WrapsFix{
		position:relative;
		margin:0 0 60px 0;
	}

	.News{
		width:49%;
		min-height:400px;
		float:left;
		margin:0 1% 1% 0;
		background:#fbfbfb;
		display:block;
	}

	.News:nth-of-type(2n){
		width:49%;
		height:auto;
		float:right;
		margin:0 0 1% 0;
	}
	
	
	.News .Img{
		width:100%;
		height:200px;
	}

	.News .NewsNam{
		padding:20px;
		font-size:16px;
		font-weight:bold;
		line-height:26px;
		
	}


	.NewssL,
	.NewssL .Title,
	.NewssL a,
	.NewssL .Datim,
	.NewssL .Nam
	{
		display:none;
	}

	.NewssR{
		width:100%;
		min-height:10px;
		margin-bottom:50px;
	}

	.NewssR .Nam{
		margin:0 0 50px 0;
		font-size:20px;
		font-weight:bold;
	}
	.NewssPath{
		height:20px;
		margin-bottom:50px;
		font-size:13px;
		position:relative;
	}



	.pdsBox{
		width:100%;
		height:auto;		
	}
	
	.clrPds{
		
	}

	.pdsBok{
		width:100%;
		padding:30px 0 40px 0;
		background:rgba(255,255,255,0.8);
	}

	.pdsBok:hover{
		background:#fbfbff;
	}	

	.pdsBok .Img{
		width:100%;
		height:auto;
	}

	.pdsBok .Img img{
		width:100%;
		height:auto;
	}


	.pdsBok .PdsNam{
		width:80%;
		font-weight:bold;
		margin:30px auto;
		font-size:18px;
		line-height:24px;
	}

	.pdsBok .PdsIto{
		width:80%;
		margin:0 auto;
		height:40px;
		line-height:22px;
		font-size:15px;
		color:#555;
	}

	.pdsBok .PdsBtnBox{
		width:80%;
		margin:0 auto;
	}

	a.pds_info{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9c00+0,f46255+100 */
		background: #ff9c00; /* Old browsers */
		background: -moz-linear-gradient(left, #ff9c00 0%, #f46255 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #ff9c00 0%,#f46255 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #ff9c00 0%,#f46255 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#f46255',GradientType=1 ); /* IE6-9 */	
		cursor:pointer;
		text-align:center;
		height:40px;
		padding:0 10px;
		color:#fff;
		font-weight:bold;
		line-height:40px;
		font-size:15px;
		border-radius:2px;
		display:inline-block;
		border:1px #f46255 solid;
		margin-right:5px;
	}

	a.pds_info:hover{
		text-decoration:none;
		background:#99A0E5;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;	
		border:1px #99A0E5 solid;
	}

	.lin{
		height:1px;
		background:#eee;
		margin-bottom:70px;
	}

	
	.PdssWrap{
		width:700px;
		margin:0 auto;
		position:relative;		
	}

	.pdssImg{
		width:700px;
		margin-bottom:10px;
	}

	.pdssImg img{
		width:700px;
		height:438px;
		cursor:pointer;
	}
	
	.pdssImgs{
		width:100%;
		margin-bottom:60px;
	}	
	
	.pdssImgs img{
		width:25%;
		float:left;
		padding:10px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		cursor:pointer;		
	}	
	
	.pdssIconBox{
		width:100%;
		min-height:0;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		padding-top:5%;
		color:#555;
	}

	.pdssIconBox .pdssIconBok{
		width:80px;
		height:60px;
		display:inline-block;
		margin-bottom:10%;
	}

	.pdssIconBox .pdssIconBok .Icon{
		width:50px;
		height:50px;
		line-height:50px;
		border:1px #555 solid;
		border-radius:100%;
		margin:0 auto;
		text-align:center;
	}

	.pdssIconBox .pdssIconBok .IconNam{
		width:100%;
		margin-top:2%;
		font-size:12px;
		text-align:center;
	}



	.pdssNam{
		font-size:30px;
		margin-bottom:30px;
	}	
	
	.pdssNams{
		font-weight: bold;
		color: #686ea7;
		font-size:16px;
		margin-bottom:30px;
		padding:5px 10px;
		border: 1px #e2e4f6 solid;
		border-left: 5px #e2e4f6 solid;		
	}		
	
	.pdssIto{
		margin-bottom:30px;
	}
	
	
	.PdssBtnBox{
		margin-bottom:30px;
	}






	.sideL{
		width:400px;
		min-height:10px;
		float:left;
	}

	.sideR{
		width:800px;
		min-height:10px;
		float:right;
	}


	a.btn_gotop{
		width:40px;
		height:40px;
		line-height:40px;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9c00+0,f46255+100 */
		background: #ff9c00; /* Old browsers */
		background: -moz-linear-gradient(top, #ff9c00 0%, #f46255 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #ff9c00 0%,#f46255 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #ff9c00 0%,#f46255 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#f46255',GradientType=1 ); /* IE6-9 */	
		color:#fff;
		text-align:center;
		display:none;
		position:fixed;
		bottom:20px;
		right:20px;
		z-index:10;
		font-size:16px;
		border-radius:2px;
	}

	a.btn_gotop:hover{
		text-decoration:none;
		background:#99A0E5;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;	
	}


	a.btn_PageX{
		display:none;
	}


	.caseBox{
		width:700px;	
		margin:0 auto;
	}
	
	.caseBox img{
		width:100%;
		margin-bottom:30px;
	}



	.footer{
		min-height:20px;
		padding:30px 0px;
		text-align:center;
		background:#555;
		color:#fff;
		font-size:12px;
	}	

	/* anchor fix --------------------------------------------------------------- */

	.anchor_fix{
		position: relative;
		top:-88px;
		height: 0;
		overflow: hidden;
	}
	
	
	/* Priacy */

	.Nam1{
		font-size:16px;
		font-weight:bold;
		color:#686ea7;
	}	
	
	.Ito1{
		padding:20px 0;
	}
	
	.List1{
		list-style-type:decimal;
		padding:0 17px;
	}
	
	.List1 li{
		list-style-type:decimal;
		padding:0 0 20px 0;
	}
	
	a.BtnPrivacy{
		background:#686ea7;
		color:#fff;
		font-size:13px;
		border-radius:2px;
		margin-top:10px;
		display:block;
		height:40px;
		line-height:40px;
		width:160px;
		text-align:center;
		margin:10px auto 0 auto;
	}






}