@charset "utf-8";

@media screen and (max-width: 768px) {


	.background{
		background:#0c3d9a url(../../img/background1.jpg);
	}

	
	.Top{
		width:100%;
		height:100px;
		background:url(../../img/background1.jpg);
		top:0;
		left:0;
		position:fixed;
		z-index:10;
	}


	.Tops{	
		height:100px;
		margin:0 auto;
		box-sizing: border-box;
		padding:0px 30px;
	}

	a.MuO,
	a.MuX
	{
		width:100px;
		height:100px;
		line-height:100px;
		position:absolute;
		top:50%;
		right:0;
		margin-top:-50px;
		color:#fff;
		text-align:center;
	}


	a.MuO  span,
	a.MuX span
	{
		font-size:30px !important;
	}


	a.MuO:hover,
	a.MuX:hover
	{
		background:#0c3d9a url(../../img/background2.jpg);
	}


	a.Logo{
		width:230px;
		height:100px;
		background:transparent url("../../img/logo.svg")no-repeat center center / 100%;
		display:block;	
	}	

	
	.TopsRight{
		width:100%;
		box-sizing: border-box;
		background:#0c3d9a url(../../img/background1.jpg);
		position:absolute;
		top:100px;
		left:0;
		z-index:1;
	}

	.TopsRight .Menu{
		width:100%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		color:#fff;
		
	}

	.TopsRight .Menu .Mu{
		display:block;
		text-align:center;
		cursor:pointer;
		position:relative;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		padding:30px 0;
		border-top:1px rgba(255,255,255,0.3) solid;
	}

	
	.TopsRight .Menu .Mu .m1{
		font-size:21px;
		font-weight:bold;
	}	
	
	
	.TopsRight .Menu .Mu .m2{
		font-size:15px;
		font-family: "Oswald", sans-serif;
		font-weight: 100;		
	}	


	.TopsRight .Menu .Mu:hover{
		text-decoration:none;
		background:#0c3d9a url(../../img/background2.jpg);
		color:#fff;
	}	

	.TopsRight .Menu .Mu .Su{
		background:#0c3d9a url(../../img/background2.jpg);
		padding:30px;
		display:flex;
		flex-wrap:wrap;
		margin:30px 0 -30px 0;	
	}
	

	.TopsRight .Menu .Mu .Su a{
		width:calc(50% - 60px);
		color:#fff;
		line-height:22px;
		padding:15px 30px;
		display:block;
		text-align:center;
	}		
	
	.TopsRight .Menu .Mu .Su a:hover{
		text-decoration:none;
		background:#0c3d9a url(../../img/background1.jpg);
		color:#fff;
	}


	.TopsRight .Menu .Mu.Language{
		width:120px !important;
	}	




	.AnchorPoint{
		position:relative;
	}
	
	
	/* Ixbr Style */	
	
	.Ixbr{
		width:100%;
		height:600px;
		background:#0c3d9a url(../../img/background2.jpg);
		position:relative;
		padding-top:100px;
		
	}
	
	.Ixbr .img{
		width:100%;
		height:600px;
		background:url(../../img/ixbr.png)no-repeat center center / cover;
		position:absolute;
		top:100px;
		left:0;		
	}	
	

	.Ixbrs{
		height:650px;
		padding:0 30px;
		margin:0 auto;
		position:relative;
		display:flex;
	}

	.Ixbrs .side_l{
		padding:50px 0;
		position:relative;
		box-sizing: border-box;		
	}

	.Ixbrs .side_l .name{
		font-size:30px;
		font-weight:bold;
		color:#fff;
	}

	.Ixbrs .side_l .desc{
		font-size:15px;
		color:#fff;
		margin:30px 0 40px 0;
		line-height:25px;
	}

	.Ixbrs .side_l .btn_box{
	}
	
	.Ixbrs .side_l .btn_box a.portfolio{
		display:table;
		width:100%;
		height:50px;
		line-height:40px;
		background:#FDF13E;
		text-align:center;
		color:#000;
		font-size:21px;
		text-align:center;
		border-radius:5px;
	}		
	
	.Ixbrs .side_l .btn_box a.portfolio:hover{
		background:#EC8323;
		text-decoration:none;
		color:#fff;
	}		
	
	.Ixbrs .side_l .btn_box a.portfolio span{
		display:block;
		margin:0;
		font-size:31px;
	}


 	.Ixbrs .side_l .btn_box .info{	
		border:1px rgba(255,255,255,0.3) solid;
		display:table;
		width:100%;
		height:120px;
		padding:10px 100px 10px 30px;
		margin-bottom:5px;
		border-radius:10px;
		cursor:pointer;
		position:relative;
		color:#fff;
		box-sizing:border-box;
	} 		
	
 	.Ixbrs .side_l .btn_box .info:hover{	
		background:#FDF13E;
		border:1px #FDF13E solid;
		color:#000;
		text-decoration:none;
	} 	
	
	
 	.Ixbrs .side_l .btn_box .info .t1{	
		font-size:17px;
		font-weight:400px;
		font-family: 'Oswald', sans-serif;
	} 	

 	.Ixbrs .side_l .btn_box .info .t2{	
		font-size:30px;
		font-weight:400px;
		font-family: 'Oswald', sans-serif;
	} 	

 	.Ixbrs .side_l .btn_box .info .touch{	
		width:70px;
		height:70px;
		background:url(../../img/touch.png)no-repeat center center / contain;
		position:absolute;
		bottom:20px;
		right:20px;
		z-index:1;
	} 	


	.Ixbrs .side_r{
		padding:70px 0;
		width:0%;
		height:600px;
		position:relative;
		box-sizing: border-box;		
	}


	/* Isbr style */


	.Isbr{
		width:100%;
		height:200px;
		background:#0c3d9a url(../../img/background2.jpg);
		position:relative;
		padding-top:100px;
		
	}

	.Isbrs{
		height:200px;
		margin:0 auto;
		position:relative;
		display:flex;
		padding:0 30px;
	}


	.Isbrs .name{
		width:200px;
		height:60px;
		margin:70px 0;
	}


	._slogan{
		margin:50px auto;
		font-size:21px;
		line-height:35px;
	}



	/* marquee style */

	.marquee{
		height:auto;
		border-radius:10px;
		padding:50px;
		margin:0 auto;
		background:rgba(37,37,37,0.9);
		position:relative;
		line-height:25px;
		font-size:17px !important;
	}
	
	
	.marquee .name{
		line-height:25px;
		font-size:30px !important;
		font-weight:bold;
		margin:30px 0 5px 0;
	}	


	.container{
		padding:50px 30px;
		margin:70px 0;
		background:rgba(10, 41, 101, 0.3);
		
	}


	.container_intro{
		margin:0 auto;
	}

	.container_intro .text_intro{
		padding:50px 0;
		height:400px;
		position:relative;
		box-sizing: border-box;		
	}
	
	.container_intro .text_intro .desc{
        font-size:19px;
		line-height:31px;
		margin:30px 0;
		text-align:justify;
	}

	.container_intro .img_intro{
		height:250px;
		position:relative;
		box-sizing: border-box;		
		border-radius:10px;
	}	




	
	/* Wrap style */
	
	.wrap{	
		margin:0 0 50px 0;
		color:#fff;
		padding:30px;
	}


 	.wraps{	
		box-sizing:border-box;
		margin:0 auto;
	} 


	.wrap_name{
		margin:30px auto;
	}	
	
	.container_name{
		margin:30px auto;
	}	

	._name{
        line-height:25px;
        font-size:31px;
        font-weight:bold;
		color:#FDF13E;
	}

	
	._name ._name_en{
		font-size:15px;
		color:#ddd;
        font-family:"Oswald", sans-serif;
        font-weight:100;
		margin:5px 0;
	}	
	

	
	/* service_container style*/
	

 	.service_container{
		margin:0 auto 100px auto;
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;	
	}
	
 	.service_container .item{
		width:calc(100%);
		margin:10px;	
		box-sizing:border-box;
		display:block;
		background:rgba(255,255,255);
		border-radius:10px;	
		position:relative;	
		color:#000;
		overflow:hidden;
	}	

 	.service_container .item .en{
		width:100%;
		height:30px;
		font-size:50px;
		font-weight:bold;
		height:30px;
		position:absolute;
		top:-20px;
		right:0;
		text-align:right;
        font-family:"Oswald", sans-serif;
        font-weight:500;		
		color:#fff;
		opacity:0.5;
		
	}	


 	.service_container .item:nth-of-type(1){
		background:#D6EDFE;
	}	
	
 	.service_container .item:nth-of-type(2){
		background:#C3F0F1;
	}	
	
	
 	.service_container .item:nth-of-type(3){
		background:#D1DCFD;
	}	
		
 	.service_container .item:nth-of-type(4){
		background:#FDC2C5;
	}	
	

	
 	.service_container .item .top{
		padding:70px 30px 30px 30px;
	}		
		
	
 	.service_container .item .top .name{
		font-size:25px;
		font-weight:bold;
		height:70px;
	}		
	
 	.service_container .item .top .into{
		font-size:17px;
		margin:15px 0;
		line-height:25px;
		height:80px;
		text-align:justify;
	}		
	
 	.service_container .item .img{
		height:150px;
		background:auqa;
		border-radius:0 0 10px 10px;
	}	


	
	/* menu_case style */
	
	.menu_case{
		margin:0 auto 100px auto;
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;		
	}

	.menu_case a{
		width:calc(50% - 20px);
		margin:10px;		
		box-sizing:border-box;
		display:block;
		text-align:center;
		font-size:21px;
		font-weight:bold;
		background:rgba(255,255,255);
		color:#000;
		border-radius:10px;	
		position:relative;		
	}
	
	.menu_case a:hover{
		color:#000;
		text-decoration:none;
	}

	.menu_case a .img{
		height:200px;
		border-radius:10px 10px 0 0;	
	}	

	.menu_case a .name{
		padding:30px 0;
	}	
	
	
	/* caseps_container style*/
	

 	.caseps_container{
		padding:30px;
		margin:50px auto 70px auto;
		background:#242424 url(../../img/background_caseps_container.png)no-repeat center center / cover;
		position:relative;
		overflow:hidden;
		border-radius:10px;
	}	
	
 	.caseps_containers{
		margin:0 auto 70px auto;		
		flex-wrap:wrap;
		justify-content:space-between;
		box-sizing:border-box;
	}	
	
 	.caseps_containers .intro{
		padding:50px 0;
		width:100%;
		position:relative;
		box-sizing: border-box;	
		line-height:30px;
		font-size:19px;
	}		
	
	
	/* 收合選單 */
 	.caseps_containers .menu_list{
		padding:10px 0;
		width:100%;
		position:relative;
		box-sizing: border-box;	
	}

	.menu_head{
		padding:20px;
		cursor:pointer;
		position:relative;
		margin:1px 0;
		font-weight:bold;
		font-size:17px;
		background:#D7EDFD url(../../img/stat_minus_1_50dp_5F6368_FILL0_wght400_GRAD0_opsz48.svg)no-repeat center right 20px / 32px ;
		color:#000;
	}
	
	.menu_body{
		display:none;
	}
	
	.menu_body .content{
		display:block;
		background-color:#EFEFEF;
		padding:20px;
		margin:0;
		font-weight:bold;
		text-decoration:none;
		color:#000;
	}
	
	.menu_body .content li{
		padding:10px 0;
		margin:0;
		font-weight:bold;
		text-decoration:none;
	}
	

	
	/* 聯絡我們 style */

 	.contact_us_container{
		padding:80px 0;
		background:url(../../img/background_contact_us_container.png)no-repeat center center / cover;
	}		
	
 	.contact_us_containers{
		margin:0 auto;
	}			
	
 	.contact_us_containers .intro{
		padding:0 0 50px 0;
		position:relative;
		box-sizing: border-box;	
		line-height:30px;
		font-size:19px;
	}		
		
		
 	.contact_us_containers .intro .img{
		height:300px;
		margin:30px 0;
		border-radius:10px;
	}		
	

	
 	.contact_us_containers .contact_us_form{
		padding:130px 0 50px 0;
		position:relative;
		box-sizing: border-box;	
	}

	
 	.contact_us_containers .contact_us_form{
		padding:50px;
		background:url(../../img/background_content_us_form.jpg);
		border-radius:10px;
	}		
	
 	.contact_us_containers .contact_us_form .item{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		box-sizing:border-box;
		margin-bottom:35px;
		padding-bottom:7px;
		border-bottom:1px #ddd solid;
	}
	
 	.contact_us_containers .contact_us_form .item .name{
		width:100px;
		font-weight:bold;
		color:#000;
	}
	
	
 	.contact_us_containers .contact_us_form .item .name .key{
		font-weight:bold;
		font-size:13px;
		color:#fff;
		padding:2px 7px;
		background:#006DC3;
		vertical-align:text-top;
		display:table;
	}	
	

 	.contact_us_containers .contact_us_form .item .input{
		flex:1;
		color:#000;
	}
	
 	.contact_us_containers .contact_us_form .item .input input[type=text]{
		width:100%;
		height:50px;
		box-sizing:border-box;
	}

 	.contact_us_containers .contact_us_form .item .input .list{
		display:flex;
		flex-wrap:wrap;
	}

 	.contact_us_containers .contact_us_form .item .input .list div{
		width:100%;
		margin:0 10px 10px 0;
	}	
	
 	.contact_us_containers .contact_us_form .btn_box{
		margin-right:10px;
	}		
	
 	.contact_us_containers .contact_us_form .btn_box .btn_send{
		background:#FDF13E;
		color:#000;
		text-align:center;
		width:150px;
		height:60px;
		line-height:60px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		display:table;
		border-radius:5px;
	}		
	
 	.contact_us_containers .contact_us_form .btn_box .btn_send:hover{
		background:#EC8323;
		color:#fff;
	}		
	

	
 	.contact_us_containers .contact_us_form .btn_box .btn_send span{
		margin-left:5px;
	}	
	
	
	.contact_us_containers .contact_us_info{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		box-sizing:border-box;		
	}
	
	
	
	/* 作品展示 */
	
 	.caseshow_container{
		padding:30px 0;
		margin:0 auto;
		width:1200px;
		box-sizing:border-box;
		display:flex;
		flex-wrap:wrap;
	}	
	
	
 	.caseshow_menu_btn_call_o,
 	.caseshow_menu_btn_call_x
	{
		display:none;
	}	
	
 	.caseshow_menu{
		width:calc(20% - 30px);
		padding-right:30px;
	}		

	.caseshow_menu a{
		display:block;
		color:#fff;
		padding:10px 20px;
		height:50px;
		line-height:50px;
		border-radius:5px;
		margin-bottom:5px;
		font-weight:bold;
		font-size:17px;		
	}


	.caseshow_menu a.selected,
 	.caseshow_menu a:hover
	{
		background:#ffd200;
		color:#000;
		text-decoration:none;
	}		
	

 	.caseshow_containers{
		width:80%;
		height:auto;
		display:flex;
		flex-wrap:wrap;
		position:relative;
	}		
	
	
 	.caseshow_containers .img{
		width:calc(33.3% - 10px);
		background:#ddd;
		margin:5px;
		position:relative;
		display:block;
		padding-bottom: 22%;
		border-radius:5px;
	}			


	/* radio style */

	input[type=radio].from{
		vertical-align:middle;
		margin:0px 5px 0px 0px;
		display: inline-block;
		width: 17px;
		height: 17px;
		cursor: pointer;
		background: #fff;
		border: 1px solid #c6c6c6;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
		vertical-align:-3px;

	}

	input[type=radio].from:checked {
		background:#336699;
		border: 1px solid #336699;
		background-clip: content-box;
	}	
	
	
	/* checkbox style */
	
	input[type=checkbox].from{
		vertical-align:middle;
		margin:0px 5px 0px 0px;
		display: inline-block;
		width: 20px;
		height: 20px;
		cursor: pointer;
		background: #fff;
		border: 1px solid #c6c6c6;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
		vertical-align:-3px;
	}

	input[type=checkbox].from:checked::after{
		width:17px;
		height:17px;
		background:#336699;
		font-family: "Material Icons";
		content: "\e876";
		font-size:17px;
		border: 1px solid #336699 !important;
		color:#fff;
		background-clip: content-box;
		top:0;
		left:0;
		text-align:center;
	}	
	
	
	
	/* captcha style */
  

	.container_captcha_fw{
		width:100%;
		height:40px;
		position:relative;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
	}

	.container_captcha_fw:after{
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}

	.container_captcha_fw input[type=text].captcha{
		border:0px;
		width:100%;
		height:40px;
		padding:0px 25px;
		font-family: 'Oswald', sans-serif;
		text-align:center;
		font-size:20px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		line-height:40px;
		background:#fff;

	}

	.container_captcha_fw a.captcha_reset{
		width:30px;
		height:40px;
		display:block;
		padding:0 23px;
		position:absolute;
		top:0px;
		right:0px;
		z-index:100;
		text-align:center;
		line-height:40px;
	}

	.container_captcha_fw a.captcha_reset span{
		width:30px;
		height:40px;
		display:block;
		padding:0 20px;
		position:absolute;
		top:0px;
		right:0px;
		z-index:100;
		text-align:center;
		line-height:40px;
	}  


	.container_captcha_fw a.captcha_reset span:hover{
		transition: width .3s ,height .3s, transform .3s;
		transition-timing-function: ease;
		transform: rotate(-180deg);
	}		
	

	/* footer style */
	
	.footer{
		height:250px;		
		background:#242424;
		color:#fff;
		padding:50px 0 70px 0;
		overflow:hidden;
	}

 	.footers{
		height:250px;
		padding: 0 30px;
		margin:0 auto;
		position:relative;
	} 
	
 	.footers .logo_large{
		width:450px;
		height:450px;
		position:absolute;
		right:0;
		bottom:-170px;
		background:url(../../img/logo_large.svg)no-repeat center center / cover;
		opacity:0.1;
	} 	
	
	
 	.footers .copyright{	
		margin-bottom:15px;
		padding-bottom:15px;
		border-bottom:1px rgba(255,255,255,0.3) solid;
	} 	
	
 	.footers .copyright_slogan .t1{	
		font-size:30px;
		font-weight:bold;
		color:#FDF13E;
	} 
	
	.footers .copyright_slogan .t2{	
		font-size:19px;
		color:#fff;
		margin-top:10px;
	} 	
	
 	.footers .info{	
		margin:20px 0;
		border:1px rgba(255,255,255,0.3) solid;
		display:table;
		height:120px;
		padding:10px 100px 10px 30px;
		border-radius:10px;
		cursor:pointer;
		color:#fff;
		box-sizing:border-box;
		position:relative;
	} 		
	
 	.footers .info:hover{	
		background:#FDF13E;
		border:1px #FDF13E solid;
		color:#000;
		text-decoration:none;
	} 	
	
 	.footers .info .touch{	
		width:70px;
		height:70px;
		background:url(../../img/touch.png)no-repeat center center / contain;
		position:absolute;
		bottom:20px;
		right:20px;
		z-index:1;
	} 		
	
	
	
 	.footers .info .t1{	
		font-size:17px;
		font-weight:400px;
		font-family: 'Oswald', sans-serif;
	} 	

 	.footers .info .t2{	
		font-size:47px;
		font-weight:400px;
		font-family: 'Oswald', sans-serif;
	} 	

	
	
	/* other style */
	
	.anchor_fix{
		position:relative;
		top:-160px;
		height:0;
		display:block;
	}		
	
	
	a.BtnGoTop{
		width:100px;
		height:30px;	
		line-height:30px;	
		bottom:0;
		right:50%;
		margin:0 -50px 0 0;
		position:fixed;
		text-align:center;
		line-height:30px;
		color:#fff;
		font-size:17px;
		opacity:0;
		display:none;
		background:#ffd200;
		z-index:10;
		border-radius:5px 5px 0 0;
	}


	a.BtnGoTop:hover{
		background:#EC8323;
		text-decoration:none;
		height:60px;
		line-height:60px;
		transition:height .3s;
	}	

	
}