@charset "utf-8"; /* CSS Document */

#content { position:relative; }
.sys-pop { position: absolute; z-index: 9999; }
.sys-pop .box { background:#fff; }
.sys-pop .box .check { display:block; position:relative; margin: 0; padding: 0 10px 10px; }
.sys-pop .box input[type=checkbox], .sys-pop .box input[type=radio] { display:inline-block; }
.sys-pop button.close { color: #000; font-size: 15px; opacity: 1; }

/** visual **/
#main-visual { position: relative; overflow-x: hidden; /* background: #fff url(../../images/user/main/visual-bg.png) center top no-repeat; *//* background-size: cover; */ }
#main-visual:after { display:block; clear:both; content:""; }
#main-visual .container { position: fixed; top: 0; left: 0; right: 0; position: absolute; width: 100%; height: 100%; }
#main-visual .img-wrap { position: relative; width: 50%; padding: 55px 0; z-index: 99; }
#main-visual .img-wrap .img { width:100%; height: 100%; }
/* 부모를 벗어나지 않고 내부 이미지만 확대 */
#main-visual .img-wrap .scale { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: all 0.3s ease-in-out; /* 부드러운 모션을 위해 추가*/ }
#main-visual .img-wrap .scale:hover { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); }
#main-visual .img-wrap img { width: 100%; height: 100%; }
#main-visual .text-wrap { float: right; width: 50%; height: 100%; padding: 0; }
#main-visual .text-wrap:after { content: ""; display: inline-block; width: 1px; height: 100%; margin-right: 0; vertical-align: middle; }
#main-visual .text-wrap .text { display: inline-block; vertical-align: middle; }
#main-visual .text-wrap .text p { }
#main-visual .text-wrap .text .small { color: #dbfdfc; font-size: 28px; font-weight: 300; letter-spacing: -0.040em; line-height: 1.5; }
#main-visual .text-wrap .text .medium { color: #fff; font-size: 24px; font-weight: 300; letter-spacing: -0.060em; }
#main-visual .text-wrap .text .big { padding: 20px 0 25px; color: #fff; font-size: 55px; letter-spacing: -0.040em; line-height: 1.1; }
#main-visual .text-wrap .text .big span.color-yellow { color: #fff049; }
#main-visual .text-wrap .text .big span.inkLipquid { font-size: 70px; }
.swiper-container { width: 100%; height: 100%; }
.swiper-slide { /* display: none !important; */text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.swiper-slide-active { display:block !important; background: #fff; }
.swiper-slide > a { }
.swiper-slide > a > img { width:100%; }
/* swiper control */
.swiper-button-prev, .swiper-button-next { display: inline-block; position: relative; top: auto; bottom: 40px; width: 50px; height: 50px; text-align: right; float: right; background-color: #000; }
.swiper-button-prev:after, .swiper-button-next:after { display:none; }
.swiper-button-prev { left: auto; /*right: 30px; */right: 5px; background: url(../../images/user/common/btn/btn-cardNews-prev.png) 0 0 no-repeat; }
.swiper-button-next { /*right: 20px; */ right: 0px; background: url(../../images/user/common/btn/btn-cardNews-next.png) 0 0 no-repeat; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .55; }


/* 20250430 좌측레이아웃 2개 스와이프 한줄에 나오게 추가 */
.swiper-wrap { display: flex; gap: 30px; justify-content: space-evenly; }
/* 20250506 하단배너 pc환경에서만 우측으로 이동 추가 */
.banner { padding:8px 10px!important; border-radius:5px; margin-top:-3px; margin-top:-5px!important; }
@media (min-width: 1024px){
 .banner { float:right !important; }
 }

#main-visual .swiper-button-next.swiper-button-disabled, #main-visual .swiper-button-prev.swiper-button-disabled { opacity:1; border: 2px solid #888; }
#main-visual .swiper-button-next, #main-visual .swiper-button-prev { position: absolute; top: 50%; width: 96px; height: 96px; margin-top: -48px; }
#main-visual .swiper-button-prev { left: 0; background: #027c6b url(../../images/user/common/btn/btn-cardNews-prev2.png) 0 0 no-repeat; }
#main-visual .swiper-button-next { right: 0; background: #027c6b url(../../images/user/common/btn/btn-cardNews-next2.png) 0 0 no-repeat; }
#main-visual .swiper-button-next.swiper-button-disabled { background: url(../../images/user/common/btn/btn-cardNews-next2-d.png) 0 0 no-repeat; }
#main-visual .swiper-button-prev.swiper-button-disabled { background: url(../../images/user/common/btn/btn-cardNews-prev2-d.png) 0 0 no-repeat; }
#main-visual .swiper-pagination { top: auto; bottom: 38px; /* right: 0; */
 left: 90px; width: auto; /* height: 30px; */ /* margin: 0 auto; */ color: #222; font-size: 20px; }
#main-visual .swiper-pagination .swiper-pagination-current { /* display: inline-block; *//* margin-top: 8px; */padding: 0 7px; color: #222; /* font-size: 20px; */ }
#main-visual .swiper-pagination .swiper-pagination-total { /* display: inline-block; */padding: 0 7px; color: #888; /* font-size: 20px; */ }
#main-visual .btn-wrapper { position:
 absolute; bottom: 30px; left: 30px; /* right: 0; */
 /* z-index: 9999; */
 width: 40px; /* margin: 0 auto; */
 /* text-align: center; */ }
#main-visual .btn-wrapper button { position: relative; bottom: 0; z-index: 9999; width:40px; height:40px; /* margin-left: -100px !important; */ }
#main-visual .btn-wrapper .auto-start { background: url(../../images/user/common/btn/bg-slick-play.png) 0 0 no-repeat; }
#main-visual .btn-wrapper .auto-stop { background: url(../../images/user/common/btn/bg-slick-stop.png) 0 0 no-repeat; }
#main-visual .swiper-pagination-bullet { width: 70px; height: 8px; margin:0 5px; border-radius: 0; background: #000; opacity: .25; }
#main-visual .swiper-pagination-bullet-active { position: relative; width: 120px; border: 1px solid #ddd; background: #fff; opacity: 1; }
/** content **/
#main-content { position: relative; }
#main-content:after { display:block; content:""; position:absolute; top:0; right:0; width:50%; height:120%; background:#e9f1f3; z-index:-1; }
#main-content:before { display:block; content:""; position:absolute; top: 110px; right: 0; width: 50%; height: 1px; background: #b7c2c6; }
#main-content .container { width: 100% !important; max-width: 1920px !important; padding: 0; }
#main-content .container:after { display:block; clear:both; content:""; }
/* left */
.left-content { float: left; width: 50%; padding: 0 60px; }
.left-content .tag { position: absolute; top: 85px; left: 0; z-index: 999; padding: 10px 10px; color: #fff; background: #e56c17; font-size: 18px; font-weight: 300; letter-spacing: 0.040em; }
.left-content .tag:after { display:block; content:""; position:absolute; bottom:-10px; left:0; z-index:-1; width:20px; height:10px; background: url(../../images/user/common/ico/ico-tag1.png) 0 0 no-repeat; }
.card-news { width: 100%; /*padding: 70px 65px 70px 20px; */ padding: 70px 0px 70px 15px; text-align: left; }
/* .card-news .img-wrap { width: 100%; } */
.card-news .img-wrap { position: relative; width: 100%; }
.card-news .img-wrap::after { content: ''; display: block; padding-bottom: 100%; }
.card-news .img-wrap a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.card-news .img-wrap img { display: block; width: 100%; height: 100%; /*object-fit: cover;*/ max-width: 640px; max-height: 640px; }
.card-news .text-wrap p.tit { margin-top: 20px; }
.card-news .text-wrap p.tit a { display: block; color: #333; font-size: 24px; letter-spacing: -0.060em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.card-news .text-wrap p.date { position:relative; margin: 20px 0 15px; color: #999; font-size: 17px; letter-spacing: -0.060em; line-height: 1; font-weight: 300; }
.card-news .text-wrap p.date:after { display:block; clear:both; content:""; position:absolute; top: 9px; right: -65px; width: calc(100% - 70px); height: 2px; background:#e1e1e1; }
.card-news .text-wrap p.text { }
.card-news .text-wrap p.text a { display: block; color: #555; font-size: 18px; font-weight: 350; letter-spacing: -0.060em; line-height: 140%; }
.card-news .text-wrap { width: 100%; }
/* right */
.right-content { float: right; width: 50%; }
.board-list { position: relative; padding-top: 70px; }
.board-list > ul { position: relative; padding: 0 60px;display: flex;gap: 40px; }
.board-list > ul:after { display:block; clear:both; content:""; }
.board-list > ul > li { float: left; }

.board-list > ul > li a.tab { position:relative; color: #727272; font-size: 24px; letter-spacing: -0.080em; line-height: 32px; }
.board-list > ul > li a.tab:hover, .board-list > ul > li a.tab:focus { text-decoration:none; }
.board-list > ul > li:not(:last-child) a.tab::after { content: '/'; display: block; color: #ccc; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); font-size: 20px; }
.board-list > ul > li.active a.tab { color: #333; font-size: 30px; font-weight: 500; }
.board-list > ul > li.active a.tab::before { display:block; content:""; position:absolute; top: 45px; left: 0; width: 100%; height: 3px; background: #14a83b; z-index: 10; }
.board-list > ul > li a.more { display:none; }
.board-list > ul > li.active a.more { display:block; position: absolute; top: 430px; left: 70px; padding-right: 25px; z-index: 999; background: url(../../images/user/common/btn/btn-boardList-arrow.png) right center no-repeat; color: #333; line-height: 1; -webkit-transition: ease-out 0.6s; -moz-transition: ease-out 0.6s; transition: ease-out 0.6s; }
.board-list > ul > li div { display: none; position: absolute; top: 83px; right: 0; width: 100%; }
.board-list > ul > li.active div { display:block; }
.board-list > ul > li ul li { border-bottom: 1px solid #b7c2c6; }
.board-list > ul > li ul li a { display: block; padding: 18px 70px; }
.board-list > ul > li ul li a:after { display:block; clear:both; content:""; }
.board-list > ul > li ul li a span.tit { float: left; width: calc(100% - 150px); color: #555; font-size: 18px; letter-spacing: -0.060em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.board-list > ul > li ul li a:hover span.tit, .board-list > ul > li ul li a:focus span.tit { color:#1b79ab; }
.board-list > ul > li ul li a span.date { float: right; color: #909090; font-size: 17px; letter-spacing: -0.060em; }


@media (min-width: 1251px) and (max-width: 1450px) { }

@media (min-width: 1199px) and (max-width: 1250px) { /** content **/
 /* right */
 .board-list > ul > li ul li a { padding: 15px 0; }
 .board-list > ul > li.active a.more { top: 400px; }
 }
@media (min-width: 1025px) and (max-width: 1340px) { /** visual **/
 #main-visual .text-wrap .text .small { font-size: 20px; }
 #main-visual .text-wrap .text .medium { }
 #main-visual .text-wrap .text .big { padding: 20px 0 15px; font-size: 40px; }
 #main-visual .text-wrap .text .big span.inkLipquid { font-size: 50px; }
 .swiper-button-prev, .swiper-button-next { /* top: 100px; *//* bottom: auto; */ }
 .swiper-button-prev { /* right: 130px; */ }
 .swiper-button-next { /* right: 74px; */ }
 }

@media (min-width: 1025px) and (max-width: 1213px) { /** content **/
 /* right */
 .board-list > ul > li div { top: 70px; }
 .board-list > ul > li ul li a { padding: 17px 0; }
 .board-list > ul > li ul li a span.tit { font-size: 16px; }
 .board-list > ul > li ul li a span.date { font-size: 15px; }
 .board-list > ul > li.active a.more { top: 410px; }
 }

/* 20250430 좌측레이아웃 2개 스와이프 한줄에 나오게 추가 */
@media (max-width: 630px){
 .swiper-wrap { display:flex;flex-direction: column;gap: 30px; }
 }
/* 20250430 좌측레이아웃 2개 스와이프 한줄에 나오게 추가 */
@media (min-width: 1025px){
 .mgtop { /*margin-top:100px; */ margin-top:30px; }
 }

@media (max-width: 1024px) {
    /* visual */
 #content { margin-top: 54px; }
 #main-visual { background:none; }
 #main-visual .img-wrap { width: 100%; padding: 0; }
 #main-visual .container { position: relative; max-width: 100%; height: auto; /* margin: -30px 0 0; *//* padding: 40px 0 0; *//* background: #fff url(../../images/user/main/visual-bg-m.png) center top no-repeat; */background-size: cover; }
 #main-visual .text-wrap { float: none; width: 100%; }
 #main-visual .text-wrap .text { display: block; padding: 0 13px; }
 #main-visual .text-wrap .text .small { font-size: 14px; line-height: 1.5; }
 #main-visual .text-wrap .text .medium { font-size: 16px; }
 #main-visual .text-wrap .text .big { padding: 5px 0; font-size: 25px; line-height: 1.0; }
 #main-visual .text-wrap .text .big span.inkLipquid { font-size: 32px; }
 /* swiper control */
 .swiper-button-prev, .swiper-button-next { position: absolute; top: 55px; bottom: 0; width: 40px; height: 40px; background-size: 100%; }
 .swiper-button-prev { right: 82px; }
 .swiper-button-next { right: 33px; }
 /* content */
 #main-content { /* padding: 0 0 0 10px; */ }
 #main-content:before, #main-content:after { display: none; }
 #main-content .container { max-width: 100%; padding: 0; margin: 0; }
 /* left */
 .left-content { float: none; width: 100%;padding: 40px; }
 .left-content .tag { top: 20px; left: 0px; padding: 8px 20px; font-size: 14px; }
 .card-news {padding: 0 10px;}
 /* .card-news { margin: 0 10px; padding: 15px; }  */
 .card-news .text-wrap p.tit a { font-size: 18px; line-height: 1.2; text-overflow: inherit; white-space: normal; overflow: visible; }
 .card-news .text-wrap p.date { margin: 10px 0; font-size: 15px; }
 .card-news .text-wrap p.date:after { top: 7px; right: 0; width: calc(100% - 115px); }
 .card-news .text-wrap p.text { }
 .card-news .text-wrap p.text a { font-size: 14px; }
 .card-news .text-wrap { }
 /* .card-news .img-wrap img { max-width: inherit; max-height: inherit; height: 250px; }  */
 /* right */
 .right-content { float: none; width: 100%; background: #e9f1f3; }
 .board-list { height: 400px; padding-top: 16px; }
 .board-list > ul {padding: 0;gap: 16px; }
 .board-list > ul:before { display:block; clear:both; content:""; }
 /* .board-list > ul:after { display: block;content: '';position: absolute;top: 40px;left: 0;height:1px; background: #b7c2c6;z-index: 1;}  */



 /* .board-list > ul > li.data, .board-list > ul > li.ask, .board-list > ul > li.brochure, .board-list > ul > li.news { margin-left: 35px; }  */

 /* .board-list > ul > li.ask:after { top: 3px; left: 47px; font-size: 16px; }
 .board-list > ul > li.data:after { top: 2px; left: 130px; font-size: 17px; }
 .board-list > ul > li.brochure:after { top: 2px; left: 200px; font-size: 17px; }
 .board-list > ul > li.news:after { top: 2px; left: 268px; font-size: 17px; }  */
 .board-list > ul > li.active a.tab::before { top: 37px; }


 /* .board-list > ul li.notice + li.data:after { top: 3px; left: 70px; font-size: 16px; } */
 /* .board-list > ul li.notice.active + li.data:after { top: 2px; left: 84px; } */
 /* .board-list > ul li.notice.active + li.ask:after { left: 62px; }
 .board-list > ul li.ask.active + li.data:after { top: 2px; left: 130px; }
 .board-list > ul li.data.active + li.brochure:after { top: 2px; left: 200px; }
 .board-list > ul li.brochure.active + li.news:after { top: 2px; left: 268px; }

 .board-list > ul > li.ask.active:after { left: 47px; }
 .board-list > ul > li.data.active:after { left: 118px; }
 .board-list > ul > li.brochure.active:after { left: 185px; }
 .board-list > ul > li.news.active:after { left: 250px; }  */

 /* .board-list > ul > li.data.shift-left:after { left: 118px; }  */
 /* brochure 탭이 active되었을 때 .data에 적용되는 스타일 */
 /* .board-list > ul > li.brochure.shift-left-2:after { left: 185px; }  */
 /* news 탭이 active되었을 때 .brochure에 적용되는 스타일 */
 /* .board-list > ul > li.data.shift-left-3:after { left: 118px; }  */
 /* news 탭이 active되었을 때 .data에 적용되는 스타일 */





 .board-list > ul > li a.tab, .board-list > ul > li.active a.tab { font-size: 12px;word-break: keep-all;line-height: 1; }
 .board-list > ul > li:not(:last-child) a.tab::after {right: -12px;font-size: 12px;}
 .board-list > ul > li.active a.more { position: absolute; top: 320px; left: 16px; right: 0; width: 72px; padding-right: 20px; background-position: right 1px; font-size: 14px; }
 .board-list > ul > li div { top: 40px; left: 0;border-top: 1px solid #ced2d4; }
 .board-list > ul > li ul li { border-bottom: 1px solid #ced2d4; }
 .board-list > ul > li ul li a { padding: 16px; }
 .board-list > ul > li ul li a span.tit { width: calc(100% - 110px); font-size: 14px; }
 .board-list > ul > li ul li a:hover span.tit, .board-list > ul > li ul li a:focus span.tit { }
 .board-list > ul > li ul li a span.date { font-size: 13px; font-weight: 300; }

.sys-pop { position: fixed; top: 60px !important; left: 15px !important; z-index: 9999; width: calc(100% - 30px) !important; max-width:600px; }
.sys-pop img { width: 100%; }

 #main-visual .swiper-button-next, #main-visual .swiper-button-prev { width: 50px; height: 50px; margin-top: -25px; }
 #main-visual .swiper-button-next,
 #main-visual .swiper-button-prev,
 #main-visual .swiper-button-next.swiper-button-disabled,
 #main-visual .swiper-button-prev.swiper-button-disabled { background-size: 100%; }
 #main-visual .btn-wrapper { left: 20px; bottom: 15px; }
 #main-visual .swiper-pagination { left:75px; bottom: 20px; }
 #main-visual .swiper-pagination-bullet { width: 12px; height: 12px; border-radius: 50%; }

 .orgBanner {margin-top: 30px !important;}
 }