@import "/webeip/HT00100/becky/css/reset.css";
@charset "big5";

/*其他頁面PHONE*/
@media screen and (max-width:980px)
{
	
}
/*其他頁面PC*/
@media screen and (min-width:980px)
{
	
}

/* PC & phone 統一格式*/
	/* 表頭 TOP.asp */
	header{
		background-color: white;
		box-shadow: 2px 2px 3px lightgray;
	}

	.logo/*, .underlogo*/{
		display: block;
		background-image: url(/webeip/HT00902/img/logo.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	/*其他連結*/
	.top_associatebox{
	}
	.top_associate{
		background-color: #3BB3C3/*#ED1B24*/;
		color: white;
	}
	.top_associate .topicons{
		margin-left: 0.5em;
	}
	/*小連結*/
	.toplink_fb{ background-color: white;color: #3B559F;border-radius: 5px; }
	.toplink_line{ background: #4ECD00;color: white; }
	.toplink_ig{
		background: #E3297D; /* for Old browsers */
		background: -webkit-linear-gradient(
			-120deg,
			#7D36AE 0%,
			#D82F81 30%,
			#F80A00 70%,
			#F7D903 100%
		);
		background: linear-gradient(
			-120deg,
			#7D36AE 0%,
			#D82F81 30%,
			#F80A00 70%,
			#F7D903 100%
		);
		color: white;
	}
	.toplink_sk{ background: #00AEF3;color: white; }
	.toplink_mail{ background-color: white;color: #CA1D21;border-radius: 8px; }
	/* 表尾 UNDER.asp */
	footer{
		background-color: #41479F;
		color: white;
	}
	.undercompanyname{
		font-size: 1.1em;
		font-weight: bold;
	}
	.fectechs{
		font-size: 0.8em;
		color: rgba(255,255,255,0.5);
	}
	.underlogin{
		max-width: 160px;
		margin: 10px auto;
		display: block;
		background-color: #fff;
		border-radius: 5px;
		letter-spacing: 5px;
		padding: 5px 0 5px 5px;
		box-sizing: border-box;
		color: #ffffff;
		text-align: center;
		background-color: #F44336;
		cursor: pointer;
		transition: all .5s;
	}
	.underlogin:hover{
		background-color: #03a9f4;
	}

/*手機版*/
@media screen and (max-width:980px)
{
	
	/* 表頭 TOP.asp */
	.headheight{ padding-bottom: 60px; }
	header{
		width: 100%;

		position: fixed;
		z-index: 9999;
		
		box-shadow: 0 0 8px #999;
	}
	.logo{
		width: 210px;
		height: 50px;
		margin: 5px;
	}
	/*其他連結*/
	.top_associatebox{
		width: 95%;
		margin: 0 auto;
	}
	.top_associate{
		width: 100%;

		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		margin: 1em auto;

		border-radius: 15px;
		box-shadow: 2px 2px 3px lightgray;
		padding: 0.5em 0.25em;
		box-sizing: border-box;
		font-size: 0.8em;

		display: none;
	}
	.top_associate .topicons{
		display: none;
	}
	/*導覽列*/
	.btn{
		width: 40px;
		height: 40px;
		position:absolute;
		top:10px;
		left:-50px;
		z-index: 10000;
		cursor:pointer;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.open{background-image: url(/webeip/HT00100/becky/icon/menubtn_open_blod_bl.svg);}
	.close{background-image: url(/webeip/HT00100/becky/icon/menubtn_close_blod_bl.svg);}
	.topnav{
		background: linear-gradient(to top, rgba(255,241,235,0.8) 0%, rgba(172,224,249,0.8) 100%);
		position: fixed;
		z-index: 9999;
		top: 0;
		right: -250px;
		width: 250px;
		padding-top: 60px;
		box-sizing: border-box;
		height: 100%;
	}
	.topnav > ul{
		height: 95%;
		overflow: auto;
	}
	.topnav ul li a{
		display: block;
		font-size: 1.2em;
		font-weight: bold;
		color: #473B33;
		padding: 10px;
		border-bottom: 1px solid white;
	}
	.topnav ul li a > .topnav_icon{ margin-right: 0.5em; }
	.topnav ul li:last-child a{
		border-bottom: none;
	}
	.topnav ul li > .subnav{
		text-align: right;
		background: linear-gradient(to top, rgba(255,241,235,0.9) 0%, rgba(172,224,249,0.9) 100%);
		padding: 0.5em 1em;
		display: none;
	}

	.topnav ul li > .subnav li a{
		border-bottom: 1px solid rgba(255,255,255,0.5);
		color: black;
	}
	.topnav ul li:last-child,
	.topnav ul li > .subnav li:last-child a{
		border-bottom: none;
	}
	.topnav ul li:nth-child(9){ display: none; }
	/*小連結*/
	.toplink{
		position: fixed;
		left: 0.25em;
		bottom: 0.5em;
			
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	.toplink ul li{
		padding: 0.5em;
	}
	.toplink_fb{ font-size: 2em; }
	.toplink_line{ font-size: 1.55em;padding: 4px;box-sizing: border-box; border-radius: 5px; }
	.toplink_ig{ font-size: 1.7em;padding: 3px;box-sizing: border-box; border-radius: 5px;	}
	.toplink_sk{ font-size: 1.55em;padding: 4px;box-sizing: border-box; border-radius: 5px; }
	.toplink_mail{ font-size: 2em; }
	/* 表尾 UNDER.asp */
	footer{
	}
	.underwrap_p{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	.underwrap_p > span{
		text-align: center;
		padding: 0.5em 0.5em 1em;
		box-sizing: border-box;
	}
	.underbox{
		width: 95%;
		margin: 0 auto;
		padding: 1em 0;
		box-sizing: border-box;
	}
	.underbox ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	.underbox ul li{
		width: 45%;
		background-color: white;
		border-bottom: 3px solid lightgray;
		text-align: center;
		margin: 0.5em auto;
		padding: 0.5em 0;
	}
	.underbox ul li:nth-child(4){
		display: none;
	}
	.underbox ul li a{
		display: block;
		color: #535353;
	}
	.underbox2{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
	}
	.under_ul{
		width: 40%;
		margin: 0.5em auto;
	}
	.under_ul:last-child{
		width: 90%;
		margin: 0.5em auto;
	}
	.under_ul_title{
		text-align: center;
		border-bottom: 1px solid lightgray;
		padding: 0.5em;
		box-sizing: border-box;
	}
	.under_ul li{
		padding: 0.5em;
		box-sizing: border-box;
		text-align: center;
	}
	.under_ul li a{		
		color: white;
	}
	.under_ul_imgicons,.under_ul_icons{
		margin-right: 0.5em;
	}
	.under_ul_imgicons{
		height: 1em;
	}

	.fectechs{
		padding-top: 1em;
		margin-bottom: 0;
		text-align: center;
	}
}

/*電腦版*/
@media screen and (min-width:980px)
{
	/* 表頭 TOP.asp */
	.headheight{ padding-bottom: 166px; }
	header{
		position: fixed;
		z-index: 9999;
		
		width: 100%;
		min-width: 1200px;

		border-top: 5px solid #83C326;
	}
	/*小連結*/
	.toplink{
		position: fixed;
		z-index: 9999;
		bottom: -100%;
		right: 1em;
	}
	.toplink ul{
	}
	.toplink ul li{
		margin: 1em 0;
	}
	.toplink_fb{ font-size: 4em; }
	.toplink_line{ font-size: 3.3em;padding: 6px;box-sizing: border-box; border-radius: 5px; }
	.toplink_ig{ font-size: 3.4em;padding: 5px;box-sizing: border-box; border-radius: 5px;	}
	.toplink_sk{ font-size: 3.3em;padding: 6px;box-sizing: border-box; border-radius: 5px; }
	.toplink_mail{ font-size: 4em; }

	.topwrap{
		width: 1200px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1em 0 0.25em;
		box-sizing: border-box;
	}
	.logo{
		width: 285px;
		height: 65px;

		margin: 0 1em;
		transition: width 1s, height 1s;
	}
	

	/*導覽列*/
	.topnav{
		width: 1200px;
		margin: 0 auto;
		position: relative;
	}
	/*其他連結*/
	.top_associatebox{
		position: absolute;
		bottom: 100%;
		right: 10%;
	}
	.top_associate{
		display: inline-flex;
		align-items: center;
		padding: 0.5em;
		box-sizing: border-box;
		margin: 0 0.5em;
		border-radius: 30px;
		font-size: 1.2em;
	}
	.top_associate .topicons{
		font-size: 1.2em;
	}
	.topnav ul{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.topnav ul li {
		position: relative;
		padding: 1em 0;
	}
	.topnav ul li > a{
		display: block;
		text-align: center;
		white-space: nowrap;
		font-size: 1.15em;
		font-weight: bold;
		padding: 0.5em 1em;
		box-sizing: border-box;
		color: #473B33;
		border-right: 1px solid rgba(255,255,255,0.5);

		transition: background-color .5s, color .5s, font-size .5s;
	}
	.topnav ul li:last-child > a{ border-right: none; }
	.topnav ul li a:hover,	  /* 滑鼠移入次選單上層按鈕 變色*/
	.topnav ul li:hover > a{ /* 滑鼠移入次選單上層按鈕 保持變色*/
		background-color: rgba(255,255,255,0.5);
		color: #F34949;
	}
	/*次選單*/
	.topnav ul li > .subnav{
		width: 150%;
		position: absolute;
		z-index: 9999;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		flex-direction:column;
		flex-wrap:nowrap;
		text-align: center;
		display: none;
	}
	/*.topnav ul li > .subnav:before{
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 10px 10px 10px;
		border-color: transparent transparent white transparent;
		
		position: absolute;
		bottom: 100%;
		margin-top: -20px;
		left: 50%;
		transform: translateX(-50%);
	}*/
	.topnav ul li > .subnav li{
		width: 100%;
		padding: 0;
	}
	.topnav ul li > .subnav li a{
		margin: 0;
		border-radius: 0;
		border: 2px solid rgba(255,255,255,0);
		/*background-color: #667CB9;*/
		background-color: #F34949;
		color: white;
		border-bottom: 1px solid white;
		transition: background-color .5s, color .5s;
	}
	.topnav ul li > .subnav li:last-child a{
		border-bottom: none;
	}
	.topnav ul li > .subnav li:hover > a,
	.topnav ul li > .subnav li a:hover{
		border: 2px solid #F34949;
		background-color: white;
		color: #F34949;
	}
	/* 表尾 UNDER.asp */
	footer{
		width: 100%;
		min-width: 1200px;

		padding: 1em;
		box-sizing: border-box;

		position: relative;/*for 綠視界*/
	}

	.underwrap{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.underwrap1{
		margin-right: 1em;
	}
	.underwrap_p{
		padding: 0.25em 0;
		line-height: 1.5em;
	}
	.underspanwrap{
		margin-right: 1em;
	}

	/*.underbox{
		width: 350px;
	}
	.underbox ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.underbox ul li{
		width: 30%;
		border: 1px solid white;
		text-align: center;
		margin: 0.5em auto;
	}
	.underbox ul li a{
		display: block;
		width: 100%;
		color: white;
		padding: 0.25em 0;
		box-sizing: border-box;
	}
	.underbox ul li:hover{
		background-color: white;
	}
	.underbox ul li:hover a{
		color: black;
	}*/
	
	.underbox{
		width: 100%;
		padding-bottom: 0.5em;
	}
	.underbox ul{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.underbox ul li{
		padding: 0.5em 0;
	}
	.underbox ul li a{
		display: block;
		padding: 0.25em 2em;
		box-sizing: border-box;
		color: white;
		border-right: 1px solid white;
	}
	.underbox ul li:last-child a{
		border-right: none;
	}
	.underbox ul li a:hover{
	}

	.underbox2{
		width: 350px;
	}
	.under_ul{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 1em 0;
	}
	.under_ul_title{
		min-width: 80px;
		padding: 0 0.5em;
		margin-right: 0.5em;
		box-sizing: border-box;
		text-align: right;
		border-right: 1px solid lightgray;
	}
	.under_ul li{
		width: 100%;
		padding: 0.25em;
		box-sizing: border-box;
		font-size: 0.9em;
	}
	.under_ul li a{		
		color: white;
	}
	.under_ul_imgicons,.under_ul_icons{
		margin-right: 0.5em;

		transition: margin-right 1s;
	}
	.under_ul li:hover .under_ul_imgicons,
	.under_ul li:hover .under_ul_icons{
		margin-right: 1.5em;
	}
	.under_ul_imgicons{
		height: 1em;
	}
	/*綠視界*/
	.fectechs{
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 0.5em 2em;
		box-sizing: border-box;
	}
}