@media screen and (max-width: 870px){
  .container {max-width: 100%; padding: 0 20px; box-sizing: border-box;}

  header {top: 20px; height: 50px;}
  header .logo p {font-size: 17px;}
  header nav ul {gap: 20px;}

  .visual:after {top: -50px; right: -50px; width: 300px;}
  .visual:before {bottom: -50px; left: -50px; width: 300px;}
  
  .sec1 .container {gap: 20px;}
  .tit-box.left {margin-bottom: 0;}
  .tit-box.left .box {margin-bottom: 15px;}
  .tit-box .box {margin-bottom: 15px;}
  .tit-box .tit {margin-bottom: 9px; font-size: 27px;}
  .sec1 .left-box {height: 500px;}
  .sec1_ct ul li .child-box {gap: 7px; height: auto; padding: 15px;}
  .sec1_ct ul li .child-box .num {min-width: 30px; width: 30px; border-radius: 7px;}
  .sec1_ct ul li .child-box .txt-box {padding-top: 7px;}
  .sec1_ct ul li .child-box .txt-box .tit {font-size: 16px;}

  .vod_box {max-width: 420px; width: 100%; margin: 0 auto;}

  .visual {padding: 100px 0 70px;}
  .visual .txt-box .tit {margin: 20px 0 36px; font-size: 37px;}
  .visual .txt-box .kv_txt p:not(.fade_txt) {font-size: 20px;}
  .visual .txt-box .kv_txt {margin-bottom: 20px;}
  .visual .txt-box .kv_txt .fade_txt {min-width: 60px; width: 60px; height: 27px; font-size: 23px;}
  .visual .txt-box .txt {font-size: 15px; line-height: 1.7;}
  .visual .kv_btn {margin-bottom: 30px;}
  .visual .kv_btn button {width: 177px; height: 50px; border-radius: 12px; font-size: 15px;}
  .visual .count_num {max-width: 470px;}
  .visual .count_num ul li .child-box .num {font-size: 17px;}

  .sec1 .container {flex-flow: column;}
  /* .vod_box {height: auto; aspect-ratio: 16/9;} */
  .sec1 .left-box {width: 100%; height: auto;}
  .tit-box {margin-bottom: 30px;}
  .tit-box.left {margin-bottom: 30px; text-align: center;}
  .tit-box .tit {font-size: 22px;}
  .tit-box.left .box {margin: 0 auto 10px;}
  .sec1_ct ul {flex-flow: row; gap: 10px; width: 100%;}
  .sec1_ct ul li .child-box {gap: 5px;}

  .step_form .form_item {padding: 20px;}

  .step_form .form_item .form_tit {flex-wrap: wrap; gap: 15px;}
  .step_form .form_item .form_tit .left .tit {margin-bottom: 7px; font-size: 20px;}
  .ckd_box {gap: 6px 0; margin: 0 -3px;}
  .ckd_box label {padding: 0 3px;}
  .ckd_box label .box {gap: 7px; padding: 15px;}
  .ckd_box label .box figure {min-width: 17px; width: 17px;}
  .ckd_box label .txt-box .tit {margin-bottom: 7px; font-size: 16px;}
  .ckd_box input:checked + label:after {top: 5px; right: 7px; width: 20px;}

  .submit_btns {gap: 7px; margin-top: 27px;;}
  .submit_btns .next_btn {height: 45px;}
  .submit_btns .prev_btn {min-width: 100px; width: 100px; height: 45px;}
  .input-box .inputs {height: 45px; padding: 0 30px 0 10px; border-radius: 10px;}
  .input-box .inputs input:not([type="checkbox"]) {font-size: 15px;}
  .input-box .inputs .del_btn {right: 10px; width: 20px;}
  .input-box select {height: 45px; padding: 0 30px 0 10px; background: url(./../img/select_icon.png) no-repeat calc(100% - 10px) 50%; background-size: 19px; font-size: 15px;}

  .input-box .d-flex2 {gap: 10px 0; margin: 0 -5px;}
  .input-box .d-flex .d-block {padding: 0 5px;}

  .input-box2 .d-flex {gap: 10px;}
  .input-box .ckd_box2 label {height: 45px; font-size: 15px;}
  .input-box .ckd_box2 label::before {width: 13px;}
  .input-box .ckd_box2 input:checked + label:before {width: 13px;}

  .input-box .radio_box {margin: 0 -5px;}
  .input-box .radio_box label {padding: 0 5px;}
  .input-box .radio_box label .num {gap: 5px; font-size: 30px;}
  .input-box .radio_box label .num span {font-size: 15px;}
  .input-box .radio_box label .expert_box {gap: 5px;}
  .input-box .radio_box label .txt {word-break: keep-all; text-align: center;}
  
  .description {padding: 15px;}
  .description .tit {margin-bottom: 10px; font-size: 17px;}
  
  .agee_ckd_area {padding-top: 10px; margin-top: 10px;}
  /* .agee_ckd_area .tit {margin-bottom: 10px;} */
  .agee_ckd_area .agee_ckd label {height: 45px;}
  .agee_ckd_area .agee_ckd label span {gap: 7px;}
  .agee_ckd_area .agee_ckd label span:before {width: 17px;}
  .agee_ckd_area .all_ckd {padding: 10px;}
  .agee_ckd_area .all_ckd label {gap: 7px;}
  .agee_ckd_area .all_ckd label:before {min-width: 17px; width: 17px;}
  .agee_ckd_area .all_ckd input:checked + label:before {min-width: 17px; width: 17px;}
  .agee_ckd_area .agee_ckd input:checked + label span:before {width: 17px;}
  .last_txt-box {gap: 17px; margin-top: 20px;}
  .last_txt-box .img-box {width: 37px;}
  .last_txt-box .tit {font-size: 17px;}
  .talk_btn {height: 45px; margin-top: 30px; font-size: 15px;}
  .dl-box {padding: 17px;}
  .dl-box dl {height: 45px;}

  .history_list > ul li .child-box .toggle_top .hash_tag_list {flex-wrap: wrap; gap: 10px;}
  .history_list > ul li .child-box .toggle_ct .info_list ul {gap: 3px;}
  .history_list > ul li .child-box .toggle_ct .info_item {flex-wrap: wrap; gap: 10px;}
  .history_list > ul li .child-box .toggle_ct .info_item .expert_info .name-box .d-flex .tit {padding-right: 7px; margin-right: 7px; font-size: 15px;}
  .history_list .info_btns {gap: 3px; flex-wrap: wrap;}
  .expert_hash_tag {flex-wrap: wrap; gap: 10px;}
  .expert_hash_tag .hash_tag {gap: 3px; flex-wrap: wrap;}

  .history_list > ul li .child-box .toggle_top .txt_box {gap: 7px;}

  .history_list > ul li .child-box .toggle_top .hash_tag_list .hash_tag {flex-wrap: wrap;}

  .history_list > ul li > .child-box .toggle_top .top {margin-bottom: 10px;}
  .history_list > ul li > .child-box .toggle_top .top .toggle_btn {margin-top: 0;}
  .history_list > ul li > .child-box .toggle_top .top .ct_box {flex-wrap: wrap;}
  .history_list > ul li > .child-box .toggle_top .top .ct_box .date p {word-break: keep-all;}
  .history_list > ul li .child-box .toggle_top .txt_box {flex-wrap: wrap;}

  .tab_area ul {gap: 3px;}
  .tab_area ul li button {padding: 6px 12px;}
}

@media screen and (max-width: 600px) {
  .history_list > ul li .child-box .toggle_ct .info_list ul {flex-wrap: wrap; gap: 5px 0; margin: 0 -2.5px;}
  .history_list > ul li .child-box .toggle_ct .info_list ul li {width: calc(100% / 2); padding: 0 2.5px; box-sizing: border-box;}
}

@media screen and (max-width: 562px) {
  header {max-width: calc(100% - 40px);}
  .visual:after {width: 200px;}
  .visual:before {width: 200px;}
  .visual .txt-box .tit {margin: 15px 0 25px; font-size: 30px;}
  .visual .txt-box .kv_txt p:not(.fade_txt) {font-size: 17px;}
  .visual .txt-box .kv_txt .fade_txt {min-width: 37px; width: 37px; height: 20px; font-size: 19px;}
  .visual .txt-box .txt {margin-bottom: 30px;}
  .visual .kv_btn button {height: 45px;}

  .sec1 {padding: 70px 0;}

  /* .sec1_ct ul li .child-box {flex-flow: column;} */
  .sec1_ct ul li .child-box .txt-box .txt {word-break: keep-all;}
  .sec1_ct ul li .child-box .txt-box .txt br {display: none;}

  .description .txt {word-break: keep-all;}
  .description .txt br {display: none;}
  .agee_ckd_area .agee_ckd label {flex-flow: column; align-items: flex-start; gap: 7px; height: auto; padding: 5px 0;}
  .agee_ckd_area .agee_ckd label .agee_btn {white-space: nowrap; width: 100%; text-align: right;}

  .ckd_box label .txt-box .sub {word-break: keep-all; line-height: 1.2;}
}

@media screen and (max-width: 500px) {
  header nav ul {gap: 25px;}

  .visual .txt-box .live_box {font-size: 12px;}
  .visual .txt-box .live_box:before {width: 7px; height: 7px;}
  
  .sec1_ct ul {flex-flow: column;}
  .ckd_box label .box {align-items: center; gap: 5px; padding: 10px;}
  .ckd_box label .box figure {position: relative; height: 100%;}
  .ckd_box label .box figure img {position: absolute; top: 10px;}
  .ckd_box label:hover {transform: translateY(0);}
  .ckd_box label:hover .box {background: transparent; border-color: var(--pr2);}

  .step_form .form_item .form_tit {margin-bottom: 20px;}
  
  .input-box2 .d-flex {flex-flow: column;}
  .input-box .d-flex .d-block {width: calc(100% / 1);}

  .input-box .radio_box label .expert_box {height: 127px;}

  .input-box .radio_box {flex-wrap: wrap; gap: 20px;}
  .input-box .radio_box label {width: calc(100% / 1);}

  .step_form .form_item .form_tit_box {text-align: left;}

  /* header .link_btn {position: fixed; bottom: 20px; right: 20px;} */
  header .link_btn {display: none;}

  .agee_ckd_area .all_ckd label {align-items: flex-start;}
  .agee_ckd_area .all_ckd label:before {position: relative; top: 3px;}
}

@media screen and (max-width: 378px) {
  .visual .count_num ul {flex-wrap: wrap; height: auto;}
  .visual .count_num ul li {width: calc(100% / 2); height: 55px;}
  .visual .count_num ul li:nth-child(1),
  .visual .count_num ul li:nth-child(2) {border-bottom: 1px solid var(--pr2);}
  .visual .count_num ul li:nth-child(even) .child-box {border-right: 0;}

  .agee_ckd_area .agee_ckd label {flex-flow: column; align-items: flex-start; gap: 7px; height: auto; padding: 5px 0;}
  .agee_ckd_area .all_ckd label {align-items: flex-start;}

  .dl-box dl {flex-flow: column; align-items: flex-start; gap: 7px; height: auto; padding: 10px 0;}

  .history_list > ul li .child-box .toggle_ct .info_list ul li {width: calc(100% / 1);}
  .history_list .info_btns button {width: 100%;}
}