/* sec01 */

#main.about .sec01 {
    padding: 0;
    overflow: hidden;
    color: #fff;
    position: relative;
}

#main.about .sec01-videobox {
    width: 100%;
    height: calc(100vh - 80px);
    position: relative;
}

#main.about .sec01-videobox video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    height: 100%;
}

#main.about .sec01-txtbox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* sec02 */

#main.about .sec02 h3 {
    margin: 2em 0;
}

#main.about .sec02 h3 .on {
    display: none;
}

#main.about .sec02-logo {
    width: 300px;
    margin: 0 auto;
}

/* sec03 */

#main.about .sec03 {
    background-color: #f0f0f0;
    text-align: left;
}

#main.about .sec03-inner>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#main.about .about-btn {
    color: #1a1f71;
    display: block;
    border: 1px solid #1a1f71;
    font-size: 20px;
    line-height: 50px;
    width: 250px;
    height: 50px;
    border-radius: 3em;
    text-align: center;
    margin-top: 2em;
}

#main.about .sec03-bot {
    position: relative;
    margin-top: 5em;
}

#main.about .sec03-bot li {
    display: flex;
    align-items: center;
}

#main.about .sec03-bot h2 {
    color: #000;
    display: inline-block;
    font-size: 2.5rem;
    line-height: 2.5em;
    width: 180px;
    margin-bottom: 0;
}

#main.about .sec03-bot .blue,
#main.about .sec03-bot .blue h2 {
    color: #1a1f71;
}

#main.about .sec03-bot-right>div {
    position: absolute;
    width: 330px;
}

#main.about .sec03-bot-right>.sec03-list1 {
    right: 0;
    top: 0;
    transform: rotate(-9deg);
}

#main.about .sec03-bot-right>.sec03-list2 {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#main.about .sec03-bot-right>.sec03-list3 {
    right: 0;
    bottom: 0;
    transform: rotate(-348deg);
}

/* sec04 */
#main.about .sec04 br {
    display: none;
}

#main.about .sec04 .sec-inner {
    max-width: 100%;
}

#main.about .sec04 .sec-inner>h2 {
    margin-bottom: 2em;
}

#main.about .sec04-cont {
    display: flex;
    flex-direction: column;
}

#main.about .sec04-cont>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin-bottom: 100px;
}

#main.about .sec04-cont>.sec04-mid {
    align-self: flex-end;
}

/* 이미지css*/
#main.about .sec04-cont .cont-img {
    width: 60%;
    height: 400px;
}

#main.about .sec04-top>.cont-img {
    border-radius: 0 20em 20em 0;
    background: url(/img/renew/about/sec04-01.jpg) no-repeat center center / cover;
}

#main.about .sec04-mid>.cont-img {
    border-radius: 20em 0 0 20em;
    background: url(/img/renew/about/sec04-02.jpg) no-repeat center center / cover;
}

#main.about .sec04-bot>.cont-img {
    border-radius: 0 20em 20em 0;
    background: url(/img/renew/about/sec04-03.jpg) no-repeat center center / cover;
}

#main.about .sec04-cont .cont-txt {
    text-align: right;
    width: 30%;
}

#main.about .sec04-mid>.cont-txt {
    text-align: left;
}

#main.about .sec04 .cont-txt em {
    display: block;
    margin-bottom: 1em;
    font-family: 'Noto Sans KR', sans-serif;
}

/* sec05 */

#main.about .sec05 {
    background-color: #f0f0f0;
}

#main.about .sec05 h4 {
    margin-bottom: 0.5em;
}

#main.about .sec05-inner>h5 {
    margin: 1em 0 5em;
}

#main.about .sec05-cont>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

#main.about .sec05-cont>div>div {
    width: 49%;
    height: 560px;
    margin-bottom: 2%;
    border-radius: 2em;
    padding: 4%;
    overflow: hidden;
    background-color: #fff;
}

#main.about .sec05 .cont-img {
    display: none;
}

#main.about .sec05 .cont2>.cont-left,
#main.about .sec05 .cont3>.cont-right {
    width: 39%;
}

#main.about .sec05 .cont2>.cont-right,
#main.about .sec05 .cont3>.cont-left {
    width: 59%;
}

#main.about .sec05 .cont5>div {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 2em;
}

#main.about .sec05 .cont1>.cont-left {
    background: #fff url(/img/renew/about/sec05-01.png) no-repeat right bottom -45% / 350px auto;
}

#main.about .sec05 .cont1>.cont-right {
    background: #fff url(/img/renew/about/sec05-02.png) no-repeat right -50px bottom 15% / 400px auto;
}

#main.about .sec05 .cont2>.cont-left {
    background: #fff url(/img/renew/about/sec05-03.jpg) no-repeat center bottom / 200px auto;
}

#main.about .sec05 .cont2>.cont-right {
    background: #fff url(/img/renew/about/sec05-04.png) no-repeat right 10% bottom -10% / 350px auto;
}

#main.about .sec05 .cont3>.cont-left {
    background: #fff url(/img/renew/about/sec05-05.png) no-repeat right 15% bottom 10% / 450px auto;
}

#main.about .sec05 .cont3>.cont-right {
    background: #fff url(/img/renew/about/sec05-06.jpg) no-repeat center bottom / 300px auto;
}

#main.about .sec05 .cont4>.cont-left {
    background: #fff url(/img/renew/about/sec05-07.jpg) no-repeat center bottom / 300px auto;
}

#main.about .sec05 .cont4>.cont-right {
    background: #fff url(/img/renew/about/sec05-08.jpg) no-repeat right -100px bottom / 450px auto;
}

#main.about .sec05 .cont5-video {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateY(20%);
}

#main.about .sec05 .cont5-video>div {
    width: 49%;
    background: url(/img/renew/about/sec05-left.gif)no-repeat center top 11% / 94%;
}

#main.about .sec05 .cont5-video>.cont5-right {
    background-image: url(/img/renew/about/sec05-right.gif);
}

/* 미디어쿼리 */

@media(max-width: 1320px) {
    #main.about .sec02-logo {
        width: 250px;
    }

    #main.about .sec02 h3 {
        margin: 1.5em 0;
    }

    #main.about .sec03-inner>div {
        flex-direction: column;
        text-align: center;
    }

    #main.about .sec03-top h2 {
        margin-bottom: 0.5em;
    }

    #main.about .sec03 .about-btn {
        margin: 2em auto 0;
    }

    #main.about .sec03-bot-right {
        display: none;
    }

    #main.about .sec03-bot h2,
    #main.about .sec03-bot h5 {
        text-align: left;
    }

    #main.about .sec04-cont>div {
        width: 90%;
    }

    #main.about .sec05-cont>div>div {
        height: 450px;
    }

    #main.about .sec05 .cont1>.cont-left {
        background-size: 280px auto;
    }

    #main.about .sec05 .cont1>.cont-right {
        background-size: 300px auto;
    }

    #main.about .sec05 .cont2>.cont-left {
        background-size: 150px auto;
    }

    #main.about .sec05 .cont2>.cont-right {
        background-size: 300px auto;
    }

    #main.about .sec05 .cont3>.cont-left {
        background-size: 400px auto;
    }

    #main.about .sec05 .cont3>.cont-right {
        background-size: 250px auto;
    }

    #main.about .sec05 .cont4>.cont-left {
        background-size: 250px auto;
    }

    #main.about .sec05 .cont4>.cont-right {
        background-size: 350px auto;
    }

    #main.about .sec05-cont h5 {
        width: 80%;
    }

    #main.about .sec05 h5 br {
        display: none;
    }
}

@media(max-width: 1024px) {
    #main.about .sec01-videobox {
        height: calc(90vh - 60px);
    }

    #main.about .sec04-cont>div {
        flex-direction: column;
        width: 80%;
        margin: 0 auto;
    }

    #main.about .sec04-cont>.sec04-mid {
        flex-direction: column-reverse;
        margin: 100px auto;
    }

    #main.about .sec04-cont .cont-img {
        width: 100%;
        height: 300px;
        border-radius: 20em;
        margin-bottom: 1em;
    }

    #main.about .sec04-cont .cont-txt {
        width: 80%;
        text-align: center !important;
    }
}

@media(max-width:840px) {
    #main.about .sec05-cont>div {
        flex-direction: column;
    }

    #main.about .sec05-cont>div>div {
        width: 100% !important;
        padding: 8%;
        margin-bottom: 30px;
    }

    #main.about .sec05 .cont1>.cont-left {
        background-position-x: center;
    }

    #main.about .sec05 .cont1>.cont-right {
        background-position-x: center;
    }

    #main.about .sec05 .cont2>.cont-right {
        background-position-x: center;
    }

    #main.about .sec05 .cont3>.cont-left {
        background-position-x: center;
    }

    #main.about .sec05 .cont4>.cont-right {
        background-position-x: center;
    }

    #main.about .sec05 .cont5-video>div {
        width: 100%;
    }

    #main.about .sec05 .cont5-video>.cont5-right {
        display: none;
    }
}

@media(max-width: 680px) {

    #main.about h4 br,
    #main.about h5 br {
        display: none;
    }

    #main.about .about-btn {
        width: 200px;
        font-size: 16px;
    }

    #main.about .sec02-logo {
        width: 200px;
    }

    #main.about .sec02 h3 .on {
        display: block;
    }

    #main.about .sec02 h4,
    #main.about .sec02 h5 {
        padding: 0 5%;
    }

    #main.about .sec03-bot {
        margin-top: 2em;
    }

    #main.about .sec03-bot h2 {
        font-size: 2rem;
        width: 120px;
        line-height: 4em;
    }

    #main.about .sec03-bot h5 {
        width: 80%;
    }

    #main.about .sec04-cont .cont-img {
        height: 200px;
    }

    #main.about .sec04-cont>div,
    #main.about .sec04-cont .cont-txt {
        width: 90%;
    }
}