@charset "utf-8";
/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2014 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: 宏嘉 $
 * $Date: 2015-07-13 (一) $
*/

/* 全球據點 */
#con-crumb {
	margin-bottom: -60px;
}
#con-ban {
	width: 100%;
	height: 200px;
	margin-bottom: 40px;
	background-image: url('../images/worldwide_location_s.png');
	background-position: center top;
	background-size: cover;
}
#con-info {
	/*max-width: 1000px;*/
	margin: 50px auto 30px;
}
#con-info .map-txt {
	padding-top: 10px;
}
#con-info a.map-jumpbtn {
	display: block;
	width: 140px;
	height: 40px;
	line-height: 40px;
	border-radius: 10px;
	text-align: center;
	margin-top: 8px;
	color: #f7d400;
  background: #333;
}
#con-info a.map-jumpbtn:hover {
	color: #000;
  background: #f7d400;
}
#con-info .locations {
	margin-top: 40px;
}
#con-info .locations .branch {
	margin-top: 40px;
}
#con-info .locations em {
	display: block;
	width: 100%;
	line-height: 30px;
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	color: #000;
	padding: 0 15px;
}
#con-info .locations .head div,
#con-info .locations .head p,
#con-info .locations .branch div,
#con-info .locations .branch p {
	margin: 0;
	padding: 0 15px;
	line-height: 24px;
}
#con-info .locations .head p,
#con-info .locations .branch p {
	margin-bottom: 10px;
}
#con-info .locations .head .col-md-2,
#con-info .locations .branch .col-md-2 {
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	font-weight: bold;
}
#con-info .locations .row .col-md-10 {
	margin: 0;
	padding: 0;
}
#con-info .locations .row .col-md-10 p,
#con-info .locations .row .col-md-10 div {
	margin: 0;
	padding: 0 15px;
	line-height: 24px;
}
#con-info .locations .row .col-md-10 div i {
	margin-right: 5px;
}
#con-info .locations .head .company {
	height: 35px;
	line-height: 35px;
	color: #f7d400;
	background-color: #000;
	/*background-image: -webkit-linear-gradient(bottom, #3172B3, #98B8D9);
  background-image: -moz-linear-gradient(bottom, #3172B3, #98B8D9);
  background-image: -o-linear-gradient(bottom, #3172B3, #98B8D9);
  background-image: -ms-linear-gradient(bottom, #3172B3, #98B8D9);
  background-image: linear-gradient(to top, #3172B3, #98B8D9);*/
}
#con-info .locations .branch .company {
	height: 35px;
	line-height: 35px;
	color: #f7d400;
	background-color: #555;
	/*background-image: -webkit-linear-gradient(bottom, #8694aa, #aab4c3);
  background-image: -moz-linear-gradient(bottom, #8694aa, #aab4c3);
  background-image: -o-linear-gradient(bottom, #8694aa, #aab4c3);
  background-image: -ms-linear-gradient(bottom, #8694aa, #aab4c3);
  background-image: linear-gradient(to top, #8694aa, #aab4c3);*/
}
.newicon {
  color: #f00;
  padding: 0 5px;
  font-size: 12px;
}
@media screen and (min-width: 481px) {
	#con-ban {
		margin-bottom: 60px;
	}
	.con-ti br,
	.con-ti br:after {
		content: '\00a0\00a0';
	}
}
@media screen and (min-width: 992px) {
	#con-ban {
		height: 400px;
		background-image: url('../images/worldwide_location.png');
	}
	#con-info .map-txt {
		line-height: 26px;
		padding-top: 0;
	}
	#con-info .locations .branch {
		margin-top: 20px;
	}
	#con-info .locations .row {
		padding: 0 15px;
	}
	#con-info .locations .row p {
		margin: 5px 0;
	}
	#con-info .locations .row div:not([class="company"]) {
		display: inline-block;
		margin-right: 20px;
	}
}
@media screen and (max-width: 767px) {
	#con-crumb {
		margin-bottom: -25px;
	}
}
h2#large-ti.contact-ti2 {
	margin-top: 80px;
}

/* 諮詢聯絡 */
#con-form {
	/*max-width: 1000px;*/
	margin: 0 auto 30px;
}
#con-form .row {
	width: 100%;
	margin: 0 auto;
	margin-top: 20px;
}
#con-form .row:first-child {
	margin-top: 0;
}
#con-form .row .col-md-2 {
	height: 30px;
	line-height: 30px;
	border: 1px solid #ddd;
	background-color: #fafafa;
	font-weight: 700;
}
#con-form .row .col-md-2 strong {
	color: red;
	margin-right: 4px;
}
#con-form .row .col-md-10 {
	padding: 10px 15px;
	border: 1px solid #ddd;
	border-top: none;
	text-align: center;
}
#con-form .row .col-md-10 input {
	outline: none;
	width: 100%;
	height: 30px;
	padding: 0 4px;
	border: 1px solid #ddd;
	color: #555;
}
#con-form .row .col-md-10 select {
	-webkit-appearance: listbox;
	outline: none;
	width: 100%;
	height: 30px;
	padding: 0 4px;
	border: 1px solid #ddd;
	border-radius: 0px;
	color: #555;
	/* background: url('../images/inquiry_selectdown.jpg') right 11px no-repeat; */
}
#con-form .row .col-md-10 textarea {
	outline: none;
	resize: none;
	width: 100%;
	height: 105px;
	line-height: 20px;
	padding: 2px 4px;
	border: 1px solid #ddd;
	color: #555;
}
#con-form .row .col-md-10 input:focus,
#con-form .row .col-md-10 select:focus,
#con-form .row .col-md-10 textarea:focus {
	border-color: #666;
}
#con-form .row .col-md-10 .code-pic {
	float: right;
	width: 120px;
	height: 30px;
	margin-left: 10px;
}
#con-form .row .col-md-10 .code-blank {
	overflow: hidden;
}
#con-form .btn-item {
	margin-top: 10px;
	text-align: center;
}
#con-form .btn-item .btn-style {
  display: inline-block;
  margin: 10px 5px;
  width: 180px;
  height: 40px;
  line-height: 41px;
}
#con-form .btn-item .btn-style i {
	margin-top: -5px;
}
#con-form .goods {
	width: 145px;
	margin: 0 auto 10px;
	text-align: center;
}
#con-form .goods:last-child {
	margin: 0 auto;
}
#con-form .goods .image {
	position: relative;
	width: 145px;
	height: 100px;
}
/* 1125 新增使圖片符合區塊大小 */
#con-form .goods .image img {
	width: 100%;
}
#con-form .goods .image .delete {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin-top: -40px;
	margin-left: -25px;
	cursor: pointer;
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
#con-form .goods .image .delete.show {
	margin-top: -25px;
	opacity: 1;
}
@media screen and (min-width: 481px) {
	#con-form .row .list {
		text-align: left;
	}
	#con-form .goods {
		display: inline-block;
	}
}
@media screen and (min-width: 992px) {
	#con-form .row {
		display: table;
		margin: 0;
		padding: 0;
	}
	#con-form .row div[class*="col-"] {
		float: none;
		display: table-cell;
		vertical-align: middle;
	}
	#con-form .row .col-md-2 {
		padding: 0;
		text-align: center;
		border-top: none;
		background-color: #fff;
        width: 22%;
	}
	#con-form .row .col-md-10 {
		border-left: none;
	}
	#con-form .row:first-child .col-md-2,
	#con-form .row:first-child .col-md-10 {
		border-top: 1px solid #ddd;
	}
	#con-form .row:nth-child(even) .col-md-2,
	#con-form .row:nth-child(even) .col-md-10 {
		background-color: #fafafa;
	}
}

/*新聞列表*/
#news-list {
	/*max-width: 1000px;*/
	margin: 0 -15px 30px;
	font-size: 0;
}
@media screen and (max-width: 519px) {
	#news-list {
		margin: 0 auto 30px;
	}
}
#news-list .news-box {
	display: inline-block;
	width: 100%;
	font-size: 14px;
	/*border-bottom: 1px solid #ddd;
	padding-bottom: 20px;*/
	/*margin-bottom: 20px;*/
	cursor: pointer;
}
#news-list .news-box .photo {
	position: relative;
	width: 100%;
	max-width: 510px;
}
#news-list .news-box .photo img {
	width: 100%;
    /*border-radius: 20px;*/
}
#news-list .news-box .photo a {
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	background: rgba(0,0,0,.7);
	text-align: center;
	border-radius: 25px;
	top: 50%;
	left: 50%;
	margin-top: -40px;
	margin-left: -25px;
	opacity: 0;
}
#news-list .news-box .photo a.hover {
	margin-top: -25px;
	opacity: 1;
	color: #f7d400;
}
#news-list .news-box .date {
	line-height: 22px;
	margin: 10px auto 0;
	/*color: #e9c800;*/
	font-weight: bold;
}
#news-list .news-box .inner {
	position: relative;
	height: 100px;
}
#news-list .news-box .title {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	/*max-height: 48px;*/
	line-height: 24px;
	margin: 5px auto 5px;
	/*color: #000;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;*/
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
#news-list .news-box .title.show {
	max-height: 124px;
	background: #fff;
}
#news-list .news-box .summary {
	position: absolute;
	z-index: 9;
	top: 58px;
	height: 66px;
	line-height: 22px;
	color: #999;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	-webkit-transition: color 0.2s ease-in-out;
     -moz-transition: color 0.2s ease-in-out;
      -ms-transition: color 0.2s ease-in-out;
       -o-transition: color 0.2s ease-in-out;
          transition: color 0.2s ease-in-out;
}
#news-list .news-box .btn-view {
	margin-top: 10px;
}
#news-list .pager {
	opacity: 0;
}
#infscr-loading {
  text-align: center;
  z-index: 100;
  position: fixed;
  margin-left: -60px;
  left: 50%;
  bottom: 200px;
  width: 120px;
  padding: 10px;
  background: #000;
  opacity: 0.7;
  color: #FFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
#news-list .mb20 { margin-bottom: 20px; }
@media screen and (min-width: 520px) {
	#news-list .news-box {
		width: 50%;
		/*margin: 0 2% 20px;*/
        padding: 10px;
	}
}
@media screen and (min-width: 992px) {
	#news-list .news-box {
		width: 33.33333%;
		/*margin: 0 10px 20px;*/
	}
}

/*新聞詳細*/
#news-view {
	max-width: 1000px;
	margin: 0 auto 30px;
}
#news-view .ti-box {
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
}
#news-view .ti-box p {
	line-height: 20px;
	color: #e9c800;
	margin: 0 auto 5px;
	padding: 0;
	font-weight: bold;
}
#news-view .ti-box strong {
	line-height: 24px;
	font-size: 16px;
	color: #000;
}
#news-view .content {
	margin-top: 20px;
}
#news-view .content img {
	max-width: 100%;
	height: auto !important;
    border-radius: 0;
}
#news-view .content .photo {
	max-width: 510px;
	margin: 0 auto 10px;
}
#news-view .content .photo img {
	width: 100%;
}
#news-view .content .txt {
  font-size: 15px;
  color: #666;
  line-height: 24px;
}
@media screen and (min-width: 992px) {
	#news-view .ti-box p {
		float: right;
	}
	#news-view .ti-box strong {
		overflow: hidden;
	}
	#news-view .content {
		min-height: 350px;
	}
	#news-view .content .photo {
		width: 510px;
		float: left;
		margin-right: 20px;
	}
}

/* 1126 新增 sitemap */
#sitemap {
	font-size: 0;
	margin: 0 -15px;
}
#sitemap .site-box {
	display: inline-block;
	width: 100%;
	font-size: 14px;
	margin-bottom: 20px;
	padding: 0 15px;
	vertical-align: top;
}
@media (min-width: 480px) {
	#sitemap .site-box {
		width: 50%;
	}
	#sitemap .site-box.site-box-w {
		width: 100%;
	}
}
@media (min-width: 640px) {
	#sitemap .site-box.site-box-w {
		width: 50%;
	}
}
@media (min-width: 992px) {
	#sitemap .site-box,
	#sitemap .site-box.site-box-w {
		width: 33.33333%;
	}
}
#sitemap ul.site-main > li.ti {
	font-size: 15px;
	font-weight: 700;
	border-bottom: 1px solid #ddd;
	padding-bottom: 8px;
	margin-bottom: 8px;
}
#sitemap ul.site-main > li {
	line-height: 24px;
	padding: 0;
}
#sitemap ul.site-main > li:hover span {
	font-weight: 700;
	color: #e9c800;
	font-weight: bold;
}
#sitemap ul.site-main > li a {
	color: #666;
}
#sitemap ul.site-main > li a:hover {
	color: #e9c800;
}
#sitemap ul.site-sub > li {
	line-height: 24px;
}
#sitemap ul.site-sub > li > a {
	color: #666;
}
#sitemap ul.site-sub > li > a:hover {
	color: #000;
}

/* 活動詳細頁表單 */
.view-form-box .item-row{
	padding: 20px !important;
	display: block !important;
	border: 1px solid #ddd;
	border-top: none;
}

.view-form-box .item-row .title-item{
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 14px;
}

.view-form-box .item-row .label-box{
	padding-left: 30px;
}

.view-form-box input{
	outline: none;
	width: 100%;
	height: 30px;
	padding: 0 4px;
	border: none;
	border-bottom: 1px solid #ddd;
	color: #555;
}

#con-form.view-form-box input.other-input{
	display: inline-block;
	width: 120px;
	border-bottom: 1px solid #999;
	border-top: none;
	border-right: none;
	border-left: none;
	margin-top: -5px;
	background: none;
}

.view-form-box .label-box{
	text-align: left;
	padding-left: 3px;
	font-size: 0;
}
.view-form-box .radio{
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
}

.view-form-box label {
	font-size: 14px;
	color: #666;
	display: inline-block;
	padding: 5px 0;
	margin-right: 5px;
	margin-bottom: 0;
	position: relative;
	padding-left: 22px;
}

.view-form-box label.one-line{
	margin-right: 0;
	margin-bottom: 2px;
	width: 50%;
	padding-right: 10px;
}

.view-form-box .label-box label:last-child{
	margin-right: 0;
}

.view-form-box label .radio:checked + span i {
	-webkit-transform: scale(1) translate(-50%, -50%);
			-ms-transform: scale(1) translate(-50%, -50%);
					transform: scale(1) translate(-50%, -50%);
	opacity: 1;
}

.view-form-box label span {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	border: 1px solid #666;
	border-radius: 50%;
	margin: 1px 5px 0 0;
	position: relative;
	bottom: 2px;
	position: absolute;
	top: 5px;
	left: 0;
}

.view-form-box label span i {
	display: block;
	width: 6px;
	height: 6px;
	background: #666;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) scale(0);
			-ms-transform: translate(-50%, -50%) scale(0);
					transform: translate(-50%, -50%) scale(0);
	-webkit-transition: -webkit-transform .3s ease-in-out;
	transition: -webkit-transform .3s ease-in-out;
	-o-transition: transform .3s ease-in-out;
	transition: transform .3s ease-in-out;
	transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
	opacity: 0;
}

.view-form-box label span.square{
	border-radius: 0;
	overflow: hidden;
}
.view-form-box label span.square i{
	display: block;
	position: absolute;
	width: 10px;
	height: 6px;
	border-color: #fff;
	border-style: solid;
	border-width: 0 0 2px 2px;
	-webkit-transform: scale(0) rotate(-40deg);
	-ms-transform: scale(0) rotate(-40deg);
	transform: scale(0) rotate(-40deg);
	transition: -webkit-transform .2s;
	-webkit-transition: -webkit-transform .2s;
	-o-transition: transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s;
	top: 50%;
	left: 50%;
	margin-left: -5px;
	margin-top: -4px;
	border-radius: 0;
}
.view-form-box label .radio:checked + span.square{
	background: #666;
}
.view-form-box label .radio:checked + span.square i{
	-webkit-transform: scale(1) rotate(-40deg);
  -ms-transform: scale(1) rotate(-40deg);
  transform: scale(1) rotate(-40deg);
	opacity: 1;
}

@media (min-width: 992px) {
	#con-form.view-form-box .row .col-md-2{
		line-height: 1.42857143;
	}
	#con-form.view-form-box .row:nth-child(even) .col-md-2,
	#con-form.view-form-box .row:nth-child(even) .col-md-10{
		background: none;
	}
	#con-form.view-form-box .row:nth-child(even){
		background: #f7f7f7;
	}
}
@media (max-width: 991px) {
	.view-form-box .item-row{
		padding: 0 !important;
		margin-top: 20px !important;
	}
	.view-form-box .item-row .title-item{
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    font-weight: 700;
		padding: 5px 15px;
	}
	.view-form-box .item-row .label-box{
		padding: 0 20px;
	}
}
@media (max-width: 767px) {
	#con-form.view-form-box .row .col-md-2{
		height: auto;
		line-height: 1.4;
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.view-form-box label.one-line{
		width: 100%;
	}
}
.bootstrap-dialog-title{
	text-align: center;
}
.bootstrap-dialog-title i{
	font-size: 18px;
	display: inline-block;
}
.modal-body{
	text-align: center;
}
.bootstrap-dialog.type-warning .modal-header{
	background: #fff !important;
}
.bootstrap-dialog.type-info .modal-header{
	background: #fff !important;
}
.bootstrap-dialog .bootstrap-dialog-title{
	color: #333 !important;
	display: block !important;
	text-align: center !important;
}