@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;}


/****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%;
    height: 35vw;bottom: 20%;}
.cont01_text p{font-size: 1.1rem;
    position: absolute;bottom: 5%;
    right: 18.75%;}
.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 47.1%;}
.cont02_img{width: 39.58%;
    position: absolute;right: 12%;}
.cont02_img img{right: -15%;
    opacity: 0;transition: 0.8s;
    width:100%;position:absolute;}
.cont02_img img.show{right: 0;opacity: 1;}
.cont02_text{
    position: absolute;width: 100%;
    height: 35vw;bottom: 20%;}
.cont02_text p{font-size: 1.1rem;
    position: absolute;bottom: 5%;
    left: 18.75%;}
.cont02_text .textline{width: 40%;bottom: 0;
    border-bottom: 2px solid #999;
    position: absolute;}


/****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%;
    height: 35vw;bottom: 20%;}
.cont03_text p{font-size: 1.1rem;
    position: absolute;bottom: 5%;
    right: 18.75%;}
.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 p{right: 16.75%;}
.cont01_text .textline{width: 41%;}
.cont02_img{right: 10%;}
.cont02_text p{left: 16.75%;}
.cont02_text .textline{width: 41%;}
.cont03_img{left: 10%;}
.cont03_text p{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 p{right: 14.75%;}
.cont02_img{right: 8%;}
.cont02_text p{left: 14.75%;}
.cont03_img{left: 8%;}
.cont03_text p{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:1024px){
/****cont01****/
#cont01{padding: 12% 0 59.7%;}
.cont01_img{width: 50%;left: 3%;}
.cont01_text{bottom: 15%;}
.cont01_text p{right: 9.75%;}
.cont01_text .textline{width: 45%;}
/****cont02****/
#cont02{padding: 12% 0 59.7%;}
.cont02_img{width: 50%;right: 3%;}
.cont02_text{bottom: 15%;}
.cont02_text p{left: 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 p{right: 9.75%;}
.cont03_text .textline{width: 45%;}}

@media screen and (max-width:950px){
.cont01_img{left: 2%;}
.cont01_text p{right: 8.75%;}
.cont01_text .textline{width: 47%;} 
.cont02_img{right: 2%;}
.cont02_text p{left: 8.75%;}
.cont02_text .textline{width: 47%;} 
.cont03_img{left: 2%;}
.cont03_text p{right: 8.75%;}
.cont03_text .textline{width: 47%;} 
}
@media screen and (max-width:890px){
.cont01_img{left: 1%;}
.cont01_text p{right: 7.75%;}
.cont01_text .textline{width: 48.5%;} 
.cont02_img{right: 1%;}
.cont02_text p{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){
/****cont01****/
#cont01{padding: 15% 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 p{margin: auto;width: 337px;
    position: static;}
.cont01_text .textline{float: right;
    bottom: auto; margin-top: 3%;
    position: static;width: 85%;}
/****cont02****/
#cont02{padding: 20% 0 0;}
.cont02_img{width: 65%;left: 50%;
    transform: translateX(-50%)}
.cont02_text{
    margin-top: 84%;overflow: hidden;
    height: auto; position: static;}
.cont02_text p{margin: auto;width: 320px;
    position: static;}
.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 p{margin: auto;width: 323px;
    position: static;}
.cont03_text .textline{float: right;
    bottom: auto; margin-top: 3%;
    position: static;width: 85%;}}



@media screen and (max-width:500px){
/****cont01****/
#cont01{padding: 20% 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_img{width: 95%;}
.cont02_text{margin-top: 123%;}
.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){
/****cont01****/
#cont01{padding: 25% 0 0;}
.cont01_img{width: 100%;}
.cont01_text{margin-top: 128%;}
.cont01_text p{font-size: 1.01rem;width: 312px;}
/****cont02****/
#cont02{padding: 38% 0 0;}
.cont02_img{width: 100%;}
.cont02_text p{width: 298px;font-size: 1.01rem;}
.cont02_text{margin-top: 128%;}
/****cont03****/
#cont03{padding: 38% 0 0;}
.cont03_img{width: 100%;}
.cont03_text p{width: 300px;font-size: 1.01rem;}
.cont03_text{padding-bottom: 20%;
    margin-top: 128%;} 
}