@charset "utf-8";

/* Mobile */
.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;}
.con_box {position: relative;}
.con_box a {position: relative; margin: 40px auto; text-align: center; display: block; padding: 30px 10px 20px; background: #F8F8F8; border: 1px solid #E5E5E5; border-radius: 10px; max-width: 180px; height: 135px; min-width: 205px;}
.con_box a em {display: block; margin: 5px auto;}
.con_box a em>span {font-size: 16px; margin: 5px; color: #393939;}
.con_box a em>span.color_b {color: #075FAE; position: relative;}
.con_box a em:first-of-type {position: relative;}
.con_box a em>span.color_b::after {content: ''; position: absolute; top: 5px; right: -8px; width: 1px; height: 15px; background-color: #D9D9D9;}
.con_box a strong { font-size: 16px; font-weight: 400; margin: 15px auto; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.con_box a em.date {color: #B4B4B4; font-size: 14px;}
.con_box a:hover strong, .con_box a:active strong, .con_box a:focus strong {text-decoration: underline;}
.con_box span.complete, .con_box span.stand_by, .con_box span.ing {position: absolute; top: -20px; left: 65px; margin: 5px auto; text-align: center;display: inline-block; border-radius: 50px; color: #000; padding: 5px 30px; background-color: #FFC670;}
.con_box span.stand_by {background-color: #79D264;}
.con_box span.ing {background-color: #70d8ff;}
.sec02 .more {display: block; text-align: center; padding: 10px; margin: 0 auto 60px; background: #403F3E; color: #fff; border-radius: 15px; width: 215px;}
.sec02 .more:hover, .sec02 .more:active, .sec02 .more:focus {background-color: #000;}

/* Tablet */
@media all and (min-width:768px) {
  .con_box {display: inline-block; width: 49%;}
  .con_box a {padding: 45px 30px 50px; border-radius: 20px;max-width: 200px;}
  .con_box a strong {max-width: 95%; font-size: 20px;margin: 20px auto;}
  .con_box a em.date {font-size: 16px;}
  .con_box span.complete, .con_box span.stand_by, .con_box span.ing { padding: 4px 35px; left: 80px;}
  .sec02 {position: relative; margin-bottom: 100px;}
  .sec02 .more {width: auto; position: absolute; padding-right: 40px; color: #403F3E; background: url(/images/17_group/main/more.png) no-repeat 100% 4px; display: inline-block;top: -68px; right: 0; background-size: 45%;}
  .sec02 .more:hover, .sec02 .more:active, .sec02 .more:focus {text-decoration: underline; background-color: #fff;}
}

/* Desktop */
@media all and (min-width:1023px) {

.main_tit {font-size: 30px;}

.con_box {width: calc(100%/4 - 4px);}
.sec02 .more {font-size: 18px; padding-right: 45px;}
}

/* 번역 */
/* Mobile */
.translated-ltr .main h2 { width: 100%;}
.translated-ltr .main .main_btn>p a span { min-height: 25px;}
.translated-ltr .main_tit { padding-top: 25px;}
.translated-ltr .con_box span.complete, .translated-ltr  .con_box span.stand_by, .translated-ltr  .con_box span.ing { left: 50px;}

/* Tablet */
@media all and (min-width:768px) {
.translated-ltr .main h2 { width: 500px;}
.translated-ltr  .main .main_btn>p a { max-width: 150px;}
.translated-ltr .sec02 .more { vertical-align: middle; padding-right: 50px;}
.translated-ltr .con_box span.complete, .translated-ltr  .con_box span.stand_by, .translated-ltr  .con_box span.ing { left:65px;}
}

/* Desktop */
@media all and (min-width:1023px) {
.translated-ltr .main h2 { width: 772px;}
.translated-ltr  .main .main_btn>p a { max-width: none;}
.translated-ltr .sec02 .more { vertical-align: middle; padding-right: 55px;}
}