@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

* { margin:0; padding:0; }


body {
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 1;
  font-size: 14px;
  color: #848484;
  font-weight: 400;
  word-break: keep-all; word-wrap: break-word;
}

p {
  color: #6a6a6a;
  font-size: 14px;
  line-height:1;
	}

a,
a:hover,
a:focus {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  text-decoration: none;
}

ul,
ol {
  margin: 0; }
  ul li,
  ol li {
    list-style: none; }

img {
  height: auto;
}

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





/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn.btn-color {border: 1px solid #494949; background-color: #6c6c6c;}
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active {background-color: #494949;}
.border-color, i.border-color, img.border-color {border-color: #6c6c6c;}



/* 스크롤아이콘 201221 */
/* :: 3.7.0 ScrollUp */ 
#scrollUp {
  background: #000000;
  background: -webkit-linear-gradient(to right, #000000, #81c8f6);
  background: linear-gradient(to right, #000000, #81c8f6);
  border-radius: 0;
  bottom: 10px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-size: 24px;
  height: 40px;
  line-height: 40px;
  right: 10px;
  text-align: center;
  width: 40px;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms; }
/* //스크롤아이콘 201221 */





/* 해더 */

.header-area .is-sticky .musica-main-menu { /* 해더스크롤시 201221 */
	position: fixed;
	width: 100%;
	height: 130px;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 5px 50px 15px rgba(0, 0, 0, 0.2); 
}


.header-area { /* 해더 201221 */
	position: absolute;
	z-index: 100;
	width: 100%;
	top: 0px;
	left: 0;
	z-index: 1000; 
}

.header-area .musica-main-menu { /* 해더 201221 */
	position: relative;
	width: 100%;
	height: 130px;
	background-color: #fff;
	/*padding: 0 5%;*/ 
}


@media only screen and (max-width: 767px) { /* 해더 201221 */
	.header-area .musica-main-menu { height: 70px; } 
	.header-area .is-sticky .musica-main-menu { height:70px; }
}


.header-area .musica-main-menu .classy-navbar { /* 해더 201221 */
	background-color: transparent;
	height: 130px;
	padding: 0; 
}

/* //해더 */




/* 로고 */

.classy-navbar .nav-brand { max-width: 249px; height:130px; line-height:130px; } /* 로고 201221 */

@media only screen and (max-width: 767px) { /* 로고 201221 */
	.header-area .musica-main-menu .classy-navbar { height: 70px; } 
	.classy-navbar .nav-brand { height:70px; line-height:70px; }
}

/* //로고 */






/* 메뉴 */

.header-area .musica-main-menu .classy-navbar .classynav ul li .on { color:#1c2185; } /* 메뉴 클릭했을때 색깔변경 201221 */



@media only screen and (min-width: 768px) and (max-width: 991px) { /* 메뉴 201221 */
	.header-area .musica-main-menu .classy-navbar .classynav ul li a {background-color: transparent; }
}

@media only screen and (max-width: 767px) { /* 메뉴 201221 */
	.header-area .musica-main-menu .classy-navbar .classynav ul li a {background-color: transparent; }
}



.classynav > ul > li { padding:0 30px; } /* 메뉴 스타일(좌우패딩) 201221 */
.classynav > ul > li > a { font-size:20px; color:#333; font-weight:700; } /* 메뉴 스타일() 201221 */
.classynav > ul > li:hover > a { font-size:20px; color:#1c2185; font-weight:700; } /* 메뉴 후버(폰트,컬러) 201221 */
.classynav .dropdown > li > a { padding:8px 20px; color:#000; font-size:16px; font-weight:400; } /* 서브메뉴 스타일 201221 */
.classynav .dropdown > li > a:hover { color:#1c2185; } /* 서브메뉴 후버 201221 */

@media (max-width:1200px) { /* 메뉴 반응형 1200px */
	.classynav > ul > li { padding:0 20px; } /* 메뉴 스타일 */
}

@media (max-width:991px) { /* 메뉴 반응형 991px */
	.classynav > ul > li { display:block; padding:0; position:relative; border-bottom:1px solid #ddd; } /* 메뉴 스타일 */
	.classynav > ul > li:after { content:'\f0d7'; position:absolute; right:20px; top:12px; color:#777; font-family:FontAwesome; } /* down 화살표*/
	.classynav > ul > li.active:after { content:'\f0d8'; } /* up 화살표*/
	.classynav > ul > li > a { color:#1c2185; font-size:16px; font-weight:400; color:#000; text-indent:20px; } /* 메뉴 a태그 스타일 */
	.classynav > ul > li:hover > a { font-size:16px; color:#000; font-weight:400; } /* 메뉴 후버했을때 */
	.classynav > ul > li.active > a { font-weight:700; color:#1c2185; position:relative; } /* 메뉴 클릭했을때  */
	.classynav > ul > li.active > a:before { content:''; position:absolute; left:0; top:0; width:3px; height:100%; background:#1c2185;   } /* 메뉴 클릭했을때(다른페이지일때 메뉴 스타일)  */
	.classynav > ul > li > a.on { font-weight:700; color:#1c2185; position:relative; } /* 메뉴 클릭했을때  */
	.classynav > ul > li > a.on:before { content:''; position:absolute; left:0; top:0; width:3px; height:100%; background:#1c2185;   } /* 메뉴 클릭했을때(다른페이지일때 메뉴 스타일)  */
	
	.classynav .dropdown { border-top:1px solid #ddd; background:#f8f8f8; } /* 서브메뉴 스타일 */
	.classynav .dropdown > li > a { padding:0 25px; font-size:14px; } /* 서브메뉴 스타일 */
}


/* 전체메뉴 버튼 */
.allmenu_btn { width:30px; height:30px; position:relative; cursor:pointer; margin-left:50px; }
.allmenu_btn > span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:4px; background:#1c2185; }
.allmenu_btn > span:before, .allmenu_btn > span:after { content:''; position:absolute; left:0; width:100%; height:4px; background:#1c2185; }
.allmenu_btn > span:before { top:-10px; }
.allmenu_btn > span:after { top:10px; }

/* 닫기*/
.all_close > span { background:transparent; }
.all_close > span:before { top:0; transform:rotate(45deg); background:#fff; }
.all_close > span:after { top:0; transform:rotate(-45deg); background:#fff; }

/* 전체메뉴 스타일 */
.allmenu_box { position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:1001; display:none; }
.allmenu_box1 { position:absolute; left:0; top:0; width:100%; height:80%; background:#1c2185;}
.allnav { display:flex; -webkit-box-align: center; align-items: center; width:100%; -webkit-box-pack: justify; justify-content: space-between; height:130px; }

.allmenu > ul > li { margin:80px 0; }
.allmenu > ul > li > a { display:inline-block; vertical-align:top; width:25%; color:rgba(255,255,255,.7); font-size:30px; font-weight:500; transition:.4s;  }
.allmenu > ul > li:hover > a { color:rgba(255,255,255,1); }
.allmenu > ul > li > .all_inner { display:inline-block; vertical-align:top; width:70%; }
.all_inner > li { display:inline-block; margin:0 30px; }
.all_inner > li > a { font-size:16px; color:rgba(255,255,255,.7); font-weight:400; transition:.4s; position:relative; }
.all_inner > li > a:before { content:''; position:absolute; left:0; bottom:-20px; width:0; height:2px; background:#fff; transition:.4s; }
.all_inner > li > a:hover { color:rgba(255,255,255,1); }
.all_inner > li > a:hover:before { width:45%; }

/* 전체메뉴 버튼 클릭시 전체메뉴 보이게 */
.allmenu_box.on { display:block; }

@media (max-width:991px) {
	.allmenu_btn { display:none; }
	.allmenu_box.on { display:none; }
}





/* 타이틀이미지 */
.title_index { padding-top:130px; }

@media (max-width:991px) {
	.title_index { padding-top:70px; }
}


/* 서브이미지 */
.title_sub { padding-top:130px; }

@media (max-width:991px) {
	.title_sub { padding-top:70px; }
}


/* 서브페이지 위아래 패딩 */
.tmt_sub_frame { padding:30px 0 80px; }







/* index */

/* box1 */
.box1 { height:860px; position:relative; overflow:hidden; }

/* box1_bg */
.box1_bg { position:absolute; left:0; top:0; width:100%; height:100%; background:#0c1945; z-index:-1;  }
.box1_bg:before, .dysf_index .box1_bg:after { content:''; position:absolute; background:#070f29; width:110%;  z-index:-1; }
.box1_bg:before { left:-63%; top:0; transform:rotate(-45deg); height:90%; }
.box1_bg:after { right:-62%; bottom:0; transform:rotate(-45deg); height:80%; }


/* box1_left */
.box1_c_l_text1 { font-size:60px; line-height:1.2; font-weight:300; color:#fff; }
.box1_c_l_text1 > span { font-weight:500; }
.box1_c_l_text2 { font-size:20px; line-height:1.4; font-weight:300; color:#fff; }
.box1_c_l_hline { width:112px; height:5px; background:#326fd5;  }


/* box1_right */
.box1_c_r_wrap { position:relative; height:260px; }
.box1_c_r_wrap:before { content:''; position:absolute; left:0; top:0; width:100%; height:0; transition:.5s; }
.box1_c_r_wrap:after { content:'\f103'; font-family:fontawesome; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; font-size:50px; opacity:0; transition:.5s; width:100%; text-align:center; }

.box1_c_r_wrap1 { border:1px solid #3779e7; height:260px; }
.box1_c_r_wrap1:before { background:#3779e7; }
.box1_c_r_icon { position:absolute; left:50%; top:-32px; transform:translateX(-50%); }
.box1_c_r_text1 { position:absolute; left:0; width:100%; text-align:center; top:42px; color:#3779e7; font-weight:400; font-size:40px; transition:.5s; }
.box1_c_r_text2 { text-align:center; padding:5px; margin-top:110px; font-size:15px; color:#a4a4a4; line-height:1.4; font-weight:300;  }

.box1_c_r_wrap2 { border:1px solid #c0c0c0; height:260px; }
.box1_c_r_wrap2:before { background:#c0c0c0; }
.box1_c_r_wrap2 .box1_c_r_text1 { color:#c0c0c0; }

/* box1_right_hover */
.box1_c_r_wrap:hover:before { height:100%; }
.box1_c_r_wrap:hover:after { opacity:1; }
.box1_c_r_wrap:hover .box1_c_r_text1 { color:#fff; }


@keyframes down1 {  /* box1_right_hover 화살표 애니메이션 */
	0% { transform:translate(-50%,-50%); }
	50% { transform:translate(-50%,-50%); }
	100% { transform:translate(-50%,-50%); }
}


@media (max-width:1800px) {
	.box1_bg:before { height:80%; }
	.box1_bg:after { height:60%; }
}
@media (max-width:1550px) {
	.box1_bg:before { height:60%; }
	.box1_bg:after { height:40%; }
}
@media (max-width:1200px) {
	.box1_bg:before { height:45%; }
	.box1_bg:after { height:25%; }

	.box1_c_r_text2  { text-align:left; padding-left:15px; margin-top:95px; }
	.box1_c_r_wrap_t .box1_c_r_text2 > br { display:none; }
}
@media (max-width:991px) {
	.box1 { overflow:visible; height:auto; }
	.box1_bg:before, .dysf_index .box1_bg:after { display:none; }
	.box1_c_l_img { display:none; }

	.box1_c_r_text2  { text-align:center; padding-left:0; }
}
@media (max-width:768px) {
	.box1 { overflow:visible; height:auto; }
	.box1_bg:before, .dysf_index .box1_bg:after { display:none; }
	.box1_c_l_text1{ font-size:45px; }
	.box1_c_l_img { display:none; }

	.box1_c_r_text2  { padding:10px; }
}


/* box2 */
.box2 { position:relative; overflow:hidden; background:url(img/box2_bg.jpg) no-repeat center center; background-size:cover; }

.box2_text1 { font-size:16px; color:#333; font-weight:400; line-height:1.6;  }
.box2_text1 > span { font-size:20px; font-weight:500; }
.box2_text2 { font-size:16px; color:#333; font-weight:400; line-height:1.6;  }
.box2_text2 > span { font-size:20px; font-weight:500; color:#1c2185; }

@media (max-width:991px) {
	.box2_text2 { padding-bottom:150px; }
	.box2_img { position:absolute; left:50%; bottom:0; transform:translateX(-50%); }
	.box2_img img { width:100%; }
}
@media (max-width:600px) {
	.box2_text2 { padding-bottom:100px; }
	.box2_img { position:absolute; left:50%; bottom:0; transform:translateX(-50%); }
	.box2_img img { width:100%; }
}

/* box3 */
.box3_title { text-align:center; text-transform:uppercase; font-size:40px; color:#333; font-weight:400; line-height:1.4; }

/* box4 */
.box4_title { text-transform:uppercase; font-size:24px; color:#333; font-weight:700; line-height:1.4; }

/* box5 */
.box5 { border-top:2px solid #d5d5d5; }
.box5_contents { padding:15px }









/* knk_footer_box*/
.footer_box { background:#2f2f2f; padding:40px 0 30px; }
.f_text { position:relative; }
.f_text:before { content:'';  position:absolute; left:-20px; top:6px; width:1px; height:92%; background:#555; }
.f_info > a { display:inline-block; color:#fff; margin-right:10px; line-height:1.8; }
.f_text1 { color:#fff; line-height:1.8; }
.copy { color:#fff; font-size:13px; line-height:1.8; }
.copy > a { color:#fff; }
.admin { margin-top:10px; }
.admin > a { color:#fff;  }


@media (max-width:991px) {
	.f_text:before { display:none; }
}

@media (max-width:768px) {
	.f_text1 > br { display:none; }
}