@charset "utf-8";
*{font-size: 14px;}

.autotong_cont{padding: 20px 15px; width: 100%; display: flex; flex-direction: column; align-items: center;  overflow-y: scroll; height: 100vh; padding-bottom: 80px; }
.autotong_tit{font-size: 1.3em; color:#fff;}


.autotong_step01_cont,.autotong_step02_cont,.autotong_step03_cont {width: 100%;}
.autotong_step_tit{display: flex; width: 100%; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.autotong_tit2{font-size: 1em; color:#fff;}
.autotong_step_tit div {width: 100%; display: block; max-width: 20px;}
.autotong_step_tit div > img{width: 100%;}

.autotong_step01_cont ul{width: 100%; display: flex; flex-direction: column; }
.autotong_step01_cont ul li{width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;  font-size: 1.2em; margin-bottom: 10px;}

.autotong_step01_cont ul li:first-child > input{
    max-width: 120px;
}

.autotong_step01_cont ul li > label{margin-bottom: 0px; font-size: 16px; padding: 0px; }
.autotong_step01_cont ul li > input {margin:0px 10px; max-width: 50px; text-align: center; background: #fff; height: 40px;  font-size: 1em;}
.autotong_step01_cont ul li > span{width: 25%;}

.autotong_step01_cont ul li > div{display: flex; flex-direction: row; }
.autotong_step01_cont ul li > div label{color:#fff; margin-bottom: 0px;}
.autotong_step01_cont ul li > div input[type="radio"] + label:before{margin-top: 5px; }

input.autotong_btn,
input[type="button"].autotong_btn[type="submit"]{width: 100%; margin:10px auto 0; display: block; background: tomato; color:#fff; height: 40px;line-height: 40px; font-size: 1.1em; }


.autotong_step02_cont ul{display: flex; width: 100%; flex-direction: column;}
.autotong_step02_cont ul li{display: flex; width: 100%; margin-bottom: 10px;}

.autotong_step02_cont ul li input[type="checkbox"] + label{color:#fff; border:1px solid #fff; margin-bottom: 0px; width: 100%; text-align: center; padding:10px; font-size: 1.1em; font-weight: bold;}
.autotong_step02_cont ul li input[type="checkbox"] + label:before{
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0;
    background: none;
    content: '';   
    text-align: center;
    color: #212121;
    line-height: 15px;
    display: block;
    width: 100%;
    height: 0px;
}
.autotong_step02_cont ul li input[type="checkbox"]:checked + label{ border:1px solid tomato; background: tomato;}
.gt_span{position: relative; width: 100%; }
.gt_span >span{position:absolute; right:10px; top:50%; transform: translateY(-50%);}

/*popup01*/
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

.popup .popuptext {
    visibility: hidden;
    width: 250px; height: 80px;    overflow-y: scroll;
    background-color: rgb(84, 84, 84);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 10000;
    bottom: 125%;
    right:0px;
    top:30px;
  }
.popup .popuptext2 {
    visibility: hidden;
    width: 250px; height: 260px; overflow-y: scroll;
    background-color: rgb(84, 84, 84);
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 10000;
    bottom: 125%;
    right:0px;
    top:30px;
}

.popup .popuptext3 {
    visibility: hidden;
    width: 250px; height: 250px;
    overflow-y: scroll;
    background-color: rgb(84, 84, 84);
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 10000;
    bottom: 125%;
    right:0px;
    top:30px;
}

.popup .popuptext4 {
    visibility: hidden;
    width: 250px; height: 300px; overflow-y: scroll;
    background-color: rgb(84, 84, 84);
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 10000;
    bottom: 125%;
    right:0px;
    top:30px;
}

.popup .popuptext5 {
    visibility: hidden;
    width: 250px; height: 210px;
    overflow-y: scroll;
    background-color: rgb(84, 84, 84);
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 10000;
    bottom: 125%;
    right:0px;
    top:30px;
}
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
  }
  
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}
  
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
/*popup01*/



/*autotong_step03_cont - tab css*/
.autotong_tit_tab {
    list-style: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.autotong_tit_tab li {
    float: left;
    border:1px solid #2c2c2c;
    padding:2px 5px;
}

.autotong_tit_tab li a {
    display: inline;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 10px;
}
ul.autotong_tit_tab li.on{
    background-color: tomato;
    border:1px solid tomato;
}
ul.autotong_tit_tab li.on a{color:#fff;}
.autotong_tit_tab_cont .tabcont {
    display: none;
    padding: 0;
    color:black;
}
.autotong_tit_tab_cont .tabcont.on {
    display: block;
}

/*autotong_step03_cont - swiper css*/
#menu1 .swiper, #menu2 .swiper { width: 100%; height: 100%;}
#menu1 .swiper-slide, #menu2 .swiper-slide{
    text-align: center;
    font-size: 1em;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
    border:1px solid #fff;
    color:#fff;
    border-radius: 20px;
    max-width: 150px;
}
#menu1 .swiper-slide >span.ss_remove,
#menu2 .swiper-slide >span.ss_remove{
    position: absolute;
    right:10px;
    top:50%; 
    transform: translateY(-50%);
    cursor: pointer;
}
#menu1 .swiper-slide img,
#menu2 .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.autotong_step03_cont .swiper { width: 100%; }
.autotong_step03_cont .swiper .swiper-wrapper .swiper-slide{
    text-align: center;
    font-size: 1em;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
    border:1px solid #fff;
    color:#fff;
    border-radius: 20px;
    max-width: 150px;
}

.autotong_step03_cont .swiper .swiper-wrapper .swiper-slide >span.ss_remove{
    position: absolute;
    right:10px;
    top:50%; 
    transform: translateY(-50%);
    cursor: pointer;
}
.autotong_step03_cont .swiper .swiper-wrapper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.att_table01{width: 100%; margin-top: 20px;}
.att_table01 table{width: 100%; margin-bottom: 50px; display: block;}
.att_table01 table thead{background: #eeeeee; color:#000; width: 100%; display: table;}

.att_table01 table thead tr th{text-align: left; padding:5px 0px;}
.att_table01 table thead tr th input[type="checkbox"] + label:before,
.att_table01 table tbody tr td input[type="checkbox"] + label:before{margin-top: 12px;}

.att_table01 table thead tr th.sorting{background: url(https://mobilestock.etomato.com/mobilestock/Market/img/icon/sort_both.png)no-repeat; background-position: 50px; color:#000; padding-left: 10px;}

.att_table01 table tbody {max-height:300px; overflow-y: scroll; width: 100%; display: block;}
.att_table01 table tbody tr{display: table; width: 100%;}

.att_table01 table tbody tr td{padding:10px 5px; color:#fff; }


.att_table01 table thead tr th:first-child{width: 90%; text-align: left;}
.att_table01 table thead tr th:nth-child(2){width: 10%; text-align: center;}

.att_table01 table tbody tr td:first-child{width: 90%; text-align: left;}
.att_table01 table tbody tr td:nth-child(2){width: 10%; text-align: center;}

.att_table01 table.art02 tbody tr td:first-child{width: 90%;}
.att_table01 table.art02 tbody tr td:nth-child(2){width: 10%;}

.att_table01 table tbody tr td span{display: block;}
.att_table01 table tbody tr td input[type="text"]{color:#fff; border:none; text-align: center;}
.att_table01 table tbody tr td:last-child input[type="number"]{border:1px solid #fff; background: none; max-width: 50px; text-align: center; margin:0 auto; display: block; height: 30px; color:#fff;}


.att_table01 table thead tr th input[type="checkbox"] + label:before, .att_table01 table tbody tr td input[type="checkbox"] + label:before{margin-top: 2px;}
input[type="checkbox"] + label{margin-bottom: 0px;}


/*테마주*/
.autotong_theme_input {width: 100%; min-width: 90%; position: relative; }
.autotong_theme_input > input{width: 100%; color:#fff; }
.autotong_theme_input > input:valid{color:#fff;}
.autotong_theme_input > a {position: absolute; right:10px; width: 25px; top: 50%; transform: translateY(-50%); }
.autotong_theme_input > a > img{width: 100%;}


/*설정 내역*/
.autotong_plan_tit{display: flex; width: 100%; justify-content: space-between;}
.autotong_plan_tit > .popup> img{
    width: 20px;
}

.ast01{justify-content: flex-start; display: flex; align-items: center;}
.ast01 > h4{margin-right: 10px;}
.ast01 .autotong_btn_reset{width: 100px; color:#000; font-weight: normal;}


hr.line{height: 1px; display: block; width: 100%; background: #8d8d8d; border-top:none;}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}




ul.att05_select_list{display: flex; width: 100%; flex-direction: column; margin-top: 20px;}
ul.att05_select_list li{display: flex; width: 100%; margin-bottom: 10px;}
.autotong_step01_cont ul.att05_select_list li input{width: 100%; max-width: 100%; min-width: 100%; margin: 0px;}
ul.att05_select_list li input[type="text"]:valid,
ul.att05_select_list li input[type="text"]:disabled{color:#fff; border:1px solid tomato; margin-bottom: 0px; width: 100%; text-align: center; padding:10px; font-size: .9em; font-weight: bold; background: none; }


ul.att05_select_list li input[type="text"] + label{display: none;}


/*오토통 러닝화면*/
.autotong_running_cont {width: 100%; }

.autotong_running_btn{width: 100%; display: flex; flex-direction: row; justify-content: flex-start; margin-top: 10px;}
.autotong_running_btn > input {width: 100%; background: none; color:#fff;  background: tomato; height: 40px; }
.autotong_running_btn > input:hover, .autotong_running_btn > input:active{ color:#000;}
.autotong_running_btn > input:first-child{margin-right: 10px;}


.autotong_running_img{ animation:ani 1s infinite alternate; width: 100%; max-width: 200px; margin:30px auto; display: block;
    
}
@keyframes ani{
    0%{transform:translate(0,0);}
    100%{transform:translate(0,10px);}
}  
 
 

/*오토통 종목 추천*/
.autotong_state{width: 100%;}

.autotong_state_cont{width: 100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-top: 20px;}


.popup > img{width: 20px;}
.autotong_state_emoji{margin-right: 20px; max-width: 100px; }
.autotong_state_emoji > img{width: 100%; border-radius: 50%;  object-fit: cover;}

.as_cont{display: flex; width: 100%; flex-direction: column; }
.asc_p_cont{border:1px solid #ddd; padding: 5px 10px; border-radius: 4px; width: 100px; box-sizing: border-box;}

.autotong_bar_cont{ width: 100%;}
  #bar {
    width: 100%;
    background-color:#f7f6f6;
    border-radius: 2px;
    margin: 10px auto;
  }
  #progress {
    width: 10%;
    height: 30px;
    background: linear-gradient(90deg, rgba(255,218,227,1) 0%, rgba(251,115,115,1) 38%, rgba(255,0,0,.9) 100%);
    text-align: center;
    border-radius: 2px;
    line-height: 30px;
    color: white;
  }
  #progress2 {
    width: 10%;
    height: 30px;
    background: linear-gradient(90deg, rgba(205,211,255,1) 0%, rgba(115,191,251,1) 38%, rgba(0,104,255,1) 100%);
    text-align: center;
    border-radius: 2px;
    line-height: 30px;
    color: white;
  }
  #progress3 {
    width: 10%;
    height: 30px;
    background: linear-gradient(90deg, rgba(205,255,207,1) 0%, rgba(115,251,133,1) 38%, rgba(5,170,29,1) 100%);
    text-align: center;
    border-radius: 2px;
    line-height: 30px;
    color: white;
  }

.autotong_recommendation_table{width: 100%; }
.autotong_recommendation_table table{width: 100%; margin-bottom: 20px; display: block;}
.autotong_recommendation_table table thead{background: #eeeeee; color:#000; width: 100%; display: table;}

.autotong_recommendation_table table thead tr th{text-align: center;}
.autotong_recommendation_table table thead tr th input[type="checkbox"] + label:before,
.autotong_recommendation_table table tbody tr td input[type="checkbox"] + label:before{margin-top: 8px;}

.autotong_recommendation_table table tbody {max-height:300px; overflow-y: scroll; width: 100%; display: block;}
.autotong_recommendation_table table tbody.mh20 {max-height:220px; overflow-y: scroll; width: 100%; display: block;}

.autotong_recommendation_table table tbody tr{display: table; width: 100%;}

.autotong_recommendation_table table tbody tr td{padding:5px; text-align: center;}

.autotong_recommendation_table table tbody tr td:first-child{width: 5%;}
.autotong_recommendation_table table tbody tr td:nth-child(2){width: 15%;}
.autotong_recommendation_table table tbody tr td:nth-child(3){width: 30%;}
.autotong_recommendation_table table tbody tr td:nth-child(4){width: 30%;}
.autotong_recommendation_table table tbody tr td:nth-child(5){width: 20%;}

.autotong_recommendation_table table.art02 tbody tr td:first-child{width: 5%;}
.autotong_recommendation_table table.art02 tbody tr td:nth-child(2){width: 35%;}
.autotong_recommendation_table table.art02 tbody tr td:nth-child(3){width: 30%;}
.autotong_recommendation_table table.art02 tbody tr td:nth-child(4){width: 30%;}



.autotong_recommendation_table table tbody tr td span{display: block;}
.autotong_recommendation_table table tbody tr td input[type="text"]{color:#fff; border:none; text-align: center;}
.autotong_recommendation_table table tbody tr td:last-child input[type="number"]{border:1px solid #fff; background: none; max-width: 50px; text-align: center; margin:0 auto; display: block; height: 30px; color:#fff;}


/*재러닝 하기*/
.rerunning_option_cont{width: 100%;}
.rerunning_option_cont > label{color:#fff !important; font-size: 1.2em; }
.rerunning_option_cont > label > b{font-size: 0.8em;}
.rerunning_option_cont > input[type="radio"] + label:before{margin-top: 2px; margin-right: 10px;}

.ar_tit_cont{width: 100%; position: relative; margin-bottom: 10px; }
.ar_tit_cont > label{color:#fff !important;}
.ar_tit_cont > input[type="checkbox"] + label:before{margin-top: 2px; margin-right: 10px;}
.ar_tit_cont > b.ar_tit01_sub{position: absolute; right:0px; font-size: 0.9em; color:#eee;}

.capital_amount_change{width: 100%;}
.ar_input_cont{width: 100%; position: relative;}
.ar_input_cont > span{position: absolute; right:10px; color:#fff; top: 50%; transform: translateY(calc(-50% - 12px));}
.ar_input_cont > input{padding-right: 50px; text-align: right; color: #fff;}

.target_period{width: 100%;}

.ar_input_cont02{width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between;}

.ar_input_cont02 .aic_top{width: 45%; margin-right: 5%;}
.ar_input_cont02 .aic_top > input{color:#fff; text-align: right;}

.ar_input_cont02 .aic_bottom {width: 100%; display: flex; flex-direction: row;}
.ar_input_cont02 .aic_bottom > label{color:#fff; font-size: 1.2em; margin-bottom: 20px; }

.ar_input_cont02 .aic_bottom > input[type="radio"] + label:before,
.ar_input_cont02 .aic_bottom > input[type="radio"]:checked + label:before{width: 22px; height: 22px; background-size: 22px; margin-right:8px;    margin-top: -1px; }

.ar_input_cont02 .aic_bottom > input[type="radio"] + label{margin-right: 20px;}


/*재러닝하기 - round range*/
.slidecontainer { width: 100%;  }
  
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(20,200,28,1) 0%, rgba(254,235,123,1) 50%, rgba(180,0,0,1) 100%);
    outline: none;
    opacity: 1;
  }
  

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: tomato;
    cursor: pointer;
  }

  .autotong_range_txt{display: flex; justify-content: space-between;margin-top: 10px;}
  .autotong_range_txt > span{width:70px;  }

/*반응형*/
@media screen and (max-width:480px){
    .autotong_running_btn{flex-direction: column;}

    .att_table01 table thead tr th:first-child{width: 80%;}
    .att_table01 table thead tr th:nth-child(2){width: 20%;}
}