3@charset "utf-8";
/* CSS Document */

/* 
 * Nanum Gothic (Korean) http://www.google.com/webfonts/earlyaccess
 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Serif+KR:wght@200..900&display=swap');


.nanum-gothic-regular {
  font-family: "Nanum Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.noto-serif-kr-<uniquifier> {
  font-family: "Noto Serif KR", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


*{ margin:0; padding:0}
html, body {width:100%; scroll-behavior: smooth;}
body{position:relative; margin-top:0px; font-family: 'Nanum Gothic',sans-serif; font-size:13px}
pre,code{font-family: 'Nanum Gothic',sans-serif}
img,fieldset{border:0}
img {vertical-align:top}
ul,ol{list-style:none}
ul.dot{list-style:disc; padding-left:20px}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:none}
.clearfix {*zoom:1}
.clearfix:after {con_bg:''; display:block; clear:both}
button {cursor:pointer}
.area_b_tb table {border-collapse: collapse;border: 1px solid #fff; text-align: center}
.area_b_tb tr {border-collapse: collapse; border: 1px solid #fff}
.area_b_tb td {border-collapse: collapse; border: 1px solid #fff; padding:3px 0; text-align:center; background-color:rgb(255,255,255,0.6);}

.area_bb_tb table {border-collapse: collapse;border: 1px solid #ccc; text-align: center}
.area_bb_tb tr {border-collapse: collapse; border: 1px solid #ccc}
.area_bb_tb td {border-collapse: collapse; border: 1px solid #ccc; padding:3px 0; text-align:center; background-color:rgb(255,255,255,0.6);}

/* top버튼 */
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: #4154f1;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #6776f4;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}
/* end: top버튼 */



.circle {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
  border: 7px solid #464343;
  border-radius: 100%;
  background: linear-gradient(#3c5aff, #52f2fd);
  transform: translate3d(0, 0, 0);
}

.wave-one {
  width: 600px;
  height: 600px;
  position: absolute;
  top: -65%;
  left: -30%;
  border-radius: 45%;
  background: rgba(3,169,244,0.8);
  animation: move 3s infinite linear;
}


/* font-size */
.fs-1m {}
.fs-2m {font-size:42px}
.fs-3m {font-size:35px}
.fs-4m {font-size:27px}
.fs-5m {font-size:22px}
.fs-6m {font-size:18px}
.fs-7m {font-size:14px}
.fs-8m {font-size:13px; }

/*color*/
.text-dblue {color:#00226c}
.text-blue {color:#1983ed}
.text-lblue {color:#72a1cf}
.text-dorange {color:#ff4800}
.text-yel {color:#fff600}
.text-cyan {color:#37f8ff}
.text-cyan2 {color:#0087a4}
.text-green {color:#0ca503}
.text-violet {color:#aa5ff0}
.text-brown {color:#b5674d}
.text-pink {color:#d15a91}

/*background */
.bg_blue {background-color:#10b4ff}
.bg-blue85 {background-color:rgb(25,131,237,0.85)}
.bg-lightblue {background-color:#f2f7fc}
.bg-lblue {background-color:#5bb0ff}
.bg-lorange {background-color:#ffb141}
.bg-lorange2 {background-color:#ff8610}
.bg-orange {background: linear-gradient(to right, #f98d46, #f9d146);}
.bg-orange2 {background-color:#f98d46 ;}
.bg-dorange {background-color:#d36015}
.bg-lgreen {background-color:#50d196}
.bg-violet {background: linear-gradient(to right, #aa5ff0, #b53cd6);}
.bg-dviolet {background-color:#823698}
.bg-lyel {background-color:#fff8cf}
.bg-lyel2 {background-color:#ff8c38}
.bg-lyel3 {background-color:#ffffd6}
.bg-lblue2 {background-color:#eaf8fc}
.bg-lpink {background-color:#ffe6dd}
.bg-pink {background-color:#d15a91}
.bg-brown {background-color:#b5674d}


/* btn style */
.btn1 {
	padding:13px 20px;
	min-width: 100px;
	text-decoration:none;
	height: auto;
	box-sizing: border-box;
	border-radius: 50px;
	font-weight:bold;
	color:#fff;
	background: transparent;
	border:2px solid #fff;
	transition: 0.5s;
}
.btn1:hover {
	background: #fff;;
	border:0;
	color:#0090ff;
}
.btn1:active {
	background: #fff;;
	border:2px solid #fff;
}

.btn2 {
	padding:13px 20px;
	min-width: 100px;
	text-decoration:none;
	font-weight:bold;
	height: auto;
	box-sizing: border-box;
	border-radius: 50px;
	font-style:normal;
	color:#fff;
	background: transparent;
	border:2px solid #fff;
	transition: 0.5s;
}
.btn2:hover {
	background: #fff;;
	border:0;
	color:#b04be1;
}
.btn2:active {
	background: #fff;;
	border:2px solid #fff;
}

.btn3 {
	padding:13px 20px;
	min-width: 100px;
	text-decoration:none;
	font-weight:bold;
	height: auto;
	box-sizing: border-box;
	border-radius: 50px;
	font-style:normal;
	color:#fff;
	background: transparent;
	border:2px solid #fff;
	transition: 0.5s;
}
.btn3:hover {
	background: #fff;;
	border:0;
	color:#f99546;
}
.btn3:active {
	background: #fff;;
	border:2px solid #fff;
}

.btn4 {
	padding:10px 12px;
	text-decoration:none;
	font-weight:bold;
	height: auto;
	box-sizing: border-box;
	border-radius: 50px;
	font-style:normal;
	color:#00c06f;
	border:2px solid #00c06f;
	transition: 0.5s;
}
.btn4:hover {
	background: #00c06f;
	border:2px solid #00c06f;
	color:#fff;
}
.btn4:active {
	background: #00c06f;
	border:2px solid #00c06f;
	color:#fff;
}

.area_cvbs {
	background: linear-gradient(to right, #aa5ff0, #b53cd6);
	transition: 1s;
}

.area_cvbs:hover {
	background: linear-gradient(to right, #815ff0, #8f3cd6);
	transform: scale(1.03);
}

.area_hbs {
	background: linear-gradient(to right, #f98d46, #f9b446);
	transition: 1s;
}

.area_hbs:hover {
	background: linear-gradient(to right, #f9a746, #f9bc46);
	transform: scale(1.03);
}

/* bedge */
.bedge_yel {
	padding:10px 15px;
	border-radius: 50px;
	background-color:#ffc000;
	color:#fff;
}

.bedge_white {
	padding:10px 15px;
	border-radius: 50px;
	background-color:#fff;
	color:#f98d46;
}



.container {
  overflow: hidden;
}

/* main */
.main_bg {max-inline-size: 100%;
		block-size: auto;
		aspect-ratio: 10/5;
		object-fit: cover;
		object-position: top center;}

.main_img {
	position:relative; 
	background: linear-gradient(to top, #fff, #a8e7ff);
}
.main_text {width:100%;}
.main_title {
	text-shadow: 1px 2px 0 #dddddd,
				2px 4px 0 #ebebeb,
				3px 6px 2px #eeeeee;
	
}
.tshadow1 {text-shadow: 0 1px 0 #0c4fcb50;}
.main_i div {
	position:absolute;
	z-index:2;
}

.main_i div:first-child {
	animation: main_i 2s 1 ease forwards;
}


.main_i div:first-child img {width:22vw;}

@keyframes main_i {
	0% {left:5vw; bottom:0; }
	100% {left:42vw; bottom:0;}
}


.area_b {
	background-image:url('https://paidionfile.com/img/vbs/2026win/area_b_ddut.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


.main_box {
	transition: 1s;
}

.main_box span {
	color:#fff;
}

.main_box:hover {
	transform: translateY(-20px);
}

#main-nav a {text-decoration:none; color:#333}
#main-nav a:hover {color:#6199df}
#main-nav a:active {color:#6199df;}
#main-nav .on a {color:#6199df;}
#main-nav-box a {background-color:#1bcfc0; color:#fff; padding:2px; border-radius:3px}
#main-nav-box a:hover {background-color:#1bafcf; color:#fff; border-bottom:0}

#bn_book a {text-decoration:none;}

/* sub */
.sub_img {background: linear-gradient(to bottom, #aee0fc, #e1f4ff);}
.sub_txt {position: absolute; z-index: 2; top: 180px; left: 50%; transform: translate(-50%, -50%); text-shadow: 1px 2px 0 #7c844b}
.sub_title {text-shadow: 3px 3px 2px #ffffff;}
#sub-menu {position:fixed; z-index:3; width:100%; padding-top:25px; padding-bottom:13px; background-color:#239ae5; color:#fff;}
#sub-menu a {text-decoration:none}
#sub-menu a:hover {color:#fff600}
#sub-menu a:active {color:#fff600}
#sub-menu .on a {color:#fff600}
#sub-menu .off a {color:#ffffff}

.c-title {
  font-weight: 900;
  background: linear-gradient(to right, #51daf3, #0167c9);
  color:#fff;
  padding:0 8px;
  border-radius: 4px;
}
.c-title2 {
  font-weight: 900;
  background: linear-gradient(to right, #f9d146, #ff6e00);
  color:#fff;
  padding:0 8px;
  border-radius: 4px;
}
.c-title3 {
  font-weight: 900;
  background: linear-gradient(to right, #4bc18e, #b0e54a);
  color:#fff;
  padding:0 8px;
  border-radius: 4px;
}
/* navigation*/ 
#navbarNavDropdown li {padding-top:7px}
.mainmenu_btn a {color:#1983ed; }
.mainmenu_btn a:hover {color:#1983ed; }

@media all and (max-width:1368px) {
	.fs-2m {font-size:38px}
	.fs-3m {font-size:33px}
	.fs-4m {font-size:24px}
	.fs-5m {font-size:20px}
	.fs-6m {font-size:17px}
	.fs-7m {font-size:13px}

}

@media all and (max-width:1023px) {
	/* btn style */
	.btn1 {
		padding:10px 15px;
	}
		
	/* font-size */
	.fs-2m {font-size:31px}
	.fs-3m {font-size:27px}
	.fs-4m {font-size:22px}
	.fs-5m {font-size:19px}
	.fs-6m {font-size:16px}
	.fs-7m {font-size:13px}


	.main_bg {max-inline-size: 100%;
		block-size: auto;
		aspect-ratio: 10/5;
		object-fit: cover;
		object-position: top center;}

	.main_i div:first-child img {width:24vw;}

	@keyframes main_i {
		0% {left:5vw; bottom:0;}
		100% {left:40vw; bottom:0;}
	}


	.sub_txt {top: 130px;}
}

 @media screen and (max-width: 767px) {

	/* font-size */
	.fs-2m {font-size:28px}
	.fs-3m {font-size:24px}
	.fs-4m {font-size:19px}
	.fs-5m {font-size:17px}
	.fs-6m {font-size:14px}
	.fs-7m {font-size:12px}

		

	.main_bg {max-inline-size: 100%;
		block-size: auto;
		aspect-ratio: 10/8;
		object-fit: cover;h
		object-position: top center;}
		
	.sub_txt {top: 130px;}
}

@media all and (max-width:510px) {

	/* font-size */
	.fs-2m {font-size:22px}
	.fs-3m {font-size:18px}
	.fs-4m {font-size:16px}
	.fs-5m {font-size:14px}
	.fs-6m {font-size:12px}
	.fs-7m {font-size:12px; letter-spacing:-1px}

	.main_bg {max-inline-size: 100%;
		block-size: auto;
		aspect-ratio: 10/9;
		object-fit: cover;
		object-position: top center;}

	.sub_txt {top: 100px;}

}