/* 메인1 */
#main1 { overflow: hidden; padding: 160px 0; background: url(/image/main/main1_bg.jpg) no-repeat center/cover; background-attachment: fixed; }
#main1 .contents { display: flex; flex-wrap: nowrap; }
#main1 .contents > li { position: relative; width: 50%; }
#main1 .contents .left .txtbox { position: relative; top: 50%; transform: translateY(-50%); }
#main1 .contents .left .txtbox .txt1 { font-weight: 700; font-size: 40px; color: #376092; }
#main1 .contents .left .txtbox .txt2 { margin: 50px 0; font-weight: 500; font-size: 18px; color: #303030; line-height: 1.6; }
#main1 .contents .left .txtbox .txt2 span { font-weight: 700; }
#main1 .contents .left .txtbox a { position: relative; display: inline-block; border: 2px solid #376092; transition: background-color 0.4s; }
#main1 .contents .left .txtbox a span { padding: 17px 70px; display: block; position: relative; text-align: center; font-weight: 600; font-size: 18px; color: #376092; }
#main1 .contents .left .txtbox a img { display: inline-block; position: absolute; top: 48%; transform: translateY(-50%); right: 20px; width: 25px; }
#main1 .contents .left .txtbox a .img1 { display: block; }
#main1 .contents .left .txtbox a .img2 { display: none; }
#main1 .contents .right { padding-left: 30px; text-align: right; }
#main1 .contents .right img { width: 560px; }

#main1 .contents .left .txtbox a:hover { background-color: rgba(0, 0, 0, 0.2); border: 2px solid #fff; }
#main1 .contents .left .txtbox a:hover span { color: #fff; }
#main1 .contents .left .txtbox a:hover img { animation: main1_arrow linear infinite 0.7s; }
#main1 .contents .left .txtbox a:hover .img1 { display: none; }
#main1 .contents .left .txtbox a:hover .img2 { display: block; }
@keyframes main1_arrow {
    0% { margin-right: 0; opacity: 1; }
    100% { margin-right: -5px; opacity: 0; }
}

@media (max-width: 1660px) {
    #main1 .contents .left .txtbox a span { padding: 16px 60px; font-size: 17px; }
    #main1 .contents .left .txtbox a img { width: 23px; }
    #main1 .contents .right { padding-left: calc(13px + 1vw); }
    #main1 .contents .right img { max-width: 95%; }
}
@media (max-width: 1230px) {
    #main1 .contents .left .txtbox a span { padding: 15px 50px; font-size: 16px; }
    #main1 .contents .left .txtbox a img { width: 22px; }
}
@media (max-width: 1024px) {
    #main1 .contents .left .txtbox .txt2 br { display: none; }   
}
@media (max-width: 767px) {
    #main1 .contents { flex-wrap: wrap; flex-direction: column-reverse; }
    #main1 .contents > li { width: 100%; }
    #main1 .contents .left .txtbox { margin-top: calc(20px + 1vw); top: 0; transform: translateY(0); }
    #main1 .contents .left .txtbox a span { padding: 13px 47px 13px 17px; }
    #main1 .contents .right { padding-left: 0; text-align: center; }
    #main1 .contents .right img { width: 100%; max-width: 310px; }
}

/* 메인1 eng */
#main1.eng .contents .left { width: 55%; }
#main1.eng .contents .right { width: 45%; }
@media (max-width: 767px) {
    #main1.eng .contents .left { width: 100%; }
    #main1.eng .contents .right { width: 100%; }
}

/* 메인2 */
#main2 { overflow: hidden; padding: 130px 0; background: url(/image/main/main2_bg.jpg) no-repeat center/cover; }
#main2 .mb_tit { margin-bottom: 40px; text-align: center; font-weight: 700; font-size: 40px; color: #376092; }
#main2 .contents { display: flex; flex-wrap: nowrap; justify-content: space-between; } 
#main2 .contents > li { overflow: hidden; position: relative; width: 31.5%; height: 390px; padding: 70px 30px 0; text-align: center; border-radius: 40px; background-color: #f0f3f7; }
#main2 .contents > li .img1 { width: 70px; }
#main2 .contents > li .box1 { position: absolute; top: 175px; left: 50%; transform: translateX(-50%); transition: margin-top 0s, opacity 0s; text-align: center; width: calc(100% - 40px); }
#main2 .contents > li .box1 .txt1 { font-weight: 700; font-size: 27px; color: #376092; }
#main2 .contents > li .box1 .txt2 { margin-top: 14px; font-weight: 500; font-size: 18px; color: #575757; line-height: 1.6; }
#main2 .contents > li .box2 { z-index: 5; opacity: 0; margin-top: 0px; transition: margin-top 0.4s, opacity 0.4s; position: absolute; top: 175px; left: 50%; transform: translateX(-50%); text-align: center; width: calc(100% - 40px); background-color: #f0f3f7; }
#main2 .contents > li .box2 a { display: flex; flex-wrap: nowrap; align-items: center; padding: 15px 0; justify-content: space-between; border-bottom: 1px solid #cbd6e3; }
#main2 .contents > li .box2 a:last-of-type { border-bottom: none; }
#main2 .contents > li .box2 a span { font-weight: 700; font-size: 20px; color: #376092; }
#main2 .contents > li .box2 a img { display: inline-block; width: 25px; }
#main2 .contents > li .box2 a:hover span { color: #000; }

#main2 .contents > li:hover .box1 { opacity: 0; margin-top: 50px; }
#main2 .contents > li:hover .box2 { opacity: 1; margin-top: 0; }
@media (max-width: 1660px) {
    #main2 .contents > li { padding: calc(40px + 1.5vw) 25px 0; height: calc(270px + 6vw); }
    #main2 .contents > li .img1 { width: calc(50px + 1vw); }
    #main2 .contents > li .box1 { top: 165px; }
    #main2 .contents > li .box2 { top: 160px; }
}
@media (max-width: 1440px) {
    #main2 .contents > li .box1 { top: 170px; }
    #main2 .contents > li .box2 { top: 160px; }
}
@media (max-width: 1230px) {
    #main2 .contents > li { padding: calc(30px + 1vw) 20px 0; height: calc(270px + 5.5vw); }
    #main2 .contents > li .box2 a img { width: 20px; }
    #main2 .contents > li .box1 { top: 140px; }
    #main2 .contents > li .box2 { top: 130px; }
}
@media (max-width: 1024px) {
    #main2 .contents { flex-wrap: wrap; }
    #main2 .contents > li { width: 48%; height: calc(270px + 5.5vw); }
    #main2 .contents > li:nth-child(n + 3) { margin-top: 4%; }
    #main2 .contents > li .box1 { top: 64%; transform: translate(-50%,-50%); }
    #main2 .contents > li .box2 { top: 68%; transform: translate(-50%,-50%); }
}
@media (max-width: 660px) {
    #main2 { background-position-x: 90%; }
    #main2 .contents { display: block; }
    #main2 .contents > li { width: 100%; height: initial; padding: 20px; }
    #main2 .contents > li:nth-child(n + 3) { margin-top: initial; }
    #main2 .contents > li:nth-child(n + 2) { margin-top: 4%; }

    #main2 .contents > li .box1 { margin-top: 0; opacity: 1; margin-top: 0; display: none; position: relative; top: initial; left: 0; transform: translateX(0); width: 100%; }
    #main2 .contents > li .box2 { margin-top: 0; opacity: 1; margin-top: 0; padding-top: calc(20px + 1vw); display: block; position: relative; top: initial; left: 0; transform: translateX(0); width: 100%; }
    #main2 .contents > li:hover .box1 { opacity: 1; margin-top: 0; }
    #main2 .contents > li:hover .box2 { opacity: 1; margin-top: 0; }
}

/* 메인2 eng */
#main2.eng .contents > li .eng_link { z-index: 5; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#main2.eng .contents > li .box1 .txt1 { font-size: 24px; line-height: 1.3; }
#main2.eng .contents > li .box1 .txt2 { font-size: 18px; }
#main2.eng .contents > li:hover .box1 { opacity: 1; margin-top: initial; }
#main2.eng .contents > li .box1 { display: block !important; }

/* 메인배너 */
#main_banner { padding: 115px 0; border-top: 1px solid #ddd; background: url(/image/main_banner/mb_bg.jpg) no-repeat center/cover; }
#main_banner .mb_tit { position: relative; left: 50%; transform: translateX(-50%); max-width: calc(100% - 40px); margin-bottom: 40px; text-align: center; font-weight: 700; font-size: 40px; color: #fff; }
#main_banner .con { position: relative; margin: 0 10px; height: 140px; text-align: center; background-color: #fff; }
#main_banner .con a { pointer-events: none; cursor: default; position: relative; display: block; text-align: center; height: 100%; }
#main_banner .con img { position: relative; top: 50%; transform: translateY(-50%); display: inline-block; max-width: 80%; max-height: 70%; }
#main_banner .mb_arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 38px; cursor: pointer; }
#main_banner .arrow_left { left: -25px; background: url(/image/main_banner/mb_left.png) no-repeat center/cover; }
#main_banner .arrow_right { right: -25px; background: url(/image/main_banner/mb_right.png) no-repeat center/cover; }
@media (max-width: 1660px) {
    #main_banner .con { height: 8vw; }
    #main_banner .mb_arrow { width: 18px; height: 35.2px; }
    #main_banner .arrow_left { left: -22px; }
    #main_banner .arrow_right { right: -22px; }
}
@media (max-width: 1024px) {
    #main_banner .con { height: 11.7349vw; }
    #main_banner .mb_arrow { display: none; }
}
@media (max-width: 624px) {
    #main_banner .con { height: 15.7349vw; }
}