@charset "utf-8";

:root{
	--main_color : #029D97;
	--sub_color : #FF911B;

	--main_color_rgb : 2, 157, 151;
	--sub_color_rgb : 255, 145, 27;

	--tit_font : 'EliceDigitalBaeum', sans-serif;
	--txt_font : 'Pretendard', sans-serif;
	
	--user-primary: var(--main_color);
	--user-secondary: var(--sub_color);
	--user-success: #1AC8D9;
	--user-danger: #FF4753;
	--user-light: #F2F6FC;
	--user-warning: #FBBC05;
	--user-info: #1494c6;
	--user-white: #ffffff;
	--user-dark: #00081F;
	--user-gray: #8592A3;

	--user-primary-rgb: var(--main_color_rgb);
	--user-secondary-rgb: var(--sub_color_rgb);
	--user-success-rgb: 26, 200, 217;
	--user-danger-rgb: 255, 71, 83;
	--user-warning-rgb: 251, 188, 5;
	--user-info-rgb: 20, 148, 198;
	--user-dark-rgb: 0, 8, 31;
}

.m_only{display:none;}
.inner{width:100%; max-width:1440px; margin:0 auto;}
.shadow_box{box-shadow:0 4px 4px rgba(var(--main_color_rgb), 0.04), 0 -4px 4px rgba(var(--main_color_rgb), 0.04), 4px 0 4px rgba(var(--main_color_rgb), 0.04), -4px 0 4px rgba(var(--main_color_rgb), 0.04);}

header{display:flex; align-items: center; justify-content: space-between; padding:10px 190px 10px 110px; min-width:340px;}

header h1.logo{height:32px;}
.logo a{display:block; width:100%; height:100%; font-size:0;}
.logo a img{width:100%; height:100%; object-fit: contain;}

header .gnb{display:flex; gap: 40px; justify-content: flex-end;}
.gnb > ul{display:flex; align-items: center; justify-content: flex-end;}
.gnb > ul > li{position: relative; z-index: 30; text-align: center; padding:20px 40px;}
.gnb > ul > li > a{font-size:18px; font-weight: 500; color:#333;}
.gnb > ul > li > ul{visibility: hidden; opacity: 0; position:absolute; left:50%; top:50px; transform:translateX(-50%); padding:30px 10px 10px; border-radius:10px; background:#fff; width:100%;}
.gnb > ul > li:hover > ul{visibility: visible; opacity: 1;}
.gnb > ul > li > ul > li + li{margin-top:5px;}
.gnb > ul > li > ul > li > a:hover{color:#222;}


.t_menu{display:flex; justify-content: flex-end; align-items: center; gap: 10px;}
.t_menu > a{display:inline-block; width:40px; height:40px; text-align:center; font-size:26px; background-color:rgba(var(--main_color_rgb), 0.16); border-radius: 50%; position: relative;}
.t_menu > a > i.bx{position:absolute; inset:0; margin:auto; height: fit-content;}
.t_menu .login_btn,
.t_menu .my_btn{background-image: url('/images/page/common/user_icon.png'); background-repeat: no-repeat; background-size: 18px auto; background-position: center;}
.t_menu .logout_btn{}
.t_menu .logout_btn:before{content:'\f7d3'; font-family: boxicons !important; color:var(--main_color);}

.t_menu > a .tooltip{visibility: hidden; background-color:rgba(var(--main_color_rgb), 0.16); position: absolute; top:42px; left:50%; transform:translateX(-50%); opacity:0; color:var(--main_color); font-size:12px; white-space: nowrap; padding:0 10px; width:fit-content; transition:visibility 0.4s, opacity 0.4s; border-radius:3px;}
.t_menu > a:hover .tooltip{visibility:visible; opacity: 1;}

.all_menu_btn{position:fixed; top:0; right:100px; background:var(--main_color); border-radius:0 0 30px 30px; width:60px; height:80px; transition:height 0.4s; z-index: 100;}
.all_menu_btn span{position: absolute; bottom:0; display:block; width:60px; height:60px; border-radius:50%; color:#fff; color:#fff; font-size:35px; left:0; right:0; margin:auto; text-align: center; line-height:60px;}

.all_menu_btn:hover{height:100px;}

/* all_menu */
.all_menu{display:none; width:100%; background:#fff; position:fixed; top:0; left:0; right:0; margin:auto; z-index: 80;}
.all_menu_wrap{width:100%; height:100%; min-height:100vh; display:flex; justify-content: center; align-items: center;}
.all_menu inner{padding:80px 0; position: relative;}

.all_menu_top{}
.all_menu_top .all_logo{display:block; height:32px; overflow:hidden;}
.all_menu_top .all_logo img{width:100%; height:100%; object-fit: contain;}
.all_menu_top .all_t_menu{display:flex; justify-content: center; align-items: center; gap:10px; margin-top:20px;}
.all_menu_top .all_t_menu > a{display:inline-block; padding:2px 10px; background:rgba(var(--main_color_rgb), 0.1); border-radius: 13px; font-size:14px; color:var(--main_color);}

.all_menu_body{margin-top:80px;}
.all_menu_body > ul{display:flex; justify-content: center; gap:40px;}
.all_menu_body > ul > li{width:calc((100% - 160px)/5); padding:20px 0; position: relative;}
.all_menu_body > ul > li:before{content:''; width:1px; height:100%; position: absolute; left:-20px; top:0; bottom:0; margin:auto; display:block; border-left: 1px dotted #ddd;}
.all_menu_body > ul > li > a{font-family: var(--tit_font); font-weight: 700; color:#222; font-size:28px; display:block; text-align: center;}

.all_menu_body > ul > li > ul{width:fit-content; margin:30px auto;}
.all_menu_body > ul > li > ul > li + li{margin-top:5px;}
.all_menu_body > ul > li > ul > li > a{padding-left:30px; position: relative; font-size:18px; font-weight:500;}
.all_menu_body > ul > li > ul > li > a:before{content:''; display:block; width:10px; height:10px; background:#eee; border-radius:50%; position:absolute; left:0; top:7px;}
.all_menu_body > ul > li > ul > li > a:hover{color:#222;}
.all_menu_body > ul > li > ul > li > a:hover:before{background:rgba(var(--main_color_rgb), 0.4);}

.all_close{position: absolute; right:0; top:0;}

/* footer */
footer{}
.f_menu{padding:20px; background:var(--main_color);}
.f_menu ul{display:flex; justify-content: center; align-items: center; gap:50px;}
.f_menu ul li{color:#fff;}

.f_info{padding:30px 0; text-align:center;}
.f_info h2{height:32px;}
.f_info h2 a{height:100%; width:100%; display:block; padding-top:0; border:none;}
.f_info h2 a img{width:100%; height:100%; object-fit: contain;}
.f_info ul{margin-top:15px;}
.f_info ul li{display:flex; justify-content: center; font-size:14px; line-height:145%; color:#666;}
.f_info ul li span{}
.f_info ul li p{position:relative; margin-left:15px; padding-left:15px;}
.f_info ul li p:before{content:'·'; position:absolute; top:0; left:0;}

.copyright{text-align:center; border-top:1px solid #ddd; padding:15px 0; font-size: 14px;}

@media (max-width: 1600px) {

	/* header */
	header{padding:10px 100px 10px 20px}

	.all_menu_btn{right:20px;}
}

@media (max-width: 1440px) {

	.inner{padding:0 20px;}

	/* header */
	header h1.logo{height:24px;}

	/* gnb */
	header .gnb{gap:0;}
	.gnb > ul > li{padding: 20px;}
	.gnb > ul > li > a{font-size:17px;}

	/* footer */
	.f_info h2{height:24px;}

}

@media (max-width: 1280px) {

}

@media (max-width: 1024px) {

	/* header */
	header{padding:20px;}

	/* gnb */
	header .gnb{display:none;}

	.all_menu_btn{width:50px; height:60px;}
	.all_menu_btn:hover{height:80px;}
	.all_menu_btn span{width:50px; height:50px; line-height:50px; font-size:30px;}

	/* all_menu */
	.all_menu_body{max-height:75vh; overflow-y:auto;}
	.all_menu_body > ul{flex-wrap: wrap;}
	.all_menu_body > ul > li{width:calc((100% - 80px)/3);}
	.all_menu_body .m_only{display:block;}

}

@media (max-width: 768px) {

	/* all_menu */
	.all_menu_body > ul > li{width:calc((100% - 40px)/2); padding:20px;}
	.all_menu_body > ul > li:nth-child(n + 3):after{content:''; width:100%; height:1px; border-top:1px dotted #ddd; position:absolute; top:-20px; left:0; right:0; margin:auto}

}

@media (max-width: 576px) {
	
	/* all_menu */
	.ver_mobile .all_menu_body{border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
	.ver_mobile .all_menu_body > ul{display:block;}
	.ver_mobile .all_menu_body > ul > li{width:100%; padding:0;}
	.ver_mobile .all_menu_body > ul > li.has_sub:before{content:"\f2d2"; font-family: 'boxicons'; width:16px; height:16px; border:none; right:10px; left:unset; bottom:unset; top:25px;}
	.ver_mobile .all_menu_body > ul > li:nth-child(n + 3):after{display:none;}
	.ver_mobile .all_menu_body > ul > li + li{border-top:1px solid #ddd;}
	.ver_mobile .all_menu_body > ul > li > a{font-size:20px; padding:20px; text-align: left;}
	.ver_mobile .all_menu_body > ul > li > ul{margin:0; width:100%; border-top:1px solid #ddd; display:none; background:rgba(var(--main_color_rgb), 0.05);}
	.ver_mobile .all_menu_body > ul > li > ul > li {padding:15px;}
	.ver_mobile .all_menu_body > ul > li > ul > li + li{margin-top:0;}
	
	.ver_mobile .all_menu_body > ul > li > ul > li > a{padding-left:15px;}
	.ver_mobile .all_menu_body > ul > li > ul > li > a:before{background:rgba(var(--main_color_rgb), 0.2);}
	.ver_mobile .all_menu_body > ul > li > ul > li > a:hover:before{background:rgba(var(--main_color_rgb), 0.8)}


	.ver_mobile .all_menu_body.ver_mobile{}

}

@media (max-width: 640px) {

	/* footer */
	.f_menu ul{gap:15px; padding:0;}
	.f_menu ul li{font-size:14px;}

}

@media (max-width: 425px) {
	
	/* header */
	header h1.logo{height:20px;}

	/* footer */
	.f_info h2{height:20px;}
}