/* .div01{width:200px; height: 200px; background: #ddd; transition: .3s;}
.div01:hover{transform: rotate(40deg);} */
/* transition-timing-function:ease; */

/* .div01:hover{ animation-name:boxhover; animation-duration: 2s; animation-iteration-count: infinite;}
@keyframes boxhover{
    0% {transform:rotate(0deg);}
    50% {transform:rotate(180deg);}
    100% {transform:rotate(360deg);}
} */

/* .div01{width:200px; height: 200px; background: #ff0000; position: relative;}
.div01::after{content:""; width:0%; height: 0; bottom:0; position: absolute; background: #000ff; transition: .3s; :left:50%;}
.div01:hover:after{width: 100%; left: 0; height: 5px;} */


*{
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-size: 10px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{background: #fff;}
h1{font-weight: 800; font-size: 5.6rem; color:#333;}
h2{font-weight: 700; font-size: 5.4rem; color:#333;}
h3{font-weight: 600; font-size: 2.8rem; color:#0178D5; margin:20px 0px; letter-spacing: -0.8px;}
p{font-weight: 400; font-size: 2.1rem; color:#333; line-height: 3.5rem; letter-spacing: -1.2px; margin-top:30px;}
span{font-weight: 400; font-size: 1.4rem; color:#333;}
ul, li{color:#333; list-style: none;}
a{text-decoration: none;}
.bl{color:#0178D5;}

.mat30{margin-top:30px;}
.btn{width: 200px; height: 48px; background:#fff; color:#333; border-radius: 30px; border:1px solid #333; font-size: 1.6rem; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px 6px; display: flex; align-items: center; justify-content: space-evenly; cursor: pointer;}
.btn:hover img{margin-left:15px; transition: all 0.5s;}

.wrap{}

section div.inner{max-width: 1660px; margin: 0px auto; padding: 100px 30px;}

/* 헤더 + 메인비주얼 */
.header{width:100%; background: url(../images/bg.jpg) left bottom; background-size: cover; overflow: hidden; border-radius: 0 0 0 400px; height: 800px; padding: 35px 120px;}
.back{width: 100%; height: 820px; background: linear-gradient(#0090FF 85%, #1366AC 100%); border-radius: 0 0 0 400px; position: absolute; z-index: -99; margin-left: -10px;}
.back::after{content: ""; display: block; height: 820px; background: #1366AC; position: absolute; z-index: -98; right: -10px; bottom: 0px; width: 30px;}
.header .nav{max-width: 1800px; width: 100%;}
.header .nav .left{display: inline-block;}
.header .nav .left div{float: left;}

.header .nav .left .login { width: 100px; padding: 9px 10px 12px; font-size: 1.5rem; color: #0178D5; background-color: #fff; border-radius: 50px; text-align: center; display: flex; align-items: center; justify-content: space-evenly; }
.header .nav .left .login::before{content: ""; display: inline-block; background: url(../images/person.png) no-repeat; width: 19px;height: 19px;}
.header .nav .left .login:hover{cursor: pointer; background-color: #0178D5; color:#fff; transition: all 0.5s;}

.header .nav .left .login:hover::before {content: ""; display: inline-block; background: url(../images/person_w.png) no-repeat; width: 19px;height: 19px; transition: all 0.8s;}

.header .nav .left .lang{color: #fff; width: 120px; padding: 8px; font-size: 1.6rem; border: 1px solid #fff; border-radius: 50px; display: flex; justify-content: space-evenly; align-items: center;   margin-left: 12px;}
.header .nav .left .lang .icon{width: 20px; height: 20px; display: inline-block;}
.header .nav .left .lang .icon02{width:18px; height: 18px;}

.header ul{float:right; width: 54%; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; line-height: 2;}
.header ul li{float: left;}
.header ul li a{font-weight: 500; font-size: 1.8rem; color:#fff; }
.header ul li a:hover{ transition: all 0.5s;}

.header .visual{clear:both; padding: 150px 0px 0 140px; text-transform: uppercase; }
.header .visual h2{color:#fff; font-size: 5.2rem; line-height: 64px; margin:25px 0 20px 0;}
.header .visual p{color:#fff; font-size: 4.2rem; font-weight: 400;}


main{width:100%; margin: 0 auto;}

.header .visual fieldset {position: relative;margin-top: 40px;width: 360px;height: 64px;border-radius: 50px;border: 4px solid #0079D7;}
.header .visual input.text {padding: 0px 25px;font-size: 18px;width: 290px;height: 56px;color: #333;border: 0;background-color: rgba(255, 255, 255, .7);box-sizing: border-box;border-radius: 50px 0 0 50px;}
.header .visual input.text::placeholder { color: #333; }
.header .visual input.text:focus { outline: none; outline-offset: -2px; }
.header .visual .submit {font: 0 / 0 a;vertical-align: middle;position: absolute;top: -2px;right: -1px;background: url(../images/search.png) no-repeat;background-size: 42px;background-position: center;width: 70px;height: 60px;background-color: #0079D7;border: none;border-radius: 0 50px 50px 0;}




/* 소개 */
.intro{padding: 80px 0px; text-align: center; position: relative;}
.intro::before, .intro::after{content:""; position: absolute; z-index: -99; display: inline-block;}
.intro::before{ background: url(..images/global_text_01.png) no-repeat; right: 0; top: 60px; width: 760px; height: 154px;}
.intro::after{ background: url(../images/global_text_02.png) no-repeat; left: 0; bottom: 50px; width: 779px; height: 232px;}
.intro .btn{margin: 50px auto;}

/* 클리어링하우스 */
.house{ background-color: #f5f5f5; width: 100%; height: auto;}
.house h2{margin-bottom: 50px;}
.house p { width:100%; background: #fff; border-radius: 15px; display: flex; align-items: flex-start; padding: 15px 20px; margin-top: 20px;}
.house p::before{content:""; background: url(../images/check.png) no-repeat; width: 50px; height: 20px; margin-top: 10px; display: inline-block;}

/* 뉴스 */
.news h2{width: 50%; display: inline-block;}
.news .btn{float: right;}
.news .inner ul { display: flex; justify-content: space-between; gap: 1.8%; margin-top: 30px; }
.news .inner ul li{width: 380px; cursor: pointer;}
.news .inner ul li img{width:100%; height: auto;}
.news .inner ul li p{font-weight: 600; font-size: 2.1rem; color:#0178D5; margin-top: 20px;}
.news .inner ul li span{font-weight: 500; font-size: 1.6rem; margin-top:10px; display: inline-block; color:#555;}

/* 이벤트 */
.event{background-color: #F5F5F5; width: 100%; height: auto; padding-bottom: 50px;}
.event .inner{padding-bottom: 30px;}
.event h2{width: 50%; display: inline-block;}

.event .center { position: relative; height: 540px; }
.event .slick-list { height: 540px; padding-top: 50px !important}
.event .center .slick-slide{  width:810px !important; height: 480px; border-radius: 20px; background: #F7F9FA; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; overflow: hidden; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); position: relative; cursor: pointer;}
.event .center .slick-slide .slider_bg {background: rgba(0, 0, 0, .4); position: absolute; z-index: 1; width: 100%; height: 100%;}

.event .center .slick-slide::after{}
.slick-center { top: -30px; position: relative; opacity: 1 !important; }
.slick-center .slider_bg {background: rgba(0, 0, 0, 0) !important;}
.event .center .slick-slide .left, .event .center .slick-slide .right{float: left; height: 100%;}
.event .center .slick-slide .left{max-width:480px; height: auto;}
.event .center .slick-slide .left img{width:100%;}
.event .center .slick-slide .right{padding: 30px; width:calc(810px - 480px);}
.event .center .slick-slide .right .date{float: right; width:80px; height: 80px; border-radius: 20px; background-color: #0178D5; color:#fff; text-align: center; font-weight:bold; font-size: 2.8rem; line-height: 1; padding: 12px;}
.event .center .slick-slide .right .date span.sub{color:#fff; font-weight:bold; font-size: 1.4rem; display: inline-block;}
.event .center .slick-slide .right h3{font-size: 2.4rem; color: #333; line-height: 1.5; margin-top: 50%;}
.event .center .slick-slide .right p.spot{font-size: 1.8rem; color: #888;}

.slick-list{ margin: 0 -35px;}
.slick-slide{ margin: 0 35px;}

.event .slick-arrow {z-index: 1; width: 60px; height: 60px; border: 2px solid #ddd; border-radius: 50px; margin: 10px 25px; opacity: .75; transition: all 0.5s;}
.event .slick-arrow:hover{opacity: 1;}
.slick-next, .slick-prev{position: absolute;  display: block; padding: 0; transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: 0; background: 0 0; font-size: 0; line-height: 0; top: 50%;}
.slick-next { right: 0; }
.slick-prev { left: 0; }
.slick-next:before, .slick-prev:before {content: ""; display: inline-block; width: 13px; height: 20px;}
.slick-prev:before{ background: url(../images/left.png) no-repeat;}
.slick-next:before{ background: url(../images/right.png) no-repeat;}
.event .btn{ margin: 0 auto;}



/* 리소스 */
.resource{width: 100%; height: auto;}
.resource h2{ margin-bottom: 50px;}

.resource .tabbox{width:100%; display: inline-block;} 
.resource .tabbox ul.tab_list{  display: flex; align-items: center; border-bottom: 1px solid #888; justify-content: space-around;}
.resource .tabbox ul.tab_list li{float: left;}
.resource .tabbox ul.tab_list li a{padding: 25px 5px; color:#555; font-size: 2.1rem; letter-spacing: -0.8px;display: inline-block;}
.resource .tabbox ul.tab_list li a:hover{font-weight: bold; color:#0178D5; transition: all 0.1s; border-bottom: 3px solid #0178D5;}
.resource .tabbox ul.tab_list li a.on{font-weight: bold; color:#0178D5; border-bottom: 3px solid #0178D5;}

.resource .tabbox .notice{padding:45px; border-bottom: 1px solid #888;}
.resource .tabbox .notice ul{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3rem; }
.resource .tabbox .notice ul li{width:46%;}
.resource .tabbox .notice p{margin:0px;}
.resource .tabbox .notice p span.text, .resource .tabbox .notice span.date{font-size: 2.1rem; color:#333; font-weight: 500; letter-spacing: -2px;}
.resource .tabbox .notice span.date{float: right; color: #888;;}
.resource .btn{margin: 50px auto;}


/* 풋터 */
.footer{background: #0178D5; width: 100%; display: inline-block;  color:#fff; text-transform: uppercase;border-radius: 30px 30px 0 0;}
.footer div.inner{padding-top:80px;}
.footer .top_box{width: 100%; display: inline-block; border-bottom: 1px solid #eee; padding-bottom: 30px;}
.footer .link{float: left;}
.footer .link a{display: inline-block; float: left;}
.footer .link .link_02{margin-left: 15px;}
.footer .family_site{display: flex; float: right; font-size: 1.6rem; align-items: center; font-weight: 500; letter-spacing: 0.8px; border: 1px solid #FFF; padding: 14px 28px; border-radius: 50px; cursor: pointer; }
.footer .family_site img{ width: 12px; height: 12px; margin-left: 15px; margin-top: 2px; transition: all 0.8s; rotate: 0deg;}
.footer .family_site:hover img{rotate: 180deg;}

.footer .bottom_box{width: 100%; display: inline-block; margin-top: 25px; }
.footer .bottom_box .guide_link{width: 100%;}
.footer .bottom_box .guide_link .link_list{display: inline-block;}
.footer .bottom_box .guide_link .link_list li{float: left;}
.footer .bottom_box .guide_link .link_list li::after{content: ""; display: inline-block; width: 1px; height: 12px; background: #ddd;}
.footer .bottom_box .guide_link .link_list li:last-child::after{display: none;}
.footer .bottom_box .guide_link .link_list li a{font-size:1.6rem; color:#fff; display: inline-block;letter-spacing: 1px; margin:0px 30px;}
.footer .bottom_box .guide_link .link_list li:first-child a{margin-left:0px;}

.footer .bottom_box .sns_box{display: inline-block;float: right;}
.footer .bottom_box .sns_box li{float: left;background: #fff;margin-left: 15px;display: inline-block; border-radius: 30px; padding: 4px;}
.footer .bottom_box .sns_box li:hover{background: #555; transition: all 0.5s;}
.footer .bottom_box .sns_box li a{font-size:1.6rem;display: inline-block;text-indent: -999em;width: 30px; height: 30px;background: url(../images/sns.png) no-repeat;}
.footer .bottom_box .sns_box li:last-child a{margin-right:0px;}
.footer .bottom_box .sns_box .facebook a {background-position: -8px -12px;}
.footer .bottom_box .sns_box .instagram a {background-position: -50px -12px;}
.footer .bottom_box .sns_box .youtube a {background-position: -98px -12px;}
.footer .bottom_box .sns_box .facebook:hover a {background-position: -8px -52px;}
.footer .bottom_box .sns_box .instagram:hover a {background-position: -50px -52px;}
.footer .bottom_box .sns_box .youtube:hover a {background-position: -98px -52px;}

.footer .bottom_box p.copyright{font-size:1.6rem; color:#ddd; letter-spacing: 1px; margin-top: 15px;}

/* 모바일 MENU */
#menuToggle {
    display: block;
    position: fixed;
    top: 30px;
    right: 20px;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
.mm-wrapper--opened #menuToggle{ right: 5px;}
.mm-wrapper--opened #menuToggle span {
    opacity: 1;
    transform: rotate(45deg) translate(-21px, -19px);
    background: #fff;
}
.mm-wrapper--opened #menuToggle span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
.mm-wrapper--opened #menuToggle span:nth-last-child(2) {
    opacity: 1;
    transform: rotate(-45deg) translate(0, 0px);
}







@media screen and (max-width: 1360px) {
    .header{padding: 30px 40px;}
}

@media screen and (max-width: 1300px) {
    .resource .tabbox ul.tab_list li a{font-size: 1.8rem; letter-spacing: -1.5px;}
    .resource .tabbox .notice ul{gap:2rem;}
    .resource .tabbox .notice p span.text, .resource .tabbox .notice span.date{font-size: 1.8rem;}
    .house p::before{margin-right: 10px;}
}

@media screen and (max-width: 1200px) {
    .header .visual{padding: 100px 0px 0 45px;}
    .header .visual h1 img{width:300px;}
    .header .visual h2{font-size: 4.8rem; line-height: 60px; margin: 15px 0;}
    .header .visual p{font-size: 3.6rem; margin-top: 10px;}
    .house p{display: block; padding-bottom: 25px;}
    .house p::before{display: block; margin-bottom: 10px;}
    .resource .tabbox .notice{padding: 25px;}
    .sns_box{float: left; width: 100%; margin: 20px 0px 30px;}
    .footer .bottom_box .sns_box li:first-child{margin-left: 0px;}
}

@media screen and (max-width: 1080px) {
    .back{ height: 760px;}
    .header{height: 740px;}
    .header .visual h2 { font-size: 3.6rem; line-height: 44px; margin: 15px 0;}
    .resource .tabbox ul.tab_list li a{font-size: 1.6rem; letter-spacing: -1.8px;}
    .resource .tabbox .notice p span.text, .resource .tabbox .notice span.date{font-size: 1.6rem;}
    .footer .bottom_box .guide_link .link_list li a{ margin: 0px 18px;}
}
@media screen and (max-width: 1024px) {
    .resource .tabbox ul.tab_list li a:hover{border:none; color: #555; font-weight: inherit;}
}
@media screen and (min-width: 931px) {
    #menuToggle{opacity: 0;}
}
@media screen and (max-width: 930px) {
    .header ul{display:none;}
    #menuToggle{opacity: 1;}
    .resource .tabbox ul.tab_list{gap: 2rem;}
    .resource .tabbox .notice{padding: 28px 45px;}
    .resource .tabbox .notice ul { gap: 1rem; }
    .resource .tabbox .notice ul li{width:100%;}
    .resource .tabbox ul.tab_list li a{ font-size: 1.8rem; word-break: keep-all; text-align: center; padding: 20px 5px;}
    .resource .tabbox ul.tab_list li:first-child a{padding: 31px 5px;}
    .resource .tabbox .notice p span.text, .resource .tabbox .notice span.date { font-size: 1.8rem; }
}

@media screen and (max-width: 860px) {
    .intro{ padding: 30px 0px 20px;}
    .intro::before{width:100%; background-size: 80%; }
    .intro::after{width:100%; background-size: 80%; left: -20px; bottom: -30px;}
    .house p::before{ background-size: 60%;}
    .news{padding-bottom: 80px;}
    .news .inner ul{ gap: 3rem 1rem; flex-wrap: wrap;}
    .news .inner ul li {width: 48%;}
    section div.inner{position: relative;}
    .news .btn{ float: none; position: absolute; bottom: 0px; left: 50%; margin-left: -100px;}
    .footer .bottom_box .guide_link .link_list li a{margin: 0px 8px; font-size: 1.4rem;}
    .footer .bottom_box p.copyright{font-size: 1.4rem; line-height: 2.4rem;}

    .event .btn{margin-top: 18px;}
    .slick-slide{margin: 0 10px;}
    .event .slick-list{height: 570px;}
    .event .center .slick-slide{width: 340px !important; height: 500px; overflow: hidden;}
    .event .center .slick-slide .left{height: 300px; overflow: hidden;}
    .event .center .slick-slide .right{padding: 20px; width: 100%; height: auto;}
    .event .center .slick-slide .right .date{width: 70px; height: 70px; border-radius: 15px;font-size: 2.1rem; padding: 14px 8px;}
    .event .center .slick-slide .right .date span.sub{font-weight: 500;}
    .event .center .slick-slide .right h3{font-size: 1.8rem; margin-top: 15px;}
    .event .center .slick-slide .right p.spot{ font-size: 1.4rem; margin-top: 0px;}
    .resource .tabbox ul.tab_list{overflow-x: auto; gap: 1.5rem;}
    .resource .tabbox ul.tab_list li a{ text-overflow: ellipsis; white-space: nowrap;}
    .resource .tabbox ul.tab_list li:first-child a, .resource .tabbox ul.tab_list li a{ padding: 25px 10px; border:none;}
}

@media screen and (max-width: 720px) {
    .header{height: 680px; border-radius: 0 0 0 240px;}
    .back{height: 700px; border-radius: 0 0 0 240px;}
    .header .visual{padding: 60px 0px 0 40px;}
    .header .visual h1 img{width:240px;}
    .header .visual h2{font-size: 3.2rem; line-height: 40px; margin: 10px 0;}
    .header .visual p{font-size: 3.2rem;}
    
    h2 { font-size: 4.2rem;}
    h3 { font-size: 2.4rem;}
    p{font-size: 1.8rem; line-height: 2.8rem;}
    
    .resource .tabbox .notice{ padding: 30px 20px;}
    .news .inner ul li p{font-size: 1.8rem; line-height: 2.8rem; margin-top: 10px;}
    .footer div.inner{padding-top: 60px;}
    .footer .bottom_box .guide_link .link_list li{width:100%;}
    .footer .bottom_box .guide_link .link_list li a{ margin: 2px 0px;}
    .footer .bottom_box .guide_link .link_list li::after{background: none;}
}
@media screen and (max-width: 600px) {
    .resource .tabbox .notice p span.text{display: inline-block; width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .footer .link{width:100%}
    .footer .family_site{float: left; margin-top: 25px;}
    
}

@media (min-width: 360px) and (max-width: 599px) {
    .back{border-radius: 0 0 0 180px;height: 596px;}
    h2 {font-size: 3.8rem;word-break: keep-all;}
    .header{padding: 20px; border-radius: 0 0 0 180px; height: 580px;}
    .header .visual{padding: 60px 0px 0 20px;}
    .header .visual h2{font-size: 2.8rem; line-height: 36px;}
    .header .visual p{ font-size: 2.8rem;}
    .header .visual fieldset{ margin-top: 30px; width: 280px; height: 58px;}
    .header .visual input.text{padding: 0px 20px; font-size: 16px; width: 280px; height: 50px; border-radius: 50px;}
    .header .visual .submit{ background-size: 36px; width: 60px; height: 54px;}
    .resource h2 { margin-bottom: 20px;}
    section div.inner{ padding: 60px 30px;}
    .resource .tabbox ul.tab_list{ gap: 0.5rem;}
    .resource .tabbox .notice{ padding: 20px 10px;}
    .resource .tabbox .notice p span.text{ width: 220px;}
    .resource .btn{ margin: 30px auto;}
    .event .inner { padding-bottom: 5px; padding-top: 60px;}

}