@font-face {
    font-family: 'SBAggroB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

.top{text-align: center;}

@keyframes color1 {
	0%   {color: #fff;}
	1%   {color: #ffe548;}
	20% {color: #ffe548;}
	21% {color: #fff;}
	100% {color: #fff;}
}
@keyframes color2 {
	0%   {color: #fff;}
	50%   {color: #fff;}
	51%   {color: #1d1739;}
	70%   {color: #1d1739;}
	71% {color: #fff;}
	100% {color: #fff;}
}

/* header */
header{width: 100%;}
header .nav{width:100%; position: fixed; z-index:1000000000;  top: 0;  height:70px; background-color : rgba(255, 255, 255, 0.9); box-shadow: 0 5px 5px -5px #b3b3b3; transition: top 0.5s;}
header .nav li{background: 0;font-size: 1rem; color: #fff; opacity: 1;}
header .nav li:last-of-type{margin-bottom: 0 !important;}
header .nav li a{background: 0; font-family: 'Noto Sans KR', sans-serif; font-weight: 500;  font-size: 1.3rem; color: #575757; opacity: 1;}
header .nav li a:hover{background: 0; font-size: 1.4rem; color: #5479bd; opacity: 1;}

header .topmenu .fixed{position: fixed; z-index:100000000; background: #5479bd; color: #fff; border-radius: 0; border: 1p solid #d3d3d3; width: 60px;; height: 60px; font-size: 1.8rem;}
header .topmenu .offcanvas{background: #fff; color: #000;}
header .topmenu .offcanvas .btn-close{background: 0; font-size: 1.4rem; color: #fff; opacity: 1;}
header .topmenu .offcanvas-header{width: 100%;}
header .topmenu .offcanvas-body{width: 100%; font-size: 1.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
header .topmenu .offcanvas-body img{max-width: 100%; margin-bottom: 30px;}
header .topmenu .offcanvas-body ul{width: 100%; font-size: 1.2rem;}
header .topmenu .offcanvas-body ul li a{display: block; padding: 20px; border-bottom: 1px solid #d3d3d3; font-family: 'Noto Sans KR', sans-serif; font-weight: 500;}
header .topmenu .offcanvas-body ul li a:hover{background: #ddefff; color:#5479bd;}
header .topmenu .offcanvas-body ul li:last-of-type a{border-bottom: 0;}

header .gomenu{position: fixed; bottom: 30%; right:-80px; z-index: 10000;}
header .gomenu li img{width:100%; max-width:50%;}


.product{ width:100%; margin-bottom:10px; }
.product input[type=radio]{display: none;}
.product input[type=radio]+label{
    display: inline-block;
    cursor: pointer;
    height: 34px;
    width: 49%;
    border: 1px solid #333;
    line-height: 34px;
    text-align: center;
    font-weight:bold;
    font-size:0.9rem;
}
.product input[type=radio]+label{ background-color: #fff; color: #333;}
.product input[type=radio]:checked+label{ background-color: #333; color: #fff;}



.db{width:100%;background-color: #5479bd;box-shadow: 0 -5px 5px -5px #333; padding:2vh;}
.db_g{ display: flex;flex-direction: row; justify-content: center;width:100%; text-align: center; }
.db_f{ width:69%;}
.btn_ani {
    margin-top:-5px; animation:submit_btn 0.3s 0s infinite alternate ease-in;} 
@keyframes submit_btn
{0%{transform:translate(0,2px)} 100%{transform:translate(0,0)}}

footer{background: #000; color: #fff; padding: 2% 0 10% 0; text-align: center; font-size: 0.8rem;}
footer p{margin-top: 10px; color: #777;}
.logo-bottom{display: inline-block;width: 155px;height: 35px;background: url(/image/ico-layoutCommon.png) no-repeat -12px -63px;vertical-align: top;}



/* section */
section{margin: 0 auto; text-align: center; }
.main{background-color:#515151;position: relative}
.img_ani{width:25%; position:absolute;top:22%; left:43%; animation:circle_ani 15s 0s infinite linear}
@keyframes circle_ani{
	0%{transform:rotate(0deg)}
	100%{transform:rotate(360deg)}
}

.main_img{background-color:#14008c;position: relative;}
.main_img2{background-color:#000000;position: relative;}

.sub_movie{background-color:#fff;}
.player {padding-top: 56.25%; position: relative;}
.player iframe {position: absolute; top: 0%; left: 5%; width: 90%; height: 90%; }

.sub_slide_wide{background-color:#515151;padding:0;}
.sub_slide_count{background-color:#ffffff;padding:2%;}
.sub_slide_count h1{color:#000;font-size: 3em;line-height: 100%;}
.sub_slide_count h3{color:#000;font-size:1.5em;}
.sub_slide_count p{color:#000;font-size:1em;}
.counting{color:white;font-size:3em;line-height: 100%;padding-top:0vh;font-family:SBAggroB;}
.sub_slide_card{background-color:#515151;padding:5%; }
.sub_slide_counseling{background-color:#14afe0;padding:5%;}
.sub_slide_counseling span{display:inline-block;}
.sub_slide_counseling span.name{width:20%}
.sub_slide_counseling span.numer{width:60%}
.sub_slide_counseling span.ing{width:20%}
.sub_db{background-color:#5479bd;}
.sub_accordion{background-color:#515151;}
.sub_map{background-color:#515151;}
.sub_table img{padding-bottom:1%;}
.sub_table{background-color:#ffffff;}

.vertical_banner { overflow: hidden; width: 100%; height: 280px; margin: 30px auto; background: #f0f0f0;} 
.vertical_banner .list > li { overflow: hidden; padding: 5px; font-size: 18px; color: #000; text-align: center; white-space: nowrap; text-overflow: ellipsis; } 

@keyframes verticalRolling { 
    0% { transform: translateY(0); } 
    100% { transform: translateY(-100%); } 
}



.marquee-text {
	  display: flex;
      flex: 0 0 auto;
      white-space: nowrap;
      overflow: hidden;
      transition: 0.3s;
      font-size: 1.5rem;
      font-weight:300;
      color: #fff;
	  padding:1%;
	  background-color:#5479bd;
  }
  .marquee-text:hover {
    color: #ffe59f;
  }
  .marquee-text:hover .marquee-wrap {
    animation-play-state: paused;
    cursor: pointer;
  }
  .marquee-wrap {
    animation: textLoop 10s linear infinite;
    padding-right: 1.4881vw;
  }
  
  @keyframes textLoop {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }




@media (max-width: 1280px){
    .vertical_banner { height: 200px; } 
    .vertical_banner .list > li { padding: 5px; font-size: 16px; } 
}

@media (max-width: 767px){
    .vertical_banner { height: 140px; } 
    .vertical_banner .list > li { padding: 5px; font-size: 14px; } 
}


.swiper {
	max-width:1500px;
	width: 100%;
	height: 100%;
  }
  .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  .swiper {
	width: 100%;
	margin: 0 auto;
  }
  .append-buttons {
	text-align: center;
	margin-top: 20px;
  }
  .append-buttons button {
	display: inline-block;
	cursor: pointer;
	border: 1px solid #fff;
	color: #fff;
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 4px;
	margin: 0 10px;
	font-size: 13px;
  }
  .swiper-button-next, .swiper-button-prev{
	color:#515151
  }

.modal .modal-header h5{font-size: 1.2rem !important;}
.modal .modal-header .btn-close{margin: 0 !important;}
.modal .modal-body{height: 360px; overflow-y: scroll;word-break: keep-all !important;}
.modal .modal-body .title{text-align: left;}
.modal .modal-body hr{border-color: #aaa;}
.modal .modal-body .modal-div .title{margin: 10px 0 !important; font-size: 1.1rem !important;}
.modal .modal-body .modal-sub{background: #f8f9fa; padding: 10px; margin-top: 4px;}
.modal .modal-body .modal-sub p{font-size: 0.9rem !important;line-height:160%;margin:5px 0;}

.form-control:disabled, .form-control[readonly] {
    background-color: #fff;
    opacity: 0;
}


@media screen and (min-width: 639px){
	.m-only{display: none !important;}
	article .content img{transition: 0.3s;}
	article .content .col-6:hover img{transform: scale(103%); transition: 0.5s;}
	h2{color:white;font-size: 4em;}
	h3{color:white;font-size: 3em;line-height:150%;padding-top:2vh;}
	.img_ani{width:15%; position:absolute;top:15%; left:42%; animation:circle_ani 15s 0s infinite linear}
}

@media screen and (max-width: 1000px){
	.tb-only{display: none !important;}
}

@media screen and (max-width: 640px){
	header .nav{display: none !important;}
	header .topmenu .offcanvas{max-width: 80%;}
	header .topmenu .offcanvas-body{font-size: 0.7rem; word-spacing:-5px;}
	header .topmenu .offcanvas-body img{max-width: 220px; margin-bottom: 20px;}
	header .topmenu .offcanvas-body ul li a{padding: 8px;}
	.db{width:100%;background-color: #5479bd;box-shadow: 0 -5px 5px -5px #333;}
	.db_g{width:100%; text-align: center;}
	.db_f{width:100%;}
	.gap-2{padding-top:1%;}
	.main1{padding:0;}
	.pc-only{display: none !important;}
	h2{color:white;font-size: 1.5em;line-height: 100%;}
	h3{color:white;font-size: 2em;line-height: 100%;padding-top:2vh;}
	h4{font-size: 1rem !important;}
	h5{font-size: 1rem !important;}
	.bold{font-size: 1.3rem !important;}
	.top img{max-width: 500px;}
	.top-m{max-width: 110px; position: fixed; right: 10px; bottom: 80px; z-index: 100;}
	.top-m img{max-width: 110px; margin: 0;}
	
	section .title{margin-bottom: 30px;}
	article .title{margin-bottom: 20px;}
	article .content .row>*:nth-of-type(odd){padding-left: 0 !important; padding-right: 5px;}
	article .content .row>*:nth-of-type(even){padding-right: 0 !important; padding-left: 5px;}
	article .tabmenu{margin-bottom: 30px;}
	article .tabmenu .col-4 a{padding: 8px 0;}
	article .content .col-6{margin-bottom: 20px;}
	article .content img{margin-bottom: 10px;}
	.carousel-indicators{margin-bottom: 0.4rem;}
	footer{padding: 5% 0 50% 0; font-size:0.7rem}
	.offcanvas{transition: .2s !important}
	.offcanvas.show{transition: .8s !important;}
	.img_ani{width:30%; position:absolute;top:20%; left:35%; animation:circle_ani 15s 0s infinite linear}
	
	.modal .modal-body .modal-sub p{font-size: 0.8rem !important;}
	.modal .modal-body .modal-div .title{margin: 10px 0 !important; font-size: 1rem !important;}
}

.call_num{padding-top: 0 !important;min-width: 20rem;max-width: 33rem;}
.call_num a{display: block;font-size: 1.4rem;background: #fff;border-radius: 60px;line-height: 1.2;padding: 1rem;font-family: 'nanumsquare';color: #333;}
.call_num a strong{font-size: 2.3rem;font-family: 'yg-jalnan';color:#D32F2F;}