@charset "utf-8";
/* CSS Document */


/* Header 배너영역 */
#spobee_container .header-banner-container { width:100%; height: 490px; position: relative; background:url("../../../img/sub/customer/customer_bg.png") no-repeat center; background-size: cover; }
#spobee_container .header-banner-container .title {width:100%; height:330px; margin:0 auto; padding-top:167px; padding-bottom:167px; text-align: center;}
#spobee_container .header-banner-container .title .text-area {color: #fff;}
#spobee_container .header-banner-container .title .text-area p:nth-child(1) {font-size:1.4rem; letter-spacing: 0.86em; color: #b6b6b6; font-weight: lighter; text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-left:9px;}
#spobee_container .header-banner-container .title .text-area p:nth-child(2) {font-size:4rem; letter-spacing: -0.02em; color: #fff;text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-top:10px;}

#spobee_container .header-banner-container .title .text-area p:nth-child(3) {font-size:2rem; letter-spacing: -0.025em; color: #fff; text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-top:10px; font-weight: lighter; line-height:32px; margin:10px auto; width:600px;}

/* Header 2depth */
#spobee_container .header-banner-container .sub-gnb {position:absolute; bottom:0; left:0; width:100%; height:80px; border-top:1px solid rgba(255,255,255,0.25);}
#spobee_container .header-banner-container .sub-gnb ul {width:900px; margin:0 auto;}
#spobee_container .header-banner-container .sub-gnb ul li { position:relative; float:left; width:50%; height: 100%; line-height: 80px; font-size:1.8rem; letter-spacing: -0.025em; text-align: center;}
#spobee_container .header-banner-container .sub-gnb ul li:after {display: block; content: ""; width:0; height:1px; background:#2ea7e0; position:absolute; top:-1px; left:50%; transition: left 0.25s ease, width 0.25s ease;}
#spobee_container .header-banner-container .sub-gnb ul li:hover:after { width: 100%; left: 0%; }
#spobee_container .header-banner-container .sub-gnb ul li a {color: #e6e6e6;display: block; width:100%; height:100%;}
#spobee_container .header-banner-container .sub-gnb ul li a:hover, #spobee_container .header-banner-container .sub-gnb ul li a.select {color: #2ea7e0;}
#spobee_container .header-banner-container .sub-gnb ul li.select_top_line:before {display: block; content: ""; width:100%; height:1px; background:#2ea7e0; position:absolute; top:-1px; left:0;}
@media all and (max-width: 1100px)
{
	#spobee_container .header-banner-container .sub-gnb ul {width:100%;}
}
@media all and (max-width: 640px)
{
	#spobee_container .header-banner-container .title {padding: 167px 20px 0;}
	#spobee_container .header-banner-container .title .text-area p:nth-child(3) {font-size:1.8rem; width:85%;}
}
@media all and (max-width: 540px)
{
	#spobee_container .header-banner-container .title {padding: 160px 10px 0;}
	#spobee_container .header-banner-container .title .text-area p:nth-child(2) {font-size:3rem;}	
	#spobee_container .header-banner-container .title .text-area p:nth-child(3) {font-size:1.6rem;}
	#spobee_container .header-banner-container .sub-gnb ul li {font-size:1.5rem; letter-spacing: -0.05em;}
}

/* 영역 공통 */
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area { width: 1100px; margin: 0 auto; padding: 80px 0; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area { display: block; text-align: center; margin: 0 auto 40px; position: relative; padding: 10px; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area h4 {position:relative; font-size:2.7rem; letter-spacing: -0.015em;color:#222;padding:25px 0; margin:0;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area h4:after {display:block;content:""; position:absolute; top:0; left:50%; margin-left:-15px;width:30px; height:3px; background:#2ea7e0;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area  .title-area p {letter-spacing: -0.015em; font-size: 1.7rem; color: #939393; }
@media all and (max-width: 1100px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area { width: 100%; padding: 80px 20px; }
}
@media all and (max-width: 640px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area { width: 100%; padding: 15px; height: auto; }
}



/* 고객문의 */
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table { border-top:1px solid #000; width: 100%;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table tr  {border-bottom:1px solid #d9d9d9; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table tr .ver-t {vertical-align: top;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table th { font-size:1.5rem; letter-spacing: -0.025em; color:#333; padding: 30px 15px; width:30%; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table tr:nth-child(6) th {padding:50px 15px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table th .sm {display: inline-block; padding-left:5px; font-size:1.4rem; color:#c75151;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table select { display: block; width:50%; height:45px; font-size:1.5rem; color: #b3b3b3; letter-spacing: -0.025em; padding: 0 18px; border:1px solid #d9d9d9;-webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("../../../img/sub/customer/select_arrow.png") no-repeat 95% 50%;}
select::-ms-expand {display: none;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table .select-ex {position:relative; display: inline-block; width:160px; height:30px; line-height:30px; padding-left:10px; background:#eaebf7; margin:10px 0 0; margin-right:10px; font-size:1.3rem; color: #424351;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table .select-ex img {position:absolute; top:10px; right:10px; cursor: pointer;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table select option {color: #555;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table tr td > input { width:100%; height:45px; border: 1px solid #d9d9d9; font-size:1.5rem; letter-spacing: -0.025em; padding: 0 18px; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table textarea {width:100%; margin:20px 0; padding:10px; border:1px solid #d9d9d9; resize: none;}
@media all and (max-width: 1100px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table th {padding: 18px 10px; width: 35%;}
}
@media all and (max-width: 640px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table select {width: 100%;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table .select-ex {width:140px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table th .sm {display: block;padding:0; padding-top:5px;}
}

/* 파일첨부 버튼 */
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table tr td .file_wrap {position:relative; width:100%; height:100%;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table tr td .file_wrap input {position: absolute; top:0; right:0; width:100px; height:45px; opacity: 0; z-index: 1;cursor: pointer;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table tr td .file_wrap .file_btn {position: absolute; top:0; right:0; width:100px; height:45px; line-height:45px; text-align: center; background:#8c8b90; font-size:1.5rem; color:#fff; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table tr td .file_wrap label {cursor:default; width:100%; height:45px; line-height: 45px; border:1px solid #eee; display: inline-block; padding-left:18px;}
@media all and (max-width: 640px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area table tr td .file_wrap .file_btn, #spobee_container .main-contents-area-wrap .contents-area-container .contents-area table tr td .file_wrap input {width:70px;}
}


/* 견적신청하기 버튼 */
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .request-btn { width:550px; height:60px; line-height: 60px; margin: 0 auto; margin-top:40px; background:#2ea7e0; text-align: center;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .request-btn button { background: none; border: 0; color: #fff; font-size:1.6rem; width: 100%; height: 100%; }
@media all and (max-width: 1100px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .request-btn {width:50%;}
}
@media all and (max-width: 640px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .request-btn {width:100%; margin-top:10px;}
	.file_input label {width:70px; font-size:1.3rem;}
}



/*faq */

.faq-wrap {border-top:1px solid #7e7e7e;}
.faq-box .question-wrap {padding:20px 10px; border-bottom: 1px solid #d5d5d5; cursor:pointer;}
.faq-box .question-wrap:hover {background:#f7f7f7;}
.faq-box .question-wrap > .faq-content {width:100%; padding:0 40px 0 10px; position: relative; font-size:1.5rem;}
.faq-box .question-wrap .arrow {position: absolute; right:10px; top:0px; color:#a3a3a3}
.faq-box .question-wrap .arrow img {width:24px; height:24px;}
.faq-box .anwser-area {display: none; padding:20px 20px 20px 50px; border-bottom:1px solid #d5d5d5; font-size:1.5rem;background:#f7f7f7;}
.faq-box.on .question-wrap > .faq-content {font-weight:600;}
.faq-box.on .anwser-area {display:block;}
.faq-box span.point {font-weight:600; color:#2ea7e0; float:left; padding-right:10px}
.faq-box.on .anwser-area p {display: inline-block; float:left; width:calc(100% - 30px); white-space: pre-wrap;}
.faq-box.on .question-wrap .arrow {transform:rotate(180deg);}


@media(max-width:1024px) {
    .faq-box .anwser-area {padding:20px}
}

@media(max-width:768px) {
    .faq-box .question-wrap > .faq-content {font-size:1.5rem;}
    .faq-box .anwser-area {font-size:1.5rem;}
}

@media(max-width:580px) {
    .sec-tab ul > li:nth-child(2):after, .sec-tab ul > li:nth-child(4):after {position: absolute; content:''; right:0; width:1px; height:12px; top:50%; transform:translateY(-50%); background:#d1d1d1}
    
}

@media(max-width:530px) {
    .faq-box .question-wrap > .categ {width:100%; float:none; padding-bottom:5px; text-align: left;}   
    .faq-box .question-wrap > .faq-content {width:100%; float:none; padding: 0 40px 0 0}
    .faq-box .anwser-area { padding:15px;}
    
}