@charset "UTF-8";

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard-Regular"), url(/css/web/static/woff2-subset/Pretendard-Regular.subset.woff2) format("woff2"), url(/css/web/static/woff-subset/Pretendard-Regular.subset.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard-Medium"), url(/css/web/static/woff2-subset/Pretendard-Medium.subset.woff2) format("woff2"), url(/css/web/static/woff-subset/Pretendard-Medium.subset.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard-SemiBold"), url(/css/web/static/woff2-subset/Pretendard-SemiBold.subset.woff2) format("woff2"), url(/css/web/static/woff-subset/Pretendard-SemiBold.subset.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard-Bold"), url(/css/web/static/woff2-subset/Pretendard-Bold.subset.woff2) format("woff2"), url(/css/web/static/woff-subset/Pretendard-Bold.subset.woff) format("woff");
}

/*속성 초기화*/
* { margin:0px; padding:0px; letter-spacing:-0.5px; box-sizing:border-box; -webkit-text-size-adjust:none; }
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button { margin:0; padding:0; -webkit-text-size-adjust:none } /*가로로 눕혀서볼때 글씨확장 방지*/
html { overflow-y:scroll; color: #222; font:500 100% "Pretendard", sans-serif; }
body { -webkit-text-size-adjust:none; font-size:100% !important; word-wrap:break-word; word-break:break-all; -webkit-tap-highlight-color:rgba(0,0,0,0); outline:0;  }
img { border-style: none; }
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal;}
fieldset {border:0;}
table, th, td { border: 0px; border-collapse: collapse; }
ol, ul, ul li, ol li { list-style-type: none; list-style:none; }
input { -webkit-border-radius:0; outline:0; }
input[type=checkbox] {vertical-align:middle; }
input[type=radio] {vertical-align:middle; }
input[type=button] {-webkit-appearance:none; }
input[type=submit] {-webkit-appearance:none; }
select { -webkit-appearance:none; -webkit-border-radius:0; }
button { background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; outline:0; overflow:visible; cursor:pointer; -webkit-appearance:none; -webkit-border-radius:0; }
b, i { color:inherit; font-weight:700; }
em, i, address {font-style:normal; font-weight:normal;}
strong { color:inherit; font-weight:inherit; }
textarea {resize:none; background:none; -webkit-border-radius:1px; -webkit-appearance:none; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; outline: none; }
a:hover { text-decoration: none; }
a:focus{ outline: none; }
a { word-break:break-all; outline: 0; color:inherit; }
*:focus {outline:0;}
*:visited {outline:0;}
*:active {outline:0;}
*:hover {outline:0;}

legend, caption {display:none; clear:both;}
input, textarea, select, button, table {font-size:inherit; font-family:inherit; line-height:inherit; outline:0; border:0; border-collapse: collapse;}
section, nav, article, aside, hgroup, heade, footer {display:block;}

::selection, select:focus::-ms-value { background-color:transparent; color:#333; }
option:checked {background-color:transparent; color: #333;}
option:checked:hover, select:focus option:checked:hover { background-color: transparent; color: #333; }


body {
	background: #f4f4f4;
	-ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

.wrap {
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
	background: #fff;
	color: #222;
	font: 500 100% "Pretendard";
	word-break: break-word;
	overflow: hidden;
}

:root {
  /* Colors */
  --colcm: #e7088a;
  --colgraybg: #555555;
  --colgrayyg: #999999;
  --colblack: #222222;
  --linecolcm: #e7088a;
  --linecolg: #eaeaea;
  --bgcolg: #f4f4f4;
  --colfff: #ffffff;

  /* Fonts */
  --cmtxt11b-font-family: Pretendard-Bold, sans-serif;
  --cmtxt11b-font-size: 11px;
  --cmtxt11b-line-height: 15px;
  --cmtxt11b-font-weight: 700;
  --cmtxt11b-font-style: normal;
  --cmtxt11-font-family: Pretendard-Medium, sans-serif;
  --cmtxt11-font-size: 11px;
  --cmtxt11-line-height: 15px;
  --cmtxt11-font-weight: 500;
  --cmtxt11-font-style: normal;
  --cmtxt15b-font-family: Pretendard-Bold, sans-serif;
  --cmtxt15b-font-size: 15px;
  --cmtxt15b-line-height: 20px;
  --cmtxt15b-font-weight: 700;
  --cmtxt15b-font-style: normal;
  --cmtxt15-font-family: Pretendard-Medium, sans-serif;
  --cmtxt15-font-size: 15px;
  --cmtxt15-line-height: 20px;
  --cmtxt15-font-weight: 500;
  --cmtxt15-font-style: normal;
  --cmtxt13b-font-family: Pretendard-Bold, sans-serif;
  --cmtxt13b-font-size: 13px;
  --cmtxt13b-line-height: 18px;
  --cmtxt13b-font-weight: 700;
  --cmtxt13b-font-style: normal;
  --cmtit18b-font-family: Pretendard-Bold, sans-serif;
  --cmtit18b-font-size: 18px;
  --cmtit18b-line-height: 25px;
  --cmtit18b-font-weight: 700;
  --cmtit18b-font-style: normal;
  --cmttit22b-font-family: Pretendard-Bold, sans-serif;
  --cmttit22b-font-size: 22px;
  --cmttit22b-line-height: 25px;
  --cmttit22b-font-weight: 700;
  --cmttit22b-font-style: normal;
  --cmtxt13-font-family: Pretendard-Medium, sans-serif;
  --cmtxt13-font-size: 13px;
  --cmtxt13-line-height: 20px;
  --cmtxt13-font-weight: 500;
  --cmtxt13-font-style: normal;

  /* Effects */
}



/** header */
.header {
	display: flex;
	flex-direction: column;
	gap: 0px;
	align-items: flex-start;
	justify-content: center;
	align-self: stretch;
	flex-shrink: 0;
	position: relative;
	max-width: 768px;
	width: 100%;
}

.header .header_top {
  padding: 15px 10px 15px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

.header .header_top .title {
  display: flex;
  flex-direction: row;
  gap: 3px;
  align-items: flex-end;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}

.header .header_top .title .tit {
  color: var(--colcm, #e7088a);
  text-align: left;
  font-family: var(--cmttit22b-font-family, "Pretendard-Bold", sans-serif);
  font-size: var(--cmttit22b-font-size, 22px);
  line-height: var(--cmttit22b-line-height, 25px);
  font-weight: var(--cmttit22b-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header .header_top .title .stxt {
  color: var(--colgraybg, #555555);
  text-align: left;
  font-family: var(--cmtxt15b-font-family, "Pretendard-Bold", sans-serif);
  font-size: var(--cmtxt15b-font-size, 15px);
  line-height: var(--cmtxt15b-line-height, 20px);
  font-weight: var(--cmtxt15b-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header .header_top .title .txt {
  color: #222222;
  text-align: left;
  font-family: var(--cmtit18b-font-family, "Pretendard-Bold", sans-serif);
  font-size: var(--cmtit18b-font-size, 18px);
  line-height: var(--cmtit18b-line-height, 25px);
  font-weight: var(--cmtit18b-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.header .header_top .menu_btn,
.header .header_top .menu_close {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  position: relative;
}

.header .header_top .menu_btn i,
.header .header_top .menu_close i {
  color: #222222;
  text-align: center;
  font-size: 25px;
  line-height: 25px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}


.header .gnb {
	/* 기존 row → column으로 변경 */
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* 왼쪽 정렬 유지 */
	justify-content: flex-start;
	align-self: stretch;
	flex-shrink: 0;
	position: relative;
}

	.header .gnb .nav_menu {
		padding: 0px 10px 0px 10px;
		width: 100%;
		display: flex;
		flex-direction: row;
		gap: 20px;
		align-items: center;
		justify-content: flex-start;
		flex-shrink: 0;
		position: relative;
		border-style: solid;
		border-color: #ddd;
		border-width: 0px 0px 1px 0px;
	}

.header .gnb .nav_menu .menu_item {
  padding: 15px 10px 15px 10px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.header .gnb .nav_menu .menu_item a {
  color: var(--colblack, #222222);
  text-align: center;
  font-family: var(--cmtxt15-font-family, "Pretendard-Medium", sans-serif);
  font-size: var(--cmtxt15-font-size, 15px);
  line-height: var(--cmtxt15-line-height, 20px);
  font-weight: var(--cmtxt15-font-weight, 500);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header .gnb .nav_menu .menu_item.on {
  border-style: solid;
  border-color: var(--colblack, #222222);
  border-width: 0px 0px 3px 0px;
  padding: 15px 10px 12px 10px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

.header .gnb .nav_menu .menu_item.on a {
  font-family: var(--cmtxt15b-font-family, "Pretendard-Bold", sans-serif);
  font-size: var(--cmtxt15b-font-size, 15px);
  line-height: var(--cmtxt15b-line-height, 20px);
  font-weight: var(--cmtxt15b-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* GNB 고정 관련 스타일 */
.gnb {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  background-color: #fff;
  z-index: 90;
}

.gnb.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* GNB가 fixed 상태일 때 컨텐츠 영역 패딩 조정 */
.contents.gnb-fixed {
  padding-top: 150px; /* GNB 높이에 맞게 조정 */
}


/** 메뉴오픈 */
.menu_wrap {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 100;
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}


.menu_wrap.active {
  right: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.menu_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: none;
}

.menu_overlay.active {
  display: block;
}

.menu_wrap .menu_contents {
  padding: 20px 10px 0px 10px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex: 1;
  position: relative;
  min-height: auto;
}

.menu_wrap .menu_box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

.menu_wrap .menu_box .menu_tit {
  color: var(--colblack, #222222);
  text-align: left;
  font-family: var(--cmtxt15b-font-family, "Pretendard-Bold", sans-serif);
  font-size: var(--cmtxt15b-font-size, 15px);
  line-height: var(--cmtxt15b-line-height, 20px);
  font-weight: var(--cmtxt15b-font-weight, 700);
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.menu_wrap .menu_box .menu_list {
  border-style: solid;
  border-color: var(--colblack, #222222);
  border-width: 1px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

.menu_wrap .menu_box .menu_list .menu_item {
  border-style: solid;
  border-color: var(--linecolg, #eaeaea);
  border-width: 0px 0px 1px 0px;
  padding: 10px 15px 10px 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

.menu_wrap .menu_box .menu_list .menu_item a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
}

.menu_wrap .menu_box .menu_list .menu_item .txt {
  color: var(--colgrayyg, #999999);
  text-align: left;
  font-family: var(--cmtxt15-font-family, "Pretendard-Medium", sans-serif);
  font-size: var(--cmtxt15-font-size, 15px);
  line-height: var(--cmtxt15-line-height, 20px);
  font-weight: var(--cmtxt15-font-weight, 500);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.menu_wrap .menu_box .menu_list .menu_item a i {
  color: var(--bgcolg, #f4f4f4);
  text-align: left;
  font-size: 15px;
  line-height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wrap .footer {
  background: #ffffff;
  padding: 20px 10px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

.wrap .footer .txt {
  color: var(--colgrayyg, #999999);
  text-align: left;
  font-family: var(--cmtxt13-font-family, "Pretendard-Medium", sans-serif);
  font-size: var(--cmtxt13-font-size, 13px);
  line-height: var(--cmtxt13-line-height, 20px);
  font-weight: var(--cmtxt13-font-weight, 500);
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wrap .footer .mail {
  color: var(--colgraybg, #555555);
  text-align: left;
  font-family: var(--cmtxt11b-font-family, "Pretendard-Bold", sans-serif);
  font-size: var(--cmtxt11b-font-size, 11px);
  line-height: var(--cmtxt11b-line-height, 15px);
  font-weight: var(--cmtxt11b-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

/* 탑 버튼 스타일 */
.top_btn {
  position: fixed;
  bottom: 30px;
  right: 15px;
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #aaa;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.top_btn i {
  color: var(--colgraybg, #555555);
  text-align: center;
  font-size: 18px;
  line-height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top_btn.visible {
  opacity: 1;
  visibility: visible;
}

.top_btn:active {
  transform: scale(0.95);
}