@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 300;
  src: url('/fonts/notosanskr-light.woff2') format('woff'),
		url('/fonts/notosanskr-light.woff') format('woff')
}

@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 400;
  src: url('/fonts/notosanskr-regular.woff2') format('woff2'),
		url('/fonts/notosanskr-regular.woff') format('woff')
}

@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 500;
  src: url('/fonts/notosanskr-medium.woff2') format('woff2'),
		url('/fonts/notosanskr-medium.woff') format('woff')
}

@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 700;
  src: url('/fonts/notosanskr-bold.woff2') format('woff2'),
		url('/fonts/notosanskr-bold.woff') format('woff')
}

* { margin: 0; padding: 0; box-sizing: border-box; position: relative; font-family: "Noto Sans KR", sans-serif; letter-spacing: -1px; -webkit-tap-highlight-color: transparent; }
*:focus { outline: none; }
*::selection { background-color: #00A79D; color: #FFF; }
html, body { width: 100%; height: 100%; float: left; color: #333; background-color: #FFF; font-size: 14px; }
#wrap { width: 100%; min-height: 100%; float: left; left: 0; }

/* 엘리먼트 초기화 */
a { text-decoration: none; color: inherit; }
img { vertical-align: bottom; }
input { border: none; font-size: 15px; letter-spacing: -0.5px; }
input::placeholder { font-weight: 400; color: #CCC; }
input:read-only { color: #CCC !important; border: 1px solid #EEE !important; background-color: #FAFAFA; }
ul, li { list-style: none; }
button { cursor: pointer; border: none; background: none; }
table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
label { cursor: pointer; }

/* 버튼 */
.typeBtn { width: 120px; height: 35px; line-height: 35px; float: left; font-weight: bold; font-size: 14px; border: 1px solid #666; background-color: #666; color: #FFF; text-align: center; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }
.typeBtn > i { margin-right: 6px; }

.btnBlack { border: 1px solid #000; background-color: #000; }
.btnGray01 { border: 1px solid #999; background-color: #999; }
.btnGray02 { border: 1px solid #BBB; background-color: #FFF; color: #999; }
.btnRed { border: 1px solid #CD3333; background-color: #CD3333; }
.btnOrange { border: 1px solid #FE7B35; background-color: #FE7B35; }
.btnOrange02 { border: 1px solid #FE7B35; background-color: #FFF; color: #FE7B35 !important; }
.btnIndigo { border: 1px solid #101010 !important; background-color: #101010 !important; color: #FFF !important; }
.btnIndigo02 { border: 1px solid #101010 !important; background-color: #FFF !important; color: #101010 !important; }
.btnIndigo > i { margin-right: 6px !important; }
.btnSky { border: 1px solid #666; background-color: #666; }
.btnMint01 { border: 1px solid #00A79D; background-color: #00A79D; }
.btnGreen01 { border: 1px solid #207244; background-color: #207244; }
.btnGreen02 { border: 1px solid #207244 !important; background-color: #FFF; color: #207244 !important; }
.btnGreen02 > i { margin-right: 6px !important; }

.btnListMini { width: auto; min-width: 85px; max-width: 100%; height: 25px; float: none; line-height: 25px; font-size: 12px; padding: 0 10px; }
.btnListMini > i { margin-right: 0; margin-left: 3px; }

/* txtBox */
select.txtBox { min-width: 140px; height: 35px; float: left; color: #666; border: 1px solid #EBEBEB; padding: 0 10px; letter-spacing: -0.5px; }
select.listSet { width: 140px; height: 35px; float: left; color: #666; border: 1px solid #EBEBEB; padding: 0 10px; letter-spacing: -0.5px; }
input.txtBox { width: 100%; height: 35px; float: left; color: #666; border: 1px solid #EBEBEB; padding: 0 10px; letter-spacing: -0.5px; font-size: 13px; }
textarea.txtBox { width: 100%; height: 100px; float: left; color: #666; border: 1px solid #EBEBEB; padding: 10px; letter-spacing: -0.5px; resize: none; }

/* 체크박스 커스텀 */
.checkCustom { display: none; }
.checkCustomLabel > .on { display: none; }
.checkCustomLabel > .off { display: inline-block; }

.checkCustom:checked + .checkCustomLabel > .on { display: inline-block; }
.checkCustom:checked + .checkCustomLabel > .off { display: none; }

.checkCustom:disabled + .checkCustomLabel { cursor: default !important; color: #CCC; }
.checkCustom:disabled + .checkCustomLabel > i { color: #DDD !important; }

/* letter spacing 0.5 */
.lp05 { letter-spacing: -0.5px; }
.lp05 * { letter-spacing: -0.5px; }

/* drag */
.drag { -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }
.drag * { -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }

/* commonBox */
.commonBox { width: 100%; min-width: 1200px; float: left; }
.commonBox > div { width: 1200px; margin: 0 auto; }
.commonBox > div > div { width: 100%; float: left; padding-bottom: 100px !important; }

/* commonTitle */
.commonTitle { width: 100%; float: left; margin-top: 110px; padding-bottom: 85px; }
.commonTitle > .big { width: 100%; float: left; text-align: center; font-size: 43px; font-weight: 300; color: #333; }
.commonTitle > .small { width: 100%; float: left; text-align: center; font-size: 18px; font-weight: 400 ; color: #00A79D; margin-top: 15px; }
.commonTitle > .line { position: absolute; width: 60px; height: 2px; float: left; background-color: #00A79D; bottom: 50px; left: 50%; margin-left: -30px; }

/* float */
.left { float: left; }
.right { float: right; }

/* loading */
#loadingWrap { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999; display: none; }
#loadingWrap > #loading { position: absolute; width: 50px; height: 50px; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #00A79D; animation: loading 1s ease-in-out infinite; -webkit-animation: loading 1s ease-in-out infinite; }

@keyframes loading { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes loading { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* 공용 상단 영역 */
#headerTopWrap > div > div { height: 135px; padding: 0 50px; }
#headerTopWrap > div > div > * { height: 100%; line-height: 135px; }

#headerTopWrap .logoWrap { float: left; top: -2px; }
#headerTopWrap .logoWrap img { width: 200px; vertical-align: middle; }

#headerTopWrap .topNavWrap { float: right; }
#headerTopWrap .topNavWrap > div { float: left; height: 100%; line-height: 135px; }
#headerTopWrap .topNavWrap > div > ul { float: left; }
#headerTopWrap .topNavWrap > div > ul > li { float: left; }

#headerTopWrap .topNavWrap > .navListWrap li { margin: 0 25px; }
#headerTopWrap .topNavWrap > .navListWrap li > a { font-size: 17px; font-weight: 500; }
#headerTopWrap .topNavWrap > .navListWrap li > a:hover { color: #00A79D; }

#headerTopWrap .topNavWrap > .userWrap { margin-left: 25px; }
#headerTopWrap .topNavWrap > .userWrap li > a { display: inline-block; width: 125px; height: 40px; font-size: 14px; font-weight: bold; color: #00A79D; border: 1px solid #00A79D; line-height: 40px; border-right: 0; text-align: center; }
#headerTopWrap .topNavWrap > .userWrap li:last-of-type > a { border-right: 1px solid #00A79D; }

/* 서브페이지 공용상단 비주얼영역 */
#headerSubVisualWrap { overflow: hidden; background-color: #B5C8CF; margin-bottom: 60px; }
#headerSubVisualWrap > div { width: 2000px; left: 50%; margin-left: -1000px; }
#headerSubVisualWrap > div > div { height: 310px; background-image: url(/images/headerSubVisualBG.jpg); background-size: cover; background-position: center; }

#headerSubVisualWrap .line { width: 1px; height: 35px; float: left; margin: 0 999.5px; background-color: #01A79B; margin-top: 60px; }
#headerSubVisualWrap .title { width: 100%; float: left; text-align: center; font-weight: 300; font-size: 42px; color: #333; margin-top: 20px; }
#headerSubVisualWrap .contents { width: 100%; float: left; text-align: center; font-weight: 300; font-size: 19px; color: #333; margin-top: 15px; }

/* 서브페이지 탭메뉴 영역 */
#headerSubTabWrap { margin-bottom: 70px; }
#headerSubTabWrap > div > div { padding-bottom: 0 !important; }

#headerSubTabWrap ul { width: 100%; height: 57px; float: left; border-bottom: 1px solid #333; text-align: center; }
#headerSubTabWrap ul > li { display: inline-block; margin: 0 5px; background-color: #F5F5F5; border: 1px solid #DDD; border-bottom: 1px solid #333; }
#headerSubTabWrap ul > li > a { width: 300px; height: 55px; line-height: 55px; float: left; text-align: center; color: #CCC; font-size: 17px; font-weight: 500; }

#headerSubTabWrap ul > li.active { border: 1px solid #333; border-bottom: 1px solid #FFF; background-color: #FFF; }
#headerSubTabWrap ul > li.active > a { color: #333; }
#headerSubTabWrap ul > li.active > .line { position: absolute; width: 302px; height: 3px; background-color: #00A99D; left: -1px; top: -1px; }

/* 공용 하단 영역 */
#footerBtmWrap { background-color: #142337; }
#footerBtmWrap > div > div { display: table; table-layout: fixed; padding: 0 !important; }
#footerBtmWrap > div > div > div { height: 200px; display: table-cell; vertical-align: middle; }

#footerBtmWrap .logoWrap { width: 400px; text-align: center; }
#footerBtmWrap .logoWrap > img { vertical-align: middle; opacity: 0.13; }

#footerBtmWrap .infoWrap > ul { width: 100%; float: left; margin: 5px 0; }
#footerBtmWrap .infoWrap > ul > li { float: left; font-size: 14px; color: #FFF; letter-spacing: -0.5px; }
#footerBtmWrap .infoWrap > ul > li.line { width: 1px; height: 18px; top: 0.5px; background-color: #FFF; margin: 0 12px; }

/* 멤버스 회원가입영역 */
.membersBoxWrap { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.65); overflow-y: auto; display: none; }
.membersBoxWrap > .membersBox { position: absolute; width: 650px; left: 50%; margin-left: -325px; background-color: #FFF; border-radius: 10px; overflow: hidden; top: 50px; opacity: 0; transition: top 0.5s, opacity 0.5s; }
.membersBoxWrap > .membersBox.active { top: 100px; opacity: 1; }
.membersBoxWrap > .membersBox > div { width: 100%; float: left; display: block; padding: 80px; }

.membersBoxWrap > .membersBox > .membersBoxCloseBtn { position: absolute; font-size: 42px; color: #DDD; cursor: pointer; top: 30px; right: 30px; z-index: 2; transition: color 0.5s; }
.membersBoxWrap > .membersBox > .membersBoxCloseBtn:hover { color: #CCC; }

.membersBoxWrap > .membersBox > div > .titWrap { width: 100%; float: left; font-weight: 700; color: #333; font-size: 27px; text-align: center; margin-bottom: 30px; }
.membersBoxWrap > .membersBox > div > .titWrap > .point { color: #07A39F; }

.membersBoxWrap > .membersBox > div > .btnWrap { width: 100%; float: left; border-bottom: 1px solid #D7D7D7; padding-bottom: 15px; margin-top: 10px; }
.membersBoxWrap > .membersBox > div > .btnWrap > button { width: 100%; height: 55px; float: left; border-radius: 5px; color: #FFF; font-weight: 500; background-color: #00A79D; font-size: 17px; }
.membersBoxWrap > .membersBox > div > .btnWrap > .checkCustomLabel { float: left; margin-top: 20px; }
.membersBoxWrap > .membersBox > div > .btnWrap > .checkCustomLabel > i { font-size: 21px; vertical-align: middle; }
.membersBoxWrap > .membersBox > div > .btnWrap > .checkCustomLabel > .on { color: #00A79D; }
.membersBoxWrap > .membersBox > div > .btnWrap > .checkCustomLabel > .off { color: #DDD; }
.membersBoxWrap > .membersBox > div > .btnWrap > .checkCustomLabel > span { font-size: 15px; color: #333; font-weight: 500; margin-left: 5px; vertical-align: middle; }

.membersBoxWrap > .membersBox > div > .linkWrap { width: 100%; float: left; padding: 20px 0; text-align: right; }
.membersBoxWrap > .membersBox > div > .linkWrap > a { font-size: 15px; color: #333; font-weight: 500; }
.membersBoxWrap > .membersBox > div > .linkWrap > span { font-size: 15px; color: #333; font-weight: 500; margin: 0 5px; }

.membersBoxWrap > .membersBox > div > form { width: 100%; float: left; }
.membersBoxWrap > .membersBox > div > form > ul { width: 100%; float: left; }
.membersBoxWrap > .membersBox > div > form > ul > li { width: 100%; float: left; margin-bottom: 12px; }
.membersBoxWrap > .membersBox > div > form > ul > li > input { width: 100%; height: 55px; float: left; padding: 0 15px; font-size: 15px; color: #666; border: 1px solid #DDD; border-radius: 5px; }
.membersBoxWrap > .membersBox > div > form > ul > li > input:focus { border: 1px solid #BBB; }
.membersBoxWrap > .membersBox > div > form > ul > li > button { width: 100px; height: 55px; float: right; text-align: center; font-size: 15px; color: #FFF; font-weight: 500; border-radius: 5px; background-color: #999; }

.membersBoxWrap > .membersBox > div > form > ul > .input2 > input { width: calc(50% - 2.5px); margin-right: 5px; }
.membersBoxWrap > .membersBox > div > form > ul > .input2 > input:last-of-type { margin-right: 0; }

.membersBoxWrap > .membersBox > div > form > ul > .btn > input { width: calc(100% - 105px); }

.membersBoxWrap > .membersBox > .privacyWrap > .conWrap { width: 100%; height: 220px; float: left; overflow-y: auto; padding: 25px; border: 1px solid #DDD; border-radius: 5px; font-size: 12px; line-height: 20px; color: #999; letter-spacing: -0.5px; }

.membersBoxWrap > .membersBox > .privacyWrap > .checkWrap { width: 100%; float: left; text-align: center; padding: 20px 0; }
.membersBoxWrap > .membersBox > .privacyWrap > .checkWrap > input { display: none; }
.membersBoxWrap > .membersBox > .privacyWrap > .checkWrap > label > i { display: inline-block; width: 25px; height: 25px; border-radius: 5px; border: 1px solid #DDD; vertical-align: middle; line-height: 24px; color: #FFF; font-size: 12px; }
.membersBoxWrap > .membersBox > .privacyWrap > .checkWrap > label > span { display: inline-block; height: 25px; line-height: 25px; font-size: 15px; color: #333; font-weight: 500; vertical-align: middle; margin-left: 5px; }

.membersBoxWrap > .membersBox > .privacyWrap > .checkWrap > input:checked + label > i { color: #BBB; }

#membersJoinWrap > .membersBox { height: 630px; }