@charset "utf-8";

/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* KV */
/* ======================================================================== */


#EiA110
{
	font-family: 微軟正黑體, Microsoft JhengHei,Arial, "新細明體", sans-serif;
	max-width:1200px;
}
.row-maxwidth-95pct {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}

#EiA110 div
{
    box-sizing: border-box;
}


#EiA110 .kv
{
	position:relative;
	width:100%;
	height:400px;
	background:url(css-img/kv_bg.jpg) center center no-repeat;
	background-size:cover;
}

#EiA110 .kv .text
{
	padding:10px 0 0 60px;
}

#EiA110 .kv .text h2
{
	color:#FFF;
	font-size:60px;
	font-weight:bold;
	margin-bottom:5px;
	padding:0;
	border:0;
}

#EiA110 .kv .text h3
{
	color:#FFF;
	font-size:30px;
	font-weight:bold;
	margin-bottom:30px;
}

#EiA110 .kv .text h3 img
{
	vertical-align:bottom;
	width:33px;
}

#EiA110 .kv .text h4
{
	color:#FFF;
	font-size:21px;
	margin-bottom:10px;
}

#EiA110 .kv .text ul
{
	margin-left:18px;
}

#EiA110 .kv .text ul li
{
	list-style-type:disc !important;
	color:#FFF;
	font-size:14px;
	font-weight:bold;
	line-height:20px;
}


a { 
    color: #4d4d4d;
  text-decoration: none;
  outline: none;
  font-weight: normal
}

a:hover, a:active, a:focus {
  /*color: #ffa200;*/
  color: #4d4d4d;
  text-decoration: underline;
}
a:focus {
  outline-color: transparent;
  outline-style: none
}

#EiA110 .kv .text .btn span
{
    font-size: 10px;
}


#EiA110 .kv .text .btn a 
{
	display:inline-block;
	padding:10px 8px;
    width: 180px;
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	border-radius:5px;
    margin: 5px 0;
	background-color:#914793;
    text-decoration: none;
    text-align: center;
 
}


#EiA110 .kv .pic
{
	position:absolute;
	right:40px;
	bottom:40px;
}

#EiA110 .kv .pic img
{
	width:480px;
}

@media screen and (max-width:1199px)
{
	#EiA110 .kv .pic img
	{
		width:390px;
	}
}

@media screen and (max-width:991px)
{
	#EiA110 .kv .text
	{
		padding:20px 0 0 30px;
	}

	#EiA110 .kv .text h2
	{
		font-size:50px;
	}

	#EiA110 .kv .pic
	{
		right: 5px;
		bottom: 5px;
	}

	#EiA110 .kv .pic img
	{
		width:370px;
	}
}

@media screen and (max-width:767px)
{
	#EiA110 .kv
	{
		height:unset;
	}

	#EiA110 .kv .pic
	{
		position:static;
		text-align:center;
		padding:30px 0;
	}

	#EiA110 .kv .pic img
	{
		width:80%;
	}
}

@media screen and (max-width:479px)
{
	#EiA110 .kv .text h2
	{
		font-size:40px;
	}

	#EiA110 .kv .text h3
	{
		font-size:26px;
	}
}

/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* apps */
/* ======================================================================== */


#EiA110 .apps
{
	width:100%;
	background-color:#0a417a;
}

#EiA110 .apps .frame
{
	display:flex;
	align-items:center;
	max-width:1100px;
	margin:0 auto;
	padding:40px 0;
}

#EiA110 .apps .frame:nth-child(1)
{
	border-bottom:1px solid rgba(255,255,255,0.1);
}

#EiA110 .apps .frame > div
{
	display:inline-block;
	flex:1;
}

#EiA110 .apps .frame .pic
{
	text-align:center;
}

#EiA110 .apps .frame .pic img
{
	width:100%;
	height:auto;
}

#EiA110 .apps .frame .pic iframe
{
	width:510px;
	height:calc( 510px * 9 / 16 );
}

#EiA110 .apps .frame .text
{
	text-align:left;
}

#EiA110 .apps .frame .text h3
{
	font-size:22px;
	font-weight:bold;
	color:#FFF;
	margin-bottom:30px;
	padding:0 70px 0 40px;
}

#EiA110 .apps .frame .text p
{
	font-size:15px;
	font-weight:bold;
	color:#FFF;
	padding:0 70px 0 40px;
	margin-bottom:15px;
}

#EiA110 .apps .frame .text a
{
	display:inline-block;
	padding:15px 40px;
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	border-radius:5px;
	background-color:#914793;
}

#EiA110 .apps .frame .text a:hover
{
	text-decoration:none;
	background-color:#762c78;
}

#EiA110 .apps .frame.f2
{
	 direction: rtl;
}

#EiA110 .apps .frame.f2 .text h3,
#EiA110 .apps .frame.f2 .text p
{
	padding-left:0;
	padding-right:10px;
}

@media screen and (max-width:1199px)
{
	#EiA110 .apps .frame .pic img
	{
		width:90%;
		height:auto;
	}
	#EiA110 .apps .frame.f2 .text h3,
	#EiA110 .apps .frame.f2 .text p
	{
		padding-left:5%;
	}
	#EiA110 .apps .frame .text a
	{
		margin-left:5%;
	}
	#EiA110 .apps .frame .pic iframe
	{
		width:400px;
		height:calc( 400px * 9 / 16 );
	}
}

@media screen and (max-width:991px)
{
	#EiA110 .apps .frame .pic iframe
	{
		width:300px;
		height:calc( 300px * 9 / 16 );
	}
}

@media screen and (max-width:767px)
{
	#EiA110 .apps .frame
	{
		flex-wrap:wrap;
	}

	#EiA110 .apps .frame > div
	{
		flex:none;
		width:100%;
	}

	#EiA110 .apps .frame .pic
	{
		margin-bottom:30px;
	}

	#EiA110 .apps .frame .pic img
	{
		width:90%;
	}

	#EiA110 .apps .frame .pic iframe
	{
		width:90%;
		height:calc( 95vw * 0.9 * 9 / 16 );
	}

	#EiA110 .apps .frame .text h3,
	#EiA110 .apps .frame .text p
	{
		padding:0 5%;
	}
}

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

}

/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* deviceOn */
/* ======================================================================== */

#EiA110 .deviceOn
{
	max-width:1100px;
	margin:0 auto;
	padding:60px 0 50px 0;
}

#EiA110 .deviceOn .title
{
	text-align:center;
	margin-bottom:35px;
}

#EiA110 .deviceOn .title img
{
	width:340px;
	height:auto;
	margin-bottom:15px;
}

#EiA110 .deviceOn .title h3
{
	font-size:24px;
	font-weight:bold;
	color:#004280;
}

#EiA110 .deviceOn .cards
{
	margin-bottom:50px;
	display:flex;
	justify-content:space-between;
}

#EiA110 .deviceOn .cards .box
{
	width:350px;
	height:390px;
	border:1px solid #e4e4e4;
	border-radius:5px;
	overflow:hidden;
}

#EiA110 .deviceOn .cards .box:nth-child(1) .pic
{
	background:url(css-img/pic1.jpg) center center;
	background-size:100%;
}

#EiA110 .deviceOn .cards .box:nth-child(2) .pic
{
	background:url(css-img/pic2.jpg) center center;
	background-size:100%;
}

#EiA110 .deviceOn .cards .box:nth-child(3) .pic
{
	background:url(css-img/pic3.jpg) center center;
	background-size:100%;
}

#EiA110 .deviceOn .cards .box .pic
{
	width:100%;
	height:190px;
	transition: all .3s ease-in;
}

#EiA110 .deviceOn .cards .box .pic:hover
{
	background-size:120%;
	transition: all .3s ease-out;
}

#EiA110 .deviceOn .cards .box .text
{
	padding:20px 25px;
}

#EiA110 .deviceOn .cards .box .text h4
{
	font-size:18px;
	font-weight:bold;
	color:#212529;
}

#EiA110 .deviceOn .cards .box .text p
{
	font-size:15px;
	font-weight:bold;
	line-height:24px;
	color:#4d4d4d;
}

@media screen and (max-width:1199px)
{
	#EiA110 .deviceOn .cards .box
	{
		width:32%;
		height:380px;
	}

	#EiA110 .deviceOn .cards .box .pic
	{
		height:calc( 95vw * 0.32 * 19 / 35 );
	}
}

@media screen and (max-width:991px)
{
	#EiA110 .deviceOn .cards .box
	{
		height:400px;
	}
}

@media screen and (max-width:767px)
{
	#EiA110 .deviceOn .cards
	{
		flex-wrap:wrap;
		margin-bottom:0;
	}

	#EiA110 .deviceOn .cards .box
	{
		width:100%;
		height:unset;
		margin-bottom:30px;
	}

	#EiA110 .deviceOn .cards .box .pic
	{
		height:calc( 95vw * 19 / 35 );
	}
}

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

}

/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* spec */
/* ======================================================================== */

#EiA110 .specFrame
{
	max-width:1100px;
	margin:0 auto;
}

#EiA110 .specFrame .boxTitle
{
	font-size:21px;
	line-height:40px;
	color:#212529;
	height:40px;
	background-color:#ecf2f7;
	padding-left:30px;
}

#EiA110 .specFrame .twoPic
{
	display:flex;
	align-items:center;
	margin:30px 0 45px 0;
}

#EiA110 .specFrame .twoPic .pic
{
	flex:1;
	text-align:center;
}

#EiA110 .specFrame .twoPic .pic:nth-child(1) img
{
	width:90%;
	max-width:420px;
}

#EiA110 .specFrame .twoPic .pic:nth-child(2) img
{
	width:90%;
	max-width:380px;
}

#EiA110 .specFrame .thisTable
{
	margin:60px 0 115px 0;
}

#EiA110 .specFrame .thisTable table
{
	margin:0 auto;
	border-collapse:collapse;
}

#EiA110 .specFrame .thisTable table tr:nth-child(odd)
{
	background-color:#F7F8F8;
}

#EiA110 .specFrame .thisTable table th
{
	font-size:15px;
	font-weight:bold;
	color:#FFF;
	text-align:center;
	line-height:37px;
	background-color:#004280;
	border:1px solid #C9CACA;
}

#EiA110 .specFrame .thisTable table th:nth-child(1)
{
	width:150px;
}

#EiA110 .specFrame .thisTable table th:nth-child(2)
{
	width:430px;
}

#EiA110 .specFrame .thisTable table th:nth-child(3)
{
	width:80px;
}

#EiA110 .specFrame .thisTable table td
{
	font-size:14px;
	color:#595757;
	line-height:37px;
	padding:0 3px;
	border:1px solid #C9CACA;
}


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

}

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

}

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

	#EiA110 .specFrame .twoPic
	{
		flex-wrap:wrap;
	}

	#EiA110 .specFrame .twoPic .pic
	{
		flex:none;
		width:100%;
		margin-top:30px;
	}

	#EiA110 .specFrame .thisTable
	{
		margin:60px 0;
	}
}

    #EiA110 .specFrame .btnCTA
    {   
        
    height: 300px;
    background-color: #ecf2f7;

}
    #EiA110 .specFrame .btnCTA .btnTTL
{
    font-size: 30px;
    font-weight: bold;
    line-height: 90px;
    text-align: center;
}

    #EiA110 .specFrame .btnCTA
{
    text-align: center;
}

#EiA110 .specFrame .btnCTA span
{
    font-size: 14px;
}


    #EiA110 .specFrame .btnCTA a
{
    display: inline-block;
    width: 300px;
    height: 50px;
    padding: 30px 0;
    font-size: 30px;
    color: #FFF;
    text-decoration: none;
    background-color: #914793;
    margin: 0 35px;
    vertical-align: top;
    text-align: center
}


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

}

/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* vedio */
/* ======================================================================== */

#EiA110 .vedioFrame
{
	height:700px;
	background:url(css-img/vedioBg.jpg) center center no-repeat;
	background-size:cover;
}

#EiA110 .vedioFrame h3,
#EiA110 .vedioFrame p
{
	display:block;
	width:810px;
	margin:0 auto;
}

#EiA110 .vedioFrame h3
{
	font-size:36px;
	font-weight:bold;
	color:#FFF;
	text-align:center;
	padding:50px 0 25px 0;
}

#EiA110 .vedioFrame p
{
	font-size:15px;
	line-height:24px;
	font-weight:bold;
	color:#FFF;
	text-align:center;
}

#EiA110 .vedioFrame iframe
{
	display:block;
	width:810px;
	height:calc( 810px * 9 / 16 );
	margin:40px auto;
}


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

}

@media screen and (max-width:991px)
{
	#EiA110 .vedioFrame
	{
		height:unset;
		padding-bottom:10px;
	}

	#EiA110 .vedioFrame h3,
	#EiA110 .vedioFrame p
	{
		width:650px;
	}

	#EiA110 .vedioFrame iframe
	{
		display:block;
		width:650px;
		height:calc( 650px * 9 / 16 );
	}
}

@media screen and (max-width:767px)
{
	#EiA110 .vedioFrame h3,
	#EiA110 .vedioFrame p
	{
		width:90%;
	}

	#EiA110 .vedioFrame iframe
	{
		display:block;
		width:90%;
		height:calc( 95vw * 0.9 * 9 / 16 );
	}
}

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

}

/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* ======================================================================== */
/* order */
/* ======================================================================== */

#EiA110 .orderFrame
{
	max-width:1100px;
	margin:0 auto;
	padding:50px 0 60px 0;
}

#EiA110 .orderFrame .boxTitle
{
	font-size:21px;
	line-height:40px;
	color:#212529;
	height:40px;
	background-color:#ecf2f7;
	padding-left:30px;
}

#EiA110 .orderFrame .boxs
{
	display:flex;
	align-items:start;
	justify-content:space-between;
	margin-top:30px;
}

#EiA110 .orderFrame .boxs a
{
	position:relative;
	display:block;
	width:250px;
	height:250px;
	border-radius:5px;
}

#EiA110 .orderFrame .boxs a:hover
{
	text-decoration:none;
}

#EiA110 .orderFrame .boxs a:nth-child(1)
{
	background:#ecf2f7 url(css-img/icon1.png) center 20px no-repeat;
}

#EiA110 .orderFrame .boxs a:nth-child(2)
{
	background:#ecf2f7 url(css-img/icon2.png) center 20px no-repeat;
}

#EiA110 .orderFrame .boxs a:nth-child(3)
{
	background:#ecf2f7 url(css-img/icon3.png) center 20px no-repeat;
}

#EiA110 .orderFrame .boxs a:nth-child(4)
{
	background:#ecf2f7 url(css-img/icon4.png) center 20px no-repeat;
}

#EiA110 .orderFrame .boxs a .text
{
	position:absolute;
	top:150px;
	width:100%;
	text-align:center;
}

#EiA110 .orderFrame .boxs a .text h4
{
	font-size:24px;
	font-weight:bold;
	color:#212529;
}

#EiA110 .orderFrame .boxs a .text p
{
	font-size:18px;
	font-weight:bold;
	color:#4d4d4d;
}


@media screen and (max-width:1199px)
{
	#EiA110 .orderFrame .boxs a
	{
		width:23%;
	}
}

@media screen and (max-width:991px)
{
	#EiA110 .orderFrame .boxs a
	{
		width:24%;
	}

	#EiA110 .orderFrame .boxs a .text p
	{
		font-size:16px;
	}
}

@media screen and (max-width:767px)
{
	#EiA110 .orderFrame .boxs
	{
		flex-wrap:wrap;
	}

	#EiA110 .orderFrame .boxs a
	{
		width:48%;
		margin-bottom:20px;
	}
}

@media screen and (max-width:479px)
{
	#EiA110 .orderFrame .boxs a
	{
		height:230px;
		background-size:80px !important;
	}

	#EiA110 .orderFrame .boxs a:nth-child(4)
	{
		background-size:125px !important;
	}

	#EiA110 .orderFrame .boxs a .text
	{
		top:120px;
	}
}