@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
html{font-family:"微軟正黑體", Arial, sans-serif;/*自動找手機裡的黑體字*/
	-webkit-text-size-adjust:none;/*修正iphone旋轉後文字不要放大*/}
img{border:0;}
li{list-style: none;}
.clearfix{clear:both;content:".";font-size:0;height:0;overflow:hidden}
.topLink{height:28px; background-color:#2e2e2e; color:#fff; z-index:11; width:100%;}
.topLinkfixed{position: fixed !important; top: 0; z-index: 999 !important; background-color:#2e2e2e;}
.video-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/*手機版menu*/
.m_nav {display:none; width: 100%; background-color: #fff; height: 50px; position: relative; z-index: 999; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);}
.m_nav .logo{position:absolute; left:10px; top:13px;}
.button_toggle {display: block; cursor: pointer; z-index: 100; transition: opacity 0.25s ease 0s; position: absolute; top: 13px; right: 3%; height: 27px; width: 32px;}
.button_toggle:hover {opacity: .7;}
.button_toggle.active .top {background: #3e3e3e; -webkit-transform: translateY(9px) translateX(0) rotate(45deg); transform: translateY(9px) translateX(0) rotate(45deg);}
.button_toggle.active .middle {opacity: 0; background: #3e3e3e;}
.button_toggle.active .bottom {background: #3e3e3e;-webkit-transform: translateY(-9px) translateX(0) rotate(-45deg); transform: translateY(-9px) translateX(0) rotate(-45deg);}
.button_toggle span {background: #3e3e3e; border: none; height: 4px; width: 100%; position: absolute; top: 0; left: 0; cursor: pointer; transition: all .35s ease; -webkit-transition: all .35s ease;}
.button_toggle span:nth-of-type(2) {top: 9px;}
.button_toggle span:nth-of-type(3) {top: 18px;}
.openmain{display:none; visibility: visible; overflow: hidden; position:fixed; z-index:9999; top:78px; width:100%; background-color:rgba(250, 202, 87, .95); border-bottom:2px solid rgba(255, 255, 255, .5);}
.openmain.open {display:block; opacity: .7; visibility: visible;}
.openmain nav {}
.openmain ul{}
.openmain ul li{display:block; width: 100%; height: 50px;}
.openmain ul li a {display:block; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .5); text-align: center; font-size:18px; font-weight:bold; height:50px; line-height:50px; color:#000; text-decoration:none;}
.openmain ul li a:hover:after, .openmain ul li a:focus:after, .openmain ul li a:active:after {width: 100%;}
.openmain ul li a:hover{background-color:rgba(108, 101, 149, .95); color:#fff;}

	
/*桌機menu*/
.fixed {position: fixed !important; top: 28px; z-index: 999 !important; background-color: rgba(255, 255, 255, 1) !important; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);}
.topLogo {width: 100%; background-color: rgba(255, 255, 255, 1); box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2); position:relative;  z-index: 11;}
.topLogo .topArea {max-width: 1200px; margin: 0px auto; height:50px; overflow: hidden;}
.topLogo .topArea .logo{display:block; float:left; margin-top:12px; margin-left:3px;}
.topLogo .topArea .nav{float:right;}
.topLogo .topArea .nav ul li{display:inline-block;}
.topLogo .topArea .nav ul li a {color:#000; font-size: 16px; font-weight:bold; height:50px; line-height:50px; padding:0 10px; text-align: center; display: block; text-decoration: none;transition: all 0.5s ease 0s;}
.topLogo .topArea .nav ul li a:hover{background-color:#6c6595; color:#faca57;}


/*header*/
header{width:100%; background: transparent url(../images/headerBG.jpg) center top no-repeat;}
header .headerArea {max-width: 1240px; margin: 0px auto; height: 398px; position: relative; display: block;}
header .headerArea div{position:absolute;}
header .headerArea div.Lpeo{left:8px; bottom:-5px;}
header .headerArea div.Rpeo{right:0; top:24px;}
header .headerArea div.h_icon{left:556px;}
header .headerArea div.h_title{left:230px;}
header .header990 img{display:none;}
header .header768 img{display:none;}
header .header480 img{display:none;}

/* article */
article{width:100%; min-height:500px;}
.container{max-width:1200px; padding:0 10px; margin:0 auto;}
.m10{margin-bottom:10px;}
.title{text-align:center; margin:20px 0;}
.title h1{font-size:30px; padding-bottom:5px;}
.btnbar{margin:0px auto; padding:20px 0; display:block; text-align:center;}
.bluebtn{color:#fff; text-decoration:none; background-color:#3f4164; padding:10px 20px; text-align:center; font-size:24px; font-weight:bold; border-radius:4px; -moz-box-shadow:0px 3px 0px #1d1934; box-shadow: 0px 3px 0px #1d1934; transition: all .4s;}
.bluebtn i{color:#ffbf3d; margin-left:1%; vertical-align:sub; font-size:40px;}
.bluebtn:hover{background-color:#ffbf3d; color:#000; -moz-box-shadow:0px 3px 0px #dda14f; box-shadow: 0px 3px 0px #dda14f;}
.bluebtn:hover i{color:#3f4164;}

/*搜尋BAR*/
.searchfixed {position: fixed !important; top:78px; z-index: 999 !important; width:100%; background-color:rgba(63, 65, 100, .9) !important; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);}
#searchBar{background-color:#3f4164; padding:10px; overflow:hidden; display:block;}
#searchBar .searchbox{margin:auto auto auto 19%;}
#searchBar h1{float:left; color:#fff; font-size:20px; padding:10px;}
#searchBar .has-feedback{position: relative; height:40px; margin: 3px 0;}
#searchBar input{position: absolute; color: #63676d; cursor: pointer; top: 0; border-radius:3px;}
.form-control{display: block; width: 100%; height:40px; line-height:40px; font-size: 16px; color: #555; background-color: #fff; background-image: none; border: 2px solid #ccc; cursor: pointer; padding: 10px 10px 10px 40px;}
.w20 {width:25%; float: left;}
.w40{width: 50%; display: block; float: left; margin-right: 1% !important;}
.ml{margin-left:6px!important;}
#searchBar .form-control-feedback{position: absolute; top: 5px; left:2px; z-index: 66; display: block; width:33px; height:35px; line-height:35px; text-align: center; pointer-events: none; color: #6892ad; font-size: 24px;}
#searchBar .form-control[readonly] {background-color: #FFF !important;}
#searchBar a{color:#000; font-size: 18px; font-weight:bold; line-height:40px; text-decoration: none; display: block; text-align: center; transition: all 500ms ease;}
#searchBar .btnsearch{float:left; padding: 2px 35px; margin: 0 7px; background-color: #ffbf3d;}
#searchBar .btnsearch:hover{background-color: #dda14f;}

/*徵才優勢*/
#job{background-color:#6c6595; overflow:hidden;}
#job .title{color:#fff;}
#job ul{padding:20px 0 50px;}
#job ul li{display:inline-block; width:33%; border-right:1px solid rgba(255, 255, 255, 0.2); text-align:center; vertical-align:top;}
#job ul li:last-child{border-right:0;}
#job ul li img{background-color:#eee; border-radius:999px; max-width:230px; max-height:230px;}
#job ul li h2{color:#faca57; font-size:22px; padding:20px 0 10px;}
#job ul li p{font-size:16px; color:#fff;}

/*拍攝教學*/
#teaching{padding-bottom:30px; overflow:hidden;}
#teaching h2{border-left:#f8b551 solid 4px; padding-left:10px; font-size:20px;}
.teachingtab{margin-bottom:30px;}
.teachingtab h2{margin-bottom:30px;}
#verticaltab {margin: auto; width:100%; height: 100%;}
#verticaltab > div.videobox{width:100%; display:block; height:auto; margin:10px auto auto;}
#verticaltab > ul > li {width:33%; display: inline-block; padding:15px 10px 15px 130px;position: relative;}
#verticaltab > ul > li a{font-size: 18px; text-decoration: none; color: #2F4F4F; font-weight: bold; display:block; text-align:center; width:130px; font-size:20px;}
#verticaltab > ul > li a .circle.selected, #verticaltab > ul > li a .circle:hover{color: #fff !important; background:#8f82bc;}
#verticaltab > ul > li a .circle.selected i{color: #fff !important;}
#verticaltab > ul > li.tabs {background: #fff;}
#verticaltab > ul > li .circle.selected {z-index: 10; position: relative;}
#verticaltab > ul {/*float: left;*/ min-width:550px; text-align: left; display: block; margin: auto 0; padding: 0; position: relative;}
#verticaltab ul li a span{display:block; font-size:15px; font-weight:normal; color:#333; padding-left:40px;}
#verticaltab .caret{position:absolute; bottom:-10px; margin-left:-50px; display: inline-block; width: 0; height: 0; color: transparent; vertical-align: top; border-bottom: 15px solid; border-right: 15px solid transparent; border-left: 15px solid transparent;}
#verticaltab > ul > li .circle.selected+.caret{color:#ccc;}
#verticaltab > div.videobox {background-color: #fafafa; border: 1px solid #ddd; padding: 12px; position: relative; z-index: 9;}
#verticaltab .circle{width: 130px; height: 130px; display:block; line-height: 130px; border-radius: 50%; margin-bottom:5px; text-align: center; border:#8f82bc solid 3px;}
#verticaltab .circle i{vertical-align:middle; color:#9da6a2; font-size:50px;}
#verticaltab .aw{position: absolute; z-index:11; right:-30px; top:25%; font-size:70px; color:#ccc;}

#mobile{display:none;}
#mobile .has-feedback{display:block; position: relative; width:95%; margin: 10px auto 5px;}
#mobile .type{position: relative; display: inline-block; border: 2px solid #8F82BC; text-decoration: none; background-color: #fffede; width: 100%; height:40px; line-height:40px; margin: 0 5px; color: #2F4F4F; text-align: left; padding-left: 15px; font-size: 16px; font-weight:bold; font-family:"微軟正黑體", Arial, sans-serif; cursor: pointer; -webkit-appearance: none; }
#mobile .type span{position: absolute; right: 8px; top:8px; font-size: 20px; color: #bababa;}
#mobile .Mtext{position: absolute; top: 5px; right: 4px; z-index: 66; display: block; width: 15px; height: 32px; line-height: 30px; text-align: center; pointer-events: none; color: #7d7e8a; font-size: 24px;}

.videobox img{max-width:100%; height:auto; display:block; margin:auto;}
.leftvideo, .rightText{float:left;}
.leftvideo{width:65%;}
.rightText{width:32%; margin-left:30px;}
.rightText img{position:absolute; right:-10px; bottom:0;}
.rightText ol{margin-top:20px;}
.rightText ol h3{color:#c0850f; padding-bottom:10px;}
.rightText li{list-style-type:decimal; margin-left:20px; padding:5px 0;}
.rightText li span{display:block; margin-left:80px; color:#666;}
.rightText li span:first-child{padding-top:10px;}
.rightText li span:before{content: '✔'; font-size:24px; padding-right:5px; color:#8f82bc;}

.step2{text-align:center; margin:auto; max-height:560px; overflow:auto;}
.step2 p{padding:20px 0; margin-bottom:10px; font-size:20px; font-weight:bold;}
.step2 p span{color:#bbb; padding-right:10px;}

.step3 a{float:left; width:46%; margin:10px 19px; vertical-align:top; border-radius:8px; border:#eee solid 1px; background-color:#fff; text-align:center; text-decoration:none;
          -webkit-box-shadow: 3px 3px #e6e4e5;
		  -moz-box-shadow: 3px 3px #e6e4e5;
		  box-shadow: 3px 3px #e6e4e5;
		  transition:all .4s;}
.step3 a:hover{-webkit-box-shadow: 3px 3px #8f82bc;
		  -moz-box-shadow: 3px 3px #8f82bc;
		  box-shadow: 3px 3px #8f82bc;
		  margin-top:10px;}		  
.step3 a img{border-bottom:#eee solid 1px;}
.step3 a h3{padding:20px 0; color:#444;}
.step3 p{clear:both; background:#eee; text-align:center; padding:10px; margin:10px;}

/*.teachingStep{clear:both; margin: 0px auto 30px;}
.teachingStep ul{width:100%; text-align: center;}
.teachingStep ul li{display: inline-block;}
.teachingStep ul li.faRight{vertical-align: 110px; color:#b5b2b3; font-size:24px;}
.teachingStep ul li.faDown{display:none;}
.teachingStep ul li .circle{width: 130px; height: 130px; line-height: 130px; margin: 20px 73px 40px; border-radius: 50%; text-align: center;}
.teachingStep ul li .circle i{vertical-align:middle; color:#9da6a2; font-size:50px;}
.teachingStep ul li .p{border:#8f82bc solid 3px;}
.teachingStep ul li .o{border:#f8b551 solid 3px;}
.teachingStep ul li .step-p {text-align: center; font-size: 20px; line-height: 24px; margin-top: -28px; font-weight: bold;}
.teachingStep ul li .step-p span{font-size:16px; color:#b5b2b3;}*/


/*加入徵才*/
#join{overflow:hidden;}
.tablebox{padding:10px; margin-bottom:20px;}
.tablebox ul{width:60%; border:#8f82bc dashed 1px; margin:0 auto; padding:20px 100px;}
.tablebox ul .bigck{text-align:center; margin:20px 0 30px;}
.tablebox ul .bigck span{margin-right:35px; font-size:20px; font-weight:bold;}
.tablebox ul li{margin-bottom:5px; width:100%;}
.tablebox ul input[type=text]{border:#8f82bc solid 2px; border-radius: 2px; width:70%; line-height:20px; padding:5px; font-size:15px; color:#960; margin-left:8px; font-weight:bold;}
.tablebox ul li span{font-size:16px; text-align:right; float:left; width:20%; padding-top:5px;}
.tablebox ul li.ck span{margin-right:8px;}
.tablebox ul li.ck .ckb{margin-right:10px; padding-top:5px;}

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked,
[type="radio"]:not(:checked),
[type="radio"]:checked {position: absolute; left: -9999px;}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label,
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {position: relative; padding-left:30px; cursor: pointer; }
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {content: ''; position: absolute; left:0; top: 2px; width:20px; height:20px; border:2px solid #8f82bc; background: #f8f8f8; border-radius:2px;}
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after,
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {content: '✔'; position: absolute; top:-16px; left: 2px; font-size:35px; color:#eb6877; transition: all .2s;}
[type="checkbox"]:not(:checked) + label:after, [type="radio"]:not(:checked) + label:after {opacity: 0; transform: scale(0);}
[type="checkbox"]:checked + label:after, [type="radio"]:checked + label:after {opacity: 1; transform: scale(1);}
.tablebox .tableboxBtn{text-align:center;}
.tablebox .tableboxBtn a{background-color:#4593bf; color:#fff; font-size:18px; font-weight:bold; text-decoration:none; padding:5px 20px; transition:all .4s}
.tablebox .tableboxBtn a:hover{background-color:#dda14f;}
.tablebtn{display:block; text-align:center; margin:20px 0 10px;}
.tablebtn a{color:#fff; text-decoration:none; background-color:#3f4164; padding:8px; width:30%; margin:auto; display:block; text-align:center; font-size:18px;transition: all .4s;}
.tablebtn a:hover{background-color:#ffbf3d; color:#000;}
.tablebtn a:hover i{color:#3f4164;}
.submitBtn{border:0; font-family:"微軟正黑體"; letter-spacing:2px; border-radius:4px; color:#fff; text-decoration:none; background-color:#3f4164; padding:8px; width:30%; margin:auto; display:block; text-align:center; font-size:18px;transition: all .4s;}
.submitBtn:hover{background-color:#ffbf3d; color:#000;}
.submitBtn:hover i{color:#3f4164;}
.jobsstel{width: 60%; display: block; margin:10px auto; font-size:18px;}
.jobsstel div{display:inline-block; vertical-align:top;}
.jobsstel i{font-size:25px; padding-right:5px; color:#ccc; vertical-align:middle;}
.jobsstel span{padding-right:23px;}
.jobsstel span:last-child{padding-right:0;}


/*footer*/
footer{background-color:#6c6595; color:#cfc5dd; font-size:13px; padding:15px; text-align:center;}

/*線上客服*/
#onlineser{position:fixed; right:30px; bottom:85px; display:block; width:50px; z-index:99; background-color:#ffbf3d; text-align:center; padding:10px 0; font-size:18px; font-weight:bold; line-height:20px; transition:all .4s;}
#onlineser a{text-decoration:none; color:#000;}
#onlineser:hover{background-color:#3f4164; bottom:90px;}
#onlineser:hover a, #onlineser:hover i{color:#ffbf3d;}
#onlineser i{display:block; font-size:35px; color:#fff;}

/* gotop*/
#gotop {display: none; position: fixed; right: 30px; bottom: 30px; cursor: pointer; width: 50px; height: 50px; background-color: rgba(63,65,100,.9); border-radius:5px; font-size: 35px; color: #FFF; text-align: center; line-height: 47px; transition: all 0.3s ease-out 0s;}
#gotop:hover {bottom:35px;}
#gotop i{color:rgba(255,255,255,.8);}





/* ---------- RWD 開始 ---------- */
@media screen and (max-width: 399px) {
	#audio .videolist ul li .Text{min-height: 120px;}
	#audio .videolist ul li .Text h2{font-size: 16px;}

}

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

@media screen and (max-width: 479px) {
	header .header768 img{display:none;}
	header .header480 img{display:block; width:100%; height:auto;}
	#searchBar .searchbox{margin:auto;}
	#searchBar h1{font-size:15px; padding:5px 5px 0 0; line-height:18px;}
	#searchBar h1 span{display:block;}
	#searchBar a{font-size: 15px;}
    #searchBar .btnsearch{padding: 2px 6px; margin:0 0 0 5px;}
	.form-control{font-size:13px; padding: 10px 10px 10px 35px;}
	.w20 {width:34%;}
	#audio .ex{font-size:15px;}
	#job ul li{width:99%;}
	#job ul li h2{font-size:21px;}
    #job ul li p{font-size:15px;}
	.tablebox ul{width:100%;padding:10px 0 10px 20px;}
	.tablebox ul .bigck span{display:block; text-align:left; margin-bottom:5px;}
	.tablebox ul li span{ float:none;display:block; width:100%; text-align:left;}
	.tablebox ul input[type=text]{width:90%; margin-left:0;}
	.tablebtn a{width:95%; margin:0;}
	.tablebox ul .bigck span{font-size:18px;}
	.jobsstel{width:100%;}
	.jobsstel span{display:block; padding-left:25px;}
	
	footer{padding:10px;}
	footer span{display:block;}
}

@media screen and (min-width: 480px) and (max-width: 639px) {
	header .header768 img{width:100%; height:auto; display:block;}
	#searchBar .searchbox{margin:auto auto auto 7%;}
	#searchBar h1{font-size:15px; padding:5px 5px 0 0; line-height:18px;}
	#searchBar h1 span{display:block;}
	#searchBar a{font-size: 15px;}
    #searchBar .btnsearch{padding: 2px 8px; margin:0 0 0 5px;}
	.form-control{font-size:15px; padding: 10px 10px 10px 40px;}
	.w20 {width:34%;}
	#job ul li{width:70%;}
	.tablebox ul{width:100%;padding:20px;}
	.jobsstel{width:100%;}
	.jobsstel span{display:block;}
}

@media screen and (min-width: 640px) and (max-width: 767px) {
	header .header768 img{width:100%; height:auto; display:block;}
	#searchBar .searchbox{margin:auto auto auto 7%;}
	#job ul li{width:80%;}
	.tablebox ul{width:90%;padding:20px 50px;}
	.jobsstel{width:90%;}
}

@media screen and (max-width: 767px) {
	html,body{-webkit-text-size-adjust:none; /* iPhone 旋轉後 文字不要放大 */}
    .topLogo{display:none;}
	.m_nav{display:block;}
	header{position:relative; z-index:998;}
	header .headerArea{display:none;}
	.title h1{font-size:25px;}
	#searchBar{padding:10px 0;}
	#audio .videolist ul li{margin-right:0px; width:99%;}
	#job ul{text-align:center;}
	#job ul li{border-right:0; border-bottom:1px solid rgba(255, 255, 255, 0.2); padding-bottom:20px; margin:10px 0;}
	#job ul li:last-child{border-bottom:0;padding-bottom:0;}
	#job ul li img{max-width:200px; max-height:200px;}
	ul#desk{display:none;}
	div#mobile{display:block;}

	.leftvideo, .rightText{float:none; width:100%;}
	.rightText, .rightText li span{margin-left:0;}
	.rightText img{display:none;}
	.bluebtn{padding: 5px; display: block; font-size:18px;}
	.step3 a{width:100%; margin:10px 0;}

	.jobsstel{font-size:16px;}
	
	#onlineser, #gotop {position:fixed; right:10px;}
	
}


@media screen and (min-width: 768px) and (max-width: 990px) {
	header .headerArea {display:none;}
	header .header990 img{width:100%; height:auto; display:block;}
	.topLogo .topArea .nav ul li a{width:76px;}
	#searchBar .searchbox{margin:auto auto auto 10%;}
	#audio .videolist ul li{margin-right:5px; width:32.5%;}
	#job ul li{width:32.9%;}
	#job ul li img{max-width:200px; max-height:200px;}
	#job ul li h2, #job ul li p{padding:0 5px;}
	#job ul li h2{font-size:17px;}
    #job ul li p{font-size:13px;}
	#job ul li p span{display:block;}
	.tablebox ul{width:80%;padding:20px 50px;}

	.teachingStep ul li .circle{margin: 20px 19px 40px;}
	.jobsstel{width:80%; font-size:16px;}
	#verticaltab .circle{margin:auto;}
	.leftvideo, .rightText{float:none; width:100%;}
	.rightText, .rightText li span{margin-left:0;}
	.step3 a {margin: 10px;}
	#verticaltab > ul > li {width: 32%; padding: 15px 10px 15px 50px;}
	
}

@media screen and (min-width: 991px) and (max-width: 1200px) {
	header .headerArea {height:350px;}
	header .headerArea div.Lpeo img, header .headerArea div.Rpeo img, header .headerArea div.h_icon img{width:83%;}
	header .headerArea div.h_title img{width:90%;}
	header .headerArea div.h_title{bottom:-5px; left:150px;}
	header .headerArea div.h_icon{left:480px;}
	header .headerArea div.Rpeo{right:-50px; top:35px;}
	#audio .videolist ul li{margin-right:8px; width:32.5%;}
	.tablebox ul{width:70%;}

	.teachingStep ul li .circle{margin: 20px 45px 40px;}
	.jobsstel{width:70%; font-size:16px;}
	.rightText img{width:15%;}
	.leftvideo {width: 55%;}
	.rightText {width: 40%;}
	.step3 a{margin:10px 15px;}
	
}

@media screen and (min-width: 1201px) and (max-width: 1400px){
    header{height:360px;}
	header .headerArea { height:360px;}
	header .headerArea div.Lpeo img, header .headerArea div.Rpeo img, header .headerArea div.h_icon img, header .headerArea div.h_title img{width:93%;}
	header .headerArea div.h_title{bottom:-5px; left:}
}