@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/static/complete/WantedSans.min.css");

/*----------------------------------------------------------------------------------------------------------------------
[ STORY OF ESIM ]

A. Default
B. Layout
C. Main
D. Sub
E. Common
F. Components
G. Media Query
----------------------------------------------------------------------------------------------------------------------
icon settings
----------------------------------------------------------------------------------------------------------------------*/

:root {
	/* color palette */
    --color-ng99: #F7F7F7;
	--color-ng95: #DCDCDC;
	--color-ng90: #C4C4C4;
	--color-ng80: #B0B0B0;
	--color-ng70: #9B9B9B;
	--color-ng60: #8A8A8A;
	--color-ng50: #737373;
	--color-ng40: #5C5C5C;
	--color-ng30: #474747;
	--color-ng22: #303030;
	--color-ng20: #2A2A2A;
	--color-ng15: #1C1C1C;
	--color-ng10: #171717;
	--color-ng5: #0F0F0F;
    
    --color-cg99: #F7F7F8;
    --color-cg98: #F4F4F5;
    --color-cg97: #EAEBEC;
    --color-cg96: #E1E2E4;
    --color-cg95: #DBDCDF;
    --color-cg90: #C2C4C8;
    --color-cg80: #AEB0B6;
    --color-cg70: #989BA2;
    --color-cg60: #878A93;
    --color-cg50: #70737C;
    --color-cg40: #5A5C63;
    --color-cg30: #47484C;
    --color-cg25: #37383C;
    --color-cg23: #333438;
    --color-cg22: #2E2F33;
    --color-cg20: #292A2D;
    --color-cg17: #212225;
    --color-cg15: #1B1C1E;
    --color-cg10: #171719;
    --color-cg7: #141415;
    --color-cg5: #0F0F10;
    --color-cg22-op88: rgba(46, 47, 51, .88);
    --color-cg25-op61: rgba(55, 56, 60, .61);
    --color-cg25-op28: rgba(55, 56, 60, .28);
    --color-cg25-op16: rgba(55, 56, 60, .16);
    --color-cg50-op22: rgba(122, 115, 124, .22);
    --color-cg50-op16: rgba(122, 115, 124, .16);
    --color-cg50-op8: rgba(122, 115, 124, .08);
	--color-cg50-op5: rgba(122, 115, 124, .05);
	--color-cg10-op52: rgba(23, 23, 25, .52);  
	
	/* color semantic */
    --color-primary: #248EFF; /* main color */
    --color-primary-strong: #1B76F5;
    --color-primary-heavy: #145FE1;
    --color-primary-op5: rgba(36, 142, 255, .05);
    --color-primary-op10: rgba(36, 142, 255, .1);  
    
    --label-normal: var(--color-ng10);
    --label-strong: #000;
    --label-netural: var(--color-cg22-op88);
    --label-alternative: var(--color-cg25-op61);
    --label-assistive: var(--color-cg25-op28);
    --label-disabled: var(--color-cg25-op16);
    
    --line-normal: var(--color-cg50-op22);
    --line-netural: var(--color-cg50-op16);
    --line-alternative: var(--color-cg50-op8);
    /* --line-normal: var(--color-cg96);
    --line-netural: var(--color-cg97);
    --line-alternative: var(--color-cg98); */
    
    --fill-normal: var(--color-cg50-op5);
    --fill-strong: var(--color-cg50-op16);
    --fill-alternative: var(--color-cg50-op5);
    
    /* color filter */
    --filter-primary: invert(40%) sepia(85%) saturate(1782%) hue-rotate(196deg) brightness(103%) contrast(103%);
    --filter-ng95: invert(98%) sepia(3%) saturate(497%) hue-rotate(298deg) brightness(107%) contrast(73%);
    --filter-ng90: invert(89%) sepia(0%) saturate(1095%) hue-rotate(138deg) brightness(92%) contrast(84%);;
    --filter-ng60: invert(63%) sepia(0%) saturate(126%) hue-rotate(138deg) brightness(87%) contrast(80%);
    --filter-ng30: invert(25%) sepia(0%) saturate(161%) hue-rotate(162deg) brightness(94%) contrast(83%);
    --filter-ng10: invert(7%) sepia(21%) saturate(0%) hue-rotate(238deg) brightness(105%) contrast(97%);
    --filter-white: invert(94%) sepia(100%) saturate(0%) hue-rotate(333deg) brightness(103%) contrast(101%);
    
    --n-primary-shadow: rgba(36, 142, 255, 0.3);
    
    /* font size */
    --font-size-title1: 24px;
    --font-size-heading1: 22px;
    --font-size-heading2: 20px;
    --font-size-headline1: 18px;
    --font-size-headline2: 17px;
    --font-size-body1: 16px;
    --font-size-body2: 15px;
    --font-size-label1: 14px;
    --font-size-label2: 13px;
    --font-size-caption1: 12px;
    --font-size-caption2: 11px;
    
    /* font weight */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --font-weight-exbold: 700;
}


/***********************************************************************************************************************
  A. Default
***********************************************************************************************************************/
* {
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	font-family: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

html {
	min-height: 100vh;
	font-size: 62.5%;
}
/* html > * {
	line-height: 150%;
} */

body {
	position: relative;
	height: 100%;
	min-height: 100%;
}
body > * {
	line-height: normal;
	vertical-align: middle;
}

a:focuse,
button:focus,
[type='button']:focus,
[type='submit']:focus {
  outline-width: 0;
}

a, a:-webkit-any-link {
	text-decoration: unset;
}

button {
	padding: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
}
button:focus-visible {outline: 0;}

b, strong {font-weight: var(--font-weight-bold);}

/* ============================
	-- input custom 
============================ */
input[type=email], input[type=file], input[type=number], input[type=password],
input[type=reset], input[type=search], input[type=submit], input[type=tel],
input[type=text], select {
	width: 100%;
	height: 4.8rem;
	padding: 0 1.2rem;
	border: 1px solid var(--line-normal);
	border-radius: .8rem;
	font-size: var(--font-size-body1);
	color: var(--label-normal);
}

/* status */
input:focus, textarea:focus, select:focus {border-color: var(--color-primary); box-shadow: none; outline: 0;}
input:read-only, input:disabled {
	background-color: var(--fill-normal);
	color: var(--label-alternative);
}

/* placeholder */
input:not([type="checkbox"], [type="radio"])::placeholder, textarea::placeholder {color: var(--label-assistive);}

/* autofill */
input:-webkit-autofill:focus, input:-webkit-autofill:active {box-shadow: none;}
input:-webkit-autofill, input:-webkit-autofill:hover {transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; background-color: #fff !important; box-shadow: inset 0 0 0 1000px white; -webkit-box-shadow: 0 0 0 1000px white inset;}
input:-webkit-autofill:focus, input:-webkit-autofill:active {transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; background-color: #fff !important; box-shadow: inset 0 0 0 1000px white, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); -webkit-box-shadow: 0 0 0 1000px white inset, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);}
input:-internal-autofill-selected {background-color: #fff}
input:-webkit-autofill:read-only {background-color: #EAEAEA !important; box-shadow: inset 0 0 0 1000px #eaeaea; -webkit-box-shadow: 0 0 0 1000px #eaeaea inset; pointer-events: none;}

input[type="checkbox"], input[type="radio"] {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	appearance: none;
	display: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	overflow: hidden;
	border: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	display: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	margin: 0;
}

/* ============================
	-- select custom 
============================ */
select::-ms-expand, select::expand { 
	display: none;
}
select {
	position: relative;
	background: url(../images/icon/select_icon.svg) calc(100% - 12px) center/16px no-repeat;
	
	-o-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* status */
select:disabled {
	color: var(--label-alternative);
	background: url(../images/icon/select_icon_disabled.svg) calc(100% - 12px) center/16px var(--fill-normal) no-repeat;
}


/* ============================
	-- checkbox, radio custom 
============================ */
.form_check input[type="checkbox"] + label,
.form_check input[type="radio"] + label {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-size: var(--font-size-body1);
	color: var(--label-normal);
}
.form_check.form_sm input[type="checkbox"] + label,
.form_check.form_sm input[type="radio"] + label {
	font-size: var(--font-size-body2);
}

.form_check input[type="checkbox"] + label > .form_checkbox {
    position: relative;
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    margin: .3rem;
    border: 1px solid var(--line-normal);
    border-radius: .3rem;
    background-color: #fff;
}
.form_check input[type="radio"] + label > .form_checkbox {
    position: relative;
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    margin: .3rem;
    border: 1px solid var(--line-normal);
    border-radius: 999px;
    background-color: #fff;
}
.form_check.form_sm input[type="checkbox"] + label > .form_checkbox,
.form_check.form_sm input[type="radio"] + label > .form_checkbox {
	width: 1.6rem;
	height: 1.6rem;
}

/* status */
.form_check input[type="checkbox"]:checked + label > .form_checkbox,
.form_check input[type="radio"]:checked + label > .form_checkbox {background-color: var(--color-primary);}
.form_check input[type="checkbox"]:checked + label > .form_checkbox::before {
	content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/icon/check.svg) no-repeat center/100%;
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    filter: var(--filter-white);
}
.form_check input[type="radio"]:checked + label > .form_checkbox::before {
	content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    display: block;
    width: .8rem;
    height: .8rem;
    border-radius: 999px;
}
.form_check.form_sm input[type="checkbox"] + label > .form_checkbox::before {
	width: 1.2rem;
	height: 1.2rem;
}
.form_check.form_sm input[type="radio"] + label > .form_checkbox::before {
	width: .6rem;
	height: .6rem;
}

.form_check input[type="checkbox"]:disabled + label > .form_checkbox,
.form_check input[type="radio"]:disabled + label > .form_checkbox {background-color: var(--fill-normal);}
.form_check input[type="checkbox"]:checked:disabled + label > .form_checkbox,
.form_check input[type="radio"]:checked:disabled + label > .form_checkbox {
	background-color: var(--color-primary);
    opacity: .43;
}


/* ============================
	-- file custom 
============================ */
 input[type="file"] {
 	display: none;
 }
.form_file_inp {
	width: 100%;
	height: 4.8rem;
	line-height: 4.8rem;
	padding: 0 1.2rem;
	border: 1px solid var(--line-normal);
	border-radius: .8rem;
	font-size: var(--font-size-body1);
	background-color: var(--fill-normal);
	color: var(--label-alternative);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}



/***********************************************************************************************************************
  B. Layout
***********************************************************************************************************************/
#wrap {
	position: relative;
	height: 100%;
	background-color: #f8fafc;
}

#wrap > .frame {
	position: relative;
	width: 100%;
	max-width: 430px;
	height: 100%;
	min-height: 100vh;
	margin: 0 auto;
	border-left: 1px solid #e2e8f0;
	border-right: 1px solid #e2e8f0;
	background-color: #fff;
}
.inner {padding: 0 2rem;}

.content_wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.content_wrap > .content {padding: 3.2rem 0 8rem 0;}
.content_wrap > .sub_header + .content {padding: 3.2rem 0 calc(8.8rem + 3.2rem) 0;}

/* -- header */
#header {
	position: sticky;
	top: 0;
	left: 0;
	height: 5.6rem;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 50;
}
#header > .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	color: var(--label-strong);
}
#header .logo > img {
	width: auto;
	height: 2rem;
}
#header .left, #header .right {
	display: flex;
	align-items: center;
	gap: .8rem;
	min-width: 4rem;
}
#header .right {justify-content: end;}
#header .header_icon {
	width: 2.8rem;
	height: 2.8rem;
}
#header .header_icon > .ico {
	width: 100%;
	height: 100%;
	filter: var(--filter-ng10);
}
#header .btn_text.btn_sm {height: 2.5rem;}

.search_header {
	height: auto !important;
	padding-top: 1.2rem;
}


/* -- footer */
#footer {
	position: relative;
	margin-top: auto;
	color: #fff;
	background-color: #414656;
}
#footer > .inner {}

.footer_head {margin-top: 3.2rem;}
.footer_head .policy_list {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	font-size: var(--font-size-body1);
	font-weight: var(--font-weight-bold);
}
.footer_head .policy_list a {color: #fff;}

.footer_body {
	margin-top: 2.4rem;
	margin-bottom: 4rem;
}
.footer_body .footer_company {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	font-size: var(--font-size-label2);
	color: #A5ABBD;
}
.footer_body .footer_company li {
	line-height: 157.1%;
	letter-spacing: 0.203px;
}
.footer_body .footer_company .copyright {margin-top: 1.6rem;}


/* -- mobile gnb */
.mobile_gnb {
	display: none;
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    z-index: 50;
}
.mobile_ghb_wrap {
	width: 100%;
	height: 100%;
}
.mobile_gnb_header {
	position: sticky;
    top: 0;
    left: 0;
    height: 5.6rem;
    background-color: #fff;
    z-index: 30;
}
.mobile_gnb_header > .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}
.mobile_gnb_body {margin-top: 1.6rem;}
.mobile_gnb_body .gnb_group {margin-top: 1rem;}
.mobile_gnb_body .gnb_group > .title {
	margin-bottom: .8rem;
	font-size: var(--font-size-label1);
	font-weight: var(--font-weight-medium);
	color: var(--label-alternative);
}
.mobile_gnb_body .gnb > li {padding: 1rem 0;}
.mobile_gnb_body .gnb > li > a {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--font-size-headline1);
	font-weight: var(--font-weight-medium);
	color: var(--label-strong);
	line-height: 144.5%;
	transition: color .1s ease;
}
.mobile_gnb_body .gnb > li > a:hover {
	color: var(--color-primary-heavy);
}
.mobile_gnb_body .gnb > li > a > .ico {
	width: 1.6rem;
	height: 1.6rem;
	filter: var(--filter-ng60);
}
.mobile_gnb_body .divider {margin: 1.6rem 0;}

/* ============================
	-- sticky 
============================ */
.sticky_top {
	position: sticky;
    position: -webkit-sticky;
    top: 5.6rem;
    left: 0;
    background-color: rgba(255, 255, 255, 0.88);
    z-index: 30;
    
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sticky_bottom {
	position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    left: 0;
    padding-bottom: 2rem;
    background-color: #fff;
    z-index: 30;
}

/* ============================
	-- fixed 
============================ */
.fixed_bottom {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100%;
	max-width: calc(430px - 2px);
	padding-bottom: 2rem;
	background-color: #fff;
	z-index: 30;
}



/***********************************************************************************************************************
  C. Main
***********************************************************************************************************************/
/* ============================
	-- main visual 
============================ */
.main_visual {
	position: relative;	
}

.main_visual > .inner {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 3.6rem 2rem 4rem 2rem;
	text-align: center;
}

.main_visual h1 {
	color: #fff;
	line-height: 150%;
}

.main_visual .search_box {
	border: 1px solid var(--color-primary);
	background-color: #fff;
	box-shadow: 0px 0px 12px 0px var(--color-primary);
}
.main_visual .search_box > .form_search_btn > .ico {
	filter: var(--filter-primary);
}


.main_visual .main_visual_bg img {
	width: 100%;
	height: auto;
}


/* ============================
	-- main product
============================ */
.main_product {
	padding: 4rem 0;
	background-color: #F8F8FA;
}

/* layout */
.main_product .tab {padding: 1.2rem 0;}
.main_product .card_list {padding-top: 1.2rem;}
.main_product .card_list li {width: 100%;}
.main_product .btn_wrap {display: flex; justify-content: center; margin-top: 3.2rem;}
.main_product .btn_wrap > .btn {width: fit-content;}

/* product card */
.product_card .card_img {
	width: 4rem;
	height: 4rem;
	border: 1px solid var(--line-alternative);
	border-radius: 999px;
}
.product_card .card_img > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.product_card .card_content {
	margin-left: .8rem;
}

.product_card .card_price {
	font-size: var(--font-size-heading2);
	font-weight: var(--font-weight-medium);
	color: var(--color-primary);
}


/* ============================
	-- main service
============================ */
.main_service {padding: 4rem 0;}

/* layout */
.main_service .card_list {padding-top: 1.6rem;}
.main_service .card_list li {width: 100%;}

/* service card */
.service_card .card_img {
	width: 3.6rem;
	height: 3.6rem;
}
.service_card .card_content {margin-left: 1.2rem;}
.service_card .card_content > .info {font-size: var(--font-size-label1);}


/* ============================
	-- main cs
============================ */
.main_cs {
	padding: 4rem 0;
	background-color: #EEF8FF;
	text-align: center;
}

.main_cs p {margin-top: .4rem;}
.main_cs .btn_wrap {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}
.main_cs .btn_wrap .btn {width: fit-content;}



/***********************************************************************************************************************
  D. Sub
***********************************************************************************************************************/
/* ============================
	-- common 
============================ */
.page_title {
	margin-bottom: 3.2rem;
}


/* ============================
	-- login 
============================ */
.login_form {}
.login_form_link {margin-top: 2.4rem;}
.login_form_link ul {
	display: flex;
	justify-content: center;
}
.login_form_link ul li {position: relative;}
.login_form_link ul li + li {
	padding-left: .8rem;
	margin-left: .8rem;
}
.login_form_link ul li + li::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	display: block;
	width: 1px;
	height: 8px;
	background-color: var(--line-normal);
}


/* ============================
	-- join(회원가입)
============================ */
/* step1 :: 약관동의 */
.terms_wrap {}
.terms_wrap .terms_list {
	padding: 0 2rem;
	margin-top: 1.6rem;
}


/* ============================
	-- esim
============================ */
/*
 * main :: 국가 리스트
 */
.esim_country_wrap {
	flex: 1 1 auto;
	background-color: var(--fill-normal);
	padding: 2rem 0 4rem 0;
}

.esim_country_wrap .country_list li {
	width: 33.33333%;
}
.esim_country_wrap .country_list .card {
	flex-direction: column;
	gap: .8rem;
	padding: 2rem 1rem;
}
.esim_country_wrap .country_list img {
	width: 4rem;
	height: auto;
	border: 1px solid var(--line-alternative);
	border-radius: 999px;
}
.esim_country_wrap .country_list span {
	font-size: var(--font-size-body2);
	font-weight: var(--font-weight-medium);
	color: var(--label-strong);
}


/*
 * list :: esim상품 리스트
 */
.country_title {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-size: var(--font-size-headline1);
	font-weight: var(--font-weight-medium);
	color: var(--label-normal);
}
.country_title img {
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid var(--line-alternative);
    border-radius: 999px;
}

.plan_list {}
.plan_list li {
	border-bottom: 1px solid var(--line-normal);
}
.plan_list .plan_item {
	display: flex;
	flex-wrap: nowrap;
	padding: 2rem 0;
}
.plan_list .plan_content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 50%;
    padding-right: .8rem;
    
    font-size: var(--font-size-body1);
    font-weight: var(--font-weight-medium);
    color: var(--label-normal);
    line-height: 147.2%;
}
.plan_list .plan_content > span:first-child {
	display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plan_list .plan_content > .ref {
	flex: 0;
	font-size: var(--font-size-label2);
	color: var(--label-alternative);
    line-height: 133.4%;
}
.plan_list .plan_price {
    font-size: var(--font-size-body1);
    font-weight: var(--font-weight-bold);
}


/*
 * detail :: esim상품 상세보기
 */
.plan_detail_wrap {margin-top: -3.2rem;}

.plan_info {
	padding: 3.2rem 0;
	background-color: #EEF8FF;
}
.plan_info .info {
	margin-top: .4rem;
	font-size: var(--font-size-label1);
	color: var(--label-alternative);
}
.plan_info .price {
	width: 100%;
	margin-top: 2.4rem;
	font-size: var(--font-size-heading1);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	text-align: right;
}
.plan_info .country_title {margin-bottom: 2rem;}


.plan_detail {padding-top: 3.2rem;}
.plan_detail .detail_item {}
.plan_detail .detail_head {
    font-size: var(--font-size-headline2);
    font-weight: var(--font-weight-bold);
    color: var(--label-strong);
}
.plan_detail .detail_content {
    margin-top: 1.6rem;
    padding-bottom: 2rem;
}

/* custom */
.plan_detail .list {color: var(--label-alternative);}

.plan_detail .ico_list li > .ico_wrap {
	border-radius: 999px;
}
.plan_detail .ico_list li > .ico_wrap > .ico {
	width: 2rem;
	height: 2rem;
	filter: var(--filter-white);
}

.plan_detail .ico_list li > .ico_wrap.network {background-color: #1ED45A;}
.plan_detail .ico_list li > .ico_wrap.call {background-color: #FFA938;}
.plan_detail .ico_list li > .ico_wrap.wifi {background-color: #9E86FC;}


/* ============================
	-- order
============================ */
.product_order_wrap {margin-top: -3.2rem;}

.order_group {padding: 3.2rem 0;}
.order_group .order_head {
	font-size: var(--font-size-headline2);
    font-weight: var(--font-weight-bold);
    color: var(--label-strong);
}
.order_group .order_content {margin-top: 1.6rem;}
.order_content .product_article {margin-bottom: 1.6rem;}

/* arr */
.order_arr_group {padding: 1.2rem 0;}
.order_head .arr_btn.order_arr_btn {
    position: relative;
    width: 100%;
    padding: 2rem 0;
    font-size: var(--font-size-headline2);
    font-weight: var(--font-weight-bold);
    color: var(--label-strong);
    text-align: left;
    line-height: 141.2%;
}
.order_head .arr_btn.order_arr_btn::after {right: 0;}
.order_arr_group .order_head + .order_content {visibility: hidden; height: 0;}
.order_arr_group .order_head.on + .order_content {visibility: visible; height: auto; padding: 0; padding-bottom: 2rem;}

/* summary */
.order_summary {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-heading2);
    font-weight: var(--font-weight-bold);
}
.order_summary > .title {color: var(--label-strong);}
.order_summary > .price {color: var(--color-primary);}

/* etc */
.order_datebox .btn_line_primary {
	margin-top: 1.6rem;
	background-color: #fff;
}
.order_content .box + .form_msg {
	margin-top: .4rem;
	text-align: right;
}


/* ============================
	-- guide
============================ */
/* guide list */
.guide_list {counter-reset: guideItem;}
.guide_list li {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	
	font-size: var(--font-size-body2);
	color: var(--label-netural);
	counter-increment: guideItem;
}
.guide_list li + li {margin-top: 2.8rem;}

/* head */
.guide_head {
	position: relative;
	display: flex;
	gap: .4rem;
	line-height: 146.7%;
	word-break: keep-all;
}
.guide_head::before {
	content: counter(guideItem) '.';
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
}
.guide_head span {
	font-weight: var(--font-weight-medium);
	color: var(--label-normal);
}

/* ref (참고사항) */
.guide_ref {
	font-size: var(--font-size-label2);
	line-height: 138.5%;
	color: var(--label-alternative);
}
.guide_ref .acc {
	display: flex;
	gap: .4rem;
	width: 100%;
	color: #FF4242;
}
.guide_ref .acc > .ico {
	width: 1.6rem;
	min-width: 1.6rem;
	height: 1.6rem;
	filter: invert(37%) sepia(61%) saturate(4588%) hue-rotate(340deg) brightness(113%) contrast(103%);
}

/* image */
.guide_img {
	display: flex;
    justify-content: center;
	align-items: center;
	gap: 1.2rem;
	padding: 1rem;
}
.guide_img .img_item {
	width: 50%;
	border: 1px solid var(--line-alternative);
	border-radius: .8rem;
	
	aspect-ratio: 1 / 1.6;
	box-shadow: rgba(0,0,0,.08) -4px 9px 16px -6px;
	overflow: hidden;
}
.guide_img img {
	display: inline-block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ============================
	-- voucher(바우처)
============================ */
/* product sort */
.product_sort {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.2rem;
}
.product_sort .product_total {
	font-size: var(--font-size-label1);
    font-weight: var(--font-weight-medium);
    color: var(--label-normal);
}
.product_sort .product_total > span {color: var(--color-primary);}
.product_sort .select_area {
	display: flex;
    align-items: center;
    gap: 1.2rem;
}
.product_sort .select_area > select {
	height: auto;
    padding: 0;
    padding-right: 1.6rem;
    border: 0;
    border-radius: 0;
    font-size: var(--font-size-label1);
    color: var(--label-netural);
    background: url(../images/icon/select_icon_disabled.svg) right center / 12px no-repeat;
}
.product_sort .select_area > select:focus-visible {border: 0; outline: 0;}

/* product filter */
.product_filter {padding: 1.2rem 0;}
.product_filter select {
    width: auto;
    height: auto;
    padding: .7rem 3.2rem .7rem 1.2rem;
    border-radius: .4rem;
    font-size: var(--font-size-label2);
    background: url(../images/icon/select_icon.svg) calc(100% - 12px) center / 12px no-repeat;
}

/* product list */
.product_list .product_item {
	padding: 2rem 0;
    border-top: 1px solid var(--line-netural);	
}
.product_list .product_item > a {
	display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
}
.product_list .product_item .thumb {
	position: relative;
    width: 30%;
    min-width: 96px;
    height: 100%;
    min-height: 96px;
    border-radius: .8rem;
    overflow: hidden;
}
.product_list .product_item .thumb > img {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product_list .product_item .content {
	width: 100%;
}
.product_list .product_item .content > .title {
	font-size: var(--font-size-body2);
    font-weight: var(--font-weight-bold);
    color: var(--label-normal);
    line-height: 146.7%;
    
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.product_list .product_item .content > .info {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .4rem;
}
.product_list .product_item .content > .info li {
	position: relative;
    font-size: var(--font-size-label2);
    color: var(--label-alternative);
}
.product_list .product_item .content > .info li + li {
	padding-left: .5rem;
    margin-left: .5rem;
}
.product_list .product_item .content > .info li + li::before {
	content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    width: 1px;
    height: 8px;
    background-color: var(--line-netural);
}
.product_list .product_item .content > .price {
	margin-top: 1.2rem;
    font-size: var(--font-size-body2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 146.7%;
}

/* product detail */
.product_detail {margin-top: -3.2rem;}

.product_head .product_visual {
	width: 100%;
	height: calc(100vh - 65vh);
	min-height: 27rem;
}
.product_head .product_visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.product_head .product_visual .swiper-pagination {
	bottom: 2rem;
	left: unset;
	right: 2rem;
	display: flex;
	align-items: center;
	gap: .4rem;
	width: auto;
	padding: .4rem 1.2rem;
	border-radius: 10rem;
	font-size: var(--font-size-caption1);
	color: rgba(255, 255, 255, .52);
	background-color: var(--color-cg10-op52);
	line-height: normal;
}
.product_head .product_visual .swiper-pagination > span {line-height: normal;}
.product_head .product_visual .swiper-pagination-current {color: #fff;}

.product_head .product_info {padding: 2.4rem 0;}
.product_head .product_info > .title {color: var(--label-strong);}
.product_head .product_info > .info {
    margin-top: .8rem;
    font-size: var(--font-size-label1);
    color: var(--label-alternative);
}
.product_head .product_info > .price {
    margin-top: 1.6rem;
    font-size: var(--font-size-heading2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}
.product_head .product_info > .price_detail {margin-top: 2rem;}
.price_detail .price_list {gap: 1.6rem;}
.price_detail .price_list li {font-weight: var(--font-weight-medium); color: var(--label-strong);}


.product_tab {}
.product_tab > .tab {
	position: sticky;
    top: 5.6rem;
    left: 0;
    background-color: #fff;
    z-index: 30;
}

/* product article */
.product_article {
	display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
}
.product_article > .thumb {
	position: relative;
    width: 7.2rem;
    min-width: 7.2rem;
    height: 7.2rem;
    border-radius: .8rem;
    overflow: hidden;
}
.product_article > .thumb > img {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product_article > .content {
	width: 100%;
}
.product_article > .content > .title {
	font-size: var(--font-size-body2);
    font-weight: var(--font-weight-bold);
    color: var(--label-normal);
    line-height: 146.7%;
    
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.product_article > .content > .info {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .4rem;
}
.product_article > .content > .info li {
	position: relative;
    font-size: var(--font-size-label2);
    color: var(--label-alternative);
}
.product_article > .content > .info li + li {
	padding-left: .5rem;
    margin-left: .5rem;
}
.product_article > .content > .info li + li::before {
	content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    width: 1px;
    height: 8px;
    background-color: var(--line-netural);
}



/* ============================
	-- reserve(예약)
============================ */
/* 날짜 선택 */
.reserve_calendar {margin-top: -3.2rem;}

.datepicker_header .reserve_date {
	padding: 1.2rem 2rem;
	background-color: var(--fill-normal);
}

.reserve_header {
	position: sticky;
    position: -webkit-sticky;
    top: 5.6rem;
    left: 0;
    background-color: #fff;
    z-index: 30;
}
.reserve_header > .inner {background-color: var(--color-primary-op5);}
.reserve_header .datalist.type1 {margin: unset;}
.reserve_header .datalist.type1 li > .content_left span {
	font-size: var(--font-size-label1);
	line-height: 142.9%;
}
.reserve_header .datalist.type1 li > .content_left span.ref {font-size: var(--font-size-caption1)};

.box + .form_msg {margin-top: .4rem; text-align: right;}


/* ============================
	-- mypage(마이페이지)
============================ */
.my_wrap.full {margin-top: -3.2rem;}

/** 
 * main
 */
.my_main_profile {margin-bottom: 3.2rem;}
.my_main_nav {margin-top: 2.4rem;}
.my_main_nav .nav {flex-direction: column;}
.my_main_nav .nav > li {
	position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.2rem 0;
}
.my_main_nav .nav > li > .ico {
	width: 2.8rem;
	height: 2.8rem;
	filter: var(--filter-ng10);
}
.my_main_nav .nav > li > a {
	display: flex;
	justify-content: space-between;
	width: 100%;
    font-size: var(--font-size-body1);
    color: var(--label-normal);
}
.my_main_nav .nav > li > a > .ico {
	width: 1.6rem;
	height: 1.6rem;
	filter: var(--filter-ng90);
}
.my_main_nav .nav + .divider {margin: .8rem 0;}


/** 
 * 바우처 보관함
 */
.my_current_voucher {margin-bottom: 3.2rem;}

.my_voucher_area {margin-top: 3.2rem;}
.my_voucher_area .box_tab {padding: 1.2rem 0;}
.my_voucher_area .my_voucher_list_wrap {margin-top: 2.4rem;}


/** 
 * 주문 내역
 */
/* .my_reserve_list_wrap {margin-top: -3.2rem;} */
.my_order_list .datalist li {
	flex-direction: column;
	gap: .8rem;
}
/* head */
.my_order_list .datalist li .head_left span.status {
	display: inline-block;
    font-size: var(--font-size-label1);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
}

/* content */
.my_order_list .datalist > li .content_left span {font-weight: var(--font-weight-regular);}
.my_order_list .datalist > li .content_left .price {font-weight: var(--font-weight-bold);}

.my_order_list .datalist li .content_left > ul {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.my_order_list .datalist li .content_left > ul > li {
	position: relative;
    font-size: var(--font-size-label2);
    color: var(--label-alternative);
}
.my_order_list .datalist li .content_left > ul > li + li {
	padding-left: .5rem;
    margin-left: .5rem;
}
.my_order_list .datalist li .content_left > ul > li + li::before {
	content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    width: 1px;
    height: 8px;
    background-color: var(--line-netural);
}


/** 
 * 예약 상세보기
 */
.my_reserve_detail_wrap {margin-top: -3.2rem;}

#golferDetail .modal-body > .order_group:first-child {margin-top: -2rem;}


/* ==========================================
	-- components
========================================== */
.components_header {margin-bottom: 3.2rem; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
/* .components_header > * {padding: 0 2rem;} */
.components_header .line_tab {padding: 0 2rem; border-bottom: 1px solid var(--line-alternative);}
.components_header .line_tab .tab.type1 {padding: 0; border-bottom: 0;}
.components_header .line_tab .tab.type1 li {flex: unset; width: auto;}
.components_header .line_tab .tab.type1 li .tab_link {display: inline-block; white-space: nowrap;}

.components .board_wrap + .board_wrap {padding-top: 3.2rem; margin-top: 3.2rem; border-top: 1px solid var(--line-normal);}
.components .board_content {padding: 1.6rem; border-radius: .8rem; background-color: var(--color-primary-op5);}



/***********************************************************************************************************************
  E. Common
***********************************************************************************************************************/
.data_none {
	padding: 3.2rem 0;
	font-size: var(--font-size-body2);
	color: var(--label-strong);
	text-align: center;
}


/* ============================
	-- list
============================ */
/* list */
.list {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	font-size: var(--font-size-label1);
	color: var(--label-netural);
}
.list li {position: relative; line-height: 157.1%;}
.list li.ref {padding-left: 2rem;}
.list li.ref:before {display: none;}
.list li.ref > .list {gap: .4rem;}


/* list type */
.list_dot {}
.list_dot > li {padding-left: 1rem;}
.list_dot > li:before {content: ''; position: absolute; top: 10px; left: 0; display: block; width: 2px; height: 2px; background-color: var(--label-alternative);}
.list_dash {}
.list_dash > li {padding-left: 1rem;}
.list_dash > li:before {content: ''; position: absolute; top: 10px; left: 0; display: block; width: 4px; height: 1px; background-color: var(--label-alternative);}
.list_ico {}
.list_ico > li {display: flex; flex-wrap: nowrap; gap: .4rem;}
.list_ico > li > span {flex: 0;}
.list_counter {counter-reset: list;}
.list_counter li {counter-increment: list;}
.list_counter li::before {content: counter(list) "."; margin-right: .4rem;}

/* list etc */
.list_title {margin-bottom: .4rem; font-size: var(--font-size-body2); font-weight: var(--font-weight-bold); color: var(--label-strong);}


/**
 * amount list
 */
.amount_list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.amount_list li + li {margin-top: 2.4rem;}
.amount_list li > .title {display: flex; flex-direction: column; font-size: var(--font-size-label1); color: var(--label-alternative); line-height: 142.9%;}
.amount_list li > .title > .acc {font-size: var(--font-size-body1); font-weight: var(--font-weight-bold); color: var(--label-normal); line-height: 150%;}


/**
 * datalist
 */
.datalist {}
.datalist > li {
	display: flex;
	flex-wrap: nowrap;
	padding: 1rem 0;
}
.datalist > li > .thumb {width: 2.8rem; height: 2.8rem; margin-right: .8rem; text-align: center; overflow: hidden;}
.datalist > li > .thumb.lg {width: 4rem; height: 4rem;}
.datalist > li > .thumb img {width: 100%;}

.datalist > li > .head, .datalist > li > .content {display: flex; align-items: center; width: 100%;}

.datalist > li .head_left {display: flex; flex: 1; align-items: center; gap: .8rem; padding-right: .8rem;}
.datalist > li .head_left span {display: inline-block; font-size: var(--font-size-body2); color: var(--label-alternative);}
.datalist > li .head_right {flex: 0 0 auto;}

.datalist > li .content_left {display: flex; flex-direction: column; flex: 1; padding-right: .8rem;}
.datalist > li .content_left span {display: inline-block; font-size: var(--font-size-body1); font-weight: var(--font-weight-medium); color: var(--label-normal); line-height: 150%;}
.datalist > li .content_left span.ref {color: var(--label-alternative);}
.datalist > li .content_right {flex: 0 0 auto;}
.datalist > li .content_right span {font-size: var(--font-size-body1); font-weight: var(--font-weight-bold); line-height: 150%;}

/* datalist type */
.datalist.type1 {margin: -1rem 0;}
.datalist.type1 > li > .thumb {border-radius: 999px; background-color: var(--fill-normal);}
.datalist.type1 > li .content_left {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.datalist.type2 > li {padding: 2rem 0; border-top: 1px solid var(--line-normal);}
.datalist.type2 > li > .thumb {border-radius: 999px; background-color: var(--fill-normal);}
.datalist.type2 > li .content_left span.ref {font-size: var(--font-size-label1);}


/**
 * option list
 */
.option_list {display: flex; flex-direction: column; gap: .8rem;}
.option_list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-size-label1);
	color: var(--label-normal);
	line-height: 150%;
}
.option_list li > .title {font-size: var(--font-size-label1); font-weight: var(--font-weight-regular); color: var(--label-netural);}

/* option list type */
.option_list.type2 {flex-direction: row;}
.option_list.type2 li {flex: 1 0 auto; flex-direction: column; width: calc(50% - .4rem);}

.option_list.type3 li {align-items: baseline; gap: 1.2rem; text-align: left;}
.option_list.type3 li > .title {flex: 0 0 auto; min-width: 7.2rem;}
.option_list.type3 li > *:not(.title) {flex: 1 0 auto;}


/**
 * price list
 */
.price_list {display: flex; flex-direction: column; gap: .8rem;}
.price_list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	font-size: var(--font-size-body1);
    font-weight: var(--font-weight-medium);
    color: var(--label-netural);
    line-height: 150%;
    text-align: left;
}
.price_list li > .title {font-size: var(--font-size-label1); font-weight: var(--font-weight-regular); color: var(--label-netural);}
.price_list li.sub {width: 100%; font-size: var(--font-size-label1); font-weight: var(--font-weight-medium); color: var(--label-alternative); line-height: 142.9%;}
.price_list li.sub > .title {color: var(--label-alternative);}
.price_list li.summary {padding-top: 1.2rem; margin-top: .4rem; border-top: 1px solid var(--line-normal); font-size: var(--font-size-headline2); font-weight: var(--font-weight-bold); color: var(--color-primary);}
.price_list li.summary > .title {color: var(--label-strong);}
.price_list li.summary:only-child {padding-top: 0; margin-top: 0; border-top: 0;}
.price_list li > .acc {color: var(--color-primary);}


/**
 * ico list
 */
.ico_list {display: flex; flex-wrap: wrap;}
.ico_list li {flex: 1; display: flex; flex-direction: column; align-items: center; gap: .8rem;}
.ico_list li > .ico_wrap {display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem;}
.ico_list li > .ico_wrap > .ico {width: 100%;}
.ico_list li > .desc {font-size: var(--font-size-label1); font-weight: var(--font-weight-bold); color: var(--label-normal); text-align: center;}
.ico_list li > .desc > span {display: inline-block; width: 100%; font-weight: var(--font-weight-regular); color: var(--label-netural);}


/* ============================
	-- modal
============================ */
.modal {
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(430px - 2px);
}

/* modal size */
.modal-dialog {
	display: flex;
	align-items: center;
	/* width: 100%; */
	max-width: calc(428px - 2rem);
	height: calc(100% - var(--bs-modal-margin) * 2);
	margin: 1rem;
}
.modal-dialog.modal-full {
	max-width: unset;
	height: 100%;
	margin: 0;
}

/* modal layout */
.modal-content {
	height: max-content;
	max-height: 100%;
	padding: 2rem;
	border: 0;
	border-radius: 1.2rem;
}
.modal-full .modal-content {
	height: 100%;
	border-radius: 0;
}
.modal-header {
	padding: 0;
	margin-bottom: 2.4rem;
	border-bottom: 0;
}
.modal-header .btn-close {
	width: 2.8rem;
	height: 2.8rem;
	padding: 0;
	border-radius: .3rem;
	background: url(../images/icon/close.svg) no-repeat center/100%;
	filter: var(--filter-ng60);
	opacity: 1;
}
.modal-header .btn-close:focus {box-shadow: unset;}
.modal-body {
	padding: 0;
	padding-top: 2rem;
	font-size: var(--font-size-body2);
	color: var(--label-normal);
	line-height: 146.7%;
	overflow: auto;
}
.modal-footer {
	padding: 0;
	margin-top: 2.4rem;
	border-top: 0;
}
.modal-footer>* {margin: 0;}
.modal-backdrop {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
    width: 100%;
    max-width: calc(430px - 2px);
}


/* ============================
	-- login info 
============================ */
.login_info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
}
.login_info > .ico {width: 5.2rem; height: 5.2rem;}
.login_info > .title {font-size: var(--font-size-body2); font-weight: var(--font-weight-medium); color: var(--label-netural);}


/* ============================
	-- term list
============================ */
.terms_list {}
.terms_list li {
	display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: .8rem;
    padding: .8rem 0;
}
.terms_list li > .form_check {flex: 1 0 auto;}
.terms_list li > button {flex: 0 0 auto; display: flex; align-items: center; height: 2.4rem;}
.terms_list li > button > .ico {width: 1.6rem; height: 1.6rem; filter: var(--filter-ng90);}


/* ============================
	-- text 
============================ */
h1 {font-size: var(--font-size-title1); font-weight: var(--font-weight-bold);}
h2 {font-size: var(--font-size-heading2); font-weight: var(--font-weight-bold);}
h3 {font-size: var(--font-size-headline1); font-weight: var(--font-weight-bold);}

/* font size */
.text_xl {font-size: var(--font-size-title1);}
.text_lg {font-size: var(--font-size-heading2);}
.text_md {font-size: var(--font-size-headline1);}
.text_normal {font-size: var(--font-size-body1);}
.text_sm {font-size: var(--font-size-label1);}
.text_xs {font-size: var(--font-size-caption1);}

/* font weight */
.text_b {font-weight: var(--font-weight-bold);}
.text_m {font-weight: var(--font-weight-medium);}
.text_r {font-weight: var(--font-weight-regular);}

/* color */
.text_primary {color: var(--color-primary);}
.text_strong {color: var(--label-strong);}
.text_normal {color: var(--label-normal);}
.text_netural {color: var(--label-netural);}
.text_alternative {color: var(--label-alternative);}
.text_assistive {color: var(--label-assistive);}


/* ============================
	-- margin & padding
============================ */
/* margin */
.m-0 {margin: 0 !important;}
.m-1 {margin: .4rem !important;}
.m-2 {margin: .8rem !important;}
.m-3 {margin: 1.2rem !important;}
.m-4 {margin: 1.6rem !important;}
.m-5 {margin: 2rem !important;}

.mx-0 {margin-left: 0 !important; margin-right: 0 !important;}
.mx-1 {margin-left: .4rem !important; margin-right: .4rem !important;}
.mx-2 {margin-left: .8rem !important; margin-right: .8rem !important;}
.mx-3 {margin-left: 1.2rem !important; margin-right: 1.2rem !important;}
.mx-4 {margin-left: 1.6rem !important; margin-right: 1.6rem !important;}
.mx-5 {margin-left: 2rem !important; margin-right: 2rem !important;}
.mx-24 {margin-left: 2.4rem !important; margin-right: 2.4rem !important;}
.mx-32 {margin-left: 3.2rem !important; margin-right: 3.2rem !important;}

.my-0 {margin-top: 0 !important; margin-bottom: 0 !important;}
.my-1 {margin-top: .4rem !important; margin-bottom: .4rem !important;}
.my-2 {margin-top: .8rem !important; margin-bottom: .8rem !important;}
.my-3 {margin-top: 1.2rem !important; margin-bottom: 1.2rem !important;}
.my-4 {margin-top: 1.6rem !important; margin-bottom: 1.6rem !important;}
.my-5 {margin-top: 2rem !important; margin-bottom: 2rem !important;}
.my-24 {margin-top: 2.4rem !important; margin-bottom: 2.4rem !important;}
.my-32 {margin-top: 3.2rem !important; margin-bottom: 3.2rem !important;}

.ms-0 {margin-left: 0 !important;}
.ms-1 {margin-left: .4rem !important;}
.ms-2 {margin-left: .8rem !important;}
.ms-3 {margin-left: 1.2rem !important;}
.ms-4 {margin-left: 1.6rem !important;}
.ms-5 {margin-left: 2rem !important;}

.me-0 {margin-right: 0 !important;}
.me-1 {margin-right: .4rem !important;}
.me-2 {margin-right: .8rem !important;}
.me-3 {margin-right: 1.2rem !important;}
.me-4 {margin-right: 1.6rem !important;}
.me-5 {margin-right: 2rem !important;}

.mt-0 {margin-top: 0 !important;}
.mt-1 {margin-top: .4rem !important;}
.mt-2 {margin-top: .8rem !important;}
.mt-3 {margin-top: 1.2rem !important;}
.mt-4 {margin-top: 1.6rem !important;}
.mt-5 {margin-top: 2rem !important;}

.mb-0 {margin-bottom: 0 !important;}
.mb-1 {margin-bottom: .4rem !important;}
.mb-2 {margin-bottom: .8rem !important;}
.mb-3 {margin-bottom: 1.2rem !important;}
.mb-4 {margin-bottom: 1.6rem !important;}
.mb-5 {margin-bottom: 2rem !important;}


/* padding */
.p-0 {padding: 0 !important;}
.p-1 {padding: .4rem !important;}
.p-2 {padding: .8rem !important;}
.p-3 {padding: 1.2rem !important;}
.p-4 {padding: 1.6rem !important;}
.p-5 {padding: 2rem !important;}

.px-0 {padding-left: 0 !important; padding-right: 0 !important;}
.px-1 {padding-left: .4rem !important; padding-right: .4rem !important;}
.px-2 {padding-left: .8rem !important; padding-right: .8rem !important;}
.px-3 {padding-left: 1.2rem !important; padding-right: 1.2rem !important;}
.px-4 {padding-left: 1.6rem !important; padding-right: 1.6rem !important;}
.px-5 {padding-left: 2rem !important; padding-right: 2rem !important;}
.px-24 {padding-left: 2.4rem !important; padding-right: 2.4rem !important;}
.px-32 {padding-left: 3.2rem !important; padding-right: 3.2rem !important;}

.py-0 {padding-top: 0 !important; padding-bottom: 0 !important;}
.py-1 {padding-top: .4rem !important; padding-bottom: .4rem !important;}
.py-2 {padding-top: .8rem !important; padding-bottom: .8rem !important;}
.py-3 {padding-top: 1.2rem !important; padding-bottom: 1.2rem !important;}
.py-4 {padding-top: 1.6rem !important; padding-bottom: 1.6rem !important;}
.py-5 {padding-top: 2rem !important; padding-bottom: 2rem !important;}
.py-24 {padding-top: 2.4rem !important; padding-bottom: 2.4rem !important;}
.py-32 {padding-top: 3.2rem !important; padding-bottom: 3.2rem !important;}

.ps-0 {padding-left: 0 !important;}
.ps-1 {padding-left: .4rem !important;}
.ps-2 {padding-left: .8rem !important;}
.ps-3 {padding-left: 1.2rem !important;}
.ps-4 {padding-left: 1.6rem !important;}
.ps-5 {padding-left: 2rem !important;}

.pe-0 {padding-right: 0 !important;}
.pe-1 {padding-right: .4rem !important;}
.pe-2 {padding-right: .8rem !important;}
.pe-3 {padding-right: 1.2rem !important;}
.pe-4 {padding-right: 1.6rem !important;}
.pe-5 {padding-right: 2rem !important;}

.pt-0 {padding-top: 0 !important;}
.pt-1 {padding-top: .4rem !important;}
.pt-2 {padding-top: .8rem !important;}
.pt-3 {padding-top: 1.2rem !important;}
.pt-4 {padding-top: 1.6rem !important;}
.pt-5 {padding-top: 2rem !important;}

.pb-0 {padding-bottom: 0 !important;}
.pb-1 {padding-bottom: .4rem !important;}
.pb-2 {padding-bottom: .8rem !important;}
.pb-3 {padding-bottom: 1.2rem !important;}
.pb-4 {padding-bottom: 1.6rem !important;}
.pb-5 {padding-bottom: 2rem !important;}



/***********************************************************************************************************************
  F. Components
***********************************************************************************************************************/
/* ============================
	-- accordion
============================ */
.arr_group {}
.arr_head .arr_btn {position: relative; width: 100%; padding: 2rem 3.8rem 2rem 2rem; font-size: var(--font-size-headline2); font-weight: var(--font-weight-bold); color: var(--label-strong); line-height: normal; text-align: left;}
.arr_head .arr_btn.sm {padding: 1.6rem 2rem; font-size: var(--font-size-body2); line-height: 146.7%;}
.arr_head .arr_btn::after {content: ''; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); display: block; width: 2rem; height: 2rem; background: url(../images/icon/keyboard_arrow_down.svg) no-repeat center / 100%; filter: var(--filter-ng60);}
.arr_head.on .arr_btn::after {background: url(../images/icon/keyboard_arrow_up.svg) no-repeat center / 100%;}
.arr_head .arr_btn.sm::after, .arr_head.on .arr_btn.sm::after {width: 1.6rem; height: 1.6rem;}
.arr_content {visibility: hidden; height: 0; font-size: 1.4rem; color: var(--label-netural); line-height: 150%;}
.arr_head.on + .arr_content {visibility: visible; height: auto; padding: 0 2rem 2rem 2rem;}

.arr_group.type2 {border-bottom: 1px solid var(--line-netural);}

.arr_group.type3 {border: 1px solid var(--line-netural); border-radius: .8rem;}
.arr_group.type3 + .arr_group.type3 {margin-top: 1.2rem;}

.arr_group.type4 {border-bottom: 1px solid var(--line-netural);}
.arr_group.type4 .arr_head .arr_btn {font-weight: var(--font-weight-regular);}
.arr_group.type4 .arr_head.on, .arr_group.type4 .arr_content {background-color: var(--color-primary-op5);}
.arr_group.type4 .arr_head.on .arr_btn {font-weight: var(--font-weight-bold);}


/* ============================
	-- board 
============================ */
.board {font-size: var(--font-size-label1); color: var(--label-netural);}
.board_wrap {}
.board_wrap + .board_wrap {padding-top: 3.2rem;}
.board_title {font-size: var(--font-size-headline2); font-weight: var(--font-weight-bold); color: var(--label-strong);}
.board_item {margin-top: 1.6rem;}
.board_item .board_head {font-size: var(--font-size-label1); color: var(--label-alternative);}
.board_item .board_head + .board_content {margin-top: .8rem;}


/* ============================
	-- box 
============================ */
.box {
	border-radius: .8rem;
	padding: 2rem;
}

/* box type */
.box_fill_primary {background-color: var(--color-primary-op5);}
.box_fill_gray {background-color: var(--fill-normal);}
.box_line_gray {border: 1px solid var(--line-normal);}

/* box etc */
.box_header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem;}
.box_head {font-size: var(--font-size-body2); font-weight: var(--font-weight-bold);}
.box_head + * {margin-top: 1.6rem;}


/* ============================
	-- button 
============================ */
.btn_wrap {
	margin-top: 2.4rem;
}
.fixed_bottom .btn_wrap {margin-top: 2rem;}
.sticky_bottom .btn_wrap {padding-top: 2rem;}

.btn_group {display: flex; flex-wrap: wrap; gap: .8rem;}
.btn_group > * {flex: 1;}

/* button type */
.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .4rem;
	border-radius: .8rem;
	transition: .3s ease;
}
.btn.oval {border-radius: 999px;}
/* a.btn {display: inline-block;} */

.btn.btn_lg {width: 100%; height: 4.8rem; line-height: 4.8rem; padding: 0 2rem; font-size: var(--font-size-body1); font-weight: var(--font-weight-bold);}
.btn.btn_lg > .ico {width: 2rem; height: 2rem;}
.btn.btn_md {width: 100%; height: 4rem; line-height: 4rem; padding: 0 2rem; font-size: var(--font-size-body2); font-weight: var(--font-weight-bold);}
.btn.btn_md > .ico {width: 1.8rem; height: 1.8rem;}
.btn.btn_sm {width: 100%; height: 3.2rem; line-height: 3.2rem; padding: 0 1.2rem; font-size: var(--font-size-label1);}
.btn.btn_sm > .ico {width: 1.6rem; height: 1.6rem;}

.btn_fill_primary {color: #fff; background-color: var(--color-primary);}
.btn_fill_primary > .ico {filter: var(--filter-white);}
.btn_fill_primary:hover {color: #fff; background-color: var(--color-primary-strong);}
.btn_fill_primary:active, .btn_fill_primary:focus-visible {border-color:var(--color-primary-heavy) !important; color: #fff !important; background-color: var(--color-primary-heavy) !important;}
.btn_fill_gray {color: var(--color-netural); background-color: var(--color-cg98);}
.btn_fill_gray > .ico {filter: var(--filter-ng10);}
.btn_fill_gray:hover {color: var(--color-netural); background-color: var(--label-disabled);}
.btn_fill_gray:active, .btn_fill_gray:focus-visible {border-color:var(--label-disabled) !important; color: var(--color-netural) !important; background-color: var(--label-disabled) !important;}
.btn_fill_dark {color: #fff; background-color: #64748B;}
.btn_fill_dark > .ico {filter: var(--filter-white);}
.btn_fill_dark:hover {color: #fff; background-color: #334155;}
.btn_fill_dark:active, .btn_fill_dark:focus-visible {border-color:#334155 !important; color: #fff !important; background-color: #334155 !important;}

.btn_line_primary {border: 1px solid var(--color-primary); color: var(--color-primary); background-color: transparent;}
.btn_line_primary > .ico {filter: var(--filter-primary);}
.btn_line_primary:hover {border-color: var(--color-primary); color: var(--color-primary); background-color: var(--color-primary-op10);}
.btn_line_primary:active, .btn_line_primary:focus-visible {border-color:var(--color-primary) !important; color: var(--color-primary) !important; background-color: var(--color-primary-op10) !important;}
.btn_line_secondary {border: 1px solid var(--line-normal); color: var(--color-primary); background-color: transparent;}
.btn_line_secondary > .ico {filter: var(--filter-primary);}
.btn_line_secondary:hover {border-color: var(--line-normal); color: var(--color-primary); background-color: var(--fill-alternative);}
.btn_line_secondary:active, .btn_line_secondary:focus-visible {border-color:var(--line-normal) !important; color: var(--color-primary) !important; background-color: var(--fill-alternative) !important;}
.btn_line_gray {border: 1px solid var(--line-normal); color: var(--label-normal); background-color: transparent;}
.btn_line_gray > .ico {filter: var(--filter-ng10);}
.btn_line_gray:hover {border-color: var(--line-normal); color: var(--label-normal); background-color: var(--fill-alternative);}
.btn_line_gray:active, .btn_line_gray:focus-visible {border-color:var(--line-normal) !important; color: var(--label-normal) !important; background-color: var(--fill-alternative) !important;}
.btn_line_dark {border: 1px solid #64748B; color: var(--label-normal); background-color: transparent;}
.btn_line_dark > .ico {filter: var(--filter-ng10);}
.btn_line_dark:hover {border-color: #64748B; color: var(--label-normal); background-color: var(--fill-alternative);}
.btn_line_dark:active, .btn_line_gray:focus-visible {border-color:#64748B !important; color: var(--label-normal) !important; background-color: var(--fill-alternative) !important;}

.btn:disabled {border-color: var(--color-cg98); color: var(--label-assistive); background-color: var(--color-cg98); opacity: 1;}
.btn:disabled > .ico {filter: var(--filter-ng90);}


/* text type */
.btn_text {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .4rem;
	padding: .4rem;
	border-radius: .4rem;
}
a.btn_text {display: inline-flex;}

.btn_text.btn_lg {font-size: var(--font-size-body1); font-weight: var(--font-weight-bold);}
.btn_text.btn_lg > .ico {width: 2rem; height: 2rem;}
.btn_text.btn_md {font-size: var(--font-size-body2); font-weight: var(--font-weight-bold);}
.btn_text.btn_md > .ico {width: 1.8rem; height: 1.8rem;}
.btn_text.btn_sm {font-size: var(--font-size-label1); font-weight: var(--font-weight-bold);}
.btn_text.btn_sm > .ico {width: 1.6rem; height: 1.6rem;}

.btn_text_gray {color: var(--label-alternative);}
.btn_text_gray > .ico {filter: var(--filter-ng60);}
.btn_text_gray:hover {color: var(--label-alternative); background-color: var(--color-ng99);}
.btn_text_gray:active, .btn_text_gray:focus-visible {border-color: transparent !important; color: var(--label-alternative) !important; background-color: var(--color-ng99) !important;}
.btn_text_primary {color: var(--color-primary);}
.btn_text_primary > .ico {filter: var(--filter-primary);}
.btn_text_primary:hover {color: var(--color-primary); background-color: var(--color-primary-op10);}
.btn_text_primary:active, .btn_text_primary:focus-visible {border-color: transparent !important; color: var(--color-primary) !important; background-color: var(--color-primary-op10) !important;}


/* select */
.select_group {display: flex; flex-wrap: wrap; gap: .8rem;}

.btn_select {padding: 1rem 1.6rem; border: 1px solid var(--line-normal); border-radius: .4rem; font-size: var(--font-size-body2); color: var(--label-alternative);}
.btn_select:hover {color: inherit; background-color: var(--color-ng99);}
.btn_select.on {border-color: var(--color-primary); color: var(--color-primary);}


/* ============================
	-- card
============================ */
.card {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	padding: 2rem 1.6rem;
	border: 0;
	border-radius: .8rem;
}

.card > *:not(.card_content) {flex-shrink: 0;}

.card_content {flex: 1;}
.card_content > .title {font-size: var(--font-size-body1); font-weight: var(--font-weight-bold); color: var(--label-strong); line-height: 150%;}
.card_content > .info {font-size: var(--font-size-label2); color: var(--label-alternative);}

/* card type */
.card.type1 {border: 1px solid var(--line-normal); background-color: #fff;}
.card.type2 {background-color: #fff;}
.card.type3 {background-color: #fff; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);}

/* card etc */
.card_list {display: flex; flex-wrap: wrap; margin: -.6rem;}
.card_list li {padding: 0 .6rem; margin: .6rem 0;}


/* ============================
	-- compl wrap
============================ */
.compl_wrap {margin: 3.2rem 0; text-align: center;}
.compl_wrap .compl_head > .ico {width: 5.6rem; height: 5.6rem; margin-bottom: .8rem; filter: var(--filter-primary);}
.compl_wrap .compl_head > h1 {color: var(--label-strong);}
.compl_wrap .compl_msg {padding: 0 2rem; margin-top: 1.6rem; font-size: var(--font-size-body1); color: var(--label-netural); line-height: 150%; word-break: keep-all;}


/* ============================
	-- datepicker 
============================ */
.datepicker_header {position: sticky; position: -webkit-sticky; top: 5.6rem; left: 0; border-bottom: 1px solid var(--line-normal); background-color: #fff; z-index: 30;}

.datepicker_week {display: flex; flex-wrap: wrap; padding: .8rem 2rem;}
.datepicker_week > span {flex: 1 1 auto; font-size: var(--font-size-label2); font-weight: var(--font-weight-medium); color: var(--label-netural); text-align: center;}
.datepicker_week > span:first-child {color: #FF4242;}
.datepicker_week > span:last-child {color: #00AEFF;}

/* jquery ui custom */
.datepicker {padding: 3.2rem 2rem;}

.ui-datepicker.ui-datepicker-multi {width: 100% !important;}
.ui-datepicker .ui-datepicker-group {width: 100%; margin-top: 0; margin-bottom: 0;}
.ui-datepicker-row-break + .ui-datepicker-group {margin-top: 3.2rem;}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {display: none;}

.ui-datepicker-title {margin-bottom: 1.2rem; font-size: var(--font-size-headline1); font-weight: var(--font-weight-bold); color: var(--label-strong);}
.ui-datepicker-title > .ui-datepicker-month {margin-left: -.4rem;}

.ui-datepicker-calendar {width: 100%; overflow: hidden;}
.ui-datepicker-calendar > thead {display: none;}
.ui-datepicker-calendar > tbody td {position: relative; padding-top: .4rem; padding-bottom: 1.8rem; text-align: center;}
.ui-datepicker-calendar > tbody .ui-datepicker-other-month {opacity: .22;}

.ui-datepicker-calendar > tbody td > .ui-state-default {position: relative; display: inline-block; width: 2.4rem; height: 2.4rem; padding: .4rem; border-radius: 999px; font-size: var(--font-size-body1); font-weight: var(--font-weight-bold); color: var(--label-normal); z-index: 1;}
.ui-datepicker-calendar > tbody .ui-datepicker-week-end:first-child > .ui-state-default {color: #FF4242;}
.ui-datepicker-calendar > tbody .ui-datepicker-week-end:last-child > .ui-state-default {color: #00AEFF;}
.ui-datepicker-calendar > tbody td.ui-datepicker-today:before {
	content: '오늘';
	position: absolute;
	left: 50%;
	bottom: .4rem;
	transform: translateX(-50%);
	font-size: var(--font-size-caption2);
	color: var(--label-normal);
}
.ui-datepicker-calendar > tbody td.ui-state-disabled > .ui-state-default {opacity: .22;}

/* state */
.ui-datepicker-calendar > tbody td.in-range::before,
.ui-datepicker-calendar > tbody td.in-range::after {
	content: '';
    position: absolute;
    top: .4rem;
    display: block;
    height: 24px;
    background-color: #E9F4FF;
}
.ui-datepicker-calendar > tbody td.in-range::before {width: calc(100% + 50%); right: 0;}
.ui-datepicker-calendar > tbody td.in-range::after {width: calc(100% + 50%); left: 0;}
.ui-datepicker-calendar > tbody td.start-range > .ui-state-default,
.ui-datepicker-calendar > tbody td.end-range > .ui-state-default {color: #fff !important; background-color: var(--color-primary);}

.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:first-child.in-range::before {width: 100%; border-radius: 999px;}
.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:first-child.in-range::after {border-radius: 999px 0 0 999px;}
.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:last-child.in-range::before {border-radius: 0 999px 999px 0;}
.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:last-child.in-range::after {width: 100%; border-radius: 999px;}


/* ============================
	-- divider
============================ */
.divider.type1 {width: 100%; height: 1.2rem; background-color: var(--line-alternative);}
.divider.type2 {width: 100%; height: .1rem; background-color: var(--line-alternative);}


/* ============================
	-- form
============================ */
.form_group {display: flex; flex-direction: column; gap: .8rem;}
.form_group + .form_group {margin-top: 2.4rem;}
.form_group .form_head {display: flex; font-size: var(--font-size-label1); color: var(--label-alternative);}
.form_group .form_head > .ico {width: 1.6rem; height: 1.6rem; margin-left: .4rem; filter: var(--filter-ng60); cursor: pointer;}
.form_msg {width: 100%; font-size: var(--font-size-label2); color: var(--label-alternative); line-height: 138.5%;}

/* input group */
.input_group {display: flex; gap: .8rem;}
.input_group > * {flex: 1 1 auto;}
.input_group > .form_number {flex: 1 0 auto;}
.input_group > .btn {flex: unset; width: auto; min-width: 12rem;}

/* form number */
.form_number {display: flex; flex-wrap: wrap; width: 14.4rem; max-width: 15.4rem;}

.form_number .form_number_btn {position: relative; width: 4.8rem; height: 4.8rem; border: 1px solid var(--line-normal);}
.form_number .form_number_btn:hover {background-color: var(--fill-alternative);}
.form_number .form_number_btn::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 2.4rem; height: 2.4rem; filter: var(--filter-ng10);}
.form_number .form_number_btn.decrement {border-radius: .8rem 0 0 .8rem;}
.form_number .form_number_btn.decrement::before {background: url(../images/icon/remove.svg) no-repeat center/100%;}
.form_number .form_number_btn.increment {border-radius: 0 .8rem .8rem 0;}
.form_number .form_number_btn.increment::before {background: url(../images/icon/add.svg) no-repeat center/100%;}

.form_number .form_number_btn:disabled, .form_number .form_number_btn.disabled {cursor: default; pointer-events: none;}
.form_number .form_number_btn:disabled::before, .form_number .form_number_btn.disabled::before {filter: var(--filter-ng90);}

.form_number .form_number_inp {
	flex: 1 0 auto;
	display: inline-block;
	width: 1%;
	min-width: 4.8rem;
	max-width: 6rem;
	height: 4.8rem;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--line-normal);
	border-bottom: 1px solid var(--line-normal);
	border-radius: 0;
	font-size: var(--font-size-headline1);
	font-weight: var(--font-weight-bold);
	color: var(--label-normal);
	text-align: center;
	line-height: 4.8rem;
}
.form_number .form_msg, .form_number + .form_msg {margin-top: .4rem; text-align: right;}


/* form notice */
.form_notice {
    display: flex;
    gap: .4rem;
    width: 100%;
    padding: 1.2rem;
    margin-top: 2.4rem;
    border-radius: .8rem;
    font-size: var(--font-size-label2);
    color: var(--label-netural);
    background-color: var(--fill-normal);
}
.form_notice > .ico {width: 1.6rem; height: 1.6rem; filter: var(--filter-ng60);}
.form_notice.acc {color: #FF4242;}
.form_notice.acc > .ico {filter: invert(32%) sepia(99%) saturate(2220%) hue-rotate(338deg) brightness(109%) contrast(100%);}

/* search box */
.search_box {
	display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 4.8rem;
    padding: 1.2rem;
    background-color: var(--fill-normal);
    border-radius: .8rem;
    cursor: pointer;
}
.search_box > input {height: 100%; padding: 0; padding-right: 1.2rem; border: 0; background-color: transparent;}
.search_box > input:focus-visible {outline: 0;}
.search_box > span {flex: 1; font-size: var(--font-size-body1); color: var(--label-netural); text-align: left;}
.search_box > .form_search_btn {flex: 0 0 auto; width: 2rem; height: 2rem;}
.search_box > .form_search_btn > .ico {width: 100%; height: 100%; filter: var(--filter-ng60);}


/* ============================
	-- tab
============================ */
.tab {position: relative;}
.tab_link {transition: color .1s ease;}
.tab_link:focus-visible {outline: 0;}

.tab_content {}
.tab_content img {max-width: 100%;}
.tab_content .tab_panel {display: none; padding-top: 2rem;}
.tab_content .tab_panel.on {display: block;}

/* line tab */
.line_tab .tab.type1 {display: flex; flex-wrap: nowrap; padding: 0 2rem; border-bottom: 1px solid var(--line-alternative);}
.line_tab .tab.type1 li {flex: 1;}
.line_tab .tab.type1 .tab_link {width: 100%; padding: 1.2rem 0; border-bottom: 2px solid transparent; font-size: var(--font-size-label1); color: var(--label-alternative); text-align: center;}
.line_tab .tab.type1 .tab_link.on {font-weight: var(--font-weight-bold); color: var(--label-strong); border-color: var(--label-strong);}

/* box tab */
.box_tab .tab.type1 {display: flex; flex-wrap: wrap; gap: .8rem;}
.box_tab .tab.type1 li {width: auto;}
.box_tab .tab.type1 .tab_link {display: inline-block; padding: .6rem 1.2rem; border: 1px solid var(--line-normal); border-radius: .4rem; font-size: var(--font-size-label1); font-weight: var(--font-weight-medium); color: var(--label-alternative);}
.box_tab .tab.type1 .tab_link:hover {background-color: var(--fill-alternative);}
.box_tab .tab.type1 .tab_link.on {border-color: var(--label-strong); background-color: var(--label-strong); color: #fff;}

.box_tab .tab.type2 {display: flex;}
.box_tab .tab.type2 li {width: auto;}
.box_tab .tab.type2 .tab_link {display: inline-block; padding: .6rem 1.2rem; border-radius: 999px; font-size: var(--font-size-label1); font-weight: var(--font-weight-medium); color: var(--label-alternative);}
.box_tab .tab.type2 .tab_link:hover {color: var(--label-netural);}
.box_tab .tab.type2 .tab_link.on {background-color: var(--label-strong); color: #fff;}


/* ============================
	-- table
============================ */
.table {margin-bottom: 0; font-size: var(--font-size-label1); color: var(--label-netural); text-align: center;}
.table tr {border-bottom: 1px solid var(--line-normal);}
.table th, .table td {padding: 1.2rem .8rem;}
.table th {font-size: var(--font-size-body2); font-weight: var(--font-weight-medium);}

/* table type */
.table.row_type1 {}
.table.row_type1 > thead {border-top: 1px solid var(--label-strong);}

.table.row_type2 {}
.table.row_type2 > thead {background-color: var(--color-primary-op5);}
.table.row_type2 > thead th:first-child {border-radius: .8rem 0 0 .8rem;}
.table.row_type2 > thead th:last-child {border-radius: 0 .8rem .8rem 0;}
.table.row_type2 > thead > tr {border-bottom: 0;}



/***********************************************************************************************************************
  G. Media Query
***********************************************************************************************************************/
 
 


/*----------------------------------------------------------------------------------------------------------------------

[ icon setting ]

----------------------------------------------------------------------------------------------------------------------*/
.ico {
	display: inline-block;
	background-size: 100%;
	background-repeat: no-repeat;
}

.ico-sample {background-image: url(../images/icon/error.svg);}

.ico-add {background-image: url(../images/icon/add.svg);}

.ico-add-circle-outline {background-image: url(../images/icon/add_circle_outline.svg);}

.ico-check-circle {background-image: url(../images/icon/check_circle.svg);}

.ico-chevron-left {background-image: url(../images/icon/chevron_left.svg);}

.ico-chevron-right {background-image: url(../images/icon/chevron_right.svg);}

.ico-close {background-image: url(../images/icon/close.svg);}

.ico-done {background-image: url(../images/icon/done.svg);}

.ico-emoji-locked {background-image: url(../images/icon/emoji_locked.svg);}

.ico-error {background-image: url(../images/icon/error.svg);}

.ico-expand-circle-right {background-image: url(../images/icon/expand_circle_right.svg);}

.ico-headset-mic {background-image: url(../images/icon/headset_mic.svg);}

.ico-help {background-image: url(../images/icon/help.svg);}

.ico-keyboard-arrow-down {background-image: url(../images/icon/keyboard_arrow_down.svg);}

.ico-keyboard-arrow-up {background-image: url(../images/icon/keyboard_arrow_up.svg);}

.ico-menu {background-image: url(../images/icon/menu.svg);}

.ico-open-in-new {background-image: url(../images/icon/open_in_new.svg);}

.ico-phone {background-image: url(../images/icon/phone.svg);}

.ico-quick-reference-all {background-image: url(../images/icon/quick_reference_all.svg);}

.ico-remove {background-image: url(../images/icon/remove.svg);}

.ico-search {background-image: url(../images/icon/search.svg);}

.ico-ticket {background-image: url(../images/icon/ticket.svg);}

.ico-call-fill {background-image: url(../images/icon/call_fill.svg);}

.ico-podcasts {background-image: url(../images/icon/podcasts.svg);}

.ico-wifi {background-image: url(../images/icon/wifi.svg);}