@charset "utf-8";
@import url("core.css");
@import url("style.css");
@import url("subCom.css");
@import url("swiper.css");
@import url("sub.css");
@import url("sub_a.css");


/* ----------------------	common.css	--------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang&family=Gowun+Dodum&family=Nanum+Gothic&family=Nanum+Myeongjo&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Zen';
    src: url('../../fonts/ZEN-SERIF-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

*{box-sizing: border-box;}

/* layout */
#wrap{  margin: 0;  height: auto;  overflow: hidden;}
#content {position: relative; display: block; width: 100%; margin: 0 auto;
  margin-top: 100px;	box-sizing: border-box;}
.container {width: 100%; max-width: 1200px;	margin: 0 auto; box-sizing:border-box}
.container2 { position: relative; display: block; width: 100%; margin: 0 auto;  padding: 50px 0;
  box-sizing:border-box; margin-top: 82px;}
.topBtn {
  position: fixed;
  width: 36px;
  height: 36px;
  right: 1%;
  bottom: 4%;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  z-index: 999;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  background: url(../image/topBtn_icon.png) no-repeat center/57%;
  background-color: rgba(102, 102, 102, 0.8);
}
.topBtn.active{	opacity: 1;	visibility: visible;  transition: all 0.5s;}

/* header */
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 60px;
	z-index: 6;
	background: rgba(0, 0, 0, 0.2);
}
header.active{background: rgba(0, 0, 0, 0.3);}
header .btn_letter{
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #fff;
	border-radius: 50px;
	padding: 8px 20px;
	color: #fff;
	transition: 0.4s;
}
header .btn_letter:hover{
	color: #000;
	border-color: #000;
	background: linear-gradient(to right, #fff179, #bee8dc);
}
header a.logo{
	display: block;
	width: 178px;
	height: 50px;
	background: url(../image/img_logo_h.png) 50% 50%/cover no-repeat;
}
header a.btn_side{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 50px;
	height: 100%;
	z-index: 20;
}
header a.btn_side span{
	display: block;
	width: 30px;
	height: 2px;
	background: #fff;
	margin: 4px 0;
	transition: 0.4s;
}
header a.btn_side.active span{margin: 0; background: #000;}
header a.btn_side.active span:nth-child(1){transform: translateY(50%) rotate(45deg);}
header a.btn_side.active span:nth-child(2){display: none;}
header a.btn_side.active span:nth-child(3){transform: translateY(-50%) rotate(-45deg);}

header nav{
	position: fixed;
	top: 0px;
	right: 0;
	width: 560px;
	height: 100vh;
	background: #fff;
	color: #000;
	padding: 35px 40px 100px 50px;
	transition: 0.6s;
	overflow-y: scroll;
	z-index: 6;
	transform: translateX(100%);
}
header nav.menu.active{right: 0; transform: translateX(0);}
header nav a{color: #000;}
header nav.menu .nav_logo{font-family: 'GMarketSans'; font-size: 30px; font-weight: 500; line-height: 1.4;}
header nav.menu .nav_logo span{display: block; color: #8ed7b6; font-size: 26px;}
header nav.menu > ul{margin: 20px 0 140px;}
header nav.menu ul li.m_list > a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'GMarketSans';
	font-size: 26px;
	font-weight: 500;
	padding: 20px 20px 20px 0;
	border-bottom: 1px solid #000;
}
header nav.menu ul li.m_list > a span{
	display: block;
	width: 15px;
	height: 8px;
	background: url(../image/ico/check.png) 50% 50%/cover no-repeat;
	transition: 0.4s;
}
header nav.menu ul li.m_list.active > a span{transform: rotate(180deg);}
header nav.menu ul li.m_list ul.sub_menu{display: none; padding: 0;}
header nav.menu ul li.m_list.active ul.sub_menu{display: block; border-bottom: 1px solid #000;}
header nav.menu ul li.m_list ul.sub_menu li{padding: 15px 0;}
header nav.menu ul li.m_list ul.sub_menu li:first-child{padding-top: 30px;}
header nav.menu ul li.m_list ul.sub_menu li a{display: block; font-family: 'Pretendard'; font-size: 18px;}
header nav.menu ul li.m_list ul.sub_menu li a span{display: block; font-family: 'GMarketSans'; font-weight: 500; font-size: 16px; margin-bottom: 12px;}
header nav.menu ul li.m_list ul.sub_menu li a small{display: block; color: #666666; margin-top: 10px;}

header nav.menu .sub_txt{font-family: 'GMarketSans'; font-weight: 500; font-size: 18px;}
header nav.menu .btn_wrap{display: flex; justify-content: space-between; align-items: center; margin: 10px 0 30px;}
header nav.menu .btn_wrap a{display: flex; justify-content: center; align-items: center; width: 48%; padding: 10px; border-radius: 10px; border: 1px solid #000; transition: 0.4s;}
header nav.menu .btn_wrap:nth-of-type(1) a:hover{background: #bee8dc;}
header nav.menu .btn_wrap:nth-of-type(2) a:hover{background: #fff179;}
header nav.menu .btn_last{display: flex; justify-content: flex-start; align-items: center; font-family: 'GMarketSans'; font-weight: 500; font-size: 18px; transition: 0.4s;}
header nav.menu .btn_last span{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #000;
	font-size: 12px;
	line-height: 1.6;
	margin: 4px 10px 0 0;
	font-weight: bold;
	transition: 0.4s;
}
header nav.menu .btn_last:hover span{background: linear-gradient(to right, #fff179, #bee8dc);}

.menuBg{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 50%;
	top:0;
	transform: translateX(-50%);
	background-color: rgba(0,0,0,0.7);
	z-index: 4;
	box-sizing: border-box;
	transition: 0.4s;
}

@media all and (max-width:1089px){
#content{	margin-top: 80px;}
.topBtn, .topBtnI, .topBtn.active{  display: none;  opacity: 0;}
.container2 { padding-bottom: 80px;}
.container {	width: 100%;	min-width: initial;}

header{height: 80px;}
header a.logo{width: 140px; height: 40px;}
header a.btn_side{height: 80px;}
.menuBg{top: 80px;}
header nav.menu .nav_logo{font-size: 26px;}
header nav.menu .nav_logo span{font-size: 22px;}
header nav.menu ul li.m_list > a{font-size: 22px;}
}

@media all and (max-width:768px){
#content{margin-top: 70px;}
header{height: 70px; padding: 0 30px;}
header .btn_letter{display: none;}
header nav.menu{width: 100%;}
.menuBg{top: 70px;}
header a.logo{width: 120px; height: 34px;}
header a.btn_side{width: 30px; height: 70px;}
}


/* footer */
footer{color: #000; word-break: keep-all;}
footer .footer_gray{width: 100%; background: #e5e5e5; padding: 50px;}
footer .footer_gray .footer_top{
	width: 1250px;
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
footer .footer_gray .footer_top .footer_top_l{width: 20%; text-align: center; padding-right: 60px; border-right: 1px solid #000;}
footer .footer_gray .footer_top .footer_top_l p{
	width: fit-content;
	margin: 14px auto 0;
	border-radius: 50px;
	border: 1px solid #000;
	padding: 2px 16px;
}
footer .footer_gray .footer_top .footer_top_r{width: 80%; padding-left: 40px;}
footer .footer_gray .footer_middle{
	width: 1250px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 50px auto 0;
}
footer .footer_gray .footer_middle li{text-align: center; margin: 0 auto;}
footer .footer_gray .footer_middle li a{display: block;}
footer .footer_gray .footer_middle li:nth-child(1) a{
	width: 180px;
	height: 50px;
	background: url(../../images/img_logo1.png) no-repeat center / cover;
}
footer .footer_gray .footer_middle li:nth-child(2) a{
	width: 230px;
	height: 50px;
	background: url(../../images/img_logo5.png) no-repeat center / 95%;
}
footer .footer_gray .footer_middle li:nth-child(3) a{
	width: 130px;
	height: 53px;
	background: url(../../images/img_logo4.png) no-repeat center / cover;
}
footer .footer_gray .footer_middle li:nth-child(4) a{
	width: 110px;
	height: 60px;
	background: url(../../images/img_logo22.png) no-repeat center / cover;
}
footer .footer_gray .footer_middle li:nth-child(5) a{
	width: 110px;
	height: 68px;
	background: url(../../images/img_logo3.svg) no-repeat center / cover;
}
footer .footer_bottom{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 80px;
	background: linear-gradient(to right, #fff179, #bee8dc);
	font-size: 18px;
}
footer .footer_bottom .footer_bottom_r{
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: right;
}
footer .footer_bottom .footer_bottom_r a{
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #000;
	border-radius: 50px;
	padding: 8px 20px;
	color: #000;
	background: linear-gradient(to right, #fff179, #bee8dc);
	margin-left: 20px;
}

@media all and (max-width: 1400px){
	footer .footer_gray .footer_top, footer .footer_gray .footer_middle{width: 100%;}
	footer .footer_gray .footer_top .footer_top_l{padding-right: 0;}
}
@media all and (max-width: 1089px){
	footer .footer_gray .footer_top{flex-direction: column; justify-content: space-between; align-items: center;}
	footer .footer_gray .footer_top .footer_top_l{width: 100%; border-right: none;}
	footer .footer_gray .footer_top .footer_top_r{width: 100%; padding-left: 0; margin-top: 40px; text-align: center;}
	footer .footer_gray .footer_middle{flex-direction: column;}
	footer .footer_gray .footer_middle li{margin: 20px auto;}
}
@media all and (max-width: 768px){
	footer .footer_bottom{flex-direction: column; font-size: 16px; text-align: center;}
	footer .footer_bottom .footer_bottom_r{flex-direction: column; text-align: center;}
	footer .footer_bottom .footer_bottom_r p{margin: 10px 0;}
	footer .footer_bottom .footer_bottom_r a{margin: 0;}
}