@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

*{margin: 0;padding: 0;}
html, body{
font-size: 14px; color: #222;
font-family: 'Arsenal', sans-serif;
font-family: 'Noto Sans KR', sans-serif;}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;font-size: 100%;}
ol,ul{list-style: none;}
a{text-decoration: none; color: inherit;}
img,video{vertical-align: bottom;}
address{font-style: normal;}
table{border-collapse: collapse;}
button{background: transparent; border: none;}
.serif{font-family: 'Nanum Myeongjo', serif;}

/****cont main****/
#cont_main{
    width: 100%;overflow: hidden;
    position: relative;padding: 10% 0 9%;}
.back{width: 79.48%;
    left: 50%;position: absolute;
    transform: translateX(-50%);}
.slide_wrap{position: relative;margin-top: 9%;
    width: 62.5%; left: 50%;
    transform: translateX(-50%);}
.slide_wrap button{
    position: absolute; z-index: 10;
    width: 100%;font-size: 0;
    cursor: pointer;top: 97.5%;}
.slide_wrap button.slick-prev{
    background: url(../img/icon/prev.png) no-repeat;right: 52%;position: absolute;
    width: 40px;height: 40px;
    background-size: contain;}
.slide_wrap button.slick-next{
    background: url(../img/icon/next.png) no-repeat;left:52%;position: absolute;
    width: 40px;height: 40px;
    background-size: contain;}
.slide_wrap li{;
    width: 100%;}
.slide_wrap li img{width: 100%;}


/****cont01****/
#cont01{width: 100%;overflow: hidden;
    position: relative;padding: 12% 0 37%;}
.cont01_img{width: 28.65%;
    position: absolute;left: 18.75%;}
.cont01_img img{position: absolute;}
.cont01_img img:nth-child(1){
    width: 100%;left: -15%;
    opacity: 0;transition:0.8s}
.cont01_img img:nth-child(1).show{
    left: 0;opacity: 1;}
.cont01_img img:nth-child(2){
    opacity: 0;transition:0.6s;
    right: -30%;width: 70%;margin-top: 10%;}
.cont01_img img:nth-child(2).show{
    opacity: 1;right: -20%;}
.cont01_text{text-align: end;
    position: absolute;width: 100%;
    bottom: 10%;}
.cont01_text h2{font-weight: 500;color: #3f3f3f;
    font-size: 1.4rem;margin-bottom: 1.3em;}
.cont01_text .text{bottom: 0;position: absolute;
    margin-bottom: 2%;right: 18.75%;}
.cont01_text p{font-size: 1.1rem;width: 100%;}
.cont01_text .viewer{font-size: 1.1rem;
    width: 150px;height: 35px;float: right;
    text-align: center;cursor: pointer;
    line-height: 35px;border-radius: 35px;
    border: 1px solid #222;
    margin-top: 2.5em;transition: 0.3s;}
.cont01_text .viewer:hover{opacity: 0.4}
.cont01_text .textline{width: 40%;bottom: 0;
    border-bottom: 2px solid #999;
    position: absolute;right: 0;}


/****cont02****/
#cont02{width: 100%;overflow: hidden;
    position: relative;padding: 18% 0 37%;}
.cont02_img{width: 28.65%;
    position: absolute;right: 18.75%;}
.cont02_img img{position: absolute;}
.cont02_img img:nth-child(1){
    width: 100%;right: -15%;
    opacity: 0;transition:0.8s}
.cont02_img img:nth-child(1).show{
    right: 0;opacity: 1;}
.cont02_img img:nth-child(2){
    opacity: 0;transition:0.6s;
    left: -30%;width: 70%;margin-top: 10%;}
.cont02_img img:nth-child(2).show{
    opacity: 1;left: -20%;}
.cont02_text{
    position: absolute;width: 100%;
    bottom: 10%;}
.cont02_text h2{font-weight: 500;color: #3f3f3f;
    font-size: 1.4rem;margin-bottom: 1.3em;}
.cont02_text .text{bottom: 0;position: absolute;
    margin-bottom: 2%;left: 18.75%;}
.cont02_text p{font-size: 1.1rem;width: 100%;}
.cont02_text .viewer{font-size: 1.1rem;
    width: 150px;height: 35px;
    text-align: center;cursor: pointer;
    line-height: 35px;border-radius: 35px;
    border: 1px solid #222;
    margin-top: 2.5em;transition: 0.3s;}
.cont02_text .viewer:hover{opacity: 0.4}
.cont02_text .textline{width: 40%;bottom: 0;
    border-bottom: 2px solid #999;
    position: absolute;}


/****cont03****/
#cont03{width: 100%;overflow: hidden;
    position: relative;padding: 18% 0 37%;}
.cont03_img{width: 28.65%;
    position: absolute;left: 18.75%;}
.cont03_img img{position: absolute;}
.cont03_img img:nth-child(1){
    width: 100%;left: -15%;
    opacity: 0;transition:0.8s}
.cont03_img img:nth-child(1).show{
    left: 0;opacity: 1;}
.cont03_img img:nth-child(2){
    opacity: 0;transition:0.6s;
    right: -30%;width: 80%;margin-top: 10%;}
.cont03_img img:nth-child(2).show{
    opacity: 1;right: -20%;}
.cont03_text{text-align: end;
    position: absolute;width: 100%;
    bottom: 10%;}
.cont03_text h2{font-weight: 500;color: #3f3f3f;
    font-size: 1.4rem;margin-bottom: 1.3em;}
.cont03_text .text{bottom: 0;position: absolute;
    margin-bottom: 2%;right: 18.75%;}
.cont03_text p{font-size: 1.1rem;width: 100%;}
.cont03_text .viewer{font-size: 1.1rem;
    width: 150px;height: 35px;float: right;
    text-align: center;cursor: pointer;
    line-height: 35px;border-radius: 35px;
    border: 1px solid #222;
    margin-top: 2.5em;transition: 0.3s;}
.cont03_text .viewer:hover{opacity: 0.4}
.cont03_text .textline{width: 40%;bottom: 0;
    border-bottom: 2px solid #999;
    position: absolute;right: 0;}

/****cont04****/
#cont04{width: 100%;overflow: hidden;
    position: relative;padding: 18% 0 37%;}
.cont04_img{width: 28.65%;
    position: absolute;right: 18.75%;}
.cont04_img img{position: absolute;}
.cont04_img img:nth-child(1){
    width: 100%;right: -15%;
    opacity: 0;transition:0.8s}
.cont04_img img:nth-child(1).show{
    right: 0;opacity: 1;}
.cont04_img img:nth-child(2){
    opacity: 0;transition:0.6s;
    left: -30%;width: 85%;margin-top: 10%;}
.cont04_img img:nth-child(2).show{
    opacity: 1;left: -20%;}
.cont04_text{
    position: absolute;width: 100%;
    bottom: 10%;}
.cont04_text h2{font-weight: 500;color: #3f3f3f;
    font-size: 1.4rem;margin-bottom: 1.3em;}
.cont04_text .text{bottom: 0;position: absolute;
    margin-bottom: 2%;left: 18.75%;}
.cont04_text p{font-size: 1.1rem;width: 100%;}
.cont04_text .viewer{font-size: 1.1rem;
    width: 150px;height: 35px;
    text-align: center;cursor: pointer;
    line-height: 35px;border-radius: 35px;
    border: 1px solid #222;
    margin-top: 2.5em;transition: 0.3s;}
.cont04_text .viewer:hover{opacity: 0.4}
.cont04_text .textline{width: 40%;bottom: 0;
    border-bottom: 2px solid #999;
    position: absolute;}


/********비디오********/
.showoverflow{overflow: hidden;}
.filter{filter: blur(10px);}

#viewer_01{display: none;
    width: 100%;height: 100vh;
    position: fixed;z-index: 100;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);}
#viewer_02{display: none;
    width: 100%;height: 100vh;
    position: fixed;z-index: 100;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);}
#viewer_03{display: none;
    width: 100%;height: 100vh;
    position: fixed;z-index: 100;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);}
#viewer_04{display: none;
    width: 100%;height: 100vh;
    position: fixed;z-index: 100;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);}

.viewer_wrap{
    width: 70%;position: relative;
    left: 50%;top: 50%;
    
    transform: translate(-50%,-50%);}
.viewer_wrap video{
    box-shadow: 0 0 150px 100px rgba(0, 0, 0, 0.2);
    width: 100%;position: absolute;left: 50%;
    top: 50%;transform: translate(-50%,-50%);}
.viewer_wrap .close{
    width: 30px;height: 30px;
    padding-top: 1px;box-sizing: border-box;
    position: absolute; right: 5%;
    border: 1px solid #3f3f3f;
    border-radius: 3px;margin-top: -25%;
    text-align: center;cursor: pointer;}
.viewer_wrap .close img{opacity: 0.9;
    vertical-align:middle;width: 50%;}











/*@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (max-width:1550px){
.cont01_img{left: 16.75%;}
.cont01_text .text{right: 16.75%;}
.cont01_text .textline{width: 41%;}
.cont02_img{right: 16.75%;}
.cont02_text .text{left: 16.75%;}
.cont02_text .textline{width: 41%;}
.cont03_text .text{right: 16.75%;}
.cont03_text .textline{width: 41%;}
.cont04_img{right: 16.75%;}
.cont04_text .text{left: 16.75%;}
.cont04_text .textline{width: 41%;}
}
@media screen and (max-width:1390px){
.cont01_text .textline{width: 43%;}
.cont02_text .textline{width: 43%;}
.cont03_text .textline{width: 43%;}
.cont04_text .textline{width: 43%;}
}
@media screen and (max-width:1300px){
.cont01_text .textline{width: 45%;}
.cont02_text .textline{width: 45%;}
.cont03_text .textline{width: 45%;}
.cont04_text .textline{width: 45%;}
}
@media screen and (max-width:1200px){
.cont01_img{left: 14.75%;}
.cont01_text .text{right: 14.75%;}
.cont02_img{right: 14.75%;}
.cont02_text .text{left: 14.75%;}
.cont03_img{left: 14.75%;}
.cont03_text .text{right: 14.75%;}
.cont04_img{right: 14.75%;}
.cont04_text .text{left: 14.75%;}
}
@media screen and (max-width:1115px){
.cont01_text .textline{width: 47%;}  
.cont02_text .textline{width: 47%;}  
.cont03_text .textline{width: 47%;}  
.cont04_text .textline{width: 47%;}  
}

@media screen and (max-width:1330px){
.slide_text{height: 39vw;}
.slide_text>div{width: 60%;}
.slide_text>div h2{font-size: 1.25rem;
     margin-bottom: 1em;}
.slide_text>div p{font-size: 1.1rem;}
.slide_text .text01{left: 7%; top: 10%;
    margin-bottom: 15%;}
.slide_text .text02{right: 7%; top: 60%;
    text-align: end;}  
}


@media screen and (max-width:1024px){

#cont_main{padding: 12% 0 12%;}
.back{width: 100%;left: 51%;}
.slide_wrap{margin-top: 12%;width: 76.5%;}
/****cont01****/
#cont01{padding: 12% 0 45%;}
.cont01_img{width: 35%;left: 9.75%;}
.cont01_img img:nth-child(1).show{
    left: 0;opacity: 1;}
.cont01_img img:nth-child(2){
    right: -30%;width: 70%;margin-top: 10%;}
.cont01_img img:nth-child(2).show{
    opacity: 1;right: -15%;}    
.cont01_text{bottom: 2%;}
.cont01_text .textline{width: 45%;}
.cont01_text .text{right: 9.75%;}
/****cont02****/
#cont02{padding: 22% 0 45%;}
.cont02_img{width: 35%;right: 9.75%;}
.cont02_img img:nth-child(1).show{
    right: 0;opacity: 1;}
.cont02_img img:nth-child(2){
    left: -30%;width: 70%;margin-top: 10%;}
.cont02_img img:nth-child(2).show{
    opacity: 1;left: -15%;}    
.cont02_text{bottom: 2%;}
.cont02_text .textline{width: 45%;}
.cont02_text .text{left: 9.75%;}
/****cont03****/
#cont03{padding: 22% 0 45%;}
.cont03_img{width: 35%;left: 9.75%;}
.cont03_img img:nth-child(1).show{
    left: 0;opacity: 1;}
.cont03_img img:nth-child(2){
    right: -30%;margin-top: 10%;}
.cont03_img img:nth-child(2).show{
    opacity: 1;right: -15%;}    
.cont03_text{bottom: 2%;}
.cont03_text .textline{width: 45%;}
.cont03_text .text{right: 9.75%;}
/****cont04****/
#cont04{padding: 22% 0 45%;}
.cont04_img{width: 35%;right: 9.75%;}
.cont04_img img:nth-child(1).show{
    right: 0;opacity: 1;}
.cont04_img img:nth-child(2){
    left: -30%;margin-top: 10%;}
.cont04_img img:nth-child(2).show{
    opacity: 1;left: -15%;}    
.cont04_text{bottom: 2%;}
.cont04_text .textline{width: 45%;}
.cont04_text .text{left: 9.75%;}

.viewer_wrap{width: 80%;}
.viewer_wrap .close{
    width: 30px;height: 30px;padding-top: 1px;
    right: 5%;margin-top: -25%;}
.viewer_wrap .close img{width: 50%;}      
    
}

@media screen and (max-width:950px){
.cont01_img{left: 8.75%;}
.cont01_text .text{right: 8.75%;}
.cont01_text .textline{width: 47%;} 
.cont02_img{right: 8.75%;}
.cont02_text .text{left: 8.75%;}
.cont02_text .textline{width: 47%;} 
.cont03_img{left: 8.75%;}
.cont03_text .text{right: 8.75%;}
.cont03_text .textline{width: 47%;}
.cont04_img{right: 8.75%;}
.cont04_text .text{left: 8.75%;}
.cont04_text .textline{width: 47%;} }
@media screen and (max-width:890px){
.cont01_img{left: 7.75%;}
.cont01_text .text{right: 7.75%;}
.cont01_text .textline{width: 48.5%;} 
.cont02_img{right: 7.75%;}
.cont02_text .text{left: 7.75%;}
.cont02_text .textline{width: 48.5%;}
.cont03_img{left: 7.75%;}
.cont03_text p{right: 7.75%;}
.cont03_text .textline{width: 48.5%;} 
.cont04_img{right: 7.75%;}
.cont04_text .text{left: 7.75%;}
.cont04_text .textline{width: 48.5%;}
}

@media screen and (max-width:840px){
#cont_main{padding: 15% 0 12%;}
.back{width: 100%;left: 51%;}
.slide_wrap{margin-top: 12%;width: 76.5%;}
.slide_wrap button.slick-prev{
    width: 35px;height: 35px;}
.slide_wrap button.slick-next{
    width: 35px;height: 35px;}
/****cont01****/
#cont01{padding: 20% 0 0;}
.cont01_img{
    width: 50%;left: 50%;
    transform: translateX(-50%)}
.cont01_text{text-align: left;
    margin-top: 70%;overflow: hidden;
    height: auto; position: static;}
.cont01_text .text{width: 334px;
    position: static; margin: auto;
    margin-bottom: 0;}
.cont01_text h2{
    font-size: 1.3rem;margin-bottom: 1em;}
.cont01_text .textline{float: right;
    bottom: auto; margin-top: 3%;
    position: static;width: 85%;}
.cont01_text .viewer{
    float: none; margin-top: 2em;}
/****cont02****/
#cont02{padding: 25% 0 0;}
.cont02_img{
    width: 50%;left: 50%;
    transform: translateX(-50%)}
.cont02_text{text-align: left;
    margin-top: 70%;overflow: hidden;
    height: auto; position: static;}
.cont02_text .text{width: 337px;
    position: static; margin: auto;
    margin-bottom: 0;}
.cont02_text h2{
    font-size: 1.3rem;margin-bottom: 1em;}
.cont02_text .textline{
    bottom: auto; margin-top: 3%;
    position: static;width: 85%;}
.cont02_text .viewer{margin-top: 2em;}
/****cont03****/
#cont03{padding: 25% 0 0;}
.cont03_img{
    width: 50%;left: 50%;
    transform: translateX(-50%)}
.cont03_text{text-align: left;
    margin-top: 70%;overflow: hidden;
    height: auto; position: static;}
.cont03_text .text{width: 326px;
    position: static; margin: auto;
    margin-bottom: 0;}
.cont03_text h2{
    font-size: 1.3rem;margin-bottom: 1em;}
.cont03_text .textline{float: right;
    bottom: auto; margin-top: 3%;
    position: static;width: 85%;}
.cont03_text .viewer{
    float: none; margin-top: 2em;}
/****cont04****/
#cont04{padding: 25% 0 0;}
.cont04_img{
    width: 50%;left: 50%;
    transform: translateX(-50%)}
.cont04_text{text-align: left;
    margin-top: 70%;overflow: hidden;
    height: auto; position: static;}
.cont04_text .text{width: 315px;
    position: static; margin: auto;
    margin-bottom: 0;}
.cont04_text h2{
    font-size: 1.3rem;margin-bottom: 1em;}
.cont04_text .textline{
    bottom: auto; margin-top: 3%;
    position: static;width: 85%;}
.cont04_text .viewer{margin-top: 2em;}
    
    
.viewer_wrap{width: 90%;}   
    
}



@media screen and (max-width:500px){
#cont_main{padding: 20% 0 12%;}
.back{display: none;}
.slide_wrap{margin-top: 0;width: 100%;}
.slide_wrap button{top: 106%;}

/****cont01****/
#cont01{padding: 35% 0 0;}
.cont01_img{width: 70%;}
.cont01_img img:nth-child(2){
    left: 60%;transform: translate(-50%);
    right: auto;width: 70%;margin-top: 10%;}
.cont01_img img:nth-child(2).show{
    opacity: 1;right: auto; left: 50%;}
.cont01_text{margin-top: 100%;}
.cont01_text .textline{
     margin-top: 5%;width: 94%;}
/****cont02****/
#cont02{padding: 38% 0 0;}
.cont02_img{width: 70%;}
.cont02_img img:nth-child(2){
    left: 40%;transform: translate(-50%);
    right: auto;width: 70%;margin-top: 10%;}
.cont02_img img:nth-child(2).show{
    opacity: 1;right: auto; left: 50%;}
.cont02_text{margin-top: 100%;}
.cont02_text .textline{
     margin-top: 5%;width: 94%;}
/****cont03****/
#cont03{padding: 38% 0 0;}
.cont03_img{width: 70%;}
.cont03_img img:nth-child(2){
    left: 60%;transform: translate(-50%);
    right: auto;margin-top: 10%;}
.cont03_img img:nth-child(2).show{
    opacity: 1;right: auto; left: 50%;}
.cont03_text{margin-top: 100%;}
.cont03_text .textline{
     margin-top: 5%;width: 94%;}
/****cont04****/
#cont04{padding: 38% 0 20%;}
.cont04_img{width: 70%;}
.cont04_img img:nth-child(2){
    left: 40%;transform: translate(-50%);
    right: auto;margin-top: 10%;}
.cont04_img img:nth-child(2).show{
    opacity: 1;right: auto; left: 50%;}
.cont04_text{margin-top: 100%;}
.cont04_text .textline{
     margin-top: 5%;width: 94%;}
    
.viewer_wrap{width: 100%;}  
}


@media screen and (max-width:450px){
#cont_main{padding: 25% 0 15%;}
/****cont01****/
#cont01{padding: 40% 0 0;}
.cont01_img{width: 90%;}
.cont01_text{margin-top: 125%;}
.cont01_text .text{width: 308px;}
.cont01_text p{font-size: 1.01rem;}
.cont01_text h2{
    font-size: 1.25rem;margin-bottom: 0.7em;}
.cont01_text .viewer{
    font-size: 1rem; margin-top: 1.5rem;}
/****cont02****/
#cont02{padding: 45% 0 0;}
.cont02_img{width: 90%;}
.cont02_text{margin-top: 125%;}
.cont02_text .text{width: 312px;}
.cont02_text p{font-size: 1.01rem;}
.cont02_text h2{
    font-size: 1.25rem;margin-bottom: 0.7em;}
.cont02_text .viewer{
    font-size: 1rem; margin-top: 1.5rem;}
/****cont03****/
#cont03{padding: 45% 0 0;}
.cont03_img{width: 90%;}
.cont03_text{margin-top: 125%;}
.cont03_text .text{width: 302px}
.cont03_text p{font-size: 1.01rem;}
.cont03_text h2{
    font-size: 1.25rem;margin-bottom: 0.7em;}
.cont03_text .viewer{
    font-size: 1rem; margin-top: 1.5rem;}
/****cont04****/
#cont04{padding: 45% 0 25%;}
.cont04_img{width: 90%;}
.cont04_text{margin-top: 125%;}
.cont04_text .text{width: 288px;}
.cont04_text p{font-size: 1.01rem;}
.cont04_text h2{
    font-size: 1.25rem;margin-bottom: 0.7em;}
.cont04_text .viewer{
    font-size: 1rem; margin-top: 1.5rem;}
}