@charset "utf-8";

/*####################################### reset #######################################*/
*{margin:0; padding:0; box-sizing:border-box; font-family:"roboto";}
html{height:100%; scroll-behavior:smooth;}
body{height:100%; background-color:#EEE;}
li{list-style:none;}
a:visited,a:link{text-decoration:none;}
button,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*/}

input{
/*ios대응*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color:#000;
}

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박스 오른쪽 중앙 배치,배경 흰색*/
}

/*####################################### common(공통) #######################################*/
:root {
  /* 색상 값 */
  --main : #0ff;
  --black : #000;
  --semi_black : #323133;
  --white : #fff;
  --red : #DA4453;
  --orange : #f90;
  --yellow : #F6BB42;
  --green : #8CC152;
  --blue : #4A89DC;
  --gray : #999;
  --dark_gray : #6c6c6c;
  --light_gray : #AAB2BD;
  --line : #E6E9F4;
}

/*####################################### font-face #######################################*/
@font-face {font-family:"roboto"; src:url("./fonts/Roboto-Thin.ttf") format("opentype"); font-weight:100; font-style:normal;}
@font-face {font-family:"roboto"; src:url("./fonts/Roboto-Light.ttf") format("opentype"); font-weight:300; font-style:normal;}
@font-face {font-family:"roboto"; src:url("./fonts/Roboto-Regular.ttf") format("opentype"); font-weight:400; font-style:normal;}
@font-face {font-family:"roboto"; src:url("./fonts/Roboto-Medium.ttf") format("opentype"); font-weight:500; font-style:normal;}
@font-face {font-family:"roboto"; src:url("./fonts/Roboto-Bold.ttf") format("opentype"); font-weight:700; font-style:normal;}
@font-face {font-family:"roboto"; src:url("./fonts/Roboto-Black.ttf") format("opentype"); font-weight:900; font-style:normal;}

@font-face {font-family:"sans"; src:url("./fonts/SourceSansPro-ExtraLight.ttf") format("opentype"); font-weight:200; font-style:normal;}
@font-face {font-family:"sans"; src:url("./fonts/SourceSansPro-Light.ttf") format("opentype"); font-weight:300; font-style:normal;}
@font-face {font-family:"sans"; src:url("./fonts/SourceSansPro-Regular.ttf") format("opentype"); font-weight:400; font-style:normal;}
@font-face {font-family:"sans"; src:url("./fonts/SourceSansPro-SemiBold.ttf") format("opentype"); font-weight:600; font-style:normal;}
@font-face {font-family:"sans"; src:url("./fonts/SourceSansPro-Bold.ttf") format("opentype"); font-weight:700; font-style:normal;}
@font-face {font-family:"sans"; src:url("./fonts/SourceSansPro-Black.ttf") format("opentype"); font-weight:900; font-style:normal;}

/*####################################### wrap #######################################*/
.wrap{width:100%; min-height:100%; overflow:hidden;}
.wrap.full{display:flex; flex-direction:column;}

/*########## header ##########*/
.header{width:100%;}
.headerLayoutSafeArea{width:100%; padding-top:50px;}
.headerLayout{position:fixed; left:50%; top:0; display:flex; justify-content:space-between; transform:translateX(-50%); align-items:center; width:100%; max-width:768px; height:50px; background-color:#fff; z-index:99;}
.header_title{font-size:14px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.header_left{display:flex; justify-content:center; align-items:center; width:45px; height:50px;}
.header_right{display:flex; justify-content:center; align-items:center; width:45px; height:50px; margin-left:auto;}

/*########## container ##########*/
.container{width:100%; max-width:768px; margin:0 auto; overflow:hidden;}
.container_inner{padding:20px 16px;}
.wrap.full .container{display:flex; flex-direction:column; justify-content:center; flex-grow:1;}

/*########## footer ##########*/
.footer{position:relative; width:100%;}

/*####################################### BUTTON #######################################*/
button[type="button"]{padding:12px 20px; background-color:#CCC; color:#000; border-radius:6px; font-size:14px; font-weight:700; cursor:pointer; transition:color 0.3s, background 0.3s;}
button[type="button"].medium{padding:8px 18px; font-size:12px;}
button[type="button"].small{padding:0.5rem; font-size:10px; line-height:1;}
button[type="button"].small.font_11{font-size:11px;}

/* button - color */
button[type="button"].red{background-color:var(--red); color:#fff;}
button[type="button"].green{background-color:var(--green); color:#fff;}
button[type="button"].blue{background-color:var(--blue); color:#fff;}
button[type="button"].yellow{background-color:var(--yellow); color:#fff;}
button[type="button"].gray{background-color:var(--gray); color:#fff;}
button[type="button"].light_gray{background-color:var(--light_gray); color:#fff;}
button[type="button"].dark_gray{background-color:var(--dark_gray); color:#fff;}
button[type="button"].semi_black{background-color:var(--semi_black); color:#fff;}

/* button - hover */
button[type="button"].red:hover{background-color:#ef4c5c;}
button[type="button"].green:hover{background-color:#92cb55;}
button[type="button"].blue:hover{background-color:#4f91e8;}
button[type="button"].yellow:hover{background-color:#ffc145;}
button[type="button"].semi_black:hover{background-color:#3a393b;}

/* button - active */
button[type="button"].red:active{background-color:#d04251;}
button[type="button"].green:active{background-color:#74a144;}
button[type="button"].blue:active{background-color:#4076bd;}
button[type="button"].yellow:active{background-color:#d3a03a;}
button[type="button"].semi_black:active{background-color:#1e1e1f;}

/*####################################### FORMS #######################################*/

/*########## input, select, textarea ##########*/
.input{font-size:14px; font-weight:500; padding:8px 16px; border:1px solid var(--line); border-radius:8px; box-shadow:2px 4px 4px rgba(0,0,0,0.1);}
.select{font-size:14px; font-weight:500; padding:8px 16px; border:1px solid var(--line); border-radius:8px; box-shadow:2px 4px 4px rgba(0,0,0,0.1);}
.textarea{height:var(--h); resize:none; /**/ font-size:14px; font-weight:500; padding:8px 16px; border:1px solid var(--line); border-radius:8px; box-shadow:2px 4px 4px rgba(0,0,0,0.1);}
.input::placeholder{color:#ccc;}
.textarea::placeholder{color:#ccc;}
/* select 화살표를 커스텀 할 경우 밑에 주석을 풀고 사용해주세요 */
/* .select{appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; padding:8px 32px 8px 16px; background:url('../img/svg/icon_arrow_up.svg') no-repeat calc(100% - 10px) 50% #fff;}
.select:focus{background:url('../img/svg/icon_arrow_down.svg') no-repeat calc(100% - 10px) 50% #fff;} */
.label{display:flex; align-items:center;}
.label .text{flex:none; margin-right:10px; /**/ display:flex; align-items:center; font-size:14px; font-weight:500; }
.label .input{width:100%;/**/ }
.label .input.readonly{background-color:#ccc; color:#999;/**/ }
.label .select{width:100%;/**/ }
.label .textarea{width:100%;/**/ }
.label_col{display:flex; flex-direction:column; position:relative;}
.label_col .input.readonly{background-color:#ccc; color:#999;/**/ }
.label_col .text{margin-bottom:10px; /**/ font-size:14px; font-weight:500;}
.label_col .icon_search{width:24px; position:absolute; right:10px; bottom:5px; cursor:pointer;}

/*########## 토글 슬라이더 버튼 #########*/
.on-off-toggle {width:52px; height:28px; position: relative; display: inline-block;}
.on-off-toggle__slider {width: 52px; height: 28px; display: block; border-radius: 34px; background-color: #EFF3F5; transition: background-color 500ms}
.on-off-toggle__slider:before {content: ''; display:block; background-color:#fff; position:absolute; left:2px; bottom:2px; width:24px; height: 24px; transition: .4s; z-index: 5; border-radius: 100%; box-shadow:0px 3px 6px rgba(0,0,0,0.16);}
.on-off-toggle__input {position: absolute; opacity: 0;}
.on-off-toggle__input:checked + .on-off-toggle__slider {background-color: #92cb55}
.on-off-toggle__input:checked + .on-off-toggle__slider:before {transform: translateX(24px);}

/*########## help_text ###########*/
.help_text{font-size:12px; font-weight:500; padding:0 10px;}

/*########## keypad ###########*/
.keypad{display:grid; grid-template-columns:repeat(3,1fr); grid-column-gap:10px; grid-row-gap:10px;}
.keypad button{background-color:#fff; font-size:16px;}
.keypad button:hover{background-color:#dfdfdf;}
.keypad button:active{background-color:#9f9f9f;}

/*########## pin_box ##########*/
.pin_box{display:flex; justify-content:center; align-items:center;}
.pin_box input{display:flex; justify-content:center; align-items:center; width:30px; height:30px; border-radius:6px; background-color:#F2F2F2; margin-right:6px; text-align:center;}
.pin_box input:last-child{margin-right:0;}
.pin_active{background-color:var(--red) !important;}
.pin_active::placeholder{color:#fff;}


/*####################################### POPUP #######################################*/
.popup_bg{position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:1000;}


/*########## assetsDepositPopup ##########*/
.assetsDepositPopup{display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);  max-width:768px; width:calc(100% - 40px); z-index:99999;}
.assetsDepositPopup.active{display:block;}
.assetsDepositPopup .card{position:relative;}
.assetsDepositPopup .card_close{position:absolute; right:20px; top:20px; cursor:pointer;}

/*########## otpEnterPopup ##########*/
.otpEnterPopup{display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);  max-width:768px; width:calc(100% - 40px); z-index:99999;}
.otpEnterPopup.active{display:block;}
.otpEnterPopup .card{position:relative;}
.otpEnterPopup .card_close{position:absolute; right:20px; top:20px; cursor:pointer;}

/*########## phoneChangePopup ##########*/
.phoneChangePopup{display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);  max-width:768px; width:calc(100% - 40px); z-index:99999;}
.phoneChangePopup.active{display:block;}
.phoneChangePopup .card{position:relative;}
.phoneChangePopup .card_close{position:absolute; right:20px; top:20px; cursor:pointer;}

/*########## passChangePopup ##########*/
.passChangePopup{display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);  max-width:768px; width:calc(100% - 40px); z-index:99999;}
.passChangePopup.active{display:block;}
.passChangePopup .card{position:relative;}
.passChangePopup .card_close{position:absolute; right:20px; top:20px; cursor:pointer;}

/*########## pinChangePopup ##########*/
.pinChangePopup{display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); max-width:768px; width:calc(100% - 40px); z-index:99999;}
.pinChangePopup.active{display:block;}
.pinChangePopup .card{position:relative;}
.pinChangePopup .card_close{position:absolute; right:20px; top:20px; cursor:pointer;}

/*########## otpPopup ##########*/
.otpPopup{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);  max-width:768px; width:calc(100% - 40px); z-index:99999; display:none;}
.otpPopup.active{display:block;}
.otpPopup .card{position:relative;}
.otpPopup .card_close{position:absolute; right:20px; top:20px; cursor:pointer;}
.otpPopup .qr_img{width:300px; margin:0 auto; text-align:center}
.otpPopup .qr_img{width:100%;}

/*########## mainNoticePopup ##########*/
.mainNoticePopup{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);  max-width:700px; width:calc(100% - 40px); z-index:99999; display:none;}
.mainNoticePopup.active{display:block;}
.mainNoticePopup .card{position:relative;}
.mainNoticePopup .mainNoticePopup_content{font-size:16px; font-weight:600; margin-bottom:30px; max-height:126px; overflow:auto;}

/*####################################### BOTTOMS  ########################################*/

/*########## bottomTab ##########*/
.bottomTabsSafeArea{width:100%; padding-top:60px;}
.bottomTabs{display:flex; justify-content:space-between; align-items:center; position:fixed; left:50%; bottom:0; transform:translateX(-50%); max-width:768px; width:100%; height:60px; padding:12px 0; background-color:rgba(249, 249, 249, 0.98); transition:top 0.3s; z-index:997;}
.bottomTabs li{width:100%; height:100%;}
.bottomTabs li a{display:flex; flex-direction:column; justify-content:space-between; align-items:center; width:100%; height:100%;}
.bottomTabs li a .icon{display:block; width:24px; margin-bottom:4px;}
.bottomTabs li a .icon img{display:block; width:100%;}
.bottomTabs li a .icon .on{display:none;}
.bottomTabs li a .text{font-size:10px; color:#1f1f1f;}
.bottomTabs.active{bottom:-60px;}
.bottomTabs .active a .icon .on{display:block;}
.bottomTabs .active a .icon .off{display:none;}
.bottomTabs .active a .text{color:var(--red);}

/*########## bottomMenuWallet ##########*/
.bottomMenuWallet{position:fixed; left:50%; bottom:0; transform:translate(-50%,100%); max-width:768px; width:calc(100% - 40px); z-index:-1; transition:all 0.3s ease-in-out;}
.bottomMenuWallet .card{position:relative;}
.bottomMenuWallet .card_close{position:absolute; right:20px; top:20px; cursor:pointer;}
.bottomMenuWallet.active{transform:translate(-50%,-20px); z-index:9999}

/*########## bottomMenuSetting ##########*/
.bottomMenuSetting{position:fixed; left:50%; bottom:0; transform:translate(-50%,100%); width:calc(100% - 40px); z-index:99999; transition:all 0.3s ease-in-out;}
.bottomMenuSetting .card{position:relative;}
.bottomMenuSetting .card_close{position:absolute; right:20px; top:20px; cursor:pointer;}
.bottomMenuSetting.active{transform:translate(-50%,-20px);}

/*########## tabsPanels ##########*/
.tabsPanels{display:flex; border-top-left-radius:15px; border-top-right-radius:15px; overflow:hidden;}
.tabsPanels > li{display:flex; justify-content:center; align-items:center; width:100%; height:40px; padding:0 5px; font-size:13px; cursor:pointer; transition:all 0.3s;}
.tabsPanels > .active{background-color:var(--blue); color:#fff;}
.panelsTabs{position:relative;/**/ padding:20px;}
.panelsTabs > li{display:none;/**/ width:100%; height:100%;}
.panelsTabs > li:first-child{display:block;}

/*########## bottomButtonSafeArea ##########*/
.bottomButtonSafeArea{width:100%; height:83px;}
.bottomButton{position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:768px; display:flex; justify-content:center; align-content:center; padding:20px; background-color:#fff;}

/*######################################## LIST ########################################*/

/* text_list */
.text_list{width:100%;}
.text_list li{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.text_list li:last-child{margin-bottom:0px;}
.text_list li .title{flex:none; font-size:15px; font-weight:700; color:#000; margin-right:20px;}
.text_list li .content{font-size:14px; color:#999; word-break:break-all;}

.text_list.reverse{width:100%;}
.text_list.reverse li{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.text_list.reverse li:last-child{margin-bottom:0px;}
.text_list.reverse li .title{width:80px; flex:none; font-size:15px; color:#999; margin-right:20px;}
.text_list.reverse li .content{font-size:14px; color:#000; font-weight:700; word-break:break-all;}

/*########## coin_list ##########*/
.coin_item{display:flex; align-items:center; padding:30px 0 16px; border-bottom:2px solid rgba(0, 0, 0, 0.05);}
.coin_item:last-child{padding-bottom:0; border-bottom:none;}
.coin_item .img{margin-right:16px; flex:none;}
.coin_item .img img{width:50px;}
.coin_item .info{display:flex; justify-content:space-between; align-items:center; width:100%;}
.coin_item .text .amount{font-size:16px; font-weight:700; font-family:"sans"; margin-bottom:4px;}
.coin_item .text .wallet{font-size:10px; color:var(--light_gray);}
.coin_item .btn{margin-left:auto;}

@media all and (min-width:320px) and (max-width:410px) {
  .coin_item .info{flex-direction:column; align-items:flex-start;}
  .coin_item .text .wallet{margin-bottom:5px;}
}

/*########## acc_earning_list ##########*/
.acc_earning_item{border-bottom:2px solid rgba(0, 0, 0, 0.05);}
.acc_earning_item:last-child{border-bottom:none;}
.acc_earning_item a{display:flex; align-items:center; padding:16px 0; margin-top:14px;}
.acc_earning_item:last-child a{padding-bottom:0;}
.acc_earning_item .info{display:flex; justify-content:space-between; align-items:center; width:100%;}
.acc_earning_item .img{display:flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:50%; margin-right:16px; flex:none;}
.acc_earning_item .img img{width:20px;}
.acc_earning_item .text .title{font-size:14px; font-weight:500; color:var(--black);}
.acc_earning_item .text .remain{font-size:10px; color:var(--light_gray);}
.acc_earning_item .btn{margin-left:auto;}

@media all and (min-width:320px) and (max-width:410px){
  .acc_earning_item .info{flex-direction:column; align-items:flex-start;}
  .acc_earning_item .text .remain{margin-bottom:5px;}
}

/*########## wallet_list ##########*/
.wallet_item{border-bottom:2px solid rgba(0, 0, 0, 0.05);}
.wallet_item:last-child{border-bottom:none;}
.wallet_item a{display:flex; align-items:center; padding:16px 0; margin-top:14px;}
.wallet_item:last-child a{padding-bottom:0;}
.wallet_item .img{display:flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:8px; margin-right:16px;}
.wallet_item .img img{width:20px;}
.wallet_item .text .title{font-size:14px; font-weight:500; color:var(--black);}
.wallet_item .text .desc{font-size:10px; color:var(--light_gray);}
.wallet_item .btn{margin-left:auto;}

/* progress_list */
.progress_list{width:100%;}
.progress_list li{margin-bottom:30px;}
.progress_list li:last-child{margin-bottom:0px;}

/*########## setting_list ##########*/
.setting_item{border-bottom:2px solid rgba(0, 0, 0, 0.05);}
.setting_item:last-child{border-bottom:none;}
.setting_item a{display:flex; align-items:center; padding:16px 0; margin-top:14px;}
.setting_item:last-child a{padding-bottom:0;}
.setting_item .img{display:flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:8px; margin-right:16px;}
.setting_item .img img{width:20px;}
.setting_item .text .title{font-size:14px; font-weight:500; color:var(--black);}
.setting_item .text .desc{font-size:10px; color:var(--light_gray);}
.setting_item .btn{margin-left:auto;}

/*########## mypage_list ##########*/
.mypage_item{border-bottom:2px solid rgba(0, 0, 0, 0.05);}
.mypage_item:last-child{border-bottom:none;}
.mypage_item a{display:flex; align-items:center; padding:16px 0; margin-top:14px;}
.mypage_item:last-child a{padding-bottom:0;}
.mypage_item .img{display:flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:8px; margin-right:16px;}
.mypage_item .img img{width:20px;}
.mypage_item .text .title{font-size:14px; font-weight:700; color:var(--black);}
.mypage_item .text .desc{font-size:10px; color:var(--light_gray);}
.mypage_item .btn{margin-left:auto;}

/*########## earning_history_list ##########*/
.earning_history_list{max-height:324px; overflow:auto; overscroll-behavior: none;}
.earning_history_list::-webkit-scrollbar {width:0px; }
.earning_history_list::-webkit-scrollbar-thumb {background-color:#EFF3F5; border-radius:2px;}
.earning_history_list::-webkit-scrollbar-track {background-color: rgba(0,0,0,0); padding:0 10px;}
.earning_history_item{border-bottom:1px solid rgba(0, 0, 0, 0.05);}
.earning_history_item:last-child{border-bottom:none;}
.earning_history_item a{display:flex; align-items:center; padding:20px 0;}
.earning_history_item:first-child a{padding-top:0;}
.earning_history_item:last-child a{padding-bottom:0;}
.earning_history_item .img{flex:none; display:flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:50%; margin-right:20px;}
.earning_history_item .img img{width:16px;}
.earning_history_item .text{width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.earning_history_item .text .amount{font-size:14px; font-weight:500; color:var(--black);}
.earning_history_item .text .address{font-size:11px; color:var(--light_gray); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.earning_history_item .remain{margin-left:10px; flex:none;}

/*########## product_list ##########*/
.product_list{width:100%;}
.product_list > li{width:100%; padding:20px 15px; background-color:#fff; box-shadow:0 4px 24px 0 rgb(0 0 0 / 8%); border-radius:15px; margin-bottom:30px;}
.product_list > li:last-child{margin-bottom:0px;}


/*########### product_detail_list ###########*/
.product_detail_list{display:grid; grid-template-columns:repeat(3,1fr); grid-row-gap:20px; grid-column-gap:20px;}
.product_detail_list .product_detail_item .title{font-size:11px; color:var(--dark_gray);}
.product_detail_list .product_detail_item .desc{font-size:13px; font-weight:700;}


/*########### coming_soon_list ###########*/
.coming_soon_list{width:100%;}
.coming_soon_list li{position:relative; width:100%; margin-bottom:30px; padding:20px 15px; background-color:#ccc; background-image:url("../img/card_bg_semi_dark.png"); background-size:cover; background-position:center; border-radius:15px;}
.coming_soon_list li:last-child{margin-bottom:0;}
.coming_soon_list li .title{margin-bottom:4px; font-size:21px; font-weight:700; color:#fff; font-family:"sans";}
.coming_soon_list li .earning_rate{font-size:14px; font-weight:700; color:var(--light_gray)}
.coming_soon_list li .state{display:flex; align-items:center; font-size:10px; color:var(--light_gray);}
.coming_soon_list li .state img{width:14px;}

/*########### end_product_list ###########*/
.end_product_list{width:100%;}
.end_product_list li{position:relative; width:100%; margin-bottom:30px; padding:20px 15px; background-color:#ccc; background-image:url("../img/card_bg_dark.png"); background-size:cover; background-position:center; border-radius:15px;}
.end_product_list li:last-child{margin-bottom:0;}
.end_product_list li .title{margin-bottom:4px; font-size:21px; font-weight:700; color:#fff; font-family:"sans";}
.end_product_list li .earning_rate{font-size:14px; font-weight:700; color:var(--light_gray)}
.end_product_list li .state{display:flex; align-items:center; font-size:10px; color:var(--light_gray);}
.end_product_list li .state img{width:14px;}

/*########## investment_list ##########*/
.investment_list{width:100%;}
.investment_list li{width:100%; padding:20px 15px; margin-bottom:20px; background-color:#fff; box-shadow:0 4px 24px 0 rgb(0 0 0 / 8%); border-radius:15px;}
.investment_list li:last-child{margin-bottom:0;}
.investment_list li a{display:block; width:100%; height:100%;}
.investment_list li a .top{display:flex; align-items:center; margin-bottom:20px;}
.investment_list li a .img{flex:none; width:32px; height:32px; margin-right:20px; border-radius:50%; display:flex; justify-content:center; align-items:center;}
.investment_list li a .img img{width:16px;}
.investment_list li a .text{width:100%; display:flex; justify-content:space-between; align-items:center;}
.investment_list li a .text .title{font-size:14px; font-weight:500; color:#000;}
.investment_list li a .text .remain_date{font-size:11px; color:var(--light_gray);}


/*########## investment_list_complete ##########*/
.investment_list_complete{width:100%;}
.investment_list_complete li{width:100%; padding:20px 15px; margin-bottom:20px; background-color:#fff; box-shadow:0 4px 24px 0 rgb(0 0 0 / 8%); border-radius:15px; position:relative;}
.investment_list_complete li:last-child{margin-bottom:0;}
.investment_list_complete li a{display:block; width:100%; height:100%; position:absolute; left:0; top:0; border-radius:15px; background-color:rgba(0,0,0,0.6); z-index:1;}
.investment_list_complete li .top{display:flex; align-items:center; margin-bottom:20px;}
.investment_list_complete li .img{flex:none; width:32px; height:32px; margin-right:20px; border-radius:50%; display:flex; justify-content:center; align-items:center;}
.investment_list_complete li .img img{width:16px;}
.investment_list_complete li .text{width:100%; display:flex; justify-content:space-between; align-items:center;}
.investment_list_complete li .text .title{font-size:14px; font-weight:500; color:#000;}
.investment_list_complete li .text .remain_date{font-size:11px; color:var(--light_gray);}

/*######################################### OTHERS #########################################*/


/*########## loading ##########*/
.loading{position:fixed; left:0; top:0; width:100%; height:100vh; background-color:#fff; z-index:99999;}
.loading_circle{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg);width:30px; height:30px; 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 1.5s infinite;}
@keyframes loading{
  100%{transform:translate(-50%,-50%) rotate(360deg);}
}

/*########## card ##########*/
.card{width:100%; padding:20px 15px; background-color:#fff; box-shadow:0 4px 24px 0 rgb(0 0 0 / 8%); border-radius:15px;}

.card_bg{position:relative; background-image:url("../../assets/img/card_bg.jpg"); background-size:cover; background-position:center center; background-repeat:no-repeat;}
.card_bg:before{content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-color:rgba(0,0,0,0.8); border-radius:15px}

.card_bg_light{position:relative; background-image:url("../../assets/img/card_bg.jpg"); background-size:cover; background-position:center center; background-repeat:no-repeat;}
.card_bg_light:before{content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-color:rgba(0,0,0,0.3); border-radius:15px}

.card_bg.investment:before{background-image:none; background-color:rgba(0,0,0,0.6);}
.card_title{margin-bottom:5px; font-size:20px; font-weight:700;}
.card.system{padding:0; display:flex; background-color:#8CC152;}
.card.system .icon{display:flex; justify-content:center; align-items:center; padding:12px 10px; border-top-left-radius:15px; border-bottom-left-radius:15px; background-color:#a3cd75;}
.card.system .icon img{width:24px;}
.card.system .text{padding:12px 20px; color:#fff;}
.card.tab{padding:0;}

/*########## collapse ##########*/
.collapse .collapse_item .collapse_head{display:flex; align-items:center; padding:14px 16px;  font-size:13px; font-weight:700; cursor:pointer;}
.collapse .collapse_item .collapse_head .arrow{transition:all 0.3s;}
.collapse .collapse_item .collapse_body{display:none; padding:8px 16px; overflow:hidden; color:var(--dark_gray); font-size:13px;}
.collapse .collapse_item.active .collapse_head .arrow{transform:rotate(-180deg);}


/*########## hr ##########*/
hr{border-color:rgba(0, 0, 0, 0.05);}


/*########## keyframes ##########*/
img.recruit{animation:recruit 1s infinite alternate;}
@keyframes recruit {
  0%{transform:scale(0.9);}
  100%{transform:scale(1.1);}
}

/*##################################### card_notice #################################### */
.card_notice_slide{height:220px;}
.card_notice_title{font-size:24px; font-weight:700; text-align:center; margin-bottom:4px;}
.card_notice_desc{max-height:100px; overflow-y:auto; font-size:13px; text-align:center; color:var(--dark_gray); margin-top:30px;}
.card_notice_desc::-webkit-scrollbar {display:none;}
.card_notice_desc img{display:block; margin:10px auto; width:100%; max-width:300px; }

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

/* overflow */
.overflow_hidden{overflow:hidden;}
.overflow_auto{overflow:auto}
.overflow_x_auto{overflow-x:auto;}
.overflow_x_hidden{overflow-x:hidden;}
.overflow_y_auto{overflow-y:auto;}
.overflow_y_hidden{overflow-y:hidden;}

/* position */
.position_relative{position:relative;}
.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-items */
.align_start{align-items:flex-start;}
.align_end{align-items:flex-end !important;}

/* color */
.color_main{color:var(--main) !important;}
.color_white{color:var(--white) !important;}
.color_black{color:var(--black) !important;}
.color_semi_black{color:var(--semi_black) !important;}
.color_red{color:var(--red) !important;}
.color_orange{color:var(--orange) !important;}
.color_yellow{color:var(--yellow) !important;}
.color_green{color:var(--green) !important;}
.color_blue{color:var(--blue) !important;}
.color_gray{color:var(--gray) !important;}
.color_light_gray{color:var(--light_gray) !important;}
.color_dark_gray{color:var(--dark_gray) !important;}

/* background-color */
.bg_main{background-color:var(--main);}
.bg_white{background-color:var(--white);}
.bg_black{background-color:var(--black);}
.bg_semi_black{background-color:var(--semi_black);}
.bg_red{background-color:var(--red);}
.bg_orange{background-color:var(--orange);}
.bg_yellow{background-color:var(--yellow);}
.bg_green{background-color:var(--green);}
.bg_blue{background-color:var(--blue);}
.bg_gray{background-color:var(--gray);}
.bg_light_gray{background-color:var(--light_gray);}
.bg_dark_gray{background-color:var(--dark_gray);}

/* circle */
.circle32{display:flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:50%;}
.circle32 img{width:16px;}

/* 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_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_39{font-size:39px;}

/* 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 !important;}
.black{font-weight:900;}

/* eng */
.eng{font-family:"sans";}


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

/* vertical-align */
.vertical_middle{vertical-align:middle;}

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

/* width */
.w50{width:50%;}
.w100{width:100%;}

/* max-width */
.mw100{max-width:100px;}
.mw200{max-width:200px;}
.mw300{max-width:300px;}
.mw400{max-width:400px;}
.mw500{max-width:500px;}
.mw600{max-width:600px;}

/* margin */
.m_auto{margin:auto;}
.ml_auto{margin-left:auto;}
.mr_auto{margin-left:auto;}
.m10{margin:10px;}
.m20{margin:20px;}
.m30{margin:30px;}
.mt10{margin-top:10px;}
.mt16{margin-top:16px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mb4{margin-bottom:4px;}
.mb10{margin-bottom:10px}
.mb16{margin-bottom:16px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px;}
.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;}

/* padding */
.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;}
.px16{padding:0 16px;}
.px20{padding:0 20px;}
.px30{padding:0 30px;}
.py10{padding:10px 0;}
.py20{padding:20px 0;}
.py30{padding:30px 0;}
.py50{padding:50px 0;}
.py80{padding:80px 0;}
.py100{padding:100px 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;}

/* border */
.border{border:1px solid var(--line);}

/* border-radius */
.border-radius{border-radius:6px;}

/* swiper */
.card_notice_slide{padding:20px;}
.mainProductSwiper {position:relative;}
.mainProductSwiper .swiper-button-next{height:14px;}
.mainProductSwiper .swiper-button-prev{height:14px;}
.mainProductSwiper .swiper-pagination-bullet-active{background-color:#DA4453;}

.noticeSwiper{position:relative;}
.noticeSwiper .swiper-button-next{height:14px;}
.noticeSwiper .swiper-button-prev{height:14px;}
.noticeSwiper .swiper-pagination-bullet-active{background-color:#DA4453;}
.swiper-pagination{position:static;}



/*@@@@@@@@@@@@@@@@@@@@ media query @@@@@@@@@@@@@@@@@@@@*/

/* 대형 태블릿 및 소형 노트북 */
@media all and (min-width:1025px) and (max-width:1366px){

}

/* 태블릿 */
@media all and (min-width:768px) and (max-width:1024px){

}

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

}

/* 스마트폰 세로 */
@media all and (min-width:320px) and (max-width:480px){
  .product_detail_list{grid-column-gap:10px;}

  .text_list li{flex-direction:column; align-items:flex-start;}
  .text_list li .title{margin-bottom:4px;}
  .text_list.reverse li{flex-direction:column; align-items:flex-start;}
  .text_list.reverse li .title{margin-bottom:4px;}

}