@charset "UTF-8";
/*藍色#0d90a0*/
/*黃色#ffa724*/


body{color: #333; font-size: 14px; font-family: "Helvetica Neue", Helvetica, verdana, "Microsoft JhengHei", "Apple LiGothic Medium", DFKai-SB, sans-serif; }

@media screen and (max-device-width: 480px) { 
body { text-size-adjust: 100%; } 
}

body,h2,ul,h3{padding:0;margin:0;}
ul{list-style:none outside none;}



/*---------------------------基本設定---------------------------*/

/*整各版面 */ 
main { padding-bottom: 1.5625rem; overflow: hidden;  }
main.noTopBox { padding-top: 2.08333rem;   }

/*編輯內容區 */ 
.wrap { width: 90%; margin-right: auto; margin-left: auto; }


@media (min-width: 768px) { 
body, html { min-width: 1000px; overflow-x: hidden; font-size: 60px; }
main { padding-top: 124px; padding-bottom: 120px; }
main.noSubNav { padding-top: 84px; }
main.noTopBox { padding-top: 180px; }
.wrap { width: 980px; } 
}


/*首頁banner底 */ 
@media (max-width: 768px) {
* { -webkit-tap-highlight-color: transparent; }
#content { padding-top: 0; }
 }


/* 分隔線统一样式 */
hr{  border: 0; background-color:#004661; height: 1.5px; }

/*內頁抬頭*/
.wrap h2{ 
font-size: 0.525rem; font-weight: 400; color:#515151; line-height: 1.0;padding-bottom: 0.20833rem; margin-bottom: 0.83333rem; position: relative; display: block; border-bottom: 5px solid #004661; padding-left:20px;}
.head_gray{	font-size: 0.525rem; float:left;	padding-top:15px; 	padding-right:15px;	}		
.head_blue{	font-size: 0.3rem; font-family: "微軟正黑體"; color: #004661;	font-weight: bold; line-height: 40px; padding-top:8px;}

/*表格*/
table { width: 100%;  }
table th, table td { padding: 0.20833rem; font-size: 0.3125rem; }
table th { font-weight: normal; vertical-align: middle; width: 30%; border-right: none; }
table td a { text-decoration: underline; }
table td a:hover { color: #0188c8; }

@media (min-width: 768px) { 
table { margin-top: 10px; margin-bottom: 10px; }
table th, table td { line-height: 26px; padding: 17px 19px; font-size: 14px; } 
}


/* 字體統一顏色 */
.text_blue{	font-family: "微軟正黑體"; color: #004661;font-weight: bold; }
.text_red{ font-family: "微軟正黑體";	color: #78351e;	font-weight: bold; }
.text_gray{	font-family: "微軟正黑體"; color: #595959; font-weight:bold; }


/*其他*/
header, nav, figure, article, section, footer, aside, hgroup { display: block; }
li { list-style-type: none; }
a { color: #333; text-decoration: none; }
p { font-size: 0.375rem; color: #555; line-height: 1.5; }
img { vertical-align: bottom; border: none; }
table { border-collapse: collapse; }
address { font-style: normal; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input { appearance: none; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */ }
iframe { border: none; }
.clearfix:after { content: ''; display: block; clear: both; }
.fR { float: right !important; }
.fL { float: left !important; }
.txtCenter { text-align: center !important; }
.hideTxt { display: none; }
.hr01 { margin-top: 30px; margin-bottom: 30px; border: 0; height: 1px; background-color: #d4d4d4; clear:   }

/*---------------------------漢堡選單---------------------------*/

/*基本設定*/
.hideTxt, #Header h1 a, #LocalNav_bottom h1 a, #PicBox .sliderArea a, .interviewList .topBox, .companyPage.history article span { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: transparent; }
.subMenu, .subMenu a, #PicBox .sliderControl a { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; }
#PicBox .sliderControl, #PicBox .sliderMask, #PicBox .sliderArea { position: absolute; }
.navigation .wrap, .navigation .wrap > a { text-align: center; }
.recruitPage_inner .txtBox, .companyPage .societyBox .picBox { margin-left: auto; margin-right: auto; }
#Header, #LocalNav_bottom, #Header h1 a, #LocalNav_bottom h1 a { box-sizing: border-box; }
.dayContent .topBox .txt h2 { font-family: "\5FAE\8F6F\96C5\9ED1", Verdana, arial; }
input[type="submit"], input[type="button"], .btn_normal { font-family: 'Noto Sans TC', sans-serif; }
.localNav li a, .recruitPage h3, .pageBox .pageDiv li a, .pageBox .pageMenu li.pageNum, .recruitPage_inner .txtBox span, .recruitPage_inner h4 i, .recruitPage_inner .detailBox h5 span, .companyPage.executive section h5, .companyPage.executive section h4, .companyPage.history h4, .servicePage section .txtBox h3 span, .accessPage h2 { font-family: futura, "Helvetica Neue", Helvetica, arial, sans-serif; }
#videosection .video-container:before, .location > a:after, .subMenu a:after, .subNav a:after, .newsPage .backTo:before, .recruitPage_inner .detailBox h5:after, .recruitPage_inner .infoBox .hashBox:before, .dayContent .videoBox:before { font-family: FontAwesome; }
.location, .subMenu, #LocalNav_bottom, .recruitPage .classEntryBox, #PicBox .sliderControl, #PicBox .sliderArea, .pageBox .pageMenu, .recruitPage_inner .categoryNav, .recruitPage_inner .txtBox, .recruitPage_inner .infoBox .hashBox { font-size: 0; }
#accessCanvas { position: relative; }
#accessCanvas:before { box-sizing: border-box; position: absolute; left: 50%; top: 50%; margin-left: -17px; margin-top: -17px; transform: rotate(0deg); content: ''; display: block; width: 34px; height: 34px; background-repeat: no-repeat; background-position: center; background-size: 100% auto; background-image: url("../images/common/logo.png"); animation-name: loading; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: 6; animation-fill-mode: forwards; transition: all .3s; }
@font-face { font-family: futura; src: url("../font/futura.eot"); src: url("../font/futura.eot?#iefix") format("embedded-opentype"), url("../font/futura.woff") format("woff"), url("../font/futura.ttf") format("truetype"), url("../font/futura.svg#futuralightregular") format("svg"); font-weight: normal; font-style: normal; }
* { padding: 0; margin: 0; box-sizing: border-box; }

input[type="submit"], input[type="button"], .btn_normal { text-align: center; font-size: 0.375rem; background-color: #fcfdfb; min-width: 2.5rem; height: 1.04167rem; line-height: 1.04167rem; padding: 0 0.20833rem; cursor: pointer; border-radius: 50px; color: white; border: none; }
input[type="submit"]:hover, input[type="button"]:hover, .btn_normal:hover { filter: brightness(1.05); }
input[type="submit"]:focus, input[type="button"]:focus, .btn_normal:focus { outline: none; }

@media (min-width: 768px) { 
input[type="submit"], input[type="button"], .btn_normal { min-width: 110px; height: 50px; line-height: 50px; font-size: 15px; }
 }
 
/*縮小後漢堡選單抬頭 */ 
#Header .wrap { position: relative; width: 100%; }
#Header, #LocalNav_bottom { position: relative; width: 100%; z-index: 999999; user-select: none; }
#Header h1, #LocalNav_bottom h1 { width: 100%; height: 48px; background-color: #1f1f1f;  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); position: relative; z-index: 2; background-size: 100% 45px; background-repeat: no-repeat; background-position: center top; background-image: url("../images/common/bg_header_01.gif"); }
#Header h1 a, #LocalNav_bottom h1 a { position: absolute; width: 150px; top: 3px; height: 45px; left: 15px; background-position: center; background-repeat: no-repeat; background-size: 100% auto; background-image: url("../images/common/logo.png"); }
.mainNav { z-index: 50; background-color: rgba(0, 0, 0, 0.5); width: 100%; }
.location { width: 100%; height: 50px; position: absolute; top: 0; left: 0; background-color: #004661; border-bottom: 1px #077a8e solid; }
.location > a { box-sizing: border-box; color:#008cce; display: inline-block; vertical-align: top; width: 33.33333%; line-height: 50px; text-align: left; clear: both; padding: 0 12px; font-size: 14px; }
.location > a:after { content: '\f105'; display: inline-block; width: 10px; height: 50px; float: right; vertical-align: top; }
.subMenu, .subNav { background-color: #302a2c; width: 100%; }
.subMenu a, .subNav a { box-sizing: border-box; display: block; padding: 17px 13px 17px 24px; color: #f2eded; border-bottom: 1px #868283 solid; text-align: left; font-size: 14px; }
.subMenu a:after, .subNav a:after { content: '\f105'; display: inline-block; width: 10px; height: 15px; float: right; vertical-align: middle; }
.subNav { height: 1px; background-color: #6e6a6b; overflow: hidden; opacity: 0; transition: height 1s; }
.subNav a { border-bottom-color: #454243; }
.subNav.show { opacity: 1; height: auto; }
.subMenu { width: 100%; padding-top: 50px; }
.subMenu a { width: 100%; color: #fff; font-size: 14px; padding-top: 0.41667rem; padding-bottom: 0.41667rem; }
.subMenu a.current { color: #fdd000; }
.hamburger { display: block; width: 48px; height: 45px; cursor: pointer; position: absolute; right: 0; top: 0; user-select: none; z-index: 99999999; transition: all .3s; }


/*縮小後漢堡選單顏色*/
.hamburger i, .hamburger i:before, .hamburger i:after { position: absolute; width: 18px; height: 2px; transition: all .5s; background-color: #ffffff; }
.hamburger i:before, .hamburger i:after { content: ''; }
.hamburger i { top: 50%; right: 15px; }
.hamburger i:before { top: -7px; }
.hamburger i:after { top: 7px; }
.hamburger.on i { background-image: none; background-color: transparent; box-shadow: none; right: 0.3125rem; }
.hamburger.on i:before { transform: rotate(45deg) translateY(10px); width: 25px; }
.hamburger.on i:after { transform: rotate(-45deg) translateY(-10px); width: 25px; }

@media (min-width: 765px) { 
.hamburger { display: none; }
 }
 
.navigation { opacity: 0; transition: all .8s; background-color: rgba(255, 255, 255, 0.3); width: 100%; position: relative; z-index: 1; overflow: hidden; margin-top: -100%; margin-bottom: 48px; }
.navigation .wrap { padding-top: 0 !important; position: relative; padding-top: 2.29167rem; width: 100%; }
.navigation .wrap > a { font-size: 0.40625rem; display: block; color: white; padding-top: 0.41667rem; padding-bottom: 0.41667rem; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
.navigation .wrap > a:hover { -webkit-filter: brightness(1.2); filter: brightness(1.2); }
.navigation.show { opacity: 1; margin-top: 0%; margin-bottom: 0; height: 100%; }
.navigation.hide { height: 1px; }
  
@media (min-width: 765px) {
.hamburger { display: none; }
#Header .wrap { position: relative; width: 980px; }
#Header { position: fixed; width: 100%; height: 85px; background-size: 100% 85px; background-repeat: no-repeat; background-position: center top; background-image: url("../images/common/bg_header_01.gif"); background-color: #1f1f1f; }
#Header h1 { position: absolute; left: 0; top: 0; width: 100%; height: 84px; background-color: transparent; background-image: none; z-index: 0; box-shadow: none; }
#Header h1 a { width: 300px; height: 49px; top: 50%; left: 0; transform: translate(0, -50%); background-position: 10px center; background-size: auto 100%; background-image: url("../images/common/logo.png"); z-index: 99999999; }
#Header:after { content: ''; display: block; width: 100%; height: 84px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); position: absolute; top: 0; z-index: 50; pointer-events: none; }
.mainNav { z-index: 50; background-color: transparent; }
.location { height: auto; position: absolute; top: 8px; left: inherit; right: 0; background-color: transparent; border-bottom: none; width: auto; }
.location > a { font-size: 12px; line-height: 1; width: auto; height: 20px; color: #ccc; position: relative; padding: 0 7px; }
.location > a:after { content: ''; display: inline-block; line-height: 1; vertical-align: top; background-color: #ccc; width: 1px; height: 12px; position: absolute; right: 0; }
.location > a:last-child { padding-right: 0; }
.location > a:last-child:after { display: none; }

/*國際版文字顏色*/
.location > a.current { color: #fff; }
.subMenu, .subNav { background-color: transparent; }
.subMenu a, .subNav a { display: block; padding: 17px 13px 17px 24px; color: #f2eded; border-bottom: none; font-size: 14px; }
.subNav { height: 40px; background-color: #004661; width: 150vw; position: absolute; left: 50%; top: 44px; transform: translate(-50%, 100%); z-index: -1; border-bottom: 1px solid #e8e7e7; text-align: center; transition: all .6s; pointer-events: none; }
.subNav a { display: inline-block; vertical-align: top; position: relative; width: auto; border-bottom-color: transparent; color: #fefefe; font-size: 14px; padding: 10px 20px; }
.subNav a:after { content: ''; display: inline-block; width: 1px; height: 15px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-color: #d5d2d2; vertical-align: middle; content: ''; }
.subNav a.localActive, .subNav a:hover { color: #008cce; }
.subNav.show, .subNav.current { opacity: 1; height: auto; pointer-events: auto; }
.subNav.hide { height: 1px !important; opacity: 0; }
.navigation { opacity: 1; background-color: transparent; width: 100%; position: absolute; top: 0; margin-top: 0%; margin-bottom: 0; overflow: visible; }
.navigation .wrap { width: 980px; margin-left: auto; margin-right: auto; }
.navigation .wrap > a { font-size: 0.40625rem; display: block; color: white; padding-top: 0.41667rem; padding-bottom: 0.41667rem; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
.navigation .wrap .subMenu { box-sizing: border-box; width: 100%; height: 1px; position: absolute; right: 0; top: 0; z-index: 0; opacity: 1; text-align: right; padding-top: 33px; }
  
/*選單文字*/
.navigation .wrap .subMenu > a { text-align: right; padding-right: 0; color: #fff; font-size: 16px; display: inline-block; vertical-align: top; width: auto; position: relative; padding: 0; margin-left: 30px; }
  
/*over選單文字下底色*/
.navigation .wrap .subMenu > a:before { content: ''; width: 0; height: 2px; background-color: #82d8e3; position: absolute; bottom: -8px; left: 0; transition: all .3s; }
/*over選單文字*/
.navigation .wrap .subMenu > a.current, .navigation .wrap .subMenu > a:hover { color: #fff; }
.navigation .wrap .subMenu > a.current:before, .navigation .wrap .subMenu > a:hover:before { width: 100%; }
.navigation .wrap .subMenu > a:after { display: none; }
 }  
  
/*---------------------------首頁---------------------------*/



/* 首頁banner大輪播 */
#PicBox { position: relative; width: 100%; height: 3.64583rem; background-color: #f7f7f7; }
#PicBox .sliderControl { text-align: center; z-index: 88; width: 100%; left: 0; bottom: 5px; }
#PicBox .sliderControl a { -moz-transition: -moz-transform, 0.3s; -o-transition: -o-transform, 0.3s; -webkit-transition: -webkit-transform, 0.3s; transition: transform, 0.3s; border-radius: 50px; width: 0.20833rem; height: 0.20833rem; background-color: rgba(0, 0, 0, 0.2); margin-left: 5px; margin-right: 5px; cursor: pointer; }
#PicBox .sliderControl a.current { background-color: #004661; }
#PicBox .sliderMask { width: 100%; height: 100%; overflow: hidden; transition: all .3s; }
#PicBox .next, #PicBox .prev { display: none; }
#PicBox .sliderArea { min-width: 200%; height: 100%; overflow: hidden; left: 0; top: 0; transition: all .3s; }
#PicBox .sliderArea a { transition: all 1s; display: block; width: 100%; height: 100%; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: auto 100%; position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; }
#PicBox .sliderArea a.show { opacity: 1; pointer-events: auto; }

@media (min-width: 765px) { #PicBox { display: block; left: 0; top: 0; width: 100%; height: 342px; z-index: 9998; margin-bottom: 40px; }
#PicBox .sliderControl { width: 100%; height: 40px; line-height: 40px; bottom: -40px; border-bottom: 1px solid rgba(128, 128, 128, 0.3); }
#PicBox .sliderControl a { width: 10px; height: 10px; margin-right: 10px; }
#PicBox .sliderControl a:hover { transform: scale(1.2); }
#PicBox .sliderMask { height: 342px; }
#PicBox .sliderMask:hover .next { right: 10px; }
#PicBox .sliderMask:hover .prev { left: 10px; }
#PicBox .next, #PicBox .prev { display: block; position: absolute; top: 40%; transition: translateY(-50%); z-index: 88888; transition: position .3s; background-image: url("../images/index/btn_index_01.png"); background-repeat: no-repeat; cursor: pointer; }
#PicBox .next { width: 50px; height: 50px; right: -50px; background-position: right top; }
#PicBox .next:hover { background-position: right bottom; }
#PicBox .prev { width: 50px; height: 50px; left: -50px; background-position: left top; }
#PicBox .prev:hover { background-position: left bottom; }
#PicBox .sliderArea { height: 342px; }
#PicBox .sliderArea a { height: 342px;background-size: auto 100%; } 
}



/* 首頁最新消息*/
.homePage { padding-bottom: 0;  }
.homePage #PicBox { margin-bottom: 0; padding-top: 0; padding-bottom: 0; background-color: white;  }

#news { position: relative; background-color: #f7f5f6; border-bottom: 1px solid #e8e7e7; overflow: hidden; }
#news .wrap { width: 100%; }

#loader { display: block; margin: 0 auto; animation: loading 1s linear infinite; }

#news01 { font-size: 0; text-align: center; min-height: 400px; margin-bottom: 20px; padding-left: 0.20833rem; padding-right: 0.20833rem; }
#news01 article { display: inline-block; vertical-align: top; width: 49%; margin-right: 2%; margin-bottom: 2%; }
#news01 article:nth-of-type(2n) { margin-right: 0; }
#news01 article:hover img { transform: scale(1.1); }
#news01 article a { display: block; color: #666; width: 100%; font-size: 14px; text-align: center; border-bottom: 1px solid #e8e7e7; background-color: white; padding-top: 0.20833rem; }
#news01 article time { font-size: 13px; float: left; height: 20px; line-height: 20px; width: 40%; text-align: left; margin-left: 0.20833rem; }
#news01 article p { margin-bottom: 0; }
#news01 article p:first-of-type { float: right; line-height: 1; font-size: 12px; text-align: center; width: 35%; height: 20px; line-height: 18px; border: 1px solid #004661; margin-right: 0.20833rem; }
#news01 article p:first-of-type.release { color: #fff; border-color: #8dc1d6; background-color:#0074a3}
#news01 article p:first-of-type.notice { color: #8ccb48; border-color: #8ccb48; }
#news01 article p:first-of-type.blog { color: #189bd2; border-color: #189bd2; }
#news01 article p:first-of-type.recruit { color: #e58e29; border-color: #e58e29; }
#news01 article h3 { text-align: left; clear: both; color: #333; font-size: 0.34375rem; height: 1.5625rem; line-height: 1.3; overflow: hidden; margin-bottom: 0.20833rem; padding-top: 0.20833rem; padding-left: 0.20833rem; padding-right: 0.20833rem; font-weight: normal; }
#news01 article p:last-of-type { display: block; overflow: hidden; width: 100%; height: 1.97917rem; line-height: 1.97917rem; vertical-align: top; position: relative; }
#news01 article p:last-of-type img { position: absolute; left: 50%; top: 0; height: remwidth(120px); transform: translateX(-50%); width: 100%; transition: all 0.5s; vertical-align: top; }

@media (min-width: 768px) { 
.home .subNav { display: none !important; }
.homePage { padding-top: 84px; }
.homePage h2 { font-size: 38px; margin-bottom: 30px; font-weight: normal; }
.homePage section { padding-top: 60px; padding-bottom: 80px; }
.homePage section p { margin-bottom: 10px; }
.homePage #PicBox { margin-bottom: 0; height: 420px; }
.homePage #PicBox .sliderControl { border-bottom: none; bottom: 10px; }
.homePage #PicBox .sliderMask { height: 420px; }
.homePage #PicBox .sliderArea { height: 420px; }
.homePage #PicBox .sliderArea a { height: 420px; }
#news .wrap { width: 980px; }
#news01 { min-height: 400px; margin-bottom: 20px; padding-left: 0; padding-right: 0; }
#news01 article { width: 32%; margin-right: 2%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); }
#news01 article:nth-of-type(2n) { margin-right: 2%; }
#news01 article:nth-of-type(3n) { margin-right: 0; }
#news01 article a { font-size: 14px; padding: 20px 0 0; }
#news01 article a:hover p:last-of-type img { transform: translateX(-50%) scale(1.1); }
#news01 article time { font-size: 12px; margin-left: 20px; letter-spacing: 1px; }
#news01 article p:first-of-type { font-size: 12px; width: 30%; margin-right: 20px; }
#news01 article h3 { font-size: 16px; height: 80px; margin-bottom: 5px; padding: 20px 20px 0; font-weight: normal; line-height: 1.8; }
#news article p:last-of-type { height: 130px; line-height: 130px; }
#news article p:last-of-type img { width: 100%; height: auto; } }


/* 神嵐的遊戲產品底框&內文*/ 
.homePage section { overflow: hidden; padding: 0.83333rem 0;  }
.homePage section p { margin-bottom: 0.41667rem; }

/*首頁的神嵐的遊戲產品跟神嵐精神的內文p*/
@media (min-width: 768px) {
p { font-size: 16px; } 
}

/* 神嵐的遊戲產品*/ 
#service { position: relative; border-bottom: 1px solid #e8e7e7; z-index: 0; height: 18.14583rem; }

#service .wrap:before { content: ''; display: block; width: 8.33333rem; height: 9.25rem; margin: 0 auto; position: absolute; right: 0.52083rem; bottom: 0; background-size: 100% auto; background-repeat: no-repeat; background-image: url("../images/index/bg_phone.jpg"); z-index: -1;   }

#service .wrap > img { width: 7.29167rem; position: absolute; right: 1.35417rem; transition: top ease-out; }

#service .wrap > img:first-of-type { top: 6.77083rem; transition-duration: .75s; }

#service .wrap > img:first-of-type.scrolled { top: 8.54167rem; }

#service .wrap > img:last-of-type { top: 5.20833rem; transition-duration: .8s; }

#service .wrap > img:last-of-type.scrolled { top: 4.08333rem; }

/* 首頁-神嵐的遊戲產品-暸解更多*/ 
.morenews { display: block; color: #fff; line-height: 28px; font-size: 13px; text-indent: 9px; padding-top: 1px; text-align: center; border: 1px solid #8ec1d6; width: 100px; margin: 0px auto; background-color:#0074a3;}
.morenews:hover { text-decoration: underline; }


@media (min-width: 768px) { 
#service { text-align: left;  height: 720px;  }
#service h2 { text-align: left; }
#service .wrap { position: relative; height: 100%; padding-top: 30px; overflow: visible; }  
#service .wrap:before { width: 500px;  height: 500px; right: 0; bottom: -30px; }   
#service .wrap > img { width: 428px; right: 50px;  }
#service .wrap > img:first-of-type { top: 50px; }
#service .wrap > img:first-of-type.scrolled { top: 130px; }
#service .wrap > img:last-of-type { top: -40px; }
#service .wrap > img:last-of-type.scrolled { top: 30px; }
#service .morenews { display: inline-block; }  
}
  
/*---------------------------經營團隊---------------------------*/

.Team_main { letter-spacing:1px; line-height: 26px; color: #333333; margin-left:17%;  width:100%;  }	
.Team_main .Team_name{ width:25%;font-size:15px; letter-spacing:1px; line-height: 26px; float:left;}
.Team_main .Team_box{font-size:15px; letter-spacing:1px; line-height: 26px;  float:left;   }


@media screen and (max-width: 1200px) {
.Team_main { font-size: 0.26rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:5%;  width:70%; } 
.Team_main .Team_name{ width:35%;font-size: 0.26rem; letter-spacing:1px; line-height: 26px;  float:left;}
.Team_main .Team_box{font-size: 0.26rem; letter-spacing:1px; line-height: 26px;  float:left;  }
}

@media screen and (max-width: 850px) {
.Team_main { font-size: 0.22rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:5%;  width:90%;} 
.Team_main .Team_name{ width:45%;font-size: 0.22rem;  line-height: 26px;  float:left; }
.Team_main .Team_box{font-size: 0.22rem; letter-spacing:1px; line-height: 26px;  float:left;  }
		
}

@media screen and (max-width: 500px) {
.Team_main { font-size: 0.31rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:-4%; width:120%; } 
.Team_main .Team_name{ width:33%;font-size: 0.31rem;   line-height: 26px;  float:left;  }
.Team_main .Team_box{font-size: 0.31rem; line-height: 26px;  float:left;   }
}

/*---------------------------公司簡介---------------------------*/

/* 底圖 */
.intro_bg{ background-repeat: no-repeat; background-image: url("../images/company/pic01_2.png");margin: 0 auto; background-size: 40% auto; }
.intro_bg p{ font-size:16px; letter-spacing:1px; line-height: 26px; color: #333333; margin-left:28%;margin-bottom:10%}

@media screen and (max-width: 1200px) {
.intro_bg{ background-repeat: no-repeat; background-image: url("../images/company/pic01_2.png");margin: 0 auto; background-size: 40% auto; }
.intro_bg p{ font-size: 0.3rem; letter-spacing:1px; line-height: 26px; color: #333333; margin-left:25%; margin-bottom:10%;}

}

@media screen and (max-width: 850px) {
.intro_bg{ background-repeat: no-repeat; background-image: url("../images/company/pic01_2.png");margin: 0 auto; background-size: 40% auto; }
.intro_bg p{ font-size: 0.33rem; letter-spacing:1px; line-height: 26px; color: #333333; margin-left:25%; margin-bottom:10%}	

}

@media screen and (max-width: 500px) {
.intro_bg{ background-repeat: no-repeat; background-image: url("../images/company/pic01_2.png");margin: 0 auto; background-size: 60% auto; }
.intro_bg p{ font-size: 0.33rem; letter-spacing:1px; line-height: 26px; color: #333333; margin-left:25%;margin-bottom:10%}

 }

/*---------------------------獲獎事蹟---------------------------*/
      
.serviceaward section { font-size: 0; padding-bottom: 1.04167rem; margin-bottom: 1.04167rem; }
	
.serviceaward section .txtBox { width: 100%;display: inline-block; 	vertical-align: top; }
	
.serviceaward section .txtBox h5 { 	font-size:24px;	padding-left:20px; 	}
	
.serviceaward section .txtBox p { font-size: 0.375rem; 	margin-bottom: 0.3125rem; text-align: justify; padding-top:20px; padding-left:70px; }
	
.serviceaward section .txtBox .btnBox { margin-top: 0.41667rem; margin-bottom: 0.41667rem; 	}
	
.serviceaward section .imgBox { width: 100%; display: inline-block;	vertical-align: top; margin-top: 0.41667rem; }


@media (min-width: 768px) {
	
.serviceaward section { padding-bottom: 50px; margin-bottom: 50px; 	}	
.serviceaward section .txtBox { width: 43%; margin-right: 7%; display: inline-block; vertical-align: top; } 	
.serviceaward section .txtBox p { font-size: 14px;	margin-bottom: 20px; line-height: 1.8; }	
.serviceaward section .txtBox .btnBox { font-size: 0; margin-top: 20px; margin-bottom: 40px; }	
.serviceaward section .imgBox {	width: 50%; margin-top: 0;
	}
}
 

	

/*---------------------------公司沿革---------------------------*/

.hist_main { font-size:16px; letter-spacing:1px; line-height: 26px; color: #333333; margin-left:16%; margin-bottom:6%;   }	

@media screen and (max-width: 1200px) {
.hist_main { font-size: 0.26rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:2%;margin-bottom:1%; } 
}

@media screen and (max-width: 850px) {
.hist_main{ font-size: 0.13rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:2%;margin-bottom:1%; }  		
}

@media screen and (max-width: 500px) {
.hist_main { font-size: 0.33rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:2%;margin-bottom:1%;  } 	
 }


/* timeline */
.timeline{background:url("../images/history/line4.png") repeat-y 50px 0;overflow:hidden;position:relative;width:60%;margin:20px auto 0 auto;}

.timeline-date{overflow:hidden;position:relative;}

.timeline-date h2 span{color:#0175a4;display:inline-block;font-size:30px;margin:0 0 0 90px;}

.timeline-date ul li{background:url("../images/history/icon7.png") no-repeat 42px 0px;zoom:1;  }

.timeline-date ul li h3{ font-size:20px;color:#004660;display:block; float:left; margin-top:15px; margin-right:20px; margin-left:90px;}	


.timeline-date ul li dl{margin-top:5px;  float:left; width:60%;}

.timeline-date ul li dl img{display:block; margin-top:15px;}

.timeline-date ul li dl span{display:block; font-size:16px; color:#404040; margin:10px 0; }

hr { border: 0;height: 1px;background: #abc3cd; clear:both; margin-top:50px; } 

@media screen and (max-width: 1200px) { 
.timeline-date ul li dl{margin-top:5px;margin-left:90px;}
.timeline-date ul li dl img{display:block;width: 100%;}
}

@media screen and (max-width: 850px) { 
.timeline-date ul li dl{margin-top:5px;margin-left:90px;}
.timeline-date ul li dl img{display:block;width: 100%;}
}

/*---------------------------未來展望---------------------------*/

.Futu_main { font-size:16px; letter-spacing:1px; line-height: 26px; color: #333333; margin-left:16%; margin-bottom:15%;  }	
.Futu_main p { margin-bottom:5%;}


@media screen and (max-width: 1200px) {
.Futu_main { font-size: 0.26rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:2%; margin-bottom:15%; } 
.Futu_main p { margin-bottom:5%;}

}

@media screen and (max-width: 850px) {
.Futu_main { font-size: 0.13rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:7%; margin-bottom:15%;}  		
.Futu_main p { margin-bottom:10%;}
}

@media screen and (max-width: 500px) {
.Futu_main { font-size: 0.33rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:7%; margin-bottom:15%; } 	
.Futu_main p { margin-bottom:10%;}
 }

/*---------------------------最新消息---------------------------*/


.news_list{	width:100%;	margin-bottom:30px;}
.news_list h3{ clear:both;}		
.news_date{	float:left;	padding-top:3px; font-size:16px; font-family: "微軟正黑體"; color: #004661; font-weight: bold;}		
.news_game{	margin-left:20px;}
.newsall_main { font-size:15px; letter-spacing:1px; line-height: 26px; color: #333333; margin-left:16%; margin-bottom:15%;  }
.newsall_main a { text-decoration: underline; }
.newsall_main a:hover { color: #0188c8; }	

@media screen and (max-width: 1200px) { 
.newsall_main { font-size: 0.26rem;	font-family: "微軟正黑體"; letter-spacing:1px; line-height: 20px; color: #333333; margin-left:7%;  margin-bottom:15%; }
}

@media screen and (max-width: 850px) {
.newsall_main { font-size: 0.13rem; font-family: "微軟正黑體"; letter-spacing:1px; line-height: 20px; color: #333333; margin-left:7%; margin-bottom:15%; }
} 
  
@media screen and (max-width: 500px) {
.newsall_main { font-size: 0.33rem;	font-family: "微軟正黑體"; letter-spacing:1px; line-height: 20px; color: #333333; margin-left:7%; margin-bottom:15%; }	
} 
 
/*---------------------------遊戲產品首頁---------------------------*/

/* 遊戲產品詳細介紹……→滑鼠顏色 */	
.game_bu { height: auto; width: auto; padding-bottom:50px;}
	
.game_bu > a { 	font-size: 13.5px; line-height: 1; width: auto; color: #004661;	font-weight: bold;}
	
.game_bu  > a:after { display: inline-block; line-height: 1; vertical-align: top; width: 1px; height: 12px;	position: absolute; right: 0; }
	
.game_bu  > a:last-child { 	padding-right: 0; }
	
.game_bu  > a:last-child:after {display: none; }

	
.servicePage section .indBox {  width: 100%;display: inline-block; vertical-align: top;  }
.servicePage section .indBox p { font-size: 0.375rem;  text-align: justify; }
.servicePage section .indBox h3 {font-size:17px; color:#004661;}
	
@media (min-width: 768px) {	
.servicePage section .indBox {  width: 43%; margin-right: 7%; display: inline-block; vertical-align: top;}
.servicePage section .indBox p { font-size: 14px; line-height: 1.8; }
.servicePage section .indBox h3 { font-size: 17px; margin-bottom: 10px; color:#004661;}

}

/*---------------------------遊戲產品內頁---------------------------*/

.servicePage section { 	font-size: 0; padding-bottom: 1.04167rem; margin-bottom: 1.04167rem; margin-left:2%;}
	
.servicePage section:first-of-type { padding-top: 1.04167rem; }
	
.servicePage section:last-of-type { margin-bottom: 0; }
	
.servicePage section .txtBox { width: 100%;	display: inline-block; vertical-align: top; }

.servicePage section .txtBox h3 { font-size: 0.5625rem; margin-bottom: 0.3125rem; line-height: 1.2; font-weight: 400; color:#78351e; font-weight:bold;}
	
.servicePage section .txtBox h4 { font-size: 0.40625rem; margin-bottom: 0.20833rem;	}

.servicePage section .txtBox p { font-size: 0.375rem; margin-bottom: 0.3125rem; text-align: justify; }
	
.servicePage section .txtBox .btnBox { 	margin-top: 0.41667rem;	margin-bottom: 0.41667rem;	}
	
.servicePage section .imgBox { 	width: 100%; display: inline-block; vertical-align: top; margin-top: 0.41667rem; }
	
.servicePage section .imgBox li { margin-bottom: 0.3125rem;  }
	 
.servicePage section .imgBox li:first-of-type { padding-left: 0; }
	
.servicePage section .imgBox li:last-of-type { padding-right: 0; }
	 
.servicePage section .imgBox li img { width: 100%; }
	 
.servicePage section table { width: 100%; border: 1px solid #cccccc; }
	 
.servicePage section th, .servicePage section td { 	padding: 5px 5px; }
	
.servicePage section th { text-align: center; 	}
	
.servicePage .btn_style01 { display: inline-block; font-size: 0.375rem; line-height: 0.83333rem; text-align: center; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 2px 0 #fbfbfb; background-image: linear-gradient(to bottom, #f6f6f6 0%, #f3f3f3 100%);}
	
.servicePage .btn_style01:hover { filter: none !important; background-color: #eee; background-image: none; }
	
.servicePage .btnBox { 	font-size: 0; margin-bottom: 10px; 	}
	
.servicePage .btnBox > a {	display: inline-block; 	vertical-align: middle; padding: 0; margin-left: 0.10417rem; margin-right: 0.10417rem; }
	
.servicePage .btnBox > a:first-of-type { margin-left: 0; }
	
.servicePage .btnBox > a:last-of-type { margin-right: 0; }
	
.servicePage .btnBox > a > img { width: 100%; height: auto; }
	
.servicePage .btnBox > a:hover { filter: brightness(1.1); }
	
.servicePage .btnBox > a { display: inline-block;vertical-align: middle; padding: 0; margin-left: 0.05rem;	margin-right: 0.05rem; }
	
.servicePage .btn_style01 { height: 44px; line-height: 44px; font-size:13px; }

@media (min-width: 768px) {	
.servicePage section {	padding-bottom: 50px;margin-bottom: 50px; }  
.servicePage section:first-of-type { padding-top: 50px; }
.servicePage section .txtBox { 	width: 43%; margin-right: 7%; display: inline-block; vertical-align: top;}
.servicePage section .txtBox h3 { font-size: 24px; margin-bottom: 30px; }
.servicePage section .txtBox h4 { font-size: 14px; margin-bottom: 20px; }
.servicePage section .txtBox p { font-size: 14px; margin-bottom: 20px;line-height: 1.8; }
.servicePage section .txtBox .btnBox { font-size: 0; margin-top: 20px; margin-bottom: 40px; }
.servicePage section .txtBox .btnBox > a { margin-left: 6px; margin-right: 6px; }
.servicePage section .imgBox { 	width: 50%; margin-top: 0; 	}
.servicePage section .imgBox li { margin-bottom: 17px; 	}
.servicePage .btn_style01 { height: 44px; line-height: 44px; font-size: 14px; }
}


/* 遊戲產品詳細介紹……圖片輪播 */	
.coverflow{	width:100%;	height:420px;position: relative;}

.coverflow>a{ display: block; position: absolute; top:0; left:0; opacity: 0; filter: alpha(opacity=0);
/*當圖片數量增加，影片長度需更改，變為5s*圖片數量*/
-webkit-animation: silder 15s linear infinite; animation: silder 15s linear infinite;}
	
.coverflow>a>img{ max-width: 100%;}

/*動畫關鍵影格*/
@-webkit-keyframes silder {
    3% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    27% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
}
@keyframes silder {
    3% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    27% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
}

/*每個圖片各延遲5秒*/
.coverflow>a:nth-child(3) {
	-webkit-animation-delay: 10s;
            animation-delay: 10s;            
}

.coverflow>a:nth-child(2) {
	-webkit-animation-delay: 5s;
            animation-delay: 5s;
}

.coverflow>a:nth-child(1) {
	-webkit-animation-delay: 0s;
            animation-delay: 0s;    
}
/*滑入時停止播放*/
.coverflow:hover>a{
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

/* icon */
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;  }
.row > div[class*="col-"]:first-child { padding-left: 0; }
.row > div[class*="col-"]:last-child { padding-right: 0; }

/* IOS&安桌 icon */
.col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }

/* 官方FB & 前導網站 按鈕 */
.col-2 { /*-ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; */ }

/* 影片 */
.container { width: 100%; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
.container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

.video{	width:480px;height:281px;}

@media screen and (max-width: 480px) {
.video{	width:330px;height:281px;}
}

/*---------------------------人才招募---------------------------*/
.recr_img{ margin-top:-2.7%;} 
.recr_main { font-size:16px; letter-spacing:1px; line-height: 26px; color: #333333; margin-left:16%; margin-bottom:15%;  }	
.recr_main .recr_icon { margin-top:30px; margin-bottom:15%; }

@media screen and (max-width: 1200px) { 
.recr_main { font-size: 0.26rem;	font-family: "微軟正黑體"; letter-spacing:1px; line-height: 20px; color: #333333; margin-left:7%;  margin-bottom:15%; }
.recr_main .recr_icon { margin-top:30px; margin-bottom:15%;  min-width: 70%;} 
}

@media screen and (max-width: 850px) {
.recr_main { font-size: 0.13rem; font-family: "微軟正黑體"; letter-spacing:1px; line-height: 20px; color: #333333; margin-left:7%; margin-bottom:15%; }
.recr_main .recr_icon { margin-top:30px; margin-bottom:15%;  min-width: 70%;}
 } 
  
@media screen and (max-width: 500px) {
.recr_main { font-size: 0.33rem;	font-family: "微軟正黑體"; letter-spacing:1px; line-height: 20px; color: #333333; margin-left:7%; margin-bottom:15%; }	
.recr_main .recr_icon { margin-top:30px; margin-bottom:15%;  min-width: 70%;}
 } 
 
 
/*---------------------------連絡我們---------------------------*/

.Conn_main { font-size:16px; letter-spacing:1px; line-height: 26px; color: #333333; margin-left:13%; margin-bottom:15%;  }	
.Conn_main li { margin:4% 0%; }
.Conn_main span{ margin-left:4%;}
.Conn_main span a { text-decoration: underline; }
.Conn_main span a:hover { color: #0188c8; }

@media screen and (max-width: 1200px) {
.Conn_main { font-size: 0.26rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:2%; margin-bottom:15%; } 
.Conn_main li { margin:8% 0%; }
}

@media screen and (max-width: 850px) {
.Conn_main { font-size: 0.13rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:2%; margin-bottom:15%;}  		
.Conn_main li { margin:8% 0%; }
}

@media screen and (max-width: 500px) {
.Conn_main { font-size: 0.33rem; font-family: "微軟正黑體"; line-height: 20px; color: #333333; margin-left:2%; margin-bottom:15%; } 	
.Conn_main li { margin:8% 0%; }
 }


/*---------------------------FOOTER---------------------------*/

#Footer { padding-bottom: 1.04167rem; background-color: #312a2c; position: relative; }
#Footer #GoTop { display: block; color: #fff; background-image: url("../images/common/btn_footer_01.png"); background-repeat: no-repeat; background-size: 100% auto; padding-top: 8px; width: 70px; height: 40px; transition: all 0.3s; position: absolute; right: 0.20833rem; top: 0; font-size: 10px; text-align: center; transform: translateY(-80%); }
#Footer #GoTop:hover { transform: translateY(-90%); }
#Footer .FBPageBox { padding-top: 1.04167rem; text-align: center; min-height: 300px; width: 100%; margin-left: auto; margin-right: auto; overflow: hidden; }
#Footer ul { text-align: center; }
#Footer ul:after { content: ''; display: block; clear: both; }
#Footer ul a, #Footer ul li { color: #6e6a6b; font-size: 12px; }
#Footer ul > li { display: inline-block; vertical-align: top; margin-right: 0.41667rem; }
#Footer #fb-root { display: none; }
#Footer .fb_iframe_widget, #Footer .fb_iframe_widget span, #Footer .fb_iframe_widget span iframe[style] { width: 100% !important; }
#Footer .socialMediaBox { width: 100%; text-align: center; padding-top: 10px; font-size: 0; }
#Footer .socialMediaBox > span { display: inline-block; vertical-align: middle; text-align: center; height: 22px; }
#Footer .socialMediaBox .fbBtn { width: 90px; }
#Footer .socialMediaBox .twitterBtn { width: 60px; }

@media (min-width: 768px) { 
#Footer { padding-bottom: 50px; }
#Footer #GoTop { width: 85px; height: 50px; right: 30px; }
#Footer .FBPageBox { width: 500px; padding-top: 80px; padding-bottom: 80px; margin-left: auto; margin-right: auto; }
#Footer .box { width: 980px; margin-left: auto; margin-right: auto; text-align: center; font-size: 0; }
#Footer ul { width: 75%; display: inline-block; vertical-align: top; text-align: left; font-size: 0; }
#Footer ul li { height: 22px; line-height: 22px; }
#Footer ul li:nth-child(2) a { position: relative; }
#Footer ul li:nth-child(2) a:after { content: ''; position: absolute; top: 1px; right: -14px; width: 1px; height: 10px; background-color: #6e6a6b; margin-left: 10px; }
#Footer ul li:nth-child(3) a { position: relative; }
#Footer ul li:nth-child(3) a:after { content: ''; position: absolute; top: 1px; right: -14px; width: 1px; height: 10px; background-color: #6e6a6b; margin-left: 10px;}
#Footer ul li:nth-child(4) a { position: relative; }
#Footer ul li:nth-child(4) a:after { content: ''; position: absolute; top: 1px; right: -14px; width: 1px; height: 10px; background-color: #6e6a6b; margin-left: 10px;}
#Footer .socialMediaBox { padding-top: 0; width: 20%; display: inline-block; vertical-align: top; text-align: right; } 
}