@charset "utf-8";

h2 {font-family:var(--gmar); font-size:20rem; margin-bottom:30rem; }
.h2 dt {font-family:var(--gmar); font-weight:600; font-size:20rem; }
.controls { display:flex; align-items:center; gap:0 5rem;}
.controls a { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:25px; height:25px;}
.controls a span { position:absolute; left:-999999px; top:-999999px; }
.controls a::before { content:''; display:block; background:var(--sprite); }
.controls a.arrow::before { width:11px; height:18px; background-position:-126px -356px; }
.controls a.stop::before { width:10px; height:17px; background-position:-177px -356px; }
.controls a.play::before { width:10px; height:15px; background-position:-226px -357px; }
.controls a.prev::before { transform:rotateY(180deg); }
.controls a.play { display:none; }
.controls a.swiper-button-disabled {opacity:0.3; }
.controls .paging { display:block; color:#fff; font-family:var(--gmar); font-size:17rem; margin-right:20rem; }
.controls .paging .current { font-weight:600; }
.controls.black a.arrow::before { width:10px; height:16px; background-position:-138px -269px; }
.controls.black a.stop::before { width:12px; height:16px; background-position:-295px -269px; }
.controls.black a.play::before { width:10px; height:15px; background-position:-347px -269px; }

.cont1 { padding-top:80rem;}

.cont1 .wrap { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; gap:80rem 30rem; }
.visual { position:relative; border-radius:50rem 20rem 20rem 20rem; box-shadow:5rem 5rem 20rem rgba(0,0,0,0.15); grid-column:1 / span 4; overflow:hidden; }
.visual .controls { position:absolute; right:0; bottom:0; background:var(--green); padding:15rem 20rem; border-radius:20rem 0 20rem 0; z-index:10; }
.visual .controls .duration { position:absolute; left:60rem; width:90rem; height:4px; background-color: rgba(0, 0, 0, 0.1); border-radius:2px; overflow:hidden; }
.visual .controls .duration svg { --progress: 0; position:absolute; left:0; top:0; width: 100%; stroke-width: 10px; stroke: #fff; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100; z-index:10; }
.visual .controls .paging .current { margin-right:130rem;}
.visual img { width:100%; }

.info_wrap { grid-column:5 / span 2; display:grid; grid-template-rows:1fr 90rem; gap:30rem; }

.center_info { display:grid; grid-template-rows:2fr 1fr 60rem; background:#F5F6F8; border-radius:20rem 50rem 20rem 20rem; }
.center_info dl { padding:0 20rem 0 50rem; }
.center_info dl:first-of-type { align-self:center; }
.center_info dl:nth-of-type(2) { display:flex; align-items:center; border-top:1px dashed #A3ABB1;}
.center_info dt::before { content:''; position:absolute; left:-25rem; top:5rem; width:18px; height:18px; background:var(--sprite) -255px -422px; margin-right:10rem; }
.center_info dl:nth-of-type(2) dt::before { background-position:-313px -422px; }
.center_info dt,
.center_info dd strong,
.center_info a { position:relative; font-size:20rem; font-weight:600; font-family:var(--gmar); }
.center_info dd strong { color:#00335D; padding-left:20rem; }
.center_info a { display:flex; align-items:center; justify-content: space-between; background:var(--red); color:#fff; padding:0 30rem; border-radius:20rem; }
.center_info a span { flex-grow:1; }
.center_info a::before,
.center_info a::after { content:''; display:block; width:21px; height:21px; background:var(--sprite) -371px -420px; margin-right:20rem; }
.center_info a::after { width:66px; height:13px; background-position:-17px -356px; margin-right:0; }

.quick_menu { display:flex; justify-content:space-around; text-align:center;}
.quick_menu a::before { content:''; display:block; width:35px; height:35px; background:var(--sprite) -456px -4px; margin:0 auto 10rem;}
.quick_menu a.icon2::before { background-position:-531px 0; }
.quick_menu a.icon3::before { background-position:-531px -69px; }
.quick_menu a.icon4::before { background-position:-456px -69px; }

.notice { position:relative; grid-column:1 / span 4; padding-top:90rem; }
.notice::before {content:''; position:absolute; left:0; top:0; width:320rem; height:50rem; border-radius:25rem; background:#F1F3F5; }
.notice > a { position:absolute; left:160rem; top:0; font-size:18rem; line-height:50rem; height:50rem; width:160rem; text-align:center; }
.notice > a:first-of-type {left:0;}
.notice > a:last-of-type {left:160rem;}
.notice > a.on { background:var(--green); color:#fff; border-radius:25rem; box-shadow:10rem 10rem 20rem rgba(0,0,0,0.2);  }
.notice > div { display:none; flex-direction:column; justify-content:space-between; height:100%; }
.notice > a.on+div { display:flex; }
.notice > div::after { content:''; position:absolute; left:0; top:60%; width:100%; height:1px; background:#ddd; }
.notice a.recent { display:flex; align-items:center; gap:45rem; }
.notice a.recent .date { display:flex; flex-direction:column; justify-content:center; text-align:center; flex-shrink:0; width:95rem; height:95rem; border: 4px solid #F5C81F; border-radius: 20rem; line-height:1.3; font-size:15rem; }
.notice a.recent .date strong { font-size:30rem; }
.notice a.recent dl {flex-grow:1; overflow:hidden;}
.notice a.recent dt {font-size:20rem; font-weight:600; white-space:nowrap; text-overflow:ellipsis; margin-bottom:10rem; overflow:hidden; }
.notice a.recent dd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; line-height: 30rem; max-height: 60rem; overflow: hidden;}
.notice ul { display:flex; align-items:center; flex-wrap:wrap;  gap:10rem 60rem; }
.notice li { flex: 1 1 calc(50% - 60rem); }
.notice li a { display:flex; align-items:center; justify-content:space-between; }
.notice li a::before { content:''; display:block; width:4px; height:4px; background:#929292; margin-right:10rem; }
.notice li a span:not(.date) { width:1rem; flex-grow:1; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.notice li a span.date { flex-shrink:0; color:#9B9B9B; }
.notice a.more { position:absolute; width:25rem; height:25rem; right:0; top:13rem; text-indent:-999999px; }
.notice a.more::before,
.notice a.more::after {content:''; position:absolute; left:50%; top:50%; width:2px; height:100%; background:#565656; transform:var(--center); }
.notice a.more::after { transform:var(--center) rotate(90deg); }

.popup { position:relative; flex-shrink:0; grid-column:5 / span 2; overflow:hidden; }
.popup .controls { position:absolute; right:0; top:30rem; background:var(--green); border-radius:20rem 20rem 0 20rem; height:60rem; padding:0 30rem; z-index:10; }
.popup .controls .paging .total::before { content:' / '; }
.popup .slide { overflow:hidden;}
.popup img { width:100%; border-radius:20rem 20rem 50rem 20rem; }

.btn_list { grid-column:1 / span 2; position:relative; border-radius:60rem; background:#EAF5EB; overflow:hidden; padding:50rem; }
.btn_list::before,
.btn_list::after { content:''; position:absolute; width:240px; height:140px; right:0; bottom:0; background:var(--sprite) 0 0; border-radius: 140px 0px 60px 0px; z-index:0; }
.btn_list::before { right:50rem; bottom:40rem; width:115px; height:132px; border-radius:0; z-index:1; }
.btn_list.color2::before { width:119px; background-position:-155px 0; }
.btn_list.color3::before { width:102px; background-position:-314px 0; }
.btn_list::after { background:linear-gradient(240deg, #DFEFE100 0%, #cde6d0 100%) 0% 0% no-repeat; }
.btn_list.color2::after { background:linear-gradient(240deg, #FBE0E500  0%, #f8d0d8 100%) 0% 0% no-repeat;}
.btn_list.color3::after { background:linear-gradient(240deg, #FFF4CC00   0%, #ffecab 100%) 0% 0% no-repeat;}
.btn_list.color2 { grid-column:3 / span 2; background:#FCECEF; }
.btn_list.color3 { grid-column:5 / span 2; background:#FFF6D4; }
.btn_list h2 {margin-bottom:20rem;}
.btn_list ul {position:relative; z-index:20; }
.btn_list li {padding:5rem 0;}
.btn_list a { display:inline-flex; align-items:center; }
.btn_list a::before { content:''; display:block; width:5px; height:5px; border-top:2px solid #00335D; border-right:2px solid #00335D; transform:rotate(45deg); margin-right:10rem; }


.cont2 { background:linear-gradient(90deg, transparent 70%, #F6F8F9 70%); }
.cont2 .wrap { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:80rem 30rem; padding:80rem 0; margin-top:80rem; }
.cont2 .wrap::before {content:''; position:absolute; left:150rem; top:0; width:calc(100% - 150rem); height:100%; border-radius:300rem 0 0 0; background:#F6F8F9; z-index:-1; }
.care_list { position:relative; grid-column:1 / span 2;}
.care_list .h2 { float:left; width:200rem; }
.care_list a.arrow {position:absolute; right:0; top:50%; width:50px; height:50px; box-shadow:10rem 10rem 20rem rgba(0,0,0,0.2); background:#fff; border-radius:50%; z-index:10; transform:var(--hcenter); }
.care_list a.prev { left:300rem }
.care_list .slide { float:right; margin-right:50rem; width:calc(100% - 400rem); overflow:hidden; }
.care_list .slide a { position:relative; text-align:center; }
.care_list .slide a::after {content:''; position:absolute; left:50%; top:0; width:100px; height:100px; background:#fff; transform:var(--wcenter); border-radius:50%; z-index:-1; }
.care_list .slide a::before { content:''; display:block; width:56px; height:57px; background:var(--sprite) -94px -172px; margin:20rem auto 40rem; }
.care_list .slide a.icon2::before { width:47px; background-position:-190px -172px; }
.care_list .slide a.icon3::before { width:49px; background-position:-277px -172px; }
.care_list .slide a.icon4::before { width:60px; background-position:-366px -172px; }
.care_list .slide a.icon5::before { width:62px; background-position:-466px -172px; }
.care_list .slide a.icon6::before { width:48px; background-position:-568px -173px; }
.care_list .slide a.icon7::before { width:50px; background-position:-656px -172px; }

.check_list { background:#fff; box-shadow:10rem 10rem 20rem rgba(0,0,0,0.1); border-radius:60rem 20rem 20rem 20rem; padding:50rem; }
.check_list:last-of-type { border-radius:20rem 60rem 20rem 20rem;}
.check_list dl {position:relative; padding:5rem 0 0 90rem; margin-bottom:20rem; }
.check_list dl::before { content:''; position:absolute; left:24px; top:22px; background:var(--sprite) -128px -420px; width:24px; height:24px; z-index:20; }
.check_list dl::after { content:''; position:absolute; left:0; top:0; width:70px; height:70px; background:#F1F3F5; border-radius:50%; z-index:10; }
.check_list:last-of-type dl::before { left:25px; background-position:-191px -420px; }
.check_list input { max-width:250rem; width:calc(100% - 150rem); border:1px solid #BBBBBB; border-radius:10rem; height:45rem; padding:0 20rem; }
.check_list a { float:right; display:flex; align-items:center; height:45rem; border-radius:25rem; padding:0 20rem; color:#fff; background:var(--red); }
.check_list a::after {content:''; display:block; width:69px; height:15px;  background:var(--sprite) -17px -356px; transform:scale(0.7); }

.banner { display:flex; align-items:center; justify-content:space-between; gap:0 100rem; padding:50rem 0; }
.banner h2 {margin-bottom:0;}
.banner .slide { flex-grow:1; overflow:hidden; }
.banner .swiper-slide { position:relative; width:auto; padding:0 30rem; }
.banner .swiper-slide::before {content:''; position:absolute; left:-1px; top:50%; width:1px; height:12rem; background:#000; opacity:0.2; transform:var(--hcenter); }


/*---------------------------------------------------------------*/


@media all and (max-width:1200px){
    .visual { grid-column:1 / span 6; }
    .info_wrap { grid-column:1 / span 6; gap:80rem 0; }
    .notice { grid-column:1 / span 6; }
    .notice > div::after {display:none;}
    .notice ul {border-top:1px solid #ddd; padding-top:40rem; margin-top:40rem; }
    .popup { grid-column:1 / span 6; }
    .btn_list {grid-column:1 / span 3}
    .btn_list.color2 { grid-column:4 / span 3;  }
    .btn_list.color3 {grid-column:1 / span 6;}
    .btn_list.color3 ul { display:flex; flex-wrap:wrap; }
    .btn_list.color3 li { flex:1 1 50%; }
    .check_list a::after {width:40px; background-position-x:-45px;}
}
@media (max-width:1200px) and (min-width:769px){
    .center_info { position:relative; grid-template-columns:1fr 1fr; grid-template-rows:1fr 0 0; padding:30rem 0;}
    .center_info dl:first-of-type { align-self:baseline; }
    .center_info dl:nth-of-type(2) { align-items:baseline; border-top:0; border-left:1px dashed #A3ABB1; }
    .center_info a { position:absolute; right:0; bottom:-30rem; width:50%; height:60rem; }
}
@media all and (max-width:1023px){
    .cont1 { padding-top:40rem; }
    .cont1 .wrap,
    .cont2 .wrap { gap:40rem 30rem; }
    .cont2 .wrap { padding:40rem 0; margin-top:40rem; }
    .banner { gap:0 50rem; }
}
@media all and (max-width:768px){
    .info_wrap { gap:40rem 0; }
    .center_info dl {padding:15rem 20rem 15rem 50rem; }
    .notice ul { gap: 10rem 0;}
    .notice li { flex:1 1 100%; }
    .notice ul li:nth-of-type(4),
    .notice ul li:nth-of-type(5),
    .notice ul li:nth-of-type(6) {display:none;}
    .btn_list::before { transform:scale(0.7); right:20rem; bottom:10rem; }
    .cont2 .wrap::before {left:-3%; width:100%; border-radius:0; }
    .care_list .h2 { width:100%; display:flex; align-items:center; gap:30rem; margin-bottom:20rem;  }
    .care_list a.prev { left:0; }
    .care_list .slide { width:calc(100% - 100rem); margin:0 50rem;}
    .check_list { grid-column:1 / span 2; padding:30rem; }

}
@media all and (max-width:480px){
    .visual .controls { width:100%; height:60rem; border-radius:0 0 20rem 20rem; }
    .visual .slide  { padding-bottom:60rem; }
    /*.notice::before {width:330rem; }
    .notice > a { width:110rem; left:110rem;}
    .notice > a:last-of-type { left:220rem; }*/
    .btn_list { grid-column:1 / span 6; padding:30rem 40rem;}
    .btn_list.color2 { grid-column:1 / span 6;}
    .btn_list.color3 li { flex:1 1 100%; }
    .banner { position:relative; flex-direction:column; align-items:stretch; gap:20rem 0; }
    .banner .controls {position:absolute; right:0; top:50rem; }
}

/*251126 동영상*/
.videopop {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 300; background: rgba(0, 0, 0, 0.5); color: #ffffff;}
.videowrap {margin: 80rem auto; width: 90%; max-width: 800rem; position: relative;}
.videoslider .slick-arrow {position: absolute; top: 50%; border: none; transform: translateY(-50%); width:11px; height:18px;background:var(--sprite);background-position:-126px -356px;}
.videoslider .slick-prev {left: -25rem; transform:rotateY(180deg);}
.videoslider .slick-next {right: -25rem;}
.videoslider .slick-sr-only {text-indent: -999999px; display: block;}
video {width: 100%; height: auto;}
.video p {margin-bottom: 10rem; font-size: 18rem; font-weight: 600; padding-right: 40rem;}
.closeVid {position: absolute; top: 0; right: 0; color: #ffffff;}