@charset "utf-8";

/* Mobile */
.section {background: url(/images/18_gongmo/main/main_img.png.jpg) no-repeat center top; background-size: 1300px;}
.main {padding-top: 100px; margin-bottom: 30px;}
.main h2 {width: 270px; display: block; margin: 0 auto; font-family: 'Cafe24Shiningstar';  color: #fff;  font-weight: 100; font-size: 40px;  text-align: center;   text-shadow: 0 0 10px rgba(0,0,0,.3);word-break: keep-all;}
.main .main_btn {padding-top: 70px;}
.main .main_btn>p:first-of-type {display: none;}
.main .main_btn>p span::before {content: '';  top: 10px; left: 45%;background: url(/images/18_gongmo/main/result.png) no-repeat center; padding: 15px; position: absolute; background-size: 65%;}
.main .main_btn>p .report span::before {background: url(/images/18_gongmo/main/report.png) no-repeat center;background-size: 75%;}
.main .main_btn>p .user span::before {background: url(/images/18_gongmo/main/user.png) no-repeat center;background-size: 90%;}
.main .main_btn>p .contest span::before {background: url(/images/18_gongmo/main/contest.png) no-repeat center;background-size: 80%;}
.main .main_btn>p a span {transition: .3s all; position: relative;  width: calc(100%/2 - 5px);margin-right: 5px;background-color: #FFDA8F; display: inline-block; color: #685F4D; font-size: 14px;text-align: center; padding: 40px 0 10px; border-radius: 7px; margin-bottom: 10px;}
.main .main_btn>p a:nth-of-type(2n) span {margin-right: 0;}
.main .main_btn>p a span:hover, .main .main_btn>p a span:active, .main .main_btn>p a span:focus {color: #000; font-weight: 500; background: #F3AE20;}
.main .main_btn>p a span:hover::before, .main .main_btn>p a span:active::before, .main .main_btn>p a span:focus::before {background: url(/images/18_gongmo/main/result_hover.png) no-repeat center;background-size: 65%;}
.main .main_btn>p .report:hover span::before, .main .main_btn>p .report:active span::before, .main .main_btn>p .report:focus span::before {background: url(/images/18_gongmo/main/report_hover.png) no-repeat center;background-size: 75%;}
.main .main_btn>p .user:hover span::before, .main .main_btn>p .user:active span::before, .main .main_btn>p .user:focus span::before {background: url(/images/18_gongmo/main/user_hover.png) no-repeat center;background-size: 90%;}
.main .main_btn>p .contest:hover span::before, .main .main_btn>p .contest:active span::before, .main .main_btn>p .contest:focus span::before {background: url(/images/18_gongmo/main/contest_hover.png) no-repeat center;background-size: 80%;}

.main_tit {display: block; font-size: 20px; font-weight: 500;}
.main_tit::after {content: ''; width: 100%; display: block; height: 1px; background-color: #E8E8E8;margin-top: 10px;}
.sec02 {margin-top: 20px;}
._row {display: flex; flex-direction: column; align-items: stretch;}
._col {margin-bottom: 7px;}
.frm_box {display: flex; }
.frm_box .frm_subject { width: 40%;}
.frm_box:nth-of-type(1) {height: 165px;border-radius: 10px 0 0;}
.frm_box:nth-of-type(1) .frm_subject {border-radius: 10px 0 0;}
.frm_box:nth-of-type(1) .frm_box_con {border-radius: 0 10px 0 0;}
.frm_box:nth-of-type(2) {height: 65px;}
.frm_box:nth-of-type(1) .frm_subject, .frm_box:nth-of-type(1) .frm_box_con, .frm_box:nth-of-type(2) .frm_subject, .frm_box:nth-of-type(3) .frm_subject, .frm_box:nth-of-type(2) .frm_box_con, .frm_subject, .frm_box:nth-of-type(3) .frm_box_con {border-bottom: 0;} 
.frm_box:nth-of-type(3), .frm_box:nth-of-type(4) {height: 155px;}
.frm_box:nth-of-type(3) .frm_box_con, .frm_box:nth-of-type(4) .frm_box_con {overflow-y: auto;}
.frm_box:nth-of-type(4) .frm_subject {border-radius: 0 0 0 10px;}
.frm_box:nth-of-type(4) .frm_box_con {border-radius: 0 0 10px 0;}
.frm_box:nth-of-type(4)>div.frm_box_con ._col input {display: none;}
.frm_box:nth-of-type(4)>div.frm_box_con label {background-color: #EFEFEF; border-radius: 50px; padding: 5px 20px; display: inline-block;}
.frm_box:nth-of-type(4) .frm_box_con>._row {display: block; text-align: left;}
.frm_box:nth-of-type(4) .frm_box_con>._row>._col {display: inline-block;}
.frm_box>div {width: 60%;color: #666; text-align: center; background-color: #F8F8F8; border: 1px solid #ebebeb; padding: 10px 10px 0;}
.frm_box>div strong {font-weight: 500;  font-size: inherit; display: block;margin-top: 60px;}
.frm_box:nth-of-type(2)>div strong{margin-top: 11px;}
.frm_box>div.frm_box_con {background-color: #fff; padding: 10px;}
.frm_box>div.frm_box_con ._row {display: flex;align-items: flex-start;}
.frm_box>div.frm_box_con li {font-size: 14px;padding-right: 5px;}
.frm_box>div.frm_box_con ._col input::before {content: ''; background-color: #fff; visibility: visible; border-radius: 50px;position: absolute; top: 0; width: 10px; height: 10px; border: 1px solid #403F3E; box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);}
.frm_box>div.frm_box_con ._col input {visibility: hidden; position: relative; vertical-align: middle;}
.frm_box>div.frm_box_con ._col input:checked::before {transition: .2s all; background: url(/images/18_gongmo/common/checked.png) no-repeat center; }
.frm_box>div.frm_box_con ._col input+label {color: #403F3E;}
.frm_box:nth-of-type(4) .frm_box_con ._col input:checked+label {transition: .2s all; color: #fff;background-color: #3A3938;}
.frm_box>div.frm_box_con ._col input:checked+label {font-weight: 500;}

._col form {margin-top: 20px; border-radius: 10px;}
.sec02 select { -webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/ width: 40%; color: #101010; font-size: 16px; background: #F8F8F8 url(/images/18_gongmo/common/department.png) no-repeat 90%;padding: 10px; border-radius: 10px 0 0; border: 1px solid #D9D9D9; float: left;}
._col input[type="text"] {float: left; border-radius: 0 10px 0; padding: 13px 10px 12px; font-size: 14px; color: #919191; width:calc(100% - 40% - 22px); border-right: 1px solid #D9D9D9; border-top: 1px solid #D9D9D9;}
._col input[type="submit"] {padding: 10px; background: #403F3E; color: #fff; border-radius: 0 0 10px 10px; display: block; width: 100%; text-align: center; border: 1px solid #403F3E;}
._col input[type="submit"]:active, ._col input[type="submit"]:focus {border: 2px dotted #F3AE20; outline-offset: -3px;}

.table_box {margin-top: 10px;}
.main_table {width: 100%; margin-bottom: 20px;}
table {border-collapse: collapse;}
caption {overflow: hidden;width: 0;height: 0;line-height: 0;text-indent: -9999px;}
.main_table thead {display: none;}
.main_table td span.color_r {color: #D85A42;}
.main_table tr:hover {background-color: #F8FDEF;}
.main_table td.fs14 {font-size: 14px!important;}
.main_table td a:hover, .main_table td a:active, .main_table td a:focus {color: #000; font-weight: 500; text-decoration: underline;}
.main_table td span.complete, .main_table td span.stand_by, .main_table td span.ing {margin: 5px auto; text-align: center;display: inline-block; border-radius: 50px; color: #000; padding: 5px 20px; background-color: #FFC670;}
.main_table td span.ing{ background-color: #70d8ff;}
.main_table td span.stand_by {background-color: #79D264;}

/* Tablet */
@media all and (min-width:768px) {
  .main h2 {margin: 50px 0 0; width: 450px; height: 100px;  text-align: left;  padding-left: 20px;}
  .main {margin-top: 65px;}
  .main .main_btn {padding-top: 0; display: block; background-color: #FFDA8F; border-radius: 10px; width: 100%; margin-top: 135px;overflow: hidden;}
  .main_btn .btn_service {min-width: 79%; float: right;}
  .main .main_btn>p:first-of-type {padding-top: 35px; margin-right: 10px; position: relative; width: calc(100%/5 - 5px); display: inline-block; text-align: center; font-size: 20px; font-weight: 500; color: #000;}
  .main .main_btn>p:first-of-type::after {content: ''; width: 1px; height: 25px; background-color: #E5CD9D; position: absolute;top: 55%; right: 0;}
  .main .main_btn>p a { display: inline-block; width: calc(100%/4 - 6px); padding: 20px 0 15px; border-radius: 10px; text-align: center; margin: 10px 0;}
  .main .main_btn>p span::before {position: unset; display: block; margin: 0 auto 10px; display: block; width: 10px; height: 5px;}
  .main .main_btn>p a span { transition: .2s all; padding: 0; margin: 0 auto; display: initial; background: none;font-size: 16px;}
  .main .main_btn>p a:hover, .main .main_btn>p a:active, .main .main_btn>p a:focus {background-color: #F3AE20;}
  .main .main_btn>p a:hover span, .main .main_btn>p a:active span, .main .main_btn>p a:focus span {color: #000; font-weight:500;}

  .frm_box>div.frm_box_con ._row {flex-direction: row;flex-wrap: wrap;}
  .frm_box>div.frm_box_con li {padding:5px 7px;}
  .frm_box:nth-of-type(1) {height: 85px;}
  .frm_box:nth-of-type(2) {height: 50px;}
  .frm_box:nth-of-type(3) {height: 90px;}
  .frm_box:nth-of-type(3)>div.frm_box_con {overflow-y: hidden;}
  .frm_box:nth-of-type(4) {height: 123px;}
  .frm_box>div strong {margin-top: 25px;}
  .frm_box:nth-of-type(2)>div strong {margin-top: 5px;}
  .frm_box:nth-of-type(4)>div strong {margin-top: 40px;}
  ._col form {width: 60%;float: right; border: 1px solid #D9D9D9; border-right: 0;}
  .sec02 select {width: 30%; border-radius: 10px 0 0 10px; border: 0; border-right: 1px solid #D9D9D9; padding: 12px 12px 12px 15px;}
  ._col input[type="text"] {width: 50%;border-radius: 0;border: 0; padding: 16px 10px 12px;}
  ._col input[type="submit"] {width: calc(20% - 21px);border-radius: 0 10px 10px 0; border: 1px solid #403F3E; padding: 11px;}
}

/* Desktop */
@media all and (max-width:1022px) {
  colgroup {display: none;}
  .main_table thead {display: none;}
  .main_table th {color: #101010; font-size: 18px; font-weight: 500;  background-color: #F8F8F8;}
  .main_table tr {transition: .3s all; border-top: 2px solid #E8E8E8; border-bottom: 3px solid #E8E8E8; display: block; margin-bottom: 20px; margin-bottom: 20px;}
  .main_table td {font-size: 14px; display: block;text-align: left; padding: 0; line-height: 1.5em;color: #666; border-bottom: 1px dotted #d9d9d9;}
  .main_table td[data-cell-header]:before { border-right: 1px solid #efefef; margin-right: 20px; margin-bottom: 0; display: inline-block; width: 28%; padding: 2%; content: attr(data-cell-header); color: #101010; font-weight: 600;font-size: 16px;}
  .main_table tr>td:first-of-type, .main_table tr>td:nth-of-type(2) { color: #3F668A; font-weight: 500; border-bottom: 0;  display: inline-block; padding:  15px 5px 15px 5px; font-size: 14px;}
  .main_table tr>td:first-of-type::before, .main_table tr>td:nth-of-type(2)::before {border-radius: 0; content: none;}
  .main_table tr>td:nth-of-type(3) {border-top: 1px dotted #d9d9d9;}
  .main_table td a { font-size: 14px; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: .1s all; width: 55%;}
  .main_table td a:hover, .main_table td a:active, .main_table td a:focus {text-decoration: underline; font-weight: 500;}
  .main_table td span { vertical-align: baseline; display: inline-block;}
  .main_table td:last-of-type {border-bottom: 0;}
  .main_table td span.complete, .main_table td span.stand_by, .main_table td span.ing {padding: 1px 30px;}
  .main_table tr td br {display: none;}
}

/* Desktop */
@media all and (min-width:1023px) {
.wrap {width: 1400px; margin: 0 auto;}
.section {background-size: 2000px;min-width: 1400px; margin: 0 auto;}
.main {margin-bottom: 100px;}
.main h2 {width: 674px; height: 170px; margin: 130px 0 0; font-size: 60px; padding-left: 0; line-height: 1.2;}
.main .main_btn {margin-top: 225px;border-radius: 20px;}
.main .main_btn>p:first-of-type {padding-top: 25px; font-size: 25px;}
.main .main_btn>p a span {font-size: 20px;}
.main_tit {font-size: 30px;}
.sec02>._col:nth-of-type(2) { border: 1px solid #ddd; border-radius:10px;}
.frm_box .frm_subject {width: 10%;}
.frm_box:nth-of-type(1) {border-radius: 20px 0 0;}
.frm_box:nth-of-type(1), .frm_box:nth-of-type(2), .frm_box:nth-of-type(3) {height: 60px;}
.frm_box:nth-of-type(4) {height: 70px;}
.frm_box>div.frm_box_con {width: 90%;}
.frm_box:nth-of-type(1) .frm_box_con { border-radius: 0 20px 0 0;}
.frm_box:nth-of-type(4) .frm_subject { border-radius: 0 0 0 20px;}
.frm_box:nth-of-type(4) .frm_box_con { border-radius: 0 0 20px 0;}
.frm_box>div.frm_box_con li {padding: 10px 30px;}
.frm_box:nth-of-type(4) .frm_box_con>._row>._col {padding: 10px 10px 5px 10px;}
.frm_box>div strong {margin-top: 10px;}
.frm_box:nth-of-type(2)>div strong {margin-top: 10px;}
.frm_box:nth-of-type(4)>div strong {margin-top: 15px;}
.table_box {border-radius: 20px; border: 1px solid #d9d9d9; margin-bottom: 40px;}
.main_container .bbs_page{margin-bottom: 60px;}
.main_table {margin-bottom: 0;}
.main_table thead {display: table-header-group;}
.main_table tr {display: table-row; width: 1400px; border: 0; margin-bottom: 0;}
.main_table thead tr {background-color: #FBFBFB; border-bottom: 1px solid #d9d9d9;}
.main_table thead tr:hover {background-color: #FBFBFB;}
.main_table thead th {display: table-cell; padding: 20px 30px; background:none; font-size: 18px;color: #101010;}
.main_table thead th:first-of-type {border-radius: 20px 0 0 0;}
.main_table thead th:last-of-type {border-radius: 0 20px 0;}
.main_table tbody tr {border-bottom: 1px solid #d9d9d9;}
.main_table tbody tr:last-of-type {border-bottom: 0;}
.main_table td[data-cell-header]:before {display: none;}
.main_table td {display: table-cell; text-align: center; border-right: 1px solid #d9d9d9; padding: 10px;vertical-align: middle; }
.main_table td a {display: inline-block; width: 90%; margin: 0 auto; padding: 10px;}
.main_table td:last-of-type {border-right: 0;}
.main_table td span {padding: 0;}
.main_table tr>:nth-child(7) {text-align: right;}
.main_table tr td br {display: block;}
}

@media all and (min-width:1920px) {
.section {background-size: 100vw 690px;}
}

.stat_box{padding: 20px;margin: 20px 0;background: #fffdf3;border-radius: 20px;border: 1px solid #ffefbe;text-align: center;font-size: 18px;}