@charset 'utf-8';
/* 1. 웹폰트 또는 외부 CSS 연결 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Outlined');
/* 2. 초기화 */
html { font-size: 10px; } 
* { padding: 0; margin: 0; box-sizing: border-box; } 
*:before, *:after { box-sizing: border-box; } 
body { font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size: 1.6rem; color: #666; line-height: 1.6; overflow-x: hidden; } 
body.hidden { overflow: hidden; } 
h1, h2, h3 { color: #fff; font-family: 'Nanum Myeongjo', '바탕', serif; } 
h4, h5, h6 { color: #333; font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; } 
h4 { font-size: 1.8rem; margin: 5rem 0 2rem; } 
input, select, textarea { font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size: 1.6rem; color: #666; } 
button { cursor: pointer; color: #fff; } 
a { text-decoration: none; color: #666; /* outline: 0; */}

ol, ul { list-style-type: none; } 
img { border: 0; vertical-align: top; } 
p { margin: 1em 0; } 
table { width: 100%; margin: auto; border-collapse: collapse; border-top: 1px solid #ddd; } 
th, td { padding: 10px; border-bottom: 1px solid #eee; text-align: center; } 
th { border-bottom-color: #ddd; background-color: #f8f8f8; } 

/* 3. 공용클래스 */
.wrap { width: 100%; max-width: 118rem; padding: 0 5%; margin: auto; } 
.sound-only { position: absolute; left: -9999em; top: -9999em; } 
.clearfix:after { content: ''; display: block; clear: both; } 
.serif { font-family: 'Nanum Myeongjo', '바탕', serif; } 
.table { display: table; width: 100%; } 
.tc { display: table-cell; vertical-align: middle; } 
.center { text-align: center; } 
.cut-txt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

/* 4. 컬럼설계 */
.col-2 > * { float: left; width: 50%; } 
.col-3 > * { float: left; width: 33.3333%; } 
.col-4 > * { float: left; width: 25%; } 
.col-5 > * { float: left; width: 20%; } 
.col-6 > * { float: left; width: 16.6666%; } 

/* 5. 자주 사용하는 글자색과 배경 */
.wh, .wh:hover, .wh a, .wh a:hover, .wh h2, .wh h3, .wh h4 { color: #fff !important; } 
.bk, .bk:hover, .bk a, .bk a:hover { color: #000 !important; } 
.gr, .gr:hover, .gr a, .gr a:hover { color: #333 !important; } 
.green, .green:hover, .green a, .green a:hover { color: #3AAF69 !important; } 

/* 버튼 스타일링 */
.btn-basic { position: relative; display: inline-block !important; padding: 0 2.4rem; line-height: 2.8; font-weight: 500; z-index: 1; transition: 0.2s; } 
.btn-basic:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #000; opacity: 0; z-index: -1; transition: 0.2s; } 
.btn-line { border: 1px solid #000; background-color: transparent; } 
.btn-line:hover { color: #fff !important; } 
.btn-line:hover:before { opacity: 1; } 
.btn-solid { border: 0; color: #fff !important; } 
.btn-solid:hover:before { opacity: 0.8; } 
.btn-solid:before { opacity: 1; } 
.btn-bk { border-color: #000; color: #000; } 
.btn-bk:before { background-color: #000; } 
.btn-wh { border-color: #fff; color: #fff; } 
.btn-wh:before { background-color: #fff; } 
.btn-gr { border-color: #3AAF69; color: #3AAF69; } 
.btn-gr:before { background-color: #3AAF69; } 
.btn-or { border-color: #F55521; color: #F55521; } 
.btn-or:before { background-color: #F55521; } 
.round-btn { border-radius: 1.9rem; overflow: hidden; } 
@media screen and (min-width: 1024px){
 .round-btn { border-radius: 2.2rem; } 
 }
/* 파트선 */
.part-line { line-height: 0.7; } 
.part-line:after { content: ''; display: block; clear: both; } 
.part-line > * { float: left; padding: 0 1.5rem; margin: 0.7rem 0; border-right: 1px solid #666; } 
.part-line > *:first-child { padding-left: 0; } 
.part-line > *:last-child { border-right-width: 0; } 

/* 5. 공통영역별 설계 */

/* 스킵영역 */
#skip { } 
#skip a { position: fixed; left: 0; top: -5rem; display: block; width: 100%; background-color: #F55521; text-align: center; line-height: 4.8rem; color: #fff; z-index: 9999; transition: top 0.2s; } 
#skip a:focus { top: 0; } 

/* 헤더영역 */
#rg-hd { position: absolute; left: 0; top: 0; width: 100%; z-index: 100; transition: 0.5s; } 
#rg-hd:before { /*헤더 라인*/ content: ''; position: absolute; left: 0; top: 7.2rem; width: 100%; height: 0.1rem; background-color: #fff; opacity: 0.3; z-index: 10; } 
.rg-logo { float: left; width: 7.2rem; margin-left: 1.5rem; } 
.rg-logo a { display: block; width: 100%; padding-top: 100%; background: url('../images/logo_brush.png') center center/contain no-repeat; } 
.gnb-toggle-btn { position: absolute; right: 1.5rem; top: 50%; width: 4rem; height: 4rem; border: 0; background-color: transparent; transform: translateY(-50%); z-index: 101; } 
.toggle-line { position: absolute; left: 10%; width: 80%; height: 0.2rem; overflow: hidden; background-color: #fff; text-indent: -9999em; transition: top 0.3s 0.5s, transform 0.3s 0.2s; } 
.line1 { top: 20%; } 
.line2 { top: calc(50% - 0.1rem); transition: opacity 0.3s 0.6s; } 
.line3 { top: calc(80% - 0.2rem); } 
.gnb-toggle-btn.close .toggle-line { top: calc(50% - 0.1rem); transition: top 0.3s 0.2s, transform 0.3s 0.5s; } 
.gnb-toggle-btn.close .line1 { transform: rotate(45deg); } 
.gnb-toggle-btn.close .line2 { opacity: 0; transition: opacity 0.5s; } 
.gnb-toggle-btn.close .line3 { transform: rotate(-45deg); } 

.nav-wrap { position: fixed; right: -90%; top: 0; width: 90%; height: 100%; background-color: #ccc; transition: 0.5s; z-index: 1; } 
.nav-wrap.open { right: -1px; } 
#rg-gnb { padding-top: 7.2rem; } 
.rg-gnb { } 
.rg-gnb a { display: block; } 
.depth1 { } 
.depth1 > a { padding: 0 2.4rem; line-height: 6.4rem; font-size: 2.2rem; font-weight: 500; } 
.depth1 > a:after { content: ''; float: right; display: block; width: 1rem; height: 1rem; margin-top: 2.7rem; border: 2px solid #aaa; border-width: 0 2px 2px 0; border-radius: 0 0 2px 0; transform: rotate(-45deg); } 
.depth2 { display: none; padding: 1.2rem 0; background-color: #f6f6f6; font-size: 1.7rem; line-height: 4rem; } 
.depth2 li { } 
.depth2 li a { padding-left: 3.6rem; } 
.depth1 .depth2 li a:hover, .depth1.active .depth2 li a:focus, .depth2 li a:hover, .depth1.active .depth2 li a:focus { color: #FBB900; } 

/* 메뉴 활성화 */


.util-sns-wrap { position: absolute; right: 0; top: 0; padding: 1.7rem 0 0 1rem; width: 100%; height: 7.2rem; } 
.util-sns-wrap a { display: inline-block; color: #fff; } 
.util-sns-wrap > div { float: left; } 
.util-menu { }
.util-menu a { width: 8.4rem; line-height: 3.6rem; text-align: center; border: 0.1rem solid #fff; border-radius: 1.9rem; } 
.sns-menu { font-size: 2.4rem; } 
.sns-menu:before { content: ''; float: left; display: block; width: 0.1rem; height: 1.8rem; margin: 1rem 0.5rem 0 1rem; background-color: #fff; opacity: 0.5; } 
.sns-menu a { width: 3rem; text-align: center; } 

/* 헤더 어두운 구간 설계 */
#rg-hd.fixed { background-color: #AAA; } 
.shadow .rg-logo a { background-image: url('../images/logo_brush.png'); } 

/* 푸터 */
#rg-ft { padding: 4rem 0; background-color: #181818; color: #999; } 
#rg-ft a { color: #999; } 
#rg-ft > .wrap { } 
#rg-ft .wrap > * { margin: 2rem 0; } 
.ft-menu { font-weight: 500; } 
.ft-menu a { display: block; } 
.ft-family-site-wrap { position: relative; width: 16rem; line-height: 4rem; z-index: 1; } 
.ft-family-site-wrap a { display: block; padding: 0 1.2rem; } 
#rg-ft .family-btn { position: relative; background-color: #3aaf69; color: #fff; font-weight: 500; cursor: pointer; } 
.family-btn:after { content: ''; position: absolute; right: 1.2rem; top: 50%; border-width: 0 0.4rem 0.6rem; border-style: solid; border-color: transparent; border-bottom-color: #fff; transform: translateY(-50%); } 
.ft-family-site-inner { position: absolute; left: 0; bottom: 100%; width: 100%; height: 0; background-color: #fff; box-shadow: 0 -1px 5px rgba(0,0,0,0.2); z-index: -1; overflow: hidden; transition: height 0.3s; } 
.ft-family-site { position: absolute; left: 0; bottom: 0; width: 100%; } 
.ft-family-site-inner.show { height: 32.7rem; } 
.ft-family-site li { border-top: 1px solid #eee; } 
.ft-family-site li:first-child { border-top-width: 0; } 

.ft-info > dt, .ft-info dd:nth-of-type(1), .ft-info dd:nth-of-type(2) { clear: both; } 
.ft-info > dt, .ft-info > dd { border-right-width: 0; padding: 0; } 
.ft-info > dt:after { content: ':'; padding: 0 0.5rem; } 

.top-btn { display: none; position: fixed; right: 2rem; bottom: 2rem; width: 4rem; height: 4rem; border: 0; border-radius: 50%; background-color: rgba(0,0,0,0.7); color: #fff; font-size: 1.8rem; transition: opacity 0.2s 0.3s, transform 0.3s; } 
.top-btn:hover { opacity: 1 !important; transform: translateY(-20%); transition: opacity 0.2s, transform 0.3s 0.2s; } 

/* 모달창 */
.modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.75; z-index: 1; } 
.modal-dark { overflow: hidden; } 
.modal-dark #rg-gnb:before { display: none; }