@font-face {
    font-family: 'Recipekorea';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Recipekorea.woff') format('woff');
}
@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
}
@font-face {
     font-family: 'S-CoreDream-4Regular';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-5Medium';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-6Bold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
}
@font-face {
     font-family: 'S-CoreDream-7ExtraBold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 400;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype');
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 700;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 300;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.ttf') format('truetype');
}

.nanumbarungothic * {
 font-family: 'NanumBarunGothic', sans-serif;
}
/* **************************** 위는 폰 계산기 할때 기본!! 아래는 계산기 관련!!! */

.test{border:1px solid red;}

/* ************************** 상품 메인 ************  */
.ph_outtab {font-family: 'NanumBarunGothic', sans-serif;}
.mimg img{width:100%}
#sit_title {font-size: 2rem; font-weight: bold; margin-top: 25px;}
.sit_titles {text-align: left; padding-left: 50px}
.insecond{font-size: 1rem; padding: 3px 0; color:#484848;}
/* .insecond .pbin{padding-bottom: 12px;} */
.spec_table {padding-top: 40px}

@media screen and  (max-width: 576px){
}

@media screen and  (max-width: 768px){
  .spec_table {font-size: 0.5rem; padding: 10px 0 0 0;}
  .spec_table th{width:35%}
  .mimg img{width:150%; }
  .sit_titles {padding-left: 0px;}
  .pbin.inspan {margin-bottom: 0px;}
  .bt_fix{font-size: 0.9rem;}
}

@media screen and  (max-width: 992px){
  #sit_title {font-size: 1.3rem}
  .insecond td{font-size: 0.9rem}


}


/* 계산기 왼쪽!!!! */
/* 메뉴 제목들 */
.td_th {font-size: 1rem}
/* *************라디오 박스 */
.seletc {display: flex; font-size: 1rem; color:#484848; }
.seletc input[type="radio"]{ display:none; }
.seletc input[type="radio"] + div{
  cursor: pointer;
  padding: 8px;
  border:1px solid #BDBDBD;
  border-radius:5px;
  margin-bottom: 5px;
  min-height: 28px;
  line-height: 20px;
  text-align: center;
}
.seletc input[type="radio"]:checked + div{
    background:none;
    font-weight: 900;
    border:1px solid #ef1194;
    color: #696969;
}
/* .gongsicon div{line-height:30px;}
.sunyakcon div{line-height:30px;} */

/* *********** 요금제 선택 radio */
.selyog input[type="radio"]{
  display:none;
}
.selyog label {width: 100%}
.selyog input[type="radio"] + div{
  cursor: pointer;
  padding: 8px;
  border:1px solid #BDBDBD; border-radius:10px;
  margin-bottom: 15px;
}
.selyog input[type="radio"]:checked + div{
    border:3px solid red;
}

/* 통신사 선택 하단 텍스트 */
.ph_gotoinfo {margin-top: 10px; margin-bottom: 7px;}
.ph_gotoinfo span:first-child {padding: 5px; background: #747474; color:white; border-radius: 5px;}
.ph_gotoinfo span:nth-child(2) {margin-left: 6px; color: #CD3B3B;}

/* 모달 오픈 버튼 */
.choyog { padding: 15px; cursor: pointer; border:1px solid #BDBDBD; border-radius:10px; text-align: center; }
.ch_card { padding: 10px; cursor: pointer; border:1px solid #BDBDBD; border-radius:10px; text-align: center; }
.choyf {font-size: 1rem; color:#484848; }
.choys {line-height: 1rem; color:#484848; font-size: 0.8rem;}
.selio {font-size: 1.2rem !important;}

#yog_popup{  background: white;  padding: 50px 10px;  position: relative;  width: 90%;  cursor: pointer;  max-width: 1500px !important;  height: 60vh;  overflow: auto;}
.modal a.close-modal {top: 10px !important; right: 10px !important}
#modal_layer{background: white;  padding: 50px 10px;  position: relative;  width: 90%;  cursor: pointer;  max-width: 1500px !important;  height: 60vh;  overflow: auto;}
.modal a.close-modal {top: 10px !important; right: 10px !important}

/* 모달 닫기 버튼 */
.clooi {display: block; border:1px solid red; background-color: red; color:white; padding: 5px 8px; cursor: pointer; border-radius: 10px; font-size: 1.2rem; width:60%; text-align: center; margin: 0 auto;}

/* 모달창 */
.popup_content { margin: 10px; padding: 20px; max-width: 1000px; width:95%; border: 2px solid #444; background: white; text-align: center;}
.popup_content .inpop_head{ text-align:center; font-weight: bold; font-size: 1.2em; margin-bottom: 15px; color:red;}
.popup_content .inpop_sub{text-align: center;}
.popup_content .inpop_con .yogf{font-family: 'S-CoreDream-6Bold';}
.popup_content .inpop_con .yogs{font-family: 'S-CoreDream-4Regular';}
.popup_content .inpop_con .yogt{font-family: 'S-CoreDream-3Light'; font-size: 0.9em;}


/* 계산기 오른쪽!!!!! */
/* 결과 금액 모음들~~~~~ */

.rt_subject {width:95%; background: #f2f3f7; margin:0 auto; text-align:center;
  /* color:#FFE400; */
  color:#333333;
  font-size:1.2em; padding:10px 0; border-radius:10px; font-weight:bold;}

.ph_chaiinfo {margin-top: 10px; margin-bottom: 7px; font-size: 15px;}
.ph_chaiinfo span:first-child {padding: 3px 5px; background: #747474; color:white; border-radius: 5px;}
.ph_chaiinfo span:nth-child(2) {margin-left: 6px; color: #747474; font-weight: bold;}
.ph_chaiinfo span:nth-child(3) {color: #CD3B3B; font-weight: bold;}
.ph_chaiinfo span:nth-child(4) {color: #747474; font-weight: bold;}

.inhgt {display: flex; justify-content: space-between; flex-wrap: wrap; width:100%}

.halfgo {display: flex; justify-content: space-between; padding: 7px 16%; font-size: 1em; font-weight: normal;}
.result_calcul {width:50%; text-align: left;  font-size: 1rem;}
.result_right {width:50%; text-align: right;  font-size: 1rem; }
.halfgoto { margin: 0 auto; border:0px solid #BDBDBD; width:95%; padding: 5px 30px; font-size: 1.2em; font-weight: bolder; color: #484848; border-radius: 10px; background-color: white;}
.redin {color: #ef1194}

.result_calcul {padding-bottom: 0px !important; border:1px solid #5D5D5D; width:95%; margin: 0 auto; text-align: center; border-radius: 10px; overflow: hidden;}
.result_calcul ul{display: flex;}

.result_calcul ul:nth-child(1){background: #303030; color: #FFE400; padding: 10px 0;  font-weight: bold;}
.result_calcul ul:nth-child(2){color: #5D5D5D; padding: 15px 0; font-ize: 1.2em; font-weight: bold; }
.result_calcul ul:nth-child(2) li:nth-child(3){color:#FF4848;}
.result_calcul li{width: 33.3%; position: relative; font-size: 1.2em;}
.result_calcul li span{position: absolute; right:-5px;}

.result_wan {width:70%; margin: 0 auto; text-align: center;}
.result_wan .inwanf {background: #5D5D5D; color: white; padding: 10px 0; font-size: 1.1em; font-weight: bold;}
.result_wan .inwans {color: #5D5D5D; padding: 15px 0; font-size: 1.2em; font-weight: bold; border:1px solid #5D5D5D; box-shadow: 5px 5px 5px #8C8C8C; color:#FF4848;}

.forchk{text-align: right; padding-right: 20px; padding-top: 5px;}
.notserch_table {border:1px solid #FF5E00; width: 95%; margin: 0 auto; text-align: center;padding-bottom: 10px;border-radius: 10px; display: none;}
.nots_icon {font-size: 5em; color: #FF5E00}
.nots_text span {font-size: 1.2rem; line-height: 3rem;}
#form_btn {text-align: center; margin-top:30px;}
.btn_11 {background-color: #ed008c; font-weight: bolder; font-size: 1.5em; padding: 10px 30px; color:white; border:1px solid #FF4848; border-radius: 10px; width:90%}
/* .selselhyuh {width:50%} */

/* .yogf{ font-size: 1.3em; line-height: 1.7em; font-weight: bold;}
.yogs{ font-size: 1.2em; line-height: 1.6em; }
.yogt{ font-size: 1.1em; line-height: 1.3em; } */


/********************************** 하단 고정 계산기 */

.bt_fix  {z-index: 9999; border-top:1px solid #BDBDBD; font-size: 1.5rem; color: white; background-color: red; padding: 20px 0; font-weight: bolder;}
.bt_fix .mhalbu {position: relative;}
.bt_fix .mhalbu span{position: absolute; top:-10px; right:0px}
.bt_fix .myog {position: relative;}
.bt_fix .myog span{position: absolute; top:-10px; right:0px}
.btn_22 {display: #303030; width:90%; margin: 0 auto; background-color: #3A3A3A; font-size: 1.5rem; font-weight: bold; padding: 10px 10px; color:white !important; border:1px solid #3A3A3A; border-radius: 10px;}


.btn_33 {width:90%; border: none; background: black; color: #FFE400; font-weight: bold; padding: 20px 0;  font-size: 1.3rem; border-radius: 5px; width:90%}

@media screen and  (max-width: 992px){
  .bt_fix{font-size: 1.1rem;}
  .btn_33 {margin-top: 20px; font-size: 1.1rem; width:70%}
}
@media screen and  (max-width: 768px){
  .bt_fix{font-size: 1.1rem;}
}



/************ 스펙 비교창 *****************/
#spec_compare_top {text-align: center; margin-top: 50px; margin-bottom: 20px;}

#spec_compare_top .spec_cr_mid_subject{font-size: 2rem; font-family: 'S-CoreDream-7ExtraBold';}
#spec_compare_top .spec_cr_mid_content{display: flex;}

#spec_compare_top .spec_cr_bot_select{font-size: 1.3rem; font-family: 'S-CoreDream-6Bold'; margin-top: 15px;}
#spec_compare_top .spec_cr_bot_select span{line-height: 45px;}
#spec_compare_top .spec_cr_sub{width:50%}

#spec_compare_top .spec_cr_bot_content table{width: 90%; margin: 5px auto; border-collapse: collapse;}
#spec_compare_top .spec_cr_bot_content tr{height:50px;}
#spec_compare_top .spec_cr_bot_content th{border:1px solid #D5D5D5; width: 20%;}
#spec_compare_top .spec_cr_bot_content td{border:1px solid #D5D5D5; width: 80%}

#spec_compare_top .start_sel_de {
 font-size: 1.1rem;
 width: 40%;
 height: 45px;
 padding: .4em .9em;
 border: 1px solid #999;
 font-family: 'S-CoreDream-4Regular';
 background: url('arrow.jpg') no-repeat 98% 50%;
 border-radius: 0px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

.spec_close {border:1px solid #BDBDBD; padding: 0 20px; border-radius: 10px; cursor: pointer;}
.spec_open {border:1px solid #BDBDBD; padding: 0 20px; border-radius: 10px; display: none; cursor: pointer;}



/* *************상품 하단 인포 */

/* 인포 상단 버튼 */
.list_wrap {border:1px solid #bdbdbd; text-align: center; font-family: 'Nanum Gothic', sans-serif; font-weight: bold;}
.list_wrap .active {background: #6b6998;}
.list_wrap a{width:25%; padding: 10px; font-size: 1rem}
.list_wrap a:nth-child(-n+3){border-right:1px solid #bdbdbd; width:25%}


@media screen and (max-width: 992px){
  .list_wrap a{font-size: 0.8rem}
}

/* 인포 하단 상세 */
#sit_inf {width:100%}
#sit_inf img{width:100%}

@media screen and (max-width: 990px) {
  #sit_inf_explan img{width: 100%;}

}



.tab_con {padding: 0px;}
.tab_tit {padding: 0px;}
.non_col{ flex-direction: row !important;}
.proinfo img{max-width: 800px; width:100%}


/* 카드할인 선택 */
.chre_card {border:1px solid #BDBDBD; border-radius: 5px; text-align: center; position: relative; cursor: pointer; width:100%}

.card_img {max-width: 250px; margin: 0 auto;}
.mySwiper {width:90%; font-family: 'InfinitySans-RegularA1';}
.swiper-slide{border:1px solid #4C4C4C; border-radius: 5px; padding: 30px 5; height: 400px !important;}
.swiper_prev{position:absolute ; top:50% ; left:20px ; z-index:99999 ;}
.swiper_next{position:absolute; top:50%; right:20px; z-index:99999;}

.card_head {font-size: 1.8rem; text-align: center; padding: 15px 0;}
.card_area {max-height: 410px;}
.card_name {text-align: center;}
.card_name p {font-size: 1rem; line-height: 1.8rem; margin-bottom: 0px;}
.card_name p:nth-child(1){font-weight: bold;}
.card_name p:nth-child(2){font-size: 0.9rem; color: #4C4C4C}
.card_info {font-size: 0.9rem;}
.card_info ul{padding: 0px;}
.card_info li{display: flex; flex-wrap: wrap;}
.card_info li>div:nth-child(1){width:60%; text-align: left;}
.card_info li>div:nth-child(2){width:40%; text-align: right;}
.card_info li>div:nth-child(3){width: 60%}
.card_info li>div:nth-child(4){width: 40%; text-align: right;}



.card_bugainfo {font-size: 0.9rem; text-align: center;}
.none_card {padding:8px 25px !important; border:2px solid #8C8C8C !important; font-size: 0.9rem}


/* 체크박스!!!!! 졸라많아!!! */

.checks {position: relative; display: flex;}

.checks input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip:rect(0,0,0,0);
  border: 0
}
.checks input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.checks input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
  content: ' ';
  display: inline-block;
  width: 21px;  /* 체크박스의 너비를 지정 */
  height: 21px;  /* 체크박스의 높이를 지정 */
  line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */
  margin: -2px 8px 0 0;
  text-align: center;
  vertical-align: middle;
  background: #fafafa;
  border: 1px solid #cacece;
  border-radius : 3px;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
}
.checks input[type="checkbox"] + label:active:before,
.checks input[type="checkbox"]:checked + label:active:before {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.checks input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */
  content: '\2714';  /* 체크표시 유니코드 사용 */
  color: #99a1a7;
  text-shadow: 1px 1px #fff;
  background: #e9ecee;
  border-color: #adb8c0;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
}

.checks.small input[type="checkbox"] + label {
  font-size: 12px;
}

.checks.small input[type="checkbox"] + label:before {
  width: 17px;
  height: 17px;
  line-height: 17px;
  font-size: 11px;
}

.checks.etrans input[type="checkbox"] + label {
  padding-left: 30px;
}
.checks.etrans input[type="checkbox"] + label:before {
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 0;
  opacity: .6;
  box-shadow: none;
  border-color: #6cc0e5;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.checks.etrans input[type="checkbox"]:checked + label:before {
  position: absolute;
  content: "";
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity:1;
  background: transparent;
  border-color:transparent #6cc0e5 #6cc0e5 transparent;
  border-top-color:transparent;
  border-left-color:transparent;
  -ms-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

.no-csstransforms .checks.etrans input[type="checkbox"]:checked + label:before {
  /*content:"\2713";*/
  content: "\2714";
  top: 0;
  left: 0;
  width: 21px;
  line-height: 21px;
  color: #6cc0e5;
  text-align: center;
  border: 1px solid #6cc0e5;
}
































/* ************** 중고폰 보상 지금은 안쓴다!!!!!!!!!!   */
.joong_area {padding-top: 10px;}
.chjg { padding: 10px; cursor: pointer; border:1px solid #BDBDBD; border-radius:10px; text-align: center;}
.gopress{
  display:flex;
  justify-content: center;
}
.onde {
  padding-top: 50px;
  width:100px;
  height:100px;
  margin: 0 5px;
  background: #e9ecef;
  border:2px solid #e9ecef;
  border-radius: 10px;
  text-align: center;
}
.onde span{font-size: 1.3em; font-weight: bold;}
.company {
  background-color: white;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMSAyMmgydjJoLTIydi0yaDJ2LTIyaDE4djIyem0tMTAtM2gtMnY0aDJ2LTR6bTQgMGgtMnY0aDJ2LTR6bTQtMTdoLTE0djIwaDJ2LTVoMTB2NWgydi0yMHptLTEyIDExaDJ2MmgtMnYtMnptNCAwaDJ2MmgtMnYtMnptNCAwaDJ2MmgtMnYtMnptLTgtM2gydjJoLTJ2LTJ6bTQgMGgydjJoLTJ2LTJ6bTQgMGgydjJoLTJ2LTJ6bS04LTNoMnYyaC0ydi0yem00IDBoMnYyaC0ydi0yem00IDBoMnYyaC0ydi0yem0tOC0zaDJ2MmgtMnYtMnptNCAwaDJ2MmgtMnYtMnptNCAwaDJ2MmgtMnYtMnoiLz48L3N2Zz4=");
  background-position:50% 15%;
  background-repeat:no-repeat;
}


.device {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xOCAyNGgtMTJjLTEuMTA0IDAtMi0uODk2LTItMnYtMjBjMC0xLjEwNC44OTYtMiAyLTJoMTJjMS4xMDQgMCAyIC44OTYgMiAydjIwYzAgMS4xMDQtLjg5NiAyLTIgMnptMS01LjA4M2gtMTR2My4wODNjMCAuNTUyLjQ0OSAxIDEgMWgxMmMuNTUyIDAgMS0uNDQ4IDEtMXYtMy4wODN6bS03IDNjLS41NTMgMC0xLS40NDgtMS0xcy40NDctMSAxLTFjLjU1MiAwIC45OTkuNDQ4Ljk5OSAxcy0uNDQ3IDEtLjk5OSAxem03LTE3aC0xNHYxM2gxNHYtMTN6bS0xLTMuOTE3aC0xMmMtLjU1MSAwLTEgLjQ0OS0xIDF2MS45MTdoMTR2LTEuOTE3YzAtLjU1MS0uNDQ4LTEtMS0xem0tNC41IDEuOTE3aC0zYy0uMjc2IDAtLjUtLjIyNC0uNS0uNXMuMjI0LS41LjUtLjVoM2MuMjc2IDAgLjUuMjI0LjUuNXMtLjIyNC41LS41LjV6Ii8+PC9zdmc+");
  background-position:50% 15%;
  background-repeat:no-repeat;
}


.capacity {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTEuOTk0IDguODc3Yy0uNDU3IDAtLjgyNi4yNzctLjgyNi42MiAwIC4zNS4zNjkuNjI2LjgyNi42MjYuNDY3IDAgLjgzNy0uMjc3LjgzNy0uNjI2IDAtLjM0My0uMzctLjYyLS44MzctLjYyem0wIDIuMDA1Yy0xLjAxNSAwLTEuODQ3LS42MTYtMS44NDctMS4zODUgMC0uNzYzLjgzMi0xLjM3OCAxLjg0Ny0xLjM3OCAxLjAyNSAwIDEuODQ3LjYxNiAxLjg0NyAxLjM3OCAwIC43NjktLjgyMSAxLjM4NS0xLjg0NyAxLjM4NXptLTIuMTcyLTIuNzMxbC0uNjQ2LS4xNjFjLjI1OS0uMjkzLjU5My0uNTUyIDEuMDE1LS43NDYuNDMyLS4xOTQuODg2LS4yOTIgMS4zNTEtLjMzMmwtLjA5OC41MWMtLjMxMi4wNDEtLjYxNS4xMjEtLjkwNy4yNTItLjI5My4xMjktLjUxOS4yOS0uNzE1LjQ3N3ptLTEuMjk1LS4zMzNsLS42MzctLjE2OWMuMzc4LS40OTQuOTE4LS45MzIgMS42Mi0xLjI0OC43MDItLjMxNiAxLjQ3LS40NzggMi4yMzYtLjQ5NWwtLjA5OC40OTVjLS42MTUuMDMyLTEuMjMxLjE3LTEuNzkzLjQyMS0uNTYxLjI2LTEuMDE0LjYtMS4zMjguOTk2em0zLjQ2Ny0yLjgxOGMtMy4zMTUgMC01Ljk5NCAyLjAxNy01Ljk5NCA0LjQ5NyAwIDIuNDg2IDIuNjc5IDQuNTAzIDUuOTk0IDQuNTAzczYuMDA2LTIuMDE3IDYuMDA2LTQuNTAzYzAtMi40OC0yLjY5LTQuNDk3LTYuMDA2LTQuNDk3em03LjAwNi0zaC0xNGwtNSAxNHY2aDI0di02bC01LTE0em0tMTIuNjY2IDJoMTEuMzMzbDMuNzUgMTFoLTE4LjgzNGwzLjc1MS0xMXptMTUuNjY2IDE2aC0xM3YtMS41YzAtLjI3Ni0uMjI0LS41LS41LS41cy0uNS4yMjQtLjUuNXYxLjVoLTF2LTEuNWMwLS4yNzYtLjIyNC0uNS0uNS0uNXMtLjUuMjI0LS41LjV2MS41aC0xdi0xLjVjMC0uMjc2LS4yMjQtLjUtLjUtLjVzLS41LjIyNC0uNS41djEuNWgtMnYtM2gyMHYzem0tMy0xLjVjMC0uMjc2LjIyNC0uNS41LS41cy41LjIyNC41LjUtLjIyNC41LS41LjUtLjUtLjIyNC0uNS0uNXoiLz48L3N2Zz4=");
  background-position:50% 15%;
  background-repeat:no-repeat;
}


.status {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAuMjk3IDI0Yy0uOTg5IDAtMS45MTktLjM4NS0yLjYxOC0xLjA4NGwtOC45LTguODExYy0uNDAxLS40MDEtLjk0NS0uNjA4LTEuNTE1LS41NjEtMS45NzMuMTUtMy44ODgtLjU1OC01LjI4Mi0xLjk1Mi0xLjI3OC0xLjI3OC0xLjk4Mi0yLjk2OC0xLjk4Mi00Ljc2IDAtMS4zMjQuNDUxLTIuODcuOS0zLjcwOGwzLjA4NSAzLjA4NSA1LjU1Ny01LjU1MWMyLjU5OSAxLjI4NCA0LjEyOSAzLjg4OCAzLjkxMiA2LjY5My0uMDQzLjU2My4xNjEgMS4xMTYuNTYyIDEuNTE2bDguODk5IDguODExYy43LjcgMS4wODQgMS42MyAxLjA4NCAyLjYxOS4wMDEgMi4wNDItMS42NiAzLjcwMy0zLjcwMiAzLjcwM3ptLTEwLjExMS0xMS4zMDJsOC45IDguODExYy4zMjQuMzI0Ljc1NC41MDIgMS4yMTEuNTAyLjk0NSAwIDEuNzEzLS43NjkgMS43MTMtMS43MTMgMC0uNDU4LS4xNzktLjg4OC0uNTAyLTEuMjEybC04LjktOC44MWMtLjgxMi0uODEyLTEuMjI2LTEuOTM0LTEuMTM4LTMuMDc2LjExNS0xLjQ4OC0uNDc0LTIuOTgtMS42NjctMy45ODlsLTUuODE5IDUuODEyLTEuOTktMS45OWMuMDUgMS4xODUuNTQxIDIuMjk4IDEuMzk1IDMuMTUyLjk4Mi45ODIgMi4zMjYgMS40ODMgMy43MjEgMS4zNzUgMS4xNDMtLjA4OSAyLjI1OC4zMTkgMy4wNzYgMS4xMzh6bTEwLjk5MiA3LjU2N2MwIC41MDQtLjQwOS45MTQtLjkxMy45MTQtLjUwNSAwLS45MTQtLjQxLS45MTQtLjkxNHMuNDA5LS45MTMuOTE0LS45MTNjLjUwNCAwIC45MTMuNDA4LjkxMy45MTN6bS0xMS44MTItMTIuMTg1bC0uNjk2LjY5NC0xLjU1Ny0xLjU1Ny42OTYtLjY5NiAxLjU1NyAxLjU1OXptLTIuNzMyLS4zODRsLS42OTYuNjk1IDEuNTU4IDEuNTU4LjY5Ni0uNjk1LTEuNTU4LTEuNTU4em0xLjk2NC03LjM1MWwtMi42NDIgMi42NDItMi4yMDQtMi4yMDNjLjg3MS0uNTA4IDEuODY3LS43ODQgMi44OTEtLjc4NC42NDUgMCAxLjMwMi4xMSAxLjk0NC4zNGwuMDExLjAwNXoiLz48L3N2Zz4=");
  background-position:50% 15%;
  background-repeat:no-repeat;
}


.chwrap{
  overflow:hidden;
  width:100%;
  margin:0 auto;
  height:400px;
  position:relative;
}
.step{
  width:100%;
  margin:0 auto;
  height:400px;
  position:absolute;
}
.ready{
  left:100%;
}

.jgresult{ text-align: center; font-size: 1.2em; }
.jgresult div:nth-child(2){font-size: 1.3em; color:#2478FF;}
.jgresult div:nth-child(3){font-size: 1.3em; color:#FF1291;}












.list_subject{font-size: 0.9rem; text-align: center !important; padding: 3px 5px !important;}