@charset "utf-8";

.detailSection{ margin-bottom: 20px;}
.detailSection .artiTxt{font-size: 13px; margin-bottom: 10px;}

.detailSubTitle,.detailSection h4{
  font-size: 20px;
  font-size: 2.0rem;
  border-bottom: 4px solid #eeb734;
  margin-bottom: 20px;
}

.subTitle{
  font-size: 20px;
  color:#ff6c00;
  margin-bottom: 10px;
}

.subTitle_2{
  font-size: 18px;
  margin-bottom: 10px;
}

.artiImg{margin-bottom:10px;}

.artiLayout2{ overflow:hidden; margin-bottom:10px;}
.artiLayout2 .artiImg{ width:150px; float:left;}
.artiLayout2 .artiImg img{ width:150px;}
.artiLayout2 .artiTxt{ float:left; margin:0 0 0 10px;}

.conDtlList{margin-bottom:10px;}

.conDtlList li{margin-bottom:3px;}

.conDtlList li:before{
  content: "●";
  color: #888;
  margin-right: 5px;
}

.flex{display:flex; display:-webkit-flex;}
.artiLayout3{margin-bottom:10px;}
.artiLayout3 .artiImg li{ float:left; margin:0 12px 10px 0;}
.artiLayout3 .artiImg li:last-child{ margin-right:0;}
.artiLayout3 .artiImg  li img{ width:100%;}
.artiLayout3 .artiTxt{ clear:both;}

.conCopy{ font-size:11px; margin-bottom:10px;}
.attention{ font-size:11px; margin-bottom:10px;}

.clearBoth{clear:both;}

video{
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:10px;
}

.artiSchdl{margin-bottom:10px;}

.artiSchdl p{margin-bottom:3px;}

.youtube_area{
  text-align: center;
  margin-bottom: 10px;
}

.youtube{
  width:640px;
  height:360px;
}

@media screen and (max-width:768px){
  .artiLayout3 .artiImg li{ float:left; margin:0 10px 10px 0;}

  .youtube{
    width:100%;
    height: 56.25vw;
  }
}


.gradeInputModal .modal_text .caution,
.courseEmptyAlertModal .modal_text .caution,
.digigal_coloring_sp_info_modal .modal_text .caution,
.digigal_coloring_update_alert_modal .modal_text .caution,
.courseEmptyPostModal .modal_text .caution,
.otherCoutryAlertModal .modal_text .caution,
.waoappPostModal .modal_text .caution,
.exceedPostModal .modal_text .caution,
.selectContestTypeModal .caution{
  font-size: 24px;
  margin-bottom: 5px;
  color:#ff6600;;
  text-align: center;
}

.gradeInputModal .modal_text .caution_text,
.waoappPostModal .modal_text .caution_text,
.courseEmptyAlertModal .modal_text .caution_text,
.digigal_coloring_sp_info_modal .modal_text .caution_text,
.digigal_coloring_update_alert_modal .modal_text .caution_text,
.courseEmptyPostModal .modal_text .caution_text,
.otherCoutryAlertModal .modal_text .caution_text,
.exceedPostModal .modal_text .caution_text
{
  font-size: 15px;
  padding: 20px 0;
}

.selectContestTypeModal .agreeButton
{
  font-size: 15px;
  padding: 10px 0;
}

.gradeInputModal .modal_text .grade_input_err{
  font-size: 15px;
  color:#ff0000;
}


.gradeInputModal .modal_text .text,
.waoappPostModal .modal_text .text,
.courseEmptyAlertModal .modal_text .text,
.digigal_coloring_sp_info_modal .modal_text .text,
.digigal_coloring_update_alert_modal .modal_text .text,
.courseEmptyPostModal .modal_text .text,
.otherCoutryAlertModal .modal_text .text
{
  font-size: 15px;
}

.gradeInputModal .agreeButton,
.courseEmptyAlertModal .agreeButton,
.digigal_coloring_sp_info_modal .agreeButton,
.digigal_coloring_update_alert_modal .agreeButton,
.courseEmptyPostModal .agreeButton,
.otherCoutryAlertModal .agreeButton,
.waoappPostModal .agreeButton,
.selectContestTypeModal .agreeButton{
  width:100%;
  margin-top: 25px;
}

.backButton{
  width:100%;
  background: #00bfff;
}

@media screen and (max-width:768px) {
  .gradeInputModal .modalblock .inner_wrap .mainContentPanel{width: 85%;}
  .courseEmptyAlertModal .modalblock .inner_wrap .mainContentPanel{width: 85%;}
  .digigal_coloring_sp_info_modal .modalblock .inner_wrap .mainContentPanel{width: 85%;}
  .digigal_coloring_update_alert_modal .modalblock .inner_wrap .mainContentPanel{width: 85%;}
  .otherCoutryAlertModal .modalblock .inner_wrap .mainContentPanel{width: 85%;}
  .courseEmptyPostModal .modalblock .inner_wrap .mainContentPanel{width: 85%;}
  .waoappPostModal .modalblock .inner_wrap .mainContentPanel{width: 85%;}
}