@charset "utf-8";

/*########## reset ##########*/
*{margin:0; padding:0; box-sizing:border-box;}
html{height:100%; font-family:"noto"; font-weight:500; font-style:normal;}
body{height:100%; background-color:#F4F7FC;}
li{list-style:none;}
a:visited,a:link{text-decoration:none; outline:none;}
button{border:none; cursor:pointer; outline:none;}
input,select,textarea{border:none; outline:none;}
table {border-spacing:0px; border-collapse:collapse;}
body{
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

select{
/*ios대응*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color:#000;
/*화살표 배경 넣기*/
background: url('../img/svg/icon_arrow_up.svg') no-repeat 98% 50% #fff; /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
	box-shadow: 0 0 0 1000px white inset;
}


:root {
  /* color */
  --black : #000;
  --white : #fff;
  --gray : #5A607F;
  --sub_gray : #a1a1a1;
  --red : #F0142F;
  --green : #21D59B;
  --blue : #00f;
  --orange : #FF8300;
  --main : #FF8300;

  --bg : #F4F7FC;

  /* border */
  --line : #E6E9F4;
}

/* font-face */
@font-face {font-family:"noto"; src:url("./fonts/NotoSansKR-Thin.otf") format("opentype"); font-weight:100; font-style:normal;}
@font-face {font-family:"noto"; src:url("./fonts/NotoSansKR-Light.otf") format("opentype"); font-weight:300; font-style:normal;}
@font-face {font-family:"noto"; src:url("./fonts/NotoSansKR-Regular.otf") format("opentype"); font-weight:400; font-style:normal;}
@font-face {font-family:"noto"; src:url("./fonts/NotoSansKR-Medium.otf") format("opentype"); font-weight:500; font-style:normal;}
@font-face {font-family:"noto"; src:url("./fonts/NotoSansKR-Bold.otf") format("opentype"); font-weight:700; font-style:normal;}

@font-face {font-family:"mont"; src:url("./fonts/Montserrat-Regular.ttf") format("opentype"); font-weight:400; font-style:normal;}
@font-face {font-family:"mont"; src:url("./fonts/Montserrat-Medium.ttf") format("opentype"); font-weight:500; font-style:normal;}
@font-face {font-family:"mont"; src:url("./fonts/Montserrat-SemiBold.ttf") format("opentype"); font-weight:600; font-style:normal;}
@font-face {font-family:"mont"; src:url("./fonts/Montserrat-Bold.ttf") format("opentype"); font-weight:700; font-style:normal;}

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

/* loading */
.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 #ff8000; 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; color:#ff8000;}
@keyframes loading{
  100%{transform:translate(-50%,-50%) rotate(360deg);}
}

/* position */
.position_center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

/* flex */
.flex{display:flex; align-items:center;}
.flex_start{display:flex; justify-content:flex-start; align-items:center;}
.flex_end{display:flex; justify-content:flex-end; 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_around{display:flex; justify-content:space-around; align-items:center;}
.flex_evenly{display:flex; justify-content:space-evenly; align-items:center;}
.flex_wrap{flex-wrap:wrap;}
.flex_col{flex-direction:column;}
.flex_none{flex:none;}

.align_start{align-items:flex-start;}

/* color */
.color_black{color:var(--black);}
.color_white{color:var(--white);}
.color_red{color:var(--red);}
.color_blue{color:var(--blue);}
.color_green{color:var(--green);}
.color_gray{color:var(--gray);}
.color_main{color:var(--main);}
.color_orange{color:var(--orange);}

/* bg */
.bg_black{background-color:var(--black);}
.bg_white{background-color:var(--white);}
.bg_red{background-color:var(--red);}
.bg_green{background-color:var(--green);}

/* pointer */
.cursor_pointer{cursor:pointer;}

/* font-size */
.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_22{font-size:22px;}
.font_26{font-size:26px;}

/* font-weight */
.thin{font-weight:100;}
.light{font-weight:300;}
.regular{font-weight:400;}
.medium{font-weight:500;}
.semi_bold{font-weight:600;}
.bold{font-weight:700;}

/* eng */
.eng{font-family:"mont" !important;}

/* text-align */
.text_center{text-align:center;}
.text_left{text-align:left;}
.text_right{text-align:right;}

/* break */
.break_all{word-break:break-all;}

/* width */
.w_50{width:50%;}
.w_100{width:100%;}

/* margin, padding */
.m_auto{margin:auto;}
.m10{margin:10px;}
.m20{margin:20px;}
.m30{margin:30px;}
.mt4{margin-top:4px;}
.mt6{margin-top:6px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mb4{margin-bottom:4px;}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px;}
.mr1{margin-right:1px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.ml10{margin-left:10px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.mx10{margin:0 10px;}
.mx20{margin:0 20px;}
.mx30{margin:0 30px;}
.my10{margin:10px 0;}
.my20{margin:20px 0;}
.my30{margin:30px 0;}

.p10{padding:10px;}
.p20{padding:20px;}
.p30{padding:30px;}
.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pb10{padding-bottom:10px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pr10{padding-right:10px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pl10{padding-left:10px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.px10{padding:0 10px;}
.px20{padding:0 20px;}
.px30{padding:0 30px;}
.py10{padding:10px 0;}
.py20{padding:20px 0;}
.py30{padding:30px 0;}

/* ellipsis */
.ellipsis{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.ellipsis_line2{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

/* wrap */
.wrap{min-height:100%}

/* header */
.header{width:100%;}
.header_inner{width:100%; max-width:768px; margin:auto;}
.header_common_box{padding-top:50px;}
.header_common_box.country{padding-top:56px;}
.header_common_layout{position:fixed; left:50%; top:0; transform:translateX(-50%); width:100%; background-color:#fff; border-bottom:1px solid #F1F1F1; z-index:9998;}

/* .header_common_inner{display:flex; justify-content:space-between; align-items:center; width:100%; max-width:768px; height:50px; margin:0 auto; padding:20px 20px 0 0; } */
.header_common_inner{display:flex; justify-content:space-between; align-items:center; width:100%; max-width:768px; min-height:50px; margin:0 auto; padding:0 20px; }
.header_common_layout .header_logo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:20px; font-family:"mont"; font-weight:500; color:var(--orange);}
.header_common_layout .header_logo img{display:block;}
.header_common_layout .header_title{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:20px; font-weight:500;}
.header_common_layout .header_left{margin-right:auto; font-size:14px; font-weight:500; color:var(--gray);}
.header_common_layout .header_right{display:flex; align-items:center; margin-left:auto; font-size:14px; color:var(--gray);}
.header_common_layout .header_right a{color:var(--gray);}
/* .header_common_layout .header_right .country_change{display:flex; flex-direction:column; height:29px; font-size:10px; color:#5A607F; cursor:pointer;} */

/*220908 타라월드 로고 수정 : sjw*/
.header_common_layout .header_right .country_change{display:flex; flex-direction:column; font-size:10px; font-weight:700; font-family:"mont"; color:#5A607F; cursor:pointer; text-align: center;}
/* .header_common_layout .header_right .country_change img{width:36px; height:28px; padding:2px;} */
.header_common_layout .header_right i{padding:0 10px; font-style:normal; color:#E6E9F4;}

.header_sub_layout{position:fixed; left:50%; top:0; transform:translateX(-50%); width:100%; background-color:#fff; z-index:9997;}
.header_sub_layout .header_right{display:flex; align-items:center; margin-left:auto; font-size:14px; color:var(--gray);}
.header_sub_layout .header_right .country_change{display:flex; flex-direction:column; font-size:10px; font-weight:700; font-family:"mont"; color:#5A607F; cursor:pointer; text-align: center;}
/* .header_sub_layout .header_right .country_change img{width:36px; height:28px; padding:2px;} */
.header_j {  padding:20px 20px 0 0;}




/* content */
.content{width:100%;}
.content_inner{width:100%; max-width:768px; margin:auto; padding:20px 0;}
.content_inner_full{width:100%; max-width:768px; margin:auto;}
.content_title{margin-bottom:20px; font-size:22px; font-weight:700; text-align:center;}
.display_table{display:table; width:100%; height:100%;}
.display_table_row{display:table-row;}
.display_table_full{height:100%;}
.display_table_cell{display:table-cell; vertical-align:middle;}

/* footer */
.footer{width:100%; background-color:#E2E4F0;}
.footer_inner{width:100%; max-width:768px; margin:auto; }
.footer_common_layout{height:50px; line-height:50px; text-align:center; font-size:12px; font-family:"mont"; font-weight:400;}

/* input */
.input_label { font-size:14px; font-weight:500;}
.input_box {display:block; width: 100%; height:50px; margin-top:10px; padding:10px 20px; border:1px solid #BEC8CF; border-radius:10px; font-size:16px; font-weight:500; font-family:"noto"; }
.input_box_tq {display:block; width: 100%; height:350px; margin-top:10px; font-size:16px; font-weight:500; font-family:"noto"; }
.input_box::placeholder { font-size:16px; font-weight:500; font-family:"noto"; color:#BEC8CF; }
.input_box:focus { border:1px solid var(--main); }

.custom_select{position:relative; width:100%;}
.custom_select_option{position:absolute; left:0; top:calc(100% + 10px); width:100%; height:268px; padding:20px 10px 20px 20px; background-color:#fff; border:1px solid #BEC8CF; border-radius:10px; box-shadow:0 3px 15px rgba(0,0,0,0.06); overflow:hidden;}
.custom_select_option li{padding:10px 0; margin-bottom:10px; cursor:pointer;}
.custom_select_option li:last-child{margin-bottom:0px;}
.option_list{width:100%; height:100%; overflow-y:auto;}
.option_list::-webkit-scrollbar {width:4px;}
.option_list::-webkit-scrollbar-thumb {background-color:#EFF3F5; border-radius:2px;}
.option_list::-webkit-scrollbar-track {background-color: rgba(0,0,0,0); padding:0 10px;}
.input_select{background-image:url("../img/svg/icon_arrow_up.svg"); background-size:16px 16px; background-repeat:no-repeat; background-position:98%;}
.input_select:focus{background-image:url("../img/svg/icon_arrow_down.svg");}
.input_select option { color:#000; border-radius:10px; border:1px solid #BEC8CF; }

.input_txt { font-size: 12px;}
.input_button { width: 100%; height: auto; min-height: 50px; border-radius: 8px; background-color: var(--main); color: var(--white); font-size: 16px; font-weight: 700;}
.footer_common_layout p { padding: 20px; font-size:12px; text-align: center;}

.input_readonly{ font-weight:700; color:#777; background-color:rgba(237,237,237,0.8); border-top-left-radius:8px; border-top-right-radius:8px; user-select:none; }
.select{min-height:50px; padding:8px 26px 8px 16px; border-radius:8px; border:1px solid var(--main);}
.input_search{min-height:50px; padding:8px 16px; border-radius:8px; border:1px solid var(--main);}

.help_text{height:18px; margin-top:10px; font-size:12px; font-weight:400;}

/* textarea */
.textarea{ width:100%; margin-top:10px; min-height:300px; resize:none; padding:20px; background-color:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.08); font-family:"noto"; font-size:15px; font-weight:400; border:1px solid #BEC8CF}

/* btn */
.btn { display:flex; justify-content:center; align-items:center; width:100%; height:58px; border-radius:10px; background-image:-webkit-linear-gradient(top,#FF8300,#FD3A1D); font-size:16px; font-weight:700; font-family:"noto"; color:#fff; cursor:pointer;}
/* .btn:focus,.btn:hover{box-shadow:inset 2px 2px 4px rgb(0 0 0 / 20%), inset -4px -4px 8px rgb(0 0 0 / 20%);} */
.btn_small { height: auto; padding:10px; border-radius: 8px; background-image:-webkit-linear-gradient(top,#FF8300,#FD3A1D); color: var(--white); font-size: 16px; font-weight: 700;}
/* .btn_small:focus,.btn_small:hover{box-shadow:inset 2px 2px 4px rgb(0 0 0 / 20%), inset -4px -4px 8px rgb(0 0 0 / 20%);} */
.btn_regular{height:40px; font-size:14px;}
.btn_reversal {color:var(--main); border:1px solid var(--main); background-color:#fff; background-image:none;}
/* .btn_reversal:focus,.btn_reversal:hover{box-shadow:inset 2px 2px 4px rgb(255 128 0 / 20%), inset -4px -4px 8px rgb(255 128 0 / 20%);} */
.btn_inactive { background-image:none; background-color:#E6E6EA; color:#fff; cursor:auto;}
.btn_cliked{background-image:none; background-color:#E6E6EA; color:#5A607F; cursor:auto;}

/*overflow*/
.overflow_hidden{overflow:hidden;}


/* progress_bar 22.10.20 JJH main 에서 common으로 이동 */
.progress_box {width:calc(100% - 40px); margin:0 auto; padding: 20px; margin-bottom: 20px; background-color: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; }
.progress_box li:nth-child(odd){display: flex; justify-content: space-between; align-items: center; flex-wrap:wrap;}
.progress_bar{ margin:10px 0; background-color: #EAEAEA; border-radius: 20px;  overflow: hidden;}
.gage_bar { width:0%; height:20px; background:var(--main); border-radius: 20px; text-align: center; color:#fff; font-size:12px;}
.progress_top {font-family: "mont" !important;}
.progress_top h3, .progress_top p {font-size:16px;  font-weight: 600;}

/* input */

/* loading */

/* pagination? */

/* POPUP */
.popup_bg{position:fixed; left:50%; top:0; transform:translateX(-50%); background-color:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; width:100%; height:100%; text-align:center; z-index:9999;}
.popup_box{display:flex; flex-direction:column; justify-content:space-between; align-items:center; width:300px;  border-radius:10px; background-color:#fff; overflow:hidden;}
.popup_text{display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; flex-grow:1; padding:20px;}
.popup_title{width:100%; margin-bottom:20px; font-size:18px; font-weight: 700; word-break:break-all;}
.popup_desc{width:100%; font-size:14px; font-weight: 400; word-break:break-all; }
.popup_desc img{width:100% !important;}
.popup_btn{border-radius:0;}

.popup_main .popup_text{max-height:500px; overflow:auto; display:block; overscroll-behavior: none;}
.popup_main .popup_text .popup_desc{text-align:left;}
.popup_main .popup_text::-webkit-scrollbar {width:0px; display:none;}



/* // POPUP */

/* card */
.card{background-color:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.08);}
.card_title{padding-bottom:10px; margin-bottom:20px; font-size:18px; font-weight:700; border-bottom:1px solid #E6E9F4;}
.card_title a{position:relative; display:block; width:100%; height:100%; color:#000;}
.card_title a:after{content:""; display:block; width:16px; height:16px; position:absolute; right:0; top:50%; transform:translateY(-50%); background-image:url("../../assets/img/svg/Icon_arrow_rignt.svg"); background-size:cover; background-repeat:no-repeat;}


/* bottom_tabs */
.bottom_tabs_box{}
.bottom_tabs{width:100%; max-width:768px; height:50px; display:flex; justify-content:space-between; align-items:center; position:fixed; left:50%; bottom:0; transform:translateX(-50%);}

/* logo */
.login_logo{text-align:center; margin:40px 0;}
.login_logo img{width:200px;}

/* keyframes */

/* media query */

/* 스마트폰 가로 및 소형 테블릿 */
@media all and (min-width:481px) and (max-width:767px){

}

/* 스마트폰 세로 */
@media all and (min-width:320px) and (max-width:480px){

}