@charset "utf-8";
/* header css  */
:root{
	--main_color:#D80C18;
	--sub_color:#b78236;

	--btn_color:#b78236;
	--btn_color2:#D9984A;
	--btn_color3:#7f6a58;

	--bs_tlt_font:'ONE-Mobile-Title';
	--bs_txt_font:'Pretendard', sans-serif;

	--bs_tlt_size:38px;

	--bs_tlt_color:#333;
	--bs_txt_color:#666;

	--label_ing:#b78236;
	--label_done:#a5a5ac;
}

html{overflow-x:hidden; max-width:1920px; min-width:320px; width:100%; margin:0 auto; padding:0;}
*{font-family:var(--bs_txt_font); font-size:15px; color:var(--bs_txt_color); letter-spacing:-1px;}
header.scroll{position:fixed; z-index:50; background:#fff; width:100%; max-width:1920px; transition:all 0.3s;}
.top{overflow:hidden; padding-top:5px; padding-bottom:5px;}

.top .top_left{width:40%; max-width:480px; height:24px; line-height:24px; display:flex; align-items:center; overflow:hidden; position:relative; float:left; margin-top:3px;}
.top .top_left .gajigaji{width:50px; height:16px; margin-right:10px;}
.top .top_left strong{display:block; width:52px; height:24px; border-radius:12px; background:var(--main_color); font-size:15px; color:#fff; text-align:center;}
.top .top_left ul{position:absolute; left:110px; padding-left:10px; width:calc(100% - 80px);}
.top .top_left ul li{display:flex; justify-content:space-between; align-items: center;}
.top .top_left ul li a{display:block; font-size:15px; color: var(--bs_txt_color); width:70%;}
.top .top_left ul li span{width:28%;}

.top .top_right{width:60%; padding:4px 0; float:right; display:flex; justify-content:flex-end; align-items:center;}
.top .top_right span{display:flex; align-items:center;}
.top .top_right p.on_user_name{padding:0 20px; background:#f9f9f9; border-radius:10px; margin-right:15px; border:1px solid #eee;}
.top .top_right span a{display:block;}
.top .top_right span a + a{margin-left:10px;}

.top .top_right .sns_box{margin-left:10px;}
.top .top_right .sns_box a + a{margin-left:5px;}
.top .top_right .sns_box a:first-child{background-image:url('/images/page/common/sns_instar.png');}
.top .top_right .sns_box a:nth-child(2){background-image:url('/images/page/common/sns_face.png');}
.top .top_right .sns_box a:nth-child(3){background-image:url('/images/page/common/sns_naver.png') ;}
.top .top_right .sns_box a:nth-child(4){background-image:url('/images/page/common/sns_utub.png') ;}
.top .top_right .sns_box a{display:block; width:20px; height:20px; background-size:100%;  background-repeat:no-repeat;}
.top .top_right .sns_box a.sns_close{display:none;}

.gnb{border-top:1px solid #ddd; border-bottom:1px solid #ddd; position:relative;}
.gnb nav{display:flex; justify-content:space-between; align-items: center;}
.gnb nav h1{ width:255px; height:40px; margin:22px 0;}
.gnb nav h1 a{display:block; width:100%; height:100%; background-image:url('/images/page/common/t_logo.png'); background-size:auto 100%; background-repeat:no-repeat; background-position:center;}
.gnb nav > ul{display:flex; justify-content:space-between; align-items:center; background:#fff;}
.gnb nav > ul > li{position:relative; width:120px; text-align:center;}
.gnb nav > ul > li > a {font-family:'ONE-Mobile-Title', sans-serif; font-size:18px; display:block; padding:30px 0;}
.gnb nav > ul > li:hover .drop_menu{opacity:1; visibility: visible; top:62px; transition:all 0.4s; z-index: 10;}
.gnb .drop_menu{opacity:0; visibility:hidden;  position:absolute; top:50px; width:100%; text-align:center; border:1px solid #ddd; background:#fff; padding:10px 0; box-sizing:border-box;}
.gnb .drop_menu li + li{margin-top:5px;}
.gnb .drop_menu li a{display:block; width:100%; padding:5px 0; font-size:15px; transition:all 0.3s; }
.gnb .drop_menu li a:hover{color:var(--main_color);}
.gnb .ham_menu{position:relative; width:25px; height:20px;}
.gnb .ham_menu:before{content:''; display:block; width:25px; height:2px; background:#333; position:absolute; top:0;}
.gnb .ham_menu span{display:block; width:25px; height:2px; background:#333; position:absolute; top:0; bottom:0; left:0; margin:auto;}
.gnb .ham_menu:after{content:''; display:block; width:25px; height:2px; background:#333; position:absolute; bottom:0;}
.gnb .sns_btn{display:none;}

/* all_menu css */
.all_menu.on{opacity:1; z-index:100; transform:translateY(0px);}
.all_menu{opacity:0; z-index:-10; text-align:center; width:100%; height:100%; position:fixed; top:0; left:0; background: rgba(0,0,0,0.8); transform:translateY(-30px); transition:all 0.3s;}
.all_menu > div{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:fit-content; background:#f1f6fc; border-radius:20px; padding:0; overflow:hidden;}

.all_menu p{background:#fff; padding:30px 0; box-shadow: 0 10px 10px rgba(0,0,0,0.05); max-height:22%;}
.all_menu p > strong{display:block; width:360px; height:35px; margin:0 auto;}
.all_menu p > strong > img{display:block; width:100%; height:100%; object-fit: contain;}
.all_menu p > span{display:block;}
.all_menu p > span > a{display:inline-block;}
.all_menu p > span > a + a{padding-left:10px; margin-left:10px; border-left:1px solid #ddd;}

.all_menu p + ul{display:flex; justify-content:space-between; flex-wrap: wrap; padding:30px 50px; max-height:78%; overflow-y:scroll;}
.all_menu p + ul > li{width:50%; padding-bottom:30px;}
.all_menu p + ul > li > b{display:block; font-family: var(--bs_tlt_font); color:#333; font-weight:normal; font-size:22px; text-align:left; margin-bottom:20px;}
.all_menu .icon_menu{display:flex;}
.all_menu .icon_menu > li{width:72px; height:72px; overflow:hidden; box-shadow: 5px 5px 10px rgba(0,0,0,0.1); background:#fff; position:relative; border-radius:10px; margin-right:10px; margin-bottom: 10px;}
.all_menu .icon_menu > li > a{display:block; width:100%; height:100%; padding-top:5px;}
.all_menu .icon_menu > li > a > img{transform: scale(0.8); transition:all 0.3s;}
.all_menu .icon_menu > li > a:hover > img{transform:scale(1.0);}
.all_menu .icon_menu > li > a > span{position:absolute; bottom:5px; left:0; right:0; margin:auto; font-size:12px;}

.all_menu .close_btn{position:absolute; top:25px; right:25px; display:block; width:30px; height:30px;}
.all_menu .close_btn:before{content:''; width:30px; height:2px; border-radius:1px; background:#999; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; transform:rotate(45deg);}
.all_menu .close_btn:after{content:''; width:30px; height:2px; border-radius:1px; background:#999; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; transform:rotate(-45deg);}


/* 관련기관 css */
.banner_slide_wrap{border-top:1px solid #ddd; padding:20px 0;}
.banner_slide_wrap > .inner{display:flex; align-items:center;}
.banner_slide_wrap .banner_remote{display:flex; align-items: center;}
.banner_remote > strong{font-size:20px; color:#333; white-space: nowrap;}
.banner_remote > p{display:flex; align-items: center; margin-left:20px;}
.banner_remote > p > span{cursor: pointer; display:block; width:25px; height:25px; background:none; border:1px solid #ddd; position:relative;}
.banner_remote > p > span + span{margin-left:5px;}

.banner_remote .logo_pre:before{content:'<'; font-size:15px; font-family:굴림, sans-serif; color:#ccc; text-indent:0; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; width:25px; height:25px; line-height:25px; text-align:center;  font-weight:bold; transform:translateX(-2px);}
.banner_remote .logo_stop:before{content:''; width:2px; height:10px; display:block; background:#ccc; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; transform:translateX(-2px);}
.banner_remote .logo_stop:after{content:''; width:2px; height:10px; display:block; background:#ccc; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; transform:translateX(2px);}
.banner_remote .logo_play:before{content:''; width:1px; height:1px; border:6px solid transparent; border-left:10px solid #ccc; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; transform: translateX(5px);}
.banner_remote .logo_next:before{content:'>'; font-size:15px; font-family:굴림, sans-serif; color:#ccc; text-indent:0; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; width:25px; height:25px; line-height:25px; text-align:center; font-weight:bold;}

.banner_slide.swiper{margin-left:20px;}
.banner_slide.swiper ul li a{display:block; width:178px; height:45px; position:relative;}
.banner_slide.swiper ul li a img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}

/* footer css  */

footer{border-top:1px solid #ddd; padding:35px 0;}
footer > div.top_btn{position:fixed; right:50px; bottom:50px; display:flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; z-index:80;}
footer > div.top_btn a + a{margin-top:10px;}
footer > div.top_btn .go_top{width:70px; height:70px; line-height:70px; background:#999; color:#fff; border-radius:50%; display:block; text-align:center; transition:all 0.3s;}
footer > div.top_btn .go_top:hover{background:#333;}
footer > div.top_btn .jump_link{width:70px; height:70px; line-height:70px; background:var(--btn_color); color:#fff; border-radius:35px; display:block; text-align:center; border:1px solid transparent; transition:all 0.4s; position:relative; font-size:14px;}
footer > div.top_btn .jump_link span{color:#fff; width:70px; height:70px; line-height:70px; border-radius:50%; display:block; position:absolute; top:0; bottom:0; right:0; margin:auto; opacity:0; transition: all 0.4s;}
footer > div.top_btn .jump_link:nth-child(2){background:var(--btn_color2); border-color:var(--btn_color2);}
footer > div.top_btn .jump_link:nth-child(3){background:var(--btn_color3); border-color:var(--btn_color3);}
footer > div.top_btn .jump_link:nth-child(4){background:#4f5151; border-color:#4f5151;}
footer > div.inner{position:relative;}


.family_site {position: absolute; top: 0; right: 0;}
.family_site .family_btn {position: relative; width: 220px; height: 40px; text-align: left; font-size: 14px; color: #999; padding: 0 20px; transition: all .15s; z-index: 11; font-weight:600; border:1px solid #ddd; border-radius:5px; background:#fff; cursor:pointer;}
.family_site .family_btn:after {content:''; position: absolute; top: 45%; right: 20px;  display:inline-block; width:1px; height:1px; border:5px solid transparent; border-top:6px solid #ccc; transition:transform 0.3s;}
.family_site ul {position: absolute; bottom: calc(100% - 20px); left: 0; width: 100%; height:280px; background: #fff; border:1px solid #ddd; box-sizing:border-box; border-radius: 10px 10px 0 0; padding-bottom: 20px; opacity:0; transform:translateY(30px); transition: opacity 0.3s, transform 0.3s; transition-delay: 0.2s;}
.family_site ul li {padding: 15px 10px; border-top: 1px solid #eee; font-size: 14px;}
.family_site ul li:first-child {border-top: 0;}
.family_site ul li a {color: #999; display: block; font-size:14px; word-break:keep-all;}
.family_site ul li a:hover {color: #111;}
.family_site .family_btn.on {background-color: #f9f9f9; color: #333;}
.family_site .family_btn.on:after {top:25%; border-top-color:var(--main_color); transform:rotate(-180deg);}
.family_site ul.on{opacity:1; transform:translateY(0); z-index:10;}

.f_menu{display:flex;}
.f_menu li{font-size:15px; font-weight:500; color:#666;}
.f_menu li + li{margin-left:40px;}
.f_menu li a{display:block; width:100%; height:100%;}

.f_info{margin-top:24px;}
.f_info span{font-size:15px; color:#999; display:inline-block;}
.f_info span + span{margin-left:15px;}

.f_copy{font-size:15px; color:#666; margin-top:10px; font-weight:500;}

@media all and (min-width: 640px) {
	footer > div.top_btn .jump_link:hover{width:200px; padding-right:45px; font-size:15px; background:#fff; border:1px solid var(--sub_color); color:var(--sub_color);}
	footer > div.top_btn .jump_link:hover span{opacity:1; }
	footer > div.top_btn .jump_link:nth-child(2):hover{background:#fff; border-color:#107bba; color:#107bba;}
}
/* pc */
@media (max-width: 1920px) { 


}

@media (max-width: 1440px) { 

	.inner{max-width:1280px; box-sizing:border-box;}

	/* 전체메뉴 */
	.all_menu > div{width:90%; height:94%;}

}

@media (max-width: 1280px) { 

	.inner{max-width:1024px;}

	/* 헤더영역 */
	.gnb nav h1{height:38px;}

	/* 전체메뉴 */
	.all_menu .icon_menu{flex-wrap:wrap;}
	.all_menu .icon_menu > li{width:22%; min-width:82px;}

	/* sns */
	.top .top_right{width:fit-content;}

	/* 관련기관 */
	.banner_slide.swiper ul li a{width:100%; min-width: 100px;}
}

@media (max-width: 1024px) { 
	:root{
		--bs_tlt_size:32px;
	}
	.inner{max-width:768px;}

	/* 헤더영역 */
	.gnb nav h1{width:180px; height:28px;}
	.gnb nav > ul{display:none;}
	.top .top_left{width:70%;}
	.top .top_right span:not(.sns_box){display:none;}


	/* footer */
	footer > div.inner{text-align:center;}
	.family_site{position:relative;}
	.family_site .family_btn{width:80%; max-width:360px; margin-bottom:30px;}
	.family_site ul{width:80%; max-width:360px; left:0; right:0; margin:auto;}
	.f_menu{justify-content:center;}


}

@media (max-width: 768px) { 

	/* 전체메뉴 */
	.all_menu > div{width:70%; border-radius: 20px;}
	.all_menu p + ul{padding:30px; overflow-y:scroll; height:100%;}
	.all_menu p + ul > li{width:100%; padding-bottom:15px;}
	.all_menu .icon_menu > li{margin-right:3%}	

	/* 관련 기관 */
	.banner_remote > strong{font-size:12px;}
	.banner_remote > p > span{width:18px; height:18px; line-height:18px;}
	.banner_remote .logo_pre:before,
	.banner_remote .logo_next:before{width:18px; height:18px; line-height:18px;}

}

@media (max-width: 640px) { 
	/* 전체메뉴 */
	.all_menu > div{width:94%; height:94%; border-radius:20px;}
	.all_menu p > strong{width:45%; min-width:200px}

	.all_menu p{padding:30px; max-height:18%;}
	.all_menu p > span{padding:15px 0 0;}
	.all_menu p + ul{padding:20px; max-height: 82%;}
	.all_menu .icon_menu > li{margin-right:10px; width:calc(25% - 10px); height:auto; min-width:auto;}
	.all_menu p + ul > li > b{font-size:18px; margin-bottom:10px;}
	.all_menu .icon_menu > li > a{padding-top:0;}
	.all_menu .icon_menu > li > a > img{margin:10px 0 20px; width:auto; height:35px;}
	.all_menu .icon_menu > li > a > span{font-size:12px;}

	.all_menu .close_btn{top:15px; right:15px;}
	.all_menu .close_btn:before,
	.all_menu .close_btn:after{width:20px;}


	/* sns 레이어 팝업 */
	.top.on{display:block; z-index:50;}
	.top{display:none; position:fixed; width:100%; height:100%; z-index:-10; background:rgba(0,0,0,0.6);}
	.top .top_left{display:none;}

	.top.on .top_right .sns_box{opacity:1; transform: translateX(0);}
	.top .top_right .sns_box{border-radius:10px; padding:30px 15px; box-sizing:border-box; background:#fff; border:1px solid #ddd; position:fixed; top:20vh; left:0; right:0; margin:auto; z-index:10; flex-wrap:wrap; justify-content:space-around; width:40vw; min-width:300px; opacity:1; transform: translateY(-30px); transition:opacity 0.4s, transform 0.4s; transition-delay: 0.2s;}

	.top .top_right .sns_box:before{content:'SNS'; width:100%; display:block; font-family: var(--bs_tlt_font); font-size:18px; text-align:center; margin-bottom:15px;}
	.top .top_right .sns_box a{width:35px; height:35px; }
	.top .top_right .sns_box a + a{margin-left:0;}
	.top .top_right .sns_box a.sns_close{display:block; position:absolute; top:6px; right:6px; width:30px; height:30px;}
	.top .top_right .sns_box a.sns_close:before{content:''; width:20px; height:2px; display:block; background:#999; transform:rotate(-45deg); position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}
	.top .top_right .sns_box a.sns_close:after{content:''; width:20px; height:2px; display:block; background:#999; transform:rotate(45deg); position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}

	/* gnb */
	.gnb{border-top:none;}
	.gnb nav{justify-content: center;}
	.gnb nav h1{width:170px; height:26px; margin:17px 0;}
	.gnb .ham_menu{position:absolute;  left:20px;}

	.gnb .sns_btn{width:40px; height:22px; display:block; background:url('/images/page/common/sns_btn.png') no-repeat; background-size:auto 100%; position:absolute; right:20px; top:16px; margin:auto;}

	/* footer */
	footer > div.top_btn{flex-direction: row; width:100%; justify-content:space-between; right:auto; left:0; bottom:0;}
	footer > div.top_btn{margin-top:0;}
	footer > div.top_btn .jump_link{width:25%; height:80px; line-height:80px; border-radius:0; }
	footer > div.top_btn .go_top{width:60px; height:60px; line-height:60px; position:fixed; bottom:60px; right:10px}
	.f_info span{display:block;}
	.f_info span + span{margin-left:0; margin-top:5px;}
	.family_site .family_btn{max-width:250px;}
	.family_site ul{max-width:250px;}


}

@media (max-width: 425px) { 

.f_menu li + li{margin-left:10px;}
}

@media (max-width: 360px) { 


}