@charset "UTF-8";
html{ font-size:14px } 
main button{ font-size: 12px} 
.container{ padding-bottom: 0} 
#footer{ margin-top: 0} 
.slide_tool{ position: absolute; z-index: 2; bottom: 60px; width: 100%; max-width: 1200px; left: 50%; transform: translateX(-50%); display: flex; align-items: center} 
.swiper-pagination-clickable .swiper-pagination-bullet{ width: 16px; height: 16px; border-radius: 8px; margin-right: 15px; opacity: 1; background:rgba(255,255,255,0.6); transition:width .3s ; } 
.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{ width: 40px; background: #df0b15;  } 
.play_pause{ line-height: 1} 
.swiper-button-play{ font-size: 0; display: none} 
.swiper-button-pause{ font-size: 0;}
.swiper-button-play:before, .swiper-button-pause:before{font-style: normal; font-weight: normal; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "remixicon"; content: "\EFDA"; color: rgba(255,255,255,0.6); font-size: 30px; font-weight: bold}
.swiper-button-play:before{    content: "\F012";} 

/* 메인비주얼 */
.main_visual{ position: relative; width: 100%; height: 400px}
.main_visual{  background-color: #000734; display: flex; align-items: center} 
.main_visual .img{ position: absolute; left: 50%; top: 50%; ; min-width: 100%;height:400px; transform: translate(-50%,-50%);object-fit: cover; z-index: 1;  background-repeat: no-repeat; background-position: 50% 50%}
.main_visual img{ min-width: 100%; height: 560px; width: auto; object-fit: cover; display: none} 
.main_visual .v_txt{ position: relative; z-index: 2; width: 100%; max-width:1200px; color: #fff; margin: 0 auto } 
.main_visual .v_txt .tit{ font-weight: 600; line-height: 1.24;  letter-spacing: -1.21px; font-size:2.858rem; display: flex} 
.main_visual .v_txt .tit strong{ display: block;font-weight: 600; } 
.main_visual .v_txt .tit img{ display: block; min-width: auto; height: auto; width: 60px; margin-right: 15px} 
.main_visual .v_txt .txt{ word-break: keep-all;font-weight: 500; font-size:1.536rem; line-height: 1.4;letter-spacing: -0.71px; margin-top: 30px; } 
.main_visual h2.blind{ position: absolute !important; width: 0 !important; font-size: 0 !important; margin: 0 !important; padding: 0 !important} 


/************ 
컨텐츠 
************/
.contentWrap{ margin: 0 auto 0 auto; padding: 0; width: 100%; max-width: none } 
.contentWrap h2{ font-size:  1.428rem; font-weight:600; color: #222; padding-bottom: 15px; margin-bottom: 20px; width: auto; border-bottom: 1px solid #e1e1e1; position: relative; padding-left: 40px}
.contentWrap h2:after{ content: ""; width: 150px; height: 3px;background-image: linear-gradient(90deg, #e12311, #0089d4, #0089d4); position: absolute; left: 40px; bottom: 0}  
.content{position: relative; z-index: 3; max-width: 1280px; margin:-40px auto 0 auto} 

.basic_container,.news_container{ display: flex; gap:40px} 
.basic_container > article,.news_container > article{ border: 1px solid #e1e1e1; box-shadow: 3.5px 3.5px 0 0 rgba(0, 0, 0, 0.05); padding: 41px 0 0; background: #fff} 
/* 더보기 버튼 기본 */
.bt_more{ position: absolute; right: 40px; top:45px; width: 19px; height: 19px; display: block  } 
.bt_more:before, .bt_more:after{ content: ""; display: block; width: 19px; height: 1px; background: #606060; top: 50%; position: absolute; left: 0} 
.bt_more:after{ transform: rotate(90deg)} 
/* 리스트 기본 */
ul.list{ display: flex; flex-direction: column; padding: 0 40px}
ul.list .img{ margin-bottom: 15px} 
ul.list .img img{image-rendering: -moz-crisp-edges; image-rendering:-o-crisp-edges;       image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;}
ul.list .tit{ font-size: 1.142rem; font-weight: 500; color: #222; overflow: hidden; text-overflow: ellipsis;width: 100%; white-space: nowrap} 
ul.list .date{ font-size: 1rem; color: #999; font-weight: 500 } 
ul.list .dec{ font-size: 1.072rem;line-height: 1.6;color: #606060;height:4.08rem; overflow: hidden; display: -webkit-box; word-wrap: break-word; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp:2;  font-weight: 400; padding-top: 5px } 
ul.list li + li{ border-top: 1px solid #e1e1e1} 
ul.list li> a{ display: block; } 
/************ 
웰컴영역 
************/
.basic_container{ margin-bottom: 40px} 
.basic_container .basic_bx{ padding: 33px 45px; display: flex; flex-wrap: wrap; justify-content: space-between; } 
.basic_bx h2{ padding-left: 0px;} 
.basic_bx h2:after{ left: 0px} 

.basic_bx .img{ width: 280px; height: 220px; flex-shrink: 0; margin-top: 6px; background: url("../img/RHQ_main/img-greeting-default.png") no-repeat 0 0; background-size: 100%; min-height: 220px} 
.basic_bx .img img { display: inline-block;width: 100%;height: 100%;object-fit: cover;} 

.basic_bx .basic{ width: calc(100% - 320px); font-size: 1.072rem; color: #606060; font-weight: 400; margin-bottom: 30px} 
.basic_container .basic dl{ display: flex; margin-top: 10px; font-weight: 500; align-items: center} 
.basic_bx .basic dl:before{ content: ""; background: #f0f0f0 url("../img/RHQ_main/ico_map.png") no-repeat 50% 50%; background-size:22px; width: 22px; height: 22px; border-radius: 4px; margin-right: 10px } 
.basic_bx .basic dl.tel:before{ background-image: url("../img/RHQ_main/ico_phone.png")} 
.basic_bx .basic dl.fax:before{ background-image: url("../img/RHQ_main/ico_fax.png")} 
.basic_container .basic dl dt{ white-space: nowrap; padding-right: 5px} 
.basic_container .basic p.txt{ margin-bottom: 15px;line-height: 1.38;  color: #222; height:3.14rem; margin-bottom:15px; overflow: hidden; display: -webkit-box; word-wrap: break-word; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-right: 40px } 
.basic_container .detail{ display: flex; gap:0;  text-align: center; justify-content: space-between; width: 100%; position: relative; } 
.basic_bx .detail:before, .basic_bx .detail:after, .basic_bx .detail a+a:before{ position: absolute; left: 0; top:20px; width: 1px ; height: 45px; background: #e1e1e1; content: ""} 
.basic_bx .detail:before, .basic_bx .detail:after, .basic_bx .detail a+a:before{ position: absolute; left: 0; top:20px; width: 1px ; height: 45px; background: #e1e1e1; content: ""} 
.basic_bx .detail:after{ left: auto; right: 0} 
.basic_bx .detail a{ display: block; width: 50%; position: relative; font-size: 1.072rem; font-weight: 500} 
.basic_bx .detail img{ width: 60px; margin: 0 auto 10px auto; display: block;  } 
.basic_container .facilit_bx{ width: 413px; flex-shrink: 0; padding-top: 33px} 
.facilit_bx h2{ padding-left: 40px;margin-bottom: 7px;} 
.facilit_bx h2:after{ left: 40px} 
.facilit_bx .basic{ padding:0 45px 0 40px} 
.facilit_bx .basic dl{ justify-content: space-between; align-items: center; padding: 7px 0 6px 0; margin: 0;font-size: 1.072rem; color: #606060; font-weight: 500; } 
.facilit_bx .basic dl + dl{ border-top: 1px solid #e1e1e1} 
.facilit_bx .basic dl dt{ display: inline-flex; align-items: center; font-weight: 500} 
.facilit_bx .basic dl dt:before{ content:""; background: #606060; width: 3px; height: 3px; display: block; margin-right: 10px} 
.facilit_bx .basic dl dd strong{ font-weight: 700} 
.facilit_bx .detail{ background: #f9f9f9; border-top: 1px solid #e1e1e1; padding: 47px 40px 47px 40px; gap:40px; margin-top:20px} /*20220204-수정*/
.facilit_bx .detail a{ width: auto;; font-size: 1.072rem; font-weight: 500; display: flex; flex-direction: column; align-items: center} 
.facilit_bx .detail a img{ width: 60px; margin-bottom: 10px} 


/************ 
뉴스영역 
************/
.news_container > article{  position: relative; width: calc(50% - 20px); padding-bottom: 40px} 
/* 뉴스 */
.news_bx ul.list li{ border-top: 0; border-bottom: 1px solid #e1e1e1} 
.news_bx ul.list li> a{ display: flex; gap:30px;line-height: 3.4; align-items: center} 
.thanks_bx ul.list li> a{display: flex; gap:20px; padding: 15px 15px 15px 0; align-items: center} 
.thanks_bx ul.list li .img{ width: 170px; margin: 0; flex-shrink: 0;height: 100px;overflow: hidden;}/*20220204-수정*/ 
.thanks_bx ul.list li .img img{width: 100%;height: 100%;object-fit: cover;}/*20220204-수정*/
.thanks_bx ul.list li .txt{ width: calc(100% - 170px)} 
.thanks_bx ul.list .date{ color: #777} 

/************ 
관련사이트 
************/
.banner_bx{ height: 100px; display: flex; align-items: center; justify-content: space-between; width:100% ; margin-left: 0px; max-width: 1280px; position: relative;margin-top: 120px } 
.banner_bx:before{ position: absolute; left: 50%; top: 0; transform: translate(-50%); width: 100vw; height: 1px; background:#e1e1e1; content: ""} 
.banner_bx .swiper-container{ width: calc(100% - 100px); margin: 0; order: 1 } 
.banner_bx .swiper-wrapper{ align-items: center} 
.banner_bx .swiper-wrapper li{}
.banner_bx .swiper-wrapper li img{ width: auto; max-width: 100%; max-height: 35px;image-rendering: -moz-crisp-edges; image-rendering:-o-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;} 
.banner_bx .slide_tool{ position: relative; width: 80px; order: 2; bottom: auto; left: auto; transform: none; justify-content: center } 
.banner_bx .swiper-button-prev:after, .banner_bx .swiper-button-next:after{ color:#606060; font-size: 15px } 
.banner_bx .swiper-button-prev{ left: 0} 
.banner_bx .swiper-button-next{ right: 0} 
.banner_bx .swiper-button-pause, .banner_bx .swiper-button-play{ position: relative; text-align: center; width: 8px; height: 15px; line-height: 15px; vertical-align: top} 
.banner_bx .swiper-button-play{ width: 20px} 
.banner_bx .swiper-button-play:before, .banner_bx .swiper-button-pause:before{ color: #606060; font-size: 20px; font-weight: normal; width: 20px; height: 15px} 
.banner_bx .swiper-button-pause:before, .banner_bx .swiper-button-pause:after{content:""; display: block; width: 2px; height: 15px; position: absolute; left: 0; background: #606060; top: 0 }
.banner_bx .swiper-button-pause:after{ left: auto; right: 0} 
.banner_bx h2.blind{ position: absolute !important; width: 0 !important; font-size: 0 !important} 



@media screen and (max-width:1340px) {
	.content{ padding: 0 20px} 
}

@media screen and (max-width:1270px) {
    .basic_container, .news_container{ gap:30px} 
    .basic_container .facilit_bx{ width: 350px} 
    .basic_bx .img{ width: 220px} 
    .basic_bx .basic{    width: calc(100% - 250px);} 
    .news_container > article{    width: calc(50% - 15px);} 
    .basic_container .basic p.txt{ padding-right: 0} 
     .main_visual .v_txt{ padding: 0 20px} 

}

@media screen and (max-width:1150px) {
    .basic_container .basic_bx{ align-items: center} 
    .basic_bx .img{ width: 160px; background-size: 100%;} 
    .basic_bx .basic{width: calc(100% - 180px);} 
    
    
    
    
}
@media screen and (max-width:1023px) {
    .basic_container article{width: calc(50% - 15px) !important;} 
    .basic_container, .news_container{ align-items: flex-start} 
    .basic_container .basic_bx{ flex-direction: column; gap:20px; padding: 20px} 
    .basic_bx .img, .basic_bx .basic{ width: 100%; height: auto} 
    .basic_bx .img img {height: 220px;}
    .basic_bx .detail:before, .basic_bx .detail:after{ display: none} 
    .basic_container .basic dl.adress{ align-items: flex-start} 
    .basic_bx .basic{ margin-bottom: 0}     
}

@media screen and (max-width:767px) {
    
	html{ font-size:12px } 
    
    .main_visual{ height: auto} 
	.contentWrap h2{ padding-bottom: 11.5px; margin-bottom: 20px} 
	.bt_more{ top: 5px; right: 0} 
    .main_visual .img{ background-image: none !important; position: relative; transform: none; left: auto; top: auto; height: auto} 
	.main_visual img{ display: block; height: auto} 	
	.main_visual .v_txt .tit, .main_visual .v_txt .tit strong{ font-size: 1.572rem; font-weight: 600}
	.main_visual .v_txt{ padding:0px 30px; position: absolute; left:20px; bottom: 40px} 
	.main_visual .v_txt .txt{ font-size: 1.166rem; letter-spacing: -0.35px; line-height: 17.8px; word-break: keep-all;font-weight: 400; margin-top: 15px} 
    .main_visual .v_txt .tit img{ width: 35px} 
	.swiper-pagination-clickable .swiper-pagination-bullet{ width: 8px; height: 8px; margin: 0 5px} 
	.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{ width: 20.5px} 
	
    
	.bt_more:before, .bt_more:after{ width: 14.5px} 
    .content{ margin: 0} 
  	.banner_bx{ height: 70px; width: 100%; margin-left: 0; display: none}
	.banner_bx .swiper-container{ width: 100%}
	.banner_bx .slide_tool{ display: none} 
	.quick.mob.ab{ bottom: 600px} 
    .basic_container, .news_container{ flex-direction: column; } 
    .basic_container article{ width: 100% !important} 
    .basic_container .basic_bx{ box-shadow: none; border: none; padding: 0; position: relative; margin-top: 30px} 
    .basic_bx .img{ position: absolute; left: 50%; top: 55px; width:250px; transform: translateX(-50%)} 
    .basic_bx h2{ margin-bottom: 240px} 
    .basic_bx .detail:before, .basic_bx .detail:after{ display: none} 
    .basic_bx .basic{ margin-bottom: 0px} 
    .basic_container .facilit_bx{ padding:25px 0 0 0} 
    .facilit_bx .basic{ padding: 0 30px} 
    .facilit_bx h2{ padding-left: 30px} 
    .facilit_bx h2:after{ left: 30px} 
    .facilit_bx .detail{ padding-left: 25px; padding-right: 25px} 
    .news_container > article{ width: 100%; border: none; box-shadow: none; padding: 0 !important} 
    .news_container h2{ padding-left: 0 !important; margin-bottom: 0} 
    .news_container h2:after{ left: 0 !important} 
    ul.list{ padding: 0} 
    .news_container > article.thanks_bx { margin-bottom: 60px} 
    .news_container > article.thanks_bx ul{ flex-direction: row; gap:20px; justify-content: space-between; width: 100%; overflow: hidden} 
    .news_container > article.thanks_bx ul li{ width: calc(50% - 10px)} 
    .news_container > article.thanks_bx ul li > a{ flex-direction: column; display: flex; padding: 0 } 
    .news_container .thanks_bx h2{ margin-bottom: 20px} 
    .thanks_bx ul.list li .img, .thanks_bx ul.list li .txt{ width: 100%} 
    .thanks_bx ul.list .tit{ height: 3.85rem;    -webkit-line-clamp: 2; white-space: normal;overflow: hidden;display: -webkit-box;word-wrap: break-word;    text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;} 
    .thanks_bx ul.list .dec{    height: 5.28rem;    -webkit-line-clamp: 3;} 

    .basic_bx .img img {height: 200px;}
}

/************ 
퀵메뉴 
************/
.quick .consult {background: url(../img/comm/icon-counseling_01.png) no-repeat;}