@charset "utf-8";

:root { /* 가상 클래스를 이용해 변수를 선언하고 동일하게 적용 및 변경이 가능합니다. */
	/* color */
	--text-color: #333;
	--text-color-light: #999;
	--title-color: #CA3C45;
	--border-color: #919ea1;
	--border-color-light: #ddd;
	--body-color: #fafeff;
	--body-color-deep: #eee;
	--white-color: #fff;
	--black-color: #000;
	--input-color: #f6f6f6;

	--biggest-font-size: 1.5rem; /* 24px */
	--h1-font-size: 1.25rem; /* 20px */
	--h2-font-size: 1.125rem; /* 18px */
	--h3-font-size: 1rem; /* 16px */
	--normal-font-size: .9375rem; /* 15px */
	--small-font-size: .8125rem; /* 13px */
	--smaller-font-size: .75rem; /* 12px */
}
@media (min-width: 768px) {
	:root {
		--biggest-font-size: 2.5rem; /* 40px */
		--h1-font-size: 1.5rem; /* 24px */
		--h2-font-size: 1.25rem; /* 20px */
		--h3-font-size: 1rem; /* 16px */
		--normal-font-size: 1rem; /* 16px */
		--small-font-size: .875rem; /* 14px */
		--smaller-font-size: .8125rem; /* 13px */
	}
}
@media (min-width: 992px) {
	:root {
		--biggest-font-size: 4rem; /* 64px */
		--h1-font-size: 2.25rem; /* 36px */
		--h2-font-size: 1.75rem; /* 28px */
		--h3-font-size: 1.25rem; /* 20px */
	}
}

/* sub-menu */
.sub-menu {position: relative;width:100%;border-bottom: 1px solid var(--border-color-light);background-color: var(--input-color);}
.sub-menu-inner {display: flex;position: relative;margin:0 auto;max-width:1400px;padding-left: 45px;}
.sub-menu-inner .sub-home-link a {display: block;position: relative;width: 45px;height: 45px;line-height: 45px;padding: 0 10px;border-left:1px solid var(--border-color-light);border-right: 1px solid var(--border-color-light);background-color: var(--input-color);}
.sub-menu-inner .sub-home-link a img {opacity:.8;transition:.5s;}
.sub-menu-inner .sub-home-link a:hover img {opacity:1;}
.sub-menu-inner .sub-menu-title {flex:0 0 auto;position: relative;padding: 0 20px;cursor: pointer;background-color: var(--white-color);}
.sub-menu-inner .sub-menu-title:before {content: "";display: block;position: absolute;top: 0;right: 0;width: 1px;height: 100%;background-color: var(--border-color-light);}
.sub-menu-inner .sub-menu-title h2 {position:relative;margin: 0;height: 45px;line-height: 45px;font-size: var(--normal-font-size);font-family:'GmarketSansMedium';}
.sub-menu-inner .sub-menu-title h2:before {content: "";display: block;position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 20px;height: 20px;background-color:var(--border-color-light);border-radius:50%;}
.sub-menu-inner .sub-menu-title h2:after {content: "";display: block;position: absolute;top: 50%;right: 7px;transform: translateY(-50%) rotate(45deg);width: 5px;height: 5px;border-bottom: 1px solid var(--text-color);border-right: 1px solid var(--text-color);}
.sub-menu-inner .list-sub-menu {display: none;position: absolute;top: 100%;left: 0;z-index: 1;width: 100%;padding:5px 0;border: 1px solid var(--border-color-light);background-color: var(--white-color);}
.sub-menu-inner .list-sub-menu li {margin: 0;}
.sub-menu-inner .list-sub-menu li a {display: block;padding: 9px 20px;}
.sub-menu-inner .list-sub-menu li a:hover {color:var(--primary);}
.sub-menu-inner .list-sub-menu li.active a {color:var(--primary);font-weight:700;}
@media(max-width:991px) {
	.sub-menu .container {padding:0;}
    .sub-menu-inner .sub-home-link {position: absolute;top: 0;left: 0;}
    .sub-menu-inner .sub-menu-title {width:50%;}
}
@media(min-width:992px) {
	.sub-menu-inner {padding-left: 0;}
    .sub-menu-inner .sub-home-link a {width: 70px;height: 70px;line-height: 70px;padding: 0 20px;}
	.sub-menu-inner .sub-menu-title {min-width: 250px;}
	.sub-menu-inner .sub-menu-title.sub-menu-title-first {z-index:2;}
	.sub-menu-inner .sub-menu-title.sub-menu-title-second {margin-left: -1px;z-index:1;}
	.sub-menu-inner .sub-menu-title:before {right: 0;}
    .sub-menu-inner .sub-menu-title h2 {height: 70px;line-height: 70px;}
	.sub-menu-inner .list-sub-menu {padding:7px 0;}
	.sub-menu-inner .list-sub-menu li a {padding: 12px 20px;}
}