@charset "utf-8";

/*******/
/* 공통 */
/*******/
/* 탭 */
.tab_box [class^="tab_menu_box"] {display:flex;flex-wrap:wrap;background: #f4f4f4;}
.tab_box [class^="tab_menu_box"] li {height: 6.2rem;}
.tab_box .tab_menu_box1 li a {position:relative;z-index:0;display:flex;align-items:center;justify-content:center;min-width:23rem;height: 100%;font-size:1.8rem;color:#555;font-weight: 500;transition: 0.4s;}
.tab_box [class^="tab_menu_box"] li a:before {content:"";position:absolute;right:-1px;top:50%;z-index:-1;width:1px;height:20px;background:#ddd;transform: translateY(-10px);}
.tab_box [class^="tab_menu_box"] li:last-child a:before {display: none;}
.tab_box [class^="tab_menu_box"] li a:after {content:"";position:absolute;left:0;top:0;z-index:1;width:0;height:2px;background:#e53935;transition: 0.4s;}
.tab_box [class^="tab_menu_box"] li.on a {background: #fff;color:#000;font-weight: 700;}
.tab_box [class^="tab_menu_box"] li.on a:after {width:100%;}
.tab_box [class^="tab_menu_box"] li a:is(:hover,:focus,:active) {background: #fff;color:#000;font-weight: 700;}
.tab_box [class^="tab_menu_box"] li a:is(:hover,:focus,:active):after {width:100%;}
.tab_box [class^="tab_content"] {display:none;}
.tab_box [class^="tab_content"].on {display:block;}
.tab_box [class^="tab_content"] .box {border:1px solid #ddd;padding:4rem;font-size:1.8rem;color:#767676;}
.tab_box [class^="tab_content"] .box p {line-height: 1.5;}
.tab_box [class^="tab_content"] .box p span {display: block;font-weight: 700;color:#222;}
@media only screen and (max-width:767px){
	.tab_box [class^="tab_menu_box"] li {width: 33.3%;}
	.tab_box .tab_menu_box1 li a {min-width: auto;}
}

.tab_box .tab_menu_box2 {padding:1rem;flex-wrap:wrap;}
.tab_box .tab_menu_box2 li {height: 4.2rem;width: 12.5%;}
.tab_box .tab_menu_box2 li a {position:relative;z-index:0;display:flex;align-items:center;justify-content:center;height: 100%;font-size:1.8rem;color:#555;font-weight: 500;border-radius: 5px;transition: 0.4s;}
.tab_box .tab_menu_box2 li a:after {display: none;}
.tab_box .tab_menu_box2 li.on a {background: #e53935;color:#fff;}
.tab_box .tab_menu_box2 li a:is(:hover,:focus,:active) {background: #e53935;color:#fff;}
@media only screen and (max-width:767px){
	.tab_box .tab_menu_box2 li {width: 25%;}
}

/* 탑박스 */
.top_box {display:flex;border:1px solid #ddd;border-radius: 20px;padding:4rem 4rem 4rem 0;}
.top_box .left {position:relative;flex: 0 0 21.5rem;}
.top_box .left:after {content:"";position: absolute;left:-1px;top:0;z-index:1;width: 4px;height: 100%;background: #e53935;}
.top_box .left span {width:11rem;aspect-ratio:1;margin:0 auto;background: #f6f7fa;border-radius: 100%;display: flex;align-items: center;justify-content: center;}
.top_box .left span img {}
.top_box .right {}
.top_box .right strong {font-size:2.4rem;color:#222;font-family: 'GongGothic',sans-serif;font-weight:500;}
.top_box .right strong em {line-height:1.2;color:#e53935;font-family: 'GongGothic',sans-serif;font-weight:500;}
.top_box .right p {line-height:1.4;margin-top:1.5rem;font-size:1.8rem;color:#767676;}
@media only screen and (max-width:1199px){
	.top_box .right p br {display: none;}
}
@media only screen and (max-width:767px){
	.top_box .left {position:relative;flex: 0 0 15.5rem;}
}


/*******/
/* 컨텐츠 */
/*******/
/* 문화소비365-문화소비365 사업안내 */
.promo_video {text-align: center;}
.promo_video iframe { width: 95%; max-width: 84rem;aspect-ratio: 2.14 / 1; border: none; border-radius: 10px; margin:0 auto;}

.intro {margin-top:-11rem;padding:16.5rem 0 6rem 0;background: #f7f7fb;text-align: center;color:#222;}
.intro h4 {position:relative;z-index:0;font-size:2.8rem;}
.intro h4:before {content:"";position: absolute;top:0;left:50%;z-index:-1;width: 28rem;height: 5rem;background: #f7f7fb;transform: translateX(-50%);}
.intro h4:after {content:"";position: absolute;top:50%;left:0;z-index:-2;width: 100%;height: 1px;background: #ddd;}
.intro p {margin-top:3rem;line-height:1.5;font-size:2rem;}
.intro .icons {margin-top: 6rem;}
.intro .icons img {max-width: 52.6rem;width: 90%;}

.abox {background: #fff;border: 1px solid #ddd;padding: 4rem 4.5rem 6rem 4rem;border-radius: 20px;}
.abox h5 {display: flex;justify-content:space-between;align-items:center;padding-bottom:2.5rem;margin-bottom:2.5rem;font-size:2.8rem;font-weight:500;color:#222;font-family: 'GongGothic',sans-serif;background: url('./../../images/fs/content/sub01/bg_dot.gif') repeat-x left bottom;}
.abox h5 span {position: relative;z-index: 0;}
.abox h5 span:after {content:"";position: absolute;right:-15px;top:-17px;z-index: -1;display: block;width:35px;height:35px;background: #ffedb6;border-radius: 500%;}
.apply_process .box2 {margin-top:-3rem;}
.apply_process .box2 a {height: 6rem;}

.store_info {}
.store_info .abox_wrap {display: flex;gap: 6rem;}
.store_info .abox_wrap .abox {width: calc(50% + 6rem);}
@media (max-width: 767px) {
	.store_info .abox_wrap {flex-wrap: wrap;gap: 3rem;}
	.store_info .abox_wrap .abox {width: calc(100% + 3rem);padding:3rem 3.5rem 5rem 3rem;}

	.intro p br {display: none;}
}

.form_example img {max-width: 100%;}
.form_example .box2 {margin-top:-3rem;}
.form_example .box2 a {height: 6rem;}
.form_example .abox2 {background: #efefef;border:1px solid #ddd;padding:10rem;margin:4rem;}
.form_example .abox2 img {width: 100%;}

.instructions_example {}
.instructions_example .inst {display: flex;justify-content: space-between;}
.instructions_example .inst .left {flex-grow: 1;padding-right:1rem;}
.instructions_example .inst .right {display: flex;justify-content: center;gap: 1rem;}
.instructions_example .inst .right .card {display:flex;align-items: center;justify-content:center;flex-direction:column;padding:0 3rem;border:1px solid #ddd;border-radius: 20px;transition: 0.4s;}
.instructions_example .inst .right .card:nth-child(1) img {max-width: 19.8rem;}
.instructions_example .inst .right .card:nth-child(2) img {max-width: 12.2rem;}
.instructions_example .inst .right .card:is(:hover,:active,:focus) {background: #efefef;}
.instructions_example .inst .right .card span {display: block;font-weight: 700;color:#222;font-size: 1.8rem;margin-top: 1rem;}
@media (max-width: 1023px) {
	.form_example .abox2 {padding:0;margin:4rem 0 0 0;}

	.instructions_example .inst {flex-wrap: wrap;gap:2rem;}
	.instructions_example .inst .right .card {padding:3rem;}
}

.ft18 {font-size:1.8rem;}

.notice_contact {background: #fbfaf7;}
.notice_contact .nbox {display: flex;gap: 6rem;padding:10rem 0;}
.notice_contact .nbox > .left {position:relative;width: calc(50% + 6rem);background: #ffcf38;padding:5rem;border-radius: 20px;}
.notice_contact .nbox > .left h5 {font-size:2.8rem;font-weight:400;font-family: 'GongGothic',sans-serif;color:#222;}
.notice_contact .nbox > .left li {color:#222;}
.notice_contact .nbox > .left a {display:inline-flex;align-items:center;gap:1rem;padding:1rem 2rem;position: absolute;right:4rem;top:5rem;background: #ffe79b;border-radius: 10px;color:#080404;font-size:1.8rem;}
.notice_contact .nbox > .left span {display: flex;align-items:center;background: #fff;padding:0 5rem;margin-top:7rem;height:7rem;border-radius: 50px;border:5px solid #413102;color:#222;font-size:2rem;}
.notice_contact .nbox > .left span em {font-weight: 700;}
.notice_contact .nbox > .left span img {margin-left:auto;}
.notice_contact .nbox > .right {width: calc(50% + 6rem);background: #fff;padding:5rem;border-radius: 20px;border:1px solid #ddd;}
.notice_contact .nbox > .right h5 {font-size:2.8rem;font-weight:400;font-family: 'GongGothic',sans-serif;color:#222;}
.notice_contact .nbox > .right .rbox {display: flex;gap:4rem;margin-top:2.5rem;}
.notice_contact .nbox > .right .rbox .left {flex-shrink:0;display:grid;place-items:center;width: 10.8rem;height:10.8rem;background: #f4f4f4;border-radius: 100%;}
.notice_contact .nbox > .right .rbox .right > strong {font-size:5rem;color:#222;font-weight: 700;}
.notice_contact .nbox > .right .rbox .right .br_none {display: none;}
@media (max-width: 1399px) {
	.notice_contact .nbox > .left a {right:4rem;top:3.5rem;}
}
@media (max-width: 1229px) {
	.notice_contact .nbox > .left a {position: static;margin-top:2rem;}
	.notice_contact .nbox > .left span {margin-top:4rem;}
}
@media (max-width: 1023px) {
	.notice_contact .nbox {flex-wrap: wrap;gap: 3rem;}
	.notice_contact .nbox > .left {width: 100%;}
	.notice_contact .nbox > .right {width: 100%;}
}
@media (max-width: 767px) {
	.notice_contact .nbox > .left span {margin-top:3rem;}
	.notice_contact .nbox > .left span img {width: 3rem;}
	.notice_contact .nbox > .right .rbox {gap:2rem;}
	.notice_contact .nbox > .right .rbox .left {width:8.8rem;height:8.8rem;}
	.notice_contact .nbox > .right .rbox .left img {width: 4rem;}
	.notice_contact .nbox > .right .rbox .right .br_none {display: block;}
}


/* 서비스 이용안내 */
.sub0102 {font-size: 1.8rem;}
.services_box {display: flex;gap:6rem;}
.services_box .left {width: calc(50% + 6rem);display: flex;flex-direction: column;}
.services_box .left > p {margin:2rem 0;}
.services_box .left .etc_box {background: #f9f9f9;border-radius: 20px;padding: 4rem;margin-top:auto;}
.services_box .left .etc_box strong {font-size:2rem;color:#e53935;}
.services_box .left .etc_box p {margin-top:1rem;line-height: 1.5;}
.services_box .right {width: calc(50% + 6rem);}
.services_box .right img {border-radius: 20px;max-width: 700px;width: 100%;}
.sign_process .step_box {display: flex;gap:2rem;}
.sign_process .step_box .sbox {width: calc(25% + 2rem);padding:4rem;border-radius: 20px;border:3px solid #fff;background: #fafafa;box-shadow: 20px 20px 45px rgba(0,0,0,0.08);}
.sign_process .step_box .sbox strong {font-size:2rem;font-weight:300;font-family: 'GongGothic',sans-serif;color:#222;}
.sign_process .step_box .sbox strong em {font-weight:700;font-family: 'GongGothic',sans-serif;color:#e43935;}
.sign_process .step_box .sbox p {margin-top:2.5rem;line-height:1.4;font-size:1.8rem;color:#222;}
.sign_process .step_box .sbox a {display:block;margin-top:4.5rem;text-align: center;}
.sign_process .step_box .sbox a img {max-width: 27rem;width: 100%;}
@media (max-width: 1023px) {
	.services_box {gap:3rem;flex-wrap: wrap;}
	.services_box .left {width: 100%;}
	.services_box .right {width: 100%;}
	.services_box .right img {max-width: none;}
	.sign_process .step_box {flex-wrap: wrap;margin-right: -2rem;}
	.sign_process .step_box .sbox {width: calc(50% - 2rem);}
}
@media (max-width: 569px) {
	.sign_process .step_box {margin-right: -2rem;}
	.sign_process .step_box .sbox {width: calc(100% - 2rem);}
}


/* 도민-도민신청 */
.information_box {word-break: keep-all;}
.hope-talk-inner {position:relative;z-index:0;padding: 10rem 9rem 6rem 9rem; background: url('./../../images/fs/content/sub03/bg01.png') no-repeat right 0 top 32px #f5f6f9;background-size: 35rem auto;}
.hope-talk-inner .hope-talk-title {display:block;font-size: 3.2rem;line-height:1.2;font-weight: 500;margin-bottom: 1rem;color:#333;}
.hope-talk-inner .hope-talk-title img {display:block;margin-bottom: 3rem;}
.hope-talk-inner .hope-talk-title em {display:block;font-size: 6rem;font-weight: 800;color:#333;}
.hope-talk-inner .hope-talk-desc {margin-top:4rem;line-height:1.5;font-size: 1.8rem; color: #333;}
.hope-talk-inner .hope-talk-desc em {font-weight:600;box-shadow: inset 0 -0.6em 0 rgba(59, 28, 28, 0.15);}
.hope-talk-inner .hope-talk-info {display:inline-block;margin-top:4rem;padding:4rem 3rem;background: #fff;border-radius: 20px;width:100%;}
.hope-talk-inner .hope-talk-info li {position:relative;line-height:1.2;font-size: 1.8rem;color: #333;margin-top:2.5rem;padding-left:12px;}
.hope-talk-inner .hope-talk-info li:before {content:"";position: absolute;left:0;top:4px;display:block;width: 4px;height: 14px;background: #e43935;}
.hope-talk-inner .hope-talk-info li p {margin-left:2rem;margin-top:0.5rem;text-indent: -15px;padding-left: 15px;}
.hope-talk-inner .hope-talk-info li strong {font-weight: 600;}
.hope-talk-inner .hope-talk-info li:first-child {margin-top:0;}
.hope-talk-inner .hope-talk-info li .qr_box {}
.hope-talk-inner .hope-talk-info li .qr_box a {}
.hope-talk-inner .hope-talk-info li .qr_box div {display: flex;flex-direction:column;align-items: center;gap:1rem;font-size:2rem;margin-top:1.5rem;}
.hope-talk-inner .hope-talk-info li .qr_box div img {display: block;}
.information_box .img {padding:10rem;background: #fff;border:1px solid #ddd;text-align: center;}
.information_box .img img {max-width: 670px;width: 100%;}
@media only screen and (max-width:1199px){
	.hope-talk-inner {padding: 7rem 6rem 3rem 6rem;background-size:50% auto;}
}
@media only screen and (max-width:1023px){
	.information_box {flex-direction: column;}
	.hope-talk-inner {padding: 5rem 4rem 3rem 4rem;background: #f5f6f9;}
	.hope-talk-inner .hope-talk-title img {width: 7rem;}
	.hope-talk-inner:after {height: 50vh;}
	.hope-talk-inner .hope-talk-info {}

	.hope-talk-inner {width: 100%;}
	.information_box .img {width: 100%;}
	.hope-talk-inner .hope-talk-info li:before {top:3px;}
	.information_box .img {padding:5rem;}
}
@media only screen and (max-width:599px){
	.hope-talk-inner {background-size:40% auto;}
	.hope-talk-inner:after {height: 30vh;}
	.hope-talk-inner .hope-talk-info {display:block;}
}


/* 가맹점-가맹점 신청(신청완료) */
.end_box {border-top:2px solid #222;border-bottom:1px solid #ddd;padding:10rem 4rem;text-align: center;}
.end_box img {width: 80px;}
.end_box strong {display:block;font-size:2.4rem;color:#222;font-family: 'GongGothic',sans-serif;font-weight:500;}
.end_box p {line-height:1.5;font-size:1.8rem;color:#767676;}
.end_box p:before {content:"";display:block;width: 30px;height: 4px;background: #e53935;margin:2rem auto;}
.end_box a {}


/* 온라인 문의(문의작성) */
.gray_box {padding:30px;overflow-y: auto;background:#f5f5f5;max-height:200px;font-size:.9em;border-radius:5px;line-height:1.3em;}
.gray_box .tit strong {font-size:1.1em;color:#222;font-weight:600;}
.gray_box .stit {position:relative;font-weight:600;color:#666;display:block;margin-bottom:10px;}
.gray_box  p {margin-bottom:10px;color:#999;}


/* 자주하는 질문 */
.faq_box {}
.faq_box .faq_cont {font-size:1.8rem;}
.faq_box .faq_cont em {display:inline-block;margin:0 40px 0 50px;padding-right:40px;border-right:1px solid #e5e5e5;font-weight: 700;font-size:2.5rem;vertical-align: middle;transform: translateY(-2px);text-decoration: none;}
.faq_box .faq_cont dt {position:relative;z-index:1;margin-top:10px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;color: #222;transition: .3s;}
.faq_box .faq_cont dt:first-child {margin-top:0;}
.faq_box .faq_cont dt a {display:flex;align-items:center;padding:20px 0;font-weight: 700;text-decoration: none;}
.faq_box .faq_cont dt a span {margin:12px 40px 0 auto;transition: .3s;}
.faq_box .faq_cont dt a .etc {position: relative;}
.faq_box .faq_cont dt a .etc:before {content:"";position:absolute;left:-7px;top:-7px;display: block;width: 16px;height: 2px;background:#222;}
.faq_box .faq_cont dt a .etc:after {content:"";position:absolute;left:0;top:-14px;display: block;width: 2px;height: 16px;background:#222;}
.faq_box .faq_cont dt em {color: #ea562b;}
.faq_box .faq_cont dd {position:relative;z-index:0;display:none;align-items:flex-start;margin-top:-30px;padding:60px 50px 30px 0;line-height:1.5;background:#f3f6f9;border:1px solid #e5e5e5;border-radius:10px;color: #555;}
.faq_box .faq_cont dd:after {content: "";display: block;clear: both;}
.faq_box .faq_cont dd em {float:left;color: #222;}
.faq_box .faq_cont dd p {overflow: hidden;}
.faq_box .faq_cont dt.on {background:#ea562b;border:1px solid #ea562b;color: #fff;}
.faq_box .faq_cont dt.on a {font-weight: 600;}
.faq_box .faq_cont dt.on a .etc:before {background:#fff;}
.faq_box .faq_cont dt.on a .etc:after {display: none;}
.faq_box .faq_cont dt.on em {color: #fff;}
.faq_box .faq_cont dt.on span {transform: rotate(-180deg);margin-top:-12px;}
.faq_box .faq_cont dt.on span img {filter: hue-rotate(315deg) brightness(10);}
@media only screen and (max-width:1399px){
	.faq_box {padding:0;}
}
@media only screen and (max-width:1023px){
	.faq_box .faq_cont em {margin:1px 10px 0 20px;padding-right:10px;}
	.faq_box .faq_cont dt a {padding:20px 0;}
	.faq_box .faq_cont dt a span {margin:10px 30px 0 auto;}
	.faq_box .faq_cont dt a .etc:before {left:-8px;top:-7px;width: 18px;height: 2px;}
	.faq_box .faq_cont dt a .etc:after {left:0;top:-15px;width: 2px;height: 18px;}
	.faq_box .faq_cont dd {padding:50px 40px 30px 0;}
	.faq_box .faq_cont dd em {margin-right:10px;}
}
@media only screen and (max-width:767px){
	.faq_box .faq_cont dt a {line-height: 1.5;padding:15px 0;}
}