/* 공통 */
/* c_btn */
#c1_wrap .c_btn {width: 320px; height: 60px; display: flex; align-items: center; justify-content: center; background: #fff; color: #000;overflow: hidden; z-index: 1; position: relative;
border-top: 1px solid #000; border-bottom: 1px solid #000; font-size:17px; font-weight: 400; color:#333; font-family: 'NanumSquare',sans-serif; transition: all .2s ease ;}
#c1_wrap .c_btn::before {content: ""; z-index: -1; position: absolute;background-image: linear-gradient(to right, #2ba8bb, #208898); transition: all .5s; left: 0; top: 0; width: 0; height: 100%;}
#c1_wrap .c_btn .arrow {display: block; width: 24px; height: 1px; position: relative; background: #000; margin-left: 30px; transition: all .4s ease; top:0; left:0;}
#c1_wrap .c_btn .arrow::after {content: ''; position: absolute; display: block; width: 8px;height: 1px;background: #000;right: 0;transform: rotate(43deg);top: -3px;
transition: all .4s ease;}


/*Content CSS*/
#c1_wrap .article {display: flex; flex-direction: row;}
#c1_wrap .article:nth-child(even) {flex-direction: row-reverse; }
#c1_wrap .article > div {width: 50%; height: 600px;}
#c1_wrap .article .img > div {background: url('/img/main/main_01.jpg') 50% 50% no-repeat; background-size:cover; height: 100%; width: 100%;}
#c1_wrap .article .txt {display: flex; align-items: center; justify-content: flex-start;}
#c1_wrap .article .txt > div {padding-left: 190px; width: 650px;}

#c1_wrap .article:nth-child(even) .txt {justify-content: flex-end; }
#c1_wrap .article:nth-child(even) .txt > div {padding-left: 0;  }

/* txt */
#c1_wrap .article .txt .eng {position: relative; z-index: 1; padding-top: 50px ;}
#c1_wrap .article .txt .eng h2 {font-size:30px; font-weight: 600; color:#2ba8bb; display: flex; align-items: center; font-family: 'Montserrat'; }
#c1_wrap .article .txt .eng h2::after {content: ''; display: block ;width: 92px; height: 3px; background-color: #2ba8bb; margin-left: 28px}
#c1_wrap .article .txt .eng h3 {font-size:138px; font-weight: 900; color:rgba(0, 0, 0, 0.2); z-index: -1; position: absolute; left:-50px; bottom: -40px; opacity: .2; font-family: 'Montserrat'; }
#c1_wrap .article .txt .eng h3.fit {letter-spacing: -10px;font-stretch: 90%;}
#c1_wrap .article .txt h1 {font-size:36px; font-weight: 800; color:#000;font-family: 'NanumSquare',sans-serif; margin-top: 50px;}
#c1_wrap .article .txt p {font-size:18px; font-weight: 400; color:#000; line-height: 30px; font-family: 'NanumSquare',sans-serif; margin:20px 0 50px; white-space:nowrap;
word-break: keep-all; }

/* img */
#c1_wrap #c1_article2 .img > div {background-image: url('/img/main/main_02.jpg'); }
#c1_wrap #c1_article3 .img > div {background-image: url('/img/main/main_03.jpg'); }





/* hover animation */
@media screen and (min-width:1025px) {
    #c1_wrap .c_btn:hover {border-color: #fff; color:#fff;}
    #c1_wrap .c_btn:hover::before {width:100%;}
    #c1_wrap .c_btn:hover .arrow, #c1_wrap .c_btn:hover .arrow::after {background-color:#fff;}
}
@media screen and (max-width:1024px) {
    #c1_wrap .c_btn:active {border-color: #fff; color:#fff;}
    #c1_wrap .c_btn:active::before {width:100%;}
    #c1_wrap .c_btn:active .arrow, #c1_wrap .c_btn:active .arrow::after {background-color:#fff;}
}



@media screen and (max-width: 1300px) {
    /* 공통 */
    #c1_wrap .c_inner {width: 100%; padding: 0 80px; }

    /* content */
    #c1_wrap > .article > div {height: auto;}
    #c1_wrap > .article .txt > div, #c1_wrap > .article:nth-child(even) .txt > div {padding:50px 50px 80px; width: 100%;}
    #c1_wrap > .article .txt .eng h3 {font-size:110px; left: 10px; bottom: -30px;}
    #c1_wrap > .article .txt p {white-space: normal; }


}

@media screen and (max-width: 1024px) {
    /* 공통 */
    #c1_wrap .c_inner {width: 100%; padding: 0 50px; }
    #c1_wrap .c_btn {margin:0 auto; width: 240px; height: 55px; font-size:15px; }

    /* content */
    #c1_wrap  {margin-top: 60px; }
    #c1_wrap > .article, #c1_wrap > .article:nth-child(even) {flex-direction: column; }
    #c1_wrap > .article > div {width: 100%; }
    #c1_wrap > .article .img {height: 400px; padding:0 50px; }

    #c1_wrap > .article .txt > div, #c1_wrap > .article:nth-child(even) .txt > div {padding:40px 50px 60px;}
    #c1_wrap > .article .txt {text-align: center; }
    #c1_wrap > .article .txt .eng h3 {left:50%; transform:translateX(-50%); font-size:100px; bottom: -25px;}
    #c1_wrap > .article .txt .eng h2 {display: inline-flex; font-size:24px ;}
    #c1_wrap > .article .txt h1 {font-size:30px; margin-top: 40px ;}
    #c1_wrap > .article .txt p {font-size:15px; line-height: 28px;  margin: 20px 0 40px;}




}

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

}

@media screen and (max-width: 640px) {
    /* 공통*/
    #c1_wrap .c_inner {width: 100%; padding: 0 30px; }

    /* content */
    #c1_wrap > .article .txt > div, #c1_wrap > .article:nth-child(even) .txt > div {padding:30px 30px 60px; }
    #c1_wrap > .article .img {height: 250px; padding:0 30px;}

    #c1_wrap > .article .txt .eng h3 {font-size:70px; bottom: -15px;}
    #c1_wrap > .article .txt .eng h2 {font-size:20px;}
    #c1_wrap .article .txt .eng h2::after {width: 60px; height: 2px; margin-left: 20px; }
    #c1_wrap > .article .txt h1 {margin-top: 30px; font-size:28px ;}
    #c1_wrap > .article .txt p {font-size:14px;  margin:15px 0 35px;}
    #c1_wrap .c_btn {width: 220px; height: 50px; font-size:14px;}
    #c1_wrap .c_btn .arrow {margin-left: 20px; }
}

@media screen and (max-width: 480px) {
    #c1_wrap > .article .img  {height: 200px;}

}

@media screen and (max-width: 375px) {
    /* 공통*/
    #c1_wrap .c_inner  {padding: 0 15px; }


    /* content */
    #c1_wrap > .article .img {padding:0 15px;}
    #c1_wrap > .article .txt > div, #c1_wrap > .article:nth-child(even) .txt > div {padding:20px 15px 50px; }
    #c1_wrap > .article .txt h1  {font-size:26px; margin-top: 25px;}


}



/* 공통 */
#c2_wrap .c_inner {width: 1300px; margin:0 auto; position: relative; }
/* c_btn */
#c2_wrap .c_btn {width: 260px; height: 60px; display: flex; align-items: center; justify-content: center; background:transparent; color: #fff;overflow: hidden; z-index: 1; position: relative;
border-top: 1px solid #fff; border-bottom: 1px solid #fff; font-size:17px; font-weight: 400; color:#fff; font-family: 'NanumSquare',sans-serif; transition: all .2s ease ;}
#c2_wrap .c_btn::before {content: ""; z-index: -1; position: absolute;background-image: linear-gradient(to right, #2ba8bb, #208898); transition: all .5s; left: 0; top: 0; width: 0; height: 100%;}
#c2_wrap .c_btn .arrow {display: block; width: 24px; height: 1px; position: relative; background: #fff; margin-left: 30px; transition: all .4s ease; top:0; left:0;}
#c2_wrap .c_btn .arrow::after {content: ''; position: absolute; display: block; width: 8px;height: 1px;background: #fff;right: 0;transform: rotate(43deg);top: -3px;
transition: all .4s ease;}



/*Content CSS*/
#c2_wrap {text-align: center; padding:180px 0 165px; background: url('/img/main/main_04.jpg') 50% 50% no-repeat; background-size:cover;}
#c2_wrap h1 {font-size:48px; font-weight: 700; color:#fff; line-height: 68px; font-family: 'NanumSquare',sans-serif;}
#c2_wrap p {font-size:18px; font-weight: 400; color:#fff; line-height: 36px; margin:35px 0 60px; font-family: 'NanumSquare',sans-serif;}
#c2_wrap .c_btn {margin:0 auto ;}



/* hover animation */
@media screen and (min-width:1025px) {
    #c2_wrap .c_btn:hover {border-color: transparent; }
    #c2_wrap .c_btn:hover::before {width:100%;}
}
@media screen and (max-width:1024px) {
    #c2_wrap .c_btn:active {border-color: transparent; }
    #c2_wrap .c_btn:active::before {width:100%;}
}

@media screen and (max-width: 1300px) {
    /* 공통 */
    #c2_wrap .c_inner {width: 100%; padding: 0 80px; }

    /* content */

}

@media screen and (max-width: 1024px) {
    /* 공통 */
    #c2_wrap .c_inner {width: 100%; padding: 0 50px; }
    #c2_wrap .c_btn {margin:0 auto; width: 240px; height: 55px; font-size:15px; }

    /* content */
    #c2_wrap {padding:120px 0;}
    #c2_wrap h1 {font-size:35px; line-height: 55px;}
    #c2_wrap p {font-size:16px; line-height: 30px; margin: 20px 0 50px; }



}

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

}

@media screen and (max-width: 640px) {
    /* 공통*/
    #c2_wrap .c_inner {width: 100%; padding: 0 30px; }
    #c2_wrap .c_btn {width: 220px; height: 50px; font-size:14px;}
    #c2_wrap .c_btn .arrow {margin-left: 20px; }

    /* content */
    #c2_wrap {padding:80px 0;}
    #c2_wrap h1 {font-size:22px; line-height: 38px;  word-break: keep-all;}
    #c2_wrap p {font-size:14px; line-height: 26px; margin: 15px 0 40px; word-break: keep-all;}



}

@media screen and (max-width: 480px) {
    #c2_wrap h1 {}
    #c2_wrap p br {display: none;}

}

@media screen and (max-width: 375px) {
    /* 공통*/
    #c2_wrap .c_inner  {padding: 0 15px; }


    /* content */
    #c2_wrap {padding:60px 0;}


}