@charset "utf-8";

.cs .off {display:none !important;}
.cs a.more {display:block; width:100%; margin-top:16px; line-height:50px; font-weight:600; text-align:center; border:1px solid #ededed; border-radius:3px; box-sizing:border-box;}

/* 메인 */
.cs.main .button {padding-bottom:20px; margin-top:14px; text-align:center;}
.cs.main .button a {display:block; width:200px; margin:0 auto; font-size:16px; font-weight:600; line-height:46px; color:#fff; background-color:#333; border-radius:3px;}

.cs.main .cs-area {border-top:8px solid #f6f8fa;}
.cs.main .cs-area.none {margin-top:0; border-top-style:none;}
.cs.main .cs-area h3 {position:relative; padding:16px 0; margin:0 16px; font-size:16px; font-weight:600; border-bottom:1px solid #f0f2f4;}
.cs.main .cs-area h3 a {display:none; position:absolute; right:0; top:18px; padding-right:12px; font-size:13px; font-weight:400; line-height:17px; background:url(../images/icon-go-2.png) no-repeat right center; background-size:auto 13px;}

.cs.main .call {padding:16px; border-top:8px solid #f6f8fa;}
.cs.main .call h3 {font-size:16px; font-weight:600;}
.cs.main .call > ul > li {position:relative; display:flex; flex-direction:column; padding:16px; padding-right:60px; margin-top:12px; border:1px solid #ebedee; border-radius:3px;}
.cs.main .call > ul > li > strong {font-size:16px; line-height:18px;}
.cs.main .call > ul > li > p {margin-top:12px; color:#a0a0a0; word-break:keep-all;}
.cs.main .call > ul > li > a {position:absolute; right:16px; top:50%; transform:translateY(-50%); display:block; width:44px; height:44px; font-size:0; line-height:0; background-repeat:no-repeat; background-size:100% auto;}
.cs.main .call > ul > li.cs-01 > a {background-image:url(../images/cs-01.png);}
.cs.main .call > ul > li.cs-02 > a {background-image:url(../images/cs-02.png);}
.cs.main .call > ul > li.cs-03 > a {background-image:url(../images/cs-03.png);}

/* 목록 */
.cs .cs-area .article-list > dl {margin:0 16px; border-top:1px solid #f0f2f4;}
.cs .cs-area .article-list > dl:first-child {border-top-style:none;}
.cs .cs-area .article-list > dl > dt {padding:16px 0; font-weight:600; line-height:18px;}
.cs .cs-area .article-list > dl > dt > a {display:block; padding-right:18px; background:url(../images/menu-down.png) no-repeat right 6px;}
.cs .cs-area .article-list > dl > dt > a > span {color:#888;}
.cs .cs-area .article-list > dl > dd {display:none; padding:16px; line-height:23px; background-color:#f6f8fa;}
.cs .cs-area .article-list > dl > dd > img {max-width:100%;}
.cs .cs-area .article-list > dl > dd > ul {margin-top:16px;}
.cs .cs-area .article-list > dl > dd > ul > li {margin-top:8px;}
.cs .cs-area .article-list > dl > dd > ul > li:first-child {margin-top:0;}
.cs .cs-area .article-list > dl > dd > ul > li > a {display:inline-block; padding-left:20px; line-height:15px; background:url(../images/icon-download.png) no-repeat left center; background-size:auto 15px;}
.cs .cs-area .article-list > dl.on > dt > a {background-image:url(../images/menu-up.png);}
.cs .cs-area .article-list > dl.on > dd {display:block; margin:0 -16px;}
.cs .cs-area .article-list > dl.on + dl {border-top-style:none;}

.cs .cs-area form div {display:flex; padding:16px; border-bottom:1px solid #f0f2f4;}
.cs .cs-area form div > input {width:calc(100% - 54px); height:46px; border-right-style:none;  border-radius:3px 0 0 3px;}
.cs .cs-area form div > button {width:54px; height:46px; border:1px solid #dcdee0; border-left-style:none; background:url(../images/icon-search.png) no-repeat center center; background-size:22px auto; border-radius:0 3px 3px 0;}
.cs .cs-area form a {display:none; font-weight:500; text-decoration:underline;}

.cs .cs-area .cate {border-bottom:1px solid #f0f2f4;}
.cs .cs-area .cate > ul {height:48px; margin:0 16px; white-space:nowrap; overflow-x:auto; overflow-y:hidden;}
.cs .cs-area .cate > ul::-webkit-scrollbar {display:none;}
.cs .cs-area .cate > ul > li {display:inline-block; margin-left:20px;}
.cs .cs-area .cate > ul > li:first-child {margin-left:0;}
.cs .cs-area .cate > ul > li > a {display:block; font-weight:600; line-height:46px; color:#a0a0a0; border-bottom:2px solid #fff;}
.cs .cs-area .cate > ul > li > a.on {color:#333; border-bottom-color:#333;}

.cs .cs-area a.more {width:calc(100% - 32px); margin:0 16px;}

/* 문의 */
.cs.inquiry .notice {margin:16px; padding:16px; line-height:22px; border:1px solid #f0f2f4; background-color:#f6f8fa; border-radius:3px;}
.cs.inquiry .notice > strong {display:block; margin-bottom:12px; font-weight:400; line-height:18px;}
.cs.inquiry .notice > strong > s {display:inline-block; width:15px; height:15px; margin-right:4px; background:url(../images/icon-time.png) no-repeat center center; background-size:100% auto; vertical-align:middle;}
.cs.inquiry .notice > strong > em {display:inline-block; margin-left:4px; font-size:16px; font-weight:600; font-style:normal; vertical-align:middle;}
.cs.inquiry .notice > a {text-decoration:underline;}
.cs.inquiry .button {padding-bottom:16px; text-align:center;}
.cs.inquiry .button > button {width:200px; height:46px; font-size:16px; font-weight:600; color:#fff; background-color:#333; border-radius:3px;}

.cs.inquiry .inqr-list {border-top:8px solid #f6f8fa;}
.cs.inquiry .inqr-list > div > dl {border-top:1px solid #f0f2f4;}
.cs.inquiry .inqr-list > div > dl:first-child {border-top-style:none;}
.cs.inquiry .inqr-list > div > dl > dt {padding:16px; font-size:16px; font-weight:600; line-height:18px;}
.cs.inquiry .inqr-list > div > dl > dt > a {position:relative; display:block; padding-right:80px;}
.cs.inquiry .inqr-list > div > dl > dt > a > strong {display:block; margin-top:8px; font-weight:400; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.cs.inquiry .inqr-list > div > dl > dt > a > em {display:block; margin-top:6px; font-size:14px; font-weight:400; line-height:16px; color:#a0a0a0;}
.cs.inquiry .inqr-list > div > dl > dt > a > span {position:absolute; right:0; top:18px; display:inline-block; padding:0 12px; font-size:12px; font-weight:400; line-height:30px; color:#999; background-color:#f4f4f3; border-radius:1px;}
.cs.inquiry .inqr-list > div > dl > dt > a > span.c {color:#fff; background-color:#333;}
.cs.inquiry .inqr-list > div > dl > dd {display:none; padding:16px; line-height:23px; border-top:1px solid #f0f2f4; background-color:#f6f8fa;}
.cs.inquiry .inqr-list > div > dl.on > dd {display:block;}
.cs.inquiry .inqr-list > div > dl > dd > strong {display:block; margin-bottom:10px; line-height:17px;}
.cs.inquiry .inqr-list > div > dl > dd > span.mngr {display:flex; justify-content:flex-end; margin-top:14px;}
.cs.inquiry .inqr-list > div > dl > dd > span.mngr > a {display:inline-block; padding:0 14px; margin-left:6px; line-height:26px; color:#a0a0a0; border:1px solid #dcdee0; background-color:#fff; border-radius:3px;}
.cs.inquiry .inqr-list > div > dl > dd > span.mngr > a:first-child {margin-left:0;}
.cs.inquiry .inqr-list > div > dl > dd > span.reply {display:block; margin-top:16px;}
.cs.inquiry .inqr-list > div > dl > dd > span.reply > strong {display:block; margin-bottom:10px; line-height:17px;}
.cs.inquiry .inqr-list > div > dl > dd > img,
.cs.inquiry .inqr-list > div > dl > dd > video {display:block; max-width:100%; margin:0 auto; margin-bottom:10px;}

.cs.inquiry .inqr-form {padding:16px; padding-bottom:0; margin-top:16px; border-top:8px solid #f6f8fa;}
.cs.inquiry .inqr-form input,
.cs.inquiry .inqr-form select,
.cs.inquiry .inqr-form textarea,
.cs.inquiry .inqr-form button {display:block;}
.cs.inquiry .inqr-form > * + * {margin-top:8px;}
.cs.inquiry .inqr-form > .order {display:flex;}
.cs.inquiry .inqr-form > .order > input {width:calc(100% - 100px);}
.cs.inquiry .inqr-form > .order > button {width:94px; margin-left:6px; font-weight:600; border:1px solid #333; border-radius:3px;}
.cs.inquiry .inqr-form > .item-list > strong {display:block; padding-bottom:8px; border-bottom:1px #f0f2f4 solid;}
.cs.inquiry .inqr-form > .image-list {margin-top:16px;}
.cs.inquiry .inqr-form > .button {position:sticky; bottom:0; padding:16px 0; background-color:#fff;}
.cs.inquiry .inqr-form > .button > button {width:100%; height:60px;}
.cs.inquiry .inqr-form > h3 {padding:16px; margin:16px -16px; margin-bottom:0; font-size:20px; font-weight:500; line-height:26px; border-top:8px solid #f2f3fb;}
.cs.inquiry .inqr-form > h3:after {display:block; content:''; width:100%; height:1px; margin-top:16px; background-color:#f2f3fb;}
.cs.inquiry .inqr-form > .notice {margin:0;}

.cs.inquiry .goods {padding:12px; margin-bottom:16px; line-height:16px; border:1px solid #f0f2f4; background-color:#fff;}
.cs.inquiry .goods > li {position:relative; display:flex; padding:8px 0; border-top:1px solid #f0f2f4;}
.cs.inquiry .goods > li:first-child {padding-top:0; border-top-style:none;}
.cs.inquiry .goods > li:last-child {padding-bottom:0;}
.cs.inquiry .goods > li.dest {color:#888;}
.cs.inquiry .goods > li > a {position:relative; display:block; width:60px; height:60px; overflow:hidden;}
.cs.inquiry .goods > li > a > img {display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}
.cs.inquiry .goods > li > a.delete {position:absolute; right:0; top:50%; transform:translateY(-50%); width:15px; height:15px; font-size:0; line-height:0; background:url(../images/icon-x.png) no-repeat center center;}
.cs.inquiry .goods > li > .item {width:calc(100% - 60px - 12px); margin-left:12px;}
.cs.inquiry .goods > li > .item > strong {display:block; margin-bottom:6px;}
.cs.inquiry .goods > li > .item > span {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.cs.inquiry .goods > li > .item > span + span {margin-top:6px; font-size:13px; color:#a0a0a0;}

.cs.inquiry.ordr .goods {padding:0; margin-bottom:0; border-style:none;}
.cs.inquiry.ordr .goods > li {padding:16px; border-top-style:none; border-bottom:1px solid #f0f2f4;}
.cs.inquiry.ordr .goods > li:last-child {border-bottom-style:none;}
.cs.inquiry.ordr .goods > li.ordrNo {justify-content:space-between; align-items:center; background-color:#f6f8fa;}
.cs.inquiry.ordr .goods > li.ordrNo > .radio {width:20px; height:20px;}
.cs.inquiry.ordr .goods > li.ordrNo > .radio label {font-weight:600;}
.cs.inquiry.ordr .goods > li.ordrNo > .radio label:before {margin-right:4px;}
.cs.inquiry.ordr .goods > li.ordrNo > em {font-size:13px; color:#a0a0a0;}
.cs.inquiry.ordr .goods > li > .checkbox {width:20px; height:20px; margin-top:-9px;}
.cs.inquiry.ordr .goods > li > a {margin-left:8px;}
.cs.inquiry.ordr .goods > li > .item {width:calc(100% - 20px - 8px - 60px - 12px); margin-left:12px;}
.cs.inquiry.ordr .button {position:sticky; bottom:0; padding:16px; margin-top:0; background-color:#fff;}
.cs.inquiry.ordr .button > button {width:100%; height:60px;}

.cs.inquiry.form .goods {padding:0; margin-bottom:0; border-style:none;}
.cs.inquiry.form .goods > li:first-child {padding-top:8px;}
.cs.inquiry.form .goods > li:last-child {padding-bottom:8px;}

.cs.inquiry a.more {width:calc(100% - 32px); margin:0 16px;}

/** PC */
@media all and (min-width:760px) {
	.cs.main .cs-area {margin-top:16px; border-top-style:none;}
	.cs.main .cs-area h3 {margin:0;}
	.cs.main .cs-area h3 a {display:inline-block;}
	.cs.main .button {display:none;}
	.cs.main .call {padding:16px 0; margin-top:16px; border-top-style:none;}
	.cs.main .call > ul {display:flex; align-items:center;}
	.cs.main .call > ul > li {width:calc((100% - 16px) / 2); padding:32px; margin-left:16px; margin-top:16px;}
	.cs.main .call > ul > li:first-child {margin-left:0;}
	.cs.main .call > ul > li > a {right:32px;}
	.cs.main .call > ul.three > li {width:calc((100% - 32px) / 3); min-height:104px; padding:16px; box-sizing:border-box;}
	.cs.main .call > ul.three > li > a {right:16px;}
	
	.cs .cs-area .cate > ul {margin:0;}
	.cs .cs-area .article-list > dl {margin:0;}
	.cs .cs-area .article-list > dl.on > dd {margin:0;}
	.cs .cs-area form fieldset {display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid #f0f2f4;}
	.cs .cs-area form div {width:350px; padding:0; border-bottom-style:none;}
	.cs .cs-area form a {display:block;}
	.cs .cs-area a.more {width:250px; margin:0 auto; margin-top:16px; border-radius:25px;}
	
	.cs.inquiry .inqr-form {width:70%; padding:0; margin-top:16px; border-top-style:none; box-sizing:border-box;}
	.cs.inquiry .inqr-form textarea {height:200px;}
	.cs.inquiry .inqr-form > .button {position:static;}
	.cs.inquiry .inqr-form > .button > button {width:250px; margin:0 auto;}
	.cs.inquiry .inqr-form > h3 {padding:0; margin:32px 0 16px 0; border-top-style:none;}
	.cs.inquiry .inqr-form > .notice {width:100% !important;}
	
	.cs.inquiry .notice {margin:0;}
	.cs.inquiry .button {padding-bottom:0; margin-top:16px; text-align:right;}
	.cs.inquiry .inqr-list {margin-top:16px; border-top-style:none;}
	.cs.inquiry .inqr-list > div > dl > dt {padding:16px 0;}
	.cs.inquiry .inqr-list > div > dl > dd > img,
	.cs.inquiry .inqr-list > div > dl > dd > video {max-width:50%;}
	.cs.inquiry a.more {width:250px; margin:0 auto; margin-top:16px; border-radius:25px;}
	
	.cs.inquiry.form .notice {width:70%; box-sizing:border-box;}
}