@charset "utf-8";

/* 섹션 공통 & 메인 공통 */
.main-container {position:relative;}
.main-container .tit_wrap {padding-bottom:0;}

.sec{box-sizing: border-box; padding: 6.5rem 0;}
.tit_wrap{color: #222;}
.tit_wrap h4{font-weight: 700; font-size: 2.188rem;}
.tit_wrap .sub{box-sizing: border-box; padding: 1.25rem 0 0;}
.tit_wrap .control{position: absolute; bottom: 0; right: 0; display: flex; gap: 20px;}
.tit_wrap .control .btn_hinfo{display: block; width: 3.125rem; height: 3.125rem; border-radius: 50%;  box-sizing: border-box; border: 1px solid #dbdbdb; font-size: 0;}
.tit_wrap .control .btn_hinfo:hover,
.tit_wrap .control .btn_hinfo:active{border-color: #686868;}
.tit_wrap .control .btn_hinfo:before{content: ""; display: inline-block; width: 13px; height: 13px;}
.tit_wrap .control .btn_hinfo_prev:before{border-top: 1px solid #000; border-left: 1px solid #000; transform: rotate(-45deg); margin: 0 0 0 7px;}
.tit_wrap .control .btn_hinfo_next:before{border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); margin: 0 7px 0 0;}
.new{display: inline-block !important; vertical-align: middle; width: 14px; height: 14px; line-height: 14px !important; border-radius: 3px; font-size: 10px !important; font-weight: 400 !important; margin: 0 0 0 -18px !important; text-align: center; background: #ff1800; color: #fff !important;}
@media (max-width: 1024px){
    .sec{padding: 5rem 0;}
}
@media (max-width: 860px){
    .tit_wrap h4{font-size: 2rem;}
    .tit_wrap .sub{padding: 1rem 0 0;}
}
@media (max-width: 640px){
    .sec{padding: 3.5rem 0;}
    .tit_wrap h4{font-size: 1.6rem;}
    .tit_wrap .control{gap: 10px;}
    .tit_wrap .control .btn_hinfo{width: 2.5rem; height: 2.5rem;}
    .tit_wrap .control .btn_hinfo:before{width: 9px; height: 9px;}
}
@media (max-width: 460px){
    .tit_wrap h4{font-size: 1.4rem;}
    .tit_wrap .sub{font-size: 14px; padding: 0.5rem 0 0;}
    .tit_wrap .control{bottom: auto; top: -3px;}
    .tit_wrap .control .btn_hinfo{width: 2rem; height: 2rem;}
    .tit_wrap .control .btn_hinfo:before{width: 6px; height: 6px;}
    .tit_wrap .control .btn_hinfo_prev:before{margin: 0 0 0 2px;}
    .tit_wrap .control .btn_hinfo_next:before{margin: 0 2px 0 0;}
}


/* 메인비주얼 */
.visual{position: relative; margin-top: 100px;}
.visual .list{}
.visual .item a{position: relative; display: block;}
.visual .item a img{position: relative; width: auto; max-width: none; left: 50%; transform: translateX(-50%);}
.visual .item a img.pc{}
.visual .item a img.mobile{display: none;}
.visual .slick-dots{position: absolute; left: 50%; transform: translateX(-50%);  bottom: -56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1px; margin: 0 auto; width: 1220px; background-color: #ededed; box-shadow: 7px 13px 21px 0px rgba(0,0,0,0.05); border-radius: 10px; overflow: hidden;}
.visual .slick-dots li{width: calc(20% - 1px); margin: 0; padding: 0; box-sizing: border-box; flex-grow: 1; display: block; height: auto;}
.visual .slick-dots.dot8 li{width: calc(25% - 1px);}
.visual .slick-dots.dot6 li{width: calc(33.333% - 1px);}
.visual .slick-dots li button{display: block; width: 100%; height: 100%; margin: 0; line-height: 1; padding: 1.21rem 1rem; overflow: hidden; font-size: 1rem; color: #a9a9a9; background-color: #fff; transition: 0.2s;}
.visual .slick-dots li button:hover{background-color: rgba(253,253,253,0.01);}
.visual .slick-dots li button:before {content: none;}
.visual .slick-dots li.slick-active button{font-weight: 600; color: #fff; background-color: var(--primary_color) !important;}
.visual .slick-counter{position: absolute; bottom: 98px; left: 50%; transform: translateX(-50%); width: 298px; box-sizing: border-box; padding: 0.45rem 1rem; text-align: center; background-color: #fff; border-radius: 8px;}
.visual .slick-counter span{display: inline-block; width: 30px; vertical-align: top; margin: 4px 0 0;  font-family: 'AppleSDGothicNeo', 'Pretendard'; font-size: 0.867rem; font-weight: 700; color: #222;}
.visual .slick-counter .progress{position: relative; display: inline-block; vertical-align: middle; width: 100px; height: 3px; margin: 0 auto 0; background: #d1d1d1;}
.visual .slick-counter .progress .bar{position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #222}
.visual .slick-counter .progress .bar.play{animation: width 3s linear; /* js : autoPlaySpeed 와 동일하게 맞추기 */}
.visual .slick-counter .progress .bar.pause{animation-play-state: paused;}
.visual .slick-counter .btn_v_pro{position: relative; display: inline-block; vertical-align: middle; width: 11px; height: 12px; font-size: 0; text-indent: -9999px;}
.visual .slick-counter .btn_v_stop{margin: 0px 10px;}
.visual .slick-counter .btn_v_stop:before{content: ""; position: absolute; top: 0; left: 0; display: block; width: 4px; height: 100%; background: #222;}
.visual .slick-counter .btn_v_stop:after{content: ""; position: absolute; top: 0; right: 0; display: block; width: 4px; height: 100%; background: #222;}
.visual .slick-counter .btn_v_stop.on:before{width: 0; height: 0; margin: -1px 0 0 2px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #222; background: transparent;}
.visual .slick-counter .btn_v_stop.on:after{display: none;}
.visual .slick-counter .btn_v_prev:before{content: ""; display: block; width: 7px; height: 7px; border-top: 3px solid #222; border-left: 3px solid #222; transform: rotate(-45deg);}
.visual .slick-counter .btn_v_next:before{content: ""; display: block; width: 7px; height: 7px; border-top: 3px solid #222; border-right: 3px solid #222; transform: rotate(45deg);}

.visual .btn_v_pro{
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    display: block; width: 35px; height: 70px; font-size: 0; text-indent: -9999px;
     background-position: center center; background-repeat: no-repeat; background-size: cover;}
.visual .btn_v_prev{margin-left: -700px; background-image: url("/assets/site/img/common/mv_arr_prev_w.png");}
.visual .btn_v_next{margin-left: 700px; background-image: url("/assets/site/img/common/mv_arr_next_w.png");}
@media (max-width: 1680px){
    .visual .btn_v_prev{left: 30px; margin: 0;}
    .visual .btn_v_next{right: 30px; margin: 0;}
}
@media (max-width: 1420px){
    .visual .item a img{width: 136%;}
}
@media (max-width: 1280px){
    .visual{margin-top: 80px;}
    .visual .slick-dots{width: calc(100% - 60px);}
    .visual .btn_v_pro{background-size: contain; width: 26px; height: 56px;}
}
@media (max-width: 1024px){
    .visual .slick-dots{width: calc(100% - 30px);}
    .visual .slick-dots li button{padding: 1rem 0.5rem; font-size: 15px;}
    .visual .btn_v_prev{left: 15px; right: auto; transform: translateY(-50%);}
    .visual .btn_v_next{right: 15px; left: auto; transform: translateY(-50%);}
}
@media (max-width: 860px){
    .visual{margin-top: 65px;}
}
@media (max-width: 768px){
    .visual .item a img.pc{display: none;}
    .visual .item a img.mobile{display: block; width: 100%; max-width: 100%; transform: none; left: auto;}
    .visual .slick-dots li button{padding: 0.75rem 0.5rem; font-size: 14px;}
}
@media (min-width: 641px){
    /* 641 이상 : 슬릭 도트 깨짐 방지 */
    .visual .slick-dots{display: flex !important;}
}
@media (max-width: 640px){
    .visual .slick-dots{flex-wrap: nowrap; width: auto; transform: translateX(-50%); bottom: 10px; justify-content: center; gap: 10px; background-color: transparent; box-shadow: none; border-radius: 0;}
    .visual .slick-dots li{width: auto; flex: 0;}
    .visual .slick-dots li button{width: 10px; height: 10px; font-size: 0; padding: 0; border-radius: 50%; background-color: #fff; transition: 0s;}
    .visual .slick-dots li button:hover{background-color: #fff;}

    .visual .slick-counter{bottom: auto; top: 100%; margin-top: -19px; box-shadow: 0px 5px 20.37px 0.63px rgba(0,0,0,0.1);}
    .visual .btn_v_pro{width: 20px; height: 40px;}
}
@media (max-width: 460px){
    .visual{margin-top: 55px;}

    .visual .slick-counter{margin-top: -15px; padding: 0.25rem 0 0.2rem; width: 200px; /*background-color: rgba(0,0,0,0.2); color: #fff;*/}
    .visual .slick-counter .progress{width: 60px;}
    .visual .slick-counter span{width: 22px; font-size: 12px;}
    .visual .slick-counter .btn_v_stop{margin: 0 10px; width: 10px;}
}


/* sec1 */
.sec1{padding-top: 10.1rem; background: url("/assets/site/img/main/sec1_bg.png") no-repeat; background-position: top -89px left -110px;}
.sec1 .hinfo{box-sizing: border-box; padding: 3.4rem 0 0; padding-left: calc((100% - 1220px) / 2);}
.sec1 .hinfo .list{overflow: hidden; width: 100%; margin: 0 auto;}
.sec1 .hinfo .list .slick-list{margin-left: -40px; box-sizing: border-box; padding: 0 22% 0 0;}
.sec1 .hinfo .list .slick-list .slick-track{/*max-width: 5460px;*/}
.sec1 .hinfo .list .item{float: left; width: 33.333%; margin-left: 40px;}
.sec1 .hinfo .list .item a{display: block; overflow: hidden; box-sizing: border-box; border-radius: 10px; border: 1px solid #dbdbdb;}
.sec1 .hinfo .list .item .img{overflow: hidden; aspect-ratio: 3.78 / 3.19;}
.sec1 .hinfo .list .item .img img{width: 100%; height: 100%; object-fit: cover; transition: 0.2s;}
.sec1 .hinfo .list .item a:hover .img img,
.sec1 .hinfo .list .item a:focus .img img{transform: scale(1.03);}
.sec1 .hinfo .list .item .txt{box-sizing: border-box; padding: 2rem 2.4rem;}
.sec1 .hinfo .list .item .txt .cate{font-size: 0.875rem; font-weight: 700; letter-spacing: 1px; color: #71ce4a;}
.sec1 .hinfo .list .item .txt .tit{position: relative; box-sizing: border-box; /*padding: 0 20px 0 0;*/ display: -webkit-box; overflow: hidden; text-overflow: ellipsis;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 26px; height: 52px; font-size: 1.125rem; font-weight: 700; margin: 0.7rem 0 1rem;}
.sec1 .hinfo .list .item .txt .tit .new{position: absolute; top: 6px; right: 0; margin: 0 !important; display: none !important;}
.sec1 .hinfo .list .item .txt .date{position: relative; box-sizing: border-box; padding: 0 0 0 21px; font-size: 0.875rem; color: #a9a9a9;}
.sec1 .hinfo .list .item .txt .date:before{content: ""; position: absolute; top: 2px; left: 0; display: block; width: 13px; height: 13px; background: url("/assets/site/img/main/ico_date.png") no-repeat center;}
@media (max-width: 1600px){
    .sec1{background-size: 35vw; background-position: top -60px left -60px;}
}
@media (max-width: 1280px){
    .sec1 .hinfo{padding-left: 30px;}
}
@media (max-width: 1280px){
    .sec1 .hinfo{padding-left: 15px;}
    .sec1 .hinfo .list .slick-list{padding-right: 15%; margin-left: -30px;}
    .sec1 .hinfo .list .item{margin-left: 30px;}
    .sec1 .hinfo .list .item .txt{padding: 5% 8.5%;}
}
@media (max-width: 1024px){
    .sec1{padding-top: 8rem;}
    .sec1 .hinfo{padding-top: 2.5rem;}
    .sec1 .hinfo .list .slick-list{padding-right: 5%;}
}
@media (max-width: 860px){
    .sec1 .hinfo{width: calc(100% - 31px); padding-left: 0; margin: 0 auto;}
    .sec1 .hinfo .list .slick-list{padding-right: 0; margin-left: -10px;}
    .sec1 .hinfo .list .item{margin-left: 10px;}
    .sec1 .hinfo .list .item .txt .tit{line-height: 22px; height: 44px; margin: 0.3rem 0 0.5rem;}
    .sec1 .hinfo .list .item .txt .tit .new{top: 4px;}
}
@media (max-width: 640px){
    .sec1{padding-top: 4rem;}
    .sec1 .hinfo{padding-top: 2rem;}
    .sec1 .hinfo .list .item .txt{padding: 1rem 1.5rem;}
    .sec1 .hinfo .list .item .txt .cate{font-size: 12px;}
    .sec1 .hinfo .list .item .txt .tit{font-size: 15px;}
}
@media (max-width: 460px){
    .sec1 .hinfo .list .item .txt{padding: 0.75rem 1rem;}
    .sec1 .hinfo .list .item .txt .cate{font-size: 11px;}
    .sec1 .hinfo .list .item .txt .tit{font-size: 14px; line-height: 20px; height: 40px;}
    .sec1 .hinfo .list .item .txt .tit .new{top: 3px;}
    .sec1 .hinfo .list .item .txt .date{font-size: 12px; padding: 0 0 0 16px;}
    .sec1 .hinfo .list .item .txt .date:before{background-size: contain; width: 12px; height: 12px; top: 1px;}
}


/* sec2 */
.sec2{background-color: #f5f5f5;}
.sec2 .stat{display: flex; justify-content: space-between; box-sizing: border-box; padding: 3.3rem 0 0;}
.sec2 .stat li{text-align: center; width: 25%;}
.sec2 .stat li .num_hide{width: 0; height: 0; opacity: 0; font-size: 0; visibility: hidden;}
.sec2 .stat li .num{display: flex; flex-direction: column; align-items: center; gap: 1.8rem; box-sizing: border-box; padding: 0 0 1.1rem; line-height: 1; font-family: 'AppleSDGothicNeo', 'Pretendard'; font-size: 50px; font-weight: 700;}
.sec2 .stat li .num:before{content: ""; display: inline-block; width: 59px; height: 61px; background-repeat: no-repeat; background-size: contain;}
.sec2 .stat li:nth-child(1) .num:before{background-image: url("/assets/site/img/main/ico_stat01.png");}
.sec2 .stat li:nth-child(2) .num:before{background-image: url("/assets/site/img/main/ico_stat02.png");}
.sec2 .stat li:nth-child(3) .num:before{background-image: url("/assets/site/img/main/ico_stat03.png");}
.sec2 .stat li:nth-child(4) .num:before{background-image: url("/assets/site/img/main/ico_stat04.png");}
.sec2 .stat li .txt{font-size: 0.875rem; color: #777;}
.sec2 .stat li .txt br{display: none;}
@media (max-width: 1280px){
    .sec2 .stat li .num{font-size: 3rem;}
}
@media (max-width: 1024px){
    .sec2 .stat li .num{font-size: 2.6rem;}
}
@media (max-width: 860px){
    .sec2 .stat li .num{font-size: 2.2rem; gap: 1rem;}
    .sec2 .stat li .num:before{width: 54px; height: 56px;}
}
@media (max-width: 640px){
    .sec2 .stat{flex-wrap: wrap; justify-content: center; padding: 2rem 0 0;}
    .sec2 .stat li{width: 42%;}
    .sec2 .stat li:nth-child(n+3){margin-top: 2rem;}
    .sec2 .stat li .num{padding: 0 0 0.5rem;}
    .sec2 .stat li .txt{line-height: 130%;}
    .sec2 .stat li .txt br{/*display: block;*/}
}
@media (max-width: 460px){
    .sec2 .stat li .num{font-size: 1.35rem; gap: 0.75rem;}
    .sec2 .stat li .num:before{width: 39px; height: 40px;}
    .sec2 .stat li .txt{font-size: 12px;}
}


/* sec3 */
.sec3{background: url("/assets/site/img/main/sec3_bg.png") no-repeat; background-position: top -67% left 93%;}
.sec3 .board_list{display: flex; justify-content: space-between; gap: 3.279%; box-sizing: border-box; padding: 3.5rem 0 0;}
.sec3 .board_list > li{width: 31.147%;}
.sec3 .board{position: relative; padding: 2.25rem 2.5rem; height: 365px; box-sizing: border-box; border: 1px solid #dbdbdb; border-radius: 8px; overflow: hidden; background-color: #fff;}
.sec3 .board.notice{}
.sec3 .board.press{}
.sec3 .board.review{}
.sec3 .board h5{font-size: 1.375rem; font-weight: 700;}
.sec3 .board .empty{box-sizing: border-box; padding: 7rem 0 0; text-align: center; color: #ddd;}
.sec3 .board ul{box-sizing: border-box; padding: 2.95rem 0 0;}
.sec3 .board ul li{}
.sec3 .board ul li + li{margin-top: 1.2rem;}
.sec3 .board ul li + li:nth-child(n+6){display: none;}
.sec3 .board ul li a{position: relative; display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box;}
.sec3 .board ul li .sarangin_ca{margin-right: 2px;}
.sec3 .board ul li .tit{display: inline-block; max-width: calc(100% - 58px - 89px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; box-sizing: border-box; padding: 0 22px 0 0;}
.sec3 .board ul li a:hover .tit,
.sec3 .board ul li a:active .tit{font-weight: 500; text-decoration: underline;}
.sec3 .board ul li .date{display: block; /* width: 70px; */ width: 60px; text-align: right; /* font-size: 0.875rem; */ font-size: 12px; color: #a9a9a9; margin: -1px 0 0 auto;}
.sec3 .board .more{position: absolute; top: 44px; right: 2.5rem; font-size: 0.875rem; line-height: 1;}
.sec3 .board .more:after{content: ""; display: inline-block; vertical-align: middle; margin: -2px 0 0 5px; width: 6px; height: 6px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg) translate(0, 0);}
.sec3 .board .more:hover:after,
.sec3 .board .more:focus:after{animation: arrow_move 0.35s forwards;}
@media (max-width: 1600px){
    .sec3{background-size: 35vw; background-position: top -30px right -30px;}
}
@media (max-width: 1280px){
    .sec3 .board_list{gap: 2%;}
    .sec3 .board_list > li{width: 32%;}
    .sec3 .board{padding: 2rem 2rem; height: 330px;}
    .sec3 .board ul li .tit{max-width: calc(100% - 58px - 85px);}
    .sec3 .board ul li .date{width: 64px;}
}
@media (max-width: 1024px){
    .sec3 .board_list{display: block; padding: 2.5rem 0 0;}
    .sec3 .board_list > li{width: 100%;}
    .sec3 .board_list > li + li{margin-top: 1.5rem;}
    .sec3 .board{height: 286px;}
    .sec3 .board ul{padding: 2rem 0 0;}
    .sec3 .board ul li + li{margin-top: 0.75rem;}
    .sec3 .board .more{top: 38px;}
}
@media (max-width: 860px){
    .sec3 .board ul li .tit{max-width: calc(100% - 58px - 80px);}
}
@media (max-width: 640px){
    .sec3 .board_list{padding: 2rem 0 0;}
    .sec3 .board_list > li + li{margin-top: 1rem;}
    .sec3 .board{height: 245px; padding: 1.5rem 1.25rem;}
    .sec3 .board h5{font-size: 1.2rem;}
    .sec3 .board ul{padding: 1.5rem 0 0;}
    .sec3 .board ul li + li{margin-top: 0.5rem;}
    .sec3 .board ul li .tit{font-size: 14px; max-width: calc(100% - 58px - 70px);}
    .sec3 .board ul li .date{font-size: 12px; margin: 0 0 0 auto; width: 58px;}
    .sec3 .board .empty{padding: 4.5rem 0 0;}
    .sec3 .board .more{top: 28px; right: 1.25rem;}
}


/* sec4 */
.sec4{background-color: #f2f3f7;}
.sec4 .cont_wrap{box-sizing: border-box; padding: 3.5rem 0 0;}
.sec4 .cont_wrap:after{content: ""; display: block; clear: both;}

.sec4 .map{float: left; width: 505px; /*width: 41.39%;*/}
.sec4 .map .img{position: relative; box-sizing: border-box; padding-left: 4.713%;}
.sec4 .map .img > img{width: 100%;}
.sec4 .map .img .pin_list{position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.sec4 .map .img .pin_list li{position: absolute;}
.sec4 .map .img .pin_list li:nth-child(1){bottom: 64.7%; left: 39%;}
.sec4 .map .img .pin_list li:nth-child(2){bottom: 60.5%; left: 48%;}
.sec4 .map .img .pin_list li:nth-child(3){bottom: 70.2%; left: 42.4%;}
.sec4 .map .img .pin_list li:nth-child(4){bottom: 76%; left: 35%;}
.sec4 .map .img .pin_list li:nth-child(5){bottom: 76.6%; left: 40.2%;}
.sec4 .map .img .pin_list li:nth-child(6){bottom: 30.3%; left: 55.2%;}
.sec4 .map .img .pin_list li:nth-child(7){bottom: 69.7%; left: 39%;}
.sec4 .map .img .pin_list li:nth-child(8){bottom: 83.2%; left: 32.4%;}
.sec4 .map .img .pin_list li .pin{position: relative; display: block; font-size: 0; width: 11px; height: 15px; background-image: url("/assets/site/img/main/pin.png"); background-repeat: no-repeat;}
.sec4 .map .img .pin_list li.on .pin{background-image: url("/assets/site/img/main/pin_on.png");}
.sec4 .map .img .pin_list li .pin:after{content: ""; position: absolute; bottom: 5px; line-height: 26px; border-radius: 28px; box-sizing: border-box; padding: 0 1rem;  border: 1px solid #dbdbdb; font-size: 0.875rem; color: #888; background-color: #fff;}
.sec4 .map .img .pin_list li .pin.txtR:after{left: 15px; right: auto;}
.sec4 .map .img .pin_list li .pin.txtL:after{left: auto; right: 15px;}
.sec4 .map .img .pin_list li:nth-child(1) .pin:after{content: "천안점";}
.sec4 .map .img .pin_list li:nth-child(2) .pin:after{content: "청주점";}
.sec4 .map .img .pin_list li:nth-child(3) .pin:after{content: "수원점";}
.sec4 .map .img .pin_list li:nth-child(4) .pin:after{content: "안산점";}
.sec4 .map .img .pin_list li:nth-child(5) .pin:after{content: "분당점";}
.sec4 .map .img .pin_list li:nth-child(6) .pin:after{content: "진주점";}
.sec4 .map .img .pin_list li:nth-child(7) .pin:after{content: "평택점";}
.sec4 .map .img .pin_list li:nth-child(8) .pin:after{content: "파주운정점";}
.sec4 .map .img .pin_list li.on .pin:after{font-weight: 600; border-color: transparent; background-color: var(--primary_color); color: #fff; box-shadow: 0px 5px 20.37px 0.63px rgba(0,0,0,0.5);}
.sec4 .map .img .pin_list li .pin.L{padding-left: 16px; background-position: bottom left;}
.sec4 .map .img .pin_list li .pin.R{padding-right: 16px; background-position: bottom right;}

.sec4 .l_list{float: right; width: 630px; display: flex; flex-direction: column; gap: 10px;}
.sec4 .l_list > div{width: 100%; line-height: 38.2px; box-sizing: border-box; border: 1px solid #dbdbdb; border-radius: 10px; padding: 0.87rem 2.4rem 0.87rem 2.2rem; background-color: #fff;}
.sec4 .l_list > div.on{background-color: var(--primary_color); color: #fff; box-shadow: 0px 13px 41.71px 1.29px rgba(0,0,0,0.36); border-color: transparent;}
.sec4 .l_list > div:after{content: ""; display: block; clear: both;}
.sec4 .l_list dt{float: left; font-weight: 700; width: 103px;}
.sec4 .l_list dd{float: left; width: calc(100% - 103px);}
.sec4 .l_list dd:after{content: ""; display: block; clear: both;}
.sec4 .l_list dd .info{float: left;}
.sec4 .l_list dd .info li{float: left;}
.sec4 .l_list dd .info li .item{position: relative; box-sizing: border-box; padding: 0 0 0 22px; display: flex; align-items: center;}
.sec4 .l_list dd .info li .item:before{content: ""; position: absolute; top: 11px; left: 0;  display: block; margin: 0 0 0; width: 16px; height: 15px; background-repeat: no-repeat; background-size: contain; flex-shrink: 0;}
.sec4 .l_list dd .info li .item.phone{width: 149px;}
.sec4 .l_list dd .info li .item.time{width: 161px;}
.sec4 .l_list dd .info li .item.phone:before{background-image: url("/assets/site/img/main/ico_phone.png");}
.sec4 .l_list dd .info li .item.time:before{background-image: url("/assets/site/img/main/ico_time.png");}
.sec4 .l_list > div.on dd .info li .item.phone:before{background-image: url("/assets/site/img/main/ico_phone_on.png");}
.sec4 .l_list > div.on dd .info li .item.time:before{background-image: url("/assets/site/img/main/ico_time_on.png");}
.sec4 .l_list dd .badge{float: right; display: block; line-height: 36px; box-sizing: border-box; padding: 0 1.65rem; border-radius: 38px; border: 1px solid #dbdbdb; font-size: 0.938rem; background-color: #fff;}
.sec4 .l_list > div.on dd .badge{color: var(--primary_color); font-weight: 700;}
.sec4 .l_list dd .badge em{display: inline-block;}
.sec4 .l_list dd .badge:hover em,
.sec4 .l_list dd .badge:focus em{animation: text_jump 0.5s forwards;}
.sec4 .l_list dd .badge em:nth-child(1){animation-delay: 0s;}
.sec4 .l_list dd .badge em:nth-child(2){animation-delay: 0.025s;}
.sec4 .l_list dd .badge em:nth-child(3){animation-delay: 0.050s;}
.sec4 .l_list dd .badge em:nth-child(4){animation-delay: 0.100s;}
@media (max-width: 1280px){
    .sec4 .l_list{width: calc(100% - 545px);}
    .sec4 .l_list > div{padding: 0.5rem 1.5rem;}
    .sec4 .l_list dt{width: 82px;}
    .sec4 .l_list dd{width: calc(100% - 82px);}
    .sec4 .l_list dd .info li .item.phone{width: 135px;}
    .sec4 .l_list dd .info li .item.time{width: 150px;}
    .sec4 .l_list dd .badge{padding: 0 1.25rem; line-height: 30px; margin-top: 4px;}

}
@media (max-width: 1200px){
    .sec4 .map{width: calc(100% - 560px);}
    .sec4 .l_list{width: 530px;}

}
@media (max-width: 1060px){
    .sec4 .map .img .pin_list li .pin:after{font-size: 13px; line-height: 22px; padding: 0 0.75rem;}
}
@media (max-width: 1024px){
    .sec4 .map{width: 370px;}
    .sec4 .l_list{width: calc(100% - 400px);}
    .sec4 .l_list > div{font-size: 14px;}
    .sec4 .l_list dt{width: 74px;}
    .sec4 .l_list dd{width: calc(100% - 74px);}
    .sec3 .board .empty{padding: 4.5rem 0 0; font-size: 13px;}
}
@media (max-width: 940px){
    .sec4 .l_list > div{line-height: 150%; padding: 1rem 1.25rem;}
    .sec4 .l_list dt{float: none; width: 100%;}
    .sec4 .l_list dd{float: none; width: 100%; padding: 0.75rem 0 0;}
    .sec4 .l_list dd .info li .item:before{top: 3px;}
    .sec4 .l_list dd .badge{margin-top: -6px;}
}
@media (max-width: 860px){
    .sec4 .map{float: none; margin: 0 auto; width: 100%; /*max-width: 94%;*/ max-width: 380px; box-sizing: border-box; padding: 0 0 2.5rem;}
    .sec4 .map .img{padding: 0;}
    .sec4 .l_list{float: none; width: 100%; max-width: 630px; margin: 0 auto;}
}
@media (max-width: 460px){
    .sec4 .cont_wrap{padding: 2rem 0 0;}
    .sec4 .map{max-width: 94%; padding: 0 0 2rem;}
    .sec4 .map .img .pin_list li .pin{background-size: contain; width: 9px; height: 13px;}
    .sec4 .map .img .pin_list li .pin:after{font-size: 14px; line-height: 20px; padding: 0 0.75rem;}
    .sec4 .map .img .pin_list li.on .pin:after{box-shadow: 0px 2px 6px 0.5px rgba(0,0,0,0.5);}
    .sec4 .map .img .pin_list li .pin.txtL:after{right: 12px;}
    .sec4 .map .img .pin_list li .pin.txtR:after{left: 12px;}
    .sec4 .map .img .pin_list li:nth-child(1) .pin:after{bottom: 0 !important;}

    .sec4 .l_list dd{position: relative; text-align: right; font-size: 13px;}
    .sec4 .l_list dd .info{float: none;}
    .sec4 .l_list dd .info li{float: none;}
    .sec4 .l_list dd .info li + li{margin-top: 0.2rem;}
    .sec4 .l_list dd .info li .item{padding: 0 0 0 19px;}
    .sec4 .l_list dd .info li .item:before{width: 13px; height: 12px; top: 4px;}
    .sec4 .l_list dd .badge{float: none; position: absolute; bottom: 0; right: 0; margin-top: 0.3rem; display: inline-block;}
}



/* css 애니메이션 */
@keyframes text_jump{
    0%   {transform: translateY(0);}
    40%  {transform: translateY(-2px);}
    100% {transform: translateY(0);}
}
@keyframes arrow_move{
    0%    {transform: rotate(45deg) translate(0, 0);}
    50%   {transform: rotate(45deg) translate(2px, -2px);}
    100%  {transform: rotate(45deg) translate(0, 0);}
}