@charset "utf-8"; /* fonts */
@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url(../fonts/Pretendard-Bold.woff2) format('woff2'), url(../fonts/Pretendard-Bold.woff) format('woff'); } 
@font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url(../fonts/Pretendard-SemiBold.woff2) format('woff2'), url(../fonts/Pretendard-SemiBold.woff) format('woff'); } 
@font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url(../fonts/Pretendard-Medium.woff2) format('woff2'), url(../fonts/Pretendard-Medium.woff) format('woff'); } 
@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url(../fonts/Pretendard-Regular.woff2) format('woff2'), url(../fonts/Pretendard-Regular.woff) format('woff'); } 
@font-face { font-family: 'Pretendard'; font-weight: 300; font-display: swap; src: local('Pretendard Light'), url(../fonts/Pretendard-Light.woff2) format('woff2'), url(../fonts/Pretendard-Light.woff) format('woff'); } 

@font-face { font-family: 'SDNemony2'; font-style: normal; font-weight: 200; src: url('../fonts/SDNemony2TTF-aBasicTh.woff') format('woff'); } 
/* @font-face { font-family: 'SDNemony2'; font-style: normal; font-weight: 200; src: url('../fonts/SDNemony2TTF-bBasicLt.woff') format('woff'); } */
@font-face { font-family: 'SDNemony2'; font-style: normal; font-weight: 400; src: url('../fonts/SDNemony2TTF-dBasicBd.woff') format('woff'); } 
@font-face { font-family: 'NanumGimYuICe'; src: local('NanumGimYuICe'), local("나눔손글씨 김유이체"), url("../fonts/나눔손글씨 김유이체.woff2") format("woff2"), url("../fonts/나눔손글씨 김유이체.woff") format("woff"); font-style: normal; font-weight: 400; font-display: swap; } 

/* base */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: inherit; vertical-align: baseline; box-sizing: border-box; } 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 
ol, ul { list-style: none; } 
blockquote, q { quotes: none; } 
blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; } 
table { border-collapse: collapse; border-spacing: 0; } 
table caption { overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0; } 
a { color: #222; text-decoration: none; } 
label, img { vertical-align: middle; } 
html { -webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale; } 
input { -webkit-border-radius: 0; border-radius: 0; -webkit-appearance: none; appearance: none; } 
/* :focus { outline: 1px solid #fff !important; box-sizing: border-box !important; box-shadow: 0 0 0 2px inset #222 !important; } 
:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } */
::placeholder { color: #B1B1B1 !important; font-weight: 500; } 
::-webkit-input-placeholder { color: #B1B1B1 !important; font-weight: 500; } 
:-ms-input-placeholder { color: #B1B1B1 !important; font-weight: 500; } 
a, button, input, select, div, li, span, p { -webkit-tap-highlight-color: rgba(0,0,0,.025); } 

html { font-size: 62.5%; } 
body { font-size: 1.6rem; font-family: 'Pretendard', 'Malgun Gothic', '맑은 고딕', sans-serif; color: #222; background: #fff; line-height: 1.5; margin: 0; min-width: 320px; } 

.scrollbar::-webkit-scrollbar { width: .8rem; } 
.scrollbar::-webkit-scrollbar-thumb { background: #999; border-radius: .4rem; } 
.scrollbar::-webkit-scrollbar-track { background: #f1f3f5; border-radius: .4rem; } 

.scrollbar2::-webkit-scrollbar { width: .1rem; height: .1rem; } 
.scrollbar2::-webkit-scrollbar-thumb { background: transparent; } 
.scrollbar2::-webkit-scrollbar-track { background: transparent; } 


/* form */
input[type=text], input[type=password], input[type=file], input[type=email], input[type=number], input[type=tel], input[type=search], input[type=url] { border-radius: .8rem; border: .1rem solid #DEDEDE; background: #fff; padding: 1.6rem; line-height: 2.2rem; font-size: 1.6rem; font-weight: 600; box-sizing: border-box; vertical-align: middle; color: #222; } 
input[type=text]:disabled, input[type=password]:disabled, input[type=file]:disabled, input[type=email]:disabled, input[type=number]:disabled, input[type=tel]:disabled, input[type=search]:disabled, input[type=url]:disabled { background: #F1F3F5; color: #B1B1B1; } 
/* input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=search]:focus, input[type=url]:focus { border: 1px solid #222; } */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 
input[type="number"] { -moz-appearance: textfield; } 


.checkbox { display: inline-flex; padding: .8rem 0; align-items: center; } 
.checkbox input { position: absolute; opacity: 0; pointer-events: none; } 
.checkbox span { display: inline-flex; align-items: center; gap: .8rem; cursor: pointer; color: #767676; } 
.checkbox span::before { content: ''; display: inline-block; width: 2.2rem; height: 2.2rem; background: url('../images/ic_checkbox_off.svg') no-repeat center / 100% 100%; transition: all 0.2s ease; } 
.checkbox input:checked + span::before { background-image: url('../images/ic_checkbox_on.svg'); } 

.radio { line-height: 2.4rem; display: inline-flex; } 
.radio input { position: absolute; opacity: 0; pointer-events: none; } 
.radio span { display: inline-flex; align-items: center; gap: .8rem; cursor: pointer; color: #767676; line-height: 2.4rem; } 
.radio span::before { content: ''; display: inline-block; width: 2.2rem; height: 2.2rem; background: url('../images/ic_radio_off.svg') no-repeat center / 100% 100%; transition: all 0.2s ease; } 
.radio input:checked + span::before { background-image: url('../images/ic_radio_on.svg'); } 

.select { position: relative; display: inline-block; min-width: 12rem; color: #B1B1B1; } 
.select select { display: none; } 
.select::after { content: ''; position: absolute; top: 50%; right: 1.6rem; transform: translateY(-50%); pointer-events: none; background: url(../images/ic_select_arrow.svg) no-repeat center; width: 1.6rem; height: 1.6rem; } 
.select div.selected-display { border: .1rem solid #DEDEDE; padding: 1.2rem 4rem 1.2rem 1.6rem; cursor: pointer; background-color: #fff; border-radius: .8rem; font-size: 1.6rem; line-height: 2.2rem; } 
.select div.selected-display.active { color: #222; } 
.select div.select-list { position: absolute; list-style: none; padding: 0; margin: 0; border: .1rem solid #DEDEDE; width: 100%; overflow-y: auto; background-color: #fff; z-index: 10; border-radius: .8rem; margin-top: .2rem; box-shadow: 0 1.2rem 1.6rem -.4rem rgba(16, 24, 40, 0.08), 0 .4rem .6rem -.2rem rgba(16, 24, 40, 0.03); pointer-events: none; visibility: hidden; transition: all .3s ease-in-out; opacity: 0; } 
.select div.select-list.show { pointer-events: all; visibility: visible; opacity: 1; } 
.select ul { display: block; max-height: 22rem; padding: .4rem 0; } 
.select ul li { padding: 1rem 4rem 1rem 1.6rem; cursor: pointer; line-height: 2.4rem; position: relative; white-space: nowrap; } 
.select ul li:hover { background: #F7F7F7; } 
.select .dropdown-list li.selected { background: #F7F7F7; } 
.select .dropdown-list li.selected::after { content: ''; position: absolute; top: 50%; right: 1.6rem; width: 2rem; height: 2rem; background: url(../images/ic_select_check.svg) no-repeat center / 100% 100%; transform: translateY(-50%); } 
.select.h64 div.selected-display { height: 6.4rem; font-size: 1.8rem; line-height: 2.8rem; padding: 1.6rem 1.9rem; } 
.select.h56 div.selected-display { height: 5.6rem; font-size: 1.6rem; line-height: 2.4rem; padding: 1.6rem; } 
.select .bs-head { display: none; gap: .8rem; justify-content: space-between; align-items: center; height: 7.2rem; border-bottom: .1rem solid #DEDEDE; padding: 2.4rem; } 
.select .tit { display: block; font-size: 2rem; line-height: 2.4rem; font-weight: 700; text-align: left; } 
.select .btn-close { display: block; width: 2.4rem; height: 2.4rem; background: url(../images/ic_close.svg) no-repeat center / 100% 100%; font-size: 1px; overflow: hidden; text-indent: -10rem; } 


/* button */
button, input[type=submit] input[type=button] { cursor: pointer; border: 0; transition: all .2s; } 
button:disabled, input[type=submit]:disabled, input[type=button]:disabled { cursor: default; pointer-events: none; } 
button:hover { filter: contrast(1.2); } 


/* popup */
.pop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.5); z-index: 10; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s; } 
.pop.show { visibility: visible; opacity: 1; pointer-events: all; transition: none; } 
.pop-container { display: flex; min-width: 37.5rem; max-width: 50rem; border-radius: 3rem; border: .3rem solid #FF5000; background: linear-gradient(180deg, #FFF 24.5%, #E4E4E4 100%); box-shadow: 0 1.3rem 1.65rem 0 rgba(0, 0, 0, 0.20); display: inline-flex; padding: 5rem 4.8rem 3.4rem 4.8rem; flex-direction: column; justify-content: center; align-items: center; gap: 1.9rem; position: relative; } 
.pop h3 { font-size: 2.4rem; font-weight: 700; line-height: 3.4rem; margin-bottom: 1.6rem; } 
.pop p { color: #404040; text-align: center; font-family: Pretendard; font-size: 2rem; font-style: normal; font-weight: 600; line-height: 2.4rem; /* 120% */ } 
.pop .btn-wrap { display: flex; gap: 2rem; width: 100%; justify-content: center; } 
.pop .btn-wrap .btn { max-width: 40rem; display: flex; min-width: 12.9rem; height: 5.5rem; padding: 1rem 1.5rem 1rem 1.2rem; justify-content: center; align-items: center; gap: 1.6rem; border-radius: 10rem; background: #FF5000; color: #fff; text-align: center; font-family: "SDNemony2"; font-size: 2.4rem; font-style: normal; font-weight: 400; line-height: 2.4rem; } 
.pop .btn-close { width: 2rem; height: 2rem; background: url(../images/ic_pop_close2.svg) no-repeat center / 100% 100%; font-size: 1px; text-indent: -10rem; overflow: hidden; position: absolute; top: 1.4rem; right: 1.5rem; } 


/* tooltip */
.tooltip { position: absolute; background-color: var(--Black); color: #fff; padding: .8rem 1.6rem; border-radius: .8rem; font-size: 1.4rem; pointer-events: none; transform: translateX(-50%); opacity: 0; transition: opacity 0.2s ease; font-weight: 400; text-align: center; transition: all .3s ease; width: max-content; max-width: 36.2rem; left: 50%; bottom: calc(100% + 1rem); z-index: 1; } 
.btn-help:hover ~ .tooltip { opacity: 1; } 
.tooltip::after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: .8rem .8rem 0 .8rem; border-color: var(--Black) transparent transparent transparent; position: absolute; left: 50%; top: 100%; transform: translate(-50%); } 
.tooltip.right { left: auto; right: -1rem; transform: none; } 
.tooltip.right::after { left: auto; right: .6rem; } 
.tooltip.left { left: -1rem; transform: none; } 
.tooltip.left::after { left: 2.2rem; } 

.toast { position: absolute; background-color: var(--Black); color: #fff; padding: 1.2rem 1.6rem; border-radius: .8rem; font-size: 1.4rem; pointer-events: none; transform: translateX(-50%); opacity: 0; transition: opacity 0.2s ease; font-weight: 400; text-align: center; transition: all .3s ease; width: max-content; max-width: 36.2rem; left: 50%; bottom: calc(100% + 1rem); z-index: 1; } 
.toast.show { opacity: 1; } 


/* table */
.tbl-basic { border-collapse: collapse; table-layout: auto; border: 0; padding: 0; border-top: .2rem solid var(--Subbody_01); width: 100%; background:var(--White); margin-bottom: 5.6rem; } 
.tbl-basic th { background: var(--BG_body); border-bottom: 1px solid var(--Line_Default); border-right: 1px solid #e1e1e1; font-weight: 600; vertical-align: middle; padding: 1.6rem .8rem; text-align: center; font-size: 1.6rem; line-height: 2rem; } 
.tbl-basic td { background: var(--White); border-bottom: 1px solid var(--Line_Default); border-right: 1px solid #eee; font-weight: 400; vertical-align: middle; padding: 1.6rem .8rem; text-align: center; font-size: 1.6rem; line-height: 2.4rem; } 
.tbl-basic.min th, .tbl-basic.min td { font-size: 1.4rem; padding: 1.6rem .4rem; } 
.tbl-basic th:last-child, .tbl-basic td:last-child { border-right: none; } 
.tbl-basic th[scope="row"] { background: var(--BG_body); } 
.tbl-basic td:last-child[rowspan] { border-left: 1px solid #eee; } 
.tbl-basic.nobo th, .tbl-basic.nobo td { border-right: none; } 


/* pagination */
.pagination { display: flex; gap: 3.2rem; justify-content: center; align-items: center; } 
.pagination a[class^='btn'] { display: inline-block; width: 2.4rem; height: 2.4rem; line-height: 2.4rem; background-repeat: no-repeat; background-position: center; background-size: 1.6rem auto; overflow: hidden; font-size: 1px; text-indent: -10rem; } 
.pagination .btn-prev { background-image: url(../images/ic_arrow_left.svg); } 
.pagination .btn-next { background-image: url(../images/ic_arrow_right.svg); } 
.pagination ul { display: flex; gap: 0; align-items: center; justify-content: center; flex-wrap: wrap; } 
.pagination li a { color: var(--Subbody_01); font-size: 1.6rem; font-weight: 400; line-height: 2rem; display: block; padding: .6rem 1.6rem; width: 3.2rem; height: 3.2rem; text-align: center; } 
.pagination li a.active { color: var(--Black); font-weight: 500; } 

.pagination-wrap { margin: 0 auto 5rem; width: 80rem; position: relative; } 
.pagination-wrap .pagination { color: #FF5000; font-family: Pretendard; font-size: 1.6rem; font-style: normal; font-weight: 500; line-height: 2.4rem; display: flex; gap: 1.7rem; } 
.pagination .btn-prev { width: 4.6rem; height: 4.6rem; background: url(../images/ic_prev3.svg) no-repeat center / 100% 100%; text-indent: -10rem; font-size: 1px; overflow: hidden; } 
.pagination .btn-next { width: 4.6rem; height: 4.6rem; background: url(../images/ic_next3.svg) no-repeat center / 100% 100%; text-indent: -10rem; font-size: 1px; overflow: hidden; } 
.pagination-wrap .btn-wrap { position: absolute; right: 0; bottom: .5rem; display: flex; gap: 2rem; align-items: center; } 
.pagination .line { background: #FF5000; height: .15rem; width: 3.5rem; overflow: hidden; font-size: 1px; text-indent: -10rem; } 
.pagination-wrap :disabled { opacity: .2; filter: saturate(0); } 


/* tabs */
.tabs { margin-bottom: 1.6rem; } 
.tabs ul { display: flex; position: relative; gap: .2rem; } 
.tabs li { flex: 1; } 
.tabs li a { display: block; padding: 1.6rem; text-align: center; border-radius: .8rem .8rem 0 0; border-bottom: 1px solid var(--Green_500); background: var(--Green_100); color: var(--Green_500); font-weight: 500; font-size: 1.8rem; font-weight: 500; line-height: 2.2rem; white-space: nowrap; } 
.tabs li a.active { background: var(--Green_600); border-bottom: .1rem solid var(--Green_600); color: #fff; font-weight: 700; } 
.tab-content { display: none; } 
#tab-content1 { display: block; } 


/* etc */
.dim, .cal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); z-index: 9; transition: all .3s; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(4px); } 
.dim.show { visibility: visible; opacity: 1; pointer-events: all; } 
/* [data-aos=fade-up] { transform: translate3d(0, 5rem, 0); } */
.mb30 { margin-bottom: 3rem !important; } 

/***** content *****/
html { scroll-behavior: smooth; } 
.wrap { text-align: center; line-height: 1; color: #fff; overflow: hidden; } 


/* section1 */
.section1 { background: url(../images/section1_bg.jpg) no-repeat center top / 200rem auto #fff; height: 107.5rem; padding: 15.8rem 0 17rem; } 
.section1 p { color: #fff; font-family: 'SDNemony2'; } 
.section1 .txt1 { font-size: 3.3rem; font-weight: 400; margin-bottom: 2rem; } 
.section1 .txt2 { font-size: 9.6rem; font-weight: 400; margin-bottom: 4rem; } 
.section1 .txt3 { color: #FFF; font-size: 2.5rem; font-weight: 200; -webkit-text-stroke-width: .02rem; line-height: 4rem; margin-bottom: 9.6rem; } 
.section1 .btn-chatstart { width: 46.4rem; margin-bottom: 4rem; background: none; display: block; margin: 0 auto; } 
.section1 .btn-chatstart img { width: 100%; transition: all .3s ease; } 
.section1 .ic-mouse { width: 3.3rem; display: none; } 

/* section2 */
.section2 { background: url(../images/section2_bg.jpg) no-repeat center top / 200rem auto #D13E21; padding: 12.8rem 0 19rem; } 
/* .section2::before { content: ''; display: block; height: 1px; width: 100%; margin-top: 0; } */
.section2 h1 { font-size: 6.4rem; font-family: 'SDNemony2'; font-weight: 400; margin-bottom: 2rem; } 
.section2 p { font-size: 3rem; font-family: 'SDNemony2'; font-weight: 200; margin-bottom: 33.12rem; } 
.chat-wrap { width: 100%; max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; gap: 5.3rem; margin-bottom: 5.3rem; } 
.chat-wrap li { margin-right: auto; display: flex; justify-content: start; align-items: start; } 
.chat-wrap img { width: 8.7rem; } 
.chat-wrap li > div { margin-left: -.8rem; } 
.chat-wrap .name { text-align: left; display: block; padding: 1.4rem 0 1.9rem 1rem; font-size: 2.4rem; font-weight: 800; line-height: 2.4rem; } 
.chat-wrap .talk { background: #fff; color: #000; padding: 1.9rem 2.5rem; border-radius: 2rem; display: block; line-height: 2.4rem; text-align: left; font-weight: 500; font-family: Pretendard; font-size: 1.8rem } 
.chat-wrap li.me { margin-left: auto; margin-right: 0; } 
.chat-wrap li.me span { background: #169DB1; color: #fff; } 
.write-wrap { display: flex; gap: 1.2rem; margin: 0 auto; justify-content: center; position: relative; z-index: 1; transition: all .3s ease; } 
.write-wrap input { width: 65rem; padding: 2rem 2.6rem; border-radius: 2rem; border: .3rem solid #169DB1; background: #FFF; box-shadow: 0 .8rem .54rem 0 rgba(0, 0, 0, 0.10) inset; font-size: 1.8rem; font-weight: 500; line-height: 2.4rem; height: 6.4rem; font-family: Pretendard;} 
.write-wrap input:focus { outline: none; border-color: #69BAC6; } 
.write-wrap input::placeholder { color: #888; } 
.btn-send { display: flex; height: 6.4rem; padding: 1.5rem; justify-content: center; align-items: center; gap: 0.7rem; border-radius: 2rem; border: .3rem solid #169DB1; background: linear-gradient(180deg, #69BAC6 0%, #178D9F 100%); color: #fff; text-align: center; font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 2.4rem; white-space: nowrap; } 
.btn-send::before { content: ''; width: 3rem; height: 3rem; background: url(../images/ic_send.svg) no-repeat center / contain; } 

/* section3 */
.section3 { padding: 10rem 0; } 
.section3 img { width: 53.8rem; margin-bottom: 4.3rem; } 
.section3 > p { color: #000; font-size: 2.3rem; line-height: 3.6rem; margin-bottom: 11rem; font-family: 'SDNemony2'; font-weight: 200; } 
.line { width: 0.2rem; height: 11.8rem; background: #000; margin: 0 auto; } 
.section3 .group-wrap { display: flex; flex-direction: column; gap: 1rem; margin: 0 auto; align-items: center; margin-bottom: 10.5rem; } 
.section3 .group-wrap .item { display: flex; width: 77rem; padding: 1rem; justify-content: space-between; align-items: center; } 
.section3 .group-wrap .item:nth-of-type(2) { flex-direction: row-reverse; } 
.section3 .group-wrap .item > div { width: 40.9rem; } 
.section3 .group-wrap .item:nth-of-type(2) > div { margin-top: -5rem; } 
.section3 .group-wrap .item h3 { color: #000; font-size: 6.4rem; font-weight: 400; margin-bottom: 2.2rem; text-align: left; font-family: 'SDNemony2'; position: relative; } 
.section3 .group-wrap .item h3::after { content: ''; display: block; width: 10rem; height: 10rem; position: absolute; right: -.4rem; top: -2.4rem; background: url(../images/section3_ic_2_1.png) no-repeat center / contain; } 
.section3 .group-wrap .item:nth-of-type(2) h3::after { content: ''; display: block; width: 10rem; height: 10rem; position: absolute; left: -10.6rem; top: -1.8rem; background: url(../images/section3_ic_3_1.png) no-repeat center / contain; } 
.section3 .group-wrap .item p { color: #000; font-family: Pretendard; font-size: 1.8rem; font-weight: 500; line-height: 2.4rem; text-align: left; } 
.section3 .group-wrap .item img { width: 39.1rem; } 
.section3 .group-wrap .item:nth-of-type(2) img { width: 40rem; } 

/* section4 */
.section4 { background: #EFF0F2; padding: 21.5rem 0 20rem; } 
.section4 h1 { color: #000; font-family: "SDNemony2"; font-size: 6.4rem; font-weight: 400; margin-bottom: 4rem; } 
.section4 p { font-family: 'SDNemony2'; color: #000; font-size: 2.3rem; font-weight: 200; line-height: 3.6rem; margin-bottom: 3rem; -webkit-text-stroke-width: .02rem; } 
.btn-write { background: transparent; border: none; color:#FF5000; font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 2.4rem; display: flex; align-items: center; gap: 1rem; justify-content: center; margin: 0 auto; padding: 1.5rem; } 
.btn-write::before { content: ''; display: inline-block; width: 5rem; height: 5rem; border-radius: 2.5rem; background: url(../images/ic_bt_write.svg) no-repeat center / 3rem 3rem #FF5000; } 
.article-wrap { background: url(../images/section4_bg.jpg) no-repeat center top / 100% auto #EFF0F2; width: 120rem; height: 80rem; position: relative; left: 50%; transform: translateX(-50%) !important; } 
.article-wrap .slick-list, .article-wrap .slick-track { height: 100%; } 
.article-wrap .slick-prev { width: 4.2rem; height: 8.6rem; background: url(../images/ic_slider_prev.svg) no-repeat center / 100% 100%; position: absolute; left: 1rem; top: 35%; text-indent: -100px; font-size: 1px; overflow: hidden; z-index: 1; } 
.article-wrap .slick-next { width: 4.2rem; height: 8.6rem; background: url(../images/ic_slider_next.svg) no-repeat center / 100% 100%; position: absolute; right: 1rem; top: 35%; text-indent: -100px; font-size: 1px; overflow: hidden; z-index: 1; } 
.article-wrap .slick-disabled, .article-wrap :disabled { opacity: .2; filter: saturate(0); } 
@media (max-width: 1200px){
 .article-wrap .slick-prev { left: 11rem; } 
 .article-wrap .slick-next { right: 11rem; } 
 }
.article-wrap .slick-dots { display: flex; gap: 1rem; justify-content: center; } 
.article-wrap .slick-dots button { width: 1.5rem; height: 1.5rem; border-radius: 1.5rem; background: #D9D9D9; display: block; font-size: 1px; overflow: hidden; text-indent: -100px; } 
.article-wrap .slick-dots .slick-active button { outline: .3rem solid #FF5000; background: #FF5000; } 
.article-wrap .item { position: relative; width: 120rem !important; height: 100%; } 
.btn-article { display: block; width: 5.8rem; height: 5.9rem; background: url(../images/section4_ic_article.png) no-repeat center / contain; text-indent: -200px; overflow: hidden; position: absolute; } 
.btn-article.my {filter: hue-rotate(-45deg);}
.btn-article:nth-of-type(1) { width: 7.9rem; height: 8.1rem; top: 53%; left: 45.7%; } 
.btn-article:nth-of-type(2) { top: 14.8%; left: 19.2%; } 
.btn-article:nth-of-type(3) { top: 13%; left: 49%; } 
.btn-article:nth-of-type(4) { top: 41%; left: 22.5%; } 
.btn-article:nth-of-type(5) { top: 34%; left: 68%; } 
.btn-article:nth-of-type(6) { top: 43%; left: 79.7%; } 
.btn-article:nth-of-type(7) { top: 55%; left: 17%; } 
.btn-article:nth-of-type(8) { top: 69%; left: 36.4%; } 
.btn-article:nth-of-type(9) { top: 79%; left: 55%; } 
.btn-article:nth-of-type(10) { top: 74%; left: 76%; } 
.btn-article:hover { transform: scale(1.2); } 

[class^=pop-article] { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(123, 204, 218, 0.34); backdrop-filter: blur(.73rem); flex-direction: column; text-align: left; opacity: 0; pointer-events: none; visibility: hidden; z-index: 10; } 
[class^=pop-article].show { display: flex; opacity: 1; pointer-events: all; visibility: visible; transition: opacity .3s; } 
[class^=pop-article] .inner { width: 63.6rem; height: 56.9rem; background: url(../images/section4_pop_bg.png) no-repeat center / 100% 100%; margin: auto; position: relative; } 
[class^=pop-article].my .inner { filter: hue-rotate(-45deg); }
[class^=pop-article] .inner > div { transform: rotate(-4deg); margin: 6.2rem 4.5rem; } 
[class^=pop-article] .btn-close { background: url(../images/ic_pop_close.svg) no-repeat center / contain; width: 2.0474rem; height: 2.047rem; position: absolute; right: 11rem; top: 1.2rem; text-indent: -200px; font-size: 1px; overflow: hidden; } 
[class^=pop-article] h3 { color: #A9A688; -webkit-text-stroke-width: .06rem; -webkit-text-stroke-color: #A9A688; font-family: "NanumGimYuICe"; font-size: 2.9rem; font-weight: 400; line-height: 2.7rem; margin-bottom: .4rem; } 
[class^=pop-article] h3::before { content: ''; background: url(../images/ic_question.svg) no-repeat center / 100% 100%; display: inline-block; width: 2.6rem; height: 2.6rem; margin: -.8rem .3rem 0 0; vertical-align: top; } 
[class^=pop-article] .textarea { color: #000; -webkit-text-stroke-width: .02rem; -webkit-text-stroke-color: #000; font-family: "NanumGimYuICe"; font-size: 2rem; font-weight: 400; line-height: 2rem; width: 44rem; height: 12rem; background: none; margin-left: 2rem; margin-bottom: 1.4rem; padding: 1rem; box-sizing: border-box; resize: none; word-break: break-all; overflow-wrap: break-word; border: none; outline: .1rem solid #bebcae; border-radius: 1rem; } 
[class^=pop-article] p.textarea { outline: none; }
[class^=pop-article] .textarea::placeholder { color: #000; -webkit-text-stroke-width: 0.2px; -webkit-text-stroke-color: #000; } 
[class^=pop-article] .textarea:focus { outline: .1rem solid #A9A688; border-radius: 1rem; background: rgba(255,255,255,.3); } 
[class^=pop-article] .textarea::-webkit-scrollbar { width: .4rem; } 
[class^=pop-article] .textarea::-webkit-scrollbar-thumb { background: rgba(169, 166, 136, .5); border-radius: .4rem; } 
[class^=pop-article] .textarea::-webkit-scrollbar-track { background: rgba(169, 166, 136, .2); border-radius: .4rem; } 
[class^=pop-article] .btn-upload { position: absolute; bottom: 9rem; right: 0.2rem; width: 12.2rem; height: 7.3rem; background: url(../images/ic_bt_upload.png) no-repeat center / 100% 100%; text-indent: -200px; font-size: 1px; overflow: hidden; cursor: pointer; z-index: 1; } 

/* section5 */
.section5 { padding: 7.5rem 0 8rem; color: #000; } 
.section5 h1 { color: #000; font-family: "SDNemony2"; font-size: 6.4rem; font-weight: 400; margin-bottom: 4rem; } 
.section5 .txt1 { font-family: 'SDNemony2'; color: #000; font-size: 2.3rem; font-weight: 200; line-height: 3.6rem; margin-bottom: 3.2rem; -webkit-text-stroke-width: .02rem;} 
.section5 .ic-mouse { margin-bottom: 5.4rem; } 
.section5 .dragable-wrap { width: 85rem; height: 17rem; margin: 0 auto 5.4rem; } 
.section5 .dragable-wrap > div { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; align-content: center; gap: 2.4rem 1.8rem; flex-shrink: 0; flex-wrap: wrap; border-radius: 3rem; border: .3rem solid #FFF8F4; background: #F2E7E0; z-index: 2; position: relative; } 
.section5 .dragable-wrap > div.result { width: 85rem; height: 17rem; padding: 0.5rem 0rem; border-radius: 3rem; border: .3rem solid #FFF; background: linear-gradient(180deg, #FBFFFF 0%, #F8FEFF 33.5%, #CBD5D6 100%); box-shadow: 0 1.1rem 1.64rem 0 rgba(0, 0, 0, 0.16), 0px 9px 6.1px 0px rgba(113, 154, 157, 0.30) inset; display: flex; align-items: center; justify-content: center; display: none; } 
.section5 .dragable-wrap > div.result.show { display: flex; } 
.section5 .dragable-wrap > div.result p { color: #000; text-align: center; font-family: "SDNemony2"; font-size: 3.6rem; font-weight: 400; line-height: 3.8rem; } 
.section5 .dragable-wrap > div.result p strong { color: #FF5000; font-size: 6.4rem; } 
.section5 .dragable-wrap button { background: transparent; padding: 0; border: none; height: 4.2rem; filter: drop-shadow(0 .6rem 1rem rgba(0, 0, 0, 0.25)); } 
.section5 .dragable-wrap button img { height: 100%; } 
.section5 .dragable-wrap::before { content: ''; display: block; width: 35.4rem; height: 35.5rem; position: absolute; top: -16.3rem; left: -12.5rem; background: url(../images/section5_ic_1.png) no-repeat center / contain; } 
.section5 .dragable-wrap::after { content: ''; display: block; width: 35.4rem; height: 35.5rem; position: absolute; top: -16.9rem; right: -10.9rem; background: url(../images/section5_ic_2.png) no-repeat center / contain; } 
.section5 .dropable-wrap { display: flex; width: 94.8rem; flex-direction: row; align-items: flex-start; gap: 3.8rem; margin: 0 auto; flex-wrap: wrap; margin-bottom: 5.4rem; } 
.section5 .dropable-wrap .item { color: #000; font-family: "SDNemony2"; flex: 1 0 100%; display: flex; gap: 2rem; align-items: flex-start; } 
.section5 .dropable-wrap .item:nth-of-type(1), .section5 .dropable-wrap .item:nth-of-type(2) { flex: 1 0 40%; } 
.section5 .dropable-wrap .item h2 { font-size: 3rem; font-weight: 400; line-height: 3.8rem; display: inline-block; text-align: left; padding-top: .6rem; } 
.section5 .dropable-wrap .item > div { font-size: 2.4rem; font-weight: 200; -webkit-text-stroke-width: .02rem; line-height: 4.8rem; text-align: left; line-height: 2; } 
.section5 .dropable-wrap .item .droparea { display: inline-flex; width: 11rem; height: 4rem; padding: 0.5rem 0rem; justify-content: center; align-items: center; border-radius: 10rem; border: .3rem solid #DBDBDB; background: #F2F2F2; box-shadow: 0 .7rem 1.33rem 0 rgba(0, 0, 0, 0.10) inset; vertical-align: middle; margin-left: .8rem; position: relative; } 
.section5 .dropable-wrap .item .droparea::before { content: ''; display: block; width: 7rem; height: 6.4rem; background-repeat: no-repeat; background-size: 100% 100%; position: absolute; top: -2.8rem; left: 50%; transform: translateX(-50%); opacity: 0; transition: all .3s ease; } 
.section5 .dropable-wrap .item .droparea.o::before { background-image: url(../images/ic_tooltip_o.png); opacity: 1; top: -5.8rem } 
.section5 .dropable-wrap .item .droparea.x::before { background-image: url(../images/ic_tooltip_x.png); opacity: 1; top: -5.8rem } 
.section5 .dropable-wrap .item .droparea button { background: transparent; padding: 0; border: none; height: 4.2rem; filter: drop-shadow(0 .6rem 1rem rgba(0, 0, 0, 0.25)); } 
.section5 .dropable-wrap .item .droparea button img { height: 100%; } 
.section5 .txt2 { color: #000; font-size: 1.8rem; font-weight: 500; line-height: 2.4rem; margin-bottom: 2.9rem; } 
.section5 .dropable-wrap .item:nth-of-type(1) .droparea, .section5 .dropable-wrap .item:nth-of-type(2) .droparea { width: 35.6rem; } 
.section5 .btn-wrap { display: flex; gap: 3.4rem; margin: 0 auto; justify-content: center; } 
.feedback-wrap { display: none; } 
.feedback-wrap h2 { font-family: "SDNemony2"; font-size: 6.4rem; font-weight: 400; line-height: 8.2rem; margin-bottom: 2.4rem; padding-top: 14.2rem; } 
.feedback-wrap .txt1 { font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 200; -webkit-text-stroke-width: .02rem; line-height: 3.8rem; } 
.feedback-wrap .line { height: 7.6rem; margin-bottom: 2.9rem; } 
.feedback-wrap .txt2 { font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 200; -webkit-text-stroke-width: .02rem; line-height: 3.8rem; } 
.btn-photoshare { border: none; background: transparent; padding: 0; display: block; width: 39.8rem; margin: 0 auto; } 
.btn-photoshare img { width: 100%; transition: all .2s ease; } 

/* section6 */
.section6 { background: url(../images/section6_bg.jpg) no-repeat center top / 200rem auto #226B3E; padding: 12.8rem 0 6.8rem; } 
.section6 h1 { font-size: 6.4rem; font-family: 'SDNemony2'; font-weight: 400; margin-bottom: 32.4rem; } 
.section6 .chat-wrap img.talk { width: 30.7rem; padding: 0; background: none; margin-bottom: 1rem; } 

.select-chat { position: relative; display: inline-block; min-width: 14.6rem; color: #000; } 
.select-chat select { display: none; } 
.select-chat::before { content: ''; display: inline-block; position: absolute; top: 2.7rem; right: 2rem; pointer-events: none; background: url(../images/ic_arrow_down.svg) no-repeat center / 2.5rem 1.25rem; width: 2.5rem; height: 1.25rem; } 
.select-chat div.selected-display { width: 70rem; padding: 2rem 2.6rem; border-radius: 2rem; border: .3rem solid #169DB1; background: #FFF; box-shadow: 0 .8rem .54rem 0 rgba(0, 0, 0, 0.10) inset; font-size: 1.8rem; font-weight: 500; line-height: 2.4rem; height: 6.4rem; } 
.select-chat div.selected-display.active { color: #000; text-align: left; } 
.select-chat div.selected-display.active img { width: 2.2rem !important; margin-right: .6rem !important; margin-top: -.4rem !important; } 
.select-chat div.select-list { position: absolute; list-style: none; padding: 0; margin: 0; border: .3rem solid #93CBD3; background: #DCF5F9; box-shadow: 0 1.3rem .75rem 0 rgba(0, 0, 0, 0.15); width: 100%; overflow-y: auto; z-index: 10; border-radius: 2rem; margin-top: .2rem; pointer-events: none; visibility: hidden; transition: all .3s ease-in-out; opacity: 0; } 
.select-chat div.select-list.show { pointer-events: all; visibility: visible; opacity: 1; } 
.select-chat ul { display: block; max-height: 24rem; padding: 1rem 0; } 
.select-chat ul li { padding: .4rem 4rem .4rem 1.6rem; cursor: pointer; line-height: 2.4rem; position: relative; white-space: nowrap; text-align: left; } 
.select-chat ul li:hover { background: #c6ecf2; } 
.select-chat .dropdown-list li.selected { background: #c6ecf2; color: #DE4E00; } 
.select-chat div.selected-display { height: 6.4rem; font-size: 1.8rem; line-height: 2.8rem; padding: 1.6rem 1.9rem; } 
.select-chat ul li img { width: 2rem; margin: -.3rem .8rem 0 0 !important; } 
.select-chat .dropdown-list li.selected img { filter:hue-rotate(180deg); } 
.select-chat .bs-head { display: none; gap: .8rem; justify-content: space-between; align-items: center; height: 7.2rem; border-bottom: .1rem solid var(--Line_Default, #DEDEDE); padding: 2.4rem; } 
.select-chat .tit { display: block; font-size: 2rem; line-height: 2.4rem; font-weight: 700; text-align: left; } 
.select-chat .btn-close { display: block; width: 2.4rem; height: 2.4rem; background: url(../images/ic_close.svg) no-repeat center / 100% 100%; font-size: 1px; overflow: hidden; text-indent: -10rem; } 
.section6 .write-wrap1 { margin-bottom: 30rem; transition: margin .3s ease; } 
.section6 .write-wrap2 { margin-bottom: 6rem; } 
.section6 .chat-wrap li.me img { display: none; } 
.section6 .chat-wrap-container { display: none; } 

/* section7 */
.section7 { background: #D2E7E0; padding: 9.6rem 0 23.2rem; } 
.section7 h1 { color: #000; font-family: "SDNemony2"; font-size: 6.4rem; font-weight: 400; line-height: 8.2rem; margin-bottom: 9rem; } 
.video-wrap { max-width: 120rem; margin: 0 auto; padding: 0 1.6rem; } 
.video-wrap-inner { width: 100%; height: 0; margin: 0 auto; position: relative; padding-top: 56.25%; outline: 1.6rem solid #FFF; box-shadow: 0 4.6rem 7.88rem 0 rgba(58, 105, 118, 0.25); } 
.video-wrap-inner video { background: #525252; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } 
.video-js {position: absolute !important;top: 0;left: 0;width: 100% !important;height: 100% !important;object-fit: cover;}
/* section8 */
.section8 { background: url(../images/section8_bg.jpg) no-repeat center top / 200rem auto #fff; padding: 0; color: #000; } 
.section8 .ic-quiz { height: 6.8rem; margin-top: -6.8rem; margin-bottom: 7.1rem; } 
.section8 .txt1 { font-size: 2.3rem; font-weight: 400; line-height: 3.6rem; margin-bottom: 2.4rem; } 
.section8 h1 { font-family: "SDNemony2"; font-size: 6.4rem; font-weight: 400; line-height: 8.2rem; margin-bottom: 3.2rem; } 
.section8 .progress-wrap { display: flex; margin: 0 auto; justify-content: center; align-items: center; gap: 1.8rem; margin-bottom: 3.9rem; } 
.section8 .progress-wrap .ic-star { width: 4.7rem; } 
.section8 .progress-wrap > div { color: #FFF; text-align: right; font-family: "Gmarket Sans TTF"; font-size: 3rem; font-weight: 700; line-height: 3.8rem; text-shadow: -.3rem -.3rem 0 #11627D, -.3rem .3rem 0 #11627D, .3rem -.3rem 0 #11627D, .3rem .3rem 0 #11627D, .3rem 0 0 #11627D, 0 .3rem 0 #11627D, -.3rem 0 0 #11627D, 0 -.3rem 0 #11627D; } 
.section8 .progress-wrap > div span { } 
.section8 .progress-bar { border-radius: 10rem; border: 2px solid #1C5769; background: #2C8AA6; box-shadow: 0 .5rem .4rem 0 rgba(0, 0, 0, 0.50) inset; height: 3.2rem; display: flex; width: 46.1rem; flex-direction: column; align-items: flex-start; } 
.section8 .progress-bar div { border-radius: 10rem; border: .3rem solid #A25630; background: linear-gradient(180deg, #FFF1B8 8.5%, #FEDA4D 15%, #CB8708 100%); width: 26rem; height: 3.2rem; } 
.section8 .txt2 { margin-bottom: 3.5rem; font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 3.8rem; } 
.quiz-wrap { width: 100%; max-width: 85.4rem; margin: 0 auto 32.7rem; } 
.quiz-wrap .item { } 
.quiz-wrap .item ul { display: flex; flex-direction: column; gap: 1rem; padding: 0 10rem; } 
.quiz-wrap .item li { position: relative; } 
.quiz-wrap .item li input { display: none; } 
.quiz-wrap .item li label { border-radius: 10rem; border: .3rem solid #1686AB; box-shadow: 0 .4rem .4rem 0 rgba(0, 0, 0, 0.25), 0 -.7rem 0 0 #A9CFDB inset; background: url(../images/section8_ic_num1.svg) no-repeat 1rem .5rem / 4.8rem 4.8rem #fff; color: #000; font-size: 2.4rem; font-weight: 500; line-height: 3.4rem; text-align: left; padding: 1.2rem .8rem 1.5rem 7rem; display: flex; align-items: center; gap: 1.4rem; width: 100%; flex-direction: row; height: auto; cursor: pointer; transition: all .3s ease; will-change: transform;} 

.quiz-wrap .item li:nth-child(1) label { background-image: url(../images/section8_ic_num1.svg) } 
.quiz-wrap .item li:nth-child(2) label { background-image: url(../images/section8_ic_num2.svg) } 
.quiz-wrap .item li:nth-child(3) label { background-image: url(../images/section8_ic_num3.svg) } 
.quiz-wrap .item li:nth-child(4) label { background-image: url(../images/section8_ic_num4.svg) } 
.quiz-wrap label:hover { filter: saturate(2) hue-rotate(-10deg);}
.quiz-wrap .item li label.correct { border-color: #FF5000; box-shadow: 0 .4rem .4rem 0 rgba(0, 0, 0, 0.25), 0 -.7rem 0 0 #f4d0b8 inset; } 
.quiz-wrap .item li label.correct::after {display: block; width: 8.1rem; height: 5.8rem; content: ''; background: url(../images/ic_correct2.png) no-repeat center / 100% 100%; position: absolute; right: -4rem; top: -2.2rem;}
.quiz-wrap .item li input:checked ~ label::before { content: ''; width: 7.1rem; height: 6rem; display: block; position: absolute; top: -.5rem; left: .9rem; background: url(../images/ic_check.png) no-repeat center / contain; } 
.quiz-wrap .item ul.type2 { flex-direction: row; gap: 5rem 2.9rem; flex-wrap: wrap; margin: 0 auto; } 
.quiz-wrap .item ul.type2 li { flex: 1 0 40%; } 
.quiz-wrap .item ul.type2 li label { justify-content: stretch; padding-right: 2rem; } 
.quiz-wrap .item ul.type2.w80p { width: 80%; } 

.quiz-wrap .slick-list, .quiz-wrap .slick-track { height: 100%; min-height: 79rem; } 
.quiz-wrap .slick-prev { width: 7.9rem; height: 7.9rem; background: url(../images/ic_bt_prev.png) no-repeat center / 100% 100%; position: absolute; left: -10rem; top: 22rem; text-indent: -100px; font-size: 1px; z-index: 1; color: transparent; } 
.quiz-wrap .slick-next { width: 7.9rem; height: 7.9rem; background: url(../images/ic_bt_next.png) no-repeat center / 100% 100%; position: absolute; right: -10rem; top: 22rem; text-indent: -100px; font-size: 1px; z-index: 1; color: transparent; } 
@media (max-width: 1200px){
 .quiz-wrap .slick-prev { left: -5rem; } 
 .quiz-wrap .slick-next { right: -5rem; } 
 }
.quiz-wrap .slick-disabled { opacity: .2; filter: saturate(0); } 
.quiz-wrap .slick-next::after { content: ''; width: 6.6rem; height: 4.6rem; background: url(../images/ic_next.png) no-repeat center / contain; display: block; position: absolute; top: -5rem; } 
.quiz-wrap .ox-wrap { display: flex; gap: 9rem; justify-content: center; } 
.quiz-wrap .ic-o { display: block; width: 20.7rem; height: 20.7rem; background: url(../images/ic_o.png) no-repeat center / 100% 100%; overflow: hidden; text-indent: -200px; font-size: 1px; } 
.ox-wrap .ic-x { display: block; width: 20.7rem; height: 20.7rem; background: url(../images/ic_x.png) no-repeat center / 100% 100%; overflow: hidden; text-indent: -200px; font-size: 1px; } 
.ox-wrap > div { position: relative; } 
.ox-wrap input { display: none; } 
.ox-wrap input[type=radio] ~ label { cursor: pointer; } 
.ox-wrap input[type=radio]:checked ~ label::after { content: ''; width: 9rem; height: 8rem; display: block; position: absolute; top: -.5rem; left: 11.9rem; background: url(../images/ic_check.png) no-repeat center / contain; } 
.ox-wrap input[type=radio] ~ label.correct::before { content: ''; width: 19.2rem; height: 19.2rem; border-radius: 50%; border: .5rem solid #FF5000; box-shadow: 0 .4rem .4rem 0 rgba(0, 0, 0, 0.25), 0 -.4rem 0 .6rem #f4d0b8 inset; position: absolute; top: -.15rem; left: .2rem; } 
.ox-wrap input[type=radio] ~ label.correct::after {display: block; width: 8.1rem; height: 5.8rem; content: ''; background: url(../images/ic_correct2.png) no-repeat center / 100% 100%; position: absolute; right: -3rem; top: 0;}
.ic-result { width: 54.7rem; height: auto; margin: 6rem auto 1.6rem; } 
.ic-feedback { width: 78.1rem; margin: 0 auto -2rem; } 

/* section9 */
.section9 {margin-top: -14rem;}
.section9 .txt3 { font-family: "SDNemony2"; font-size: 2.3rem; font-weight: 400; line-height: 3.6rem; } 
.section9 .who-wrap { color: #000; padding-bottom: 7rem; } 
.section9 .who-wrap .img1 { width: 100rem; } 
.section9 .who-wrap .txt3 { margin-bottom: 4.4rem; font-weight: 200; } 
.section9 .line { height: 7.6rem; margin-bottom: 4.4rem; margin-top: 3rem; } 
.section9 .txt4 { font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 3.8rem; margin-bottom: 3.8rem; } 
.section9 .who-wrap ul { display: inline-flex; gap: 1.6rem; margin: 0 auto; justify-self: center; margin-bottom: 7.9rem; } 
.section9 .who-wrap li { } 
.section9 .who-wrap input[type='radio'] { display: none; } 
.section9 .who-wrap label { display: flex; width: 11.7rem; height: 18.9rem; padding: 1.2rem 1rem; flex-direction: column; align-items: center; gap: 0; border-radius: 2rem; border: .3rem solid #CFCFCF; background: #FAF4E8; box-shadow: 0 .6rem 1.38rem 0 rgba(0, 0, 0, 0.16); cursor: pointer; transition: border .3s ease; color: #000; } 
.section9 .who-wrap label:hover { border-color: #FF5000; } 
.section9 .who-wrap input[type='radio']:checked ~ label { border-radius: 2rem; border-color: #FF5000; background: #FFD0BA; box-shadow: 0 0 0 2px #FF5000, 0 .6rem 1.38rem 0 rgba(0, 0, 0, 0.16); } 
.section9 .who-wrap label img { width: 7.7rem; margin-bottom: 1.5rem; } 
.section9 .who-wrap label strong { font-size: 2rem; font-weight: 600; line-height: 2.3rem; } 
.section9 .who-wrap label span { font-size: 1.4rem; font-weight: 500; line-height: 1.9rem; } 
.section9 .txt5 { font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 3.8rem; margin-bottom: 2rem; } 
.section9 .textarea { display: flex; padding: 2rem 2.6rem; border-radius: 2rem; border: .3rem solid #D6D6D6; background: #F6F6F6; box-shadow: 0px 8px 5.4px 0px rgba(0, 0, 0, 0.10) inset; max-width: 80.5rem; margin: 0 auto 2rem; min-height: 6.4rem; width: 100%; font-size: 1.7rem; font-family: "Pretendard"; font-weight: 400;} 
.section9 .textarea::placeholder { color: #5B5B5B; font-size: 1.7rem; line-height: 2.4rem; } 
.section9 .textarea:focus { border-color: #000; outline: none; transition: all .3s ease !important; } 

/* section10 */
.section10 { background: url(../images/section9_bg.jpg) no-repeat center bottom / 200rem auto #240918; padding: 10.8rem 0 14.4rem; color: #000; } 
.section10 h1 { margin-bottom: 6.7rem; } 
.section10 h1 img { width: 55.5rem; } 
.section10 p { color: #F2CDE2; -webkit-text-stroke-color: #F2CDE2; font-family: "SDNemony2"; font-size: 2.3rem; font-weight: 200; -webkit-text-stroke-width: .02rem; line-height: 3.6rem; margin-bottom: 7rem; } 
.section10 .btn-wrap { display: flex; justify-content: center; gap: 6.5rem; flex-direction: row; margin: 0 auto; } 
.section10 .btn-wrap button { background: transparent; border: none; width: 11.9rem; position: relative; } 
.section10 .btn-wrap button img { width: 100%; transition: all .2s ease;} 
.section10 .btn-wrap button:hover img { transform: scale(1.1);} 

.section10 .btn-wrap button.btn-2 img { animation: glow2 1s infinite alternate; }
.section10 .btn-wrap button.btn-2::before {content: ''; width: 94px; height: 94px; border-radius: 47px; display: block; position: absolute; top: 3px; left: 13px; animation: glow 2s 1s infinite alternate; }
.section10 .btn-wrap button.btn-2:hover::before {animation: none;}
.section10 .btn-wrap button.btn-2:hover img { animation: none;} 

@keyframes glow {
    0% {box-shadow: 0 0 5px #ffff00;}
    50% {box-shadow: 0 0 2px 20px #ff5100; filter: brightness(1);}
    100% {box-shadow: 0 0 5px #ffff00;}
}
@keyframes glow2 {
    0% {filter: brightness(1);}
    50% {filter: brightness(1.2);}
    100% {filter: brightness(1);}
}

.btn-chatstart:hover img, .btn-photoshare:hover img { filter: contrast(1.2); transform: scale(1.05); } 
.btn-start { display: flex; height: 5.5rem; padding: 1rem 2.5rem 1rem 2.2rem; justify-content: center; align-items: center; gap: 1.6rem; border-radius: 10rem; background: #FF5000; color: #FFF; font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 2.4rem; border: none; margin: 0 auto; transition: all .3s ease; } 
.btn-start::before { content: ''; width: 3rem; height: 3rem; background: url(../images/ic_start.svg) no-repeat center / contain; } 
.btn-proud, .btn-promise { display: flex; height: 5.5rem; padding: 1rem 2.5rem 1rem 2.2rem; justify-content: center; align-items: center; gap: 1.6rem; border-radius: 10rem; background: #FF5000; color: #FFF; font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 2.4rem; border: none; margin: 0 auto; transition: all .3s ease; } 
.btn-proud::before, .btn-promise::before { content: ''; width: 3rem; height: 3rem; background: url(../images/ic_bt_arrow_up.svg) no-repeat center / contain; } 
.btn-reset { display: flex; height: 5.5rem; padding: 1rem 2.5rem 1rem 2.2rem; justify-content: center; align-items: center; gap: 1.6rem; border-radius: 10rem; background: #FF5000; color: #FFF; font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 2.4rem; border: none; transition: all .3s ease; } 
.btn-reset::before { content: ''; width: 3rem; height: 3rem; background: url(../images/ic_review.svg) no-repeat center / contain; } 
.btn-review { display: flex; height: 5.5rem; padding: 1rem 2.5rem 1rem 2.2rem; justify-content: center; align-items: center; gap: 1.6rem; border-radius: 10rem; background: #FF5000; color: #FFF; font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 2.4rem; border: none; transition: all .3s ease; } 
.btn-review::before { content: ''; width: 3rem; height: 3rem; background: url(../images/ic_review.svg) no-repeat center / contain; } 
.btn-promise:hover, .btn-proud:hover, .btn-review:hover, .btn-reset:hover, .btn-start:hover { filter: drop-shadow(0 0 8px #FF5000); box-shadow: 0 0 0 .3rem #fff; transform: scale(1.05) !important; transition-duration: .2s !important; } 
.btn-write:hover { transform: scale(1.05) !important; transition-duration: .2s !important; } 
.btn-result { display: flex; height: 5.5rem; padding: 1rem 2.5rem 1rem 2.2rem; justify-content: center; align-items: center; gap: 1.6rem; border-radius: 10rem; margin: 0 auto; background: #FF5000; color: #FFF; font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 2.4rem; border: none; transition: all .3s ease; } 
.btn-result::before { content: ''; width: 3rem; height: 3rem; background: url(../images/ic_result.svg) no-repeat center / contain; } 
.btn-requiz { display: flex; height: 5.5rem; padding: 1rem 2.5rem 1rem 2.2rem; justify-content: center; align-items: center; gap: 1.6rem; border-radius: 10rem; margin: 0 auto; background: #FF5000; color: #FFF; font-family: "SDNemony2"; font-size: 2.4rem; font-weight: 400; line-height: 2.4rem; border: none; transition: all .3s ease; } 
.btn-requiz::before { content: ''; width: 3rem; height: 3rem; background: url(../images/ic_requiz.svg) no-repeat center / contain; } 

nav { position: fixed; top: 7.4rem; right: 7.3rem; display: flex; z-index: 2; color: #000; } 
nav .btn-my { width: 7.8rem; height: 7.8rem; display: block; position: absolute; background: url(../images/ic_my.png) no-repeat center / 100% 100%; position: absolute; top: -4rem; right: -4rem; font-size: 1px; text-indent: -10rem; overflow: hidden; z-index: 1; } 
nav .btn-my.show { background-image: url(../images/ic_my_close.png); } 
nav > div { text-align: left; gap: 2.3rem; flex-direction: column; padding: 2.7rem 4.4rem; border-radius: 2rem; border: .4rem solid #FF5000; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(4rem); display: flex; position: absolute; right: -50rem; transition: right .3s ease; } 
nav .btn-my.show ~ div { right: 0; } 
nav h2 { color: #FF5000; font-family: "SDNemony2"; font-size: 2.4rem; font-style: normal; font-weight: 400; line-height: 3.8rem; } 
nav h3 { color: #000; font-family: Pretendard; font-size: 2.4rem; font-style: normal; font-weight: 700; line-height: 2.9rem; letter-spacing: -0.024rem; } 
nav .progress-bar { height: 2.9rem; width: 28.8rem; background: url(../images/progress_bg.png); } 
nav .progress-bar div { height: 100%; width: 0; background: url(../images/progress_r.jpg) no-repeat top right / auto 100%, url(../images/progress_l.jpg) no-repeat left top / auto 100%; border-radius: 1.45rem; overflow: hidden; } 
nav p { color: #424141; font-family: Pretendard; font-size: 1.6rem; font-weight: 500; line-height: 2.4rem; padding-bottom: 2.3rem; border-bottom: .1rem solid #BABABA; } 
nav ul { margin: 0 auto; width: 100%; display: block; } 
nav li { text-align: left; position: relative; } 
nav .btn-menu { color: #000; font-family: Pretendard; font-size: 2rem; font-weight: 500; line-height: 2.4rem; background: url(../images/ic_cate.svg) no-repeat 0 50% / auto 2.4rem; padding: 1.2rem 3.2rem; width: 100%; text-align: left; } 
nav li::after { content: ''; display: block; height: .1rem; width: 26.2rem; background: #BABABA; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } 
nav .btn-menu:hover { filter: none; color: #FF5000; } 
nav li:last-child::after { display: none; } 
nav .btn-menu::after { content: ''; display: inline-block; width: 2.8rem; height: 2.8rem; background: url(../images/ic_nocheck.svg) no-repeat center / 100% 100%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } 
nav .btn-menu.pass::after { background-image: url(../images/ic_check.svg); } 
nav .btn-menu.ing::after { background-image: url(../images/ic_checking.svg); } 
nav .ic-pass { width: 18.2999rem; margin: 0 auto; } 

.ic-scrollguide { width: 16rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; opacity: 0; visibility: hidden; pointer-events: none; transition: all .5s .3s ease; } 
.ic-scrollguide.show { opacity: 1; visibility: visible; width: 24rem; } 

.scroll-disabled { pointer-events: none; overscroll-behavior: contain; } 

.btn-guide { width: 7.8rem; height: 7.8rem; display: block; position: fixed; background: url(../images/ic_guide.png) no-repeat center / 100% 100%; top: 3.4rem; left: 3.2rem; font-size: 1px; text-indent: -10rem; overflow: hidden; z-index: 1; } 
.pop-guide {position: fixed; background: rgba(0, 0, 0, 0.60); backdrop-filter: blur(.965rem); top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; justify-content: center; align-items: center; display: none; }
.pop-guide.show {display: flex;}
.pop-guide .guide-hint { width: 7.8rem; height: 7.8rem; display: block; position: absolute; top: 3.4rem; left: 3.2rem; z-index: 1;}
.pop-guide .guide-hint .ic img {width: 7.8rem; height: 7.8rem;}
.pop-guide .guide-hint .ic::before { content: ''; width: 8rem; height: 8rem; border-radius: 8rem; border: .6rem solid #fff; display: block; position: absolute; top: -.78rem; left: -.7rem; }
.pop-guide .guide-hint .txt {width: 18.5rem; display: block; margin: -6rem 0 0 8.8rem;}
.pop-guide .guide-hint .txt img {width: 100%;}
.pop-guide .guide-my { width: 7.8rem; height: 7.8rem; display: block; position: absolute; top: 3.4rem; right: 4.8rem; z-index: 1;}
.pop-guide .guide-my .ic img {width: 7.8rem; height: 7.8rem;}
.pop-guide .guide-my .ic::before { content: ''; width: 8rem; height: 8rem; border-radius: 8rem; border: .6rem solid #fff; display: block; position: absolute; top: -.78rem; left: -.7rem; }
.pop-guide .guide-my .txt {width: 18.5rem; display: block; margin: -4rem 0 0 -16rem;}
.pop-guide .guide-my .txt img {width: 100%;}
.pop-guide .inner {border-radius: 5.5rem; border: .6rem solid #FFF; background: rgba(5, 16, 40, 0.20); box-shadow: 0 1.6rem 3.42rem 0 rgba(0, 0, 0, 0.25); backdrop-filter: blur(1.3rem); display: flex; width: 67.4rem; min-height: 64.8rem; padding: 3.4rem 4.5rem 4.5rem; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; margin: 0 auto;}
.pop-guide .inner > div {width: 100%;}
.pop-guide .btn-close { display: block; width: 3.6rem; height: 3.6rem; background: url(../images/ic_close_w.svg) no-repeat center / 100% 100%; font-size: 1px; overflow: hidden; text-indent: -10rem; position: absolute; top: 3.2rem; right: 3.2rem; } 
.pop-guide h3 {color: #B7E2FF; text-align: center; font-family: "SDNemony2"; font-size: 5.5rem; font-style: normal; font-weight: 400; line-height: 7rem; margin-bottom: 2.7rem;}
.pop-guide p {color: #E7E7E7; text-align: center; font-family: Pretendard; font-size: 1.8rem; font-weight: 500; line-height: 2.5rem; }
.pop-guide p img {width: 3.6rem; vertical-align: middle; display: inline-block; margin-top: -.2rem;}
.pop-guide h4 { padding: 3rem 0 .8rem; color: #EBE3A3; text-align: center; font-family: Pretendard; font-size: 3.2rem; font-weight: 700; line-height: 4rem; border-bottom: .1rem solid rgba(255, 255, 255, 0.5); margin-bottom: 1rem; display: block; width: 100%;}
.pop-guide .noti-list {}
.pop-guide .noti-list li { color: #E7E7E7; font-family: Pretendard; font-size: 1.8rem; font-weight: 500; line-height: 2.5rem; text-align: left; padding: 0 0 0 2.6rem; position: relative;}
.pop-guide .noti-list li::before {content: ''; width: .4rem; height: .4rem; border-radius: .2rem; display: block; background: #fff; position: absolute; top: 1rem; left: 1rem; }
.video-txt {color: #FF5900; font-size: 2rem; line-height: 4.2rem; text-align: center; font-weight: 400; font-family: SDNemony2; margin-top: 4rem; }
.guide-txt {color: #222; font-size: 2rem; line-height: 4.2rem; text-align: center; font-weight: 400; font-family: SDNemony2; margin-top: 4rem; }

/* responsive */
@media screen and (max-width: 1200px) { } 

@media (max-width: 1000px) { html { font-size: 1vw; } 
 }

.section1, .section2, .section3, .section4, .section5, .section6, .section7, .section8, .section9, .section10 { display: none; } 
.section1 { display: block; }