@import url("common.css");


/*** css 공통 ***/


/* 버튼 */
.moreBtn{display:inline-block; width:180px; height:60px; box-sizing:border-box; text-align:center; transition:all .3s linear; border:1px solid var(--main); background:var(--white); position:relative;}
.moreBtn:before{content:''; display:block; width:0; height: 100%; background:var(--main); position:absolute; left:0; top:0; transition:all .3s linear;}
.moreBtn:hover:before{width: 100%; transition:all .3s linear;}
.moreBtn span{display:block; position:relative; z-index: 1; font-size:1rem; line-height: 58px; letter-spacing:-0.35pt; font-weight:500; color:var(--main); transition:all .3s linear;}
.moreBtn:hover span{color:var(--white); transition:all .3s linear;}


/* 화살표 */
.slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999;}
.slick-prev{background:url('/img/arrow_p.png') no-repeat center/100% auto;}
.slick-next{background:url('/img/arrow_n.png') no-repeat center/100% auto;}

/* 어두운 배경 */
  .jbpop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 99999999;
    display: none;
  }
  /* 팝업 박스 */
  .jbpop-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* background: #fff; */
    /* border-radius: 6px; */
    /* box-shadow: 0 10px 30px rgba(0,0,0,.35); */
    z-index: 999999999;
    max-width: 980px;
    width: calc(100% - 40px);
    display: none;
  }
  .jbpop-body {
    display: grid;
    gap: 11px;
    grid-template-columns: 1fr 1fr;
    padding: 16px 16px 0 16px;
  }
  .jbpop-item a, .jbpop-item img { display:block; width:100%; height:auto; }
  .jbpop-footer {
    display:flex; align-items:center; justify-content:center;
    gap: 20px; padding: 14px 16px 18px 16px;
  }
  .jbpop-footer label {cursor:pointer;user-select:none;color: #f9f9f9;font-weight: 300;}
.jbpop-footer input {
    border-radius: 50%;
    width: 23px;
}
  .jbpop-close {
    position:absolute;
    right: -16px;
    top: -14px;
    font-size: 35px;
    line-height:1;
    border:0;
    background:transparent;
    cursor:pointer;
    color: #ffffff;
  }
  .jbpop-close:hover { color:#000; }
  @media (max-width: 768px) {
    .jbpop-body { grid-template-columns: 1fr; }
  }


/*** Visual ***/
#visual {width:100%;height: 589px;overflow: hidden;background:#000;position: relative;}
#visual .visual_in{width: 100%; height: 920px; position: relative;}
#visual .visual_in .roll{width: 100%; height: 920px;}
#visual .visual_in .roll .v_txt{position: absolute;left: 50%;top: 36%;transform:translate(-50%,-50%);text-align:left;z-index: 9999;}
#visual .visual_in .roll .v_txt h2{font-size:3.222rem;font-weight:200;color: #2b3c3d;letter-spacing: -1.74px;line-height:118%;opacity:0;transform:translateY(60px);transition:all .6s 0.3s linear;margin-bottom: 28px;}
#visual .visual_in .roll .v_txt h2 b {font-weight: 700; font-size:3.222rem; letter-spacing: -1.74px; line-height:118%; } 
#visual .visual_in .roll .v_txt p{font-size:24px;color: #54564b;letter-spacing:-0.48px;line-height:145%;transition:all .6s 0.6s linear;transform:translateY(60px);opacity:0;} 
#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg{width: 100%;height: 100%;background-repeat:no-repeat;background-size: contain;background-position: top;-ms-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);-webkit-transform: scale(1.1,1.1);transform: scale(1.1,1.1);-webkit-transition:transform 3000ms  ease-in-out;-moz-transition:transform 3000ms ease-in-out;-o-transition:transform 3000ms ease-in-out;-ms-transition:transform 3000ms ease-in-out;transition:transform 3000ms ease-in-out;}
#visual .visual_in .roll .v_bg .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;}

/* 스크롤 */
#visual .scroll_down{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600;letter-spacing: 0.39px;color:rgba(255,255,255,.8);line-height:100%;font-family:var(--eng);text-align:center;position:absolute;left:50%;margin-left:-675px;bottom:35px;z-index: 999;}
#visual .scroll_down span{display:block; width:23px; height:32px; border-radius:20px; box-sizing:border-box; border:2px solid rgba(255,255,255,1); position:relative; }
#visual .scroll_down span:after{content:''; display:block; width:3.7px; height:6px; background:#fff; border-radius:2px; position:absolute; left:50%; top:8px; margin-left:-2px; animation:scroll_down 1s linear infinite;}


@keyframes scroll_down {
	0%,100% { transform:translateY(0); opacity: 1;}
	50% { transform:translateY(2px); opacity: 0.5;}
}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}


/* 화살표 */
#visual .slick-arrow{opacity: 1; bottom:38px;}
#visual .slick-arrow:hover{opacity: 0.5;}
#visual .slick-prev{background:url('/img/arrow_p_w.png') no-repeat center/100% auto; left:50%; margin-left:-675px;}
#visual .slick-next{background:url('/img/arrow_n_w.png') no-repeat center/100% auto; right: 50%; margin-right:-675px;}


/* 도트 */
#visual .slick-dots{font-size: 0; position: absolute; right: 50%; top: 55%; margin-right: -705px; transform: rotate(90deg) translateY(-50%); z-index: 9999; margin-bottom: 0;
 opacity: 0; animation: fadeIn 0.6s 1s linear forwards;}
#visual .slick-dots li{display:inline-block; vertical-align:top; width:20px; height:20px; border:1px solid transparent; box-sizing:border-box; margin: 0 15px 0 0; cursor:pointer; transition:all .3s linear; border-radius:50%; position: relative;}
#visual .slick-dots li:last-child{margin: 0;}
#visual .slick-dots li.slick-active{border-color:rgba(255,255,255,.3); }
#visual .slick-dots li.slick-active:after {width:6px; height:6px;}
#visual .slick-dots li:after{content:''; display:block; width:10px; height:10px; border-radius:50%; background:var(--white); position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity: 0.3; transition:all .3s linear;}
#visual .slick-dots li.slick-active:after{opacity: 1;}
#visual .slick-dots li button{border:0; padding:0; font-size:0; outline:none; cursor:pointer;}


/* 효과 */
#visual .visual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .v_txt h2{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt p{transform:translateY(0); opacity:1;}



/* about */
#about {}
#about .box_wrap {position:relative;display: flex;}
#about .box_wrap .box_in {display:flex; width:66%}
#about .box_wrap .box {width: calc((100% - 20px) / 4);margin:0 10px 0 0;border:1px solid var(--border);border-radius:10px;padding: 45px 22px;box-sizing:border-box;transition:all .3s linear;}
#about .box_wrap .box dt {margin-bottom: 20px;text-align: center;transition:all .3s linear;}
#about .box_wrap .box:last-of-type {margin:0 30px 0 0; }
#about .box_wrap .box dt svg {max-width:100%; height:auto; transition:all .3s linear;}
#about .box_wrap .box dd {text-align:left; transition:all .3s linear;}
#about .box_wrap .box dd .tit {font-size:23px;line-height: 147.826%;letter-spacing: -0.69px;font-weight: 600;color:var(--black);margin-bottom:8px;transition:all .3s linear;text-align: center;}
#about .box_wrap .box dd p {color:var(--light);line-height: 161%;letter-spacing: -0.54px;font-weight: 400;transition:all .3s linear;text-align: center;}
#about .box_wrap .box:hover {background:var(--main);}
#about .box_wrap .box:hover dt svg path.change {stroke:var(--white)}
#about .box_wrap .box:hover dt svg path.change2 {fill:#82D8F8}
#about .box_wrap .box:hover dd .tit {color:var(--white);}
#about .box_wrap .box:hover dd p {color:rgba(255,255,255,.8);}


#about .box_wrap .pop_banner {padding: 20px 50px 0 0;box-sizing: border-box;background:var(--main);/* z-index: 999; *//* position:absolute; */height: 329px;width:calc(33% + 15px);bottom:0;right:0;border-right:1px solid var(--main);border-bottom:1px solid var(--main);}

#about .box_wrap .pop_banner .eng {color:var(--white); transform:rotate(90deg); position:absolute; right:-40px; top:100px; font-size:1.111rem; font-weight:700;}

#about .box_wrap .pop_banner .inner {width:100%; height:100%;}
#about .box_wrap .pop_banner .inner .banner_roll {width:100%; height:100%;position: relative; overflow:hidden; border-radius:0 30px 0 0; }
#about .box_wrap .pop_banner .inner .banner_roll .roll {width:100%; height:100%; background:var(--main); position: relative;}
#about .box_wrap .pop_banner .inner .banner_roll .roll  img {max-width:100%; height: 100%; width: 100%;}


#about .box_wrap .pop_banner .p_btn {display:flex; flex-direction:column; position:absolute; bottom:0; right:0;}
#about .box_wrap .pop_banner .p_btn span {display:inline-block; width:50px; height:50px; font-size:0; border-top:1px solid rgba(255,255,255,.15); position:relative; transition:all .3s linear;}
#about .box_wrap .pop_banner .p_btn span:before {display:block; content:''; font-family:var(--icon); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:23px; color:var(--white); transition:all .3s linear;}
#about .box_wrap .pop_banner .p_btn .prev_arrow:before {content:'\e5cb';}
#about .box_wrap .pop_banner .p_btn .next_arrow:before {content:'\e5cc';}

#about .box_wrap .pop_banner .p_btn span:hover{background:var(--white);}
#about .box_wrap .pop_banner .p_btn span:hover:before {color:var(--main); }
.main-classification-btn{margin-top: 1rem;margin-bottom: 7rem;}
.main-classification-btn a{margin: 0 auto;width: 236px;height: 57px;font-size: 20px;letter-spacing: -0.01em;font-weight: 700;color: #000;text-align: center;border-radius: 1.5rem;background-color: #fff;border: 0.3rem solid #000;box-sizing: border-box;display: flex;align-items: center;justify-content: center;box-shadow: 0.8rem 0.8rem 2.9rem -0.4rem rgba(0,0,0,0.17);transition:var(--transition-custom);}
/* hover */
.main-classification-btn a:hover{color: #fff; background-color: #000;}


#news {background:var(--grayBg); height: 680px;}
#news .tit_area {display:flex; gap:50px; align-items: center;  margin-bottom:40px;}
#news .tit_area h2 {font-size:2.556rem; font-weight: 700; letter-spacing: -1.38px; line-height:123%; color:var(--black);}
#news .tit_area .news_tab ul {display:flex; gap:30px;}
#news .tit_area .news_tab ul li {position:relative; font-size:1.167rem; color:var(--light); font-weight:300; letter-spacing: -0.63px; line-height:152.381%; transition:all .3s linear; cursor: pointer;}
#news .tit_area .news_tab ul li:hover {color:var(--main); font-weight:700;}
#news .tit_area .news_tab ul li.focus {color:var(--main); font-weight:700;}
#news .tit_area .news_tab ul li.focus:before {width:100%; height:2px; background:var(--main); position:absolute; bottom:0; display:block; content:'';}

#news .news_cont{position:relative;}
#news .news_box{opacity:0; visibility: hidden; width:100%; position:absolute; top:0; left:0 ; width:100%; }
#news #news01.focus{opacity:1; visibility: visible;}
#news #news02.focus{opacity:1; visibility: visible;}
#news #news03.focus{opacity:1; visibility: visible;}

#news .rolling{ margin:0; width:calc(100% + 30px); }
#news .rolling .roll {margin-right:30px; background:var(--white); border-radius:10px; padding:45px 45px 40px; box-sizing:border-box; transition:all .3s linear; position: relative; cursor: pointer;}
#news .rolling .roll:last-of-type {margin-right:0;}

#news .rolling .roll dt {padding-bottom:32px; border-bottom:1px dashed var(--border); box-sizing:border-box; }
#news .rolling .roll dt h3 {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; margin-bottom:10px; font-size:1.167rem; letter-spacing: -0.63px; line-height:152.381%; font-weight: 600; color:var(--black); transition:all .3s ease;}
#news .rolling .roll dt p {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow:hidden; letter-spacing: -0.54px; line-height:161%; font-size:1rem; font-weight:400; color:var(--basic); }
#news .rolling .roll dd {display:flex; padding-top:30px;  box-sizing:border-box; justify-content:space-between;}
#news .rolling .roll dd p {display:block; font-size:15px; position:relative; color:var(--light); font-weight:400; line-height:173%; letter-spacing:-0.3px; padding-left:25px;}
#news .rolling .roll dd p:before {display:block; content:''; font-family:var(--icon); font-size:20px; position:absolute; left:0 ; top:0px; }
#news .rolling .roll dd .name:before {content:'\e853';}
#news .rolling .roll dd .date:before {content:'\ebcc';}

#news .rolling .roll:hover dt h3 {color:var(--main);}

#news .btn_wrap {position:absolute; right:0; top:-95px;}
#news .btn_wrap .n_btn{display:flex; gap:5px}
#news .btn_wrap .n_btn span, #news .btn_wrap .n_btn a {display:inline-block; width:56px; height:56px; line-height:54px; box-sizing:border-box; border-radius:100%; border:1px solid var(--border); color:rgba(27,27,31,.5); position:relative; transition:all .3s ease; cursor:pointer;}
#news .btn_wrap .n_btn .mor_btn {background:var(--main); color:var(--white); border-color:var(--main);}
#news .btn_wrap .n_btn span:before, #news .btn_wrap .n_btn a:before {transition:all .3s ease; position:absolute; font-size:36px; display:block; content:''; font-family:var(--icon); top:50%; left:50%; transform:translate(-50%,-50%); }
#news .btn_wrap .n_btn .prev_arrow:before {content:'\e5cb';}
#news .btn_wrap .n_btn .next_arrow:before {content:'\e5cc';}
#news .btn_wrap .n_btn .mor_btn:before {content:'\e145';}

#news .btn_wrap .n_btn span:hover {border-color:var(--main); color:var(--main)}
#news .btn_wrap .n_btn .mor_btn:hover {background:transparent; }
#news .btn_wrap .n_btn .mor_btn:hover:before {color:var(--main);}

#news .btn_wrap .n_btn .slick-arrow:hover {background:var(--main); border-color:var(--main);}
#news .btn_wrap .n_btn .slick-arrow:hover:before {color:var(--white);}

#datatt {background:#fff;height: auto;}
.area-box2 {
    max-width: 1600px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

:root{
    --cal-blue:#0099ff;
    --cal-sat:#1e60ff;
    --cal-sun:#ff3b30;
    --cal-gray:#8e8e93;
    --cal-border:#e6e6e6;
    --cal-dot:#dadada;
    --cal-card:#f6f7f9;
    --cal-text:#111;
  }
  *{box-sizing:border-box}
  .cal_wrap{
    max-width: 100%;
    margin: -65px auto 0 auto;
    background:#fff;
    border:1px solid #f0f0f0;
    border-radius:14px;
    padding: 15px 24px 24px 24px;
    width: 100%;
  }
.explain-list-box {
    padding-top: 0px;
}

.explain-list-box .txt-elp .view {
    display: block;
    float: right;
    width: 40%;
    text-align: right;
    padding-right: 1px;
}

.explain-list-box .txt-elp .view img {
    width: 17px;
    height: auto;
    vertical-align: middle;
}

.list-board-box #layer2 {
    display: none;
}

.list-board-box #layer2 .table_wrap {
    border-top: none;
    margin-top: -20px;
}

.list-board-box .boardlist-list .table_wrap tbody>tr:last-child {
    border: none;
}

/* 쉬운정책풀이 두줄 ellipsis 추가 */
/* 쉬운정책풀이 */
.explain-list-box .txt {
    text-align: left;
}

.explain-list-box .txt .txt-elp:first-child {
    white-space: normal;
    height: 50px;
    text-overflow: initial;
    overflow: hidden;
}

.explain-list-box .txt-elp .date {
    display: block;
    float: left;
}

.explain-list-box .txt-elp .view {
    display: block;
    float: right;
    width: 20%;
    text-align: right;
    padding-right: 1px;
    font-size: 12px;
}

.explain-list-box .txt-elp .view img {
    width: 17px;
    height: auto;
    vertical-align: middle;
}

.explain-list-box button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--button-bg-color);
    color: var(--button-color);
    margin: 0;
    padding: 5px 10px;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    border: none;
    /* border-radius: 20px; */
    display: inline-block;
    width: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: 0.5s;
}

.explain-list-box button.before {
    --button-color: #ffffff;
    --button-bg-color: #00BCD4;
    --button-hover-bg-color: #00BCD4;
}

.explain-list-box button.ing {
    --button-color: #ffffff;
    --button-bg-color: #026cb8;
    --button-hover-bg-color: #0075c9;
}

.explain-list-box button.end {
    --button-color: #ffffff;
    --button-bg-color: #898989;
    --button-hover-bg-color: #898989;
}

.explain-list-box button:active,
button:hover,
button:focus {
    
}

.explain-list-box button:disabled {
    opacity: 0.5;
}

.read_form {
    width: 100%;
}
  /* 헤더 */
  .cal_title{font-weight: 700;font-size:28px;margin: 4px 0 3px;color: #333;}
  .cal_header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 5px;
  }
  .cal_monthbox{
    display:flex; align-items:center; gap:10px;
  }
  .cal_navbtn{
    width:40px; height:40px; border-radius:50%;
    display:grid; place-items:center; cursor:pointer;
    border:1px solid #eee; background:#fafafa;
    transition:.2s;
  }
  .cal_navbtn:hover{background:#f1f5ff; border-color:#e3ecff}
  .cal_yearmonth{
    font-size:32px; font-weight:800; letter-spacing:-.3px;
  }

  /* 레이아웃: 달력 좌, 일정 우 */
  .cal_grid{
    display:grid; grid-template-columns: 1.1fr .9fr; gap:28px;
  }

  /* 달력 박스 */
  .cal_calendar{
    border:1px solid #f2f2f2;
    border-radius:14px;
    padding: 5px 18px;
  }
  .cal_weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:4px;
    padding-bottom: 4px;
    margin-bottom:12px;
    border-bottom:2px dotted var(--cal-dot);
    color:#666;
    font-weight:700;
  }
  .cal_weekdays div{ text-align:center; padding:6px 0; }
  .cal_weekdays div:nth-child(1){ color:var(--cal-sun); }
  .cal_weekdays div:nth-child(7){ color:var(--cal-sat); }

  .cal_dates{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap: 0px 6px;
  }
  .cal_day{
    position:relative;
    aspect-ratio: 1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    font-weight:600;
    cursor:default;
    color:#222;
    user-select:none;
  }
  .cal_day.cal_other{ color:#c7c7c7; }
  .cal_day.cal_sun{ color:var(--cal-sun); }
  .cal_day.cal_sat{ color:var(--cal-sat); }
  .cal_day.cal_today{
    background:var(--cal-blue); color:#fff !important; font-weight:800;
    border-radius:50%;
  }
  .cal_clickable { cursor: pointer; }
.cal_clickable:hover { background: rgba(37,99,235,0.08); border-radius: 8px; }
/* 일정 있는(클릭 가능한) 날짜는 손가락 커서로 */
.cal_day[role="link"] { cursor: pointer; }

/* (선택) 살짝 호버 효과 */
.cal_day[role="link"]:hover { background: rgba(37,99,235,.08); border-radius: 8px; }

   /* 공통 레이아웃 가정: 날짜 칸에 배경/테두리 표시가 가능하도록 */
  .cal_day { position: relative; }

  /* 1) 오늘: 숫자 주변에 노란 링으로 강조 (배경 아님) */
  .cal_today{
    /* box-shadow: inset 0 0 0 2px #facc15; */ /* 노란 링 */
    border-radius: 999px;
    font-weight: 700;
  }

  /* 2) 일정 있는 날: 아래쪽에 작고 각진 마커(사각 점) */
  .cal_day.cal_has .cal_dot{
    background: #FF9800;           /* 파란 마커 */
    width: 9px;
    height: 9px;
    border-radius:2px;             /* 각진 느낌 */
    position:absolute;
    left:50%;
    bottom:6px;
    transform:translateX(-50%);
  }

  /* 3) 오늘이면서 일정도 있는 경우: 둘 다 보이되 충돌 없게 dot을 살짝 더 내림 */
  .cal_today.cal_has .cal_dot{ bottom:4px; }

  /* (선택) 주말 색상 유지/강조 */
  .cal_sun{ color:#e11d48; }       /* 일요일 빨강 */
  .cal_sat{ color:#2563eb; }       /* 토요일 파랑 */

  /* (선택) 이전/다음달 칸 흐리게 */
  .cal_other{ opacity:.4; }
  /* 날짜 hover 터치 감 */
  @media (hover:hover){
    .cal_day:not(.cal_today):hover{ background:#f7fbff; }
  }

  /* 일정 박스 */
  .cal_panel{
    border:1px solid #f2f2f2;
    border-radius:14px;
    padding:18px;
    background:#fff;
    margin-top: -98px;
  }
  .cal_listtitle{font-size: 17px;color:#666;margin-bottom:10px;font-weight: 900;}
  .cal_cards{
    background:var(--cal-card);
    border-radius:14px;
    padding:6px 0;
    border:1px solid #eef0f3;
    max-height: 438px;
    overflow-y: scroll;
    min-height: 438px;
  }
  .cal_item{
    padding:16px 18px; display:flex; gap:12px; align-items:flex-start;
  }
  .cal_item + .cal_item{ border-top:2px dotted var(--cal-dot); }
  .cal_tag{
    color:var(--cal-blue); font-weight:800; min-width:52px;
  }
  .cal_itemmain{ flex:1; }
  .cal_itemtitle a{
    font-weight:800; font-size:18px; line-height:1.2;
  }
  .cal_itemdate{
    margin-top:6px; color:#555; font-size:14px;
  }

  /* 반응형 */
  @media (max-width:980px){
    .cal_grid{ grid-template-columns:1fr; }
	  .cal_panel {
    border: 1px solid #f2f2f2;
    border-radius: 14px;
    padding: 18px;
    background: #fff;
    margin-top: -7px;
}
  }
  @media (max-width:520px){
    body{/* padding: 0; */}
    .cal_yearmonth{ font-size:26px; }
    .cal_navbtn{ width:36px; height:36px; }
    .cal_itemtitle a{ font-size:16px; }
  }
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

#visual .slick-dots{right: 3%;margin-right: 0; }


/* 스크롤 */
#visual .scroll_down{left:5%; margin-left:0; }



/* about */
#about .box_wrap .box {width:calc((100% - 20px) / 3); margin:0 10px 0 0; border-radius:10px; padding:40px; }
#about .box_wrap .box dt {margin-bottom:52px;}
#about .box_wrap .pop_banner {padding: 50px 50px 0 0; bottom:0; right:0; }


}


/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1350px){


/*** Visual ***/
#visual{}
#visual .visual_in .roll .v_txt h2{font-size:60px;}



/* about */
#about .box_wrap .box {margin:0 10px 0 0; border-radius:10px; padding:30px; }
#about .box_wrap .box dt {margin-bottom:52px;}
#about .box_wrap .box:last-of-type {margin:0 30px 0 0; }


#about .box_wrap .pop_banner {padding: 50px 50px 0 0; bottom:0; right:0; }



}


/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){


/* about */
#about .box_wrap {flex-wrap:wrap;}
#about .box_wrap .box_in {flex-direction:column;}
#about .box_wrap .box {width:100%; margin:0 0 10px 0; border-radius:10px; padding:25px; }
#about .box_wrap .box dl {display:flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center;}
#about .box_wrap .box dt {margin-bottom:0; margin-left: auto;}
#about .box_wrap .box:last-of-type {margin:0 0 0 0; }
#about .box_wrap .box dt svg {width:50px;}
#about .box_wrap .box dd {display:flex; align-items: center; gap:20px;}
#about .box_wrap .box dd .tit {font-size:23px; margin-bottom:0; width:120px;}
#about .box_wrap .box dd p {line-height: 161%;letter-spacing: -0.54px;}
#about .box_wrap .box dd p br {display:none;}


#about .box_wrap .pop_banner {padding: 40px 40px 0 0; width:33%;}

#about .box_wrap .pop_banner .eng { right:-42px; top:100px; font-size:1.111rem; }

#about .box_wrap .pop_banner .inner .banner_roll .slick-list {height:100%;}
#about .box_wrap .pop_banner .inner .banner_roll .slick-list .slick-track{height:100%;}

#about .box_wrap .pop_banner .inner .banner_roll .roll {border-radius:0 30px 0 0; height:100%;}
#about .box_wrap .pop_banner .inner .banner_roll .roll dt  {height:100%; }
#about .box_wrap .pop_banner .inner .banner_roll .roll img {max-width:100%; height: 100%;}

#about .box_wrap .pop_banner .p_btn span {width:40px; height:40px; }
#about .box_wrap .pop_banner .p_btn span:before {font-size:23px;}

}



/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/*** css 공통 ***/

/* 버튼 */
.moreBtn{width:150px; height:50px;}
.moreBtn span{line-height: 48px;}



/*** Visual ***/
#visual {height: 700px;}
#visual .visual_in{height: 700px; }
#visual .visual_in .roll{ height: 700px;}
#visual .visual_in .roll .v_txt h2{font-size:2.6rem; letter-spacing: -1.6px;  margin-bottom: 20px;}
#visual .visual_in .roll .v_txt h2 b {font-size:2.6rem; letter-spacing: -1.64px; } 
#visual .visual_in .roll .v_txt p{font-size:20px;letter-spacing:-0.48px; } 

/* 스크롤 */
#visual .scroll_down{gap:8px; font-size:13px; letter-spacing: 0.39px; line-height:100%;  bottom:30px; }
#visual .scroll_down span{width:23px; height:32px; border-radius:20px; }
#visual .scroll_down span:after{width:3.7px; height:6px; border-radius:2px; top:8px; margin-left:-2px; }

#visual .slick-dots{right: 1%;margin-right: 0; }

/* about */
#about .box_wrap {flex-wrap:wrap;}
#about .box_wrap .box_in {flex-direction:column; width: calc(50% - 20px); margin-right:20px;}
#about .box_wrap .box {width:100%; margin:0 0 10px 0; border-radius:10px; padding:20px; }
#about .box_wrap .box dl {display:flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center;}
#about .box_wrap .box dt {margin-bottom:0; margin-left: auto; width:50px}
#about .box_wrap .box:last-of-type {margin:0 0 0 0; }
#about .box_wrap .box dt svg {width:50px;}
#about .box_wrap .box dd {display:flex; align-items: center; gap:10px; align-items: flex-start; flex-direction: column; padding-right:35px; width:calc(100% - 50px);}
#about .box_wrap .box dd .tit {font-size:18px; margin-bottom:0; width:auto;}
#about .box_wrap .box dd p {line-height: 161%;letter-spacing: -0.54px;}
#about .box_wrap .box dd p br {display:none;}


#about .box_wrap .pop_banner {padding: 40px 40px 0 0; width: 50%;}

#about .box_wrap .pop_banner .eng { right:-37px; top:100px; font-size:1.1rem; }

#about .box_wrap .pop_banner .inner .banner_roll .roll {border-radius:0 20px 0 0; }

#about .box_wrap .pop_banner .p_btn span {width:40px; height:40px; }
#about .box_wrap .pop_banner .p_btn span:before {font-size:20px;}


#news { height: 530px;}
#news .tit_area {gap:35px;  margin-bottom:35px;}
#news .tit_area h2 {font-size:2.556rem; letter-spacing: -1.38px; }
#news .tit_area .news_tab ul {gap:25px;}
#news .tit_area .news_tab ul li {font-size:1.167rem; }


#news .rolling{ margin:0; width:calc(100% + 20px);}
#news .rolling .roll {margin-right:20px; border-radius:10px; padding:30px;}

#news .rolling .roll dt {padding-bottom:32px;}
#news .rolling .roll dt h3 { margin-bottom:10px; font-size:1.167rem; letter-spacing: -0.63px; line-height:152.381%;  }
#news .rolling .roll dt p {text-overflow: ellipsis;  font-size:1rem;  }
#news .rolling .roll dd {padding-top:20px;  }
#news .rolling .roll dd p {display:block; font-size:14px; letter-spacing:-0.3px; }
#news .rolling .roll dd p:before {font-size:18px;  left:0 ; top:-1px; }

#news .btn_wrap { right:0; top:-83px;}
#news .btn_wrap .n_btn{gap:5px}
#news .btn_wrap .n_btn span, #news .btn_wrap .n_btn a {width:46px; height:46px; line-height:44px; }
#news .btn_wrap .n_btn span:before, #news .btn_wrap .n_btn a:before {font-size:28px;}


}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
#visual .visual_in .roll .v_bg .bg{width: 100%;height: 100%;background-repeat:no-repeat;background-size: cover;background-position: top;-ms-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);-webkit-transform: scale(1.1,1.1);transform: scale(1.1,1.1);-webkit-transition:transform 3000ms  ease-in-out;-moz-transition:transform 3000ms ease-in-out;-o-transition:transform 3000ms ease-in-out;-ms-transition:transform 3000ms ease-in-out;transition:transform 3000ms ease-in-out;}

/* 버튼 */
.moreBtn{width:120px; height:40px;}
.moreBtn span{line-height: 38px;}


/* 화살표 */
.slick-arrow{width:25px; height:25px;}


/* 도트 */
#visual .slick-dots{right:0; margin-right: 0; }
#visual .slick-dots li{width:15px; height:15px;  margin: 0 10px 0 0;}
#visual .slick-dots li.slick-active:after {width:4px; height:4px;}
#visual .slick-dots li:after{ width:8px; height:8px; }

/*** Visual ***/
#visual {height: 600px;}
#visual .visual_in{height: 600px; }
#visual .visual_in .roll{ height: 600px;}
#visual .visual_in .roll .v_txt h2{font-size:2.2rem; letter-spacing: -0.9px;  margin-bottom: 10px;}
#visual .visual_in .roll .v_txt h2 b {font-size:2.2rem; letter-spacing: -0.9px; } 
#visual .visual_in .roll .v_txt p{font-size:15px;letter-spacing:-0.32px; } 

/* 스크롤 */
#visual .scroll_down{gap:10px; font-size:11px; letter-spacing: 0.33px;  bottom:20px; }
#visual .scroll_down span{width:20px; height:29px; border-radius:15px; }
#visual .scroll_down span:after{width:3.7px; height:6px; border-radius:2px; top:6px; margin-left:-1px; }

/* about */
#about .box_wrap {flex-wrap:wrap;}
#about .box_wrap .box_in {flex-direction:row; width: 100%; margin-right:0;}
#about .box_wrap .box {width: calc((100% - 20px )/ 4);margin:0 10px 0 0;border-radius:10px;padding:20px;}
#about .box_wrap .box dl {display:flex; flex-direction:column; justify-content: center; align-items: center;}
#about .box_wrap .box dt {margin-bottom:0; margin-left: 0; width:auto;}
#about .box_wrap .box:last-of-type {margin:0 0 0 0; }
#about .box_wrap .box dt svg {width:auto; height:50px}
#about .box_wrap .box dd { gap:unset; margin-top:10px; padding-right:0; width:auto;}
#about .box_wrap .box dd .tit {font-size:14px; margin-bottom:0; letter-spacing:-0.28px; }
#about .box_wrap .box dd p:last-of-type {display:none;}


#about .box_wrap .pop_banner {padding: 40px 25px 0 0; width: 100%; bottom:unset; left:unset; position:relative; margin:30px auto 0;}

#about .box_wrap .pop_banner .eng { right:unset; top:9px; font-size:16px; left:20px; transform:rotate(0);}

#about .box_wrap .pop_banner .inner .banner_roll .roll {border-radius:0 10px 0 0; }

#about .box_wrap .pop_banner .p_btn {bottom:unset; top:0; flex-direction:row;}
#about .box_wrap .pop_banner .p_btn span {width:40px; height:40px; border-top:0; border-left:1px solid rgba(255, 255, 255, .15);}
#about .box_wrap .pop_banner .p_btn span:before {font-size:23px;}


#news {/* overflow:hidden; */height: auto;}
#news .tit_area {gap:15px; margin-bottom:30px; flex-direction: column; align-items: flex-start;}
#news .tit_area h2 {font-size:2.31rem; letter-spacing: -1.38px; }
#news .tit_area .news_tab ul {gap:20px;}
#news .tit_area .news_tab ul li {font-size:15px; letter-spacing:-0.45px;}
#news .tit_area .news_tab ul li.focus {letter-spacing:-0.3px;}

#news .rolling .roll dd {padding-top:15px;  }
#news .rolling .roll dd p {display:block; font-size:14px; letter-spacing:-0.3px; padding-left:20px;}

#news .btn_wrap {right:0; top:-66px;}
#news .btn_wrap .n_btn{gap:3px;}
#news .btn_wrap .n_btn span, #news .btn_wrap .n_btn a {width:30px; height:30px; line-height:28px; }
#news .btn_wrap .n_btn span:before, #news .btn_wrap .n_btn a:before {font-size:16px;} 

#news .rolling{ margin:0; width:calc(100% + 10px); }

#news .rolling .roll {margin-right:10px; border-radius:10px; padding:20px;}
#news .rolling .slick-list {overflow:visible}
#news .rolling .roll dt {padding-bottom:20px;}
#news .rolling .roll dt h3 { margin-bottom:8px; font-size:16px; letter-spacing: -0.48px; line-height:150%;  }
#news .rolling .roll dt p font-size:14px; }

}