@import url("../font/css/font-awesome.min.css");
body{background:#fff;}
#menu-frame.responsive{display:none;}
#container-head-animation{width:980px; margin:0 auto; position:relative; top:0;}
#container-head-ap{height:auto; display:block;}
#da-slider.da-slider.da-page{top:-80px;}
#da-slider.da-slider.da-page .da-arrows span{top:33px;}
#da-slider.da-slider.da-page .da-slide-title{top:49px;}
#da-slider.da-slider.da-page .da-slide-title-2{left:944px; top:90px;}
#da-slider.da-slider.da-page .da-slide-title-3{top:81px;}
#da-slider.da-slider.da-page .da-slide-title-4{top:91px; left:918px;}
#da-slider.da-slider.da-page .da-slide-title-5{top:74px;}
#da-slider.da-slider.da-page .da-slide-title-6{top:89px;}

@media (max-width:767px) {
	img{max-width:100%;}


	/* model */
	.popupbox{width:80%; float:none; margin:0 !important; transform:translate(-50%,0); right:0; border-radius:3px;}
	.popupbox #member-frome-login{border-radius:3px 3px 0 0;}
	.popupbox #member-frome-form{width:80%;}
	.popupbox #member-frome-form input{width:80%; border-radius:3px; margin:0 auto; float:none;}


	/* banner */
	#head-container-frome{position:relative; height:auto; display:block; float:none; z-index:102;}
	#container-head-logo{z-index:103; margin:0; transform:translate(-50%, 0); height:59px; width:35%;}
	#container-head-logo .head-logo{height:100%; width:100%; background:url("../images/logo.png") no-repeat center; background-size:auto 100%;}
	#container-head-ap{width:100%; height:59px; position:fixed; top:0; left:0;  background:#fff; z-index:100; box-shadow:0 0 10px 1px rgba(0,0,0,.5);}
	#container-head-bg{display:none;}

	#container-head-animation{width:100%;}
	#da-arrows-frame{width:100%; margin:0; left:0;}
	.da-slide{width:100%; margin-left:0;}
	#da-slider.da-slider.da-page{top:0;}
	#da-slider.da-slider.da-page .da-slide-title{top:15px;}
	#da-slider.da-slider.da-page .da-slide-title-2{top:35px;}
	#da-slider.da-slider.da-page .da-slide-title-3{top:50px;}
	#da-slider.da-slider.da-page .da-slide-title-4{top:18px;}
	#da-slider.da-slider.da-page .da-slide-title-5{top:48px;}
	#da-slider.da-slider.da-page .da-slide-title-6{top:60px;}
	
	.da-dots{z-index:9999;}

	#container-head-animation{height:320px;}
	.da-slide-title, .da-slide-title-2, .da-slide-title-3, .da-slide-title-4, .da-slide-title-5, .da-slide-title-6{width:100%; left:0 !important; margin-left:0;}
	.da-slide-title{top:-26px;}
	.da-slide .da-img img{opacity:.6; max-width:none; width:auto; display:block;}
	.da-slide .da-img samp.da-img-product-6-02 img{display:none}
	.da-slide .da-img samp.da-img-product-6 img{margin:-16% 0 0 147%;}
	.da-slide a{display:block; margin:0; padding:0; position:relative; left:-10%;}
	.da-slide h2{text-align:center; z-index:3001;}
	.da-link{display:none;}
	.da-slide-da-bg{margin-left:0;}
	.da-arrows span{opacity:1;}
	#head-bu-frame{display:none;}
	.pa-da-bg-01, .pa-da-bg-02, .pa-da-bg-03, .pa-da-bg-04, .pa-da-bg-05, .pa-da-bg-06{background-position:left top;}
	.da-slide-toleft .da-img img{display:block;}
	#container-head-animation iframe{width:100%;}

	#container-product li h3 img{max-width:none; left:50%; transform:translate(-50%,0)}


	#head-frame-member{right:0; width:100%; top:17px;}
	.Menu-button::before, .Language-button::before, .popup.login::before{display:inline-block; font: normal normal normal 14px/1 FontAwesome; text-rendering:auto; -webkit-font-smoothing:antialiased;}
	.Menu-button{float:left; margin-left:10px;}
	.Menu-button::before{content:"\f039"; font-size:27px; color:#1556ac;}
	.Language-button{float:right; margin-right:10px;}
	.Language-button::before{content:"\f0ac"; font-size:30px; line-height:.9; color:#1556ac;}
	#head-frame-member .popup.login{background:none; font-size:0; text-indent:0; float:right; margin-right:10px; color:#1556ac;}
	#head-frame-member .popup.login::before{content:"\f2bd"; font-size:27px;}
	#head-frame-google{display:none; position:fixed; width:100%; top:9%; right:0; z-index:200; background:#fff; padding:12px 0; box-shadow:0 8px 10px -4px rgba(0,0,0,.5);}
	
	#menu-frame{display:none;}
	#menu-frame.responsive{display:none; position:fixed; width:50%; height:100%; background:#0c4da2; top:0; left:0; z-index:9999;}
	#menu-frame.responsive li{float:none; padding:0 10px; width:auto; height:auto;}
	#menu-frame.responsive li ul{display:none;}
	#menu-frame.responsive li a{background:none; display:block; width:auto; float:none; color:#fff; border-bottom:1px solid #3d71b5;}
	#menu-frame.responsive li li a{line-height:1.6; padding:9px 0;}
	#menu-frame.responsive li a:hover{background:none}
	#menu-frame.responsive li > ul{background:#083978;}
	#menu-frame.responsive li > ul a{font-size:.99em;}
	#menu-frame.responsive li > ul li{padding:0;}
	#menu-frame.responsive li > ul ul{background:#062753;}
	#menu-frame.responsive li > ul ul a{font-size:.98em;}
	#container-product, #container-news, #in-frome-right{width:auto; float:none; display:block; padding:0 10px;}
	/*#menu-frame.responsive .closebutton::before{content:"\f00d"; font-size:48px; color:#fff;}*/
	#menu-frame.responsive .closebutton{background:#0c4da2; height:40px; right:-40px; position:absolute; top:0; width:40px; z-index:9999;}
	#menu-frame.responsive .closebutton::before, 	#menu-frame.responsive .closebutton::after{background:#fff; content:""; height:2px; left:4px; position:absolute; top:20px; width:28px;}
	#menu-frame.responsive .closebutton::before{transform:rotate(45deg);}
	#menu-frame.responsive .closebutton::after{transform:rotate(-45deg);}


	.in-title{text-align:center; float:none;}
	.in-title a{display:inline; float:none; text-align:center; padding:5px 0 5px 28px; background-position:2px -8px;}
	.in-title-more{background:none;}
	/* head-container-frome */
	#content-container-frome{float:none; display:block; width:auto; padding:0 10px; margin:10px 0;}

	#content-container-frome-ap{width:auto; margin:0; padding:0; display:block;}
	#content-container-frome-ap #container-product{height:auto; margin:0;}

	#container-product-ti{float:none; border:0 none;}
	#container-product ul#product_cat_list{border:0 none; padding:0; display:block; margin:10px 0;}
	#container-product ul#product_cat_list li{float:none; width:100%; border-radius:0; margin:0 auto;}
	#container-product ul#product_cat_list li a{float:none; font-size:1.2em;}
	#container-product ul#product_cat_list li h3{width:20%;}
	#container-product-quickmenu{width:auto; position:relative; left:0; bottom:0; border:0 none;}
	#container-product-quickmenu a{width:46%; position:relative; display:block;}
	#container-product-quickmenu a::before{content:""; position:absolute; font-size:16px; line-height:4; color:#fff; left:4em;}
	#container-product-quickmenu a.quickmenu-line, .quickmenu-fb{position:relative; border-radius:3px;}
	#container-product-quickmenu a.quickmenu-line{background:#00c300 url("../images/link_icon.png") no-repeat 11px 16px;}
	#container-product-quickmenu a.quickmenu-fb{background:#3b5998 url("../images/link_icon.png") no-repeat 11px -200px; float:right;}
	#container-product-quickmenu a.quickmenu-line:hover{background-position:11px 16px;}
	#container-product-quickmenu a.quickmenu-fb:hover{background-position:11px -200px;}
	#container-product-quickmenu a.quickmenu-line::before{content:"LINE"}
	#container-product-quickmenu a.quickmenu-fb::before{content:"Facebook"}

	/* === #in-frome-left ===*/
	#container-news{height:auto;}
	#container-youtube-frome iframe{width:calc(100% - 2px); height:calc(100% - 2px); border:1px solid #0c4da2;}
	#container-news ul#tabs{display:none;}
	#container-news #content{width:100%; height:auto; border:0 none;}
	#container-news .container-news-list{float:none; display:block !important; margin:10px 0;}
	#container-news .container-news-list::before{content:""; height:auto; width:100%; line-height:40px; background:#0c4da2; display:block; color:#fff; font-size:1.4em;}
	.container-news-list samp{display:none;}
	.container-news-list li{float:none;}
	.container-news-list li a{float:none; font-size:1em;}
	.container-news-list li a strong{font-size:1em;}
	#container-news #tab1.container-news-list::before{content:"最新消息";}
	#container-news #tab2.container-news-list::before{content:"服務與支援";}
	#container-news #tab3.container-news-list::before{content:"解決方案";}
	/* === container-news ===*/
	#in-frome-right-ap{border:0 none; float:none;}
	#in-frome-right-ap .caroufredsel_wrapper{float:none !important; margin:5px auto !important; width:100% !important; height:auto !important; position:relative!important;}
	#in-frome-right-ad{width:100% !important; height:auto !important; position:relative !important;}
	#in-frome-right-ad a{float:none;}
	#in-frome-right-ad a img{width:100%; height:auto; float:none;}
	/* footer */
	#container-foot-ap{width:auto; background:#1556ac; display:block;}
	#container-foot-ap .foot-logo{float:none; margin:0 auto;}
	#container-foot-ap strong{color:#fff; text-align:center; display:block; margin-top:5px; padding:0 10px;} 
	.foot-hits{position:relative; top:0;}
	#foot-link{display:none;}

	/* content.jsp */
	#content-frome-left{display:none;}
	#content-frome-right{width:100%; display:block; float:none;}
	#content-right-location, #content-right-detail{float:none; width:100%; margin:0;}
	#content-right-title{width:auto; margin:0; float:none;}
	#frame-about-plotpoints{display:none;}
	.content-about-title{width:auto; float:none; margin:10px;}
	.content-about-detail{float:none; width:auto; margin:0;}
	.content-about-detail table{width:100%;}
	.content-about-detail img{width:100%; height:auto;}
	#frame-news-detail strong img{max-width:none; width:100%;}
	#frame-search{width:100%; float:none; margin-left:0;}
	#frame-search-head, #frame-search-ap{width:100%; float:none;}
	#frame-search-ti{display:none; width:auto;}
	#frame-search-download{width:100%; float:none; display:block;}
	#frame-search-download li{width:100%; float:none;}
	#frame-search-download .download-ti{width:100%;}
	#frame-search-data{width:100%; float:none;}
	#frame-movile-detail iframe{width:100%; height:auto;}
	#frame-news-data .frome-100{width:100%;}
	#frame-news-detail table, #frame-news-detail tr, #frame-news-detail td{width:100%; border-spacing:0; border-collapse:separate; text-align:justify; word-break:break-all;}
	#frame-news-detail img{width:100%; height:auto;}
	#frame-news-data li{width:auto; float:none;}
	#frame-news-data li.frome-100 strong{display:none;}
	#frame-news-data li.frome-100 a{display:block; text-align:center;}
	.grid{width:auto;}
	.grid.effect-2#grid{height:auto !important; }
	.grid li{padding:0; width:100%; float:none; position:relative !important; top:auto !important;}
	.grid li a h2{float:none; height:auto; width:100%; background:#fff;}
	.grid li a h2 img{max-height:none; max-width:100%; width:auto; border:0 none;}
	.grid li a h3{clear:both; float:none; height:auto; padding:0; text-align:center; width:auto;}
	.grid li a h4{float:none; top:auto; position:relative; width:auto;}
	.grid li a h5{bottom:0; float:none; position:relative; right:0; text-align:center; width:auto;}
	.content-detail-error{margin:10px; padding:10px; width:auto;}
	#frame-product-back{float:none; margin-left:0; width:auto;}
	#frame-product-back a{float:none;}
	.content-sitemap{width:auto; margin:25px auto 0;}
	.content-sitemap-frome{width:100%; margin:0; float:none;}
	.content-sitemap-frome .ti-01, .content-sitemap-frome .ti-02, .content-sitemap-frome .ti-03, .content-sitemap-frome .ti-04, .content-sitemap-frome .ti-05, .content-sitemap-frome .ti-06{background-position:center 4px;}
	.content-sitemap-frome .ti-01{background-color:#6c9bd3;}
	.content-sitemap-frome .ti-02{background-color:#62b6e2;}
	.content-sitemap-frome .ti-03{background-color:#a3c44b;}
	.content-sitemap-frome .ti-04{background-color:#a48b5e;}
	.content-sitemap-frome .ti-05{background-color:#d9ba6f;}
	.content-sitemap-frome .ti-06{background-color:#eca99e;}

	#content-member-join-from{float:none; margin:0; width:auto;}
	#content-member-join{float:none; margin:0; width:auto;}
	#content-member-join h3{text-align:center;}
	#content-member-join .star{display:inline-block; float:none; line-height:1; position:initial;}
	#content-member-join li strong{line-height:1; width:auto; font-size:20px;}
	#content-member-join li{height:auto; float:none; width:auto !important; text-align:center;}
	#content-member-join .input{width:90% !important; padding:2%; display:block; text-align:left; margin:0 auto;}
	#content-member-bu{width:100%; float:none; margin:15px auto;}

	#content-member-login{float:none; height:auto; margin-left:0; width:100%;}
	#content-member-login-ap{position:initial; margin-left:0; width:auto;}
	#content-member-form li{float:none;}
	#content-member-form strong{float:none; text-align:center; width:100%; }
	#content-member-form input{float:none; margin:5px auto 0; width:90% !important; }

	#frame-pages{display:table; height:auto; margin:25px auto; width:auto;}
	#frame-pages-ap{float:left;}
	#frame-pages a, #frame-pages a.in{float:left;}
	.frame-pages-l, .frame-pages-lb, .frame-pages-r, .frame-pages-rb{position:initial;}

	.container-news-list td{display:block}
}

/* iphone 4 */
@media (max-width:320px) {
	#container-product-quickmenu a.quickmenu-line::before, #container-product-quickmenu a.quickmenu-fb::before{content:"";}
	#container-product-quickmenu a.quickmenu-line, #container-product-quickmenu a.quickmenu-fb{background-position-x:center;}
	#container-product-quickmenu a.quickmenu-line{background-position-y:15px;}
}