@charset "utf-8";
/* #2463cc */

/* top */
.contact_t {width:100%; height:500px;  display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; position:relative; overflow:hidden;}
.contact_t .contact_t_back { background:url("../image/contact/bg.jpg") top center no-repeat fixed; background-size:contain; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1;}
.contact_t h3 {color:inherit; font-weight:400; padding-top:100px;}
.contact_t p {color:inherit; padding-top:20px; text-align:center; line-height:140%;}

.contact_wrap {/*width:83.33333333333333%; 1600*/ width:100%; height:auto; box-sizing:border-box; padding:6vh 0 0; margin:0 auto;}
	.contact_wrap h4 {/*background:#7c7c7c; color:#fff; */text-align:center; padding:10px 0; font-weight:400;}


.contact_info {width:100%; max-width:1200px; height:auto; margin:0 auto 50px; display:flex; justify-content:space-around; text-align:left;}
	.contact_info li {width:100%; padding:0 2%; box-sizing:border-box; display:flex; align-items:center;}

	.contact_info li strong {display:block; padding-bottom:5px;}
	.contact_info li .nb {display:block;}
	.contact_info li i {display:block; width:60px; height:60px; margin-right:30px; background-size:100%; background-repeat:no-repeat; background-position:center;}
	.contact_info li div {line-height:150%; word-break:keep-all;}
	.contact_info li .ico_add {background-image:url("../image/contact/ico_mark.png");}
	.contact_info li .ico_tel {background-image:url("../image/contact/ico_tel.png");}
	.contact_info li .ico_time {background-image:url("../image/contact/ico_clock.png");}

#map {width:100%; max-width:1200px; /*height:600px;*/ margin:0 auto 8%; border:1px solid #d7d7d7; box-sizing:border-box;}

#gallery {width:100%; max-width:1200px; height:640px; margin:20px auto 8%; position:relative; overflow:hidden;}
	.gallery_item { width:100%; height:inherit; position:absolute;   z-index:1; }
	.gallery_item iframe {width:100%; height:100%;}

	#gallery_btns {text-align:center;}
	#gallery_btns ul li {display:inline-block;}
	#gallery_btns ul li a {display:inline-block; background:#fff; border:1px solid #d7d7d7; line-height:3em; padding:0 2em;}
	#gallery_btns ul li a.active {background:#2463cc; border:1px solid #2463cc; color:#fff;}

	@media screen and (max-width: 1600px) {
		.contact_t .contact_t_back {background-size:auto;}
	}
	@media screen and (max-width: 1024px) {
		.contact_t {height:340px;}
		.contact_t .contact_t_back {background-attachment:scroll; background-size:cover;}
		.contact_t h3 {padding-top:50px;}

		.contact_info {width:90.66%; flex-wrap:wrap; justify-content:flex-start;}
		.contact_info li {width:50%; margin-bottom:20px;}
		.contact_info li:last-child {margin-bottom:0;}
		#map, #gallery {width:90.66%; margin-bottom:10vh;}
	}
	@media screen and (max-width: 800px) {
		.contact_t p .nb {display:block;}

		.contact_info {display:block;}
		.contact_info li {width:100%;}
		.contact_info li i {width:25%; background-size:48px; margin-right:0;}
		.contact_info li div {width:75%;}
		.contact_info li div .nb {display:inline-block;}

		#map {height:320px;}
		#gallery {height:320px;}

		#gallery_btns ul li {width:120px;}
	}

/* online form */
	.online_frm {width:100%; height:auto; background:url("../image/customer/bg_ctm3.jpg") top center no-repeat; background-size:cover; 
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top, #ffffff 0%, #a9cbe5 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #ffffff 0%,#a9cbe5 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #ffffff 0%,#a9cbe5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a9cbe5',GradientType=0 ); /* IE6-9 */
		display:flex; align-items:center; padding:0 0 6%;
	}
	.counsel_box {width:780px; height:auto; box-sizing:border-box; padding:60px; margin:0 auto; background:rgba(255,255,255,0.8); text-align:center; color:#4a4545;}
	.counsel_box h3 {color:inherit; font-weight:400;}
	.counsel_box p {color:inherit; padding-top:10px;}
	.counsel_box fieldset {width:100%; height:auto; margin:30px auto 0;}
	.counsel_box fieldset ul {text-align:left;}
	.counsel_box fieldset ul li {display:flex; align-items:center; padding:15px 0; border-bottom:1px solid #cbcbcc;}
	.counsel_box fieldset ul li label {display:block; width:100px; border-right:1px solid #adb0b4; position:relative; box-sizing:border-box; padding-left:10px;}
	.counsel_box fieldset ul li label:before {content:''; width:3px; height:3px; border-radius:100%; background:#2463cc; position:absolute; top:13px; left:0;}
	.counsel_box fieldset ul li > span {display:block; width:80%; display:flex; box-sizing:border-box; padding-left:20px;}
	.counsel_box fieldset ul li input {width:100%; height:40px; border:0; background:none;}
	.counsel_box fieldset ul li textarea { width:100%; height:150px; border:0; background:none;}
	.counsel_box fieldset ul li select {width:160px; height:40px;}
	.counsel_box fieldset ul li:last-child {align-items:flex-start;}
	.counsel_box .personal_info {text-align:left; margin-top:30px;}
	.counsel_box .personal_info a {text-decoration:underline; color:#000;}
	.counsel_box button {display:inline-block; background:#2463cc; color:#fff; font-size:18px; line-height:3em; padding:0 2em; margin-top:30px; border-radius:2px;}

	@media screen and (max-width: 1024px) {
		.counsel_box {width:76.171875%; padding:50px;}
	}
	@media screen and (max-width: 768px) {
		.online_frm {height:auto; padding:0 0 3em;}
		.counsel_box button {font-size:16px;}
	}
	@media screen and (max-width: 740px) {
		.counsel_box {width:90.66%; padding:30px;}
		.counsel_box p .nb {display:block;}
		.counsel_box fieldset ul {width:100%;}
		.counsel_box fieldset ul li {padding-bottom:10px;}
		.counsel_box fieldset ul li > span {width:100%;}
		.counsel_box fieldset ul li #date {width:50%;}
		.counsel_box fieldset ul li select {width:50%;}
		.counsel_box fieldset ul li:last-child {display:block;}
		.counsel_box fieldset ul li:last-child span {width:100%; padding-left:0;}
		.counsel_box fieldset ul li textarea {margin-top:10px;}
		.counsel_box .personal_info {text-align:center;}
		.counsel_box button {font-size:14px;}
	}
	/* modal - layer */
	.bg_layer { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:1; transition:0.6s ease;}
	.layer_box { display:none; width:auto; height:auto; box-sizing:border-box; padding:40px 50px 40px 40px; background:#fff; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2; text-align:center; transition:0.6s ease;}
	.layer_box ol { margin:20px 15px 0; text-align:left;}
	.layer_box ol li { list-style:decimal; line-height:160%; color:#797979; }
	.layer_box .bt_close { display:inline-block; border:1px solid; border-radius:4px; padding:10px 20px; margin-top:20px; font-size:13px; }
	.layer_box .bt_close:hover { background:#e1d8cd; border:1px solid #e1d8cd; }

	@media screen and (max-width: 740px) {
		.layer_box { }
	}