@charset "UTF-8";

:root {
	--default-font-color : #212126;
	
	--mob-menu-bg-color : #262626;

	--color-of-charcoal : #434343;
	--color-of-white : #fff;
	--color-of-tag : #86a0cb;
	--color-of-tag-hv-bg : #e3edfe;
	--color-of-theme : #437fe4;
	--color-of-light-theme : rgba( 67, 127, 228, 0.65 );
	--color-of-soft-theme : #e5edfb;
	--color-of-notice : #ff4040;
	--color-of-notice-bg : #fff6f6;
	--color-of-bg : #f6f8fc;
	--color-of-blue : #1457a8;
	--color-of-green : #80c342;
	--color-of-gray : #717173;
	--color-of-dark-gray : #5e5e60;
	--color-of-light-gray : #aaaaae;
	--color-of-super-light-gray : #fafafa;
	--color-of-disabled : #d8d8e0;
	--color-of-drop-down-bg : #f7f7fb;
	
	--color-of-cyan : #a5edff;
	--color-of-theme-border : #a1bff2;
	--color-of-hover-border : #999;
	--color-of-accent-border : #bebebe;
	--color-of-soft-border : #dedede;
	--color-of-default-border : #ccc;
	--color-of-input-border : #dee2e6;
	
	--font-weight-thin : 200;
	--font-weight-light : 300;
	--font-weight-normal : 400;
	--font-weight-bold : 500;
	--font-weight-bolder : 600;
	
	--disabled-bg-color : #f7f7fb;
}

html { width: 100%; height: 100%; font-family: var( --font-family-pretendard ), "Malgun Gothic"; font-size: 10px; background: var( --color-of-white ); color: var( --default-font-color ); scroll-behavior: smooth; }

body { position: relative; margin: 0 auto; }
body * { font-family: var( --font-family-pretendard ), "Malgun Gothic"; font-weight: var( --font-weight-normal ); }

div { background-color: var( --color-of-white ); }
div, section, p, span { margin: 0; padding: 0; box-sizing: border-box; text-align: center; }

button { padding: 0.4rem 2rem; border-radius: 0.4rem; border: 1px solid var( --color-of-default-border ); outline: none; cursor: pointer; }
button:disabled { cursor: not-allowed; }

input[type="text"], input[type="password"] { box-sizing: border-box; text-align: left; outline: none !important; letter-spacing: 0.6px !important; user-select: none !important; color: var( --color-of-gray ); }
input[type="text"]:disabled, input[type="password"]:disabled { cursor: not-allowed !important; color: var( --color-of-light-gray ); background-color: var( --disabled-bg-color ); }
input[type="text"]::placeholder, input[type="password"]::placeholder { color: var( --color-of-light-gray ); }
textarea { box-sizing: border-box; text-align: left; outline: none !important; letter-spacing: 0.6px !important; user-select: none !important; resize: none !important;  color: var( --color-of-gray ); }
textarea:disabled { background-color: var( --disabled-bg-color ); cursor: not-allowed !important; }
textarea::placeholder { color: var( --color-of-light-gray ); }

select { padding: 0.4rem 1.6rem 0.4rem 0.6rem; box-sizing: border-box; text-align: left; outline: none !important; letter-spacing: 0.6px !important; user-select: none !important; border-radius: 0.4rem; cursor: pointer; color: var( --color-of-gray );
	-webkit-appearance: none; background-color: var( --color-of-white ); }
select:disabled { cursor: not-allowed; color: var( --color-of-light-gray ); background-color: var( --disabled-bg-color ); }

table { width: 100%; box-sizing: border-box; border-spacing: 0; }
table tr th { padding: 0.8rem 1rem; font-weight: var( --font-weight-bold ); text-align: center; }
table tr td { padding: 0.8rem 1rem; font-weight: var( --font-weight-normal ); text-align: center; word-wrap: break-word; word-break: break-word; white-space: normal; }

a { outline: none; user-select: none; cursor: pointer; }
a:visited, a:active, a:link, a:hover { text-decoration: none; color: inherit; }


div.wrap-content { height: 100%; overflow: hidden; background-color: var( --color-of-bg ); }

/* header */
section.header-section { height: 120px; background-color: var( --color-of-bg ); }
section.header-section div.header { position: relative; display: flex; margin: 0 auto; width: 1600px; max-width: 1600px; min-width: 1600px; height: 100%; align-items: center; justify-content: center; background: none; }
section.header-section div.header img.logo { position: absolute; left: 0; top: 50%; transform: translateY( -50% ); cursor: pointer; }
section.header-section div.header div.menus { display: flex; width: fit-content; height: 100%; align-items: center; justify-content: center; background: none; }
section.header-section div.header div.menus a { padding: 0; width: 21rem; font-size: 1.8rem; }
section.header-section div.header div.menus a.on { color: var( --color-of-theme ); }
section.header-section div.header div.menus a > i { display: inline-block; width: 4px; height: 4px; vertical-align: top; border-radius: 4px; background-color: var( --color-of-notice ); }
section.header-section div.header div.user-if { position: absolute; right: calc( ( 100% - 1600px ) / 2 ); top: 50%; transform: translateY( -50% ); background: none; z-index: 1; }
section.header-section div.header div.user-if > div { position: relative; background: none; }
section.header-section div.header div.user-if > div > a { position: relative; padding: 0 1rem; font-size: 1.2rem; color: var( --color-of-gray ); }
section.header-section div.header div.user-if > div > a.on { color: var( --color-of-theme ); }
section.header-section div.header div.user-if > div > a > i { position: absolute; top: 0; right: 0; width: 4px; height: 4px; border-radius: 4px; background-color: var( --color-of-notice ); }
section.header-section div.header div.locale { position: absolute; right: calc( ( 100% - 1600px ) / 2 ); top: 20%; padding: 0 1rem; transform: translateY( -50% ); background: none; }
section.header-section div.header div.locale button { margin-left: 0.6rem; padding: 0.4rem 1.6rem; font-size: 1.2rem; background: rgba( 255, 255, 255, 0.25 ); color: var( --color-of-gray ); }
section.header-section div.header div.locale button.on { background: var( --color-of-theme ); border-color: var( --color-of-theme ); color: var( --color-of-white ); }

/* error page */
section.error-section h3 { margin: 0; font-size: 2.4rem; line-height: 3.6rem; font-weight: var( --font-weight-bold ); }
section.error-section p { margin-top: 3rem; }
section.error-section p button { margin: 0 1rem; padding: 1rem 2.4em; font-size: 1.4rem; font-weight: var( --font-weight-bolder ); border: none; border-radius: 0.8rem; color: var( --color-of-white ); background-color: var( --color-of-theme ); }
section.error-section p button.back { background-color: var( --color-of-gray ); }

/* contents-header-section */
section.contents-header-section { width: 100%; height: 250px; background-image: var( --mypage-bg-url ); background-size: cover; background-position: center; background-color: var( --color-of-bg ); }

/* contents-section */
section.contents-section { display: flex; margin: 0 auto; padding: 80px 0; width: 1600px; max-width: 1600px; min-width: 1600px; background-color: var( --color-of-bg ); }
section.contents-section div.lnb { position: relative; padding: 0; width: 250px; height: fit-content; background: none; }
section.contents-section div.lnb div.lnb-title { position: absolute; left: 0; top: 0; padding: 3rem; width: 250px; border-radius: 1.5rem; background-color: var( --color-of-theme ); color: var( --color-of-white );
	transform: translateY( calc( -100% - 3rem ) ); z-index: 1; }
section.contents-section div.lnb div.lnb-title p { text-align: left; font-size: 2.2rem; }
section.contents-section div.lnb div.lnb-title p.enm { margin-bottom: 1.3rem; font-size: 1.3rem; font-weight: lighter; }
section.contents-section div.lnb section { padding: 0.4rem 2rem 2rem 2rem; width: 100%; height: fit-content; border-radius: 1.5rem; border: 1px solid var( --color-of-soft-border ); background-color: var( --color-of-white ); }

section.contents-section div.lnb section.lnb div.menu { padding-bottom: 1rem; text-align: left; font-size: 1.8rem; border-bottom: 1px solid var( --color-of-soft-border ); }
section.contents-section div.lnb section.lnb div.menu:last-child { padding: 0; border: none; }
section.contents-section div.lnb section.lnb div.menu > a { display: inline-block; padding: 2rem 0 1rem 0; width: 100%; line-height: 2.2rem; }
section.contents-section div.lnb section.lnb div.menu a.on { color: var( --color-of-theme ); }
section.contents-section div.lnb section.lnb div.menu a:hover { color: var( --color-of-theme ); }
section.contents-section div.lnb section.lnb div.menu > ul { margin: 0; padding-left: 2rem; font-size: 1.6rem; list-style: none; color: var( --color-of-gray ); }
section.contents-section div.lnb section.lnb div.menu > ul > li > a { display: inline-block; padding: 0.8rem 0; width: 100%; }
section.contents-section div.lnb section.lnb div.menu > ul > li > ul { padding-left: 3rem; list-style: none; }

section.contents-section div.lnb section.lnb-sub { margin-top: 3rem; border-color: var( --color-of-theme ); }
section.contents-section div.lnb section.lnb-sub > div { padding: 2rem 0; text-align: left; font-size: 1.8rem; }
section.contents-section div.lnb section.lnb-sub > div.sub-title {  color: var( --color-of-theme ); border-bottom: 1px solid var( --color-of-soft-border ); }
section.contents-section div.lnb section.lnb-sub > div.sub-list { border-bottom: 1px solid var( --color-of-soft-border ); }
section.contents-section div.lnb section.lnb-sub > div.sub-list h3 { margin: 0; padding: 0; font-size: 1.8rem; }
section.contents-section div.lnb section.lnb-sub > div.sub-list h3 input[type="checkbox"] { margin: 0; width: 1.8rem; height: 1.8rem; vertical-align: middle; cursor: pointer; }
section.contents-section div.lnb section.lnb-sub > div.sub-list h3 input[type="checkbox"] + label { display: inline-block; padding: 0 0 0.2rem 0.4rem; max-width: 160px; text-indent: 0; vertical-align: middle;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
section.contents-section div.lnb section.lnb-sub > div.sub-list p.empty { padding: 3rem 0 1rem 0; text-align: center; font-size: 1.4rem; color: var( --color-of-light-gray ); }
section.contents-section div.lnb section.lnb-sub > div.sub-list p.list { margin-top: 1.6rem; padding-left: 0.8rem; text-align: left; }
section.contents-section div.lnb section.lnb-sub > div.sub-list p.list input[type="radio"] { margin: 0; width: 1.6rem; height: 1.6rem; vertical-align: middle; cursor: pointer; }
section.contents-section div.lnb section.lnb-sub > div.sub-list p.list input[type="radio"] + label { display: inline-block; padding: 0 0 0.2rem 0.4rem; max-width: 160px; text-indent: 0; font-size: 1.6rem; vertical-align: middle;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
section.contents-section div.lnb section.lnb-sub > div.sub-list p.list input[type="checkbox"] { margin: 0; width: 1.6rem; height: 1.6rem; vertical-align: middle; cursor: pointer; }
section.contents-section div.lnb section.lnb-sub > div.sub-list p.list input[type="checkbox"] + label { display: inline-block; padding: 0 0 0.2rem 0.4rem; max-width: 160px; text-indent: 0; font-size: 1.6rem; vertical-align: middle;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
section.contents-section div.lnb section.lnb-sub > div.sub-list p.list span.date { display: block; font-size: 1.2rem; font-weight: 300; text-align: right; color: var( --color-of-light-gray ); }
section.contents-section div.lnb section.lnb-sub > div.functions { text-indent: 0; text-align: center; }
section.contents-section div.lnb section.lnb-sub > div.functions button { margin: 0.5rem 0; padding: 1rem 4rem; width: 100%; font-size: 1.6rem; border: 1px; border-style: solid; border-radius: 0.8rem; }
section.contents-section div.lnb section.lnb-sub > div.functions button.loading { color: var( --color-of-theme ); background-color: var( --color-of-white ); border-color: var( --color-of-theme ); }
section.contents-section div.lnb section.lnb-sub > div.functions button.loading:disabled { color: var( --color-of-light-gray ); border-color: var( --color-of-soft-border ); }
section.contents-section div.lnb section.lnb-sub > div.functions button.save { color: var( --color-of-white ); background-color: var( --color-of-theme ); border-color: var( --color-of-theme ); }
section.contents-section div.lnb section.lnb-sub > div.functions button.delete { color: var( --color-of-white ); background-color: var( --color-of-light-gray ); border-color: var( --color-of-light-gray ); }
section.contents-section div.lnb section.lnb-sub > div.functions button.delete:disabled { background-color: var( --color-of-disabled ); border-color: var( --color-of-disabled ); }

section.contents-section div.contents { margin-left: 40px; padding: 3rem; width: 1310px; height: fit-content; border-radius: 1.5rem; border: 1px solid var( --color-of-soft-border ); }
section.contents-section div.contents div.steps { width: 100%; background: none; }


/* Auto-Complete */
div.auto-complete-box { position: absolute; padding: 1rem; max-height: 20rem; overflow-y: auto; font-size: 1.4rem; border: 1px solid var( --color-of-soft-border); border-radius: 0.6rem; color: var( --color-of-light-gray ); z-index: 99; }
div.auto-complete-box p { padding: 0.8rem 0; text-indent: 1rem; text-align: left; cursor: pointer; }
div.auto-complete-box p:hover { color: var( --color-of-gray ); background-color: var( --color-of-bg ); }


/* dialog-content */
div.dialog { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(72,72,72,0.65); z-index: 999; }
div.dialog > div.content { position: absolute; left: 50%; top: 50%; padding: 2rem; min-width: 32rem; max-width: 94%; height: auto; transform: translate( -50%, -50% );
	border-radius: 2rem; }
div.dialog > div.content > div.head { position: relative; margin-top: 1rem; padding: 0.5rem 0; font-size: 2.2rem; }
div.dialog > div.content > div.head button.dim-close { position: absolute; right: 0; top: 0; padding: 0.2rem; width: 2rem; height: 2rem; line-height: 1.6rem; background: none; border: none; font-size: 1.4rem; font-weight: 700; }
div.dialog > div.content > div.body { padding: 5rem 0; line-height: 20px; font-size: 1.4rem; }
div.dialog > div.content > div.footer { display: flex; margin-top: 2rem; justify-content: space-evenly; }
div.dialog > div.content > div.footer button { padding: 1.6rem 2.4em; width: 45%; font-size: 1.4rem; border: none; border-radius: 0.8rem; color: var( --color-of-white ); }
div.dialog > div.content > div.footer button:not(:first-child) { margin-left: 1.2rem; }
div.dialog > div.content > div.footer button.confirm { background-color: var( --color-of-theme ); }
div.dialog > div.content > div.footer button.cancel { background-color: var( --color-of-light-gray ); }
div.dialog > div.content > div.footer button.delete { background-color: var( --color-of-notice ); }


/* dialog login-content */
div.dialog > div.content#login-content { padding: 3rem 4rem 4rem 4rem; width: 50rem; }
div.dialog > div.content#login-content div.head { position: relative; padding: 0; font-size: 2.6rem; }
div.dialog > div.content#login-content div.head strong { font-weight: var( --font-weight-bold ); }
div.dialog > div.content#login-content div.head button.dim-close{ position: absolute; top: 50%; right: 0; width: 19px; height: 19px; transform: translateY( -50% );
	background-image: var( --thin-close-url ); background-repeat: no-repeat; background-size: contain; }
div.dialog > div.content#login-content div.input { margin-top: 3.5rem; }
div.dialog > div.content#login-content div.input p { display: flex; margin-bottom: 1.5rem; min-height: 2rem; align-items: center; }
div.dialog > div.content#login-content div.input p.rel { position: relative; }
div.dialog > div.content#login-content div.input p > input[type="text"],
div.dialog > div.content#login-content div.input p > input[type="password"] { padding: 1.4rem; width: 100%; border: 1px solid var( --color-of-default-border ); border-radius: 0.8rem; }
div.dialog > div.content#login-content div.input p > input[type="checkbox"] { width: 1.8rem; height: 1.8rem; }
div.dialog > div.content#login-content div.input p > input[type="checkbox"] + label { margin-left: 0.6rem; font-size: 1.6rem; cursor: pointer; }
div.dialog > div.content#login-content div.input p > button.login { margin-top: 1rem; padding: 1.4rem; width: 100%; font-size: 1.8rem; font-weight: var( --font-weight-bold );
	border: none; border-radius: 0.8rem; background-color: var( --color-of-theme ); color: var( --color-of-white ); }
div.dialog > div.content#login-content div.input p > button.link-btn { position: absolute; top: 0; padding: 0; background: none; border: none; color: var( --color-of-gray ); }
div.dialog > div.content#login-content div.input p > button.link-btn#joinBtn { left: 0; }
div.dialog > div.content#login-content div.input p > button.link-btn#findBtn { right: 0; }
div.dialog > div.content#login-content > p.sns-login { display: flex; margin-top: 1.6rem; padding: 1rem 0; align-items: center; justify-content: center; border: 1px solid var( --color-of-default-border ); border-radius: 0.8rem; cursor: pointer; }
div.dialog > div.content#login-content > p.sns-login i { display: inline-block; width: 36px; height: 36px;  background-repeat: no-repeat; background-size: contain; }
div.dialog > div.content#login-content > p.sns-login i.google { background-image: var( --google-logo-url ); }
div.dialog > div.content#login-content > p.sns-login i.kakao { background-image: var( --kakao-logo-url ); }
div.dialog > div.content#login-content > p.sns-login i.naver { background-image: var( --naver-logo-url ); }
div.dialog > div.content#login-content > p.sns-login i.apple { background-image: var( --apple-logo-url ); }
div.dialog > div.content#login-content > p.sns-login span { font-size: 1.6rem; margin-left: 2.5rem; color: var( --color-of-gray ); }

/* dialog sns-join-content */
div.dialog > div.content#sns-join-content { padding: 3rem 4rem 4rem 4rem; width: 50rem; }
div.dialog > div.content#sns-join-content div.head { position: relative; padding: 0; font-size: 2.6rem; }
div.dialog > div.content#sns-join-content div.head strong { font-weight: var( --font-weight-bold ); }
div.dialog > div.content#sns-join-content div.head button.dim-close{ position: absolute; top: 50%; right: 0; width: 19px; height: 19px; transform: translateY( -50% );
	background-image: var( --thin-close-url ); background-repeat: no-repeat; background-size: contain; }
div.dialog > div.content#sns-join-content div.input { margin-top: 3.5rem; }
div.dialog > div.content#sns-join-content div.terms { margin: 3rem 0 3.2rem 0; padding: 0; font-size: 2.6rem; }
div.dialog > div.content#sns-join-content div.terms > strong { font-weight: var( --font-weight-bold ); }
div.dialog > div.content#sns-join-content div.terms p { display: flex; margin: 3.5rem 0 2rem 0; align-items: center; }
div.dialog > div.content#sns-join-content div.terms p > input[type="checkbox"] { width: 1.8rem; height: 1.8rem; }
div.dialog > div.content#sns-join-content div.terms p > input[type="checkbox"] + label { margin-left: 0.6rem; font-size: 1.6rem; cursor: pointer; }
div.dialog > div.content#sns-join-content div.terms ul { margin: 1rem 0 0; padding: 1rem; list-style: none; background-color: #f7f7fb; }
div.dialog > div.content#sns-join-content div.terms ul li { display: flex; padding: 0.5rem; font-size: 1.6rem; text-align: left; align-items: center; }
div.dialog > div.content#sns-join-content div.terms ul li > input[type="checkbox"] { width: 1.7rem; min-width: 1.7rem; height: 1.7rem; min-height: 1.7rem; }
div.dialog > div.content#sns-join-content div.terms ul li > input[type="checkbox"] + label { margin-left: 0.6rem; font-size: 1.6rem; cursor: pointer; }
div.dialog > div.content#sns-join-content div.terms ul li > input[type="checkbox"] + label strong { font-weight: var( --font-weight-normal ); color: var( --color-of-notice ); }
div.dialog > div.content#sns-join-content div.terms ul li > input[type="checkbox"] + label + a { margin-left: 1rem; font-size: 1.4rem; color: var( --color-of-theme ); }
div.dialog > div.content#sns-join-content div.input > p.sns-join { display: flex; margin-top: 1.6rem; padding: 1rem 0; align-items: center; justify-content: center; border: 1px solid var( --color-of-default-border ); border-radius: 0.8rem; cursor: pointer; }
div.dialog > div.content#sns-join-content div.input > p.sns-join:not(:first-child) { margin-top: 1.6rem; }
div.dialog > div.content#sns-join-content div.input > p.sns-join.email { padding: 1.6rem 0; border-color: var( --color-of-theme ); }
div.dialog > div.content#sns-join-content div.input > p.sns-join i { display: inline-block; width: 36px; height: 36px; background-repeat: no-repeat; background-size: contain; }
div.dialog > div.content#sns-join-content div.input > p.sns-join i.google { background-image: var( --google-logo-url ); }
div.dialog > div.content#sns-join-content div.input > p.sns-join i.kakao { background-image: var( --kakao-logo-url ); }
div.dialog > div.content#sns-join-content div.input > p.sns-join i.naver { background-image: var( --naver-logo-url ); }
div.dialog > div.content#sns-join-content div.input > p.sns-join i.apple { background-image: var( --apple-logo-url ); }
div.dialog > div.content#sns-join-content div.input > p.sns-join i.email { width: 34px; height: 24px; background-image: var( --email-icon-url ); }
div.dialog > div.content#sns-join-content div.input > p.sns-join span { font-size: 1.6rem; margin-left: 2.5rem; color: var( --color-of-gray ); }
div.dialog > div.content#sns-join-content div.input > p.sns-join.email span { color: var( --color-of-theme ); }
div.dialog > div.content#sns-join-content div.sub { position: relative; display: flex; margin-top: 3.2rem; height: 5.5rem; border-top: 1px solid var( --color-of-default-border ); }
div.dialog > div.content#sns-join-content div.sub span { position: absolute; top: 50%; left: 0; transform: translateY( -50% ); font-size: 1.6rem; color: var( --color-of-gray ); }
div.dialog > div.content#sns-join-content div.sub button { position: absolute; top: 50%; right: 0; padding: 0 1.6rem 0 0; transform: translateY( -50% ); font-size: 1.6rem; background: none; border: none; color: var( --color-of-theme );
	background-image: var( --right-arrow-theme-url ); background-repeat: no-repeat; background-position: center right 0.2rem; }

/* dialog email-join-content */
div.dialog > div.content#email-join-content { padding: 3rem 4rem 4rem 4rem; width: 50rem; }
div.dialog > div.content#email-join-content div.head { position: relative; padding: 0; font-size: 2.6rem; }
div.dialog > div.content#email-join-content div.head strong { font-weight: var( --font-weight-bold ); }
div.dialog > div.content#email-join-content div.head button.dim-close{ position: absolute; top: 50%; right: 0; width: 19px; height: 19px; transform: translateY( -50% );
	background-image: var( --thin-close-url ); background-repeat: no-repeat; background-size: contain; }
div.dialog > div.content#email-join-content div.input { margin-top: 3.5rem; }
div.dialog > div.content#email-join-content div.input p { display: flex; margin-bottom: 1.5rem; min-height: 2rem; align-items: center; }
div.dialog > div.content#email-join-content div.input p.descriptions { display: block; padding: 0 0 0 0.4rem; line-height: 1.8rem; font-size: 1.2rem; text-align: left; }
div.dialog > div.content#email-join-content div.input p.hide { display: none; }
div.dialog > div.content#email-join-content div.input p:first-child { margin-bottom: 1rem; }
div.dialog > div.content#email-join-content div.input p > strong { color: var( --color-of-notice ); }
div.dialog > div.content#email-join-content div.input p > button { padding: 1.4rem; width: 100%; font-size: 1.4rem; border: none; border-radius: 0.8rem; background-color: var( --color-of-theme ); color: var( --color-of-white ); }
div.dialog > div.content#email-join-content div.input p > input[type="text"],
div.dialog > div.content#email-join-content div.input p > input[type="password"] { padding: 1.4rem; width: 100%; border: 1px solid var( --color-of-default-border ); border-radius: 0.8rem; }
div.dialog > div.content#email-join-content div.input p > select { padding: 1.4rem; width: 100%; border: 1px solid var( --color-of-default-border ); border-radius: 0.8rem; }
div.dialog > div.content#email-join-content div.terms { margin: 3rem 0 3.2rem 0; padding: 0; font-size: 2.6rem; }
div.dialog > div.content#email-join-content div.terms > strong { font-weight: var( --font-weight-bold ); }
div.dialog > div.content#email-join-content div.terms p { display: flex; margin: 3.5rem 0 2rem 0; align-items: center; }
div.dialog > div.content#email-join-content div.terms p > input[type="checkbox"] { width: 1.8rem; height: 1.8rem; }
div.dialog > div.content#email-join-content div.terms p > input[type="checkbox"] + label { margin-left: 0.6rem; font-size: 1.6rem; cursor: pointer; }
div.dialog > div.content#email-join-content div.terms ul { margin: 0; padding: 1rem; list-style: none; background-color: #f7f7fb; }
div.dialog > div.content#email-join-content div.terms ul li { display: flex; padding: 0.5rem; font-size: 1.6rem; text-align: left; align-items: center; }
div.dialog > div.content#email-join-content div.terms ul li > input[type="checkbox"] { width: 1.7rem; min-width: 1.7rem; height: 1.7rem; min-height: 1.7rem }
div.dialog > div.content#email-join-content div.terms ul li > input[type="checkbox"] + label { margin-left: 0.6rem; font-size: 1.6rem; cursor: pointer; }
div.dialog > div.content#email-join-content div.terms ul li > input[type="checkbox"] + label strong { font-weight: var( --font-weight-normal ); color: var( --color-of-notice ); }
div.dialog > div.content#email-join-content > p { display: flex; padding: 1rem 0; align-items: center; justify-content: center; border: 1px solid var( --color-of-default-border ); border-radius: 0.8rem; cursor: pointer; }
div.dialog > div.content#email-join-content > p.email { margin-top: 2.2rem; padding: 1.6rem 0; border-color: var( --color-of-theme ); }
div.dialog > div.content#email-join-content > p i { display: inline-block; width: 36px; height: 36px;  background-repeat: no-repeat; background-size: contain; }
div.dialog > div.content#email-join-content > p i.email { width: 34px; height: 24px; background-image: var( --email-icon-url ); }
div.dialog > div.content#email-join-content > p span { font-size: 1.6rem; margin-left: 2.5rem; color: var( --color-of-gray ); }
div.dialog > div.content#email-join-content > p.email span { color: var( --color-of-theme ); }

/* dialog find-id-pw-content */
div.dialog > div.content#find-id-pw-content { padding: 3rem 4rem 4rem 4rem; width: 50rem; }
div.dialog > div.content#find-id-pw-content div.head { position: relative; padding: 0; font-size: 2.6rem; }
div.dialog > div.content#find-id-pw-content div.head strong { font-weight: var( --font-weight-bold ); }
div.dialog > div.content#find-id-pw-content div.head button.dim-close{ position: absolute; top: 50%; right: 0; width: 19px; height: 19px; transform: translateY( -50% );
	background-image: var( --thin-close-url ); background-repeat: no-repeat; background-size: contain; }
div.dialog > div.content#find-id-pw-content div.tabs { display: flex; margin-top: 3rem; border-bottom: 1px solid var( --color-of-soft-border ); }
div.dialog > div.content#find-id-pw-content div.tabs div.tab { display: flex; flex-direction: column; padding: 1rem 2.8rem; font-size: 1.8rem; font-weight: bold; border-bottom: 3px solid var( --color-of-white ); cursor: pointer; }
div.dialog > div.content#find-id-pw-content div.tabs div.tab:hover { border-color: var( --color-of-theme ); }
div.dialog > div.content#find-id-pw-content div.tabs div.tab.on { color: var( --color-of-theme ); border-color: var( --color-of-theme ); }
div.dialog > div.content#find-id-pw-content div.tab-content { padding: 2rem; display: none; }
div.dialog > div.content#find-id-pw-content div.tab-content.active { display: block; }
div.dialog > div.content#find-id-pw-content div.tab-content { margin-top: 1.5rem; }
div.dialog > div.content#find-id-pw-content div.tab-content p { display: flex; margin-bottom: 1.5rem; min-height: 2rem; align-items: center; }
div.dialog > div.content#find-id-pw-content div.tab-content p > input[type="text"],
div.dialog > div.content#find-id-pw-content div.tab-content p > select { padding: 1.4rem; width: 100%; border: 1px solid var( --color-of-default-border ); border-radius: 0.8rem; }
div.dialog > div.content#find-id-pw-content div.sub { padding: 0 2rem; }
div.dialog > div.content#find-id-pw-content div.sub button { margin-top: 1rem; padding: 1.4rem; width: 100%; font-size: 1.8rem; font-weight: var( --font-weight-bold );
	border: none; border-radius: 0.8rem; background-color: var( --color-of-theme ); color: var( --color-of-white ); }

/* dialog prsnl-info-agree */
div.dialog > div.content#prsnl-info-agree { padding: 3rem 4rem 4rem 4rem; width: 75rem; }
div.dialog > div.content#prsnl-info-agree div.head { position: relative; padding: 0; font-size: 2.6rem; }
div.dialog > div.content#prsnl-info-agree div.head strong { font-weight: var( --font-weight-bold ); }
div.dialog > div.content#prsnl-info-agree div.head button.dim-close{ position: absolute; top: 50%; right: 0; width: 19px; height: 19px; transform: translateY( -50% );
	background-image: var( --thin-close-url ); background-repeat: no-repeat; background-size: contain; }
div.dialog > div.content#prsnl-info-agree div.prsnl-info{ padding-top: 4rem; }
div.dialog > div.content#prsnl-info-agree div.prsnl-info table{ border: 1px solid var( --color-of-default-border ); }
div.dialog > div.content#prsnl-info-agree div.prsnl-info table th{ border: 1px solid var( --color-of-default-border ); }
div.dialog > div.content#prsnl-info-agree div.prsnl-info table td{ border: 1px solid var( --color-of-default-border ); }
div.dialog > div.content#prsnl-info-agree div.prsnl-info div.desc{ padding-top: 1rem; text-align: left; }



/* progress */
div.dialog > div.progress { position: absolute; left: 50%; top: 50%; padding: 2rem; width: max-content; height: auto; transform: translate( -50%, -50% ); background: none; color: var( --color-of-white ); }
div.dialog > div.progress > div { background: none; }
div.dialog > div.progress > div.loading { width: 4.5rem; height: 4.5rem; background-image: var( --loading-url ); background-repeat: no-repeat; background-size: contain; }
div.dialog > div.progress > div.message { margin-top: 2rem; font-size: 1.1rem; }




/* jquery-scrollbar.js */
.scroll-wrapper { overflow: hidden !important; padding: 0; position: relative; }
.scroll-wrapper > .scroll-content { border: none !important; box-sizing: content-box !important; height: auto; left: 0;
			margin: 0; max-height: none; max-width: none !important; overflow: scroll !important; padding: 0; position: relative !important; top: 0; width: auto !important; }
.scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; }
.scroll-element { display: none; }
.scroll-element, .scroll-element div { box-sizing: content-box; }
.scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible { display: block; }
.scroll-element .scroll-bar, .scroll-element .scroll-arrow { cursor: default; }
.scroll-textarea { border: 1px solid var( --color-of-default-border ); border-top-color: #999999; }
.scroll-textarea > .scroll-content { overflow: hidden !important; }
.scroll-textarea > .scroll-content > textarea { border: none !important; box-sizing: border-box; height: 100% !important; margin: 0;
			max-height: none !important; max-width: none !important; overflow: scroll !important; outline: none; padding: 2px; position: relative !important; top: 0; width: 100% !important; }
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { height: 0; width: 0; }
.scrollbar-macosx > .scroll-element, .scrollbar-macosx > .scroll-element div { background: none; border: none; margin: 0; padding: 0; position: absolute; z-index: 10; }
.scrollbar-macosx > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; }
.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; }
.scrollbar-macosx > .scroll-element .scroll-bar { background-color: #9E9E9E; display: block; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);
			opacity: 0; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear;
			-o-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; transition: opacity 0.2s linear; }
.scrollbar-macosx:hover > .scroll-element .scroll-bar, .scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
			filter: alpha(opacity=70); opacity: 0.7; }
.scrollbar-macosx > .scroll-element.scroll-x { bottom: 0px; height: 0px; left: 0; min-width: 100%; overflow: visible; width: 100%; }
.scrollbar-macosx > .scroll-element.scroll-y { height: 100%; min-height: 100%; right: 0px; top: 0; width: 0px; }

.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; }
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; }
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }

/* important classes */
.hide { display: none !important; }
.hidden { visibility: hidden !important; }

.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }

.full_w { width: 100% !important; }

.w100p { width: 100% !important; }
.w90p { width: 90% !important; }
.w80p { width: 80% !important; }
.w70p { width: 70% !important; }
.w60p { width: 60% !important; }
.w50p { width: 50% !important; }
.w40p { width: 40% !important; }
.w30p { width: 30% !important; }
.w20p { width: 20% !important; }
.w10p { width: 10% !important; }
.w0p { width: 0 !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1rm { margin-top: 1rem !important; }
.mt-2rm { margin-top: 2rem !important; }
.mt-3rm { margin-top: 3rem !important; }
.mt-4rm { margin-top: 4rem !important; }
.mt-6rm { margin-top: 6rem !important; }
.mt-8rm { margin-top: 8rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.bd-none { border: none !important; }

.nowrap { white-space: nowrap !important; }