@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300; 400; 500; 600; 700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700& subset=korean');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700; 1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300; 400; 500; 600; 700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700& subset=korean');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700; 1,100..700&display=swap');
@font-face { font-family: 'Daeojamjil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil1Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; } 
@font-face { font-family: 'Daeojamjil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil2Light.woff2') format('woff2'); font-weight: 300; font-display: swap; } 
@font-face { font-family: 'Daeojamjil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil3Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } 
@font-face { font-family: 'Daeojamjil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil4Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } 
@font-face { font-family: 'Daeojamjil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } 
@font-face { font-family: 'Daeojamjil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil6ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; } 

@import url(./font_noto/font.css);


/*** Reset ***/
html, body { width: 100%, height: 100% } 
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, span, form, fieldset, input, select, label, textarea, table, caption, thead, tfoot, tbody, tr, th, td { margin:0; padding:0; color:#000; font-family:'Roboto','Noto Sans KR','Noto Sans SC',Sans-serif; font-size:16px; font-weight:400; line-height:1.5; font-smoothing:antialiased; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; letter-spacing:-0.5px; } 
b, span, strong, input, a, button { font-size:inherit; font-family:inherit; color:inherit } 
article, aside, dialog, footer, header, section, footer, nav, figure, hgroup, details, summary, figure, figcaption { display: block; } 
cite { display:inline } 
html, body { height:100%; } 
body { overflow-x:hidden; margin:0px; overflow-x:hidden; word-break:keep-all; overflow-wrap:anywhere; font-size: 0; } 
a:link { text-decoration:none; } 
a:visited { text-decoration:none; } 
img { border:0; max-width:100% } 
label, input, textarea, select { vertical-align:middle } 
ol, ul { list-style:none; } 
table { border-collapse:collapse; table-layout:fixed; } 
fieldset { border:none } 
.skip, hr, legend { position:absolute; left:-1000%; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden; } 
button { margin:0; padding:0; border:none; background:none; cursor:pointer; display:inline-block; } 
b { font-weight:500 } 
h1, h2, h3 { word-break: keep-all; }

header::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 40px; background: #313133; z-index:1; } 
header { position:relative; width:100%; margin:0 auto; box-sizing:border-box; padding:0 140px 0 60px; z-index:2 } 
header .logo { display:block; position:absolute; left:50px; top:70px; z-index:2; transition:0.2s; } 
header .logo>a { display:block; overflow:hidden; } 
header .logo>a img { max-width:none; height:46px; vertical-align:top; width:80%; height:80%; } 
header .logo>a>span { display:none; } 
header .top_util { position:absolute; left:0; top:0px; width:100%; height:40px; box-sizing:border-box; z-index:1; } 
header .top_util>button,
header .top_util>a { display:block; position:absolute; top:82px; overflow:hidden; width:30px; height:30px; text-indent:-999px; } 
header .top_util .btn_topSearch { right:190px; background:url(../img/layout/ico_topSearch_black.png) no-repeat center; } 
header .top_util .btn_topSitemap { right:140px; background:url(../img/layout/ico_lineGrp_black.png) no-repeat center; } 
header .top_util .siteCateg { float:left; overflow:hidden; height:40px; box-sizing:border-box; border-left:1px solid #505051; font-size:0; text-align:left; white-space:nowrap; } 
header .top_util .siteCateg>a { display:inline-block; overflow:hidden; width:159px; box-sizing:border-box; border-right:1px solid #505051; color:rgba(255,255,255,0.5); font-family:'Roboto','Noto Sans KR',sans-serif; font-size:14px; font-weight:400; line-height:41px; text-align:center; vertical-align:top; } 
header .top_util .siteCateg>a.on { border-right:none; background:#a70638; color:#fff; } 
header .top_util .etc { float:right; padding-right:0px; } 
 {
 float: right; display: inline-block; font-size: 14px; z-index: 2; color: rgba(255, 255, 255, 0.5); margin-top: 0; display: inline-block; overflow: hidden; /* width: 140px; */
 width: 159px; box-sizing: border-box; border-right: 1px solid #505051; color: rgba(255, 255, 255, 0.5); font-family: 'Roboto', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 400; line-height: 40px; text-align: center; vertical-align: top; border-right: none; background: #a70638; color: #fff; } 
header .top_util .etc>a { display:inline-block; overflow:hidden; height:40px; color:#fff; font-family:'Roboto','Noto Sans KR',sans-serif; font-size:14px; font-weight:400; line-height:41px; vertical-align:top; } 
header .top_util #popup { float:right; display:inline-block; font-size:14px; z-index:2; color:rgba(255, 255, 255, 0.5); margin-top:0; } 
header .top_util #popup button { background-color:#000; display:inline-block; padding:10px; color:#ffffff; } 
header .top_util #popup #confirm { margin:-3px 0 0 0; padding:0 }

header .top_right { float: right; }
header .top_right .En { display: inline-block; overflow: hidden; width: 130px; color: #fff; font-family: 'Roboto', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: normal; line-height: 40px; text-align: center; vertical-align: top;}
header .top_right .login { display: inline-block; overflow: hidden; width: 130px; color: #fff; font-family: 'Roboto', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: normal; line-height: 40px; text-align: center; vertical-align: top; background: #a70638; margin-right: 10px;}

main { position: fixed; overflow: hidden; width: 100%; } 
.m_br {display: none;}


/* 백그라운드 */
.bg-container { position: relative; width: 100%; height: 100vh; overflow: hidden; } 
.bg-container .intro_bg { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); background-image: url(/type/GRAD_A/img/intro/intro_bg.jpg); } 


/* 공통 영역 */
body { overflow-x: hidden; font-size: 0; } 

h1, h2, h3 { word-break: keep-all; } 
.f_white { color:#fff !important; } 
#contents { position: relative; display: inline-block; width: 100%; } 
section { position: relative; } 
section .innerContents { position: relative; z-index: 1; margin: 0 auto; padding: 0 50px; box-sizing: border-box; } 

section.subSection { height: 900px } 


/* Inner Contents */
/* titleArea */
.innerContents .titleArea { padding-top: 140px; } 
.innerContents .titleArea h1 { font-family: "Daeojamjil", sans-serif; font-weight: bold; font-size: 90px; line-height: 100%; letter-spacing: -5px; color: #fff; text-align: center; } 
.innerContents .titleArea h2 { font-weight: normal; font-size: 48px; line-height: 100%; color: #fff; margin-top: 50px; text-align: center; } 
.innerContents .titleArea h3 { font-weight: bold; font-size: 48px; line-height: 100%; background: linear-gradient(172deg, #f1ff97, #f1ff97, #8cfffb, #8cf9ff); -webkit-background-clip: text; color: transparent; margin-top: 12px; text-align: center; } 

/* gradArea */
.innerContents .gradArea { margin-top: 50px; } 
.innerContents .gradArea ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; } 
.innerContents .gradArea ul li { padding: 60px 0 50px 0; background: rgba(247, 250, 255, 0.3); border-radius: 15px; border: solid 1px rgb(255 255 255 / 28%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: -20px -20px 0px rgba(31, 38, 135, 0), inset 4px 2px 3px -1px rgb(255 255 255 / 64%), inset 2px 0 2px -1px rgba(255, 255, 255, 0.3); text-align: center; } 

.innerContents .gradArea .dept_wrap h1 { font-family: "Daeojamjil", sans-serif; font-weight: normal; font-size: 60px; line-height: 100%; letter-spacing: -5px; } 
.innerContents .gradArea .dept_wrap h2 { font-weight: normal; font-size: 36px; line-height: 100%; letter-spacing: -2px; margin-top: 50px; } 
.innerContents .gradArea .dept_wrap h3 { font-weight: normal; font-size: 20px; line-height: 100%; color: #666; margin-top: 20px; } 
.innerContents .gradArea .dept_wrap a { font-weight: normal; font-size: 18px; line-height: 100%; color: #fff; text-align: center; padding: 10px 50px; background: #a70638; border-radius: 30px; display: inline-block; margin-top: 40px; } 

/* Footer */
.footer .f_info p { font-style: normal; font-weight: normal; font-size: 14px; line-height: normal; color: #555; margin-top: 20px; }


/* Animation */
.innerContents .titleArea h1, .innerContents .titleArea h2, .innerContents .titleArea h3, .innerContents .gradArea ul li { opacity: 0; } 
.innerContents .titleArea h1 { animation: moveTop both 0.8s 0.3s; } 
.innerContents .titleArea h2 { animation: moveTop both 0.8s 0.6s; } 
.innerContents .titleArea h3 { animation: moveTop both 0.8s 0.9s; } 
.innerContents .gradArea ul li { animation: scaleRow both 0.8s 1.5s; } 
.footer { animation: moveTop both 0.8s 1.2s; } 
@keyframes moveTop {
  from {
    transform: translateY(60px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes scaleRow {
  from {
    transform: scaleY(0.5);
    opacity: 0;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}


/* Responsive */
@media all and (max-width:1600px){
.innerContents .titleArea h1 { font-size: 80px; } 
.innerContents .titleArea h2, .innerContents .titleArea h3 { font-size: 38px; }
.innerContents .gradArea .dept_wrap h1 { font-size: 50px; } 
.innerContents .gradArea .dept_wrap h2 { font-size: 26px; } 
.innerContents .gradArea .dept_wrap h3 { font-size: 18px; }
}

@media all and (max-width:1400px){
section#best.subSection .innerContents { padding-top: 120px; }
.innerContents .titleArea { padding-top:20px; }
}

@media all and (max-width:1200px) {
header .top_util .siteCateg>a { width: 130px; }
header .top_right .En, header .top_right .login { width: 90px; }
.innerContents .gradArea .dept_wrap h1 { font-size: 45px; }
}

/* Mobile */
@media all and (max-width:1040px) {
header .top_util .siteCateg>a { width: 100px; }
header .top_right .En, header .top_right .login { width: 70px; }
.innerContents .titleArea h1 { font-size: 70px; }
.innerContents .titleArea h2, .innerContents .titleArea h3 { font-size: 30px; }
.innerContents .gradArea .dept_wrap h1 { font-size: 38px; }
.innerContents .gradArea .dept_wrap h2 { font-size: 24px; }
.footer .f_info p span { display: none; }
.m_br { display: block; }
}

@media all and (max-width:900px) {
header .logo { left: 30px; }
section .innerContents { padding: 0 30px; }
.innerContents .titleArea h1 { font-size: 65px; }
.innerContents .titleArea h2, .innerContents .titleArea h3 { font-size: 28px; }
.innerContents .titleArea h3 { margin-top: 10px; }
.innerContents .gradArea ul { grid-gap: 10px; }
.innerContents .gradArea .dept_wrap h1 { font-size: 26px; letter-spacing: -2px; }
.innerContents .gradArea .dept_wrap h2 { font-size: 18px; margin-top: 20px; }
.innerContents .gradArea ul li { padding: 40px 0 40px 0; }
.innerContents .gradArea .dept_wrap a { font-size: 14px; padding: 10px 30px; margin-top: 30px; }
.footer .f_info p { margin-top: 40px; }
}

@media all and (max-width:710px) {
header .top_util .siteCateg { width: 100%; }
header .top_util .siteCateg>a { width: 25%; }
header .top_right { width: 100%; top: 860px; position: absolute; }
header .top_right .En, header .top_right .login { display: none; }
header .top_util #popup { width: 100%; background-color: #313133; text-align: right; }
 }

@media all and (max-width:640px) {
.innerContents .titleArea h1 { font-size: 60px; letter-spacing: -2px; }
.innerContents .titleArea h2 { margin-top: 30px; font-size: 24px; }
.innerContents .titleArea h3 { margin-top: 6px; font-size: 24px; }
.innerContents .gradArea ul { grid-template-columns: 100%; }
.innerContents .gradArea ul li { padding: 30px 0 20px 0; }
.innerContents .gradArea .dept_wrap h3 { font-size: 15px;  margin-top: 10px; }
.innerContents .gradArea .dept_wrap a { margin-top: 20px; }
header .top_right { top: 920px; }
}

@media all and (max-width:516px) {
header .top_util .siteCateg>a { font-size: 12px; }
.innerContents .gradArea { margin-top: 40px; }
.innerContents .titleArea h3 { font-size: 22px; }
.innerContents .gradArea .dept_wrap h1 { font-size: 22px; }
.innerContents .gradArea .dept_wrap h2 { font-size: 16px; margin-top: 15px; }
.innerContents .gradArea .dept_wrap h3 { font-size: 13px; margin-top: 5px; }
.innerContents .gradArea .dept_wrap a { font-size: 13px; }
.footer .f_info p { font-size: 12px; margin-top: 30px; }
header .top_right { top: 968px; }
.footer .f_info p span { display: inline-block; }
.m_br { display: none; }
}