/* 웹폰트 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900; 1,100..900&display=swap'); @import url(https://cdn.jsdelivr.net/xeicon/2/xeicon.min.css); html { font-size: 62.5%; } 
* { margin:0; padding:0; box-sizing:border-box; letter-spacing:-0.04em; color:inherit; } 
img { border:0; vertical-align:top; } 
a { border:0; text-decoration:none; font-size: 2rem; } 
ul, li { list-style:none; } 
body { font-family: "Pretendard Variable", Pretendard, sans-serif; color:#303030; } 
.inner { width:1400px; margin:auto; } 
.inner2 { width:1300px; margin:auto; } 
.inner3 { width:1200px; margin:auto; } 


h1 { font-size: 6rem; } 
h2 { font-size: 5rem; } 
h3 { font-size: 4rem; } 
h4 { font-size: 3rem; } 
h5 { font-size: 2.4rem; } 
h6 { font-size: 2.2rem; } 

h1, h2, h3, h4, h5 { word-break: keep-all; } 
p { font-size: 2rem; line-height: 30px; word-break: keep-all; } 
b { font-weight: 700; } 
.thin { font-weight: 300; } 


.jost { font-family: "Jost", sans-serif; } 

/* 마진설정 */
.mt5 { margin-top:5px; } 
.mt10 { margin-top:10px; } 
.mt20 { margin-top:20px; } 
.mt30 { margin-top:30px; } 
.mt40 { margin-top:40px; } 
.mt50 { margin-top:50px; } 
.mt60 { margin-top:60px; } 
.mt70 { margin-top:70px; } 
.mt80 { margin-top:80px; } 
.mt90 { margin-top:90px; } 
.mt100 { margin-top:100px; } 
.mt110 { margin-top:110px; } 
.mt120 { margin-top:120px; } 

.mb10 { margin-bottom:10px; } 
.mb20 { margin-bottom:20px; } 
.mb30 { margin-bottom:30px; } 
.mb40 { margin-bottom:40px; } 
.mb50 { margin-bottom:50px; } 
.mb60 { margin-bottom:60px; } 
.mb70 { margin-bottom:70px; } 
.mb80 { margin-bottom:80px; } 
.mb90 { margin-bottom:90px; } 
.mb100 { margin-bottom:100px; } 
.mb110 { margin-bottom:110px; } 
.mb120 { margin-bottom:120px; } 

.pt80 { padding-top:80px; } 


.flex { display: flex; /*flex-wrap: wrap; */ } 
.col { flex: 1; } 
.img100 { width: 100%; display: block; } 



.c_main1 { color: #226eba; } 
.c_main2 { color: #6caee5; } 
.c_main3 { color: #303030 !important; } 

.c_white { color: #fff; } 
.c_gray { color: #b0b0b0; } 
.c_red { color: #e94141; } 


.clearfix::after { content: ""; display: block; clear: both; } 

.left { text-align: left; } 
.center { text-align: center; } 
.right { text-align: right; } 


.pc_show { display: none; } 
.m_show { display: none; } 


/* 공통 */
#wrap { width:100%; /*min-width:1200px; */ margin:auto; overflow:hidden; } 
h2.tit { font-weight: 400; letter-spacing: 0px; line-height: 6rem; } 
h2.tit span { letter-spacing: 0px; } 
h2.tit_big { font-size: 50px; font-weight: 800; letter-spacing: 0px; } 
h2.tit_big_60 { font-size: 60px; font-weight: 800; letter-spacing: 0px; } 
h2.tit_big span { letter-spacing: 0px; } 
h2.tit_big .thin { font-weight: 400; } 
.sub_tit { color: #d0d0d0; font-size: 2rem; margin-top: 10px; letter-spacing: 4px; font-family: "Jost", sans-serif; } 

h5 { font-size: 22px; } 



/* 헤더 */
#header { width:100%; position: relative; z-index: 50; } 
#header > .inner { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 50px; padding-left: 60px; padding-right: 60px; } 
#header .logo { width: 320px; height: 62px; background: url(images/logo.png) no-repeat center; display: block; background-size: contain; } 
#header .m_btns { color: #226eba; } 
#header .xi-bars:before { font-size: 6rem; font-weight: bold; } 



/* 메뉴 */
/* #menu { position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100vh; background: url(images/logo_bg_2.png) no-repeat right -5% bottom -10% #fff; padding: 12rem 9rem; z-index: 999; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out; overflow-x: hidden; } */
#menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: url(images/logo_bg_2.png) no-repeat right -5% bottom -10% #fff; padding: 12rem 9rem; z-index: 999; overflow-x: hidden; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } 

#menu.on { opacity: 1; visibility: visible; } 
/* #menu.on { display: block; } */
/* #menu .close_btn { position: absolute; top: 28px; right: 28px; font-size: 4rem; color: #226eba; } */
#menu .close_btn { position: absolute; top: 55px; right: 55px; font-size: 5rem; color: #226eba; display: none; } 
#menu .nav { display: inline-block; position : absolute; left: 40%; transform: translateX(-50%); } 
#menu .nav > ul { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 5rem; } 
#menu .nav > ul > li > a { position: relative; font-size: 3rem; display: block; font-weight: 700; color: #226eba; margin-bottom: 2rem; padding-left: 2rem; } 
#menu .nav > ul > li > a:after { position: absolute; top: 0; left: 0; content: ""; width: 6px; height: 100%; background: #226eba; } 
#menu .nav .sub_nav { display: flex; gap: 25px; flex-wrap: wrap; } 
#menu .nav .sub_nav li a { display: flex; font-size: 2rem; gap: 3rem; transition: all .2s; } 
#menu .nav .sub_nav li a:hover { position: relative; color: #6caee5; font-weight: 700; } 
#menu .nav .sub_nav li:hover a:after { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 1px; background: #6caee5; } 



/* 하단 */
#footer .inner { display: flex; padding: 5rem 2rem; gap: 80px; border-top: 1px solid #dcdcdc; } 
#footer .txt p { display: inline-block; color: #505050; font-size: 1.8rem; padding-right: 40px; } 
#footer .txt p a { font-size: 1.8rem; } 
#footer .txt .link { display: flex; gap: 20px; margin-bottom: 20px; } 
#footer .txt .link a { font-weight: 600; } 



/* 퀵메뉴 */
#quick_menu { position: fixed; top: 230px; right: 0px; width: 95px; z-index: 50; } 
#quick_menu ul li { width: 95px; height: 95px; text-align: center; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; } 
#quick_menu ul li:nth-child(odd) { background: #6caee5; } 
#quick_menu ul li:nth-child(even) { background: #226eba; } 
#quick_menu ul li p { font-size: 1.8rem; font-weight: 700; color: #fff; margin-top: 5px; } 



/* 미디어쿼리 반응형 */
@media (max-width: 1920px){
 #wrap { width: 100%; margin: 0 auto; } 
 }

@media (max-width: 1400px){
 .inner { width: 100%; padding: 0 20px; } 
.inner2 { width: 100%; padding: 0 20px; } 

/* 모바일 이미지 나타내기 */
.m_show { display: block; } 
.pc_show { display: none; } 

/* header */
#header > .inner { padding-top: 20px; padding-left: 20px; padding-right: 20px; } 
#header nav > ul > li > a { font-size: 1.8rem; } 
 }

 @media (max-width: 1200px){
 #menu .close_btn { display: block; } 
}

@media (max-width: 1024px){
 .m_show { display: none !important; } 
 }

@media (max-width: 960px) { /* 메뉴 */
#menu { padding: 10rem 5rem; } 
#menu .nav .sub_nav { gap: 20px; } 

/* 하단 */
#footer .inner { flex-direction: column; gap: 30px; } 
 }

@media (max-width: 720px) { /* 간격 */
#content .paragraph { padding: 80px 0; } 
 }

@media (max-width: 640px) { /* 퀵메뉴 아래 padding */
body { padding-bottom: 95px; } 

/* 글자 반응형 */
html { font-size: 50%; } 

p { line-height: 22px; } 

/* 메뉴 */
#header .logo { width: 200px; height: 39px; } 
#header .xi-bars:before { font-size: 3.5rem; } 


/* header */
#menu { padding: 5rem 3rem; background: url(images/logo_bg_2.png) no-repeat right -5% bottom -10% / 60% #fff; } 
#menu .nav > ul { gap: 4rem; } 
#menu .nav .sub_nav { gap: 15px; } 


/* 하단 */
#footer .f_logo img { width: 230px; } 
#footer .txt p { padding-right: 25px; } 

/* 퀵메뉴 */
#quick_menu { width: 100%; top: unset; bottom: 0; } 
#quick_menu ul { display: flex; } 
#quick_menu ul li { flex: 1 0 25%; border-radius: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; } 

#menu .close_btn { top: 28px; right: 28px; font-size: 3.5rem; } 
 }


@media (max-width: 480px) { /* 메인 글자 크기 */
p { line-height: 24px; } 
 }