﻿.submain1 > div > div.sub1 > div.text, .submain1 > div > div.sub2 > div.text, .submain1 > div > div.sub2 > div.title, .submain1 > div > h2, .submain2 > div > div.sub1 > div.text, .submain2 > div > div.sub2 > div.text, .submain2 > div > h2 {
    line-height: 1.9;
    text-align: center
}

.submain1 > div > div.sub1 > div.img > div, .submain1 > div > div.sub2 > div.img > div, .submain2 > div > div.sub1 > div.img > div, .submain2 > div > div.sub2 > div.img > div, .submain2 > div > div.sub4 > div.img > div, .submain3 > div > div.sub1 > div.img > div, .submain3 > div > div.sub2 > div.img > div, .submain3 > div > div.sub3 > div.img > div, .submain3 > div > div.sub4 > div.img > div {
    background-size: cover;
    background-position: center center
}

.submain1 > div > h2 {
    font-size: 21px;
    color: #000;
    margin-top: 100px
}

.submain1 > div {
    display: inline-block;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 2em
}

    .submain1 > div > div.sub1 {
        display: inline-block;
        width: 100%
    }

        .submain1 > div > div.sub1 > div.img {
            width: 100%;
            margin: auto
        }

            .submain1 > div > div.sub1 > div.img > div {
                width: 100%;
                height: 300px;
                display: inline-block;
                float: left;
                margin-bottom: .5em
            }

        .submain1 > div > div.sub1 > div.text {
            font-size: 16px;
            color: #555;
            width: 90%;
            position: relative;
            margin: 2em 5%
        }

    .submain1 > div > div.sub2 {
        width: 100%;
        display: inline-block
    }

        .submain1 > div > div.sub2 > div.img {
            width: 100%;
            margin: auto
        }

            .submain1 > div > div.sub2 > div.img > div {
                width: 100%;
                height: 300px;
                display: inline-block;
                float: left;
                margin-bottom: .5em
            }

        .submain1 > div > div.sub2 > div.title {
            font-size: 27px;
            color: #000;
            padding-top: 5em;
            width: 100%;
            margin: auto;
            position: relative;
            font-weight: 600
        }

        .submain1 > div > div.sub2 > div.text {
            font-size: 16px;
            color: #555;
            padding-bottom: 2em;
            width: 90%;
            margin: 2em auto auto;
            position: relative
        }

.submain2 > div {
    display: inline-block;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 2em
}

    .submain2 > div > h2 {
        font-size: 27px;
        color: #000;
        margin-top: 2em
    }

    .submain2 > div > div.sub1 {
        width: 100%;
        display: inline-block
    }

        .submain2 > div > div.sub1 > div.img {
            width: 100%;
            margin: auto
        }

            .submain2 > div > div.sub1 > div.img > div {
                width: 100%;
                height: 700px;
                display: inline-block;
                float: left;
                margin-bottom: .5em
            }

        .submain2 > div > div.sub1 > div.text {
            font-size: 16px;
            color: #555;
            width: 90%;
            position: relative;
            margin: 2em 5%
        }

    .submain2 > div > div.sub2 {
        width: 100%;
        display: inline-block
    }

        .submain2 > div > div.sub2 > div.img {
            width: 100%;
            margin: auto
        }

            .submain2 > div > div.sub2 > div.img > div {
                width: 100%;
                height: 300px;
                display: inline-block;
                float: left;
                margin-bottom: .5em
            }

        .submain2 > div > div.sub2 > div.text {
            font-size: 16px;
            color: #555;
            width: 90%;
            position: relative;
            margin: 2em 5%
        }

    .submain2 > div > div.sub3 > div.text, .submain2 > div > div.sub4 > div.text {
        font-size: 16px;
        text-align: left;
        position: relative;
        line-height: 1.9
    }

    .submain2 > div > div.sub3 {
        width: 100%;
        display: inline-block
    }

        .submain2 > div > div.sub3 > div.img {
            width: 100%;
            margin: auto
        }

            .submain2 > div > div.sub3 > div.img > div {
                width: 100%;
                height: 450px;
                background-size: cover;
                background-position: center center;
                display: inline-block;
                float: left;
                margin-bottom: .5em
            }

        .submain2 > div > div.sub3 > div.text {
            color: #555;
            width: 90%;
            margin: 2em 5%
        }

    .submain2 > div > div.sub4 {
        width: 100%;
        display: inline-block
    }

        .submain2 > div > div.sub4 > div.img {
            width: 100%;
            margin: auto
        }

            .submain2 > div > div.sub4 > div.img > div {
                width: 100%;
                height: 300px;
                display: inline-block;
                float: left;
                margin-bottom: .5em
            }

                .submain2 > div > div.sub4 > div.img > div > h4 {
                    background-color: rgba(255,216,0,.9);
                    color: #000;
                    margin: .5em;
                    float: right;
                    display: inline-block;
                    padding: .5em;
                    border-radius: 1em;
                    font-size: 16px
                }

        .submain2 > div > div.sub4 > div.text {
            color: #555;
            width: 90%;
            margin: 2em 5%
        }

    .submain2 > div > nav.sub5 {
        width: 100%;
        display: inline-block;
        margin-top: 1em;
        margin-bottom: 1em
    }

        .submain2 > div > nav.sub5 > a {
            width: 100%;
            margin: auto;
            background-color: #ff6a00;
            display: block;
            padding-top: 1em;
            padding-bottom: 1em;
            color: #fff;
            text-align: center
        }

.submain3 > div {
    display: inline-block;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 2em
}

    .submain3 > div > h2 {
        font-size: 21px;
        line-height: 1.9;
        text-align: center;
        color: #000;
        margin-top: 100px
    }

        .submain3 > div > h2 > span {
            font-size: 16px;
            line-height: 1.6;
            display: inline-block
        }

    .submain3 > div > div.sub1 > div.text, .submain3 > div > div.sub2 > div.text, .submain3 > div > div.sub3 > div.text, .submain3 > div > div.sub4 > div.text {
        font-size: 16px;
        line-height: 1.9;
        text-align: left;
        color: #555;
        position: relative
    }

    .submain3 > div > div.sub1 {
        width: 100%;
        display: inline-block
    }

        .submain3 > div > div.sub1 > div.img {
            width: 100%;
            margin: auto
        }

            .submain3 > div > div.sub1 > div.img > div {
                width: 100%;
                height: 300px;
                display: inline-block;
                float: left;
                margin-bottom: .5em
            }

        .submain3 > div > div.sub1 > div.text {
            width: 90%;
            margin: 2em 5%
        }

    .submain3 > div > div.sub2 {
        width: 100%;
        display: inline-block
    }

        .submain3 > div > div.sub2 > div.img {
            width: 100%;
            margin: auto
        }

            .submain3 > div > div.sub2 > div.img > div {
                width: 100%;
                height: 660px;
                display: inline-block;
                float: left;
                margin-bottom: .5em
            }

        .submain3 > div > div.sub2 > div.text {
            width: 90%;
            margin: 2em 5%
        }

    .submain3 > div > div.sub3 {
        width: 100%;
        display: inline-block
    }

        .submain3 > div > div.sub3 > div.img {
            width: 100%;
            margin: auto
        }

            .submain3 > div > div.sub3 > div.img > div {
                width: 100%;
                height: 600px;
                display: inline-block;
                float: left;
                margin-bottom: .5em
            }

        .submain3 > div > div.sub3 > div.text {
            width: 90%;
            margin: 2em 5%
        }

    .submain3 > div > div.sub4 {
        width: 100%;
        display: inline-block
    }

        .submain3 > div > div.sub4 > div.img {
            width: 100%;
            margin: auto
        }

            .submain3 > div > div.sub4 > div.img > div {
                width: 100%;
                height: 300px;
                display: inline-block;
                float: left;
                margin-bottom: .5em
            }

        .submain3 > div > div.sub4 > div.text {
            width: 90%;
            margin: 2em 5%
        }

.pptx {
    width: 100%;
    display: inline-block
}

    .pptx > div {
        width: 100%;
        display: block;
        margin: auto;
        text-align: center
    }

.backimg > div.home {
    position: relative;
    display: inline-block;
    margin-top: 5em
}

    .backimg > div.home:before {
        position: absolute;
        content: "";
        width: 250px;
        height: 250px;
        border-width: 12px;
        border-color: #4ba5d9 #4ba5d9 #8e86ad #8e86ad;
        border-style: solid;
        display: block;
        top: 12px;
        left: 12px;
        border-radius: 50%;
        transform: rotate(-135deg)
    }

    .backimg > div.home > img {
        border-radius: 50%;
        border: 24px solid #fff;
        box-shadow: 0 0 3px 3px gray;
        width: 250px;
        height: 250px
    }

.pptx > div > ul {
    width: 100%;
    display: inline-block;
    position: relative;
    margin-top: 3em
}

    .pptx > div > ul > li {
        width: 48%;
        margin-left: 1%;
        margin-right: 1%;
        display: inline-block;
        float: left
    }

        .pptx > div > ul > li > h4 {
            text-align: center;
            width: 80px;
            display: block;
            padding: .5em 1em;
            margin: auto;
            color: #fff;
            font-size: 20px
        }

        .pptx > div > ul > li.soldier > h4 {
            background-color: #4ba5d9;
            border-left: 12px solid #1a79a9;
            border-right: 12px solid #1a79a9
        }

        .pptx > div > ul > li.captain > h4 {
            background-color: #8e86ad;
            border-left: 12px solid #504877;
            border-right: 12px solid #504877
        }

        .pptx > div > ul > li > ul > li {
            width: 100%;
            text-align: center;
            height: 280px;
            margin-top: 1em
        }

            .pptx > div > ul > li > ul > li > div.img {
                width: 131px;
                height: 131px;
                border: 12px solid;
                border-radius: 50%;
                margin: 8px;
                display: inline-block
            }

            .pptx > div > ul > li > div > p, .pptx > div > ul > li > ul > li > p {
                line-height: 1.8;
                margin-left: 2em;
                margin-right: 2em
            }

            .pptx > div > ul > li > ul > li > div.img > img {
                border-radius: 50%;
                border: 5px solid #fff;
                width: 121px;
                height: 121px
            }

        .pptx > div > ul > li > div, .pptx > div > ul > li > div > h4 {
            width: 100%;
            display: inline-block
        }

        .pptx > div > ul > li > ul > li:nth-child(1) > div.img {
            border-color: #f9ad42
        }

        .pptx > div > ul > li > ul > li:nth-child(2) > div.img {
            border-color: #53bfc9
        }

        .pptx > div > ul > li > ul > li:nth-child(3) > div.img {
            border-color: #f86849
        }

        .pptx > div > ul > li > ul > li > p {
            font-size: 12px;
            text-align: left
        }

        .pptx > div > ul > li > div > h4 {
            font-size: 80px;
            text-align: center;
            vertical-align: middle;
            margin-bottom: .5em
        }

            .pptx > div > ul > li > div > h4:before {
                color: #fff;
                text-align: center;
                width: 120px;
                padding: .5em 1em;
                font-size: 20px
            }

            .pptx > div > ul > li > div > h4 > i {
                width: 30px;
                height: 80px;
                display: none;
                color: #fff
            }

.sub4, .swiper-slide > img {
    width: 100%
}

.pptx > div > ul > li.soldier > div > h4:before {
    content: "국군장병";
    background-color: #4ba5d9;
    border-left: 12px solid #1a79a9;
    border-right: 12px solid #1a79a9
}

.pptx > div > ul > li.captain > div > h4:before {
    content: "지희참모";
    background-color: #8e86ad;
    border-left: 12px solid #504877;
    border-right: 12px solid #504877
}

.pptx > div > ul > li > div > p {
    display: block;
    font-size: 12px;
    font-weight: 900;
    text-align: left;
    vertical-align: middle
}

.sub4 {
    display: inline-block;
    position: relative
}

    .sub4 > div.CatalogDiv {
        width: 100%;
        margin: auto
    }

.toon > div {
    margin-top: 1em;
    width: 100%;
    text-align: center
}

    .toon > div > img {
        max-width: 100%;
    }

/* 
 * Swagger TTF(Korean)
 */
@charset "utf-8";

@font-face {
    font-family: 'Swagger TTF';
    font-style: normal;
    font-weight: 400;
    src: url('//cdn.kldp.org/fonts/Free/Swagger/SDSwaggerTTF.eot');
    src: local('Swagger TTF'), url('//cdn.kldp.org/fonts/Free/Swagger/SDSwaggerTTF.eot?#iefix') format('embedded-opentype'), url('//cdn.kldp.org/fonts/Free/Swagger/SDSwaggerTTF.woff2') format('woff2'), url('//cdn.kldp.org/fonts/Free/Swagger/SDSwaggerTTF.woff') format('woff'), url('//cdn.kldp.org/fonts/Free/Swagger/SDSwaggerTTF.ttf') format('truetype');
}

.MarathonSection .main1 {
    width: 100%;
    display: inline-block;
    float: left;
    height: 402px;
    background-position: center center;
    background-color: #000;
}

.MarathonSection .main2 {
    width: 100%;
    display: inline-block;
    float: left;
    background-color: #fff;
}

    .MarathonSection .main2 > .subdiv > .submain1 {
        margin-top: 4em;
    }

        .MarathonSection .main2 > .subdiv > .submain1 > div {
            text-align: center;
        }

            .MarathonSection .main2 > .subdiv > .submain1 > div > h2 {
                position: relative;
                display: inline-block;
                font-family: 'Swagger TTF';
                font-size: 30px;
            }

                .MarathonSection .main2 > .subdiv > .submain1 > div > h2:before {
                    content: "";
                    width: 128px;
                    height: 128px;
                    background-image: url(https://rh-marathon.com/file/img/logo.png);
                    display: inline-block;
                    background-size: contain;
                    position: absolute;
                    right: 50%;
                    bottom: 100%;
                    margin-right: -64px;
                }

            .MarathonSection .main2 > .subdiv > .submain1 > div > div.sub0 > p {
                display: inline-block;
                font-size: 16px;
                font-family: 'Swagger TTF';
                font-weight: 900;
                width: 100%;
                margin-top: 0.5em;
            }

            .MarathonSection .main2 > .subdiv > .submain1 > div > div.sub0 > div {
                display: inline-block;
                text-align: left;
                margin-top: 4em;
                margin-bottom: 4em;
                padding: 0 5%;
                width: 90%;
            }

                .MarathonSection .main2 > .subdiv > .submain1 > div > div.sub0 > div > p:nth-child(2) {
                    display: inline;
                }

                .MarathonSection .main2 > .subdiv > .submain1 > div > div.sub0 > div > p:nth-child(3) {
                    display: inline;
                }

            .MarathonSection .main2 > .subdiv > .submain1 > div > div > div > p > span {
                display: inline-block;
                font-size: 18px;
                line-height: 1.6;
            }

                .MarathonSection .main2 > .subdiv > .submain1 > div > div > div > p > span > span {
                    color: #000;
                    font-weight: 900;
                }


    .MarathonSection .main2 .sub1 > ul {
        display: inline-block;
        width: 100%;
        margin: auto;
    }

        .MarathonSection .main2 .sub1 > ul > li {
            display: inline-block;
            width: 100%;
            text-align: center;
        }

            .MarathonSection .main2 .sub1 > ul > li > div {
                width: 100%;
                display: inline-block;
            }

                .MarathonSection .main2 .sub1 > ul > li > div > h3 {
                    text-align: left;
                    font-size: 24px;
                    font-weight: 900;
                    line-height: 1.6;
                    margin-top: 2em;
                }

                .MarathonSection .main2 .sub1 > ul > li > div > p {
                    font-size: 18px;
                    text-align: left;
                    line-height: 1.6;
                    font-weight: 900;
                    margin-bottom: 0.5em;
                }

.MarathonSection .partone > div.img {
    display: inline-block;
    width: 100%;
    height: 408px;
    float: left;
    background-position: right;
}

.MarathonSection .partone > p > span {
    color: #f05f2a;
}

.MarathonSection .partone > div.text {
    display: inline-block;
    width: 100%;
    background-color: #9e9e9f;
}

    .MarathonSection .partone > div.text > h4 {
        font-size: 16px;
        display: inline-block;
        float: right;
        text-align: left;
        padding: 0.5em 0.5em;
        line-height: 1.6;
    }

    .MarathonSection .partone > div.text > div {
        width: 88%;
        display: inline-block;
        text-align: left;
        padding: 0.5em 6%;
        padding-bottom: 2em;
        ;
        line-height: 1.6;
    }

        .MarathonSection .partone > div.text > div > span {
            display: inline-block;
            font-size: 11px;
            font-weight: 900;
        }

.MarathonSection .parttwo > div.img {
    display: inline-block;
    width: 100%;
    height: 229px;
    float: left;
    background-position: right;
}

.MarathonSection .parttwo > p > span {
    color: #f8c000;
}

.MarathonSection .parttwo > div.text {
    display: inline-block;
    width: 100%;
    background-color: #000;
}

    .MarathonSection .parttwo > div.text > h4 {
        display: inline-block;
        float: right;
        text-align: right;
        padding: 0.5em 1em;
        padding-top: 12px;
        line-height: 1.6;
    }

        .MarathonSection .parttwo > div.text > h4 > span:nth-child(1) {
            color: #76787c;
            font-size: 14px;
        }

        .MarathonSection .parttwo > div.text > h4 > span:nth-child(2) {
            color: #ffffff;
            font-size: 14px;
        }

        .MarathonSection .parttwo > div.text > h4 > span:nth-child(3) {
            color: #fdb805;
            font-size: 14px;
        }

        .MarathonSection .parttwo > div.text > h4 > span:nth-child(5) {
            color: #ffffff;
            font-size: 18px;
        }

    .MarathonSection .parttwo > div.text > div {
        padding: 0.5em 1em;
        line-height: 1.6;
        text-align: right;
        padding-bottom: 2em;
    }

        .MarathonSection .parttwo > div.text > div > p {
            width: 100%;
            display: inline-block;
            line-height: 1.6;
            padding-bottom: 0.5em;
            font-size: 11px;
        }

            .MarathonSection .parttwo > div.text > div > p:nth-child(even) {
                color: #fff;
            }

            .MarathonSection .parttwo > div.text > div > p:nth-child(odd) {
                color: #76787c;
            }


.MarathonSection .submain1 > div > div.sub2 {
    text-align: center;
    margin-bottom: 0;
}

    .MarathonSection .submain1 > div > div.sub2 > div.title {
        padding-top: 2em;
        font-size: 18px;
    }

    .MarathonSection .submain1 > div > div.sub2 > div.text {
        display: inline-block;
        text-align: left;
        line-height: 2.2;
        width: auto;
        font-size: 14px;
        width: 90%;
        padding: 0 5%;
    }

.MarathonSection .main3 {
    width: 100%;
    margin: auto;
    text-align: center;
}

    .MarathonSection .main3 > .bar1 {
        width: 100%;
        display: inline-block;
        background-color: #f05f2a;
        height: 9px;
    }

        .MarathonSection .main3 > .bar1 > span {
            width: 50%;
            height: 9px;
            display: inline-block;
            background-color: #f8c000;
            float: right;
        }

    .MarathonSection .main3 > h2 {
        font-size: 24px;
        padding: 0.5em;
        margin-top: 2em;
        color: #f05f2a;
    }

    .MarathonSection .main3 > p {
        font-size: 18px;
        font-weight: 900;
        line-height: 1.6;
        margin: 0.5em;
        margin-bottom: 1em;
    }

        .MarathonSection .main3 > p > span {
            color: #f05f2a;
        }

    .MarathonSection .main3 > .img {
        width: 100%;
        height: 228px;
        display: inline-block;
        background-size: cover;
    }

    .MarathonSection .main3 > .text {
        padding: 1em 10%;
        width: 80%;
        display: inline-block;
    }

        .MarathonSection .main3 > .text > p {
            font-size: 15px;
            line-height: 2;
            margin-bottom: 1.5em;
        }

            .MarathonSection .main3 > .text > p > br {
                display: none;
            }

    .MarathonSection .main3 > .nav {
        width: 100%;
        display: inline-block;
        position: relative;
        text-align: right;
        padding: 0.5em 0;
    }

        .MarathonSection .main3 > .nav:before {
            content: "";
            width: 100%;
            display: inline-block;
            background-color: #f05f2a;
            position: absolute;
            top: 100%;
            height: 9px;
            left: 0;
        }

        .MarathonSection .main3 > .nav:after {
            content: "";
            width: 50%;
            display: inline-block;
            background-color: #f8c000;
            position: absolute;
            top: 100%;
            height: 9px;
            right: 0;
        }

        .MarathonSection .main3 > .nav > a {
            color: #000;
            font-weight: 900;
            font-size: 16px;
            margin-right: 1em;
        }



.MarathonSection .main4 {
    width: 100%;
    margin: auto;
    text-align: center;
}

    .MarathonSection .main4 > h2 {
        font-size: 24px;
        padding: 0.5em;
        margin-top: 2em;
        color: #f8c000;
    }

    .MarathonSection .main4 > .img {
        width: 100%;
        height: 142px;
        display: inline-block;
        background-size: cover;
    }

    .MarathonSection .main4 > p {
        font-size: 18px;
        font-weight: 900;
        line-height: 1.6;
        margin: 0.5em;
    }

        .MarathonSection .main4 > p > span {
            font-size: 18px;
        }

            .MarathonSection .main4 > p > span > span {
                color: #f8c000;
            }

    .MarathonSection .main4 > .text {
        padding: 1em 10%;
        width: 80%;
        display: inline-block;
    }

        .MarathonSection .main4 > .text > p {
            font-size: 15px;
            line-height: 2;
            margin-bottom: 1.5em;
        }

            .MarathonSection .main4 > .text > p > br {
                display: none;
            }

    .MarathonSection .main4 > ul {
        display: flex;
        width: 270px;
        margin: auto;
    }

        .MarathonSection .main4 > ul > li {
            width: 90px;
            height: 91px;
            display: inline-block;
            background-size: cover;
        }

    .MarathonSection .main4 > .nav {
        width: 100%;
        display: inline-block;
        position: relative;
        text-align: right;
        padding: 0.5em 0;
        margin-top: 3px;
    }

        .MarathonSection .main4 > .nav:before {
            content: "";
            width: 100%;
            display: inline-block;
            background-color: #f05f2a;
            position: absolute;
            top: 100%;
            height: 9px;
            left: 0;
        }

        .MarathonSection .main4 > .nav:after {
            content: "";
            width: 50%;
            display: inline-block;
            background-color: #f8c000;
            position: absolute;
            top: 100%;
            height: 9px;
            right: 0;
        }

        .MarathonSection .main4 > .nav > a {
            color: #000;
            font-weight: 900;
            font-size: 16px;
            margin-right: 1em;
        }


.MarathonSection .main5 {
    width: 100%;
    margin: auto;
    display: block;
    margin-top: 5em;
}

    .MarathonSection .main5 > .img {
        width: 300px;
        height: 313px;
        display: inline-block;
        float: right;
        background-size: cover;
    }

    .MarathonSection .main5 > .text {
        width: 100%;
        display: inline-block;
        text-align: center;
    }

        .MarathonSection .main5 > .text > h3 {
            font-size: 32px;
        }

    .MarathonSection .main5 > .bar1 {
        width: 100%;
        display: inline-block;
        background-color: #f05f2a;
        height: 9px;
        margin-top: 2em;
    }

        .MarathonSection .main5 > .bar1 > span {
            width: 50%;
            height: 9px;
            display: inline-block;
            background-color: #f8c000;
            float: right;
        }



.MarathonSection .main6 {
    width: 100%;
    margin: auto;
    display: block;
    margin-top: 3em;
    margin-bottom: 5em;
}

    .MarathonSection .main6 > ul {
        width: 100%;
        display: inline-block;
        table-layout: fixed;
    }

        .MarathonSection .main6 > ul > li {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            width: 100%;
            float: left;
            text-align: center;
            margin-bottom: 1em;
        }

            .MarathonSection .main6 > ul > li > a {
                max-width: 90%;
                display: inline-block;
            }

            .MarathonSection .main6 > ul > li:nth-child(1) > a {
                max-width: 65%;
            }

            .MarathonSection .main6 > ul > li:nth-child(2) > a {
                margin-top: 0.5em;
            }

            .MarathonSection .main6 > ul > li > a > img {
                max-width: 80%;
            }

            





            /* 비디오 영상 늘리기 */
.ServiceSection .main3 #mainVideo{
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.ServiceSection .main1 #mainVideo{
    width: 100%;
    height: 400px;
    object-fit: cover;
}