@charset "UTF-8";

.contact .boxTxt{text-align:center; margin:0 0 40px; font-style:italic; text-transform:uppercase; font-size:16px;}
.contact .boxIntro{text-align:center; margin:0 0 40px; font-size:14px;}
.contact .boxIntro i{color:#af4983; font-size:40px; margin:0 0 20px;}
.contact .boxIntro span{display:inline-block;}
.contact #subNav{margin:0 0 20px;}
.contact #subNav li{float:left; width:25%; text-align:center;}
.contact #subNav li span{display:inline-block; padding:0 0 5px; border-bottom:2px solid #fff; font-weight:bold; cursor:pointer;}
.contact #subNav li:hover span, .contact #subNav li.active span{border-bottom:2px solid #af4983; color:#af4983;}
.contact .boxMap {margin:0 0 40px; display:none;}

.contact .boxAdd {font-weight:bold; margin:0 auto 40px; display: none;}
.contact .boxAdd li {float: left; width: 32%; margin: 0 2% 2% 0;}
.contact .boxAdd li:nth-of-type(3n) {margin: 0 0 2% 0;}
.contact .boxAdd li:nth-of-type(3n+1) {clear: both;}
.contact .boxAdd p{font-weight:normal; margin:0 0 10px;}

#placeMarker {margin: 0 auto 20px;}
#placeMarker .left {width: 65%; float: left;}
#placeMarker .right {width: 33%; float: right;}

#map {height: 700px;}

#boxForm {max-width:550px; margin:0 auto 80px;}
#boxForm .tit{font-size:16px; font-style:italic; font-weight:bold; margin:0 0 30px; text-align:center;}
#boxForm ul {margin: 0 0 30px;}
#boxForm li{width:100%; margin:0 0 15px;}
#boxForm li:nth-of-type(2){width:47%; float:left;}
#boxForm li:nth-of-type(3){width:47%; float:right;}
#boxForm li:nth-of-type(4){clear:both;}
#boxForm li:last-of-type {margin: 0;}
#boxForm li p span {color: red;}
#boxForm form > p {margin: 0 0 20px;}
#boxForm form > p > span {color: red;}
#boxForm input, #boxForm textarea{width:100%; padding:5px; border:1px solid #000; background:none; font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 14px;}
#boxForm textarea{height:100px; resize:none;}
#boxForm .error {color: #ff0000;}

@media screen and (max-width: 736px){
	.contact .boxMap iframe{height:320px !important;}
	#placeMarker .left {width: 100%; float: none;}
	#placeMarker .right {width: 100%; float: none;}
	#map {height: 400px;}
}

@media screen and (max-width: 480px){		
	.contact .boxTxt{font-size:14px;}
	.contact #subNav li{width:50%; margin:0 0 15px;}
	.contact .boxMap{margin:0 0 30px;}
	.contact .boxMap iframe{height:280px !important;}

	.contact .boxAdd li {float: none; width: 100%; margin: 0 0 15px 0 !important;}

	#boxForm li{width:100% !important; float:none !important;}
}