@charset "UTF-8";

/*=================================================================================
* Common
=================================================================================*/
.inner { position: relative; width: 1280px; margin: 0 auto; padding: 100px 0; }
.underline { text-decoration: underline!important; }

/*================================================================================
* Header
=================================================================================*/
#wrap { width: 100%; min-height: 100%; scroll-behavior: smooth; overflow: hidden; }
.header { position: relative; width: 100%; margin: 0 auto; z-index: 99; display: flex; padding: 0 140px; align-items: center; background-color: var(--color-main-02); border-bottom: solid 1px #F7EADF; }
.header .logo { position: absolute; height: 60px; }
.header .logo a { width: 83px; height: 60px; background: url("../img/drm_ssafy_logo.svg") center center no-repeat; background-size: contain; display: inline-block; }
.header-menu { height: 100px; margin: 0 auto; text-align: center; }
.header .gnb-links { width: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; }
.header .gnb-links .link { position: relative; height: 100px; }
.header .gnb-links > li:before { display: block; clear: both; content: ''; position: absolute; left: 0; width: 100%; top: 0; height: 100px; background-color: var(--color-main-03); z-index: -1; opacity: 0; }
.header .gnb-links .link > a { display: block; height: 100%; padding: 0 30px; line-height: 100px; font-size: var(--font-size-l); text-align: center; color: var(--color-main-07); font-family: var(--font-family-m); }
.header .gnb-links .link.mypage-link { position: absolute; right: 140px; }
.header .gnb-links .link.mypage-link > a { color: var(--color-main-04); }
.header .gnb-links .link .sub-gnb { display: none; position: absolute; }
.header .gnb-links li .sub-gnb { width: 210px; }
.header .gnb-links .link > a.on { background: var(--color-main-03); }
.header .gnb-links .link > a.open-text { position: relative; }
.header .gnb-links > li:hover::before { opacity: 1;}
.header .gnb-links .link .sub-gnb > li { width: 100%; padding: 12px 0 12px 18px; min-width: 150px; text-align: left; }
.header .gnb-links .link .sub-gnb > li > a { display: block; font-size: 16px; line-height: 24px; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; }
.header .gnb-links .link .sub-gnb.on { display: block; background: var(--color-main-03); }
.header .gnb-links .link .sub-gnb > li > a:hover { padding-left: 8px; }

/*================================================================================
* Footer
=================================================================================*/
.footer { width: 100%; border-top: solid 1px var(--color-main-03); }
.footer .inner { padding: 35px 0; justify-content: center; }
.footer .inner span:nth-child(1) { font-size: var(--font-size-ss); }
.footer .inner span:nth-child(2) a { display: block;  width: 100px; }

/*=================================================================================
* Mobile Header
=================================================================================*/
.button-container { display: none; position: absolute; top: 50%; right: 6rem; width: 30px; height: 24px; margin-top: -12px; cursor: pointer; z-index: 120; transition: opacity 0.25s ease; }
.button-container.active .top { -webkit-transform: translateY(7px) translateX(0) rotate(45deg); transform: translateY(7px) translateX(0) rotate(45deg); background: var(--color-main-01); }
.button-container.active .middle { opacity: 0; background: var(--color-main-01); }
.button-container.active .bottom { -webkit-transform: translateY(-13px) translateX(0) rotate(-45deg); transform: translateY(-13px) translateX(0) rotate(-45deg); background: var(--color-main-01); }
.button-container span { background: var(--color-main-04); border: none; height: 4px; width: 100%; position: absolute; left: 0; transition: all 0.35s ease; cursor: pointer; border-radius: 4px;  }
.button-container span:nth-of-type(2) { top: 50%; margin-top: -2px; }
.button-container span:nth-of-type(3) { bottom: 0; }

.overlay { position: fixed; background: var(--color-main-01); top: 0; right: 0; width: 100%; max-width: 768px; height: 100vh; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s, height 0.35s; overflow-y: auto; z-index: 100; box-shadow: -20px 0 40px rgba(0, 0, 0, 0.16); }
.overlay .side-menu-wrap { position: relative; width: 100%; height: 100%; background: var(--color-main-01); }
.overlay.open { opacity: 1; visibility: visible; }
.overlay .side-header { width: 100%; height: 116px; padding: 0 0 0 20px; border-bottom: 1px solid var(--color-line); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; box-sizing: border-box; }
.overlay .side-header .util ul { display: flex; align-items: center; }
.overlay .side-header .util ul li { margin-right: 4px; }
.overlay-menu .main-cate { padding: 19px 0; }
.overlay .login-area { width: 100%; display: flex; align-items: center; }
.overlay .login-area li a { font-size: 12px; }
.overlay .gnb-1depth { position: relative; width: 100%; height: 100%; margin: 0 auto; text-align: left; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; border-top: 1px solid #f5f5f5; }
.overlay .gnb-1depth .item-1depth { width: 100%; position: relative; display: block; text-align: left; line-height: 1.2; cursor: pointer; }
.overlay .gnb-1depth .item-1depth:before, .overlay .gnb-1depth .item-1depth:after { position: absolute; right: 1.6rem; display: block; clear: both; content: ''; width: 10px; height: 2px; background: var(--color-main-07); transition: all ease 0.1s; }
.overlay .gnb-1depth .item-1depth:before { transform: rotate(90deg); top: 30px; }
.overlay .gnb-1depth .item-1depth:after { transform: rotate(0deg); top: 30px; }

.overlay .gnb_1depth .item-1depth:before { transform: translate(-50%, -50%) rotate(90deg); }
.overlay .gnb_1depth .item-1depth:after { transform: translate(-50%, -50%) rotate(180deg); }
.overlay .gnb_1depth .item-1depth.active::before { transform: translate(-50%, -50%) rotate(0); }
.overlay .gnb_1depth .item-1depth.active::after { transform: translate(-50%, -50%) rotate(0); }
.overlay .gnb_1depth .item-1depth.active .gnb-2depth { display: block; }

.overlay .gnb-1depth .item-1depth > a { display: block; position: relative; text-decoration: none; overflow: hidden; line-height: 1.2; border-bottom: 1px solid var(--color-line); font-weight: 600; text-align: left; padding: 1.6rem; }
.overlay .gnb-1depth .item-1depth .gnb-2depth { display: none; }
.overlay .gnb-1depth .item-1depth .gnb-2depth a { padding: 1.6rem; display: block; background: var(--color-main-02); border-bottom: solid 1px var(--color-line); }
.map-link { text-align: center; margin: 0 0 50px; display: flex; justify-content: center; }
.map-link a { text-decoration: underline; margin: 0 30px; height: 26px; display: block; font-size: 18px; font-weight: 700; color: #00ad57; }
.map-link a.icon-01 { padding-left:  40px; background: url("../img/foot_icon_01.svg") no-repeat; }
.map-link a.icon-02 { padding-left:  40px; background: url("../img/foot_icon_02.svg") no-repeat; }
.jobclip-list ul { display: flex; flex-wrap: wrap; }
.jobclip-list ul li { width: 31%; margin: 0 1% 20px; border: solid 1px var(--color-line); padding: 10px; border-radius: 10px; }
.jobclip-list ul li .thumb-mov { height: 180px; margin-bottom: 20px; }

/*=================================================================================
* login
=================================================================================*/
.login-wr { width: 460px; margin: 50px auto; }
.login-wr form h3 { margin: 20px 0 10px; }
.login-wr form dd { margin-bottom: 10px; }
.login-wr form dd .check { margin-left: 0!important; }

/*=================================================================================
* Main
=================================================================================*/
.main-visual { width: 100%; height: 90vh; background: var(--color-main-02) url(../img/visual-bg.svg) center right 140px no-repeat; background-size: 913px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.main-visual .visual-text { width: 1280px; margin-top: -50px; }
.main-visual .visual-text h2 { margin-bottom: 20px; }
.main-visual .visual-text p { font-size: var(--font-size-lll); }
.section-01 > div { margin-top: -170px; }
.section-02 { margin-top: 50px; }
.section-02 h3 { position: relative; font-size: var(--font-size-ll); }
.section-02 h3 a { position: absolute; bottom: 2px; right: 0; font-size: var(--font-size-ss); font-family: var(--font-family-l); background: url("../img/more-arrow.svg") top 3px right no-repeat; padding-right: 20px; }
.section-02 .notice { }
.section-02 .notice li { margin-bottom: 10px; }
.section-02 .notice li:last-child { margin-bottom: 0; }
.section-02 .notice li a { width: 100%; display: flex; align-items: center; }
.section-02 .notice li a span { width: 100%; }
.section-03 { margin: 50px 0; position: relative; }
.section-03 .mlb { width: 90%; margin: 40px  auto 20px; }
.section-03 .mlb li { margin: 0 5% 20px 0; }
.section-03 .mlb li:nth-of-type(3n) { margin-right: 0; }
.section-03 .mlb li a >div:nth-child(1) { border: solid 1px var(--color-main-03); border-radius: 10px; padding: 20px 0; margin-bottom: 10px; }

/*=================================================================================
* Sub
=================================================================================*/
#sub h2 { font-size: var(--font-size-lll); }
#sub h3 { font-size: var(--font-size-ll); }
#sub h4 { font-size: var(--font-size-l); }
#sub h5 { font-size: var(--font-size-m); }
.section-wr { margin-top: 100px; }
.sub-visual { width: 100%; height: 400px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.sub-visual.sub-01 { background: var(--color-main-02) url(../img/subtop-bg-01.jpg) center bottom no-repeat; }
.sub-visual.sub-02 { background: var(--color-main-02) url(../img/subtop-bg-021.jpg) center bottom no-repeat; }
.sub-visual.sub-022 { background: var(--color-main-02) url(../img/subtop-bg-022.jpg) center bottom no-repeat; }
.sub-visual.sub-03 { background: var(--color-main-02) url(../img/subtop-bg-031.jpg) center bottom no-repeat; }
.sub-visual.sub-032 { background: var(--color-main-02) url(../img/subtop-bg-032.jpg) center bottom no-repeat; }
.sub-visual.sub-033 { background: var(--color-main-02) url(../img/subtop-bg-033.jpg) center bottom no-repeat; }
.sub-visual.sub-04 { background: var(--color-main-02) url(../img/subtop-bg-04.jpg) center bottom no-repeat; }
.sub-visual.sub-05 { background: var(--color-main-02) url(../img/subtop-bg-05.jpg) center bottom no-repeat; }
.sub-visual .sub-visual-text { width: 1280px; margin-top: 150px; }
.sub-visual .sub-visual-text h3 { color: var(--color-main-06); font-size: var(--font-size-b)!important; }
.sub-visual .sub-visual-text h3 span { display: block; font-size: var(--font-size-l); }

/* fair-info */
.info-top { margin-top: 70px; }
.info-top div:nth-child(1) { }
.info-top div:nth-child(2) { margin-left: 50px; }
.sec-03 dl { margin-bottom: 50px; }
.sec-03 dl dd div, .sec-04 dl dd div { width: 100%; padding: 10px 0; text-align: center; }
.sec-03 dl dd, .sec-04 dl dd { position: relative; }
.sec-03 dl dd::after, .sec-04 dl dd::after { content: ""; width: 20px; height: 30px; background: url("../img/icon-arrow-01.svg") no-repeat; position: absolute; right: -34px; top: 45px; }
.sec-03 dl dd:last-child::after, .sec-04 dl dd:last-child::after { display: none; }
.sec-03 dl dd span, .sec-04 dl dd span { font-size: var(--font-size-s); color: var(--color-main-05); }
.sec-03 .check-point { padding: 0 70px 0 30px; }
.sec-03 .left-line { padding-left: 70px; position: relative; }
.sec-03 .left-line::before { content: ""; position: absolute; width: 5px; height: 100%; left: 0; top: 0; background-color: var(--color-main-06); border-radius: 3px; }
.sec-04 h4 { margin-bottom: 20px; display: flex; align-items: center; margin-top: 50px; }
.sec-05 dd { margin-bottom: 30px; }
.sec-05 dd strong { display: block; }

/* post-list */
.post-list-link { margin-bottom: 30px; display: flex; justify-content: space-between; }
.post-list-link a { width: 33.33%; text-align: center; padding: 10px 0; }
.post-list h3 { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.post-list h3 em { font-size: var(--font-size-ss); font-family: 'GongGothicL'; }
.post-list ul { display: flex; flex-wrap: wrap; }
.post-list ul li { width: 24.25%; margin: 0 1% 1% 0; border: solid 1px var(--color-line); border-radius: 3px; position: relative; }
.post-list ul li:nth-of-type(4n) { margin-right: 0; }
.post-list ul li div:nth-child(1) { display: flex; flex-direction: column; align-items: center; }
.post-list ul li .thumb { display: block; width: 100%; padding: 30px 0 5px; text-align: center; }
.post-list ul li .thumb img { height: 60px; }
.post-list ul li .co-name { display: block; padding: 0 0 20px; }
.post-list ul li div:nth-child(2) { display: flex; justify-content: center;  align-items: center; padding: 20px 0; border-top: solid 1px var(--color-line); }
.post-list ul li div:nth-child(2) em { font-size: var(--font-size-ss); display: block; padding: 5px 15px 3px; margin: 0 5px; background-color: var(--color-point-02); color: var(--color-point-03); border-radius: 20px; }
.post-list ul li div:nth-child(2) em.active { background-color: var(--color-main-04); color: var(--color-main-01); }
.post-list ul li .desc-wr { position: absolute; right: -1px; top: -1px; flex-direction: row !important; }
.post-list ul li .desc-wr span { margin-left: 5px; }
.desc-wr .desc { padding: 5px 10px 3px; z-index: 10; font-size: var(--font-size-sss); border-radius: 0 3px 0 3px; color: var(--color-main-01); }
.desc-wr .desc.offline { background-color: var(--color-point-04); }
.desc-wr .desc.online { background-color: var(--color-point-05); }

/* thumb-list */
.thumb-list { margin-top: 50px; }
.thumb-list ul li { display: flex; justify-content: space-between; margin-bottom: 50px; }
.thumb-list ul li:last-child { margin-bottom: 0; }
.thumb-list ul li .thumb-wr { width: 34%; position: relative; }
.thumb-list ul li .thumb-wr .logo { position: absolute; left: 20px; bottom: 25px; display: block; z-index: 10; width: 150px; height: 64px; background-color: var(--color-main-01); border-radius: 10px; padding: 10px; box-sizing: border-box; text-align: center; }
.thumb-list ul li .thumb-wr .logo img { max-height: 100%; }
.thumb-list ul li .thumb-wr .thumb { width: 80%; display: block; overflow: hidden; }
.thumb-list ul li .thumb-wr .thumb img { border-radius: 10px; }
.thumb-list ul li .info-box { width: 66%; }
.thumb-list ul li .info-box h4 { margin-bottom: 20px; }
.thumb-list ul li .info-box p { margin-bottom: 20px; }
.thumb-list ul li .info-box .keyword { display: flex; flex-wrap: wrap; }
.thumb-list ul li .info-box .keyword span { display: block; padding: 7px 10px 5px; background-color: var(--color-main-03); border: solid 1px var(--color-point-06); font-size: var(--font-size-ss); border-radius: 5px; margin-right: 5px; }

.clab-box, .startup-box { margin-top: 50px; background-image: linear-gradient(to right, #FFFEFD 0%, #FFF4EB 100%); padding: 50px; position: relative; }
.clab-box h4, .startup-box h4 { font-size: var(--font-size-lll)!important; margin-bottom: 10px; }
.clab-box strong, .startup-box strong { font-size: var(--font-size-ll)!important; margin-bottom: 10px; display: block; }
.clab-box p, .startup-box p { width: 50%; }
.clab-box span { position: absolute; right: 50px; top: -50px; }
.startup-box span { position: absolute; right: 50px; bottom: -50px; }

/* view */
.summary { display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 50px; margin-bottom: 50px; border-bottom: solid 1px var(--color-line); }
.summary div:nth-child(1) { width: 300px; margin-right: 50px; }
.summary div:nth-child(1) .logo-box { border: solid 1px var(--color-line); border-radius: 10px; margin-bottom: 20px; padding: 10px 0; display: flex; justify-content: center; }
.summary div:nth-child(1) dl { display: flex; border-top: solid 1px var(--color-line);}
.summary div:nth-child(1) dl dt { width: 50%; }
.summary div:nth-child(1) dl dd { width: 50%; }
.summary div:nth-child(1) dl dt, .summary div:nth-child(1) dl dd { display: flex; flex-direction: column; }
.summary div:nth-child(1) dl dt span, .summary div:nth-child(1) dl dd span { border-bottom: solid 1px var(--color-line); padding: 5px 0; text-align: center; }
.summary div:nth-child(1) dl dt span { border-right: solid 1px var(--color-line); background-color: var(--color-main-02); }
.summary div:nth-child(2) { width: 70%; }
.summary div:nth-child(2) h3 { margin-bottom: 20px; font-size: var(--font-size-bs)!important; }
.summary div:nth-child(2) p { margin-bottom: 20px; }
.summary .company-info { margin-top: 50px; padding-top: 50px; border-top: solid 1px var(--color-line); }
.summary .company-info h3 { text-align: center; font-size: var(--font-size-lll) !important; margin-bottom: 30px; }
.summary .company-info dl { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; }
.summary .company-info dl dd { display: flex; justify-content: space-between; flex-wrap: wrap; width: 49%; margin-bottom: 10px; }
.summary .company-info dl dd span { padding: 7px 20px; width: 15%; background-color: var(--color-main-06); border-radius: 5px; color: var(--color-main-01); }
.summary .company-info dl dd strong { padding: 7px 20px; width: 65%;     font-family: 'GongGothicL';  }
.summary .company-info .keyword span { display: inline-block; margin-right: 10px; }

.jobpost-info h3 { text-align: center; font-size: var(--font-size-lll)!important; margin-bottom: 30px; }
.jobpost-info h4 { margin: 50px 0 30px; font-size: var(--font-size-ll)!important; display: flex; justify-content: space-between; align-items: center; }
.jobpost-info h4 a { font-size: var(--font-size-m); font-family: 'GongGothicL'; }

.jobpost-info .position { margin-bottom: 20px; }
.jobpost-info .position dl { align-items: stretch; }
.jobpost-info .position dl dd { background-color: var(--color-point-02); border-radius: 20px; padding: 20px 20px 20px 70px; width: 19.5%; position: relative; }
.jobpost-info .position dl dd strong { margin-bottom: 10px; text-align: left; }
.jobpost-info .position ul li { font-size: var(--font-size-s); }
.jobpost-info .position dl dd .icon { position: absolute; top: 20px; left: 20px; width: 34px; }

.jobpost-info .dot li, .dot li { list-style: disc; margin-left: 20px; }

.jobpost-info .advantage dl { align-items: stretch; }
.jobpost-info .advantage dl dd { background-color: var(--color-point-02); border-radius: 20px; padding: 30px 30px 30px 120px; width: 49%; margin-top: 30px; position: relative; }
.jobpost-info .advantage dl dd:nth-child(1) { width: 100%; margin-top: 0; }
.jobpost-info .advantage dl dd strong { margin-bottom: 10px; text-align: left; }
.jobpost-info .advantage ul li { font-size: var(--font-size-m); }
.jobpost-info .advantage dl dd .icon { position: absolute; top: 30px; left: 30px; }

/*=================================================================================
* swiper
=================================================================================*/
.swiper { width: 100%; height: 100%; }
.swiper-slide { text-align: center; font-size: var(--font-size-l); background: var(--color-main-01); display: flex; justify-content: center; align-items: center; }
.swiper-button-next, .swiper-button-prev { width: 46px!important; height: 46px!important; }
.swiper-button-next:after, .swiper-button-prev:after { text-indent: -500em; width: 46px!important; height: 46px!important; }
.swiper-button-next:after { background: url("../img/swiper-next.svg")no-repeat; }
.swiper-button-prev:after { background: url("../img/swiper-prev.svg")no-repeat; }
.swiper-button-prev { left: -70px!important; }
.swiper-button-next { right: -70px!important;  }
.swiper-pagination { bottom: -50px!important; }
.swiper-pagination-bullet { background-color: var(--color-main-04)!important; border: solid 1px var(--color-main-05)!important; }

/*=================================================================================
* form
=================================================================================*/
.button-01 { height: 37px; line-height: 37px; padding: 0 20px; background-color: var(--color-point-01); border-radius: 3px; color: var(--color-main-01); }
.range-box { background-color: var(--color-point-02); font-size: var(--font-size-s); }
.range-box .inner { padding: 50px 0; }
.range-box form dl, .range-box form dl dd { display: flex; align-items: center; }
.range-box form dl { border-bottom: solid 1px var(--color-line); }
.range-box form dl:first-child { border-top: solid 1px var(--color-line); }
.range-box form dl dt { width: 10%; padding: 10px 0 10px 20px; }
.range-box form dl dd { width: 90%; border-left: solid 1px var(--color-line); padding: 10px 20px; display: flex; flex-wrap: wrap; }
.range-box form dl dd div { width: 16%; }
.range-box form ul { margin-top: 10px; padding-top: 5px; border-top: solid 1px var(--color-line); }
.range-box form ul li { margin: 10px 0; }
.range-box2 { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 30px; font-size: var(--font-size-s); }
.range-box2 > div:nth-child(1) { width: 60%; }
.range-box2 > div:nth-child(2) { width: 15%; }
.range-box2 > div:nth-child(3) { width: 20%; }
.check { margin: 3px 20px; display: flex; align-items: center; }
.check input { display: none; }
.check input:checked+label { background: url("../img/check-box-active.svg") no-repeat; }
.check label { letter-spacing: -0.025em; height: 24px; line-height: 24px; background-repeat: no-repeat; background: url("../img/check-box.svg") no-repeat; background-position: left top; padding-left: 34px; cursor: pointer; }
.checkbox { letter-spacing: -0.025em; width: 24px;  height: 24px; line-height: 24px; background-repeat: no-repeat; background: url("../img/check-box.svg") no-repeat; background-position: left top; cursor: pointer; }
.checkbox:checked { background: url("../img/check-box-active.svg") no-repeat; }
.radio input { display: none; }
.radio input:checked+label { background: url("../img/radio-box-active.svg") no-repeat; }
.radio label { display: block; letter-spacing: -0.025em; height: 24px; line-height: 24px; background-repeat: no-repeat; background: url("../img/radio-box.svg") no-repeat; background-position: left top; padding-left: 34px; cursor: pointer; }

#toggleBox { overflow: hidden; transition: height 0.3s ease; }
#toggleBox.open { height: auto; /* JS에서 정확한 높이로 설정함 */ padding: 20px; }
 a.toggle-link { display: inline-block; padding: 5px 30px; background-color: var(--color-point-02); border-radius: 0 0 10px 10px; font-size: var(--font-size-ss); }
a.toggle-link i { display: block; }

.write-wrap { }
.write-wrap dl { border-bottom: solid 1px var(--color-line); padding: 10px 0; display: flex; justify-content: space-between; }
.write-wrap dl dt { width: 100px; }
.write-wrap dl dd { width: 90%; }

/*=================================================================================
* table
=================================================================================*/
.search-box { margin-bottom: 20px; }
.paging { display: flex; justify-content: center; align-items: center; margin-top: 30px; }
.paging a, .paging span { display: block; width: 38px; height: 38px; line-height: 38px; border: solid 1px var(--color-line); margin: 0 5px; border-radius: 3px; text-align: center; }
.paging span { background-color: var(--color-main-05); border: solid 1px var(--color-main-05); color: var(--color-main-01); }
.paging a.prev { background: url("../img/btn-arrow-prev.svg") center center no-repeat; }
.paging a.next { background: url("../img/btn-arrow-next.svg") center center no-repeat; }
.table-01 { }
.table-01 table { width: 100%; border: solid 1px var(--color-line); }
.table-01 table tr { border-bottom: solid 1px var(--color-line); }
.table-01 table tr:last-child { border-bottom: 0; }
.table-01 table th, .table-01 table td { border-right: solid 1px var(--color-line); }
.table-01 table th:last-child, .table-01 table td:last-child { border-right: 0; }
.table-01 table th { background-color: var(--color-main-02); }
.table-01 table td { padding: 10px; }
.table-01 table td.center { text-align: center; }
.table-01 table th.lt-radius { border-radius: 0; }
.table-01 table th.lb-radius { border-radius: 0; }
.table-01 table th.ltb-radius { border-radius: 0; }

.table-02 { }
.table-02 dl { border-top: solid 1px var(--color-line);}
.table-02 dl dt, .table-02 dl dd { display: flex; justify-content: space-between; text-align: center; border-bottom: solid 1px var(--color-line); padding: 10px 0; }
.table-02 dl dd { display: flex; align-items: center; }
.table-02 dl dt div:nth-child(1), .table-02 dl dd div:nth-child(1) { width: 7%; }
.table-02 dl dt div:nth-child(2), .table-02 dl dd div:nth-child(2) { width: 76%; }
.table-02 dl dt div:nth-child(3), .table-02 dl dd div:nth-child(3) { width: 10%; }
.table-02 dl dt div:nth-child(4), .table-02 dl dd div:nth-child(4) { width: 7%; }
.table-02 dl dd div:nth-child(2) { text-align: left; }
.table-02 dl dd div:nth-child(2) span { width: 74px; margin-right: 10px; display: inline-block; font-size: var(--font-size-ss); }

.table-03 { border: solid 1px var(--color-line); }
.table-03 table { width: 100%; }
.table-03 table tr { border-bottom: solid 1px var(--color-line); }
.table-03 table tr:last-child { border-bottom: 0; }
.table-03 table th, .table-03 table td { border-right: solid 1px var(--color-line); padding: 7px 0; text-align: center; }
.table-03 table th:last-child, .table-03 table td:last-child { border-right: 0; }
.table-03 table th { background-color: var(--color-main-02); border-bottom: solid 1px var(--color-line); }
.table-03 table td { padding: 15px 0; }
.table-03 table td span { background-color: var(--color-main-03); padding: 5px 10px; border-radius: 3px; color: var(--color-main-04); }
.table-03 table td a { background-color: var(--color-point-01); padding: 5px 10px; border-radius: 3px; color: var(--color-main-01); }
.table-03 table td a.text-link { background-color: transparent!important; color: var(--color-main-07); }
.table-03 table td:first-child img { width: 60%; }

.table-04 { }
.table-04 dl { border-top: solid 1px var(--color-line);}
.table-04 dl dt, .table-04 dl dd { display: flex; justify-content: space-between; text-align: center; border-bottom: solid 1px var(--color-line); padding: 10px 0; }
.table-04 dl dd { display: flex; align-items: center; }
.table-04 dl dt div:nth-child(1), .table-04 dl dd div:nth-child(1) { width: 7%; }
.table-04 dl dt div:nth-child(2), .table-04 dl dd div:nth-child(2) { width: 10%; }
.table-04 dl dt div:nth-child(3), .table-04 dl dd div:nth-child(3) { width: 57%; }
.table-04 dl dt div:nth-child(4), .table-04 dl dd div:nth-child(4) { width: 7%; }
.table-04 dl dt div:nth-child(5), .table-04 dl dd div:nth-child(5) { width: 12%; }
.table-04 dl dt div:nth-child(6), .table-04 dl dd div:nth-child(6) { width: 7%; }
.table-04 dl dd div:nth-child(3) { text-align: left; }

.time-table > div { width: 32%; }
.time-table .title { width: 100%; background-color: var(--color-main-02); border: solid 1px var(--color-line); display: flex; justify-content: space-between; }
.time-table .title span { padding: 5px 0; display: block; text-align: center; }
.time-table .title span:nth-child(1) { width: 40%; }
.time-table .title span:nth-child(2) { width: 40%; }
.time-table .title span:nth-child(3) { width: 20%; }
.time-table .list li { width: 100%; border: solid 1px var(--color-line); border-top: 0;  display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 5px; }
.time-table .list li div input, .time-table .list li div select { width: 100%; }
.time-table .list li div { margin-bottom: 5px; padding: 0 5px; text-align: center; }
.time-table .list li div:nth-child(1) { width: 40%; }
.time-table .list li div:nth-child(2) { width: 40%; }
.time-table .list li div:nth-child(3) { width: 20%; }
.time-table .list li div:nth-child(4) { width: 100%; margin-bottom: 0; }


.view-area { width: 100%; margin: 0 auto 30px; } 
.view-area .view-title { width: 100%; border-top: 1px solid var(--color-main-04); }
.view-area .view-title h4 { line-height: 1.6; padding: 20px; font-size: 20px; margin-bottom: 0; word-wrap: break-word; }
.view-area .view-title .view-info { border-top: 1px solid var(--color-line); padding: 20px 0; }
.view-area .view-title .view-info ul {display: flex; }
.view-area .view-title .view-info ul li { padding: 0 16px; line-height: 1.6; }
.view-area .view-title span { float: left; padding-right: 8px; }
.view-area .view-title .text { color: #707070; float: left; }
.view-area .view-title .text:before { content: ':'; padding-right: 8px; }
.view-area .view-cont { min-height: 350px; padding: 20px 20px 40px; font-size: 16px; line-height: 1.6; word-wrap: break-word; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } 
.view-area .bo_info { width: 100%; padding: 20px; border-bottom: 1px solid var(--color-line); }
.view-area .view-answer { border-bottom: 1px solid var(--color-line); }
.view-area .view-answer dl { display: flex; justify-content: space-between; padding: 20px 0; }
.view-area .view-answer dl dt { width: 100px; }
.view-area .view-answer dl dd { width: 90%; }


/*=================================================================================
* tabs
=================================================================================*/
.tabs { width: 100%; }
.tab-links { display: flex; justify-content: space-between; padding: 0; margin-bottom: 30px; }
.tab-links li { width: 33.22%; border: solid 1px var(--color-line); }
.tab-links li a { display: block; width: 100%; padding: 10px 15px; text-decoration: none; text-align: center; background-color: var(--color-point-02); color: var(--color-point-03); }
.tab-links li.active a { color: var(--color-main-07); background-color: var(--color-main-01); }
.tab-content .tab { display: none; }
.tab-content .tab.active { display: block; }
.tab-links.col-2 li { width: 49.6%!important; }

/*=================================================================================
* resume
=================================================================================*/
.resume { position: relative; }
.resume h2 { border: solid 1px var(--color-line); text-align: center; border-radius: 10px; padding: 10px 0; margin-bottom: 30px; }
.resume h2 .resume-title { border: 0; font-size: var(--font-size-ll); width: 100%; text-align: center; }
.resume h3 { font-size: var(--font-size-l); border-bottom: solid 1px var(--color-main-05); padding-bottom: 10px; margin: 50px 0 20px;  }
.resume .basic { display: flex; justify-content: space-between; flex-wrap: wrap; }
.basic .photo { width: 200px; }
.basic .photo .thumb { border: solid 1px var(--color-line); width: 100%; height: 230px; }
.basic .photo ul li { font-size: var(--font-size-s); }
.basic .table-01 { width: 78%; }
.form-01 dl { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.form-01 dl dt { width: 100px; }
.form-01 dl dd { width: 90%; }
.form-01 dl dd div { display: flex; flex-wrap: wrap; position: relative; margin-bottom: 10px; }
.form-01 dl dd div input { margin-right: 5px; }
.form-01 dl dd div:last-child { margin-bottom: 0; }
.form-01 dl dd div button { position: absolute; top: 0; right: 0; height: 37px; line-height: 37px; border-radius: 3px; background-color: var(--color-main-04); color: var(--color-main-01); padding: 0 15px;  }
.form-01 dl dd div button.del { background-color: var(--color-main-06); }

/*=================================================================================
* modal
=================================================================================*/
.modal { display: none; /* 기본은 숨김 */ position: fixed; z-index: 1000;  left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); }
.modal-content { background-color: #fff; margin: 15% auto; padding: 20px; width: 640px; border-radius: 10px; text-align: center; position: relative; }
.close { position: absolute; display: block; top: 20px;  right: 20px; font-size: 24px; font-weight: bold; cursor: pointer; width: 24px; height: 24px; background: url("../img/icon-close.svg") no-repeat; }
.modal-content h3 { margin-bottom: 30px; }
.modal-content form { width: 94%; margin: 0 auto; }
.modal-content form div:first-child { border-top: solid 1px var(--color-line);}
.modal-content form div { padding: 10px 0; border-bottom: solid 1px var(--color-line); display: flex; justify-content: space-between; align-items: center; }
.modal-content form div .title { width: 20%; text-align: left; }
.modal-content form div .content { width: 80%; text-align: left; }
.modal-content .tip { width: 94%; margin: 0 auto;  padding-top: 10px; text-align: left; font-size: var(--font-size-s); }

.modal-content2 { background-color: #fff; margin: 5% auto; padding: 20px; width: 1280px; height: 80%; border-radius: 10px; text-align: center; position: relative; }
.modal-content2 h3 { margin-bottom: 30px; }
.modal-content2 .resume { overflow-y: scroll; height: 60vh; }

/*=================================================================================
* modal
=================================================================================*/
.agreement-wr { width: 460px; margin: 20px auto; }
.agreement-wr .line { border-bottom: solid 1px var(--color-line); margin-bottom: 10px; padding-bottom: 10px; }
.agreement-wr .top { display: flex; justify-content: space-between; align-items: center; }
.agreement-wr .check { margin: 3px 20px 3px 0; }
.agreement-wr h3 { font-size: var(--font-size-ll); text-align: center; margin: 20px 0 10px; }
.agreement-wr h4 { font-size: var(--font-size-m);}
.agreement-wr strong { margin: 5px 0; }
.agreement-wr strong, .agreement-wr span { display: block; }
.agreement-wr strong, .agreement-wr p, .agreement-wr span, .agreement-wr li { font-size: var(--font-size-s); }
.agreement-wr table th { border: solid 1px var(--color-line); padding: 10px; font-size: var(--font-size-ss); }
.agreement-wr table td { border: solid 1px var(--color-line); padding: 10px; font-size: var(--font-size-ss); }