@charset "utf-8";

/* RESET
--------------------------------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td, figure{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}address{ display: inline; font-style: normal;}


/* 共用設定 */
iframe{
    display: block;
    max-width: 100%;
}
img{
    width: 100%;
    height: auto;
    display: block;
}
a, a:visited{
    width: 100%;
    height: 100%;
    display: block;
    color: #58595b;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.clear:before, .clear:after {content:""; display:table; } 
.clear:after {clear:both; } 
.c{clear: both;}

.hide{
	display: none;
}

/* table */
.table{
    width: 100%;
    display: table;
}
.table .tr{
    display: table-row;
}
.table .th, .table .td{
    display: table-cell;
    vertical-align: top;
    position: relative;
}
.table.pc{ display: table;}
.table.mobile{ display: none;}

/* pc & mobile */
.pc{ display: block;}
.mobile{ display: none;}

/* inline-block */
.inblock{ font-size: 0;}
.inblock li, .inblock div, .inblock dt, .inblock dd{ display: inline-block;}

/* 區塊設定 */
.float_l{ float: left;}
.float_r{ float: right;}

/* shadow */
.shadow{
    box-shadow: 7px 7px 51px rgba(0, 0, 0, 0.3);
}

/* 漸變設定 */
.transition,
.transition > *,
.transition:before{
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}


/* 文字設定 */
.fs1{ font-size: 0.24rem;} /*12px*/
.fs2{ font-size: 0.26rem;} /*13px*/
.fs3{ font-size: 0.28rem;} /*14px*/
.fs4{ font-size: 0.3rem;} /*15px*/
.fs5{ font-size: 0.32rem;} /*16px*/
.fs6{ font-size: 0.36rem;} /*18px*/
.fs7{ font-size: 0.4rem;} /*20px*/
.fs8{ font-size: 0.42rem;} /*21px*/
.fs9{ font-size: 0.44rem;} /*22px*/
.fs10{ font-size: 0.46rem;} /*23px*/
.fs11{ font-size: 0.48rem;} /*24px*/
.fs12{ font-size: 0.5rem;} /*25px*/

.lh1{ line-height: 1;}
.lh2{ line-height: 1.2;}
.lh3{ line-height: 1.5;}
.lh4{ line-height: 1.7;}
.lh5{ line-height: 2;}

.bold{ font-weight: bold;}
.alignC{ text-align: center;}
p{ margin-bottom: 0.3rem;}
h3{ font-weight: normal;}


/* 文字顏色設定 */
.colorW, .colorW a{ color: #fff;}
.colorP, .colorP a{ color: #f54d88;}
.colorB, .colorB a{ color: #00abc0;}
.colorR, .colorR a{ color: #f79198;}
.colorG, .colorG a{ color: #9e9d9d;}
.colorBl, .colorBl a{ color: #020001;}


/* 距離設定 */
.mb1{ margin-bottom: 0.1rem;} /*5px*/
.mb2{ margin-bottom: 0.2rem;} /*10px*/
.mb3{ margin-bottom: 0.3rem;} /*15px*/
.mb4{ margin-bottom: 0.4rem;} /*20px*/
.mb5{ margin-bottom: 0.5rem;} /*25px*/
.mb6{ margin-bottom: 0.6rem;} /*30px*/
.mb7{ margin-bottom: 0.7rem;} /*35px*/
.mb8{ margin-bottom: 0.8rem;} /*40px*/
.mb9{ margin-bottom: 0.9rem;} /*45px*/
.mb10{ margin-bottom: 1rem;} /*50px*/

.mt1{ margin-top: 0.1rem;} /*10px*/
.mt2{ margin-top: 0.2rem;} /*10px*/
.mt3{ margin-top: 0.3rem;} /*15px*/
.mt4{ margin-top: 0.4rem;} /*20px*/
.mt5{ margin-top: 0.5rem;} /*25px*/
.mt6{ margin-top: 0.6rem;} /*30px*/
.mt7{ margin-top: 0.7rem;} /*35px*/
.mt8{ margin-top: 0.8rem;} /*40px*/
.mt9{ margin-top: 0.9rem;} /*45px*/
.mt10{ margin-top: 1rem;} /*50px*/

.ml1{ margin-left: 0.1rem;} /*10px*/
.ml2{ margin-left: 0.2rem;} /*10px*/
.ml3{ margin-left: 0.3rem;} /*15px*/
.ml4{ margin-left: 0.4rem;} /*20px*/
.ml5{ margin-left: 0.5rem;} /*25px*/
.ml6{ margin-left: 0.6rem;} /*30px*/
.ml7{ margin-left: 0.7rem;} /*35px*/
.ml8{ margin-left: 0.8rem;} /*40px*/
.ml9{ margin-left: 0.9rem;} /*45px*/
.ml10{ margin-left: 1rem;} /*50px*/

.mr1{ margin-right: 0.1rem;} /*10px*/
.mr2{ margin-right: 0.2rem;} /*10px*/
.mr3{ margin-right: 0.3rem;} /*15px*/
.mr4{ margin-right: 0.4rem;} /*20px*/
.mr5{ margin-right: 0.5rem;} /*25px*/
.mr6{ margin-right: 0.6rem;} /*30px*/
.mr7{ margin-right: 0.7rem;} /*35px*/
.mr8{ margin-right: 0.8rem;} /*40px*/
.mr9{ margin-right: 0.9rem;} /*45px*/
.mr10{ margin-right: 1rem;} /*50px*/

.pr1{ padding-right: 0.1rem;} /*10px*/
.pr2{ padding-right: 0.2rem;} /*10px*/
.pr3{ padding-right: 0.3rem;} /*15px*/
.pr4{ padding-right: 0.4rem;} /*20px*/
.pr5{ padding-right: 0.5rem;} /*25px*/
.pr6{ padding-right: 0.6rem;} /*30px*/
.pr7{ padding-right: 0.7rem;} /*35px*/
.pr8{ padding-right: 0.8rem;} /*40px*/
.pr9{ padding-right: 0.9rem;} /*45px*/
.pr10{ padding-right: 1rem;} /*50px*/

.pl1{ padding-left: 0.1rem;} /*10px*/
.pl2{ padding-left: 0.2rem;} /*10px*/
.pl3{ padding-left: 0.3rem;} /*15px*/
.pl4{ padding-left: 0.4rem;} /*20px*/
.pl5{ padding-left: 0.5rem;} /*25px*/
.pl6{ padding-left: 0.6rem;} /*30px*/
.pl7{ padding-left: 0.7rem;} /*35px*/
.pl8{ padding-left: 0.8rem;} /*40px*/
.pl9{ padding-left: 0.9rem;} /*45px*/
.pl10{ padding-left: 1rem;} /*50px*/

.pv1{ padding-top: 0.1rem; padding-bottom: 0.1rem;} /*10px*/
.pv2{ padding-top: 0.2rem; padding-bottom: 0.2rem;} /*10px*/
.pv3{ padding-top: 0.3rem; padding-bottom: 0.3rem;} /*15px*/
.pv4{ padding-top: 0.4rem; padding-bottom: 0.4rem;} /*20px*/
.pv5{ padding-top: 0.5rem; padding-bottom: 0.5rem;} /*25px*/
.pv6{ padding-top: 0.6rem; padding-bottom: 0.6rem;} /*30px*/
.pv7{ padding-top: 0.7rem; padding-bottom: 0.7rem;} /*35px*/
.pv8{ padding-top: 0.8rem; padding-bottom: 0.8rem;} /*40px*/
.pv9{ padding-top: 0.9rem; padding-bottom: 0.9rem;} /*45px*/
.pv10{ padding-top: 1rem; padding-bottom: 1rem;} /*50px*/

.ph1{ padding-left: 0.1rem; padding-right: 0.1rem;} /*10px*/
.ph2{ padding-left: 0.2rem; padding-right: 0.2rem;} /*10px*/
.ph3{ padding-left: 0.3rem; padding-right: 0.3rem;} /*15px*/
.ph4{ padding-left: 0.4rem; padding-right: 0.4rem;} /*20px*/
.ph5{ padding-left: 0.5rem; padding-right: 0.5rem;} /*25px*/
.ph6{ padding-left: 0.6rem; padding-right: 0.6rem;} /*30px*/
.ph7{ padding-left: 0.7rem; padding-right: 0.7rem;} /*35px*/
.ph8{ padding-left: 0.8rem; padding-right: 0.8rem;} /*40px*/
.ph9{ padding-left: 0.9rem; padding-right: 0.9rem;} /*45px*/
.ph10{ padding-left: 1rem; padding-right: 1rem;} /*50px*/



@font-face{
    font-family: 'slimjoe';
    src: url('../fonts/slimjoe.eot');
    src: url('../fonts/slimjoe.eot?#iefix') format('embedded-opentype'),
         url('../fonts/slimjoe.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}



/* basestyle 
----------------------------------------------------------------------------*/
body,html{
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-family: Arial, "微軟正黑體","蘋果儷黑體","新細明體", Verdana, Helvetica, sans-serif;
    color: #58595b;
    font-size: 50px;
    overflow: hidden;
}
body{
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.wrapper{
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: relative;
}
.container{
    max-width: 1760px;
    width: 91.66666666666667%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
.center{
    width: 100%;
    /*max-width: 800px;*/
    margin: 0 auto;
}
article{
}
section{
    width: 64%;
    margin: 0 auto;
    margin-top: 2rem;
}
aside{
}
#index,#intro,#case{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}




/* header
-----------------------------------------------------------------------------------*/
header {
    width: 100%;
    height: 2rem;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    background: url('../images/bg_header.png') repeat-x center top;/* fallback */
    background:-webkit-gradient(linear, 100% 100%, 100% 60%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.95)));
    background: -o-linear-gradient(top, rgb(255, 255, 255), rgba(255, 255, 255, 0));/* Opera 11.10+ */
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
    opacity: 1;
    z-index: 99;
}
header.select{ 
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    opacity: 0;
}
nav{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    padding: 0.6rem 0;
    line-height: 1;
    visibility: visible;
    opacity: 1;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
}
.select nav{ visibility: hidden; opacity: 0;}
nav li a{
    width: auto;
    padding: 0 0.52rem;
    letter-spacing: 1px;
    color: #b8b8b8;
    position: relative;
}
nav li a:hover{
    color: #24cff7;
}
nav li a:before{
    font-family: "FontAwesome";
    content: "\f107";
    color: transparent;
    font-size: 0.25rem;
    position: absolute;
    top: 130%;
    left: 50%;
    margin-left: -0.1rem;
}
nav li.select a{
    color: #24cff7;
}
nav li.select a:before{
    color: #24cff7;
    -webkit-animation: nav 1.2s infinite linear;
    animation: nav 1.2s infinite linear;
}
@-webkit-keyframes nav {
    0% { -webkit-transform: translate(0,0); transform: translate(0,0);}
    50% { -webkit-transform: translate(0,5px); transform: translate(0,5px);}
    100% { -webkit-transform: translate(0,0); transform: translate(0,0);}
} 
@keyframes nav {
    0% { -webkit-transform: translate(0,0); transform: translate(0,0);}
    50% { -webkit-transform: translate(0,5px); transform: translate(0,5px);}
    100% { -webkit-transform: translate(0,0); transform: translate(0,0);}
}

.logo{
    width: 2.5rem;
    font-size: 0;
    position: fixed;
    right: 4.166666666666667%;
    top: 0.5rem;
    z-index: 999;
}
.logo img{ opacity: 1;}
.logo.select img{ opacity: 0;}
.logo:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.logo.select:before{ 
    background: url('../images/logo_w.png') no-repeat top left;
    background-size: 100% auto;
    opacity: 1;
}

.btn_menu{
    width: 0.7rem;
    height: 0.64rem;
    position: fixed;
    left: 4.166666666666667%;
    top: 0.5rem;
    z-index: 999;
}
.btn_menu span{
    display: block;
    height: 2px;
    background-color: #7f7f7f;
    position: relative;
    top: 0.25rem;
    -webkit-animation: munuicon1 0.4s ease-out;
    animation: munuicon1 0.4s ease-out;
}
@-webkit-keyframes munuicon1 { 0% { top: 0;} 100% { top: 0.3rem;}} 
@keyframes munuicon1 { 0% { top: 0;} 100% { top: 0.3rem;}} 

.btn_menu span:before,
.btn_menu span:after{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #7f7f7f;
    position: absolute;
    left: 0;
    -webkit-transition: all .7s;
    transition: all .7s;
}
.btn_menu span:before{
    top: -0.25rem;
    -webkit-animation: munuicon3 0.4s ease-out;
    animation: munuicon3 0.4s ease-out;
}
@-webkit-keyframes munuicon3 { 0% { top: 0;} 100% { top: -0.3rem;}} 
@keyframes munuicon3 { 0% { top: 0;} 100% { top: -0.3rem;}} 

.btn_menu span:after{
    top: 0.25rem;
    -webkit-animation: munuicon2 0.5s ease-out;
    animation: munuicon2 0.5s ease-out;
}
@-webkit-keyframes munuicon2 { 0% { top: 0;} 100% { top: 0.3rem;}} 
@keyframes munuicon2 { 0% { top: 0;} 100% { top: 0.3rem;}} 


.btn_menu.select span{
    background-color: transparent;
}
.btn_menu.select span:before{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #fff;
    top: 0rem;
}
.btn_menu.select span:after{
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #fff;
    top: 0rem;
}



/* mask */
.mask{
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
.mask.blue{
    background-color: #00b9ff;
    background: url('../images/bg_intro.jpg') repeat-y center top;/* fallback */
    background: -webkit-gradient(linear, 100% 0%, 0% 100%, from(#72ffe5), to(#00b9ff));/* Safari 4-5, Chrome 1-9 *//* Firefox 3.6+ *//* IE 10 */
    background: -o-linear-gradient(left, #00b9ff, #72ffe5);/* Opera 11.10+ */
}
.mask.red{
    background-color: #ff7f4e;
    background: url('../images/bg_case.jpg') repeat-y center top;/* fallback */
    background: -webkit-gradient(linear, 100% 0%, 0% 100%, from(#ffe69b), to(#ff7f4e));/* Safari 4-5, Chrome 1-9 *//* Firefox 3.6+ *//* IE 10 */
    background: -o-linear-gradient(left, #ff7f4e, #ffe69b);/* Opera 11.10+ */
}
.item:hover .mask{
    height: 100%;
    opacity: 0.85;
    visibility: visible;
}
.item .table{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    visibility: hidden;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
.item .td{
    vertical-align: middle;
}
.item:hover .table{
    opacity: 1;
    visibility: visible;
}
.item .plus{
    width: 1.08rem;
    height: 1.08rem;
    margin: 0.4rem auto 0;
    text-align: center;
    position: relative;
}
.item .plus:before,
.item .plus:after{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
}
.item .plus:after{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.item .plus span{
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.3rem;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    top: -0.33rem;
    left: -0.33rem;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation: plus 1.3s infinite linear;
    animation: plus 1.3s infinite linear;
}
@-webkit-keyframes plus { 0% { -webkit-transform: scale(1); transform: scale(1);} 30% { -webkit-transform: scale(0.96); transform: scale(0.96);} 50% { -webkit-transform: scale(0.95); transform: scale(0.95);} 100% { -webkit-transform: scale(1); transform: scale(1);}} 
@keyframes plus { 0% { -webkit-transform: scale(1); transform: scale(1);} 30% { -webkit-transform: scale(0.96); transform: scale(0.96);} 50% { -webkit-transform: scale(0.95); transform: scale(0.95);} 100% { -webkit-transform: scale(1); transform: scale(1);}} 

.item .txt{
    text-align: center;
    position: relative;
    padding-top: 0.3rem;
}
.item .txt:before{
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background-color: #fff;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.item:hover .txt:before{
    width: 80%;
    left: 10%;
}
.item_margin{ width: 0.6666666666666667%;}
.item img{ -webkit-filter: brightness(110%) opacity(0.8); filter: brightness(110%) opacity(0.8);}


/* footer
-----------------------------------------------------------------------------------*/




/* masonry
-----------------------------------------------------------------------------------*/
#index{
    background-color: #fff;
}
#index .container{
    height: auto;
    padding-top: 2.32rem;
}
.item{
    width: 24.5%;
    margin-bottom: 0.2rem;
}
.item .player_mask{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.item .player{
    width: 430px;
    height: 240px;
    max-width: 100%;
}


/* case 案例介紹
-----------------------------------------------------------------------------------*/
#case{
    background-color: #2d2d2d;
/*
    background: url('../images/bg_case.jpg') repeat-y center top;
    background: -webkit-gradient(linear, 100% 0%, 0% 100%, from(#ffe69b), to(#ff7f4e));
    background: -o-linear-gradient(left, #ff7f4e, #ffe69b);
*/
}
#case .table{
    height: 100%;
}
#case .td{
    vertical-align: middle;
}
#case .photo{
    position: relative;
}
#case .photo.fold{
    overflow: hidden;
    cursor: pointer;
    background: url('../images/loader.gif') no-repeat center center;
    background-size: 0.8rem auto;
}
#case .txt{
    margin-bottom: 1rem;
}
#case .title{
    width: 100%;
    overflow: hidden;
}
#case .title span{
    position: relative;
}
#case .title span:before{
    content: '';
    display: block;
    width: 800%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 0.25rem;
    left: 100%;
    margin-left: 0.6rem;
}
#case .txt .float_l{
    width: 70%;
}
#case .txt .float_r{
    width: 30%;
    text-align: right;
    font-style: italic;
    overflow: hidden;
}
#case .th{
    width: 1.78rem;
    border-right: 1px solid #fff;
    color: #ffe6dc;
}
#case .float_r dt span{
    position: relative;
}
#case .float_r dt span:before{
    content: '';
    width: 200%;
    height: 1px;
    background-color: #fff;
    display: block;
    position: absolute;
    top: 50%;
    right: 125%;
}
#case .float_r dd li{
    width: 0.61rem;
    margin-left: 0.15rem;
}

/* gallery */
.gallery{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.gallery li{
    width: 100%;
    /*height: 100%;
    position: absolute;
    top: 0;
    left: 0;*/
}
.selector{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -0.5rem;
}
.selector li{
    width: 0.12rem;
    height: 0.12rem;
    padding: 0 0.22rem;
}
.selector li a{
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.5;
}
.selector li.select a,
.selector li a:hover{
    opacity: 1;
}

/* slide */
.slide{ width: 100%; /*height: 100%;*/ position: relative;}
.slide > li{ width: 100%; /*height: 100%; position: absolute; top: 0; left: 0;*/}
.slidebox .arrow_up,
.slidebox .arrow_down{
    width: 1.1rem;
    position: absolute;
    left: 50%;
    margin-left: -0.55rem;
    z-index: 999;
}
.slidebox .arrow_up{ top: 5%;}
.slidebox .arrow_down{ bottom: 5%;}

/* intro 公司介紹
-----------------------------------------------------------------------------------*/
#intro{
    /*background-color: #00b9ff;*/
    /*background: url('../images/bg_intro.jpg') repeat-y center top;/* fallback */
    /*background: -webkit-gradient(linear, 100% 0%, 0% 100%, from(#72ffe5), to(#00b9ff));/* Safari 4-5, Chrome 1-9 *//* Firefox 3.6+ *//* IE 10 */
    /*background: -o-linear-gradient(left, #00b9ff, #72ffe5);/* Opera 11.10+ */
    background: url('../images/office.jpg') no-repeat center top;
    background-size: cover;
}
#intro aside{
    width: 6rem;
    height: 100%;
    font-family:  'slimjoe', sans-serif, Arial, Helvetica, Verdana,"微軟正黑體", "蘋果儷黑體", "新細明體";
    position: absolute;
    top: 0;
    left: 0;
    vertical-align: middle;
}
#intro aside .td{
    vertical-align: middle;
}
#intro aside li{
    display: inline-block;
}
#intro aside li a{
    border-bottom: 1px solid #fff;
    opacity: 0.5;
}
#intro aside li a:hover,
#intro aside li.select a{
    opacity: 1;
}
#intro .fb{
    display: block;
    margin-top: 1rem;
    width: 0.54rem;
    height: 0.54rem;
}
#intro .fb a{
    background: url('../images/btn_fb_ovr.png') no-repeat left top;
    background-size: 100% auto;
    border: none;
    opacity: 0.75;
}
#intro .fb a:hover{
    opacity: 1;
}
#intro .add{
    font-size: 13px;
    font-family: Arial, "微軟正黑體","蘋果儷黑體","新細明體", Verdana, Helvetica, sans-serif;
    line-height: 1.8;
    color: #fff;
    opacity: 0.8;
    margin-top: 1rem;
}
#intro article{
    height: 100%;
    position: absolute;
    top: 0;
    left: 25%;
    width: 13rem;
}
#intro article > .table{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#intro article .td{
    vertical-align: middle;
}

.intro_txt{
    font-size: 0.24rem;
    font-family: Arial, "微軟正黑體","蘋果儷黑體","新細明體", Verdana, Helvetica, sans-serif;
    line-height: 2.5;
    color: #fff;
}
.intro_txt .line{
    width: 3rem;
    height: 1px;
    background: #fff;
    margin-left: -2rem;
    margin-bottom: 0.3rem;
}

#projectTxt{
    width: 100%;
}

.form_box{
    border: 1px solid rgba(225,225,225,0.8);
}
.form_box th, .form_box td{
    text-align: center;
    vertical-align: middle;
    padding: 0;
    font-size: 0;
}
.form_box th{
    padding: 0 0.1rem;
}
.form_box span{ 
    font-size: 0.24rem;
}
.form_box input{
    border: none;
    width: 100%;
    background: #fffefe;
    opacity: 0.2;
    padding: 0.04rem 0.1rem;
    font-size: 0.28rem;
    color: #000;
    vertical-align: middle;
    box-sizing: border-box;
}
.form_box .form_line{
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.btn_login{
    display: inline-block;
    background: rgba(255,254,254,0.8);
    vertical-align: middle;
}
.btn_login a{
    width: auto;
    line-height: 1;
    padding: 0.075rem 0.6rem;
    font-size: 0.24rem;
    color: rgba(107,105,105,0.7);
}
.btn_login:hover{
    background: rgba(255,254,254,0.9);
}







/* loading */
.loading{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; text-align: center; background-color: rgba(255, 255, 255, 0.8); z-index: 9999;}
.loading.lower{ background: none; }
.loading .box{ margin: 5rem auto; font-size: 0.2em; color: #333; position: relative; -webkit-animation: opac 2s infinite linear; animation: opac 2s infinite linear;}
.loading.lower .box{ position: absolute; left: 50%; bottom: 0; margin: 0 0 2rem -23px; }
.loading span{ width: 1.5rem; height: 1.5rem; display: block; position: absolute; top: 50%; left: 50%; 
    margin: -0.8rem auto auto -0.8rem;
    border: 2px solid;
    border-color:  #333 transparent  #333 transparent;
    border-radius: 5rem;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% { -webkit-transform: rotate(359deg); transform: rotate(359deg);}
}
@keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% { -webkit-transform: rotate(359deg); transform: rotate(359deg);}
}
@-webkit-keyframes opac { 0% { opacity: 1;} 50% { opacity: 0.4;} 100% { opacity: 1;}}
@keyframes opac { 0% { opacity: 1;} 50% { opacity: 0.4;} 100% { opacity: 1;}}