@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,500,500i&display=swap');
/*font-family: 'Noto Sans KR', sans-serif;*/
*{margin:0; padding:0}
li{list-style:none;margin:0;padding:0;}
img{border: none;}
a{text-decoration:none}
address{font-style:normal;}
iframe{margin:0;padding:0;border:none;}
table{border-spacing: 0;border-collapse: collapse;}
button, input, select, textarea {
    background: transparent;
    font-size: 13px;
    position: relative;
    zoom: 1;
    font-family: 'Lato','NotoSansKR','Noto Sans KR','Apple SD Gothic Neo',sans-serif; border:none
}

.xi-kakaotalk:before {
  content: "\ebee";
}
h1,h2,h3,h4,h5,h6,p,div,section,td,th,label,adddress,a,body,li, button, em{font-family: 'Noto Sans KR', sans-serif; font-size:14px; font-weight:400; color:#000;  font-style:normal;word-break:keep-all !important; letter-spacing:-1px; }

/*scroll*/
.scroll-x{overflow-x:scroll; -ms-overflow-style:none}
.scroll-x::-webkit-scrollbar-track{background-color: #CCC;}
.scroll-x::-webkit-scrollbar	{height: 3px; display:none}
.scroll_block::-webkit-scrollbar{display:block}
.scroll-x::-webkit-scrollbar-thumb{background-color: #999;}

.mob{display:none !important}
.pc{display:block !important}


#header{position:fixed; width:100%; z-index: 99;}
.mob-btn{display:none}
.mob-close{display:none}
.logo{position:relative; padding: 20px; box-sizing: border-box; z-index:99; width: 200px;}
.m-logo{display:none}
.pc-logo{display:block}
.logo img{max-width:100%}
.head-right{position:absolute; right: 20px; top:40px;}
.head-right span{vertical-align: middle; font-weight: bold; font-size: 24px;}
.head-right img{width:40px}
.gnb{position:absolute; width: 100%; top:40px}
.gnb>ul{display:table; margin:0 auto}
.gnb>ul>li{display:table-cell; vertical-align:top; padding:0 30px 30px 30px; box-sizing: border-box; position: relative;}
.gnb>ul>li>a{font-size:26px; text-align: center; padding: 0 0 10px 0; display:block; font-weight: 500;}
.gnb>ul>li p{display:none}
.gnb>ul>li .depth{background-color:rgba(194, 151, 23, 0.8); position: absolute; left:0; width:100%; display:none; margin-top: 13px;}
.gnb>ul>li .depth a{text-align:center; display:block; font-size: 18px; color: #FFF; padding:5px 0}
.gnb>ul>li::after{position:absolute; transition:0.5s; content: ""; width: 0; height: 4px; background-color: #624816; top:-10px; left: 50%; margin-left: -40px;}
.gnb>ul>li:hover::after{width:80px}
.gnb>ul>li .depth a:hover{background-color:#624816}

.banner_wrap{position:relative;}
.banner{position:relative}
.banner img{width:100%}
.slider_list{position:relative;}
.slide-text{position:absolute; top:50%; transform:translateY(-60%); width:95%; left:2.5%}
.slide-text img{width:auto !important; margin-bottom:15px}
.slide-h2{}
.slide-text p{ font-size:60px; color:#FFF; letter-spacing:-1px; line-height:70px; width:100%; text-align: center; font-weight: bold;}
.slide-text p span{color:#cc0000}
.slick-active .slide-text h2{animation-name:mainh2; animation-duration:1s;transform:perspective(500px) rotate(.001deg); animation-fill-mode:forwards; opacity:0;animation-timing-function:linear;animation-delay:0.1s}
.slick-active .slide-text p{animation-name:mainp; animation-duration:1s;transform:perspective(500px) rotate(.001deg); animation-fill-mode:forwards; opacity:0;animation-timing-function:linear; animation-delay:0.2s}
.slick-active .slide-text .slide-more{animation-name:more; animation-duration:1s;transform:perspective(500px) rotate(.001deg); animation-fill-mode:forwards; animation-timing-function:linear; animation-delay:0.6s;opacity:0;}

.list-wrap{position:relative; padding:100px 0;}
.list{position:relative; max-width:1250px; margin:0 auto}
.list>p{text-align:center; font-size: 26px;}
.list>p span{font-weight: bold; font-size: 30px;}

.list>p span{font-size:30px; color: #000; position: relative; display: inline-block;z-index: 1; padding:0 10px}
.list>p span::after{position:absolute; content: ""; background-color: rgba(241,255,139,1); transition: 1.5s; bottom: 0; left: 0; width: 0; height: 20px; z-index: -1;}
.on .list>p span::after{width:100%; }

.list>ul{display:table; margin:50px auto 0}
.list>ul>li{display:table-cell; vertical-align: top; text-align: center; padding: 0 30px; box-sizing: border-box; width:25% }
.list>ul>li img{max-width:100%}
.list>ul>li h2{font-size:20px; color: #624816; font-weight: bold; margin: 10px 0;}
.list>ul>li h2 span{display:block;}

.back-ban-wrap{position:relative; width:100%;}
.back-ban>ul{display:table; width:100%}
.back-ban>ul>li{display:table-cell; padding:180px 0; background-position: center; width: 50%; background-size: cover;}
.back-ban>ul>li:first-child{background-image: url(../image/back-ban1.jpg); }
.back-ban>ul>li:last-child{background-image: url(../image/back-ban2.jpg); }
.back-ban>ul>li h2{font-size: 36px; font-weight: 900; color:#FFF; text-align: center;}
.back-ban>ul>li p{font-size:26px; color:#FFF; text-align: center;}
.back-ban>ul>li p span{font-weight: bold;}
.back-ban>ul>li a{border:2px solid #CCC; color:#FFF; width: 100px; transition: 0.5s; padding: 5px 0; box-sizing: border-box; margin:20px auto 0; display:block; font-size: 16px; text-align: center;}
.back-ban>ul>li a:hover{background-color:#FFF; color:#000}

.online-wrap{position:relative; width:100%; background-color:#f8f8f8; padding: 100px 0;}
.online-txt h2{font-weight: bold; text-align:center; font-size: 34px;}
.online-txt p{text-align:center; font-size: 24px; margin-top: 10px;}
.online-input{position:relative; max-width: 1250px; margin:50px auto 0; padding: 0 50px; box-sizing: border-box;}
.online-input>ul{overflow:hidden}
.online-input>ul>li{float:left; width: 33.33%;}
.online-input>ul>li:nth-child(4) label, .online-input>ul>li:nth-child(5) label{text-align: center;}
.online-input>ul>li:nth-child(4), .online-input>ul>li:nth-child(5), .online-input>ul>li:last-child{width:100%}
.online-input>ul>li>label{font-size: 20px; font-weight: 500; vertical-align: middle; display: inline-block; width: 155px; text-align: right; padding-right: 10px; box-sizing: border-box;}
.online-input>ul>li input[type="text"]{border:1px solid #CCC; background-color:#FFF; padding:10px 5px; box-sizing: border-box;  width: 58%; vertical-align: middle;}
.online-input>ul>li input[type="radio"]{padding:10px 5px; box-sizing: border-box;}
.online-input>ul>li:last-child{margin-top: 20px;}
.online-input>ul>li:last-child label{width:155px; text-align: center;}
.online-input>ul>li:last-child textarea{border:1px solid #CCC; background-color:#FFF; width: 86%; vertical-align: middle; height: 100px;}
.online-agree{text-align:right; margin-top: 10px;}
.online-agree span{background-color:#000; color: #FFF; display: inline-block; margin-left: 10px; padding: 0 5px; box-sizing: border-box; cursor: pointer;}
.online-btn{position:relative; margin-top: 30px;}
.online-btn button{display:block; background-color:#686a6d; color:#FFF; font-size: 26px; text-align: center; width: 200px; padding: 10px 0; margin:0 auto; transition:0.5s}
.online-btn button:hover{background-color:#000}
.input-box{display:inline-block; padding: 20px 0;}
.input-box label{margin-right: 10px; font-size: 16px;}
.input-box input[type="radio"]{margin-right: 2px;}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 500px;
    margin-top: -250px;
    margin-left: -300px;
    padding-top: 46px;
    z-index: 301;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    display:none;
    transition: all 0.3s;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}
#popup .pop-tit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background: #f7f7f7;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}
#popup .pop-tit h3 {
    font-size: 15px;
    color: #000;
    font-weight: 300;
    line-height: 45px;
}
#popup .pop-tit .pop-close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    color: #666;
    background: #eee;
    border-left: 1px solid #ddd; cursor:pointer
}
#popup .pop-wrap {
    height: 100%;
    overflow-y: auto;
    padding: 15px;
    box-sizing: border-box;
}

.back-bot{position:relative; background-image: url(../image/back.jpg); background-position:center; background-repeat: no-repeat; height: 1000px;}
.back-bot figure img{max-width:100%; display: block;}
.back-bot .back-text{position:absolute; width: 95%; left: 2.5%; top:50%; transform: translateY(-50%);}
.back-bot .back-text p{font-size: 35px; font-weight: bold; text-align:center; color:#FFF; text-shadow: 3px 3px 5px #333;}
.back-bot .back-text p span{font-weight: 900; font-size: 40px;}
.back-text a{display:block; width: 130px; padding: 10px 0; text-shadow: none; margin:30px auto 0; transition: 0.5s; text-align: center; background-color:#000; color:#FFF; font-size: 16px; font-weight: bold;}
.back-text a:hover{background-color:#FFF; color:#000}

#footer{background-color:#333; padding: 50px 0 200px;}
.foot-wrap{position:relative; max-width:1250px; margin:0 auto; width:95%}
.foot-wrap h1{display:inline-block; vertical-align: middle;}
.foot-wrap p{color:#FFF; display:inline-block; vertical-align: middle; padding-left: 30px; box-sizing: border-box;}
.foot-wrap p span{}

.quick-wrap{position:fixed; bottom:0; left: 0; width:100%; background-color:#624816; padding: 10px 0; z-index: 999999;}
.quick{position:relative; max-width:1250px; margin:0 auto; width:96%;}
.quick h2{color:#FFF; font-size: 24px; font-weight: bold; margin-bottom:10px}
.quick-input input[type="text"]{background-color: #FFF; border-radius: 5px; margin-left:1%; width: 24%; padding:10px 5px; box-sizing: border-box; border:none;}
.quick-input input:first-child{margin-left:0}
.quick-bot{margin-top: 10px;}
.quick-bot .quick-btn{position:absolute; right: 5px; bottom: 2px;}
.quick-btn button{background-color:#000; color:#FFF; padding:5px 10px; font-size: 16px; margin-left: 5px;}
.quick-bot .tel span{vertical-align:middle; color:#FFF; font-weight: bold; font-size: 22px;}
.quick-bot .tel span img{margin-right: 5px; width: 35px;}

.top-btn{width:35px; color:#FFF; cursor: pointer; position:fixed; right: 6px; bottom: 160px; background-color:rgba(0,0,0,0.8); text-align: center; line-height: 13px; padding: 5px 0; z-index: 9999;}

.sub_banner{position:relative;background-position:center; overflow: hidden; height: 350px;}
.sub_banner>p{transition: 1s;background-position:center}
.sub_banner1>p{background-image:url(../image/sub-banner1.jpg);}
.sub_banner2>p{background-image:url(../image/sub-banner2.jpg);}
.sub_banner3>p{background-image:url(../image/sub-banner3.jpg);}
.sub_banner4>p{background-image:url(../image/sub-banner4.jpg);}

.ani .banner_bg {
    opacity: 1;
    transition: 3s cubic-bezier(0.38, 0.07, 0.51, 0.96);
    transform: scale(1) rotate(0.0001deg);
}

.banner_bg {
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: scale(1.1) rotate(0.0001deg);
    background-position: center;
}

.sub_banner h2{position:absolute; top:50%; transform:translateY(-10%); width:100%; text-align:center; font-size:30px; color:#FFF; font-weight: bold; text-shadow: 3px 3px 5px #333;}
.sub_banner h2 span{display:block}

.con img{width:100%}
.sub-m{display:none !important}
.sub-pc{display:block !important}

@media all and (max-width:1600px){
  .logo{width:200px}
  .gnb>ul>li{padding:0 20px 20px 20px}
  .gnb>ul>li>a{font-size:20px;}
  .gnb>ul>li .depth{margin-top:19px}
  .gnb>ul>li .depth a{font-size:14px}
  .head-right span{font-size:20px}
  .head-right img{width:30px}


}

@media all and (max-width:1300px){
  .list{width:95%; margin:0 auto}
  .list>p{font-size:20px}
  .list>p span{font-size:20px}
}

@media all and (max-width:1250px){
  .input-box{padding:0}
  .online-input>ul>li:nth-child(4) label, .online-input>ul>li:nth-child(5) label{text-align: left;}
}

@media all and (max-width:1200px){
    .list>ul>li{padding:0 15px}
  .list>ul>li figure img{width:230px}
}

@media all and (max-width:1260px){
  .online-input{padding:0; max-width: 750px;}
.online-input>ul>li{float:none; width: 100%;}
.online-input>ul>li:nth-child(n+2){margin-top: 15px;}
.online-input>ul>li>label{text-align:left; font-size: 16px; width: 15%;}
.online-input>ul>li:last-child label{text-align:left; width: 15%;}
.online-input>ul>li input[type="text"]{width:84.5%}
.online-input>ul>li:last-child textarea{width:84.3%}
.online-btn button{font-size:20px}
}

@media all and (max-width:1250px){
  .logo{width:180px}
  .gnb{top:40px}
  .gnb>ul>li{padding:0 10px}
  .gnb>ul>li>a{font-size:18px;}
  .gnb>ul>li .depth a{font-size:13px}
}

@media all and (max-width:1050px){
  .gnb>ul{margin:0 20px 0 auto}
  .back-ban>ul>li h2{font-size:30px}
  .back-ban>ul>li p{font-size:20px}

}
@media all and (max-width:950px){
  .list>ul>li figure img{width:200px}

  .quick-input input[type="text"]{width:49%; margin-left: 1%;}
  .quick-input input:nth-child(2n+1){margin-left:0}
   .quick-input input:nth-child(n+3){margin-top:1%}

   .quick h2{font-size:20px}
   .quick-bot .tel span{font-size:18px}
   .quick-bot .tel span img{width:28px; margin-right: 0;}
   .tel{position:absolute; right: 10px; top: 0;}
   .quick-bot .quick-btn{position:relative; text-align: right; bottom:0; right: 0;}

   .top-btn{bottom:196px}
}

@media all and (max-width:850px){
  .list>ul{display:flex; flex-wrap: wrap; }
  .list>ul>li{display:block; width: 50%;}
  .list>ul>li:nth-child(n+3){margin-top:20px}
  .list>ul>li h2{font-size:14px}

  .back-ban>ul{display:block}
  .back-ban>ul>li{padding:60px 0; display:inline-block; width: 100%;}
}
@media all and (max-width:800px){
.online-input{width:95%; margin:30px auto 0}
.online-input>ul>li>label{width:100%}
.online-input>ul>li:last-child label{width:100%}
.online-input>ul>li input[type="text"]{width:100%}
.online-input>ul>li:last-child textarea{width:100%; box-sizing: border-box;}

.back-bot{height:500px}
.back-bot .back-text p{font-size:26px}

.sub-m{display:block !important}
.sub-pc{display:none !important}

.sub_banner{height:200px}
.sub_banner h2{font-size:24px}
}
@media all and (max-width:750px){
  .list-wrap{padding:150px 0}
  .list>p br{display:none}

  .online-wrap{padding:50px 0}
.online-txt h2{font-size:24px}
.online-txt p{font-size:16px; margin-top:0}

.back-text a{font-size:14px}
}
@media all and (max-width:650px){
  .logo{margin:0; width:150px}
  .mob-close{display:block; position:absolute; right: 10px; top: 10px;}
  .mob-close i{font-size: 20px; background-color:#624816; color: #FFF; width: 20px; height: 20px;}
  .gnb{position:fixed; width: 230px; background-color:#EEE; height:100%; right: -230px; top: 0; z-index: 999; padding-top: 40px;}
  .gnb>ul{display:block; margin:0}
  .gnb>ul>li{display:block; padding:0; border-bottom: 1px solid #DDD;}
  .gnb>ul>li>a{padding:10px 0}
  .pc-gnb{display:none !important}
  .gnb>ul>li p{font-size:16px; text-align: center; padding: 10px 0; font-weight: 500; display:block}
  .gnb>ul>li>a{font-size:16px}
  .gnb>ul>li::after{display:none}
  .gnb>ul>li .depth{position:relative; background-color:#624816; }
  .gnb>ul>li .depth a{color:#FFF; font-size: 16px;}
  .head-right{right:40px}
  .head-right img{width:20px; display:none}
  .mob-btn{display:block; background-color:#624816; position:absolute; right: 5px; top:30px; width: 28px; height: 26px; cursor: pointer; z-index: 9}
  .mob-btn span{background-color:#FFF; width: 70%; height: 2px; display:block; margin-left: 15%; transition:0.5s}
  .mob-btn span:first-child{margin-top:5px; width: 65%;}
  .mob-btn span:nth-child(2){margin-top:5px; width:55%}
  .mob-btn span:last-child{margin-top:5px;}
  .mob-btn:hover span{width:70%}

  .list-wrap{padding:50px 0}
  .list>p{font-size:16px}
  .list>p span{font-size:14px}

  .back-ban>ul>li h2{font-size:24px}
  .back-ban>ul>li p{font-size:16px}

  .online-input>ul>li>label{margin-bottom: 5px;}
  .input-box label{width:20%; display: inline-block; font-size: 14px;}

  .back-bot{height:400px; background-size: cover;}
  .back-bot .back-text p{font-size:18px}

  #footer{padding: 30px 0 210px;}
  .foot-wrap h1{ display:block; text-align: center;}
  .foot-wrap h1 img{width:50px;}
  .foot-wrap p{display:block; padding: 0; text-align: center;}
  .foot-wrap p br{display:none}
  .foot-wrap p>span{display:block}

}


@keyframes highlight {
	0%{width:0}
	100%{width:100%}
 }
@keyframes company {
	0%{width:100%}
	100%{width:0}
 }