
#header {
    background: #fff !important;
    border-bottom: 1px solid #ececec !important;
}
.wrapper {
    width: 100%;
    overflow: hidden;
}
.wrapper .wrap_div {
    padding-top: 170px;
    background: #f9fafb;
    width: 100%;
}
.wrapper .wrap_div .wrap {
    width: 100% !important;
    max-width: 1066px;
    margin: 0 auto;
}
.wrapper .wrap .info_top p {
    font-size: 22px;
    color: #191919; 
    font-weight: 800;
}
.wrapper .wrap  .info_top h1 {
    font-size: 30px;
    color: #191919; 
    font-weight: 600;
    margin: 30px 0;
    margin-bottom: 70px;
}
.wrapper .wrap .form_wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 35px;
}
.wrapper .wrap .from_wrapper .group {
    position:relative; 
    margin-bottom:45px; 
    width: 510px;
}
  .group  {  
    position:relative; 
    margin-bottom:50px; 
  }
  .group_select  { 
    position:relative; 
    margin-bottom:50px; 
    border-bottom: 2px solid #bdbdbd;
  }
  .group_radio{
    width: 100%;
    margin-bottom: 50px;
  }
  .group_radio .ridio_title{
    display: block;
    color: #191919;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 30px;
  }
  .group_radio .radio_wrap{
    display: flex;
    gap: 80px;
  }
  .radio_item input{
    display: none;
  }
  .radio_item label{
    display: flex;
    gap: 20px;
    align-items: center;    
  }
  .radio_item input[type='radio']:checked + .spanover:before{    
    background: url(/common/image/arrow/mainchecked.svg) no-repeat center center;
    filter: grayscale(1);
  } 
  .radio_item span.spanover{
    position: relative;
    cursor: pointer;
    border-radius: 0px;
    color: #191919;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    padding-left: 35px !important;
  }
  .radio_item .spanover:before{
    position: absolute;
    left: 0;
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    background: url(/common/image/arrow/mainunchecked.svg) no-repeat center;

  }
  input 				{
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width: 510px !important; 
    border:none !important;
    border-bottom:2px solid #bdbdbd !important;
    background: transparent !important;
  }
  input:focus 		{ outline:none; }
  
  /* LABEL ======================================= */
  .group label 				 {
    color:#bdbdbd; 
    font-size:19px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
    font-weight: 500;
  }

  .group_select label 				 {
    color:#bdbdbd; 
    font-size:21px;
    font-weight:normal;
    font-weight: 500;
  }
  
  /* active state */
  input:focus ~ label, input:valid ~ label 		{
    top:-20px;
    font-size:18px;
    color:#191919;
  }
  input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill-selected {
    background-color: transparent !important;
}
input:-internal-autofill-selected {
    
    background-color: transparent !important;
}
  /* BOTTOM BARS ================================= */
  .bar 	{ position:relative; display:block; width:510px; }
  .bar:before, .bar:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#191919;  
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  .bar:before {
    left:0%;
  }
  
  /* active state */
  input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:100%;
  }
  
  /* HIGHLIGHTER ================================== */
  .highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }
  
  /* active state */
  input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }
  
  /* ANIMATIONS ================ */
  @-webkit-keyframes inputHighlighter {
      from { background:#191919; }
    to 	{ width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
      from { background:#191919; }
    to 	{ width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
      from { background:#191919; }
    to 	{ width:0; background:transparent; }
  }

  .wrap_txt {
    width: 100%;
    max-width: 1066px;
    margin: 0 auto;
  }
  .wrap_txt .info_top h1 {
    font-size: 30px; 
    color: #191919;
    font-weight: 600;
    margin: 30px 0;
    margin-top: 90px;
}
.wrap_txt textarea {
  width: 100%;
  min-height: 500px;
  border: 2px solid #cfcfcf; 
  border-radius: 0px;
  margin-bottom: 60px;
  padding: 20px;
  font-size: 16px;
  color: #191919;
  letter-spacing: .2px; 
}
.wrap_txt .agree {
  padding-bottom: 10px;
  border-bottom: 1px solid #cfcfcf;
  margin-bottom: 30px;
}
.wrap_txt .agree p {
  display: block;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 21px;
  color: #191919;
}
.wrap_txt .agree span {
  display: block;
  margin-bottom: 15px; 
  font-weight: 300;
  font-size: 21px;
  color: #191919;
}
.wrap_txt .btn_wrap button {background:#191919;font-size:18px;font-weight:500;border-radius:0; padding: 20px 54px;}
.wrap_txt .spanover {font-size:16px;font-weight:300;color:#191919;padding-left:27px !important;}
.wrap_txt input[type=checkbox] {display:none;}
.wrap_txt input[type="checkbox"] + .spanover {position:relative;}
.wrap_txt input[type="checkbox"] + .spanover:before {border:1px solid #cfcfcf;content:'';position:absolute;top:-2px;left:-5px; width:20px; height: 20px; cursor: pointer; border-radius: 0px;float: right;}
.wrap_txt input[type="checkbox"]:checked + .spanover:before {border:1px solid #cfcfcf;background:url('/common/front/img/sama/qa/selected.svg') #191919 no-repeat center center; float: right}


/*partner_req*/
.essential {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 35px;
}
.essential.group {
  position:relative; 
  margin-bottom:45px; 
  width: 510px;
}
#btn_checkid {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  color: #fff;
  background: #191919;
  outline: 0;
  border : 0;
  border-radius: 0;
  line-height: 38px;
  width: 92px;
  height: 38px;
  padding: 0;
  font-weight: 500;
}
.file_wrapper {
  width: 100%;
  display: flex;
  padding-bottom: 50px;
  border-bottom: 1px solid #cfcfcf;
}
.file_wrapper .file_wrap {
  width: 100% !important;
}
.file_wrapper .file_wrap input {
  border-bottom: none !important;
  padding-left: 25px;
} 
.file_wrapper .txt {
  width: 100px;
  text-align: left;
  font-size: 19px;
  color: #bdbdbd;
  padding-top: 14px;
  font-weight: 500;
}
.file_wrapper .file_box {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid #cfcfcf;
  margin-bottom: 15px !important;
}
.file_wrapper .file_box span {
  font-size: 19px;
  color: #bdbdbd;
  font-weight: 500;
}
.file_wrapper .file_box > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.file_wrapper .file_box input {
  background: #f5f5f5 !important;
  border-radius: 20px; 
  margin-bottom: 15px;
  margin-right: 10px;
  padding-left: 25px !important;
}
.file_wrapper .file_box input::placeholder {
  font-size: 16px;
  color: #bdbdbd;
  font-weight: 300;
} 
.btn-file { 
  width: 92px;
  height: 38px !important;
  line-height: 38px !important;
  background: #cfcfcf !important;
  color: #fff !important;
  padding: 0 !important;
  font-size: 16px !important;
  text-align: center;
  margin-bottom: 15px;
  transition: all .3s;
  font-weight:500 !important;
} 
a.btn-file:hover {
  background: #191919 !important;
  color: #fff !important;
} 
.agree_wrap {
  width: 100%;
  border: 1px solid #cfcfcf;
  display: none;
}
.spanover a {
  font-size: 16px;
  color: #191919;
  margin-left: 10px;
  text-decoration: underline;
  text-underline-position: under;

}
.agree_wrap p {
  line-height: 30px;
  color: #191919;
  font-weight: 300;
}
.btn_wrap {
  padding-bottom: 70px;
}


/* partner _ notice */
.order {
  width: 100%;
  max-width: 1066px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: center;  
}
.order .circle {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background:#f5f5f5;
  text-align:center;
  padding-top: 65px;
  position: relative;
}
.order .circle p {
  font-size: 17px;
  color: #191919;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 600;
  margin-bottom: 10px;
}
.order .circle span {
  font-size: 22px;
  color: #191919;
  font-weight: 300; 
}
.order .circle:first-child::after {
  display: none;
}
.order .circle::after {
  position: absolute;
  opacity: .3;
  content:'';
  top: 50%; 
  left: -27%;
  transform: translate(-50%,-50%);
  background: url(/common/front/img/sama/arrow_r.svg) no-repeat;
  width: 8px;
  height: 12px;
}

.wrap_div table {
  border: 1px solid #cfcfcf;
  border-collapse: collapse;
  width: 100%;
}
.wrap_div tr, .wrap_div td {
  border: 1px solid #cfcfcf;
  text-align: center;
  vertical-align: middle;
  font-size: 19px;
  color: #191919;
  font-weight: 600;
  padding: 20px 15px;
  line-height: 35px;
}
.wrap_div td p { 
  font-weight: 300;
}
.wrap_div tr td:last-child {
  text-align: left;
}

 
.info_top .fl h1 {
  margin: 0 !important;
}
.go_chae {
  font-size: 18px;
  color: #fff !important;
  background: #191919;
  display: block;
  text-align: center;
  line-height: 64px;
  padding: 0 20px;
}
.notice-txt{
  position: relative;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #ff0000;
  padding-left: 18px;
}
.notice-txt:before{
  position: absolute;
  content: '※';
  display: block;
  left: 0;
}


/*select css */
.custom-select-wrapper {position: relative;display: inline-block;user-select: none;}
.custom-select-wrapper select { display: none;}
.custom-select {position: relative;display: inline-block;margin-bottom:7px;margin-left:20px;}
.custom-select-trigger {display:flex;align-items:center;font-weight:500; box-sizing:border-box;position: relative;width: 370px;height:55px;padding: 0 84px 0 22px;
    color: #bdbdbd;line-height: 55px;background: #fff;border:2px solid #bdbdbd;font-size:21px;cursor: pointer;}
.custom-select-trigger:after {position: absolute; display: block;content: '';width: 10px; height: 10px;top: 50%; right: 25px;margin-top: -3px;border-bottom: 2px solid #bdbdbd;border-right: 2px solid #bdbdbd;transform: rotate(45deg) translateY(-50%);
transition: all .4s ease-in-out;transform-origin: 50% 0;}
.custom-select.opened .custom-select-trigger:after {margin-top: 3px;transform: rotate(-135deg) translateY(-50%);}
.custom-options {position: absolute;display: block;top: 100%; left: 0; right: 0;min-width: 100%;margin: 15px 0;border: 2px solid #bdbdbd;box-sizing: border-box;box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;transition: all .4s ease-in-out;height:200px;overflow-y:auto;opacity: 0;visibility: hidden;pointer-events: none;transform: translateY(-15px);}
.custom-select.opened .custom-options {opacity: 1;visibility: visible;pointer-events: all;transform: translateY(0);}
.option-hover:before {background: #f9f9f9;}
.custom-option {position: relative;display: block;padding: 0 22px;border-bottom:2px solid #bdbdbd;font-size: 21px;font-weight: 500;color: #bdbdbd;line-height: 55px;cursor: pointer;transition: all .4s ease-in-out;}
.custom-option:first-of-type {border-radius: 4px 4px 0 0;}
.custom-option:last-of-type {border-bottom: 0;border-radius: 0 0 4px 4px;}
.custom-option:hover,.custom-option.selection { background: #f9f9f9; color:#191919;}


.group_one {
  width: 510px;
}
.order_react {
  display :none;
}
@media (max-width: 1066px){
  .wrapper .wrap_div {
    padding: 0 20px;
    padding-top: 170px;
  }
  .file_wrapper {
    display: block;
  }
  .file_wrapper .txt {
    margin-bottom: 25px;
  }
  .wrap_txt {
    padding: 0 20px;
  }
  .wrapper .wrap .info_top h1 {
    margin: 20px 0 50px;
  }
}

@media (max-width: 960px){
  .info_top .fl h1 {
    width: 100%;
  }
  .go_chae {
    margin-top: 40px;
  }
  .wrapper .wrap .info_top p {
    font-size: 20px;
  }
  .wrapper .wrap .info_top h1 {
    font-size: 30px;
    margin: 20px 0;
    margin-bottom: 50px;
  }
  .wrap_txt .info_top h1 {
    font-size: 30px;
    margin: 20px 0;
    margin-bottom: 50px;
    margin-top: 50px;
  }
}
@media (max-width: 768px){
  .wrapper .wrap_div {
    padding-top: 100px;
  }
  .file_wrapper .file_box {
    display: block;
  }
  .file_wrapper .file_box span {
    margin-bottom: 10px;
  }
}

@media (max-width: 550px){
  .group {
    margin-bottom: 35px;
    width: 100%;
  }
  input {
    width: 100% !important;
    max-width: 510px;
  }
  .bar {
    width: 100% !important;
  }
  .file_wrapper .file_box input::placeholder {
    font-size: 15px;
  }  
  .file_wrapper .file_box input {
    height: 40px !important;
  }
  .file_wrapper .file_box span {
    font-size: 16px;
  }
}


@media (max-width: 550px){ 
  input:focus ~ label, input:valid ~ label 		{
    top:-10px;
    font-size:14px;
    color:#191919;
  }
  .wrapper .wrap .info_top p {
    font-size: 16px;
  }
  .wrapper .wrap .info_top h1 {
    font-size: 20px;
    margin-bottom: 30px;
  }
  input {
    font-size: 16px;
  }
  .group label{
    font-size: 16px
  }
  .group {
    margin-bottom: 20px;
  }
  .wrap_txt .info_top h1 {
    font-size: 20px;
    margin-bottom: 30px; 
  }
  #btn_checkid {
    top: 6px;
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    width: 70px;
  }
  .file_wrapper .txt {
    font-size: 16px;
  }
  .btn-file{
    font-size: 14px !important;
    line-height: 30px !important;
    height: 30px !important;
    width: 70px !important;
  }
  .file_wrapper .file_box > div {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .file_wrapper .file_box input::placeholder {
    font-size: 13px;
  }   
  .spanover a {
    font-size: 15px;
    margin-top: 20px;
  }
  .agree_wrap {
    padding: 10px;
    font-size: 18px;
  }
  .agree_wrap p {
    font-size: 15px;
  }
  .btn_wrap .btn-info {
    font-size: 16px !important;
    padding: 10px 30px;
  }
  .wrap_txt .agree p{
    font-size: 15px;
  }
  .wrap_txt .agree span {
    font-size: 15px;
  }
  .wrap_txt {
    padding: 0 20px;
  }
  .wrap_div tr, .wrap_div td{
    font-size: 15px;
    padding: 5px 10px;
    line-height: 1.5;
  }
  .order {
    flex-wrap: wrap;
  }
  .order .circle {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    padding-top: 50px;
  }
  .order .circle span {
    font-size: 16px;
  }
  .order .circle::after {
    display: none;
  }
  .order_react {
    display :flex;
  } 
  .order_st {
    display: none;
  }
  .wrap_div {
    padding-bottom: 30px !important; 
  }
  .wrapper .wrap_div:nth-of-type(2) {
    padding-top: 50px !important;

  }
  .group_select {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .group_select label {
    font-size: 16px;
  }
  .custom-select-trigger {
    width: 213px;
    height: 36px;
    line-height: 36px;
    padding: 0 45px 0 20px;
    font-size: 16px;
  }
  .custom-option {
    line-height: 36px;
    font-size: 16px;
  }
  .custom-options {
    height: 155px;
  }
  .notice-txt{
    font-size: 14px;
    padding-left: 14px;
    line-height: 1.25;
  }  
  .group_radio{
    width: auto;
    margin-bottom: 30px;
  }
  .group_radio .radio_wrap{
    gap: 40px;
  }
  .group_radio .ridio_title{
    font-size: 14px;
    margin-bottom: 15px;
  }
  .radio_item span.spanover{
    font-size: 14px;
    line-height: 20px;
    padding-left: 25px !important;
  }
  .radio_item .spanover:before{
    width: 20px;
    height: 20px;
  }
} 
.info_top .fl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0 70px;
}