@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 48%;}
.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 li{position: absolute;
    width: 100%; left: 50%;
    transform: translateX(-50%);}
.slide_wrap li img{width: 100%;}
.slide_text{height: 39vw;color: #fff;
    position: absolute;width: 100%;top: 50%;
    left: 50%;transform: translate(-50%,-50%);}
.slide_text>div{width: 50%;}
.slide_text>div h2{font-size: 1.25rem;
     margin-bottom: 1.5em;}
.slide_text>div p{font-size: 1.1rem;
    opacity: 0.7;}
.slide_text .text01{left: 12%; top: 20%;
    margin-bottom: 15%;position: absolute;}
.slide_text .text02{right: 12%; top: 55%;
    text-align: end;position: absolute;}

/****cont01****/
#cont01{width: 100%;overflow: hidden;
    position: relative;padding: 10% 0 47.1%;}
.cont01_img{width: 39.58%;
    position: absolute;left: 12%;}
.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: -10%;width: 50%;margin-top: 69%;}
.cont01_img img:nth-child(2).show{
    opacity: 1;right: 0;}
.cont01_text{text-align: end;
    position: absolute;width: 100%;
    bottom: 20%;}
.cont01_text h2{font-weight: 900;color: #3f3f3f;
    font-size: 1.4rem;margin-bottom: 1.3em;
    font-family: 'Arsenal', sans-serif;}
.cont01_text .text{bottom: 0;
    position: absolute;
    margin-bottom: 2%;right: 18.75%;}
.cont01_text p{font-size: 1.1rem;width: 100%;}
.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: 10% 0 25%;}
.cont02_img{position: absolute;
    bottom: 0;
    width: 100%; text-align: center;}
.cont02_img02{display: none;}
.cont02_img img{vertical-align: middle;}
.cont02_img img+img{margin-left: 5%;}
.cont02_img img:nth-child(1){width: 10%;}
.cont02_img img:nth-child(2){width: 12%;}
.cont02_img img:nth-child(3){width: 12%;}
.cont02_img img:nth-child(4){width: 20%;}
.cont02_text{top: 0;
    width: 100%;position: static;}
.cont02_text h2{font-weight: 900;color: #3f3f3f;
    font-size: 1.4rem;margin-bottom: 1.3em;
    font-family: 'Arsenal', sans-serif;}
.cont02_text .text{margin: 0 0 2% 18.75%;
    position: static;}
.cont02_text p{
    font-size: 1.1rem;width: 100%;}
.cont02_text .textline{
    border-bottom: 2px solid #999;
    position: static;width: 40%;}


/****cont03****/
#cont03{
    width: 100%;overflow: hidden;
    position: relative;padding: 10% 0 47.1%;}
.cont03_img{width: 39.58%;
    position: absolute;left: 12%;}
.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.8s;
    right: -15%;width: 54%;margin-top: 32%;}
.cont03_img img:nth-child(2).show{
    right: 0;opacity: 1;}
.cont03_img img:nth-child(3){
    opacity: 0;transition: 0.6s;
    left: 5%;width: 70%;margin-top: 55%;}
.cont03_img img:nth-child(3).show{
    margin-top: 67.5%;opacity: 1;}
.cont03_text{text-align: end;
    position: absolute;width: 100%;
    bottom: 20%;}
.cont03_text h2{font-weight: 900;color: #3f3f3f;
    font-size: 1.4rem;margin-bottom: 1.3em;
    font-family: 'Arsenal', sans-serif;}
.cont03_text .text{bottom: 0;
    position: absolute;
    margin-bottom: 2%;right: 18.75%;}
.cont03_text p{font-size: 1.1rem;width: 100%;}
.cont03_text .textline{width: 40%;bottom: 0;
    border-bottom: 2px solid #999;
    position: absolute;right: 0;}









/*@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (max-width:1550px){
.cont01_img{left: 10%;}
.cont01_text .text{right: 16.75%;}
.cont01_text .textline{width: 41%;}
.cont02_text .text{margin: 0 0 2% 16.75%;}
.cont02_text .textline{width: 41%;}
.cont03_img{left: 10%;}
.cont03_text .text{right: 16.75%;}
.cont03_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%;}
}
@media screen and (max-width:1300px){
.cont01_text .textline{width: 45%;}
.cont02_text .textline{width: 45%;}
.cont03_text .textline{width: 45%;}
}
@media screen and (max-width:1200px){
.cont01_img{left: 8%;}
.cont01_text .text{right: 14.75%;}
.cont02_text .text{margin: 0 0 2% 14.75%;}
.cont03_img{left: 8%;}
.cont03_text .text{right: 14.75%;}
}
@media screen and (max-width:1115px){
.cont01_text .textline{width: 47%;}  
.cont02_text .textline{width: 47%;}  
.cont03_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 70%;}
.back{width: 100%;left: 51%;}
.slide_wrap{margin-top: 12%;width: 76.5%;}
.slide_text{height: 47vw;}
.slide_text>div{width: 80%;}
.slide_text>div h2{font-size: 1.2rem;
     margin-bottom: 1em;}
.slide_text>div p{font-size: 1.1rem;}
.slide_text .text01{left: 5%; top: 10%;
    margin-bottom: 15%;}
.slide_text .text02{right: 5%; top: 55%;
    text-align: end;} 
/****cont01****/
#cont01{padding: 12% 0 59.7%;}
.cont01_img{width: 50%;left: 3%;}
.cont01_text{bottom: 15%;}
.cont01_text .textline{width: 45%;}
.cont01_text .text{
    margin-bottom: 2%;right: 9.75%;}
/****cont02****/
#cont02{padding: 12% 0 0;}
.cont02_img{display: none;}
.cont02_img02{
    display: block;width: 35%;float: right;
    margin-right: 9.75%;}
.cont02_img02 img{width: 100%;}
.cont02_text{
    position: absolute;top: auto;bottom: 0;}
.cont02_text .text{
    margin: 0 0 2% 9.75%;}
.cont02_text .textline{width: 45%;}
/****cont03****/
#cont03{padding: 12% 0 59.7%;}
.cont03_img{width: 50%;left: 3%;}
.cont03_text{bottom: 15%;}
.cont03_text .text{
    margin-bottom: 2%;right: 9.75%;}
.cont03_text .textline{width: 45%;}}

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


@media screen and (max-width:840px){
#cont_main{padding: 15% 0 60%;}
.back{width: 100%;left: 51%;}
.slide_wrap{margin-top: 12%;width: 76.5%;}
.slide_text{
    overflow-y: scroll;height: 40vw;}
.slide_text::-webkit-scrollbar{
    background: rgba(255, 255, 255, 0);
    width: 15px;}
.slide_text::-webkit-scrollbar-thumb{
    background-color: #ededed;
    border-radius: 10px;
    background-clip: padding-box;
    border: 3px solid transparent;}
.slide_text>div{width: 90%;}
.slide_text>div h2{font-size: 1.1rem;
     margin-bottom: 1em;}
.slide_text>div p{font-size: 1.05rem;}
.slide_text .text01{
    padding: 0 5%;
    position: static;margin-bottom: 7%;}
.slide_text .text02{padding: 0 5% 0;
    position: static;text-align: left;}
/****cont01****/
#cont01{padding: 20% 0 0;}
.cont01_img{
    width: 65%;left: 50%;
    transform: translateX(-50%)}
.cont01_text{text-align: left;
    margin-top: 84%;overflow: hidden;
    height: auto; position: static;}
.cont01_text .text{width: 337px;
    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%;}
/****cont02****/
#cont02{padding: 20% 0 0;}
.cont02_img02{
    float: none;margin-right: auto;
    width: 40%;margin: auto;}
.cont02_text{
    position: static;margin-top: 10%;}
.cont02_text .text{width: 344px;margin: auto;}
.cont02_text h2{
    font-size: 1.3rem;margin-bottom: 1em;}
.cont02_text .textline{
    bottom: auto;margin-top: 3%;
    position: static;width: 85%;}
/****cont03****/
#cont03{padding: 20% 0 0;}
.cont03_img{width: 65%;left: 50%;
    transform: translateX(-50%)}
.cont03_text{text-align: left;
    margin-top: 84%;overflow: hidden;
    height: auto; position: static;}
.cont03_text .text{width: 316px;
    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%;}}



@media screen and (max-width:500px){
#cont_main{padding: 20% 0 63%;}
.back{display: none;}
.slide_wrap{margin-top: 0;width: 100%;}
.slide_text{height:52vw;}
.slide_text>div{width: 85%;margin: auto;}

/****cont01****/
#cont01{padding: 30% 0 0;}
.cont01_img{width: 95%;}
.cont01_text{margin-top: 123%;}
.cont01_text .textline{
     margin-top: 5%;width: 94%;}
/****cont02****/
#cont02{padding: 30% 0 0;}
.cont02_img02{width: 65%;}
.cont02_text{margin-top: 15%;}  
.cont02_text .textline{
    margin-top: 5%;width: 94%;}
/****cont03****/
#cont03{padding: 30% 0 0;}
.cont03_img{width: 95%;}
.cont03_text{padding-bottom: 20%;
    margin-top: 123%;}
.cont03_text .textline{
    margin-top: 5%;width: 94%;}
}

@media screen and (max-width:450px){
#cont_main{padding: 25% 0 63%;}
/****cont01****/
#cont01{padding: 38% 0 0;}
.cont01_img{width: 100%;}
.cont01_text{margin-top: 128%;}
.cont01_text .text{width: 312px;}
.cont01_text p{font-size: 1.01rem;}
.cont01_text h2{
    font-size: 1.25rem;margin-bottom: 0.7em;}
/****cont02****/
#cont02{padding: 38% 0 0;}
.cont02_img02{width: 70%;}
.cont02_text{margin-top: 15%;}  
.cont02_text .text{width: 320px;}
.cont02_text p{font-size: 1.01rem;}
.cont02_text h2{
    font-size: 1.25rem;margin-bottom: 0.7em;}
/****cont03****/
#cont03{padding: 38% 0 0;}
.cont03_img{width: 100%;}
.cont03_text .text{width: 292px;}
.cont03_text p{font-size: 1.01rem;}
.cont03_text{padding-bottom: 20%;margin-top: 128%;}
.cont03_text h2{
    font-size: 1.25rem;margin-bottom: 0.7em;}
}