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

/*헤더*/
header {position:relative; background:#fff; transition: 1s;}
header.nav-down {position:sticky; top:0; z-index:999; width:100%; box-shadow:0 5px 10px rgba(0,0,0,0.1); transition: 1s;}
.nav-up {top: -100px;}
header .w1600 {position:relative; width:1600px; display:flex; justify-content:space-between; gap:0 20px; align-items:center; z-index:105; margin:0 auto; transition:line-height 0.5s;}
header .w1600.height .depth1>li>a {line-height:80px; }
header .w1600.height .depth1>li.on span {line-height:80px; }
header .header_wrap {position:relative;}
header .logo {width:20%; min-width:20%; padding:5px 0 5px 0;}
header .logo img {max-width:100%;}
header .logo a {display:flex; align-items:center;}
header .depth1 {display:flex; justify-content:center; width:60%;}
header .depth1>li {position:relative; text-align:center; padding:0 3%;} 
header .depth1>li:hover span {color:var(--txt-color);}
header .depth1>li>a {display:block; font-size:22px; color:#333333; font-weight:bold; line-height:100px; }
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:100px; white-space:nowrap; transition:line-height 0.5s;}
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; align-items:center; gap:5px; flex-wrap:wrap; justify-content:end; width:20%;}
header .util>li {position:relative;}
header .util>li>a {display:inline-block; font-size:16px; font-weight:500; border-radius:100px; line-height:36px;}  
header .util>li i {font-size:15px; vertical-align:middle; }
header .util>li.login>a {background-color:var(--bg-color); color:var(--y-txt-color); padding:0px 13px;  }
header .util>li.join>a {background:var(--bg-opacity5); color:var(--txt-color); padding:0px 13px;}
header .util>li.search>a {width:36px; background-color:#27272a; color:#fff; text-align:center;}
header .util .quick_my {position:absolute; left:40%; top:30px; 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:100px; 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;  transition: 1s;}
header .menu_bg.top {top:80px;}
header .menu_bg.on { display:block; } /*추가*/
/*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; }

footer {background:#212121;}
footer .b_top {padding:35px 0; border-bottom:1px solid rgba(255,255,255,0.2);}
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 {display:flex; justify-content:center; margin:0 auto;}
.main_visual {position:relative; width:1600px; }
.main_visual::before {position:absolute; right:0; bottom:-30px; content:""; display:block; width:40%; height:30px; background-color:var(--bg-opacity10); clip-path: polygon(0 0, 100% 0, 100% 5%, 0 100%);}
.main_visual .swiper-wrapper {border-radius:0px 50px 0 50px; overflow:hidden;}
.main_visual .main_txt {position:absolute; left:0%; top:45%; transform:translate(0%, -50%); width:100%; padding-left:5%; }
.main_visual .main_txt .b1 {display:block; color:#fff; font-size:30px; font-family:'GM'; font-weight:500; line-height:1.3;}
.main_visual .main_txt .b2 span {display:block; color:#fff; font-size:55px; font-family:'GM'; font-weight:500; margin:25px 0 0px 0; line-height:1.4;}
.main_visual .main_txt .b2 b {font-weight:900; color:#92f6eb;}
.main_visual .main_txt .b1,
.main_visual .main_txt .b2,
.main_visual .main_txt a {overflow: hidden; vertical-align: top;}
.main_visual .main_txt .b1,
.main_visual .main_txt .b2 span {transform: translateY(110%); opacity: 0; transition: transform 2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1s ease;}
.main_visual .swiper-slide img {max-width:100%;} 
.main_visual .swiper-slide-active .main_txt .b1,
.main_visual .swiper-slide-active .main_txt .b2 span,
.main_visual .swiper-slide-active .main_txt a {transform: translateY(0);opacity: 1;}
.main_visual .swiper-slide-active .main_txt .b1 { transition-delay: 0.1s; }
.main_visual .swiper-slide-active .main_txt .b2 span { transition-delay: 0.3s; }
.main_visual .visual_btn {position:absolute; left:5%; bottom:15%; display:flex; align-items:center; gap:0 15px;  z-index:5;}
.main_visual .visual_btn .swiper-pagination {position:initial; }
.main_visual .visual_btn .swiper-pagination-bullet {width:18px; height:18px; opacity:1; background:#fff;}
.main_visual .visual_btn .swiper-pagination-bullet-active {background-color:var(--txt-color);}
.main_visual .visual_btn .swiper-pagination-current {color:#ffac1b;}


.main_top_con {display:flex; justify-content:space-between; align-items:center; gap:70px 5%;  margin:80px 0 80px 0;}
.main_board {width:67%;}
.main_board .notice_top {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; border-bottom:2px solid #000000; padding-bottom:30px;}
.main_board .notice_top button {font-size:30px; color:#000000;}
.main_board .notice_top button {transition: transform 0.6s ease;}
.main_board .notice_top button:hover {transform: rotate(90deg);}
.main_board .main_notice > button {display:none;}
.main_board .title {font-size:30px; font-weight:900; color:#111111;}
.main_board .tab {display:flex; justify-content:space-between; align-items:center; gap:0 30px;}
.main_board .tab ul {display:flex; align-items:center; flex-wrap:wrap; }
.main_board .tab ul li:hover {color:#666;}
.main_board .tab ul li {display:flex; align-items:center; color:#888888; font-weight:bold; font-size:26px; cursor:pointer; }
.main_board .tab ul li::before {content:""; display:inline-block; width:6px; height:6px; background:#cecece; border-radius:50px; margin:0 20px;}
.main_board .tab ul li:first-child::before {display:none;}
.main_board .tab ul li.on {color:var(--txt-color)}

.main_board .list {display:flex; gap:0 5%; padding:30px 0; border-bottom:1px solid #e9e9e9;}
.main_board .list li a {display:flex; flex-direction:column; justify-content:space-between; gap:50px 0;}
.main_board .list li a:hover .t_tt  {text-decoration:underline !important;}
.main_board .list li {width:calc((100% - 10%) / 3);}
.main_board .list li span {display:inline-block; }
.main_board .list li .fix {background-color:#f34538; color:#fff; padding:5px 5px; font-size:13px; font-weight:normal;}
.main_board .list li .notice_title {height:56px; line-height:28px; font-size:20px; color:#222222; font-weight:bold; }
.main_board .list li .con_2 {height:46px; font-size:16px; color:#444444; line-height:23px; margin-top:18px;}
.main_board .list li .date {font-size:14px; color:#666666;}


.main_quick {width:28%; background-color:var(--bg-color); border-radius:20px 0 20px 0; padding:35px 2.5%;}
.main_quick .tit {font-size:24px; font-weight:bold; color:#ffffff; margin-bottom:20px;}
.main_quick .quick {display:flex; gap:20px 3%; flex-wrap:wrap; justify-content:center; }
.main_quick .quick li {width:calc((100% - 6%) / 3); align-items:center;}
.main_quick .quick li a {display:flex; flex-direction:column; gap:10px; justify-content:center; align-items:center;}
.main_quick .quick span {display:flex; align-items:center; justify-content:center; width:70px; height:70px; background-color:rgba(0,0,0,0.1); border-radius:100px; }
.main_quick .quick li a:hover span {background-color:rgba(0,0,0,0.2);}
.main_quick .quick img {width:32px;}
.main_quick .quick p {color:#fff; }

.main_photo {position:relative; overflow:hidden;}
.main_photo .h_tit {display:flex; justify-content:space-between; align-items:center; margin-bottom:25px;}
.main_photo .title {font-size:30px; font-weight:900; color:#000000; }
.main_photo .btn {display:flex; align-items:center; gap:0 5px;}
.main_photo .btn li {display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:#fff; border-radius:100px; font-size:20px; border:1px solid #eee; cursor:pointer;}
.main_photo .btn li:hover {border-color:#ccc;}
.main_photo .btn .more {width:auto;}
.main_photo .btn .more a {font-size:14px; color:#666666; padding:0 10px;}
.main_photo .swiper-container {width:100%; overflow:hidden;}
.main_photo .swiper-container li {overflow:hidden;}
.main_photo .swiper-container li a:hover .img img {transform:translate(-50%, -50%) scale(1.1);}
.main_photo .swiper-container li .img {position:relative; height:180px; border-radius:20px; overflow:hidden;}
.main_photo .swiper-container li img {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); object-fit:cover; width:100%; height:100%; transition: transform 0.4s ease;}
.main_photo .swiper-container li .txt {margin-top:15px; font-size:16px; font-weight:bold; color:#222222; line-height:1.4;}

.main_bottom {margin:80px 0;}
.main_bottom .bg {position:relative; display:flex; gap:30px 20px; align-items:center; justify-content:space-between; padding:8% 5%; background:url('../images/main20/b_visual.webp') no-repeat center center / cover; border-radius:20px;  overflow:hidden;}
.main_bottom .bg::before {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4); }
.main_bottom .txt_wrap {position:relative; z-index:1;}
.main_bottom .t1 {font-size:30px; font-family:'GM'; font-weight:900; margin-bottom:30px; color:#fff; line-height:1.4; word-break:keep-all;}
.main_bottom .t1 b {position:relative; color:#fffbd3; }
.main_bottom .t1 b::before {position:absolute; left:0; bottom:0; content:""; display:block; width:100%; height:40%; background-color:#fffbd3; opacity:0.2;}
.main_bottom .t2 {color:#fff; font-size:20px; line-height:1.4; font-weight:500;}
.main_bottom .b_quick {position:relative; z-index:1; display:flex; gap:10px;}
.main_bottom .b_quick a {display:flex; align-items:center; justify-content:center; width:186px; aspect-ratio:1; clip-path:circle(); background-color:var(--bg-color); color:var(--y-txt-color); line-height:1.4; font-family:'GM'; font-weight:500;}
.main_bottom .b_quick a span {display:flex; flex-direction:column; gap:15px; align-items:center; justify-content:center; width:175px; height:175px; border-radius:100px; border:1px solid rgba(255,255,255,0.5); }
.main_bottom .b_quick a:first-child img {width:70px;}
.main_bottom .b_quick a:last-child img {width:48px;}
.main_bottom .b_quick a:hover img {animation:bell 0.7s ease-in-out;}
.main_bottom .b_quick p {text-align:center;}

@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);}
}


.h_info {position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:15px 3%; width:90%; justify-content:space-around; background-color:var(--bg-color); border-radius:10px; padding:20px; color:var(--y-txt-color); margin:-45px 0 0 auto; z-index:1;}
.h_info .cell {display:flex; align-items:center; gap:0 10px; font-size:26px; font-weight:800;}
.h_info .cell span {display:flex; align-items:center; justify-content:center; width:44px; height:44px; clip-path:cicle(50%); background-color:rgba(0,0,0,0.2); border-radius:100px;  font-size:16px;}
.h_info .call_time {font-size:14px; }
.h_info dl {display:flex; gap:10px; align-items:center; font-size:14px;}
.h_info dl dt {font-weight:900; }
.h_info dl dd {font-weight:500;}
.h_info dl dd a {display:block;}
.h_info dl .sns {display:flex; gap:3px; flex-wrap:wrap; align-items:center;}
.h_info dl .sns img {display:block; width:20px;}





/*공통*/
/*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:blue;}
.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}




/****************************@@@@@@@@@@ 반응형 @@@@@@@@@@****************************/


/****************************@@@@@@@@@@ 1660px 이하@@@@@@@@@@****************************/
@media all and (max-width:1660px) {
header .w1600 {width:100%; padding:0 30px;}

/*메인*/
.main_visual_wrap {padding:0 30px;}
.main_visual {width:100%;}
}

/****************************@@@@@@@@@@ 1460px 이하@@@@@@@@@@****************************/
@media all and (max-width:1460px) {
.w1400 {width:100%; padding:0 30px;}

header .depth1>li>a {line-height:80px; font-size:20px;}
header .depth1>li.on span {line-height:80px;}
header .menu_bg {top:80px;}

.main_visual .main_txt .b1 {font-size:36px;}
.main_visual .main_txt .b2 span {font-size:50px;}


}

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

.main_visual_wrap {width:100%; padding:0;}
.main_visual {width:100%; }
.main_visual .swiper-wrapper {border-radius:0;}

.main_visual .main_txt .b1 {font-size:26px;}
.main_visual .main_txt .b2 span {font-size:42px;}

}


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

/*헤더*/
header {position:sticky; position: -webkit-sticky; left:0; top:0; z-index:999; padding:15px 0; border-bottom:1px solid #e5e5e5;}
header h1 img {max-width:100%;}
header .depth1 {display:none;}
header .util_wrap {display:none;}
header .m_menubtn {display:block; font-size:25px;}
header .util {display:none;}
header .w1540 {padding-top:0;}
header .logo {width:auto; padding:0; max-width:150px;}
header .nbsp {display:none;}

.main_visual .main_txt .b1 {font-size:18px;}
.main_visual .main_txt .b2 span {font-size:32px; }
.main_visual .visual_btn {display:none;}

.main_top_con {flex-wrap:wrap;}
.main_board {width:100%;}
.main_quick {width:100%;}
.main_quick .tit {display:none;}
.main_quick .quick li {width:calc((100% - 15%) / 6);}

.main_bottom .bg {flex-wrap:wrap;}
.main_bottom .txt_wrap {width:100%; text-align:center;}
.main_bottom .b_quick {width:100%; justify-content:center;}
.h_info {width:100%; margin:20px 0 0 0;}
.h_info .cell {width:100%;}
.h_info .call_time {width:100%;}
}

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

header .w1600 {padding:0 15px;}

.main_visual .main_txt {top:50%;}
.main_visual .main_txt .b1 {font-size:15px;}
.main_visual .main_txt .b2 span {font-size:26px; margin:15px 0 0px 0; }
.main_visual::before {display:none;}

.main_top_con {margin:35px 0 45px 0; gap:35px 0;}
.main_board .title {font-size:20px;}
.main_board .tab {width:100%; padding:15px 10px; border-top:2px solid #ddd; border-bottom:2px solid #ddd;}
.main_board .tab ul li {font-size:17px;}
.main_board .tab ul li::before {margin:0 12px; width:4px; height:4px;}
.main_board .notice_top {padding-bottom:15px; border:0; padding-bottom:0; gap:15px;}
.main_board .notice_top button {font-size:16px;}
.main_board .list {padding:15px 0; gap:0 15px; border-bottom:0; padding-bottom:0;}
.main_board .list li {width:calc((100% - 15px) / 2); border:1px solid #e9e9e9;}
.main_board .list li:last-child {display:none;}
.main_board .list li a {gap:30px 0; padding:15px;}
.main_board .list li .notice_title {font-size:16px; height:44px; line-height:22px;}
.main_board .list li .con_2 {font-size:13px; height:38px; line-height:19px; margin-top:15px;}
.main_board .list li .date {font-size:12px;}

.main_quick {padding:25px 20px; border-radius:15px 0 15px 0px;}
.main_quick .quick li {width:calc((100% - 6%) / 3);}
.main_quick .quick span {width:60px; height:60px;}
.main_quick .quick img {width:26px;}
.main_quick .quick p {font-size:14px;}

.main_photo .h_tit {margin-bottom:15px;}
.main_photo .btn li {width:30px; height:30px; font-size:16px;}
.main_photo .title {font-size:20px;}
.main_photo .btn {gap:0 3px;}
.main_photo .btn .more a {font-size:13px;}
.main_photo .swiper-container li .txt {margin-top:10px;}
.main_photo .swiper-container li .img {height:200px; border-radius:15px;}

.main_bottom .bg {border-radius:15px;}
.main_bottom .t1 {font-size:24px;}
.main_bottom .t2 {font-size:16px;}

.h_info {border-radius:15px;}
}

/****************************@@@@@@@@@@ 530px 이하 / 모바일@@@@@@@@@@****************************/
@media all and (max-width:530px) {
/*html {font-size:54%}*/
.w1400 {padding:0 10px;}
header .w1600 {padding:0 10px;}

.main_visual .main_txt .b1 {font-size:13px;}
.main_visual .main_txt .b2 span {font-size:20px; }

.main_photo .swiper-container li .img {height:150px;}

.main_bottom .t1 {font-size:20px;}
.main_bottom .t2 {font-size:14px;}
.main_bottom .b_quick a {width:130px;}
.main_bottom .b_quick a span {width:120px; height:120px;}
.main_bottom .b_quick p {font-size:14px;}
.main_bottom .b_quick a:first-child img {width:50px;}
.main_bottom .b_quick a:last-child img {width:28px;}
.h_info .cell {font-size:20px;}
.h_info .cell span {width:35px; height:35px; font-size:14px;}

.main_bottom {margin:55px 0;}


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

/*모바일메뉴*/
.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) {

}