/*공통*/
.w1400 {width:1400px; margin:0 auto;}

/*헤더*/
header {position:fixed; left:0; top:0; width:100%; z-index:999;}
.nav-up {top: -80px;}
header.hidd- { visibility:hidden; }
header.not- {background:#fff; box-shadow:0 5px 20px rgba(0,0,0,0.04);}
header.not- a {color:#111;}
header .width {position:relative; display:flex; justify-content:space-between; align-items:center; padding:0 50px; z-index:105}
header .header_wrap {position:relative; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(10px); }
header .header_wrap.bg- {background-color:#fff !important; color:#000 !important; border-bottom:1px solid #ddd; box-shadow:0 5px 10px rgba(0,0,0,0.1); backdrop-filter:none; }
header .header_wrap.bg- .depth1>li>a { color:#000; }
header h1 {width:15%}
header h1 a {display:block;}
header h1 img {max-width:100%;}
header .depth1 {display:flex;  width:70%; justify-content:center; }
header .depth1>li {position:relative; text-align:center; padding:0 3.5%;} 
header .depth1>li:hover span {color:var(--txt-color);}
header .depth1>li>a {display:block; font-size:21px; color:#fff; font-weight:bold; line-height:90px; }
header .depth1>li.on:hover {color:var(--txt-color);}
header .depth1>li.on:hover span::after {display:block; position:absolute; bottom:-1px; content:""; display:block; width:100%; height:3px; background:var(--bg-color);}
header .depth1>li.on span {position:relative; display:block; line-height:90px; white-space:nowrap;  }
header .depth2 {display:none; position:absolute; left:0; /*top:100px; */width:100%; background:#fff; margin-top:1px; padding:15px 0; z-index:101; }
header .depth2:hover { display:block; }
header .depth2.on { display:block }
header .depth2 li a {display:block; font-size:16px; font-weight:500; text-align:center; padding:10px 10px;}
header .depth2 li a:hover {font-weight:600; color:var(--txt-color)}
header .util {display:flex; gap:5px; flex-wrap:wrap; justify-content:end; width:20%;}
header .util > ul {display:flex; align-items:center; border:2px solid var(--bg-color); border-radius:100px; padding:0 5px; background:#fff;}
header .util > ul > li {display:flex; align-items:center; position:relative;}
header .util > ul > li > a {display:flex; align-items:center; color:var(--txt-color); font-size:14px; padding:0 10px; line-height:36px;}
header .util > ul > li::before {content:""; display:inline-block; width:1px; height:6px; background-color:var(--bg-color);}
header .util .search {display:flex; align-items:center; justify-content:center; width:40px; line-height:40px; border-radius:100px; font-size:15px; vertical-align:middle; background-color:var(--bg-color); color:var(--y-bg-color);}
header .util > ul > li:first-child::before {display:none;}
header .util .quick_my {position:absolute; left:40%; top:40px; transform:translate(-40%, 0); min-width:130px; border-radius:5px; background:#fff; padding:10px; box-shadow:0 0 10px rgba(0,0,0,0.1); z-index:88;}
header .util .quick_my li {border-bottom:1px dotted #ddd; }
header .util .quick_my li:last-child {border-bottom:0;}
header .util .quick_my li a {display:block; font-size:14px; color:#555 !important; padding:10px 0; text-align:center;}
header .util .quick_my li a:hover {font-weight:bold;}
header .m_menubtn {display:none;}
header .menu_bg {display:none;position:absolute; top:90px; width:100%; height:260px; background:#fff; border-top:1px solid #ddd; z-index:100; /*transition:height 0.3s ease-in-out;*/ box-shadow:0px 5px 10px rgba(0,0,0,0.05); /*display:none;*/ z-index:101;}
header .menu_bg.on { display:block; } /*추가*/
header .search { text-align:right;}
header .search a {font-size:24px; font-weight:200; color:#fff;}
header .search.on a {color:#333 !important;}
header .util>li .axi-perm-identity {font-size:30px; font-weight:200; color:#fff;}
/*header .menu_bg::after {content:""; display:block; position:absolute; top:90px; width:100%; height:1px; background:#ddd; }*/

header.on a { color:#fff !important; }
header.not- {background-color:#fff; box-shadow:0 5px 20px rgba(0,0,0,0.01);}
header.not- a { color:#111 !important; }
header.on .depth2>li a { color:#333 !important; }
header.not- .depth2>li a { color:#333 !important; }
header.on .depth2 { border:none; }
.header_wrap.bg- .util>li>a { color:#333 !important; }
.header_wrap.bg- .util>li .axi-perm-identity {color:#333 !important; }

footer {background:#212121;}
footer .b_top {display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:20px; padding:35px 0; border-bottom:1px solid rgba(255,255,255,0.2);}
footer .b_top .sns {display:flex; align-items:center; gap:3px; flex-wrap:wrap;}
footer .b_top .sns img {width:25px;}
footer .b_link {display:flex; flex-wrap:wrap; gap:5px 20px;}
footer .b_link li:first-child a {color:#fff;}
footer .b_link a {display:inline-block; color:rgba(255,255,255,0.8); font-size:15px;}
footer .b_bottom {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:30px; padding:30px 0;}
footer .company_info {color:#9d9d9d; font-size:15px; line-height:1.6; font-weight:400;}
footer .b_logo img {max-width:250px;}



/*메인*/
.main_con {overflow:hidden;}

.main_visual_wrap {position:relative; overflow:hidden;}
.main_visual_wrap .swiper-slide img {width:100%; height:100vh; object-fit:cover;}
.main_visual_wrap .swiper-slide-active img { transform:scale(1.05); animation:main-bg-anim 5.5s ease-in-out forwards;}
.main_visual_wrap .visual_btn {position:absolute; bottom:10%; left:50%; transform:translate(-50%, 0); display:flex; gap:10px; width:1640px; z-index:10;}
.main_visual_wrap .visual_btn button {display:flex; align-items:center; justify-content:center; width:50px; height:50px; font-size:26px; font-weight:bold; border:1px solid #fff; border-radius:100px; color:#fff;}
.main_visual .main_txt {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:1640px; }
.main_visual .main_txt .b1 {font-size:76px; color:#fff; font-weight:900; line-height:1.3; opacity:0; transform:translate(0, 40px);  transition:transform 2.5s ease-in-out, opacity 2.5s ease-in-out; font-family: 'YJ';}
.main_visual .main_txt .b2 {font-size:20px; line-height:1.4; color:#fff; font-weight:700; margin-top:30px; opacity:0; transform:translate(0, 35px);  transition:transform 1.3s linear, opacity 2.5s linear; transition-delay:1s; font-weight:500; border-left:3px solid #fff; padding-left:15px;}
.main_visual .swiper-slide {display:flex; justify-content:center;}
.main_visual .swiper-slide-active .b1 {opacity:1; transform:translate(0,0);}
.main_visual .swiper-slide-active .b2 {opacity:1; transform:translate(0,0);}

@keyframes main-bg-anim {
0% {opacity:1; transform:scale(1.05)}
100%  {opacity:1; transform:scale(1)}
}


/*메인 갤러리*/
.board_wrap {display:flex; gap:25px 4%;}
.board_wrap>div {width:calc((100% - 4%) / 2);border:1px solid #dddddd; border-radius:20px; padding:40px;}
.board_wrap .h_tit {display:flex; align-items:center; justify-content:space-between; margin-bottom:25px;}
.board_wrap .h_tit .title {font-size:24px; color:#111111; font-weight:900; }
.board_wrap .h_tit a {display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:3px; color:var(--txt-color); font-weight:bold; background:var(--bg-color); color:#fff;}
.main_photo ul {display:flex; gap:20px;}
.main_photo ul a {display:block;}
.main_photo ul a:hover .img img {transform:translate(-50%, -50%) scale(1.1);}
.main_photo ul li {width:calc((100% - 40px) / 3);}
.main_photo .img {position:relative; padding-bottom:70%; border-radius:10px; overflow:hidden; }
.main_photo .img img {position:absolute; left:50%; top:50%; object-fit:cover; transform:translate(-50%, -50%); width:100%; height:100%; transition: transform 0.4s ease;}
.main_photo .txt p {font-size:18px; color:#333333; line-height:1.4; margin-top:15px;}

/*메인공지사항*/
.main_board {}
.main_board .list > li:first-child { padding-bottom:20px; border-bottom:1px solid #ddd; margin-bottom:20px;}
.main_board .list > li:first-child a {display:flex; gap:0 20px; align-items:center;}
.main_board .list > li:first-child .f_date {width:74px; min-width:74px; border-radius:10px; text-align:center; overflow:hidden; box-shadow:0 0 5px rgba(0,0,0,0.15);}
.main_board .list > li:first-child .f_date .d {background:var(--bg-color); color:var(--y-txt-color);  padding:9px 5px 8px 5px; font-size:15px;}
.main_board .list > li:first-child .f_date .ym {font-size:18px; font-weight:bold; color:var(--txt-color); padding:10px 5px;}
.main_board .list > li:first-child .txt_wrap {width:calc(100% - 74px - 20px)}
.main_board .list > li:first-child .t1 {font-size:20px; font-weight:bold; color:#333333; line-height:1.3;}
.main_board .list > li:first-child .t2 {font-size:14px; font-weight:450; color:#888888; line-height:1.3; margin-top:8px;}
.main_board .list > li:first-child .category {display:inline-block; padding:5px; font-size:13px; background-color:var(--bg-opacity10); color:var(--txt-color); margin-right:10px; vertical-align:middle;}
.main_board .list_li {display:flex; gap:10px; align-items:center; justify-content:space-between; padding:6px 0;}
.main_board .list_li a {display:flex; gap:5px; align-items:center; gap:0 10px ; font-size:18px; line-height:1.4; color:#333333; } 
.main_board .list_li a::before {content:""; display:inline-block; width:4px; height:4px; background-color:var(--bg-color);  flex-shrink:0;}
.main_board .list_li .date {font-size:18px; color:#888888; font-weight:400; flex-shrink:0;}
.main_board .list_li .category {display:inline-block; padding:5px; font-size:13px; background-color:var(--bg-opacity10); color:var(--txt-color); flex-shrink:0;}

/*메인 바로가기*/
.main_quick .title {font-size:28px; font-weight:900; color:#111; text-align:center; margin-bottom:40px;}
.main_quick .title b {color:var(--txt-color);}
.main_quick {margin:60px 0 80px 0;}
.main_quick ul {display:flex; gap:30px 3%; justify-content:space-around; flex-wrap:wrap;}
.main_quick ul li {width:calc((100% - 24%) / 9);}
.main_quick ul a {display:flex; align-items:center; justify-content:cneter; flex-direction:column;}
.main_quick ul .icon {display:flex; align-items:center; justify-content:center; width:100px; height:100px; border:1px solid #dddddd; border-radius:10px; background:#fff;}
.main_quick ul .icon img {.main_quick ul .icon}
.main_quick a:hover .icon img {animation:bell 0.7s ease-in-out;}
.main_quick ul .icon01 img {width:50px;}
.main_quick ul .icon02 img {width:55px;}
.main_quick ul .icon03 img {width:41px;}
.main_quick ul .icon04 img {width:47px;}
.main_quick ul .icon05 img {width:37px;}
.main_quick ul .icon06 img {width:57px;}
.main_quick ul .icon07 img {width:51px;}
.main_quick ul .icon08 img {width:50px;}
.main_quick ul .icon09 img {width:47px;}
.main_quick ul .txt {font-size:18px; color:#222222; line-height:1.2; font-weight:550; text-align:center; margin-top:15px;}

@keyframes bell{
    0%   {transform:rotate(0deg);}
    20%  {transform:rotate(15deg);}
    40%  {transform:rotate(-12deg);}
    60%  {transform:rotate(8deg);}
    80%  {transform:rotate(-5deg);}
    100% {transform:rotate(0deg);}
}

/*메인 문의*/
.main_contact {display:flex; margin:85px 0 60px 0;}
.main_contact > div {padding:30px 30px;}
.main_contact .left {position:relative; display:flex; align-items:center; flex-shrink:0; border-radius:40px 20px 50px 20px; background:var(--gradient); }
.main_contact .left .icon {position:absolute; left:20px; bottom:0; }
.main_contact .left .icon img {width:117px; max-width:117px;}
.main_contact .left .icon div {display:flex;}
.main_contact .left div {display:flex; align-items:center; gap:15px; margin-left:calc(117px + 10px);}
.main_contact .left div span {display:flex; align-items:center; justify-content:center; width:60px; height:60px; background-color:rgba(0,0,0,0.2); border-radius:100px; font-size:23px; color:#fff; font-weight:bold;}
.main_contact .left div dl {display:flex; flex-direction:column; gap:6px;}
.main_contact .left div dl dt {font-size:16px; font-weight:bold; color:#fff;}
.main_contact .left div dl dd {font-weight:900; font-size:30px; color:#fff;}
.main_contact .right {display:flex; flex-wrap:wrap; gap:0px 20px; background-color:#eeeff4; border-radius:0 20px 20px 0; margin-left:-50px; padding-left:80px}
.main_contact .right dl {display:flex; align-items:center;  gap:8px; font-size:16px; color:#444444; line-height:1.4; }
.main_contact .right dl.call_time {width:100%;}
.main_contact .right dl::before {content:""; display:inline-block; flex-shrink:0; width:4px; height:4px; background-color:var(--bg-color);}
.main_contact .right dt {font-weight:bold;}
.main_contact .right dd {}


/*공통*/
/*html {font-size:62.5%}*/

/*모바일메뉴*/
.m_nav {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; }
.m_nav .menu_wrap {position:absolute; right:0; width:80%; background:#fff; height:100%;}
.m_nav .m_menu {height:100%;}
.m_nav .m_menu .m_nav_tab {display:flex; padding:15px 15px 0px 15px; }
.m_nav .m_menu .m_nav_tab li {width:50%;cursor:pointer; border:1px solid #ccc; }
.m_nav .m_menu .m_nav_tab li a {display:block; color:#888; font-size:17px; font-weight:600; text-align:center; padding:15px 0; }
.m_nav .m_nav_top {display:flex; justify-content:space-between; align-items:center; width:100%; border-bottom:1px solid #eee;}
.m_nav .m_nav_top .left {display:flex; align-items:center; width:200%; padding:0 0 0 20px;}
.m_nav .m_nav_top .left span {display:inline-block; margin-left:5px;}
.m_nav .m_nav_top .left li {margin-right:5px; display:flex; flex-wrap:wrap; align-items:center; }
.m_nav .m_nav_top .left a {display:block; font-size:13px; border:1px solid #aaa; padding:5px; border-radius:3px; color:#222; }
.m_nav .m_nav_top .left .join a {border-color:#ddd; color:#888; }
.m_nav .m_nav_top .right {display:flex; align-items:center; justify-content:end; width:100%;}
.m_nav .m_nav_top .right li {font-size:16px; margin:0 0 0 10px; height:100%;}
.m_nav .m_nav_top .right li a {padding:10px;}
.m_nav .m_nav_top .right li button {font-size:24px; background:#333; color:#fff; padding:10px 15px;}
.m_nav .depth1 {height:100%; padding:10px 20px 60px 20px; overflow-y:scroll; }
.m_nav .depth1 li {border-bottom:1px solid #f4f4f4;}
.m_nav .depth1 li a{display:flex; justify-content:space-between; padding:20px 0 20px 10px; }
.m_nav .depth1 li.on>a {color:var(--txt-color);}
.m_nav .depth1 li a {font-size:18px; font-weight:600;}
.m_nav .depth2 { display:none; background:#f6f6f6; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px 0;}
.m_nav .depth1 > li.on .depth2 { display:block; }
.m_nav .depth2 li {}
.m_nav .depth2 li a {font-size:15px; font-weight:400; padding:15px 20px}



/****************************@@@@@@@@@@ 반응형 @@@@@@@@@@****************************/
/****************************@@@@@@@@@@ 1680px 이하@@@@@@@@@@해상도1680****************************/
@media all and (max-width:1680px) {
.main_visual .main_txt {width:100%; padding:0 50px; }
.main_visual_wrap .visual_btn {width:100%; padding:0 50px; }
}


/****************************@@@@@@@@@@ 1460px 이하@@@@@@@@@@****************************/
@media all and (max-width:1460px) {
header .width  {padding:0 30px; }
.main_visual .main_txt {padding:0 30px; }
.main_visual_wrap .visual_btn {padding:0 30px; }

.w1400 {width:100%; padding:0 30px;}
} 

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


}



/****************************@@@@@@@@@@ 1024px 이하 / 태블릿@@@@@@@@@@****************************/
@media all and (max-width:1024px) {
/*공통*/

/*헤더*/
header {position:sticky; position: -webkit-sticky; left:0; top:0; z-index:999; padding:15px 0; border-bottom:1px solid #e5e5e5; background:#fff;}
header h1 img {max-width:120px;}
header .depth1 {display:none;}
header .util,
header .util_wrap {display:none;}
header .m_menubtn {display:block; font-size:25px;}
header .search {display:none;}

header .header_wrap {background:none; backdrop-filter:none;}
header .header_wrap.bg- {border-bottom:0; box-shadow:none;}
.sticky_wrap .nav-down .logo:first-child {display:none !important;}
.sticky_wrap .nav-down .logo {display:block !important;}

.main_con .main_visual img {height:auto;}
.main_visual .main_txt {top:46%;}
.main_visual .main_txt .b1 {font-size:42px !important; line-height:1.3 !important;}
.main_visual .main_txt .b2 {font-size:18px !important; line-height:1.3 !important; margin-top:15px;}
.main_visual_wrap .visual_btn {display:none;}

/*메인 바로가기*/
.main_quick ul {flex-wrap:wrap;}
.main_quick ul li {width:calc((100% - 12%) / 5);}

/**/
.board_wrap {flex-wrap:wrap; gap:24px 0;}
.board_wrap>div {width:100%;}

/**/
.main_contact {flex-wrap:wrap;}
.main_contact .left {width:100%; border-radius:20px 20px 0 0;}
.main_contact .right {width:100%; margin-left:0; padding:20px; border-radius:0 0 20px 20px; gap:10px;}
}

/****************************@@@@@@@@@@ 768px 이하 / 태블릿미니@@@@@@@@@@****************************/
@media all and (max-width:768px) {
.w1400 {padding:0 15px;}
header .width {padding:0 15px} 
header h1 img {max-height:35px;}

/*메인*/

.main_visual .main_txt {top:50%; padding:0 20px;}
.main_visual .main_txt .b1 {font-size:24px !important;}
.main_visual .main_txt .b2 {font-size:12px !important; }
.main_visual_wrap .swiper-pagination_wrap {display:none;}
.main_visual .swiper-slide img {width:180% !important;}

.main_quick {margin:40px 0;}
.main_quick ul {gap:20px 10px;}
.main_quick ul li {width:calc((100% - 20px) / 3);}
.main_quick ul .txt {font-size:15px; margin-top:10px;}
.main_quick ul .icon {width:80px; height:80px;}
.main_quick ul .icon01 img {width:40px;}
.main_quick ul .icon02 img {width:45px;}
.main_quick ul .icon03 img {width:31px;}
.main_quick ul .icon04 img {width:37px;}
.main_quick ul .icon05 img {width:27px;}
.main_quick ul .icon06 img {width:47px;}
.main_quick ul .icon07 img {width:41px;}
.main_quick ul .icon08 img {width:40px;}
.main_quick ul .icon09 img {width:37px;}

.board_wrap .h_tit {margin-bottom:15px;}
.board_wrap .h_tit .title {font-size:18px;}
.board_wrap>div {padding:20px; border-radius:10px;}
.board_wrap .h_tit a {width:26px; height:26px; font-size:14px;}
.main_photo ul {gap:15px;}
.main_photo ul li {width:calc((100% - 15px) / 2)}
.main_photo ul li:last-child {display:none;}
.main_photo .txt p {font-size:15px; margin-top:10px;}

.main_quick .title {font-size:24px;}

.main_board .list > li:first-child {padding-bottom:15px; margin-bottom:15px;}
.main_board .list > li:first-child .f_date {width:auto; min-width:auto}
.main_board .list > li:first-child .t1 {font-size:16px;}
.main_board .list > li:first-child .t2 {font-size:13px; }
.main_board .list > li:first-child .f_date .d {font-size:13px;}
.main_board .list > li:first-child .f_date .ym {font-size:16px;padding:10px 10px;}
.main_board .list_li a {font-size:15px;}
.main_board .list_li .date {font-size:13px;}

.main_contact .right dl {font-size:14px;}

.main_contact .left {border-radius:10px 10px 0 0;}
.main_contact .right {border-radius:0 0 10px 10px; }
}

/****************************@@@@@@@@@@ 530px 이하 / 모바일@@@@@@@@@@****************************/
@media all and (max-width:530px) {
/*html {font-size:54%}*/


footer .b_top {padding:30px 0; }
footer .b_link a {font-size:13px;}
footer .company_info {font-size:13px;}


.main_quick .title {font-size:20px; margin-bottom:25px;}

.main_contact {margin:24px 0;}
.main_contact > div {padding:20px 15px;}
.main_contact .left .icon {display:none;}
.main_contact .left div {margin-left:0;}
.main_contact .left div span {width:45px; height:45px; font-size:18px;}
.main_contact .left div dl dt {font-size:15px;}
.main_contact .left div dl dd {font-size:22px;}
.main_contact .right {padding:20px 15px;}

/*모바일메뉴*/
.m_nav .m_nav_top .left {padding-left:15px}
.m_nav .depth1 {padding:10px 15px 60px 15px}
.m_nav .depth1 li a {padding:18px 0 18px 10px; font-size:17px;}
.m_nav .depth2 li a {padding:10px 15px; font-size:15px;}
}



/****************************@@@@@@@@@@ 380px 이하@@@@@@@@@@****************************/
@media all and (max-width:380px) {
}

/****************************@@@@@@@@@@ 360px 이하@@@@@@@@@@****************************/
@media all and (max-width:360px) {

}