body{font-family:Arial,'Roboto','lucida Grande','Helvetica Neue',Helvetica,​Verdana,"微軟正黑體","Microsoft JhengHei", sans-serif;}
img{ width:100%;}
.fa-home,.t-color{ color:#b0d146}
.up{ margin:35px 0;}

.i-iogo{ text-align:center; padding-top:15%}
.i-iogo img{ width:40%;}
.i-button{ text-align:center; font-size:12px;}
.i-line{ margin:0 5px; float:left;}
.i-button a{ color:#666; text-decoration:none; }
.i-button a:hover{ color:#b0d146; text-decoration:none;}

.head_quare{ border-bottom:1px solid #BCBCBC; z-index:1;}
.logo{ margin-top:25px;}
.i-m-square{ float:right;}
.top_menu{ margin:30px 0 5px 15px; text-align:right}
.top_menu a {color:#666; text-decoration:none;font-size:13px;padding: 0 1px;}
.top_menu a:hover {color:#b0d146;}
.nav_menu ul,ol{ margin:0; padding:0; list-style-type:none; font-size:13px;}
.nav_menu{ width:100%;padding-left:15px;}
.nav_menu ul{ height:30px;}
.nav_menu ul li a{ color:#666; text-decoration:none;padding:0 13px;}
.nav_menu ul li a:hover{ background-color:#B9EB33; padding:10px 13px;}
.nav_menu ul li{ float:left; line-height:35px; padding:0; position:relative}
.nav_menu ul li:hover .owrap{ display:block}
.nav_menu ul li .owrap{ position:absolute; width:400px; display:none; padding-top:10px; z-index:1}
.nav_menu ul li:hover .owrap-1{ display:block}
.nav_menu ul li .owrap-1{ position:absolute; width:400px; display:none; padding-top:10px; z-index:1; left:-162px}
.nav_menu ul li:hover .owrap-2{ display:block}
.nav_menu ul li .owrap-2{ position:absolute; width:580px; display:none; padding-top:10px; z-index:1; left:-80px}
.nav_menu ul li ol li{ float:left;line-height:20px; padding:0}
.nav_menu ul li ol li a{ text-align:center; padding:0 13px;}
.nav_menu ul li ol li a:hover{ background:none; color:#b0d146}
.date{ font-size:12px; -webkit-transform:scale(0.83);-o-transform: scale(1);line-height: 14px; margin:4px 0 4px -40px;}
.date .w{ width:75px; float:left;}
.date .w-1{ width:60px; float:left;}

.p-menu{ margin-top:2%;}
.mm{ width:2%; float:left;margin:10px 0 20px;}
.m-1{ width:22.5%; float:left; text-align:center; margin:10px 0 20px;}
.m-1 a{ font-size:12px; color:#666; text-decoration:none;}
.m-1 a:hover{ color:#B9EB33;}
.m-2{ width:30.3%; float:left; text-align:center; margin:10px 0 20px;}
.m-2 a{ font-size:12px; color:#666; text-decoration:none;}
.m-2 a:hover{ color:#B9EB33;}
.m-3{ width:47%; float:left; text-align:center; margin:10px 0 20px;}
.m-3 a{ font-size:12px; color:#666; text-decoration:none;}
.m-3 a:hover{ color:#B9EB33;}
.m-4{ width:17.6%; float:left; text-align:center; margin:10px 0 20px;}
.m-4 a{ font-size:12px; color:#666; text-decoration:none;}
.m-4 a:hover{ color:#B9EB33;}

.t-color{ margin:8px 0;}
.text-1{ font-size:13px; line-height:24px; margin-bottom:20px}
.text-2{ line-height:22px;}
.text-2-2{ line-height:22px; margin-left:10px; margin-right:10px; text-justify:distribute; text-align:justify;}
.text-3{ font-size:10px;line-height:18px;}
.text-5{ line-height:21px;}
.text-5 a{ text-decoration:none; color:#B9EB33}
.g-line{ border-bottom:1px solid #B9EB33; padding:10px 0; margin-bottom:15px}
.g-line-1{ border-bottom:1px solid #B9EB33; padding-bottom:10px;}

/*設計作品*/
/*產品*/
.boxs{ margin:10px 0 0; float:left;}
.boxs .p-box{ width:15.8%; margin-right:1%;float:left;position:relative;}
.boxs .p-box-n{ width:15.8%;float:left;position:relative;}
.boxs .p-box a,.p-box-n a{ text-decoration:none; color:#666; line-height:22px;}
.boxs .p-box a:hover{color:#B9EB33;}
.boxs .p-box-n a:hover{color:#B9EB33;}
.boxs .p-box p,.boxs .p-box-n p{ font-size:11px;}
.box-square{ position:relative;}

/*視覺*/
.boxs{ margin:10px 0 0; float:left; width:100%;}
.boxs .p-box02,.boxs .p-box02-t{ width:24%; margin-right:1%;float:left;position:relative;}
.boxs .p-box02-n,.boxs .p-box02-n-t{ width:24%;float:left;position:relative;}
.boxs .p-box02 a,.p-box02-n a{ text-decoration:none; color:#666; line-height:22px;}
.boxs .p-box02 a:hover{color:#B9EB33;}
.boxs .p-box02-n a:hover{color:#B9EB33;}
.boxs .p-box02 p,.boxs .p-box02-n p{ font-size:11px; margin-left:6%;}

/*展場*/
.boxs{ margin:10px 0 0; float:left;}
.boxs .p-box03,.boxs .p-box03-t{ width:24%; margin-right:1%;float:left;position:relative;}
.boxs .p-box03-n,.boxs .p-box03-n-t{ width:24%;float:left;position:relative;}
.boxs .p-box03 a,.p-box03-n a{ text-decoration:none; color:#666; line-height:22px;}
.boxs .p-box03 a:hover{color:#B9EB33;}
.boxs .p-box03-n a:hover{color:#B9EB33;}
.boxs .p-box03 p,.boxs .p-box03-n p{ font-size:11px;}
.box-square{ position:relative;}

.boxs .p-boxtt{ width:24%; margin-right:1%;float:left;position:relative;}
.boxs .p-boxtt-n{ width:24%;float:left;position:relative;}

/*報章*/
.n-boxs{ margin:10px 0 0; float:left; text-align:center;}
.n-boxs .box{ width:24.25%; margin-right:1%;float:left;}
.n-boxs .box:hover{ color:#fff; background:#b0d146;}
.n-boxs .box-n:hover{ color:#fff; background:#b0d146;}
.n-boxs .box img{box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
.n-boxs .box img:hover{ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.n-boxs .box-n{ width:24.25%;float:left;}
.n-boxs .box-n img{box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
.n-boxs .box-n img:hover{ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}

.btns{display: block; padding:0; background-color: #fff; border: 1px solid #eeeeee; margin:0 auto}
.btns:hover{ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.btns-t{display: block; padding:0; background-color: #fff; border:none; margin:0 auto}
.modal-dialog{width: 380px;margin:auto; transition: transform 0.3s ease-out; position: absolute;right: 0;left: 0;top: 0;bottom: 0;text-align: center;height: 350px;}
.modal-dialog-1{ width: 300px;margin:auto; transition: transform 0.3s ease-out; position: absolute;right: 0;left: 0;top: 0;bottom: 0;text-align: center;height: 350px;}
.modal-dialog-2{ width: 220px;margin:auto; transition: transform 0.3s ease-out;position: absolute;right: 0;left: 0;top: 0;bottom: 0;text-align: center;height: 350px;}
.modal-dialog-3{ width: 270px;margin:auto; transition: transform 0.3s ease-out;position: absolute;right: 0;left: 0;top: 0;bottom: 0;text-align: center;height: 350px;}
.modal-dialog-4{ width: 520px;margin:auto; transition: transform 0.3s ease-out; position: absolute;right: 0;left: 0;top: -200px;bottom: 0;text-align: center;height: 350px;}

.n-boxs .box-1{ width:30%; margin-right:2%;float:left;}
.n-boxs .box-1:hover{ color:#fff; background:#b0d146;}
/* IMAGES TOOLTIP
-------------------------------------------------*/

.boxs a.images_tooltip span {
    height: auto;
    color: #fff;
    background: #2b2b2b;
    position: absolute;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    line-height: 20px;
    visibility: hidden;
    border-radius: 10px;
}

.boxs a.images_tooltip span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
}

.boxs a:hover.images_tooltip span {
    visibility: visible;
	top: 50%;
    left: 50%;
    z-index: 999;
}


.footer_quare{ color:#A0A0A0; margin:20px 0 15px; font-size:10px}
.content_quare{ color:#666; font-size:13px;}


/*INDEX*/
.logo-wrapper{
    width: 195px;
    height: 450px;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
    text-align: center;
}
#logo{
    position: relative;
    left: -15px;
}
svg {
  fill:rgba(244,244,244,0);
  overflow:visible;
}
svg .gradient{
  fill:url(#start);
}

@media (max-width: 767px) { 
.i-iogo{ padding-top:30%}
.date{ font-size:12px; -webkit-transform:scale(0.83);-o-transform: scale(1);line-height: 14px; margin:4px 0;}
.date .w,.date .w-1{ color:#b0d146}
.logo{ margin-top:0;}
.head_quare{ padding:10px 0 10px;}

.boxs .p-box{ width:32.3%; margin-right:1%;float:left;}
.boxs .p-box-n{ width:32.3%;float:left;}

.boxs .p-box03{ width:49%; margin-right:1%;float:left;}
.boxs .p-box03-n{ width:49%;float:left;}

.boxs .p-boxtt,.boxs .p-boxtt-n{ display:none;}

.n-boxs .box-n,.n-boxs .box{ width:80%;float:left; margin:1% 10%;}

.text-2-2{ line-height:22px; margin-left:5px; margin-right:5px; text-justify:distribute; text-align:justify;}

a:hover.images_tooltip span {
    visibility: visible;
	margin:20%;
    left:0;
    z-index: 999;
}

.footer_quare{ text-align:center; font-size:8px;}
.n-boxs{ width:100%;}
.n-boxs .box-1{ width:50%; margin:2% 25%;float:left;}
.n-boxs .box-1:hover{ color:#fff; background:#b0d146;}
.modal-dialog-4{ width: 300px;margin:auto; transition: transform 0.3s ease-out; position: absolute;right: 0;left: 0;top:0;bottom: 0;text-align: center;height: 350px;}
.boxs .p-box02 p,.boxs .p-box02-n p{ font-size:11px; text-align:center}
}

@media (min-width:767px) {
.content_quare{ margin-top:40px;}
.footer_quare{ text-align:center;}
}
@media (max-width:766px) {
.i-iogo img{ width:40%;}
}
@media (min-width:767px) and (max-width: 991px) {
.i-iogo img{ width:50%;}
}