@charset "utf-8";

/* Mobile */
header .head h1 a {background: url(/images/17_group/main/logo.png?test=1) no-repeat 0 0 /100%;width: 169px;height: 50px;}

.section {background: url(/images/17_group/main/main_img.png.jpg) no-repeat center top; background-size: 1300px;}
.main {padding-top: 80px; margin-bottom: 30px;}
.main h2 {width: 249px;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);}
.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: 40%;background: url(/images/17_group/main/reading.png) no-repeat center; padding: 15px; position: absolute; background-size: 80%;}
.main .main_btn>p .file span::before {background: url(/images/17_group/main/file.png) no-repeat center;background-size: 85%;}
.main .main_btn>p .choice span::before {background: url(/images/17_group/main/choice.png) no-repeat center;background-size: 70%;}
.main .main_btn>p .result span::before {background: url(/images/17_group/main/result.png) no-repeat center;background-size: 65%;}
.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/17_group/main/reading_hover.png) no-repeat center;background-size: 80%;}
.main .main_btn>p .file:hover span::before, .main .main_btn>p .file:active span::before, .main .main_btn>p .file:focus span::before {background: url(/images/17_group/main/file_hover.png) no-repeat center;background-size: 85%;}
.main .main_btn>p .choice:hover span::before, .main .main_btn>p .choice:active span::before, .main .main_btn>p .choice:focus span::before {background: url(/images/17_group/main/choice_hover.png) no-repeat center;background-size: 70%;}
.main .main_btn>p .result:hover span::before, .main .main_btn>p .result:active span::before, .main .main_btn>p .result:focus span::before {background: url(/images/17_group/main/result_hover.png) no-repeat center;background-size: 65%;}

.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) {
.menu>div>ul>li {width: calc(100%/7);}
.menu .depth_box { top: 148px;}

  .main h2 {margin: 50px 0 0; width: 500px;text-align: left; padding: 0 20px;}
  .main {margin-top: 87px;}
  .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;}

  .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) {
header .head h1 a {padding:0;margin-top:40px;}
.menu, .menu.on {padding-top: 0;}
.menu>div>ul>li {width: 9.7%;padding: 30px 0 20px 0;}
header .gnb .gnb_left {top: 51px;}
.menu .depth_box { top: 100px;}

.wrap {width: 1400px; margin: 0 auto;}
.section {background-size: 2000px;min-width: 1400px; margin: 0 auto;}
.main {margin-bottom: 100px;}
.main h2 {width: 772px;margin: 170px 0 0;height: 150px;font-size: 60px; 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;}

.con_box {width: calc(100%/4 - 4px);}
.sec02 .more {font-size: 18px; padding-right: 45px;}
}
@media all and (min-width:1920px) {
.section {background-size: 100vw 690px;}
}
       
/* 번역 */
/* 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 .menu>div>ul { background: #fff;  display:inline-block;}
.translated-ltr .menu>div>ul>li { height: 23px; width: calc(100%/7 - 1px);}
.translated-ltr .menu>div>ul>li>a {line-height: 1; word-wrap: break-word;}
.translated-ltr .menu .depth_box {top: 160px;}

.translated-ltr .main h2 { width: 500px;}
.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 .menu>div>ul { background: none;  display:block;}
.translated-ltr .menu>div>ul>li { width: 9%; padding: 30px 0;}
.translated-ltr .depth_boxcon>li {width: 23%;}
.translated-ltr .menu .depth_box {top: 140px;}

.translated-ltr .main h2 { width: 772px;}
.translated-ltr .sec02 .more { vertical-align: middle; padding-right: 55px;}
}                                                                                                                                                                                                              