@charset "utf-8";
/* 색상 변수 설정 */
:root { --main: #ff8300; --darkgray: #7e7e7e; --white: #ffffff; --gray: #BEC8CF;--line: #f1f1f1; --border_sub: #F1F1F1;  }


/* * { box-sizing: border-box; touch-action: manipulation; } */
* { box-sizing: border-box; }
html {height: 100%; }
html, body { padding: 0; margin: 0; }
header, main, footer, section, article, aside, nav, div { display: block; }
h1, h2,h3,h4,h5,h6,p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: var(--black);  outline: none;}
button { outline: none; border: none; cursor: pointer; }
input, textarea { outline: none; border: none; appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; }

/* input type=number 증감버튼 제거 */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Firefox */
input[type=number] { -moz-appearance: textfield; }

/* 웹폰트 */
/* MONTSERRAT(영문) */
@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: 500; }
@font-face { font-family: "montserrat"; src: url("./font/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; }
@font-face { font-family: "montserrat"; src: url("./font/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; }

@font-face { font-family: "poppins"; src: url("./font/Poppins-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "poppins"; src: url("./font/Poppins-Medium.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "poppins"; src: url("./font/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; }
@font-face { font-family: "poppins"; src: url("./font/Poppins-Bold.ttf") format("truetype"); font-weight: 700; }


/* NOTO SANS KR(한글) */
@font-face { font-family: "noto"; src: url("./font/NotoSansKR-Light.otf") format("opentype"); font-weight: 300; }
@font-face { font-family: "noto"; src: url("./font/NotoSansKR-Regular.otf") format("opentype"); font-weight: 400; }
@font-face { font-family: "noto"; src: url("./font/NotoSansKR-Medium.otf") format("opentype"); font-weight: 500; }
@font-face { font-family: "noto"; src: url("./font/NotoSansKR-Bold.otf") format("opentype"); font-weight: 700; }

/* input 자동완성 배경색상 변경 */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0px 1000px #fff inset; box-shadow: 0 0 0px 1000px #fff inset; transition: background-color 5000s ease-in-out 0s; }

.bold_line_txt { text-decoration: underline; font-weight: 700; color: var(--main); }
.bold { font-weight: 700; }
.regular { font-weight: 400; }
img { display: block; }

/* font */
.font_12 { font-size: 12px; }
.font_14 { font-size: 14px; }
.font_16 { font-size: 16px; }
.font_18 { font-size: 18px; }
.font_20 { font-size: 20px; }
.font_22 { font-size: 22px; }
.font_26 { font-size: 26px; }

/*display*/
.d_none { display: none !important; }
.d_block { display: block; }

/* 텍스트 정렬 */
.txt_center { text-align: center; }
.txt_right { text-align: right; }
.txt_left { text-align: left; }
.text_red { color: #E31D2E; }
.text_main { color: var(--main); }
.text_blue { color: #1162F8; }
.color_white { color: var(--white); }
.bold { font-weight: 700}
.medium { font-weight: 500; }


/* flex 공통클래스 */
.flex { display: flex; align-items: center; }
.flex_none { flex: none; }
.flex_around { display: flex; justify-content: space-around; align-items: center; }
.flex_center { display: flex; justify-content: center; align-items: center; }
.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_justify_end { display: flex; justify-content: flex-end; align-items: center; }
.flex_wrap { flex-wrap: wrap; }

/* 간격 공통클래스(padding/margin) */
.p_LR_10 { padding: 0 10px; }
.p_LR_20 { padding: 0 20px; }
.p_0 { padding: 0; }
.p_10 { padding: 10px; }
.p_20 { padding: 20px; }
.p_TB_10 { padding: 10px 0; }
.p_TB_20 { padding: 20px 0; }
.p_TB_30 { padding: 30px 0; }
.p_B5 { padding-bottom: 5px; }
.p_B10 { padding-bottom: 10px; }
.p_B20 { padding-bottom: 20px; }
.p_B30 { padding-bottom: 30px; }
.p_10_20 { padding: 10px 20px; }
.pl10 { padding-left: 10px; }
.p_T5 { padding-top: 5px; }
.p_T10 { padding-top: 10px; }
.p_T20 { padding-top: 20px; }
.p_T30 { padding-top: 30px; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.m_0 { margin: 0; }
.m_LR_10 { margin: 0 10px; }
.m_LR_20 { margin: 0 20px; }
.m_TB_20 { margin: 20px 0; }
.m_R5 { margin-right: 5px; }
.m_R10 { margin-right: 10px; }
.m_R20 { margin-right: 20px; }
.m_R30 { margin-right: 30px; }
.m_L5 { margin-left: 5px; }
.m_L10 { margin-left: 10px; }
.m_L20 { margin-left: 20px; }
.m_L30 { margin-left: 30px; }
.m_T5 { margin-top: 5px; }
.m_T10 { margin-top: 10px; }
.m_T20 { margin-top: 20px; }
.m_T30 { margin-top: 30px; }
.m_T60 { margin-top: 60px; }
.m_B5 { margin-bottom: 5px; }
.m_B10 { margin-bottom: 10px; }
.m_B20 { margin-bottom: 20px; }
.m_B30 { margin-bottom: 30px; }


/*width*/
.w24 { width: 24%; }
.w33 { width: 33%; }
.w49 { width: 49%; }
.w75 { width: 75%; }
.w100 { width: 100%; }
.width_170 { width: 170px; }
/*//width*/

select, option { background: #fff; outline: none; }
body { background-color: #F4F7FC; }
.h_100 {height:100%;}
body.en { font-family: "montserrat"; font-weight: 500; }
body.en button {font-family: "montserrat"; font-weight: 500;  }
body.en input::placeholder {font-family: "montserrat"; }
body.en input {font-family: "montserrat"; }

body.ko { font-family: "noto"; font-weight: 500; }
body.ko button {font-family: "noto"; font-weight: 500;}
body.ko input::placeholder {font-family: "noto"; }
body.ko textarea::placeholder {font-family: "noto"; }
body.ko input {font-family: "noto"; }
body.ko textarea {font-family: "noto"; }
.height_100 { height: calc(var(--vh, 1vh) * 100); }

/* iOS / safari 브라우저일 경우 */
html.hidden_apple { position: static; height: 100vh; }
body.hidden_apple { position: fixed; 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; }
input[type="month"] { position: relative; }
input[type="month"]::-webkit-clear-button,
input[type='month']::-webkit-inner-spin-button { display: none; }
input[type='month']::-webkit-calendar-picker-indicator { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer; }
body.hidden { overflow: hidden; }
.over_auto { overflow: auto; }


/* wrapper 클래스 설정 */
/* 기본 양옆 padding값 22px */
.wrapper { width: 100%; max-width: 768px; min-height: 100%; margin: 0 auto; background-color: #fff; overflow-x: hidden; position: relative; }
.content { width: 100%; overflow: hidden; }
.bg_white { background: var(--white); }
header { margin: 0 auto; width: 100%; max-width: 768px; height: 50px; background-color: #fff; font-size: 20px; font-weight: 700; }
header a { display: block; width: 100%; height: 100%; }
.header_title { position: absolute; top: 50%; left: 50%; width: max-content; transform: translate(-50%, -50%); font-size: 18px; font-family: "montserrat";  }
.header_list { position: fixed; left:0; right:0; margin:auto;  top: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 768px; height: 50px; border-bottom: 1px solid var(--border_sub); background-color: #fff; z-index: 100; }
div.header { position: fixed; top: 0; left: 50%; padding: 0 20px; width: 100%; max-width: 768px; transform: translateX(-50%); height: 60px; font-size: 18px; font-weight: 700; z-index: 400; }

/* 아래내용 추가 230316 */

.center_header { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 180px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.header_left { position: absolute; left: 0; width: 65px; height: 100%; cursor:pointer; }
.header_left img, .header_right img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.header_left p { height:100%;}
.header_right { position: absolute; right:0; width: 65px; height: 100%; }

/*// 아래내용 추가 230316 */

/* 서브 페이지 header */
header h1 { font-size: 18px; color: var(--black); }
header.sub { justify-content: space-between; padding: 0 20px; }
header.sub h1.mynft { position: absolute; left: 50%; transform: translateX(-50%); }
header.sub a { display: block; line-height: 60px; }

.btn_active { background-color: var(--inactive); color: var(--black); }
.btn_vactive { background: var(--inactive); color: var(--gray); }
.input_basic.focus_active { border: 1px solid var(--main); }

/* input */
.input_basic { width: 100%; height: 50px; padding: 14px 45px 14px 20px; margin-top: 10px; border-radius: 10px; border: 1px solid var(--gray); font-size: 16px; font-weight: 600; }
.input_basic::placeholder { color: var(--gray); font-size: 14px; font-weight: 400; }
label { font-size: 15px; font-weight: 500; display: block;}
label span.text { display: inline-block; margin-bottom:6px;}
option { color: var(--black); font-size: 14px; padding: 10px 0; }
.select_box { padding: 10px; height: 40px; border-radius: 10px; border: 1px solid var(--fran_inactive); outline: none; color: #212121; min-width: 100px; }
.select_li select {font-size:14px;}

/* 하단 메인 탭 메뉴 main_tab_menu */
.main_tab_container { width: 100%; height:70px; margin: 0 auto; }
.main_tab_box { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 768px; height: auto; background-color: #fff; z-index: 200; border-top: 1px solid #F1F1F1;
  padding: 6px 0 calc(constant(safe-area-inset-bottom) + 6px);
 padding: 6px 0 calc(env(safe-area-inset-bottom) + 6px); }
.main_tab_box li { width: 100%;  cursor: pointer; }
.main_tab_box li a { display: block; height: 100%; }
.main_tab_box li p { padding: 36px 10px 0; background-position: center; background-repeat: no-repeat; font-size: 12px; font-weight: 600; text-align: center; color:#a3a3a3; letter-spacing: normal;  }
.btn { padding: 7px 17px; background: var(--bg); font-size: 14px; font-weight: 500; border-radius: 10px; }


/*하단 이미지 모음바*/
.main_tab_box li.planet_home p { background-image: url(../img/tab/icon_home.svg); background-position: top;}
.main_tab_box li.planet_laon p { background-image: url(../img/main_link/icon_01.svg); background-position: top; background-size: 32px; }
/* 수익 */
.main_tab_box li.planet_smart p { background-image: url(../img/main_link/icon_03.svg); background-size: 32px; background-position: top;}
/* 등록 */
.main_tab_box li.planet_nfttara p { background-image: url(../img/main_link/icon_04.svg); background-size: 32px; background-position: top;}
/* 재구매 */
.main_tab_box li.planet_scan p { background-image: url(../img/main_link/icon_02.svg);  background-size: 32px;  background-position: top;}
/* 출금 */
.main_tab_box li p.footer_active {color:var(--main);}
.cursor_p { cursor: pointer; }

.word_txt { word-break: break-all; }
.word_keep { word-break: keep-all; }
.box_height { min-height: calc(100vh - 50px); min-height: calc(100svh - 50px); height: auto; background: var(--white); }
.box_height.nft { background: #F4F7FC;}
.btn_con { width: 100%; border-radius: 10px; height: 40px; font-size: 16px; background: var(--main); color: var(--white); font-weight: 700; }
.input_design { color: #212121; width: 100%; height: 40px; padding: 8px 16px; border-radius: 6px; border: 1px solid #C3C3C3; font-size: 16px;
  font-weight: 500; font-family: "montserrat"; }
.input_design::placeholder { font-size: 14px; }
.input_design:disabled { border: none; background: #ddd; }
button.edit, .nft_createbtn { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 700; background-image: linear-gradient(to right, #FF8008 0%, #FFC837  51%, #FF8008  100%);  text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; display: block; color: var(--white);
}
button.btn { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 700;   }
.changeimg { width: 24px; height: 24px; cursor:pointer; }
hr.type2 { border: 4px solid #F8F9FB; }

/*로딩*/
.loading{position:fixed; left:0; top:0; width:100%; height:100vh; background-color:#fff; z-index:9999;}
.loading_circle{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg);width:100px; height:100px; border-radius:50%; border:2px solid var(--main); border-top-color:rgba(255,255,255,0); border-bottom-color:rgba(255,255,255,0); animation:loading 3s infinite;}
.loading_text{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:14px; font-weight:700; color:var(--sub);}


/* 22.12.16 신정운 Sweet Alert */
.title_sweet { font-size:20px; color:#212121; }
.desc_sweet { font-size:15px; color:#212121; font-weight: 400; }
.swal2-styled { margin:0 !important; }
.swal2-actions:not(.swal2-loading) .swal2-styled:active { background-image: none !important; }
.swal2-styled.swal2-default-outline:focus, .swal2-styled.swal2-cancel:focus { box-shadow: none !important; }
.swal2-actions:not(.swal2-loading) .swal2-styled:hover { background-image: none !important; }
.swal2-actions .swal2-styled.swal2-cancel { margin-left:12px !important; border:1px solid var(--line); }
.swal2-popup {width:400px !important}
.over_auto {  overflow: auto;}


@keyframes loading{
  100%{transform:translate(-50%,-50%) rotate(360deg);}
}

@media (max-width:767px) {
 .main_tab_box li p { padding:36px 0 0; font-size:11px; }
 }

 @media (max-width:375px) {
  .main_tab_box li p {font-size:10px; }
  }

@media (max-width:270px) {
 .main_tab_box li p { font-size: 10px; }
 }