@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

/* header */
#header {position:relative;z-index:90;}
#header .contain{height:100px;max-width:1780px;}
#header .sitelogo {position:absolute; top:30px; left:30px; z-index:2}
#header .sitelogo a {display:block;}
#header:hover:after{opacity:1;}

#gnb{padding-right:150px;}
#gnb>ul {display:flex; justify-content:center;margin:0 -45px;margin:0;} 
#gnb>ul>li {position:relative; text-align:center; padding:0 45px;}
#gnb>ul>li>a {position:relative; display:inline-block; color:#2c2c2c; font-size:20px; line-height:100px; font-weight:700;transition:.3s;}
#gnb>ul>li:hover>a{color:var(--pri);}

#gnb .submenu {position:absolute; top:100px; left:0; width:100%; height:0; overflow:hidden; z-index:20;}
#gnb .submenu ul {display:block; padding:15px 0 65px;}
#gnb .submenu ul li {margin-bottom:15px;text-align:center;}
#gnb .submenu ul li:last-child{margin-bottom:0;}
#gnb .submenu ul li a {display:inline-block; color:#505050; font-size:16px; line-height:1.4em; font-weight:500; position:relative;}
#gnb .submenu ul li a:hover {color:var(--pri);}

.submenu-bg {background-color:#fff;position: absolute;left:0;top:100px;right:0;}

#header .btns{display:flex;align-items:center;position: absolute;right:30px;top:50%;transform:translateY(-50%);line-height:1.2em;}
#header .btns .lang{margin-right:30px;}
#header .btns .lang ul{display:flex;margin:0 -11px;}
#header .btns .lang ul li{padding:0 11px;}
#header .btns .lang ul li a{display:inline-block;font-weight:700;color: #878787;}
#header .btns .lang ul li.active a{color: #2c2c2c;}
#header .btns .mem{display:flex;align-items:center;}
#header .btns .mem .btn-join{margin-right:25px;color: #2c2c2c;font-weight:700;}
#header .btns .mem .btn-login{display:flex;justify-content:center;align-items:center;width:80px;height:40px;border-radius:20px;border:2px solid var(--pri);color:var(--pri);font-weight:700;}

.m-member{padding:0 15px;display:flex;align-items:center;}
.m-member .lang{margin-right:0;margin-bottom:5px;display: none;}
.m-member .lang ul{display:flex;margin:0 -5px;}
.m-member .lang ul li{padding:0 5px;}
.m-member .lang ul li a{display:inline-block;font-weight:700;color: #878787;}
.m-member .lang ul li.active a{color: #2c2c2c;}
.m-member .mem{display:flex;align-items:center;}
.m-member .mem .btn-join{margin-right:20px;color: #2c2c2c;font-weight:700;}
.m-member .mem .btn-login{display:flex;justify-content:center;align-items:center;width:60px;height:28px;border-radius:20px;border:2px solid var(--pri);color:var(--pri);font-weight:700;font-size:12px;}

[lang=en] #gnb{padding-right:450px;}
[lang=en] #gnb>ul{margin:0 -30px;justify-content:flex-end;}
[lang=en] #gnb>ul>li{padding:0 30px;}
[lang=en] #gnb>ul>li>a{display:flex;justify-content:center;align-items:center;height:100px;line-height:1.33em;font-size:17px;}


.contain {position:relative; max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea {max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.type2{max-width:1780px;}
#contArea.type2.wide2{max-width:100%;padding:0 60px;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.sub-title{text-align:center;margin:clamp(3.75rem, 3.0921rem + 2.6316vw, 6.25rem) 0 clamp(2.5rem, 2.1711rem + 1.3158vw, 3.75rem);;}
.sub-title h1{color: #2c2c2c;font-size: clamp(1.5rem, 1.2368rem + 1.0526vw, 2.5rem);}

body#main {background:url('/images/main/main-top-bg.jpg')no-repeat 50% 10%/contain;}

/* main */ 
.main-visual {position:relative;padding-top:20px;margin-bottom:160px;}
.main-visual .contain{max-width:1780px;}
.main-visual .sld{position:relative;border-radius:var(--bd32);box-shadow:6px 6px 36px rgba(0,0,0,.12);overflow:hidden;}
.main-visual .item {position:relative;}
.main-visual .scroll {position:absolute; bottom:60px; left:4.6511%;text-align:center; z-index:50; animation:move_up_down 2s linear infinite;} 
@keyframes move_up_down { 
  0%,100%{ 
    transform:translateY(0); 
  } 
  50% { 
    transform:translateY(15px); 
  } 
}

.main-visual .paging-num{position: absolute;right:4.6511%;bottom:50px;display:flex;justify-content:center;align-items:center;width:84px;height:30px;border-radius:15px;background-color:rgba(0,0,0,.14);}
.main-visual .paging-num li {font-size:14px; font-weight:700; letter-spacing:-.06em; color:#fff; line-height:1.2em; display:none;}
.main-visual .paging-num li .bar{display:inline-block;width:1px;height:10px;margin:0 7px;background-color:rgba(255,255,255,.4);}
.main-visual .paging-num li.slick-active {display:block;}

.section{overflow:hidden;padding-bottom:180px;}
.section .contain{max-width:1460px;}
.sec1 ul{display:flex;flex-wrap:wrap;margin:0 -20px -40px;}
.sec1 ul li{width:50%;padding:0 20px;margin-bottom:40px;}
.sec1 ul li .box{display:flex;flex-direction:column;justify-content:space-between;;border-radius:var(--bd32);padding:45px 50px 50px;height:100%;min-height:390px;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;color: #fff;}
.sec1 ul li .box .tt-wrap .tit{margin-bottom:25px;font-weight:700;font-size: clamp(1.125rem, 0.9605rem + 0.6579vw, 1.75rem);line-height:1.2em;line-height:1.43em;}
.sec1 ul li .box .tt-wrap .wrap p{margin-bottom:20px;}
.sec1 ul li .box .tt-wrap .wrap p:last-child{margin-bottom:0;}

[lang=en] .sec1 ul li .box{min-height:530px;}
[lang=en] .sec1 ul li .box .tt-wrap{margin-bottom:55px;}
[lang=en] .sec2 .title .tit{letter-spacing:-.04em;}
[lang=en] .sec2 .title p{max-width:600px;}

.main-btn{display:flex;justify-content:center;align-items:center;width:100px;height:42px;border-radius:21px;background-color:var(--pri);color: #fff;line-height:1.2em;font-weight:800;transition:.3s;}
.main-btn.hv{background-color: #fff;border:2px solid var(--pri);color:var(--pri);}
.main-btn.hv:hover{background-color:var(--pri);color: #fff;}

.tt18{line-height:1.67em;font-size: clamp(0.875rem, 0.8092rem + 0.2632vw, 1.125rem);letter-spacing:-.045em;}

.section.sec2 .contain{max-width:1260px;}
.sec2 .title{margin-bottom:80px;}
.sec2 .title .tit{font-size: clamp(1.5rem, 0.7763rem + 2.8947vw, 4.25rem);font-weight:700;color: #2c2c2c;line-height:1.2em;}
.sec2 .title p{max-width:560px;width:100%;margin:40px 0 0 auto;line-height:1.67em;font-size: clamp(0.9375rem, 0.7895rem + 0.5921vw, 1.5rem);color: #2c2c2c;font-weight:500;}
[lang=en] .sec2 .title p{font-size: clamp(0.875rem, 0.7599rem + 0.4605vw, 1.3125rem);}
.sec2 .sld{position:relative;}
.sec2 .sld .slick-list{overflow:visible;margin:-40px -75px;}
.sec2 .sld .item{padding:40px 75px;}
.sec2 .sld .item a{display:flex;border-radius:var(--bd32);overflow:hidden;box-shadow:6px 6px 36px rgba(0,0,0,.12);}
.sec2 .sld .item a .img{width:640px;}
.sec2 .sld .item a .img .pic {position:relative; height:0; padding-bottom:59.376%; overflow:hidden;}
.sec2 .sld .item a .img .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.sec2 .sld .item a .tt-wrap{display:flex;flex-direction:column;justify-content:space-between;padding:55px 60px 60px;min-width:0;width:1%;flex:1 1 auto;background-color: #f8f8f8;}
.sec2 .sld .item a .tt-wrap .wrap{margin-bottom:20px;}
.sec2 .sld .item a .tt-wrap .wrap .cate{margin-bottom:15px;font-weight:700;line-height:1.2em;}
[lang=en] .sec2 .sld .item a .tt-wrap .wrap .cate br{display:none;}
.sec2 .sld .item a .tt-wrap .wrap .tit{font-size: clamp(1rem, 0.8026rem + 0.7895vw, 1.75rem);/* display: inline-block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; */width:100%;line-height:1.3em;color: #2c2c2c;}
.sec2 .sld .item a:hover .main-btn.hv{background-color:var(--pri);color: #fff;}
.sec2 .dots{margin-top:70px;}
.sec2 .dots .slick-dots{display:flex;justify-content:center;margin:0 -7px;}
.sec2 .dots .slick-dots li{padding:0 7px;}
.sec2 .dots .slick-dots li button{display:block;width:8px;height:8px;border-radius:8px;background-color: #dfdfdf;border:none;transition:.3s;font-size:0;}
.sec2 .dots .slick-dots li.slick-active button{width:34px;background-color:var(--pri);}
.doc-sld-arr .slick-arrow{display:block;width:48px;height:48px;border:1px solid #ccc;border-radius:50%;background-color:#fff;transition:.3s;background-repeat:no-repeat;background-size:9px;background-position:50% 50%;font-size:0;}
.doc-sld-arr .slick-arrow:hover{border-color:#2c2c2c;}
.doc-sld-arr .slick-prev{background-image:url('/images/main/main-prev.png');}
.doc-sld-arr .slick-next{background-image:url('/images/main/main-next.png');}
.doc-sld-arr .slick-prev:hover{background-image:url('/images/main/main-prev-on.png');}
.doc-sld-arr .slick-next:hover{background-image:url('/images/main/main-next-on.png');}

.sec2 .sld .slick-arrow{position: absolute;top:50%;transform:translateY(-50%);z-index:1;}
.sec2 .sld .slick-prev{left:-100px;}
.sec2 .sld .slick-next{right:-100px;}

.sec3 .title{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px;}
.sec3 .title .tit{font-size: clamp(1.5rem, 1.2697rem + 0.9211vw, 2.375rem);font-weight:700;line-height:1.2em;color: #2c2c2c;}
.sec3 .title .doc-sld-arr{display:flex;}
.sec3 .title .doc-sld-arr .slick-prev{margin-right:10px;}
.sec3 .sld .slick-list{margin:0 -25px;}
.sec3 .sld .item{padding:0 25px;}
.sec3 .sld .item a{display:flex;flex-direction:column;justify-content:space-between;padding:45px 40px;min-height:280px;border-radius:var(--bd32);background-color: #f8f8f8;transition:.3s;}
.sec3 .sld .item a .wrap{margin-bottom:20px;}
.sec3 .sld .item a .wrap .cate{margin-bottom:20px;color:var(--pri);font-weight:500;line-height:1.4em;}
.sec3 .sld .item a .wrap .tit{font-size: clamp(1rem, 0.8684rem + 0.5263vw, 1.5rem);line-height:1.5em;color: #2c2c2c;font-weight:500;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.sec3 .sld .item a .date{color: #a8a8a8;font-size: clamp(0.75rem, 0.7171rem + 0.1316vw, 0.875rem);line-height:1.2em;}
.sec3 .sld .item a:hover{background-color:var(--pri);}
.sec3 .sld .item a:hover .wrap .cate{color: #fff;}
.sec3 .sld .item a:hover .wrap .tit{color: #fff;}
.sec3 .sld .item a:hover .date{color: #fff;}

/* sub page */
.pg-title{padding-top:70px;margin-bottom:75px;text-align:center;}
.pg-title .path{display:flex;justify-content:center;margin:0 -22px 30px;}
.pg-title .path p{position:relative;padding:0 22px;color: #878787;font-size:14px;font-weight:500;line-height:1.2em;}
.pg-title .path p.home span{position:relative;padding-left:20px;}
.pg-title .path p.home span:before{content:'';width:12px;height:14px;background:url('/images/common/home.png')no-repeat 0 50%/contain;position: absolute;left:0;top:1px;}
.pg-title .path p:after{content:'';width:6px;height:8px;background:url('/images/common/path-arr.png')no-repeat 50% 50%/contain;position: absolute;right:-3px;top:4px;}
.pg-title .path p:last-child{color: #2c2c2c;}
.pg-title .path p:last-child:after{display:none;}
.pg-title .tit{font-size: clamp(1.5rem, 0.9737rem + 2.1053vw, 3.5rem);line-height:1.2em;color: #2c2c2c;font-weight:800;}

#lnb{position:relative;overflow:hidden;}
#lnb:after{content:'';width:100%;height:1px;background-color: #eee;position: absolute;left:0;bottom:0;}
.lnb{max-width:1200px;width:100%;margin:0 auto;}
.lnb ul{display:flex;}
.lnb ul li{flex:1;}
.lnb ul li a{display:flex;justify-content:center;align-items:center;position:relative;height:100px;padding:0 10px;color: #a8a8a8;font-size: clamp(0.9375rem, 0.8553rem + 0.3289vw, 1.25rem);font-weight:700;line-height:1.4em;text-align:center;}
.lnb ul li.active a{color:var(--pri);}
.lnb ul li.active a:after{content:'';width:100%;height:4px;background-color:var(--pri);position: absolute;left:0;bottom:0;z-index:1;}

.real-cont {padding:140px 0 180px;}
.real-cont.type2{padding-top:0;}

.foot-bnr{padding:40px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;}
.foot-bnr .contain{display:flex;align-items:center;max-width:1460px;}
.foot-bnr .title{display:flex;align-items:center;margin-right:50px;}
.foot-bnr .title .tit{margin-right:40px;font-size: clamp(1.125rem, 1.0921rem + 0.1316vw, 1.25rem);color: #2c2c2c;font-weight:600;line-height:1.2em;}
.foot-bnr .title .arrs{display:flex;}
.foot-bnr .title .arrs .slick-arrow{display:block;width:28px;height:28px;margin-right:5px;border-radius:4px;border:1px solid #ddd;background-repeat:no-repeat;background-size:6px;background-color:transparent;font-size:0;background-position:50% 50%;}
.foot-bnr .title .arrs .slick-arrow:last-child{margin-right:0;}
.foot-bnr .title .arrs .slick-prev{background-image:url('/images/common/bnr-prev.png');}
.foot-bnr .title .arrs .slick-next{background-image:url('/images/common/bnr-next.png');}
.foot-bnr .sld{min-width:0;width:1%;flex:1 1 auto;}
.foot-bnr .sld .slick-list{margin:0 -10px;}
.foot-bnr .sld .item{padding:0 10px;}
.foot-bnr .sld .item .logo{display: block;border:1px solid #ddd;border-radius:10px;padding:10px;}
.foot-bnr .sld .item .logo .pic{position:relative; padding-bottom:25.138%;overflow:hidden;}
.foot-bnr .sld .item .logo .pic img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}

/* footer */
#footer {padding:70px 0;font-size: clamp(0.8125rem, 0.7961rem + 0.0658vw, 0.875rem);line-height:1.4em;}
#footer .contain{display:flex;max-width:1460px;}
#footer .foot-info{min-width:0;width:1%;flex:1 1 auto;margin-right:40px;}
#footer .foot-info .foot-logo{margin-bottom:35px;}
#footer .foot-info address{display:flex;flex-wrap:wrap;font-style:normal;margin:0 -15px -10px;}
#footer .foot-info address dl{display:flex;position:relative;padding:0 15px;margin-bottom:10px;}
#footer .foot-info address dl.wide{width:100%;}
#footer .foot-info address dl:after{content:'';width:1px;height:10px;background-color: #ccc;position: absolute;right:0;top:5px;}
#footer .foot-info address dl.wide:after{display:none;}
#footer .foot-info address dl:last-child:after{display:none;}
#footer .foot-info address dl dt{margin-right:10px;font-weight:700;color: #2c2c2c;}
#footer .foot-info .copy{margin-top:30px;line-height:1.2em;font-size: clamp(0.75rem, 0.7007rem + 0.1974vw, 0.9375rem);color: #2c2c2c;}
#footer .foot-info .copy .bar{margin:0 10px;}
#footer .foot-info .copy a{display:inline-block;}
#footer .foot-menu ul li{margin-bottom:10px;text-align:right;}
#footer .foot-menu ul li:last-child{margin-bottom:0;}
#footer .foot-menu ul li a{display:inline-block;color: #2c2c2c;font-weight:600;}


.quick{position: fixed;right:0;top:18.8775%;z-index:100;transition:.3s;}
.quick .cnt{width:130px;border-radius:var(--bd32) 0 0 var(--bd32);overflow:hidden;box-shadow:10px 10px 20px rgba(0,0,0,.2);}
.quick .cnt .link{position:relative;z-index:1;background-color: #fff;border-radius:var(--bd32) 0 0 var(--bd32);padding:50px 15px;}
.quick .cnt .link ul li{margin-bottom:35px;text-align:center;}
.quick .cnt .link ul li:last-child{margin-bottom:0;}
.quick .cnt .link ul li a .ic{display:flex;justify-content:center;align-items:center;margin-bottom:10px;}
.quick .cnt .link ul li a .ic img.on{display:none;}
.quick .cnt .link ul li a:hover .ic img.off{display:none;}
.quick .cnt .link ul li a:hover .ic img.on{display:block;}
.quick .cnt .link ul li a p{color: #2c2c2c;font-size: clamp(0.8125rem, 0.7961rem + 0.0658vw, 0.875rem);line-height:1.3em;font-weight:600;letter-spacing:-.06em;transition:.3s;}
.quick .cnt .link ul li a:hover p{color:var(--pri);}
.quick .cnt .scroll-top{display:flex;justify-content:center;align-items:center;background-color:var(--pri);height:calc(46px + 32px);padding-top:32px;margin-top:-32px;font-size:0;}
.quick .btn-hover{position: absolute;left:-30px;top:50px;display:flex;justify-content:center;align-items:center;width:30px;height:180px;background:#00a3a8 url('/images/common/q-arr.png')no-repeat 50% 50%/10px;border-radius:16px 0 0 16px;transition:.3s;}

#main .quick .btn-hover{display:none;}

#sub .quick{transform:translateX(130px);}
.quick.active{transform:translateX(0) !important;}
.quick.active .btn-hover{background-image:url('/images/common/q-arr-on.png');}


/* for mobile */
.only-mobile {display:none;}
.btn-m-menu {display:none; position:absolute; top:50%; margin-top:-11px; right:30px; width:30px; height:22px;  text-align:center; text-indent:-9999em; z-index:99; transition:all 0.5s ease-in-out;}
.btn-m-menu span {position:absolute; right:0; top:50%; margin-top:-1px; height:2px; width:23px;background:#242424;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; right:0; width:30px; height:2px; background:#242424; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s;}
.btn-m-menu span:before {top:-10px; transition-property:top, transform;}
.btn-m-menu span:after {bottom:-10px; transition-property:bottom, transform;}
.mobile-navigation {position:fixed; top:0; right:0; padding:20px 0; width:400px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:202;}
.mobile-navigation .home {margin-bottom:20px; padding-left:15px;}
.mobile-navigation .home img {height:23px;}
.mobile-navigation .nav-menu>ul{margin-top:30px;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:12px 15px; display:block; color:#454545; font-size:18px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li a:after{content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #2c2c2c; border-bottom:2px solid #2c2c2c;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#00a3a8}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#00a3a8;}
.mobile-navigation .nav-menu .submenu {display:none; margin:-1px 0 0 0; padding:0 15px 15px;}
.mobile-navigation .nav-menu .submenu>ul:after {content:"";display:block;clear:both;}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; position:relative; padding:5px 15px; color:#454545; font-size:16px; font-weight:400; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu>ul>li>a:after {display:block; content:"";position:absolute; top:14px; left:5px; width:4px; height:4px; background:#dfdfdf; border-radius:50%; transition:.3s ease-in-out;}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover{color:#00a3a8}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after {background:#00a3a8}
.mobile-navigation .close {position:absolute; top:20px; right:15px; width:24px; height:24px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#2c2c2c;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}

.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:201;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0); }
html.menu-opened .mobile-overlay {display:block;}