@charset "utf-8";
/**************************************************

	SUPERBOARD :: BOARD SKIN :: gallery

**************************************************/
#sb-gallery{margin: -1%;}
#sb-gallery > li{position: relative;display: inline-block;*display: inline;*zoom: 1;vertical-align: top;margin: 1%;width: 31.33%;}
#sb-gallery > li .link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 1px solid rgba(0,0,0,0);box-sizing: border-box;}
#sb-gallery > li .tmb{padding-bottom: 52%;border: 1px solid #dddddd;text-align: center;background-position: center center;background-size: contain;}
#sb-gallery > li .infobox{border: 1px solid #dddddd;border-width: 0 1px 1px 1px;padding: 25px 15px;}
#sb-gallery > li .infobox .sbj{display: block;margin-bottom: 10px;font-size: 16px;line-height: 20px;color: #333333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#sb-gallery > li .infobox .info > li{position: relative;display: table;*display: inline;*zoom: 1;vertical-align: top;margin-right: 20px;font-size: 12px;color: #333333;}
#sb-gallery > li .infobox .info > li:after{position: absolute;top: 50%;right: -12px;margin-top: -6px;content: '';display: block;width: 1px;height: 12px;background: #dddddd;}
#sb-gallery > li .infobox .info > li:last-child:after{display: none;}
#sb-gallery > li:hover .link{border-color: #000;}
#sb-gallery > li:hover .infobox .sbj{text-decoration: underline;}

#sb-form{}
#sb-form fieldset{margin-bottom: 50px;}
#sb-form legend{margin-bottom: 15px;font-size: 18px;color: #000000;}
#sb-form .privacy{height: 156px;overflow-y: scroll;background: #f7f7f7;border: 1px solid #eee;padding: 5px 15px 15px 15px;font-size: 13px;line-height: 18px;color: #666;margin-bottom: 10px;}
#sb-form .agree{display: block;text-align: right;font-size: 14px;}
#sb-form .form_tbl .w33{width: 150px;}
#sb-form .form_tbl .w50{width: auto;}
#sb-form .form_tbl .inp,
#sb-form .form_tbl select{display:inline-block;vertical-align:middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:35px;line-height:35px;border:1px solid #ddd;border-radius: 3px;}
#sb-form .form_tbl .inp{text-indent:10px;}
#sb-form .form_tbl select{padding-left:7px;}
#sb-form .form_tbl{width: 100%;border-top: 2px solid #545c73;}
#sb-form .form_tbl tr > *{position: relative;padding: 15px 10px;border: 1px solid #dddddd;border-width: 0 0 1px 0;font-size: 14px;line-height: 18px;text-align: center;}
#sb-form .form_tbl tr th{background: #f7f7f7;font-weight: normal;}
#sb-form .form_tbl tr td{text-align: left;}
#sb-form .form_tbl textarea{width:100%;border:1px solid #ddd;border-radius: 3px;padding:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

@media screen and (max-width: 750px) {
	#sb-form fieldset{margin-bottom: 20px;}
	#sb-form legend{margin-bottom: 10px;font-size: 14px;}
	#sb-form .form_tbl .inp{text-indent:5px;}
	#sb-form .form_tbl select{padding-left:4px;}
	#sb-form .privacy{height: 100px;padding: 10px;font-size: 12px;line-height: 15px;}
	#sb-form .agree{font-size: 12px;}
	#sb-form .form_tbl colgroup{display: none;}
	#sb-form .form_tbl tr > *{padding: 5px 3px;font-size: 11px;line-height: 15px;}
	#sb-form .form_tbl tr th{width: 80px;}
	#sb-form .form_tbl select{width: 100%;}
	#sb-form .form_tbl textarea{height: 150px;}
	#sb-form .form_tbl .inp{width: 100%;}
	#sb-form .form_tbl .w33{width: 30.5%;}
	#sb-form .form_tbl .w50{width: 46%;}
	#wm_email_select{margin-top:6px;}
}

.info > li:nth-child(2) {
	width: 75%;
	margin: 0 auto;
}

#sb-gallery .btn {
	border-radius: 30px;
	border: 1px solid #999;
	padding: .5rem;
	width: 100%;
	display: block;
	text-align: center;
	font-weight: 800;
	font-size: 16px;
	z-index: 999;
	margin: 0 auto;	
}

#sb-gallery li .btn {
	width: 80%;
}

#sb-wrap input{
	cursor: auto !important;
}

#sb-view .titWrap{
	border-top: none;
	border-bottom: none;
	padding: none;
}

#sb-view .titWrap .sbj{
	font-size: 2.625rem;
	line-height: 1.2;
	font-weight: 700;
}

#sb-view .memoWrap{
	display: flex;
	padding: 10px;
	border-bottom: none;
}

#sb-view .content{
	width: 60%;
	padding: 2rem 2rem 2rem 10px;
}

#sb-view .overviewForm{
	width: 40%;
	padding: 2rem;
}

.sb-area {
	width: 100%;
}

.sb-area p::after{
	content: "※필수";
	color: red;
	margin-left: .5rem;
}

.sb-area:nth-child(n+2){
	margin-top: .5rem;
}

#sb-form input[type="text"], select {
    border-radius: 5px !important;
    border: 1px solid #c9c9c9;
    width: 100% !important;
}

.checkbox-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.checkbox-area {
    display: flex;
    width: 25%;
}

.checkbox-area input[type="checkbox"] {
    width:20px;
    position: relative;
    margin-top: 7px;
}

.checkbox-area label {
    display: inline-block;
    width: 100px;
    line-height: 50px;
    vertical-align: middle;
    margin-left: 1rem;
}

.agree {
    text-align: center !important;
}

.submit-area {
    display: flex;
}

#form-submit {
    text-align: center;
    padding: 10px 30px;
    font-size: 20px;
    color: #fff !important;
    letter-spacing: -1px;
    border-radius: 35px;
    background: #2a5aa8;
    text-decoration: none !important;
    margin: 0 auto;
}

@media screen and (max-width: 750px) {
	#sb-gallery > li{width: 48%;}
	#sb-gallery > li .infobox{padding: 15px 10px;}
	#sb-gallery > li .infobox .sbj{font-size: 14px;line-height: 18px;}
	#sb-gallery > li .infobox .info > li{margin-right: 10px;font-size: 11px;}
	#sb-gallery > li .infobox .info > li:after{right: -5px;}
}

@media (max-width: 1024px){
	#sb-view .titWrap .sbj{
		font-size: 1.625rem;
	}

	#sb-view .titWrap {
		padding: 10px;
	}

	#sb-view .memoWrap {
		display: block;
	}

	#sb-view .content {
		width: 90%;
		padding: 0;
	}

	#sb-view .memoWrap img {
		max-width: 100%;
	}

	#sb-view .overviewForm {
		width: 80%;
		margin: 0 auto;
	}
}

@media (max-width: 563px){
	.checkbox-div {
		justify-content: flex-start;
	}

	.checkbox-area {
		width: 33%;
	}

	#sb-view .memoWrap img {
		max-width: 100%;
	}
}

@media (max-width: 443px){
	.checkbox-area {
		width: 50%;
	}
}