/* 호반 sub - 2024.07.29 */

/* subtit */
.subtit h6{font-size: 50px; line-height: 1.2; font-family: 'GmarketSans'; font-weight: 500;}
.subtit > span{font-size: 22px; line-height: 1.2; color: #FE922A; margin-bottom: 14px; display: inline-block;}
.subtit p{color: #666; font-size: 20px; line-height: 1.4; font-weight: 400; margin-top: 1.2em;}
.subtit{margin-bottom: 90px;}

.flex{display: flex; }
.ac{align-items: center;}
.sb{justify-content: space-between;}
.fe{align-items: flex-end;}

label {cursor: pointer;}

/* company */
/* company - 계열사소개 */
.company .sub_header{background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/sub_01.jpg) bottom no-repeat; }
.company .company_title{display: block;}
.company .tab01_tit.tab_comp{display: block;}
.company .tab_in_menu.tab_comp{display: block;}
.comp1 .sel_tit.comp_1{display: block;}

.but button{padding:14px 14px;border:1px solid #eee; border-radius: 60px; color: #333;width: 180px; display: flex; justify-content: center; font-size: 16px; align-items: center;}
.but button span{transition-duration: 0.3s;width: 9px;position: relative; margin-left: 8px;display: block; height:20px; top:-1px}
.but button span::before{ content:'';display: block;;width: 100%;width:9px;height:9px;background: #FE922A; border-radius: 2px;transition-duration: 0.3s;}
.but button span::after{ content:'';display: block;;width: 100%;width:9px;height:9px; background: #89898A; border-radius: 2px; margin-top: 2px;transition-duration: 0.3s;}
.but button:hover span{width: 20px;}
.but button:hover span::before, .but button:hover span::after{width: 100%;}

.comp_2 .comp_li ul li {cursor: pointer;}

.comp_li ul{display: flex; gap: 80px 30px; flex-wrap: wrap;}
.comp_li ul li{width: calc((100% - 60px) / 3); }
.comp_li .imgwrap{position: relative; width:100%; padding-bottom: 68%;}
.comp_li .imgwrap img{position: absolute; width: 100%; height:100%; left:50%; top:50%; transform: translate(-50%, -50%); object-fit: cover;}
.comp_li .txt > div{padding: 24px 0; height: 103px;}
.comp_li .txt h6{font-weight: 600; font-size: 28px; line-height: 1; margin-bottom: 12px; display: flex; align-items: center;}
.comp_li .txt h6 .link_btn{margin-left: 8px; display: inline-block;}
.comp_li .txt p{color: #FE922A; font-weight: 400; font-size: 15px; line-height: 1;}
.comp_li .txt dl dt, .comp_li .txt dl dd{display: inline-block; height: 56px; line-height: 56px; box-sizing: border-box; padding-left: 20px; border-top: 1px solid #eee;} 
.comp_li .txt dl dt{width: 24%; background-color: #f9f9f9; font-weight: 500;}
.comp_li .txt dl dd{width: 75%; font-weight: 400; color: #444;}
.comp_li .txt dl{border-bottom: 1px solid #eee;}

/* 직무소개-디테일 */
.cus-btn {margin-top: 30px;}  
.careers {display: flex; row-gap: 80px; column-gap: 100px; margin-top: 80px; flex-wrap: wrap;}
.careers .care-con strong {font-size: 24px; margin-bottom: 15px; display: inline-block; position: relative;}
/* .careers .care-con strong::after {content: ""; display: block; position: absolute; width: 100%; height: 3px; background-color: #FE922A; bottom: -6px; left: 0;} */
/* .careers .care-con div {width: 100%; height: 160px; border-radius: 20px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; padding: 0 150px;} */
.careers .care-con div p {font-size: 18px; font-weight: 500; color: #555; line-height: 1.5; font-weight: 400;}
.detail-tit {display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff;  height: 350px; border-radius: 10px; overflow: hidden; position: relative;}
.detail-tit::before {content: ""; display: block; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.5); top: 0; left: 0;}
.detail-tit strong {position: relative; z-index: 2;  font-family: 'GmarketSans'; font-weight: 500;}
.con2 {margin-top: 80px;}
.detail-tit1 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg4.jpg) no-repeat center/cover;}
.detail-tit2 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg2.jpg) no-repeat center/cover;}
.detail-tit3 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg03.jpg) no-repeat center/cover;}
.detail-tit4 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg4.jpg) no-repeat center/cover;}
.detail-tit5 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg5.jpg) no-repeat center/cover; background-position: 50% 28%;}
.detail-tit6 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg06.jpg) no-repeat center/cover; background-position: 50% 28%;}
.detail-tit7 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg7.jpg) no-repeat center/cover; background-position: 50% 28%;}
.detail-tit9 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg8.jpg) no-repeat center/cover; background-position: 50% 40%;}
.detail-tit10 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg9.jpg) no-repeat center/cover; background-position: 50% 66%;}
.detail-tit11 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg010.jpg) no-repeat center/cover; background-position: 50% 49%;}
.detail-tit12 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg11.jpg) no-repeat center/cover; background-position: 50% 61%;}
.detail-tit13 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg012.jpg) no-repeat center/cover; background-position: 50% 78%;}
.detail-tit14 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg13.jpg) no-repeat center/cover; background-position: 50% 78%;}
.detail-tit15 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg14.jpg) no-repeat center/cover; background-position: 50% 78%;}
.detail-tit16 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg15.jpg) no-repeat center/cover; background-position: 50% 78%;}
.detail-extra1 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/engineer.jpg) no-repeat center/cover; background-position: 50% 36%;}
.detail-extra2 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/constru.jpg) no-repeat center/cover; background-position: 50% 36%;}
.detail-extra3 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg4.jpg) no-repeat center/cover;}
.detail-extra4 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/front.jpg) no-repeat center/cover;}
.detail-extra5 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/food.jpg) no-repeat center/cover;}
.detail-extra6 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/spa.jpg) no-repeat center/cover;}
.detail-extra7 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/facility.jpg) no-repeat center/cover;}
.detail-extra8 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/leasing.jpg) no-repeat center/cover;}
.detail-extra9 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/golf1.jpg) no-repeat center/cover;}
.detail-extra10 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/golf2.jpg) no-repeat center/cover;}
.detail-extra11 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/golf3.jpg) no-repeat center/cover;}
.detail-extra12 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/golf4.jpg) no-repeat center/cover;}
.detail-extra13 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/golf5.jpg) no-repeat center/cover; background-position: 50% 80%;}
.detail-extra14 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/golf6.jpg) no-repeat center/cover;}
.detail-extra15 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/golf7.jpg) no-repeat center/cover;}
.detail-extra16 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/detail-bg12.jpg) no-repeat center/cover;}
.detail-extra17 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/trading.jpg) no-repeat center/cover;}
.detail-extra18 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/gold.jpg) no-repeat center/cover;}
.detail-extra19 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/hotel-04.jpg) no-repeat center/cover;}
.detail-extra20 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/hotel-05.jpg) no-repeat center/cover;}
.detail-extra21 {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/hotel-06.jpg) no-repeat center/cover;}
.but.morebtn {margin-top: 20px;}

/* .careers .care-con {width: calc((100% - 100px) / 2); gap: 25px;} */

.care-con {display: flex; align-items: center; justify-content: space-between;width: calc((100% - 100px) / 2); gap: 30px;}
.care-con .care-icon {width: 136px; border-radius: 100%; background-color: #f9f9f9; display: flex; align-items: center; justify-content: center; padding: 20px; aspect-ratio: 1 / 1;}
.care-con .care-icon img {width: 52px;}
.care-con .care-tit {width: calc(100% - 166px);}

.people .sub_header{background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/sub_01.jpg) bottom no-repeat; }
.people .hr_title {display: block;}

.people .tab_hr.tab01_tit {display: block;}
.people1 .hr_1.sel_tit {display: block;}
/* .people1 .sel_tit.hr_1 {display: block;} */
.people2 .sel_tit.hr_2 {display: block;}
.people .tab_in_menu.tab_hr {display: block;}
.people .tab_in_menu.tab_hr {display: block;}
.guide1 .sel_tit.guide_1 {display: block;}

/* 채용공고 recruit */
.recruit .sub_header{background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/sub_01.jpg) bottom no-repeat; }
.recruit .recruit_title{display: block;}
.recruit .tab01_tit.tab_rec{display: block;}

.tabs{margin-top: 30px;}
.tabs ul{display: flex;}
.tabs li+ li{margin-left: 12px;}
.tabs li.on a{background: #FE922A; color: #fff;font-weight: 400;border-color:#FE922A;}
.tabs li a{padding:12px 25px;border-radius: 30px;border:1px solid #eee;background: #f9f9f9; color: #333; font-weight: 400;}
.tabs li:hover a{background: #FE922A; color: #fff;border-color:#FE922A;}

/* 채용공고 디테일 recruit-view */
.review-top {display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 40px 0; border-top: 2px solid #FE922A; border-bottom: 1px solid #ddd;}
.review-top .due-date {background-color: #FE922A; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; padding: 7px 19px; border-radius: 50px;}
.recview-tit {display: flex; flex-direction: column; align-items: center; gap: 15px;}
.recview-tit .recview-detail {display: flex; gap: 20px;}
.recview-tit .recview-detail ul {display: flex; }
.recview-tit .recview-detail ul li {padding: 0 10px; position: relative; font-weight: 400;}
.recview-tit .recview-detail ul li:first-child::after {content: none;}
.recview-tit .recview-detail ul li::after {content: ""; display: block; width: 1px; height: 12px; background: #111; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.recview-tit .recview-detail ul li:first-child {padding-left: 0;}
.recview-tit .recview-detail .day {display: flex; gap: 10px; font-weight: 400; color: #888;}
.recview-tit > p {font-size: 32px; text-align: center;}
.recview_content {padding: 50px 0; width: 60vw; margin: 0 auto; border-bottom: 1px solid #ddd;}

.btn-wrap02 {display: flex; gap: 20px; justify-content: center; margin-top: 50px;}
.btn-wrap02 button {padding: 17px 0px; width: 155px; font-size: 16px; border-radius: 50px !important;}
.btn-wrap02 .apply-btn {border:1px solid #FE922A; color: #FE922A;}
.btn-wrap02 .list-btn {background-color: #f9f9f9; color: #555; border: 1px solid #ddd;}

/* 체크 */
.check{position: relative;}
.check_label { display: inline-block; position: relative;  font-size:1em; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none;
    text-align: left; padding-left:24px; vertical-align: middle; font-weight: 500;}
.check_label input {position: absolute;opacity: 0;cursor: pointer; visibility: hidden;}

/* 체크 크기 */
.checkmark {position: absolute; top:50%; transform:translateY(-50%); left: 0; height: 18px; width: 18px; background-color:#fff; border-radius:4px; border: 6px solid #ddd; }
.check_label:hover input ~ .checkmark {background-color: #efefef;}
.check_label input:checked ~ .checkmark {border:1px solid transparent; background-color: #999;}
.checkmark:after { content: ""; position: absolute; display: none;}
.check_label input:checked ~ .checkmark:after {display: block;}

/* 체크박스 */
.check_label .checkmark:after {left: 5px; top:1px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
/* 라디오 */
.checkmark.radio{border-radius: 50%;}
.check_label .checkmark.radio:after{ top: 5px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background:#fff;
  -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); border:0;}

  /* form */
input:checked + .slider{background-color: #FE922A;}
.insert-wrap .insert.insert-chk .check_label input:checked ~ .checkmark, .check_label input:checked ~ .checkmark{background-color: #FE922A;}
.form input{height:50px;}
.form input[type=text], .form input[type=password]{padding-left: 14px; padding-right: 14px; height: 50px; font-size: 15px; border-color: #ddd !important;}
textarea{padding:12px; font-size: 15px;}
.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container .select2-selection--single{height: 50px !important; line-height: 50px !important; font-size: 1em; font-weight: 500 !important;}
.select2-container .select2-selection--single .select2-selection__rendered{padding-left: 18px !important;;}
.select2-results__option{padding: 13px 18px !important; font-size: 1em; font-weight: 500;}
.table1 .select2-container, .table3 .select2-container{min-width: 100px;}
.box-search-container input, .box-search-container .select2-container{box-shadow: none;}
.switch input{display: none;}
textarea{line-height: 1.4;}

form input{font-size: 16px;}
form input[type=text], .form input[type=password]{padding: 0 18px;}

.select2-container{min-width: 160px; border-radius: 4px;}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 50px; text-align: left;}
.select2-container .select2-selection--single{height:50px; border-radius: 4px;}
.select2-container--default .select2-selection--single{border:1px solid #dcdee1; background-color:#fff;}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:50%; right:12px !important;
  transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.select2-selection--single:focus{outline:none;}
.insert-select{position: relative;}
.select2-dropdown{border:1px solid #dcdee1;}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#f1f1f1; color:#222;}

.select2-container--default .select2-selection--single .select2-selection__arrow b{border: transparent; position: absolute;
  top: 57%; transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);
  background-size: 9px 5px; width: 9px; height: 5px; background-repeat: no-repeat; background-image: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/external/icon-arrow-st2.png);}

.select2-container--open .select2-selection--single .select2-selection__arrow{
  transform:translateY(-50%) rotate(180deg); -ms-transform:translateY(-50%) rotate(180deg); -webkit-transform:translateY(-50%) rotate(180deg);}
  .select2-container--default .select2-results>.select2-results__options{max-height: 400px !important;}

  .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar{width: 8px;}
  .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb{background-color: #888;}
  .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track{background-color: #ddd;}


/* select-list */
.select-list{width: 100%; background-color:#f5f7fa; height:210px;}
.select-list option{padding:8px 16px;}

.select-list option:checked {
  background: #c1c4c9  linear-gradient(0deg, #c1c4c9  0%, #c1c4c9  100%);
}

.rec{position: relative; height: 100%;}
.rec ul{width: 100%;}
.rec form ul li + li{margin-top: 16px; padding-top: 16px; border-top: 1px solid #eee;}
.rec form input, .rec form input, .rec form select {width: 100%;}

.rec{display: flex; gap: 60px;}
.rec .rec_filter{width: 420px; border-radius: 30px; border: 1px solid #eee; box-shadow: 0 0 20px rgba(0,0,0,.06); box-sizing: border-box; padding: 30px; height: 100%; position: sticky; top: 116px;}
.rec .rectit{display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #666; margin-bottom: 20px;}
.rec .rectit p{font-size: 20px; font-weight: 600; }
.rec .rectit button{color: #999; font-size: 15px; display: flex; align-items: center;}
.rec .rectit button span{height: 16px; width: 16px; display: inline-block; margin-left: 2px;}

.rec .searchbox{position: relative; height: 50px; border-radius: 4px; border: 1px solid #ddd;}
.rec .searchbox input[type=text]{border: none; width: calc(100% - 50px); height: 100%; padding-right: 0;}
.rec .search_btn{position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 14px;}

.rec .rec_filter .btn_flex{gap: 8px; flex-wrap: wrap;}
.rec .rec_filter .btn_flex div{padding: 8px 14px 7px; font-weight: 400; border-radius: 20px; background-color: #fff; border: 1px solid #ddd; line-height: 1; font-size: 15px; cursor: pointer;}
.rec .rec_filter .btn_flex div:hover{background-color: #FE922A15; color: #FE922A; border-color: #FE922A50;} 
.rec .rec_filter .btn_flex div.on{color: #fff; border-color: #FE922A; background-color: #FE922A;}
.rec .rec_filter ul li.btn, .rec .rec_filter ul li:nth-child(2){padding-top: 0; border-top: none;}

.rec .rec_filter ul li.btn button{width: 100%; background-color: #FE922A; border-radius: 30px; padding: 14px 0; color: #fff; font-size: 16px;}  

.rec .rec_filter ul li p{font-size: 18px; line-height: 1; margin-bottom: 10px; }

.noPost{}
.noPost > div {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px;}
.noPost i{display: block; width: 80px; height: 80px; margin: 0 auto; margin-bottom: 20px;}
.noPost p{font-weight: 500; font-size: 18px; color: #888;}


.rec_list{width: calc(100% - 480px);}
.rec_list .total{padding-bottom: 12px;}
.rec_list .total p{font-size: 17px; font-weight: 500;}
.rec_list .total p span{color: #FE922A; font-weight: 700;}

.apply_list li + li{margin-top: 16px;}
.apply_list li{cursor: pointer;}
.apply_list li:hover > div{border-color: #FE922A; outline: 1px solid #FE922A; box-shadow: 0 0 10px #FE922A20;}
.apply_list li > div{ border:1px solid #ddd; padding:30px; border-radius: 20px; background: #fff;}
.apply_list li .top{display: flex; align-items: center;}
.apply_list li .top b{ font-weight: 600; padding:6px 18px; border-radius: 30px; background: #FE922A; color: #fff;}
.apply_list li .top b span{ font-weight: inherit;} 
.apply_list li .top p{ margin-left: 12px; color: #111; font-weight: 600; font-size: 18px;;}
.apply_list li .top b.done {background-color: #bbb; color: #fff;}

.apply_list li em{ font-size: 23px; line-height: 1.3 ; margin:15px 0; display: block; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.apply_list li .bot p {font-weight: 300;}
.apply_list li .bot p span{}
.apply_list li .bot p span + span{margin-left: 10px;padding-left: 10px;position: relative;;}
.apply_list li .bot p span + span::after{content:''; display: block; width: 1px;height: 12px;background: #111;position: absolute;left:0;top:50%;transform: translateY(-50%);}

.apply_list li .bot p.bay{color: #666; margin-top: 2px;}


/* 지원가이드 */
.guide .sub_header{background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/sub_01.jpg) bottom no-repeat; }
.guide .guide_title{display: block;}
.guide .tab01_tit.tab_guide{display: block;}
.guide .tab_in_menu.tab_guide{display: block;}

/* faq */
.guide2 .sel_tit.guide_2{display: block;}
.faqlist{border-bottom: 1px solid #eee; border-top: 1px solid #eee;}
.faqlist li + li{border-top: 1px solid #eee;}
.faqlist li .faq_title{padding: 33px 20px; cursor: pointer;}
.faqlist li .faq_title .q{position: relative; font-weight: 600; font-size: 20px; color: #222; line-height: 1.3em;}
.faqlist li .faq_title .q::before{ content: 'Q'; color: #22222240; font-weight: 700; display: inline-block; position: relative; padding-right: 20px;}
.faq_answer{margin: 0 20px 26px; padding: 40px; background-color: #F9F9F9;border-radius: 12px; font-weight: 400; font-size: 18px; line-height: 1.5; display: none; }
.faqlist li .faq_title .q::after{content: ''; display: inline-block; position: absolute; width: 8px; height: 8px; right: 0; top: 20%; border-top: 1px solid #888; border-right: 1px solid #888; transform: rotate(-45deg); transition: all .2s;}
.faqlist li.turn .faq_title .q::after{transform: rotate(135deg); border-color: #FE922A;}

.page-nav {display: flex; align-items: center; gap: 60px; justify-content: center; margin-top: 60px;}
.page-nav ul {display: flex; align-items: center; gap: 28px;}
.page-nav ul li {border: none; color: #d7d7d7; font-size: 18px; cursor: pointer; font-weight: 300;}
.page-nav ul li.page-on {color: #333; position: relative; font-weight: 900;}
.page-nav ul li.page-on::before {content: ""; display: block; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #333;}
.page-nav .page-btn i {font-size: 20px; display: block; color: #ddd;}
.page-nav .page-btn.btn-on i {cursor: pointer; color: #333;}

/* qna */
.guide3 .sel_tit.guide_3{display: block;}
.qna {overflow: hidden;}
.qnaform form {display: flex; flex-direction: column; gap: 0;}

.qnaform dl {display: flex; align-items: center; padding: 25px 30px; border-bottom: 1px solid #eee;}
.qnaform dl dd {width: 220px; font-size: 20px;}
.qnaform dl dt {width: calc(100% - 220px);}

.qnaform dl select {padding: 0 18px; background-color: #f5f5f5 !important; border: none;  width: 790px !important; height: 50px; border-radius: 4px; font-size: 15px; background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/angle.png) no-repeat; background-position: 98% 50%;}
/* .qnaform dl input {width: 60%; border: none; background-color: #f5f5f5;} */
.qnaform dl input {width: 790px;}

select {
  -webkit-appearance:none; /* for chrome */
  -moz-appearance:none; /*for firefox*/
  appearance:none;
  outline: none;
}

select::-ms-expand{
  display:none;/*for IE10,11*/
}

.qnaform input[type="text"] {border-color: #ddd;}
/* .qnaform textarea {resize: none; width: 100%; height: 200px; border:none; border-radius: 4px; background-color: #f5f5f5; padding: 18px; outline: none;} */
.qnaform textarea {resize: none; width: 100%; height: 200px; border-radius: 4px; padding: 18px; outline: none; border: 1px solid #ddd;}
.qnaform .privacy-con {border: 1px solid #ddd; border-radius: 4px; padding: 18px; height: 150px; overflow-y: scroll; font-weight: 400; color: #777;}
.chk-wrap {display: flex; align-items: center; margin-top: 10px;}
input[type="checkbox"] {display: none;}
.chk-wrap span {width: 20px; height: 20px; display: inline-block; background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/chk-none.png) no-repeat center/cover;}
.label-wrap {display: flex; align-items: center; gap: 5px;}
.label-wrap p {font-weight: 400;}
.chk-wrap input:checked ~ label span {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/chked.png) no-repeat center/cover;}
.chk-wrap input:checked ~ label p {font-weight: 600;}

.qnaform .form-top {border-top: 2px solid #FE922A;}
/* .qnaform .form-top {display: flex; width: 100%;}
.qnaform .form-top dl {width: 50%;}
.qnaform .form-top dl dd {width: 220px;}
.qnaform .form-top select {width: 90%;} */

.btn-wrap {display: flex; justify-content: center; margin-top: 50px;}
.btn-wrap button {padding: 20px 0px; width: 230px; border: 2px solid #FE922A;  color: #FE922A; font-size: 20px; border-radius: 50px; transition: all 0.3s;}
.btn-wrap button:hover {background-color: #FE922A; color: white;}

/* 2024-08-05 css custom */

/* hoban_company - 회사소개 (계열사 소개) */

/* hoban_affiliate - 회사소개 (직무 소개) */

.subtab > ul {width: 100%; display: flex;}
.hoban_affiliate .subtab > ul > li {width: calc(100% / 7); text-align: center; padding: 10px 0; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: 500; color: #ddd; cursor: pointer;}
.hoban_affiliate .subtab > ul > li.on {border-bottom: 3px solid #fe922a; color: #111; font-weight: 700;}
.hoban_affiliate .comp_li { margin-top: 60px;}

.comp_2 .sel_tit.comp_2 {display: block;}

/* 채용절차 */
.guide1 .sel_tit.guide_{display: block;}
.process {margin-bottom: 150px;}
.process .process-tit {font-size: 35px; display: flex; align-items: center;}
.process .process-tit span {width: 9px; position: relative; margin-right: 10px; display: inline-block; }
.process .process-tit span::before {content: ""; display: block; width: 12px; height: 12px; background-color: #FE922A; border-radius: 2px;}
.process .process-tit span::after {content: ""; display: block; width: 12px; height: 12px; background-color: #89898a; border-radius: 2px; margin-top: 3px;}
/* .process .process-wrap {display: flex; width: 100%; justify-content: space-between; position: relative; margin-top: 50px;} */
.process .process-wrap {display: flex; width: 100%; justify-content: space-between; position: relative; margin-top: 50px; padding: 30px 40px; border: 1px dashed #ffc992; border-radius: 150px;}
.process .process-wrap::before {content: ""; display: block; height: 1px; width: 88%; border-top: 1px dashed #ececec; position: absolute; top: 50%;}
/* .process .process-wrap .circle {width: 220px; height: 220px; border-radius: 50%; border: 2px solid #f1f1f1; display: flex; align-items: center; justify-content: center; position: relative; background-color: white;} */
.process .process-wrap .circle {width: 220px; height: 220px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background-color: #fff3e7;}
/* .process .process-wrap > div:last-child {border: 5px solid #FE922A;} */
/* .process .process-wrap .circle::before {content: ""; display: block; position: absolute; width: 90%; height: 90%; border-radius: 50%; background-color: #fff3e7; left: 50%; top: 50%; transform: translate(-50%,-50%);} */
.process .process-wrap .circle:last-child {border:2px solid #FE922A; background-color: #FE922A;}
/* .process .process-wrap .circle:last-child::before {background-color: #FE922A; width: 100%;height: 100%;} */
.process .process-wrap .circle:last-child .circle-txt { color: #fff;}
.circle-txt {display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; gap: 5px;}
.circle-txt span {font-size: 22px; font-weight: 700;}
.circle-txt strong {font-size: 22px; font-weight: 500;}

.con-top {border-top: 2px solid #333;}
.process-con {margin-top: 100px;}
.process-con dl {display: flex; align-items: flex-start; padding: 60px 30px; border-bottom: 1px solid #ececec;}
.process-con dl dd {width: 360px; font-size: 26px;}
.process-con dl dt {width: calc(100% - 360px); padding-top: 3px;}
.process-con dl dt > ul {display: flex; flex-direction: column; gap: 30px;}
.process-con dl dt ul > li.main-pro {font-size: 20px; font-weight: 400; color: #222;}
/* .process-con dl dt ul > li.main-pro::before {content: "•"; display: inline-block; margin-right: 5px; font-size: 20px; line-height: 0.2;} */
.process-con dl dt ul > li ul li {font-size: 17px; color: #777; text-indent: 5px;}
.process-con dl dt ul > li > ul { margin-top: 15px; display: flex; flex-direction: column; gap: 10px;}
.process-con dl dt ul > li > ul > li::before {content: "-"; display: inline-block; color: #777; margin-right: 5px;}

.re-notice {padding: 40px 30px; border-radius: 10px; background-color: #f5f5f5; margin-top: -80px;}
.re-notice h3 {font-size: 18px; color: #555; margin-bottom: 15px; display: flex; align-items: center; gap: 3px;}
.re-notice .notice-txt {font-size: 16px; color: #777; font-weight: 300; display: flex; flex-direction: column; gap: 8px;}

/* 사내복지 */

.welfare-wrap {display: flex; flex-direction: column; gap: 120px;}
.welfare-wrap > div:first-child {padding-top: 0;}
.welfare-con {display: flex; flex-direction: column; gap: 50px;}
.welfare-con .wel-tit {display: flex; flex-direction: column; text-align: center;}
.welfare-con .wel-tit strong {font-size: 40px; margin-bottom: 10px;}
.welfare-con .wel-tit span {font-size: 20px; font-weight: 400; color: #666;}
.welfare-con .wel-box {display: flex; column-gap: 30px; row-gap: 40px; flex-wrap: wrap;}
.welfare-con .welfare {width: calc((100% - 90px) / 4); padding: 40px; border-radius: 20px; background-color: #fff; border: 1px solid #eee; transition: all 0.2s; box-sizing: border-box;}
.welfare-con .welfare .welfare-icon {width: 85px; height: 85px; background-color:#fff9f2; display: flex; align-items: center; justify-content: center; border-radius: 20px; margin-bottom: 25px;}
.welfare-con .welfare .welfare-icon i {width: 50px; display: inline-block;}
.welfare-con .welfare .wel-txt {display: flex; flex-direction: column; gap: 10px;}
.welfare-con .welfare .wel-txt p {font-size: 24px;}
.welfare-con .welfare .wel-txt span {font-size: 18px; font-weight: 400; color: #666;}

.welfare-con .welfare:hover {box-shadow: 0 4px 10px rgba(197,197,197,.3); border:1px solid #FE922A; outline: 1px solid #fe922a;}

/* 인재상 */

.people-wrap {padding-bottom: 70px;}
.out-circle {position: relative; width: 460px; aspect-ratio: 1 / 1; border-radius: 100%; border: 1px solid #FFC995; padding: 40px; margin: 0 auto;}
.out-circle .inner-circle {border-radius: 100%; width: 100%; height: 100%; background: linear-gradient(143deg, #fcc42b, #fd9f1b, #fe7f0f, #ff7d00);}
.out-circle .circle-con  {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5;}

.out-circle .ball-holder {position: absolute; width: 100%; height: 100%; border-radius: 50%; top: 0; left: 0; z-index: 1;}
.out-circle .ball-holder .ball {position: absolute; border-radius: 50%; background-color: #FFC995;}
.out-circle .holder01 .ball { top: 50%;  width: 12px; height: 12px; left: -6px;}
.out-circle .holder02 .ball {bottom: 50%; right: -9px; width: 18px; height: 18px;}
.out-circle .holder01 {animation: ball01 16s linear infinite;}
.out-circle .holder02 {animation: ball01 16s linear infinite;}

@keyframes ball01 {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.circle-ball {position: absolute; width: 56%; aspect-ratio: 1 / 1; border-radius: 100%; background-color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(107,107,107,.3);}
/* .circle-ball::before {content: ""; display: block; position: absolute; width: 12px; height: 12px; border-radius: 100%; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%);} */
.circle-ball.ball1 {top: -90px; left: -95px; border:2px solid #FE922A;}
.circle-ball.ball2 {top: -90px; right: -95px; border: 2px solid #FCC42B;}
.circle-ball.ball3 {bottom: -90px; left: -95px; border: 2px solid #FCC42B; }
.circle-ball.ball4 {bottom: -90px; right: -95px; border: 2px solid #FE922A;}

.circle-tit {display: flex; flex-direction: column; align-items: center; width: fit-content;}
.circle-tit em {display: flex; width: 65px; margin-bottom: 10px;}
.circle-tit p {font-size: 26px;}
.circle-tit span {font-size: 20px; color: #555; font-weight: 500;}


.talent {margin-top: 160px;}

.inner-tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center;}
.inner-tit p {font-size: 54px; color: white; margin-top: -16px;}
.inner-tit i {display: inline-block; width: 215px;}

.people-tit {display: flex; gap: 100px; align-items: center;}
.people-tit strong {font-size: 35px;}
.people-tit span {font-size: 20px; font-weight: 400; color: #555;}

.people-tit2 {width: 100%; height: 250px; border-radius: 20px; background:url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/value.jpg) no-repeat center/cover;}

.value-tabs .tabs {margin: 0 !important;}
.subtit.value-sub {margin-top: 70px;}

/* 핵심가치 */
.con2 {overflow: hidden;}
.core-value {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/main-bg.png), url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/main-bg02.png); background-repeat: no-repeat; background-size: 37%, 50%; background-position: 100% -12% ,0 85%;}

/* .value-bg {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/value02-2.jpg) no-repeat center/cover; overflow: hidden; background-attachment: fixed;} */

.value-bg {width: 100%; height: 550px; position: relative; overflow-x: hidden;}
.value-bg-wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.value-bg-wrap .bg {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/value02-2.jpg) no-repeat center/cover; transform: translateZ(0); will-change: transform;}
/* .value-bg {height: 1000px; position: relative;}
.value-bg .bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%;background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/value02-2.jpg); background-size: cover; background-position: center center; transform: translateZ(0); will-change: transform;}  */

.value-inner {padding: 150px 0;}
.value-inner:last-child {padding-bottom: 0;}



.growth {display: flex; justify-content: space-between; background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/main-bg03.png) no-repeat; background-size: 9%; background-position: 0 107%; }
.value-tit {display: flex; flex-direction: column; width: 40%;}
.value-tit em {display: block; width: 75px; margin-bottom: 50px;}
.value-tit h3 {font-size: 60px; font-weight: 700; margin-bottom: 25px;}
.value-tit p {font-size: 22px; color: #666; font-weight: 300;}

.value-con {width: 60%;}
.value-con .value-sub-tit {display: flex; flex-direction: column; gap: 25px;}
.value-con .value-sub-tit p {font-size: 30px; font-weight: 600;}
.value-con .value-sub-tit span {font-size: 20px; font-weight: 400; color: #555; line-height: 1.6;}


.value-con {display: flex; flex-direction: column; gap: 90px; margin-top: 200px;}
.value-con .growht-con ul {display: flex; flex-wrap: wrap; column-gap: 35px; row-gap: 35px; }
.value-con .growht-con ul li {width: calc((100% - 105px) / 4); padding: 25px; border: 1px solid #ffcd9b; border-radius: 10px; display: flex; flex-direction: column; gap: 15px; transition: all 0.2s; background-color: #fff;}
.value-con .growht-con ul li:hover {box-shadow:0 4px 10px rgba(197,197,197,.3)}
.value-con .growht-con ul li:nth-child(2), .value-con .growht-con ul li:nth-child(4), .value-con .growht-con ul li:nth-child(5), .value-con .growht-con ul li:nth-child(7) {border-color: #ddd;}
.value-con .growht-con ul li em {display: block; width: 55px;}
.value-con .growht-con ul li div {display: flex; flex-direction: column; gap: 3px;}
.value-con .growht-con ul li div p {font-size: 20px;}
.value-con .growht-con ul li div span {font-size: 16px; color: #999; font-weight: 400;}

.win .value-tit {position: sticky; top: 130px; left: 0; align-items: flex-start; justify-content: flex-start; height: fit-content;}
/* .win {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/win-bg.png) no-repeat; height: 1000px; background-attachment: fixed;} */

.win {width: 100%; height: 1000px; position: relative;}
.win-bg-wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.win-bg-wrap .bg {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/win-bg.png) no-repeat center/cover;transform: translateZ(0); will-change: transform;}

.win .value-tit h3 {color: #fff;}
.win .value-tit p {color: rgba(255, 255, 255, .85); font-weight: 200;}
.win .value-con {margin-top: 110px;}
.win-con {display: flex;  height: 100%;}
.win-tit em {font-size: 26px; color: #fff; margin-bottom: 15px; display: block;transition: all 0.2s;}
.win-tit p {font-size: 32px; font-weight: 100; color: #fff;transition: all 0.2s;}
.win-tit > div {font-size: 19px; font-weight: 100; color: #fff; padding: 35px 0; border-bottom: 1px solid rgba(255, 255, 255, .5); overflow: hidden; width: 0; height: 0; padding: 0;}
.win-tit {transition: all 0.3s; cursor: default;}
.win-tit:hover em {color: #ff7d00;}
.win-tit:hover p {font-size: 40px; font-weight: bold;}
.win-tit:hover span {opacity: 1;}
.win-tit:hover > div {padding: 35px 0; overflow: auto; width: 100%; height: fit-content;}

.scroll {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; width: 100%; background-color: pink; text-align: center;}

.future {display: flex; justify-content: space-between;}
.future-con {margin-top: 150px; width: 60%;}
.future-con ul {display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px; width: 100%;}
.future-con ul li { width: 100%; height: 430px; border-radius: 20px; overflow: hidden; position: relative; transition: all 0.3s;}
/* .future-con ul li:hover {background-size: 200% !important;} */
/* .future-con ul li::after {content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); position: absolute; top: 0; left: 0;} */
.future-con ul li:first-child {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/growth1.jpg) no-repeat center/cover; grid-column-start: 2;}
.future-con ul li:nth-child(2) {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/youth1.jpg) no-repeat center/cover; grid-column-start: 1; margin-top: -100px;}
.future-con ul li:nth-child(3) {background: url(https://d1rlmoqs0wi8hz.cloudfront.net/static/homepage/img/sub/stability1.jpg) no-repeat center/cover; margin-top: 200px;}
.future-con ul li em {font-size: 80px; font-weight: 900; color: rgba(255, 255, 255, .35); position: absolute; bottom: 0; right: 0; line-height: 0.6;}

.future-con ul li .fu-txt {display: flex; flex-direction: column; position: absolute; bottom: 37px; left: 30px; z-index: 2;}
.future-con ul li .fu-txt span {font-size: 16px; color: rgba(255, 255, 255, .92); font-weight: 200;}
.future-con ul li .fu-txt p {font-size: 46px; color: #fff; font-weight: bold;}


/* ********************************************* *
* 1630px
* ********************************************* */
@media screen and (max-width: 1630px){
  .value-inner {padding: 150px 20px;}
  .win {padding: 150px 0;}
  .growth {background-position: 20px 107%; gap: 20px;}
}

/* ********************************************* *
* 1500px
* ********************************************* */
@media screen and (max-width: 1500px){

}

/* ********************************************* *
* 1420px
* ********************************************* */
@media screen and (max-width: 1420px){
  .value-con .growht-con ul {column-gap: 20px;}
  .value-con .growht-con ul li {width: calc((100% - 60px) / 4);}

  .win-con {justify-content: space-between;}
  .win .value-con {width: 55%;}

  .future {flex-direction: column;}
  .future .value-tit {width: 36%;}
  .future-con {width: 70%; margin-left: auto; margin-top: -130px;}
  .future-con ul li {width: 100%; height: auto; aspect-ratio: 1.8 / 2;}

  .process .process-wrap .circle {width: 200px; height: 200px;}
}

/* ********************************************* *
* 1240px
* ********************************************* */
@media screen and (max-width: 1240px){
  .comp_li .txt dl dd {width: 74%;}
  .comp_li .txt dl dt, .comp_li .txt dl dd {padding-left: 12px;}

  .careers {column-gap: 65px;}
  .care-con {width: calc((100% - 65px) / 2);}
  .careers .care-con strong {margin-bottom: 12px;}
  .careers .care-con div p {font-size: 17px;}

  .out-circle {width: 400px;}
  .circle-tit p {font-size: 24px;}
  .circle-tit span {font-size: 18px;}

  .value-tit em {width: 70px; margin-bottom: 45px;}
  .value-tit h3 {font-size: 55px;}
  .value-tit p {font-size: 20px;}
  .value-tit p br {display: none;}
  .value-con .value-sub-tit p {font-size: 27px;}
  .value-con .value-sub-tit span {font-size: 18px;}

  .growth {flex-direction: column; gap: 80px; background-size: 12%;}
  .value-con {width: 80%; margin-left: auto; gap: 50px; margin-top: 0;}

  .win {height: 960px;}
  .win-tit p {font-size: 29px;}
  .value-con {gap: 60px;}
  .win-tit:hover p {font-size: 36px;}

  .future-con {width: 77%;}

  .welfare-con .welfare .wel-txt p {font-size: 22px;}
  .welfare-con .welfare {padding: 40px 30px; width: calc((100% - 60px) / 3);}
 
  .recview-tit > p {font-size: 30px;}
  .recview-tit {gap: 12px;}

  .process .process-wrap {padding: 30px;}
  .process .process-wrap .circle {width: 170px; height: 170px;}
  .process-con dl dd {width: 300px;}

  .comp_2 .comp_li ul {row-gap: 60px;}

  .btn-wrap button {width: 195px; padding: 17px 0;}

}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){
  .comp_li ul {gap: 80px 20px;}
  .comp_li ul li {width: calc((100% - 40px) / 3);}
  .comp_li .txt h6 {font-size: 26px;}
  .comp_li .txt dl dt, .comp_li .txt dl dd {padding-left: 10px;}
  .comp_li .txt dl dt {width: 26%;}
  .comp_li .txt dl dd {width: 72%;}

  .hoban_affiliate .subtab > ul > li {font-size: 17px;}

  .care-con {width: 100%;}
  /* .value-con {margin-top: 320px;} */

  .win-tit p {font-size: 27px;}
  .win-tit:hover p {font-size: 31px;}
  .win-tit em {font-size: 24px;}
  .win-tit > div {font-size: 18px;}

  .future-con ul {grid-column-gap: 50px;}
  .future-con ul li em {font-size: 66px;}
  .future-con ul li .fu-txt p {font-size: 42px;}

  .rec {gap: 30px; justify-content: space-between;}
  .rec_list {width: calc(100% - 415px);}
  .select2-container {width: 100% !important;}
  .qnaform dl select {width: 100% !important;}
  .qnaform dl input {width: 100%;}
  .rec .rec_filter {width: 385px;}

  .review-top {gap: 30px;}
  /* .review-top .due-date {width: 75px; height: 75px;} */

  .process .process-wrap {flex-wrap: wrap; column-gap: 130px; row-gap: 50px; justify-content: flex-start;}
  .process .process-wrap .circle {width: calc((100% - 260px) / 3); aspect-ratio: 1 / 1; height: auto;}
  .process .process-wrap .circle:first-child {position: relative;}
  .process .process-wrap .circle:first-child::after {content: ""; display: block; position: absolute; width: 80vw; height: 1px; border: 1px dashed #eee; top: 50%; left: 0; z-index: -1;}
  .process .process-wrap .circle:nth-child(4) {position: relative;}
  .process.newjob .process-wrap .circle:nth-child(4)::after {content: ""; display: block; position: absolute; width: 40vw; height: 1px; border: 1px dashed #eee; top: 50%; left: 0; z-index: -1;}
  .process .process-wrap::before {content: none;}

  .process-con dl dd {font-size: 24px;}
  .process .process-tit {font-size: 32px;}
  .process-con dl dt ul > li.main-pro {font-size: 18px;}
  .process .process-wrap {border-radius: 70px;}

  .btn-wrap button {font-size: 18px;}

}

/* ********************************************* *
* 890px
* ********************************************* */
@media screen and (max-width: 890px){
  .subtit h6 {font-size: 45px;}
  .subtit p {font-size: 19px;}

  .comp_li ul {gap: 80px 30px;}
  .comp_li ul li {width: calc((100% - 30px) / 2);}
  .comp_li .txt dl dt, .comp_li .txt dl dd {padding-left: 17px;}

  .subtab {width: 100%; overflow-x: scroll;}
  .subtab > ul {width: max-content;}
  .hoban_affiliate .subtab > ul > li {padding: 10px 25px; width: max-content;}

  .out-circle {width: 360px; padding: 25px;}
  .circle-ball.ball1 {top: -70px; left: -77px; }
  .circle-ball.ball2 {top: -70px; right: -77px; }
  .circle-ball.ball3 {bottom: -70px; left: -77px;  }
  .circle-ball.ball4 {bottom: -70px; right: -77px;}
  .circle-tit em {width: 58px;}
  .circle-tit p {font-size: 22px;}
  .circle-tit span {font-size: 16px;}
  .inner-tit i {width: 100%;}

  .value-con {width: 100%;}
  .value-tit {width: 100%;}
  .value-tit p br {display: block;}
  
  .value-tit h3 {font-size: 52px; margin-bottom: 20px;}
  .value-tit p {font-size: 18px;}
  .value-con .value-sub-tit {gap: 20px;}
  .value-con .value-sub-tit p {font-size: 24px;}
  .value-con .value-sub-tit span {font-size: 16px;}

  .value-con .growht-con ul {row-gap: 20px;}
  .value-con .growht-con ul li {padding: 15px 20px;}
  .value-con .growht-con ul li div p {font-size: 18px;}
  .value-con .growht-con ul li div span {font-size: 15px;}

  .win-con {flex-direction: column;}
  .win .value-con {width: 60%;}
  .win .value-tit {position: static;}
  .win {height: fit-content;}
  .win .value-con {margin-top: 80px;}
  .win-tit p {font-size: 24px;}
  .win-tit:hover p {font-size: 28px;}
  .win-tit > div {font-size: 16px;}

  .value-inner:last-child {padding-bottom: 70px;}

  .future .value-tit {width: 100%;}
  .future-con {width: 100%; margin-top: 50px;}
  .future-con ul {width: 100%;}
  /* .future-con ul li {aspect-ratio: 1 / 1;} */

  .welfare-con .wel-tit strong {font-size: 36px;}
  .welfare-con .wel-tit span {font-size: 18px;}

  .welfare-con .welfare {width: calc((100% - 30px) / 2);}

  .rec {flex-direction: column; gap: 50px;}
  .rec .rec_filter {position: static; width: 100%;}
  .rec_list {width: 100%;}


  .recview-tit > p {font-size: 27px;}
  .review-top .due-date {font-size: 18px;}

  .process .process-wrap {column-gap: 80px;}
  .process .process-wrap .circle {width: calc((100% - 160px) / 3);}



}

/* ********************************************* *
* 750px
* ********************************************* */
@media screen and (max-width: 750px){
  .process .process-wrap {column-gap: 50px;}
  .process .process-wrap .circle {width: calc((100% - 100px) / 3);}
  .circle-txt span {font-size: 20px;}
  .circle-txt strong {font-size: 20px;}

  .process-con dl dd {width: 240px;}

  .page-nav {gap: 40px;}

  .service_title_box > div > h2 {font-size: 40px;}
  .service_title_box {padding-bottom: 40px;}

  .qnaform dl dd {width: 150px; font-size: 18px;}
  .qnaform dl dt {width: calc(100% - 150px);}

  .btn-wrap button {width: 175px; padding: 15px 0;}

  .recview_content {width: 80vw;}
}

/* ********************************************* *
* 690px
* ********************************************* */
@media screen and (max-width: 690px){
  .subtit h6 {font-size: 42px;}
  .subtit > div {flex-direction: column; align-items: flex-start !important; gap: 30px;}

  .comp_li ul {gap: 60px 20px;}
  .comp_li ul li {width: calc((100% - 20px) / 2);}
  .comp_li .txt dl dt, .comp_li .txt dl dd {padding-left: 10px;}
  .comp_li .txt dl dd {width: 69%; font-size: 15px;}
  .comp_li .txt dl dt {width: 26%; font-size: 14px;}

  .detail-tit {font-size: 29px;}

  .out-circle {width: 60%;}

  .value-con .growht-con ul li {width: calc((100% - 40px) / 3);}

  .value-tit h3 {font-size: 46px; margin-bottom: 15px;}
  .value-tit em {width: 65px; margin-bottom: 40px;}

  .future-con ul li:nth-child(3) {margin-top: 140px;}
  .future-con ul li .fu-txt p {font-size: 36px;}
  .future-con ul li em {font-size: 55px;}
  .future-con ul li .fu-txt {bottom: 20px; left: 20px;}

  .welfare-con .wel-tit strong {font-size: 32px;}
  .welfare-con .wel-tit span {font-size: 17px;}

  .recview-tit .recview-detail {flex-direction: column; gap: 5px; align-items: center;}
  .circle-txt span {font-size: 18px;}
  .circle-txt strong {font-size: 18px;}

  .process-con dl {flex-direction: column; gap: 30px;}
  .process-con dl dt {width: 100%;}
  .process .process-tit {font-size: 30px;}
  .process .process-wrap {margin-top: 35px;}
  .process-con {margin-top: 70px;}
  .process-con dl {padding: 40px 20px;}
  .process-con dl dt > ul {gap: 20px;}
  .process {margin-bottom: 100px;}

  .comp_2 .comp_li ul {row-gap: 40px;}

  
}

/* ********************************************* *
* 580px
* ********************************************* */
@media screen and (max-width: 580px){
  .comp_li ul li {width: 100%;}
  .comp_li .txt dl dd {font-size: 16px;}
  .comp_li .txt dl dt {font-size: 16px;}
  .comp_li .txt h6 {font-size: 24px;}

  .subtit h6 {font-size: 40px;}

  .sub_tab_wrap > div {padding: 0;}
  .sub_tab_home {width: 55px !important;}
  .sub_tab_menu>li {width: calc((100% - 55px) / 2); font-size: 15px;}
  .sub_tab_title_box>span {padding: 0 15px;}
  .sub_tab_title_box>span:after {right: 15px;}

  .care-con {gap: 20px;}
  .care-con .care-icon {width: 125px;}
  .care-con .care-tit {width: calc(100% - 145px);}
  .care-con .care-icon img {width: 46px;}

  .out-circle {width: 67%;}

  .value-con .growht-con ul li {width: calc((100% - 20px) / 2);}

  .win-tit p {font-size: 24px; font-weight: bold;}
  .win-tit:hover p {font-size: 24px;}
  .win-tit > div { height: fit-content; width: 100%; padding: 35px 0; overflow: auto; font-weight: 300;}
  .win .value-tit p {color: rgba(255, 255, 255, .95);}
  .win-tit em {color: #ff7d00;}
  .win .value-con {width: 100%; gap: 45px;}
  

  .future-con ul {display: flex; flex-direction: column; gap: 20px;}
  .future-con ul li {margin: 0 !important; height: 250px; aspect-ratio: auto;}
  .future-con ul li em {font-size: 66px;}

  .welfare-con .wel-box {column-gap: 20px;}
  .welfare-con .welfare {padding: 30px 25px;width: calc((100% - 20px) / 2); }
  .welfare-con .welfare .welfare-icon {width: 80px; height: 80px;}
  .welfare-con .welfare .welfare-icon i {width: 45px;}
  .welfare-con .welfare .wel-txt p {font-size: 20px;}
  .welfare-con .welfare .wel-txt span {font-size: 16px;}

  .apply_list li em {font-size: 20px;}
  .apply_list li .bot p {font-size: 14px;}
  .apply_list li .top b {font-size: 14px;}
  .apply_list li .top b {padding: 6px 15px;}

  .review-top .due-date {font-size: 16px;}
  .recview-tit > p {font-size: 25px;}

  .process .process-wrap .circle {width: 180px;}
  .process .process-wrap {flex-direction: column;  align-items: center;}
  .process .process-wrap .circle:first-child::after {content: none;}
  .process.newjob .process-wrap .circle:nth-child(4)::after {content: none;}
  .process .process-wrap::before {content: ""; display: block; width: 1px; height: 85%; border: 1px dashed #eee; position: absolute; top: 30px; left: 50%;}

  .faqlist li .faq_title .q {font-size: 18px; display: flex;}
  .faqlist li .faq_title .q::before {padding-right: 15px;}
  .faqlist li .faq_title .q span {width: 90%; display: inline-block;}
  .faqlist li .faq_title .q::after {top: 40%;}
  .faq_answer {padding: 30px; font-size: 16px;}
  .faqlist li .faq_title {padding: 25px 10px;}
  .faq_answer {margin: 0 10px 20px;}

  .qnaform dl {flex-direction: column; align-items: flex-start; padding: 20px 10px; gap: 15px; padding: 20px 10px;}
  .qnaform dl dt {width: 100%;}

  .btn-wrap button {width: 160px; padding: 13px 0; font-size: 16px;}

  .apply_list li > div {padding: 25px 20px;}
  .rec .rec_filter {padding: 25px 20px;}
  .apply_list li .top p {font-size: 17px; margin-left: 10px;}
}

/* ********************************************* *
* 470px
* ********************************************* */
@media screen and (max-width: 470px){
  .subtit {margin-bottom: 60px;}
  .subtit h6 {font-size: 36px;}
  .subtit p {font-size: 17px;}
  .subtit > span {margin-bottom: 10px;}

  .hoban_affiliate .subtab > ul > li {font-size: 16px;}

  .care-con {flex-direction: column; align-items: center;}
  .care-con .care-tit {width: 100%;}
  .careers .care-con strong {font-size: 21px;}
  .careers .care-con div p {font-size: 16px;}

  .detail-tit {height: 275px; font-size: 26px;}

  
  .out-circle {padding: 20px; width: 70%;}
  .circle-ball.ball1 {top: -55px; left: -55px; }
  .circle-ball.ball2 {top: -55px; right: -55px; }
  .circle-ball.ball3 {bottom: -55px; left: -55px;  }
  .circle-ball.ball4 {bottom: -55px; right: -55px;}
  .circle-tit em {width: 50px;}
  .circle-tit p {font-size: 18px;}
  .circle-tit span {font-size: 14px;}

  @supports (-webkit-touch-callout: none)  {
    .out-circle {width: 70%; aspect-ratio: 1 / 0.9;} 
    }

  .value-tit p br {display: none;}
  .value-tit p {font-size: 17px; font-weight: 400;}
  .value-tit h3 {font-size: 37px;}

  .future-con ul li .fu-txt p {font-size: 30px;}
  .future-con ul li em {font-size: 56px; font-weight: bolder; bottom: -5px;}

  .welfare-con .welfare {width: 100%;}
  .welfare-con .wel-box {row-gap: 20px;}

  .tabs {margin-top: 20px; height: 50px; width: 100%; overflow-x: scroll; display: flex; align-items: center;}
  .tabs ul {width: max-content;}
  .rec .rec_filter .btn_flex {gap: 10px;}

  .recview-tit > p {font-size: 22px;}
  .recview-tit .recview-detail {font-size: 14px;}
  .review-top {gap: 25px; padding: 30px 0;}

  .btn-wrap02 button {font-size: 15px; width: 135px; padding: 15px 0;}
  .recview-tit .recview-detail .day {flex-direction: column; align-items: center; gap: 0;}
  .recview-tit .recview-detail {gap: 15px;}

  .process .process-tit {font-size: 26px;}
  .process-con dl {gap: 20px;}

  .process .process-tit span {margin-bottom: 2px;}
  .process-con dl dd {font-size: 22px;}
  .re-notice {padding: 30px 20px;}
  .process-con dl {padding: 40px 10px;}

  .faqlist li .faq_title .q span {width: 85%;}

  .page-nav ul li {font-size: 17px;}
  .page-nav ul {gap: 25px;}

  .value-tit em {width: 55px; margin-bottom: 35px;}

  .growth {background-size: 21%; background-position: 20px 101%;}
  .core-value {background-size: 69%, 93%; background-position: 97% -9%, 0 77%;}
  .future-con ul li {height: 200px;}
  .future-con ul li .fu-txt span {font-weight: 400;}
  .win .value-tit p {font-weight: 400;}
  .value-con .value-sub-tit p br {display: none;}
  .value-con .value-sub-tit p {font-size: 22px;}
  .welfare-con .wel-tit strong {font-size: 30px;}
  .welfare-con {gap: 30px;}
  .tabs li a {padding: 10px 22px;}
  .process-con dl dt ul > li ul li {font-size: 16px;}
  .process-con dl dt ul > li > ul {margin-top: 10px;}
  .process-con dl dt > ul {gap: 25px;}
  .process-con dl dt ul > li.main-pro {font-size: 17px;}
  .process .process-wrap {row-gap: 30px;}

  .qnaform dl dd {font-size: 17px;}
  .welfare-wrap {gap: 80px;}
  .rec .rec_filter ul li p {font-size: 17px;}
  /* .apply_list li .top p {margin-left: 10px;} */

  .recview_content {width: auto;}
}

/* ********************************************* *
* 380px
* ********************************************* */
@media screen and (max-width: 380px){
  .detail-tit {font-size: 24px;}
  .out-circle {padding: 15px;}
  .circle-tit em {width: 33%; margin-bottom: 5px;}

  .out-circle {width: 77%;}
  .circle-ball.ball1 {top: -45px; left: -33px; }
  .circle-ball.ball2 {top: -45px; right: -33px; }
  .circle-ball.ball3 {bottom: -45px; left: -33px;  }
  .circle-ball.ball4 {bottom: -45px; right: -33px;}
  .faqlist li .faq_title .q span {font-size: 17px;}

}

/* ********************************************* *
* 320px
* ********************************************* */
@media screen and (max-width: 320px){
  .subtit h6 {font-size: 32px;}
  .subtit p {font-size: 16px;}
  .subtit > span {font-size: 20px;}

  .comp_li .txt h6 {font-size: 23px; margin-bottom: 10px;}
  .comp_li .txt dl dd {font-size: 14px;}
  .comp_li .txt dl dt {font-size: 14px;}
  .comp_li .txt > div {padding: 20px 0; height: 90px;}

  .circle-tit em {width: 32%;}
  .circle-tit p {font-size: 16px;}
  .circle-tit span {font-size: 13px;}
  .circle-ball {width: 60%;}

  .value-con .growht-con ul li {width: 100%;}

  .page-nav .page-btn i {font-size: 18px;}
}