@charset "utf-8";
/* CSS Document */
.customer-support-area .customer-support { width: 1180px; margin: 0 auto; }
.customer-support-area .customer-support .page-title { text-align: center; margin-bottom: 40px; }
.customer-support-area .customer-support .page-title h2 { font-size: 3.2rem; margin-bottom: 30px; font-weight: 500; line-height: 42px; }

.customer-support-area .customer-support .faq-navi { margin-bottom: 80px; }
.customer-support-area .customer-support .faq-navi .navi-box { background: #F5F7F9; width: 380px; padding: 30px; float: left; margin-right: 20px; }
.customer-support-area .customer-support .faq-navi .navi-box:last-child { margin-right: 0; }
.customer-support-area .customer-support .faq-navi .navi-box .title-area { position: relative; margin-bottom: 20px; }
.customer-support-area .customer-support .faq-navi .navi-box .title-area h3 { font-size: 2rem; font-weight: bold; display: block; }
.customer-support-area .customer-support .faq-navi .navi-box .title-area .more-btn { width: 30px; height: 30px; display: block; background: rgba(0,0,0,0.1); position: absolute; right: 0; top: 0; padding: 5px; border-radius: 50%; opacity: .5; }
.customer-support-area .customer-support .faq-navi .navi-box .title-area .more-btn img { width: 100%; opacity: .7; }
.customer-support-area .customer-support .faq-navi .navi-box .title-area .more-btn:hover { opacity: 1; }
.customer-support-area .customer-support .faq-navi .navi-box ul li { margin-bottom: 3px; }
.customer-support-area .customer-support .faq-navi .navi-box ul li a { font-size: 1.5rem; color: #666; font-weight: 400; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.customer-support-area .customer-support .faq-navi .navi-box ul li a:hover { text-decoration: underline; color: #222; }

.customer-support-area .customer-support .faq { position: relative; }
.customer-support-area .customer-support .faq .faq-list { width: 100%; }
.customer-support-area .customer-support .faq .faq-list ul li { border-bottom: 1px solid #eee; }
.customer-support-area .customer-support .faq .faq-list ul li a.question { padding: 20px 80px 20px 15px; display: block; position: relative; transition: background .25s ease; }
.customer-support-area .customer-support .faq .faq-list ul li a.question:hover { background: #f8f8f8; }
.customer-support-area .customer-support .faq .faq-list ul li a.question .label { padding: 2.5px 15px; border-radius: 30px; margin-right: 10px; font-size: 1.3rem; background: #dee3eb; }
.customer-support-area .customer-support .faq .faq-list ul li a.question .title { width: 100%; font-size: 1.6rem; font-weight: 500; line-height: 20px; }
.customer-support-area .customer-support .faq .faq-list ul li a.question .date { position: absolute; top: 20px; right: 15px; color: #b5b5b5; }

.customer-support-area .customer-support .faq .list-navi { border-bottom: 1px solid #000; }
.customer-support-area .customer-support .faq .list-navi ul { float: left; padding-bottom: 15px;}
.customer-support-area .customer-support .faq .list-navi ul li { display: inline-block; text-align: center; }
.customer-support-area .customer-support .faq .list-navi ul li:last-child { border-bottom: none; }
.customer-support-area .customer-support .faq .list-navi ul li a { border-radius: 50px; padding: 8px 25px; display: block; font-size: 1.35rem; position: relative; background: #dee3eb; margin: 0 3px 5px; font-weight: 600; }
.customer-support-area .customer-support .faq .list-navi ul li.select a { background: #0017C1; color: #fff; }
.customer-support-area .customer-support .faq .list-navi .breadcrumb-area { float: right; border: 0; height: auto; padding-bottom: 15px;}
.customer-support-area .customer-support .faq .list-navi .breadcrumb-area .breadcrumb { width: auto; display: inline-block; }
.customer-support-area .customer-support .faq .list-navi .breadcrumb-area .breadcrumb .search-area { float: none; padding: 0; }
.customer-support-area .customer-support .faq .list-navi .breadcrumb-area .breadcrumb .search-area .search-btn { top: 0; }


.inquiry-area { margin-top: 150px; background: url(../../img/support/banner_bg.png); height: 300px; background-size: cover; background-position: center; }
.inquiry-area .inquiry { width: 1180px; margin: 0 auto; height: 100%; text-align: center; padding: 80px 0; }
.inquiry-area .inquiry h4 { font-size: 2.2rem; font-weight: 500; margin-bottom: 10px; color: #fff; }
.inquiry-area .inquiry p { font-size: 1.6rem; font-weight: 300; color: #fff; }
.inquiry-area .inquiry .inquiry-btn { font-size: 1.5rem; height: 45px; padding: 0 30px; border: 1px solid #fff; display: inline-block; line-height: 43px; border-radius: 25px; margin-top: 25px; transition: background .25s ease, border-color .25s ease, color .25s ease; color: #fff; }
.inquiry-area .inquiry .inquiry-btn:hover { color: #fff; background: #001AD9; border-color: #001AD9; }

@media all and (max-width: 1279px)
{
	.customer-support-area .customer-support { width: 100%; padding: 0 30px; }
	.customer-support-area .customer-support .faq-navi .navi-box { width: 32%; margin-right: 2%; }
	.customer-support-area .customer-support .faq-navi .navi-box:last-child { margin-right: 0; }
	
	.inquiry-area .inquiry { width: 100%; padding: 80px 30px; }
}
@media all and (max-width: 1040px)
{
	.customer-support-area .customer-support .faq .list-navi ul { float: none; text-align: center; }
	.customer-support-area .customer-support .faq .list-navi .breadcrumb-area { float: none; text-align: center; }
}
@media all and (max-width: 960px)
{
	.customer-support-area .customer-support .faq .list-navi .breadcrumb-area .breadcrumb { padding: 0; width: 100%; }
}
@media all and (max-width: 840px)
{
	.customer-support-area .customer-support .faq-navi .navi-box { padding: 15px; }
	.customer-support-area .customer-support .faq-navi .navi-box .title-area { margin-bottom: 10px; }
	
	.inquiry-area { margin-top: 50px; height: 200px; }
	.inquiry-area .inquiry { width: 100%; padding: 40px 30px; }
	.inquiry-area .inquiry .inquiry-btn { height: 40px; line-height: 38px; margin-top: 20px; }
	.customer-support-area .customer-support .faq-navi .navi-box { width: 100%; margin-right: 0; margin-bottom: 20px; }
	.customer-support-area .customer-support .faq .faq-list { width: 100%; }
	.customer-support-area .customer-support .faq .list-navi { position: relative; right: auto; top: 0; width: 100%; }
}
@media all and (max-width: 475px) {
	.customer-support-area .customer-support .faq .faq-list ul li a.question { padding: 10px 0; }
	.customer-support-area .customer-support .faq .faq-list ul li a.question .label { margin-right: 5px; }
	.customer-support-area .customer-support .faq .faq-list ul li a.question .date { position: static; top: auto; right: auto; margin-top: 10px; }
}