@charset 'utf-8';

/* 변수 설정 */
:root {
  --bg :#FBFBFB;
  --inactive :#EFF3F5;
  --line : #f1f1f1;
  --light-bg : #FAFBFA;
  --light-gray :#BEC8CF;
  --middle-gray : #BCC1CE;
  --tab_menu : #F9F9F9;
  --dark-gray : #89949C;
  --active : #FF3100;
  --orange : #FF8300;
  --blue : #1162F8;;
  /* --plus : #D54841;
  --minus : #4A73D8; */
  --tone-down-plus : #D54841;
  --tone-down-minus : #4A73D8;
  --plus : #FF001B;
  --minus : #004AFF;
  --sell : #eef6ff;
  --buy : #fff0ef;
  --title-font : 24px;
  --transition-time: 300ms;
  --left-right-padding : 20px;

  /* 신규 */
  --main: #FF3100;
  --main_sub: #E6F0FE;
  --dark: #87909F;
  --darkgray: #7e7e7e;
  --black: #000000;
  --white: #ffffff;
  --gray: #FBFBFB;
  --ft_gray: #89949C;
  --lightgray: #FBFBFB;
  --line_header: #707070;
  --line_darkgray: #2B2B2B;
  --line_gray: #F1F1F1;
  --line_v2: #EBEDF1;
  --inactive_v2: #F4F5F6;
  --bg_v2: #f4f4f4;
  --bg_gray:#F7F8FA;
  --bg_blue:#191F43;
  --table_gray : #DBDBDB;

  --bullet: #D9D9D9;
  --bullet_active: #929DAA;

  --blue: #1162F8;
  --sky:#33F4FD;
  /*  */
  --inactive: #EFF3F5;
  --red: #FF2C51;
  --orange: #FF8300;}

}


/* 웹폰트 */
/* MONTSERRAT(영문) */
@font-face {
  font-family: "montserrat-italic";
  src: url("./font/Montserrat-LightItalic.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "montserrat";
  src: url("./font/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "montserrat";
  src: url("./font/Montserrat-Medium.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "montserrat";
  src: url("./font/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "montserrat";
  src: url("./font/Montserrat-Bold.ttf") format("truetype");
  font-weight: 800;
}

/* NOTO SANS KR(한글) */
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Medium.otf") format("opentype");
  font-weight: 600;
}
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Bold.otf") format("opentype");
  font-weight: 800;
}


/* Spoqa(한글) */
@font-face {
  font-family: "Spoqa";
  src: url("./font/SpoqaHanSansNeo-Light.otf") format("opentype");
  font-weight: 300;
}
@font-face {
  font-family: "Spoqa";
  src: url("./font/SpoqaHanSansNeo-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "Spoqa";
  src: url("./font/SpoqaHanSansNeo-Medium.otf") format("opentype");
  font-weight: 500;
}
@font-face {
  font-family: "Spoqa";
  src: url("./font/SpoqaHanSansNeo-Bold.otf") format("opentype");
  font-weight: 800;
}

.swal2-title{margin-bottom:20px !important;}

/* 글자색상 지정 공통 클래스 */
.gray_font {color: var(--dark-gray);}
.black_font {color: #000;}
.blue_font {color: #1162F8;}
.red_font {color: #ff0000;}
.time_font {color: #ff3100;}
.orange_font {color: #FF8300;}
.plus {color:#D54841;}
.minus {color:#4A73D8;}

/* #color */
.text_red { color:#FF001B; }
.text_orange { color:#FF8300; }
.text_yellow { color:#FEB42B; }
.text_green { color:#00DB33; }
.text_blue { color:#004AFF; }
.text_navy { color:navy; }
.text_purple { color:purple; }
.text_black { color:black }
.text_gray{ color:#B2B2B2;}
.text_silver{color: #BEC8CF;}
.text_white { color:white; }
.text_dark {color: var(--dark); }
.text_sky { color: var(--sky);}
.text_lightgray{ color: #B1B1B1; }
.text_wait{ color: #f2bd00 }
/* */
.text_main{ color: var(--main);}


/* 영문폰트 지정 */
.kor {font-family: "noto_sans";}
.kor_Spoqa {font-family: "Spoqa";}
.eng {font-family: "montserrat";}

/* 폰트 크기 공통클래스 */
/* 기본 폰트 크기 설정은 body에 지정하는 것을 권장 */
.font_10 { font-size:10px; }
.font_11 { font-size:11px; }
.font_12 { font-size:12px; }
.font_13 { font-size:13px; }
.font_14 { font-size:14px; }
.font_15 { font-size:15px; }
.font_16 { font-size:16px; }
.font_17 { font-size:17px; }
.font_18 { font-size:18px; }
.font_19 { font-size:19px; }
.font_20 { font-size:20px; }
.font_21 { font-size:21px; }
.font_22 { font-size:22px; }
.font_23 { font-size:23px; }
.font_24 { font-size:24px; }
.font_25 { font-size:25px; }
.font_26 { font-size:26px; }
.font_27 { font-size:27px; }
.font_28 { font-size:28px; }
.font_29 { font-size:29px; }
.font_30 { font-size:30px; }
.font_31 { font-size:31px; }
.font_32 { font-size:32px; }
.font_33 { font-size:33px; }
.font_34 { font-size:34px; }
.font_35 { font-size:35px; }
.font_36 { font-size:36px; }
.font_37 { font-size:37px; }
.font_38 { font-size:38px; }
.font_39 { font-size:39px; }
.font_40 { font-size:40px; }
.font_56 { font-size:56px;}

/* 폰트 굵기 공통클래스 */
.regular {font-weight: 400;}
.medium {font-weight: 600;}
.spoqa_meium {font-weight: 500;}
.semi_bold {font-weight: 700;}
.bold {font-weight: 800;}
.spoqa_new {font-weight: 700;}

/* 텍스트 정렬 */
.txt_left { text-align: left; }
.txt_right { text-align: right; }
.txt_center {text-align: center;}
.txt_justify { text-align: justify; }

/* 텍스트 밑줄 */
.under_line {text-decoration: underline;}

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

/* p태그 line-height 설정 */
p {line-height: 1.6; word-break: keep-all;}

/* sub 항목 타이틀 */
.sub_item_tit {font-size: 14px; font-weight: 600;}

/* market > market_main 가격 font 설정 2022.03.17 NJH */
.price_font {font-size: 16px; font-weight: 800; color: var(--orange);}

/* flex 공통클래스 */
.flex {display: flex; align-items: center;}
.flex_newend {display: flex; align-items: flex-end;}
.inline_flex{display:inline-flex; align-items:center;}
.flex_col {display: flex; flex-direction: column; }
.flex_column {display: flex; flex-direction: column; }
.flex_column {display: flex; flex-direction: column; justify-content: space-evenly;}
.space_around {justify-content: space-around;}
.space_evenly {justify-content: space-evenly;}
.flex_center {display: flex; justify-content: center; align-items: center;}
/* align-items에 따른 분류(justify-content: space_between 공통 적용) */
.flex_between {display: flex; justify-content: space-between; align-items: center;}
.flex_start {display: flex; justify-content: space-between; align-items: flex-start;}
.flex_end {display: flex; justify-content: space-between; align-items: flex-end;}
.flex_start_start {display: flex; justify-content: flex-start; align-items: flex-start;}
.flex_end_end {display: flex; justify-content: flex-end; align-items: center;}
.flex_none{flex:none;}
.no_flex {flex: none;}

/* 간격 공통클래스(padding/margin) */
.p_Y100{padding:100px 0;}
.p_20{padding:20px;}
.p_LR_10 {padding: 0 10px;}
.p_LR_12 {padding-left:12px; padding-right: 12px;}
.p_LR_20 {padding: 0 20px;}
.p_B0 {padding-bottom:0px !important;}
.p_B5 {padding-bottom: 5px;}
.p_B10 {padding-bottom: 10px;}
.p_B20 {padding-bottom: 20px;}
.p_B30 {padding-bottom: 30px;}
.p_B40 {padding-bottom: 40px;}
.p_T5 {padding-top: 5px;}
.p_T10 {padding-top: 10px;}
.p_T20 {padding-top: 20px;}
.p_T30 {padding-top: 30px;}
.p_T40 {padding-top: 40px;}
.p_T50 {padding-top: 50px;}
.p_T70 {padding-top: 70px;}

.m_R5  {margin-right: 5px;}
.m_R10  {margin-right: 10px;}
.m_R20  {margin-right: 20px;}
.m_L5  {margin-left: 5px;}
.m_L10  {margin-left: 10px;}
.m_L20  {margin-left: 20px;}
.m_L30  {margin-left: 30px;}
.m_L40  {margin-left: 40px;}
.m_L50  {margin-left: 50px;}
.m_L60  {margin-left: 60px;}
.m_L24  {margin-left: 24px;}
.m_T5 {margin-top: 5px;}
.m_T-1 {margin-top: -1px;}
.m_T-3 {margin-top: -3px;}
.m_T-5 {margin-top: -5px;}
.m_T10 {margin-top: 10px;}
.m_T20 {margin-top: 20px;}
.m_T30 {margin-top: 30px;}
.m_T40 {margin-top: 40px;}
.m_T70 {margin-top: 70px;}

.m_B5 {margin-bottom: 5px;}
.m_B-1 {margin-bottom: -1px;}
.m_B-3 {margin-bottom: -3px;}
.m_B-5 {margin-bottom: -5px;}
.m_B10 {margin-bottom: 10px;}
.m_B12 {margin-bottom: 12px;}
.m_B20 {margin-bottom: 20px;}
.m_B24 {margin-bottom: 24px;}
.m_B30 {margin-bottom: 30px;}
.m_B50 {margin-bottom: 50px;}
.m_B70 {margin-bottom: 70px;}

/*신규 마진*/
.m_1 { margin-left:1px; margin-top:1px; margin-right:1px; margin-bottom:1px; }
.m_2 { margin-left:2px; margin-top:2px; margin-right:2px; margin-bottom:2px; }
.m_3 { margin-left:3px; margin-top:3px; margin-right:3px; margin-bottom:3px; }
.m_4 { margin-left:4px; margin-top:4px; margin-right:4px; margin-bottom:4px; }
.m_5 { margin-left:5px; margin-top:5px; margin-right:5px; margin-bottom:5px; }
.m_6 { margin-left:6px; margin-top:6px; margin-right:6px; margin-bottom:6px; }
.m_7 { margin-left:7px; margin-top:7px; margin-right:7px; margin-bottom:7px; }
.m_8 { margin-left:8px; margin-top:8px; margin-right:8px; margin-bottom:8px; }
.m_9 { margin-left:9px; margin-top:9px; margin-right:9px; margin-bottom:9px; }
.m_10 { margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px; }
.m_11 { margin-left:11px; margin-top:11px; margin-right:11px; margin-bottom:11px; }
.m_12 { margin-left:12px; margin-top:12px; margin-right:12px; margin-bottom:12px; }
.m_13 { margin-left:13px; margin-top:13px; margin-right:13px; margin-bottom:13px; }
.m_14 { margin-left:14px; margin-top:14px; margin-right:14px; margin-bottom:14px; }
.m_15 { margin-left:15px; margin-top:15px; margin-right:15px; margin-bottom:15px; }
.m_16 { margin-left:16px; margin-top:16px; margin-right:16px; margin-bottom:16px; }
.m_17 { margin-left:17px; margin-top:17px; margin-right:17px; margin-bottom:17px; }
.m_18 { margin-left:18px; margin-top:18px; margin-right:18px; margin-bottom:18px; }
.m_19 { margin-left:19px; margin-top:19px; margin-right:19px; margin-bottom:19px; }
.m_20 { margin-left:20px; margin-top:20px; margin-right:20px; margin-bottom:20px; }
.m_21 { margin-left:21px; margin-top:21px; margin-right:21px; margin-bottom:21px; }
.m_22 { margin-left:22px; margin-top:22px; margin-right:22px; margin-bottom:22px; }
.m_23 { margin-left:23px; margin-top:23px; margin-right:23px; margin-bottom:23px; }
.m_24 { margin-left:24px; margin-top:24px; margin-right:24px; margin-bottom:24px; }
.m_25 { margin-left:25px; margin-top:25px; margin-right:25px; margin-bottom:25px; }
.m_26 { margin-left:26px; margin-top:26px; margin-right:26px; margin-bottom:26px; }
.m_27 { margin-left:27px; margin-top:27px; margin-right:27px; margin-bottom:27px; }
.m_28 { margin-left:28px; margin-top:28px; margin-right:28px; margin-bottom:28px; }
.m_29 { margin-left:29px; margin-top:29px; margin-right:29px; margin-bottom:29px; }
.m_30 { margin-left:30px; margin-top:30px; margin-right:30px; margin-bottom:30px; }
.m_31 { margin-left:31px; margin-top:31px; margin-right:31px; margin-bottom:31px; }
.m_32 { margin-left:32px; margin-top:32px; margin-right:32px; margin-bottom:32px; }
.m_33 { margin-left:33px; margin-top:33px; margin-right:33px; margin-bottom:33px; }
.m_34 { margin-left:34px; margin-top:34px; margin-right:34px; margin-bottom:34px; }
.m_35 { margin-left:35px; margin-top:35px; margin-right:35px; margin-bottom:35px; }
.m_36 { margin-left:36px; margin-top:36px; margin-right:36px; margin-bottom:36px; }
.m_37 { margin-left:37px; margin-top:37px; margin-right:37px; margin-bottom:37px; }
.m_38 { margin-left:38px; margin-top:38px; margin-right:38px; margin-bottom:38px; }
.m_39 { margin-left:39px; margin-top:39px; margin-right:39px; margin-bottom:39px; }
.m_40 { margin-left:40px; margin-top:40px; margin-right:40px; margin-bottom:40px; }

.mx_1 { margin-left:1px; margin-right:1px; }
.mx_2 { margin-left:2px; margin-right:2px; }
.mx_3 { margin-left:3px; margin-right:3px; }
.mx_4 { margin-left:4px; margin-right:4px; }
.mx_5 { margin-left:5px; margin-right:5px; }
.mx_6 { margin-left:6px; margin-right:6px; }
.mx_7 { margin-left:7px; margin-right:7px; }
.mx_8 { margin-left:8px; margin-right:8px; }
.mx_9 { margin-left:9px; margin-right:9px; }
.mx_10 { margin-left:10px; margin-right:10px; }
.mx_11 { margin-left:11px; margin-right:11px; }
.mx_12 { margin-left:12px; margin-right:12px; }
.mx_13 { margin-left:13px; margin-right:13px; }
.mx_14 { margin-left:14px; margin-right:14px; }
.mx_15 { margin-left:15px; margin-right:15px; }
.mx_16 { margin-left:16px; margin-right:16px; }
.mx_17 { margin-left:17px; margin-right:17px; }
.mx_18 { margin-left:18px; margin-right:18px; }
.mx_19 { margin-left:19px; margin-right:19px; }
.mx_20 { margin-left:20px; margin-right:20px; }
.mx_24 { margin-left:24px; margin-right:24px; }
.mx_30 { margin-left:30px; margin-right:30px; }
.mx_40 { margin-left:40px; margin-right:40px; }

.my_1 { margin-top:1px; margin-bottom:1px; }
.my_2 { margin-top:2px; margin-bottom:2px; }
.my_3 { margin-top:3px; margin-bottom:3px; }
.my_4 { margin-top:4px; margin-bottom:4px; }
.my_5 { margin-top:5px; margin-bottom:5px; }
.my_6 { margin-top:6px; margin-bottom:6px; }
.my_7 { margin-top:7px; margin-bottom:7px; }
.my_8 { margin-top:8px; margin-bottom:8px; }
.my_9 { margin-top:9px; margin-bottom:9px; }
.my_10 { margin-top:10px; margin-bottom:10px; }
.my_11 { margin-top:11px; margin-bottom:11px; }
.my_12 { margin-top:12px; margin-bottom:12px; }
.my_13 { margin-top:13px; margin-bottom:13px; }
.my_14 { margin-top:14px; margin-bottom:14px; }
.my_15 { margin-top:15px; margin-bottom:15px; }
.my_16 { margin-top:16px; margin-bottom:16px; }
.my_17 { margin-top:17px; margin-bottom:17px; }
.my_18 { margin-top:18px; margin-bottom:18px; }
.my_19 { margin-top:19px; margin-bottom:19px; }
.my_20 { margin-top:20px; margin-bottom:20px; }
.my_30 { margin-top:30px; margin-bottom:30px; }
.my_40 { margin-top:40px; margin-bottom:40px; }

.ml_1 { margin-left:1px; }
.ml_2 { margin-left:2px; }
.ml_3 { margin-left:3px; }
.ml_4 { margin-left:4px; }
.ml_5 { margin-left:5px; }
.ml_6 { margin-left:6px; }
.ml_7 { margin-left:7px; }
.ml_8 { margin-left:8px; }
.ml_9 { margin-left:9px; }
.ml_10 { margin-left:10px; }
.ml_11 { margin-left:11px; }
.ml_12 { margin-left:12px; }
.ml_13 { margin-left:13px; }
.ml_14 { margin-left:14px; }
.ml_15 { margin-left:15px; }
.ml_16 { margin-left:16px; }
.ml_17 { margin-left:17px; }
.ml_18 { margin-left:18px; }
.ml_19 { margin-left:19px; }
.ml_20 { margin-left:20px; }
.ml_21 { margin-left:21px; }
.ml_22 { margin-left:22px; }
.ml_23 { margin-left:23px; }
.ml_24 { margin-left:24px; }
.ml_25 { margin-left:25px; }
.ml_26 { margin-left:26px; }
.ml_27 { margin-left:27px; }
.ml_28 { margin-left:28px; }
.ml_29 { margin-left:29px; }
.ml_30 { margin-left:30px; }
.ml_31 { margin-left:31px; }
.ml_32 { margin-left:32px; }
.ml_33 { margin-left:33px; }
.ml_34 { margin-left:34px; }
.ml_35 { margin-left:35px; }
.ml_36 { margin-left:36px; }
.ml_37 { margin-left:37px; }
.ml_38 { margin-left:38px; }
.ml_39 { margin-left:39px; }
.ml_40 { margin-left:40px; }

.mr_1 { margin-right:1px; }
.mr_2 { margin-right:2px; }
.mr_3 { margin-right:3px; }
.mr_4 { margin-right:4px; }
.mr_5 { margin-right:5px; }
.mr_6 { margin-right:6px; }
.mr_7 { margin-right:7px; }
.mr_8 { margin-right:8px; }
.mr_9 { margin-right:9px; }
.mr_10 { margin-right:10px; }
.mr_11 { margin-right:11px; }
.mr_12 { margin-right:12px; }
.mr_13 { margin-right:13px; }
.mr_14 { margin-right:14px; }
.mr_15 { margin-right:15px; }
.mr_16 { margin-right:16px; }
.mr_17 { margin-right:17px; }
.mr_18 { margin-right:18px; }
.mr_19 { margin-right:19px; }
.mr_20 { margin-right:20px; }
.mr_21 { margin-right:21px; }
.mr_22 { margin-right:22px; }
.mr_23 { margin-right:23px; }
.mr_24 { margin-right:24px; }
.mr_25 { margin-right:25px; }
.mr_26 { margin-right:26px; }
.mr_27 { margin-right:27px; }
.mr_28 { margin-right:28px; }
.mr_29 { margin-right:29px; }
.mr_30 { margin-right:30px; }
.mr_31 { margin-right:31px; }
.mr_32 { margin-right:32px; }
.mr_33 { margin-right:33px; }
.mr_34 { margin-right:34px; }
.mr_35 { margin-right:35px; }
.mr_36 { margin-right:36px; }
.mr_37 { margin-right:37px; }
.mr_38 { margin-right:38px; }
.mr_39 { margin-right:39px; }
.mr_40 { margin-right:40px; }

.mt_1 { margin-top:1px; }
.mt_2 { margin-top:2px; }
.mt_3 { margin-top:3px; }
.mt_4 { margin-top:4px; }
.mt_5 { margin-top:5px; }
.mt_6 { margin-top:6px; }
.mt_7 { margin-top:7px; }
.mt_8 { margin-top:8px; }
.mt_9 { margin-top:9px; }
.mt_10 { margin-top:10px; }
.mt_11 { margin-top:11px; }
.mt_12 { margin-top:12px; }
.mt_13 { margin-top:13px; }
.mt_14 { margin-top:14px; }
.mt_15 { margin-top:15px; }
.mt_16 { margin-top:16px; }
.mt_17 { margin-top:17px; }
.mt_18 { margin-top:18px; }
.mt_19 { margin-top:19px; }
.mt_20 { margin-top:20px; }
.mt_21 { margin-top:21px; }
.mt_22 { margin-top:22px; }
.mt_23 { margin-top:23px; }
.mt_24 { margin-top:24px; }
.mt_25 { margin-top:25px; }
.mt_26 { margin-top:26px; }
.mt_27 { margin-top:27px; }
.mt_28 { margin-top:28px; }
.mt_29 { margin-top:29px; }
.mt_30 { margin-top:30px; }
.mt_31 { margin-top:31px; }
.mt_32 { margin-top:32px; }
.mt_33 { margin-top:33px; }
.mt_34 { margin-top:34px; }
.mt_35 { margin-top:35px; }
.mt_36 { margin-top:36px; }
.mt_37 { margin-top:37px; }
.mt_38 { margin-top:38px; }
.mt_39 { margin-top:39px; }
.mt_40 { margin-top:40px; }
.mt_46 { margin-top:46px; }
.mt_47 { margin-top:47px; }
.mt_48 { margin-top:48px; }
.mt_50 { margin-top:50px; }
.mt_60 { margin-top:60px; }

.mb_1 { margin-bottom:1px; }
.mb_2 { margin-bottom:2px; }
.mb_3 { margin-bottom:3px; }
.mb_4 { margin-bottom:4px; }
.mb_5 { margin-bottom:5px; }
.mb_6 { margin-bottom:6px; }
.mb_7 { margin-bottom:7px; }
.mb_8 { margin-bottom:8px; }
.mb_9 { margin-bottom:9px; }
.mb_10 { margin-bottom:10px; }
.mb_11 { margin-bottom:11px; }
.mb_12 { margin-bottom:12px; }
.mb_13 { margin-bottom:13px; }
.mb_14 { margin-bottom:14px; }
.mb_15 { margin-bottom:15px; }
.mb_16 { margin-bottom:16px; }
.mb_17 { margin-bottom:17px; }
.mb_18 { margin-bottom:18px; }
.mb_19 { margin-bottom:19px; }
.mb_20 { margin-bottom:20px; }
.mb_21 { margin-bottom:21px; }
.mb_22 { margin-bottom:22px; }
.mb_23 { margin-bottom:23px; }
.mb_24 { margin-bottom:24px; }
.mb_25 { margin-bottom:25px; }
.mb_26 { margin-bottom:26px; }
.mb_27 { margin-bottom:27px; }
.mb_28 { margin-bottom:28px; }
.mb_29 { margin-bottom:29px; }
.mb_30 { margin-bottom:30px; }
.mb_31 { margin-bottom:31px; }
.mb_32 { margin-bottom:32px; }
.mb_33 { margin-bottom:33px; }
.mb_34 { margin-bottom:34px; }
.mb_35 { margin-bottom:35px; }
.mb_36 { margin-bottom:36px; }
.mb_37 { margin-bottom:37px; }
.mb_38 { margin-bottom:38px; }
.mb_39 { margin-bottom:39px; }
.mb_40 { margin-bottom:40px; }
.mb_50 { margin-bottom:50px; }

/* #padding */
.p_1 { padding-left:1px; padding-top:1px; padding-right:1px; padding-bottom:1px; }
.p_2 { padding-left:2px; padding-top:2px; padding-right:2px; padding-bottom:2px; }
.p_3 { padding-left:3px; padding-top:3px; padding-right:3px; padding-bottom:3px; }
.p_4 { padding-left:4px; padding-top:4px; padding-right:4px; padding-bottom:4px; }
.p_5 { padding-left:5px; padding-top:5px; padding-right:5px; padding-bottom:5px; }
.p_6 { padding-left:6px; padding-top:6px; padding-right:6px; padding-bottom:6px; }
.p_7 { padding-left:7px; padding-top:7px; padding-right:7px; padding-bottom:7px; }
.p_8 { padding-left:8px; padding-top:8px; padding-right:8px; padding-bottom:8px; }
.p_9 { padding-left:9px; padding-top:9px; padding-right:9px; padding-bottom:9px; }
.p_10 { padding-left:10px; padding-top:10px; padding-right:10px; padding-bottom:10px; }
.p_11 { padding-left:11px; padding-top:11px; padding-right:11px; padding-bottom:11px; }
.p_12 { padding-left:12px; padding-top:12px; padding-right:12px; padding-bottom:12px; }
.p_13 { padding-left:13px; padding-top:13px; padding-right:13px; padding-bottom:13px; }
.p_14 { padding-left:14px; padding-top:14px; padding-right:14px; padding-bottom:14px; }
.p_15 { padding-left:15px; padding-top:15px; padding-right:15px; padding-bottom:15px; }
.p_16 { padding-left:16px; padding-top:16px; padding-right:16px; padding-bottom:16px; }
.p_17 { padding-left:17px; padding-top:17px; padding-right:17px; padding-bottom:17px; }
.p_18 { padding-left:18px; padding-top:18px; padding-right:18px; padding-bottom:18px; }
.p_19 { padding-left:19px; padding-top:19px; padding-right:19px; padding-bottom:19px; }
.p_20 { padding-left:20px; padding-top:20px; padding-right:20px; padding-bottom:20px; }
.p_21 { padding-left:21px; padding-top:21px; padding-right:21px; padding-bottom:2px; }
.p_22 { padding-left:22px; padding-top:22px; padding-right:22px; padding-bottom:2px; }
.p_23 { padding-left:23px; padding-top:23px; padding-right:23px; padding-bottom:2px; }
.p_24 { padding-left:24px; padding-top:24px; padding-right:24px; padding-bottom:21px; }
.p_25 { padding-left:25px; padding-top:25px; padding-right:25px; padding-bottom:2px; }
.p_26 { padding-left:26px; padding-top:26px; padding-right:26px; padding-bottom:2px; }
.p_27 { padding-left:27px; padding-top:27px; padding-right:27px; padding-bottom:2px; }
.p_28 { padding-left:28px; padding-top:28px; padding-right:28px; padding-bottom:2px; }
.p_29 { padding-left:29px; padding-top:29px; padding-right:29px; padding-bottom:2px; }
.p_30 { padding-left:30px; padding-top:30px; padding-right:30px; padding-bottom:30px; }
.p_31 { padding-left:31px; padding-top:31px; padding-right:31px; padding-bottom:31px; }
.p_32 { padding-left:32px; padding-top:32px; padding-right:32px; padding-bottom:32px; }
.p_33 { padding-left:33px; padding-top:33px; padding-right:33px; padding-bottom:33px; }
.p_34 { padding-left:34px; padding-top:34px; padding-right:34px; padding-bottom:34px; }
.p_35 { padding-left:35px; padding-top:35px; padding-right:35px; padding-bottom:35px; }
.p_36 { padding-left:36px; padding-top:36px; padding-right:36px; padding-bottom:36px; }
.p_37 { padding-left:37px; padding-top:37px; padding-right:37px; padding-bottom:37px; }
.p_38 { padding-left:38px; padding-top:38px; padding-right:38px; padding-bottom:38px; }
.p_39 { padding-left:39px; padding-top:39px; padding-right:39px; padding-bottom:39px; }
.p_40 { padding-left:40px; padding-top:40px; padding-right:40px; padding-bottom:40px; }

.px_1 { padding-left:1px; padding-right:1px; }
.px_2 { padding-left:2px; padding-right:2px; }
.px_3 { padding-left:3px; padding-right:3px; }
.px_4 { padding-left:4px; padding-right:4px; }
.px_5 { padding-left:5px; padding-right:5px; }
.px_6 { padding-left:6px; padding-right:6px; }
.px_7 { padding-left:7px; padding-right:7px; }
.px_8 { padding-left:8px; padding-right:8px; }
.px_9 { padding-left:9px; padding-right:9px; }
.px_10 { padding-left:10px; padding-right:10px; }
.px_11 { padding-left:11px; padding-right:11px; }
.px_12 { padding-left:12px; padding-right:12px; }
.px_13 { padding-left:13px; padding-right:13px; }
.px_14 { padding-left:14px; padding-right:14px; }
.px_15 { padding-left:15px; padding-right:15px; }
.px_16 { padding-left:16px; padding-right:16px; }
.px_17 { padding-left:17px; padding-right:17px; }
.px_18 { padding-left:18px; padding-right:18px; }
.px_19 { padding-left:19px; padding-right:19px; }
.px_20 { padding-left:20px; padding-right:20px; }
.px_30 { padding-left:30px; padding-right:30px; }
.px_40 { padding-left:40px; padding-right:40px; }
.px_50 { padding-left:50px; padding-right:50px; }

.py_1 { padding-top:1px; padding-bottom:1px; }
.py_2 { padding-top:2px; padding-bottom:2px; }
.py_3 { padding-top:3px; padding-bottom:3px; }
.py_4 { padding-top:4px; padding-bottom:4px; }
.py_5 { padding-top:5px; padding-bottom:5px; }
.py_6 { padding-top:6px; padding-bottom:6px; }
.py_7 { padding-top:7px; padding-bottom:7px; }
.py_8 { padding-top:8px; padding-bottom:8px; }
.py_9 { padding-top:9px; padding-bottom:9px; }
.py_10 { padding-top:10px; padding-bottom:10px; }
.py_11 { padding-top:11px; padding-bottom:11px; }
.py_12 { padding-top:12px; padding-bottom:12px; }
.py_13 { padding-top:13px; padding-bottom:13px; }
.py_14 { padding-top:14px; padding-bottom:14px; }
.py_15 { padding-top:15px; padding-bottom:15px; }
.py_16 { padding-top:16px; padding-bottom:16px; }
.py_17 { padding-top:17px; padding-bottom:17px; }
.py_18 { padding-top:18px; padding-bottom:18px; }
.py_19 { padding-top:19px; padding-bottom:19px; }
.py_20 { padding-top:20px; padding-bottom:20px; }
.py_30 { padding-top:30px; padding-bottom:30px; }
.py_40 { padding-top:40px; padding-bottom:20px; }
.py_50 { padding-top: 50px; padding-bottom: 50px; }

.pl_1 { padding-left:1px; }
.pl_2 { padding-left:2px; }
.pl_3 { padding-left:3px; }
.pl_4 { padding-left:4px; }
.pl_5 { padding-left:5px; }
.pl_6 { padding-left:6px; }
.pl_7 { padding-left:7px; }
.pl_8 { padding-left:8px; }
.pl_9 { padding-left:9px; }
.pl_10 { padding-left:10px; }
.pl_11 { padding-left:11px; }
.pl_12 { padding-left:12px; }
.pl_13 { padding-left:13px; }
.pl_14 { padding-left:14px; }
.pl_15 { padding-left:15px; }
.pl_16 { padding-left:16px; }
.pl_17 { padding-left:17px; }
.pl_18 { padding-left:18px; }
.pl_19 { padding-left:19px; }
.pl_20 { padding-left:20px; }
.pl_21 { padding-left:21px; }
.pl_22 { padding-left:22px; }
.pl_23 { padding-left:23px; }
.pl_24 { padding-left:24px; }
.pl_25 { padding-left:25px; }
.pl_26 { padding-left:26px; }
.pl_27 { padding-left:27px; }
.pl_28 { padding-left:28px; }
.pl_29 { padding-left:29px; }
.pl_30 { padding-left:30px; }
.pl_31 { padding-left:31px; }
.pl_32 { padding-left:32px; }
.pl_33 { padding-left:33px; }
.pl_34 { padding-left:34px; }
.pl_35 { padding-left:35px; }
.pl_36 { padding-left:36px; }
.pl_37 { padding-left:37px; }
.pl_38 { padding-left:38px; }
.pl_39 { padding-left:39px; }
.pl_40 { padding-left:40px; }

.pr_1 { padding-right:1px; }
.pr_2 { padding-right:2px; }
.pr_3 { padding-right:3px; }
.pr_4 { padding-right:4px; }
.pr_5 { padding-right:5px; }
.pr_6 { padding-right:6px; }
.pr_7 { padding-right:7px; }
.pr_8 { padding-right:8px; }
.pr_9 { padding-right:9px; }
.pr_10 { padding-right:10px; }
.pr_11 { padding-right:11px; }
.pr_12 { padding-right:12px; }
.pr_13 { padding-right:13px; }
.pr_14 { padding-right:14px; }
.pr_15 { padding-right:15px; }
.pr_16 { padding-right:16px; }
.pr_17 { padding-right:17px; }
.pr_18 { padding-right:18px; }
.pr_19 { padding-right:19px; }
.pr_20 { padding-right:20px; }
.pr_21 { padding-right:21px; }
.pr_22 { padding-right:22px; }
.pr_23 { padding-right:23px; }
.pr_24 { padding-right:24px; }
.pr_25 { padding-right:25px; }
.pr_26 { padding-right:26px; }
.pr_27 { padding-right:27px; }
.pr_28 { padding-right:28px; }
.pr_29 { padding-right:29px; }
.pr_30 { padding-right:30px; }
.pr_31 { padding-right:31px; }
.pr_32 { padding-right:32px; }
.pr_33 { padding-right:33px; }
.pr_34 { padding-right:34px; }
.pr_35 { padding-right:35px; }
.pr_36 { padding-right:36px; }
.pr_37 { padding-right:37px; }
.pr_38 { padding-right:38px; }
.pr_39 { padding-right:39px; }
.pr_40 { padding-right:40px; }

.pt_1 { padding-top:1px; }
.pt_2 { padding-top:2px; }
.pt_3 { padding-top:3px; }
.pt_4 { padding-top:4px; }
.pt_5 { padding-top:5px; }
.pt_6 { padding-top:6px; }
.pt_7 { padding-top:7px; }
.pt_8 { padding-top:8px; }
.pt_9 { padding-top:9px; }
.pt_10 { padding-top:10px; }
.pt_11 { padding-top:11px; }
.pt_12 { padding-top:12px; }
.pt_13 { padding-top:13px; }
.pt_14 { padding-top:14px; }
.pt_15 { padding-top:15px; }
.pt_16 { padding-top:16px; }
.pt_17 { padding-top:17px; }
.pt_18 { padding-top:18px; }
.pt_19 { padding-top:19px; }
.pt_20 { padding-top:20px; }
.pt_21 { padding-top:21px; }
.pt_22 { padding-top:22px; }
.pt_23 { padding-top:23px; }
.pt_24 { padding-top:24px; }
.pt_25 { padding-top:25px; }
.pt_26 { padding-top:26px; }
.pt_27 { padding-top:27px; }
.pt_28 { padding-top:28px; }
.pt_29 { padding-top:29px; }
.pt_30 { padding-top:30px; }
.pt_31 { padding-top:31px; }
.pt_32 { padding-top:32px; }
.pt_33 { padding-top:33px; }
.pt_34 { padding-top:34px; }
.pt_35 { padding-top:35px; }
.pt_36 { padding-top:36px; }
.pt_37 { padding-top:37px; }
.pt_38 { padding-top:38px; }
.pt_39 { padding-top:39px; }
.pt_40 { padding-top:40px; }
.pt_92 { padding-top:92px; }

.pb_1 { padding-bottom:1px; }
.pb_2 { padding-bottom:2px; }
.pb_3 { padding-bottom:3px; }
.pb_4 { padding-bottom:4px; }
.pb_5 { padding-bottom:5px; }
.pb_6 { padding-bottom:6px; }
.pb_7 { padding-bottom:7px; }
.pb_8 { padding-bottom:8px; }
.pb_9 { padding-bottom:9px; }
.pb_10 { padding-bottom:10px; }
.pb_11 { padding-bottom:11px; }
.pb_12 { padding-bottom:12px; }
.pb_13 { padding-bottom:13px; }
.pb_14 { padding-bottom:14px; }
.pb_15 { padding-bottom:15px; }
.pb_16 { padding-bottom:16px; }
.pb_17 { padding-bottom:17px; }
.pb_18 { padding-bottom:18px; }
.pb_19 { padding-bottom:19px; }
.pb_20 { padding-bottom:20px; }
.pb_21 { padding-bottom:21px; }
.pb_22 { padding-bottom:22px; }
.pb_23 { padding-bottom:23px; }
.pb_24 { padding-bottom:24px; }
.pb_25 { padding-bottom:25px; }
.pb_26 { padding-bottom:26px; }
.pb_27 { padding-bottom:27px; }
.pb_28 { padding-bottom:28px; }
.pb_29 { padding-bottom:29px; }
.pb_30 { padding-bottom:30px; }
.pb_31 { padding-bottom:31px; }
.pb_32 { padding-bottom:32px; }
.pb_33 { padding-bottom:33px; }
.pb_34 { padding-bottom:34px; }
.pb_35 { padding-bottom:35px; }
.pb_36 { padding-bottom:36px; }
.pb_37 { padding-bottom:37px; }
.pb_38 { padding-bottom:38px; }
.pb_39 { padding-bottom:39px; }
.pb_40 { padding-bottom:40px; }
.pb_50 { padding-bottom:50px; }




.ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ellipsis3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ellipsis4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }





/* display 관련 클래스 */
.d_none {display: none;}
.d_block {display: block;}

/* position 관련 클래스 */
.pos_relative {position: relative;}
.pos_absolute {position: absolute;}

/* 배경색 지정 */
body {background-color: #fff; width: 100%; font-size: 16px;}
/* body {background-color: var(--bg);} */

/*iOS, safari 브라우저 팝업창 배경 html, body 스크롤 방지 */
/* IE, Chrome 브라우저일 경우 */
body.hidden {overflow: hidden; overscroll-behavior: none;}

/* iOS / safari 브라우저일 경우 */
html.hidden_apple {position:static; height: 100vh;}
body.hidden_apple {position: fixed; width:100%; height:100%; touch-action: none;
    -webkit-webkit-touch-action: none;
    -moz-webkit-touch-action: none;
    -ms-webkit-touch-action: none;
    -o-webkit-touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    /* 이외의 브라우저 */
    overscroll-behavior: none;
}

/* wrapper 클래스 설정 */
.wrapper {width: 100%; margin: 0 auto; background-color: #fff; font-family: 'noto_sans'; color: #000; font-weight: 400;}
.wrapper.min_h {min-height: calc(100vh - 50px);}
.wrapper.vh_100 {min-height: 100vh;}
.wrapper.flex_column {display: flex; flex-direction: column;}
.wrapper.gray_bg {background-color: var(--bg);}

/* header */
header {position: fixed; top:0; left:50%; transform: translateX(-50%); width:100%; max-width: 800px; height: 50px; margin: 0 auto; padding: 0 10px; background-color: #fff; font-size: 20px; font-weight: 800; z-index: 500; border-bottom:1px solid var(--line);}
/* header {position: fixed; top:0; left: 50%; width:100%;  transform: translateX(-50%); height: 50px; padding: 0 20px; background-color: #fff; font-size: 20px; font-weight: 800; z-index: 100; border-bottom:1px solid var(--line);} */
header .right {line-height: 50px;}
header.flex_between .left {line-height: 1;}
header .logo {height: 20px;}
.header_box {position: relative; width:100%; max-width:800px; }
/* header 자식요소가 1개~2개인 경우 => header 태그에 flex_center 적용*/
/* .header_child_element {flex: none;} */
header.flex_center a > img {margin-bottom: -5px;}
header.flex_center .left {position: absolute; left:10px; line-height: 50px;}
header.flex_center .right {position: absolute; right:10px; line-height: 50px;}
/* header 자식요소가 3개인 경우 => header 태그에 flex_between 적용*/

/* 하단 메인 탭 메뉴 main_tab_menu */
.main_tab_cont {position: fixed; padding-bottom:env(safe-area-inset-bottom); bottom: 0; left:50%; transform: translateX(-50%); width: 100%; max-width: 800px; height: 70px; background-color: #fff; border-top:1px solid var(--line);}
.main_tab_box {position: absolute; width: 100%; max-width:800px; height: 70px; padding: 0 20px; background-color: #fff; z-index: 100;}
.main_tab_cont ul{width:100%;}
.main_tab_box li{ width: calc((100% - 40px) / 4 - 10px); height: 70px; }
.main_tab_box li a{display: block; height: 70px; padding: 10px 0; text-align: center; font-size: 12px; font-weight: 600; color:var(--dark-gray); text-align: center; }
.main_tab_box li.active a {color:var(--active);}
.main_tab_box li a span {width: 32px; height: 32px; margin: 0 auto;  background-position: center; background-repeat: no-repeat;}
.main_tab_box li:nth-child(1) a span {background-image: url(../img/layout/icon_home.svg);}
.main_tab_box li:nth-child(2) a span {background-image: url(../img/layout/icon_swap.svg);}
.main_tab_box li:nth-child(3) a span {background-image: url(../img/layout/icon_dep_with.svg);}
/* .main_tab_box li:nth-child(4) a span {background-image: url(../img/layout/icon_invest.svg);} */
.main_tab_box li:nth-child(4) a span {background-image: url(../img/layout/icon_asset.svg);}
.main_tab_box li:nth-child(1).active a span {background-image: url(../img/layout/icon_home_active.svg);}
.main_tab_box li:nth-child(2).active a span {background-image: url(../img/layout/icon_swap_active.svg);}
.main_tab_box li:nth-child(3).active a span {background-image: url(../img/layout/icon_dep_with_active.svg);}
/* .main_tab_box li:nth-child(4).active a span {background-image: url(../img/layout/icon_invest_active.svg);} */
.main_tab_box li:nth-child(4).active a span {background-image: url(../img/layout/icon_asset_active.svg);}
/* //main_tab_menu */

/* cursor:pointer 속성 클래스 */
.cursor_p {cursor:pointer;}

/* button 폰트 속성 클래스 */
button {font-family: 'noto_sans';}

/* word-break */
.word_break_all {word-break: break-all;}
.word_break_word {word-break: break-word;}
.word_keep_all {word-break: keep-all;}


/* 22.09.22 web mode - footer */
footer {flex:none; margin-top:auto; height: 276px; background-color: var(--bg);}
/* footer {width: 100%; background-color: var(--bg); border-top:1px solid var(--line); } */
.footer_box {max-width: 1400px; padding: 50px 20px 30px; margin: 0 auto;}


/* 22.12.20 sweetAlert - JJH */
.swal2-backdrop-show{background-color:rgba(0,0,0,0.5) !important;}
.swal2-popup{width:380px !important; padding:28px 24px !important; border-radius:10px !important;}
.swal2-title{padding:0 !important; font-size:22px !important; font-weight:800 !important; font-family:"noto_sans" !important; color:#000 !important;}
.swal2-html-container{margin:24px 0 !important; font-size:16px !important; font-weight:400 !important; font-family:"noto_sans" !important; color:#000 !important; word-break:keep-all !important;}
.swal2-actions{width:100% !important; margin:0 !important;}
.swal2-confirm{width:100% !important; height:50px !important; border-radius:10px !important; background-color:#000 !important; flex:1 !important; font-weight:800;}
.swal2-styled.swal2-confirm:focus{box-shadow:none !important;}
.swal2-cancel{width:100% !important; height:50px !important; border-radius:10px !important; background-color:#EFF3F5 !important; color:#000 !important; flex:1 !important;}
.swal2-styled.swal2-cancel:focus{box-shadow:none !important;}
.swal2-custom-text-bold{font-size:16px !important; font-weight:600 !important; font-family:"noto_sans" !important; color:#000 !important;}
.swal2-custom-text-gray{font-size:16px !important; font-weight:600 !important; font-family:"noto_sans" !important; color:#89949C !important; text-decoration:underline !important;}
.swal2-custom-gray-box{display:block !important; padding:20px !important; margin-bottom:24px !important; text-align:center !important; background-color:#FBFBFB !important; font-size:16px !important; font-weight:600 !important;}

/* 23.01.30 span태그 iOS에서 자동줄바꿈되는 오류방지 */
.ios_span {white-space:nowrap;}

@media (max-width:767px){ /*iPad pro 1024 × 1366 */
  /* .main_tab_cont {display: flex;}
  .main_menu {display: none;} */
}