main{

    --main-margin: 14rem;

}



main section[id*="main-"]:not(:last-of-type) {

    margin-bottom:var(--main-margin);

}



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

    main{

        --main-margin: 9.375rem;

    }

}



/** main 공통 title ************************************/

.main-title-box{

    text-align: center;

    margin-bottom:7rem;

}

.main-title-box .sub-title{

    display: block;

    font-size:2rem;

    font-weight: 600;

    color:var(--color-primary);

    margin-bottom:2rem;

}

.main-title-box .title{

    font-size:4.4rem;

    font-weight: 700;

    margin-bottom:1.5rem;

    line-height:1.4;

}

.main-title-box .desc{

    font-size:2rem;

    color:#777;

}



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

    .main-title-box{

        margin-bottom:6.25rem;

    }

    .main-title-box .sub-title{

        font-size:2.25rem;

        margin-bottom:1.875rem;

    }

    .main-title-box .title{

        font-size:4rem;

        font-weight: 700;

        margin-bottom:1.875rem;

    }

    .main-title-box .desc{

        font-size:2.25rem;

    }

}



/** main section1 ************************************/

#main-section1{

    padding-top:20rem;

    text-align: center;

}

#main-section1 .com-center > small{

    display:block;

    font-size:2.8rem;

    font-weight: 600;

    margin-bottom:4rem;

}

#main-section1 .com-center > h2{

    font-size:5.4rem;

    font-weight: 400;

    line-height:1.38;

    margin-bottom:7.5rem;

}

#main-section1 .com-center > h2 b{

    font-weight: 700;

}

#main-section1 .com-center > .arrow-box .text{

    text-align: center;

    color:#aaa;

}

#main-section1 .com-center > .arrow-box .arrow{

    position: relative;

    display:block;

    margin:1.5rem auto 0;

    width:14rem;

    height:14rem;

    background:var(--color-primary2);

    border-radius: 100%;

    box-shadow: 0 0 2rem rgba(7,0,2,0.2);

}

#main-section1 .com-center > .arrow-box .arrow:after{

    content:"";

    position: absolute;

    top:50%;

    left:50%;

    -webkit-transform:translate(-50%, -50%);

    -moz-transform:translate(-50%, -50%);

    -o-transform:translate(-50%, -50%);

    transform:translate(-50%, -50%);

    width:2.8rem;

    height:4.2rem;

    background:url("../img/main/main-section1-arrow-ico.png") no-repeat center / 100% auto;

    animation: bounce-arrow 1.5s ease-in-out infinite;

}

@keyframes bounce-arrow {

    0%, 100% {

        -webkit-transform: translate(-50%, -50%);

        -moz-transform: translate(-50%, -50%);

        -o-transform: translate(-50%, -50%);

        transform: translate(-50%, -50%);

    }

    50% {

        -webkit-transform: translate(-50%, calc(-50% + 10px));

        -moz-transform: translate(-50%, calc(-50% + 10px));

        -o-transform: translate(-50%, calc(-50% + 10px));

        transform: translate(-50%, calc(-50% + 10px));

    }

}

#main-section1 > .img-box{

    width:100vw;

    min-width: var(--min-width);

    height:52rem;

    background:url("../img/main/main-section1-img.png") no-repeat center / cover;

    margin-top:-7rem;

}



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

    #main-section1 {

        padding-top: 13.125rem;

    }



    #main-section1 .com-center > small {

        font-size: 2.25rem;

        margin-bottom: 2rem;

    }

    #main-section1 .com-center > h2{

        font-size:4rem;

        margin-bottom:4.375rem;

    }

    #main-section1 .com-center > .arrow-box .text{

        font-size:1.875rem;

    }

    #main-section1 .com-center > .arrow-box .arrow{

        width:13.625rem;

        height:13.625rem;

    }

    #main-section1 .com-center > .arrow-box .arrow:after{

        width:2.5rem;

        height:3.75rem;

    }

    #main-section1 > .img-box{

        height:42.5rem;

    }

}

/** main section2 ************************************/

#main-section2{

    padding-bottom:var(--main-margin);

    background: #ffffff;

    background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(236, 243, 255, 1) 100%);

    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(236, 243, 255, 1) 100%);

    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(236, 243, 255, 1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#ECF3FF", GradientType=0);

}

#main-section2 ul{

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap:3rem;

}

#main-section2 ul li a{

    position: relative;

    display: block;

    border-radius: 1.5rem;

    border:2px solid var(--color-white);

    box-shadow: 0 0 1.5rem rgba(17, 63, 164, 0.1);

    height:22rem;

    padding:4rem;

    font-size:2.2rem;

    font-weight: 600;

    line-height: 1.45;

    background-color:var(--color-white);

    background-position: center right;

    background-size: auto 100%;

    background-repeat: no-repeat;

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}

#main-section2 ul li a:hover{

    border-color:var(--color-primary2);

    text-decoration: underline;

}

#main-section2 ul li a:after{

    content:"";

    position:absolute;

    left:4rem;

    bottom:4rem;

    width:4.2rem;

    height:4.2rem;

    background:url("../img/main/main-section2-arrow-ico.png") no-repeat center / 100% auto;

}

#main-section2 ul li:nth-child(1) a{

    background-image: url("../img/main/main-section2-bg1.png");

}

#main-section2 ul li:nth-child(2) a{

    background-image: url("../img/main/main-section2-bg2.png");

}

#main-section2 ul li:nth-child(3) a{

    background-image: url("../img/main/main-section2-bg3.png");

}

#main-section2 ul li:nth-child(4) a{

    background-image: url("../img/main/main-section2-bg4.png");

}

#main-section2 ul li:nth-child(5) a{

    background-image: url("../img/main/main-section2-bg5.png");

}

#main-section2 ul li:nth-child(6) a{

    background-image: url("../img/main/main-section2-bg6.png");

}

#main-section2 ul li:nth-child(7) a{

    background-image: url("../img/main/main-section2-bg7.png");

}

#main-section2 ul li:nth-child(8) a{

    background-image: url("../img/main/main-section2-bg8.png");

}



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

    #main-section2 ul{

        grid-template-columns: repeat(2, 1fr);

        gap: 2rem;

    }

}

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

    #main-section2 ul li a{

        height:22.5rem;

        padding:3.75rem;

        font-size:2.375rem;

        background-position:center right -2.5rem;

    }

    #main-section2 ul li a:after{

        content:"";

        position:absolute;

        left:3.75rem;

        bottom:3.75rem;

        width:5.25rem;

        height:5.25rem;

    }

}

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

    #main-section2 ul{

        grid-template-columns: 1fr;

        gap: 1.875rem;

    }

}

/** main section3 ************************************/

#main-section3 ul{

    display:grid;

    grid-template-columns: repeat(4, 1fr);

    column-gap: 1.5rem;

    row-gap: 3.5rem;

    text-align: center;

}

#main-section3 ul .img-box{

    position: relative;

    border-radius: 1.5rem;

    overflow: hidden;

    font-size: 0;

    max-width: 320px;

    margin:0 auto 2rem;

}

#main-section3 ul .img-box:after{

    content:"";

    opacity: 0;

    position: absolute;

    top:0;

    left:0;

    bottom:0;

    right:0;

    border:2px solid var(--color-primary2);

    border-radius: 1.5rem;

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}

#main-section3 ul .img-box img{

    display: block;

}

#main-section3 ul strong{

    display: inline-block;

    font-size:2rem;

    font-weight: 600;

    line-height: 1;

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

    padding:.5px;

    border-bottom:1px solid rgba(51,51,51,0);

}

#main-section3 ul a:hover .img-box:after{

    opacity: 1;

}

#main-section3 ul a:hover strong{

    border-color:rgba(51,51,51,1);

}



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

    #main-section3 ul{

        grid-template-columns: repeat(2, 1fr);

        column-gap: 1.875rem;

        row-gap: 4.375rem;

    }

    #main-section3 ul .img-box{

        margin:0 auto 2.25rem;

    }

    #main-section3 ul strong{

        font-size:2.25rem;

    }

}

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

    #main-section3 ul{

        grid-template-columns: 1fr;

    }

}

/** main section4 ************************************/

#main-section4 .deco-text{

    display: block;

    margin-bottom:var(--main-margin);

    font-size:10rem;

    line-height:1;

    font-weight: 900;

    color:#e3edff;

    white-space: nowrap;

    margin-left:-3rem;

}

#main-section4 .deco-text > div:after{

    content:"";

    display: block;

    clear: both;

}

#main-section4 ul{

    display:grid;

    grid-template-columns: repeat(3, 1fr);

    gap:3rem;

}

#main-section4 ul li{

    overflow: hidden;

}

#main-section4 ul li a{

    position: relative;

    display: block;

    border-radius: 1.5rem;

    padding:3rem;

    border:1px solid #ddd;

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}

#main-section4 ul li a:after{

    content:"";

    opacity: 0;

    position: absolute;

    top:-1px;

    bottom:-1px;

    left:-1px;

    right:-1px;

    border:2px solid var(--color-primary2);

    border-radius: 1.5rem;

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}

#main-section4 ul li a:hover{

    border-color:var(--color-primary2);

}

#main-section4 ul li a:hover:after{

    opacity: 1;

}

#main-section4 ul li .cate{

    display:block;

    color:var(--color-primary);

    font-size:1.8rem;

    font-weight: 400;

    line-height:1;

    margin-bottom:1.5rem;

}

#main-section4 ul li .subject{

    display: block;

    margin-bottom:3.5rem;

    font-size:2rem;

    font-weight: 600;

}

#main-section4 ul li a:hover .subject{

    text-decoration: underline;

}

#main-section4 ul li .date{

    color:#999;

}

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

    #main-section4 ul{

        grid-template-columns: repeat(2, 1fr);

        gap:1.5rem;

    }

    #main-section4 ul li:nth-child(3){

        grid-column: 1 / span 2;

    }

}

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

    #main-section4 .deco-text{

        font-size:12.5rem;

    }

    #main-section4 ul li{

        overflow: hidden;

    }

    #main-section4 ul li a{

        padding:3.125rem;

    }

    #main-section4 ul li .cate{

        font-size:2rem;

        margin-bottom:1.875rem;

    }

    #main-section4 ul li .subject{

        margin-bottom:3.125rem;

        font-size:2.25rem;

    }

    #main-section4 ul li .date{

        font-size:1.75rem;

    }

}

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

    #main-section4 ul{

        grid-template-columns: 1fr;

        gap: 1.875rem;

    }

    #main-section4 ul li:nth-child(3){

        grid-column: 1;

    }

}



/** main section4 ************************************/

#main-section5{

    padding:15rem 0;

    background:url("../img/main/main-section5-bg.png") no-repeat center / cover;

    color:var(--color-white);

    text-align: center;

}

#main-section5 .main-title-box .desc{

    color:var(--color-white);

}

#main-section5 .link-box{

    display:flex;

    align-items: center;

    justify-content: center;

    gap:1rem;

}

#main-section5 .link-box a{

    width:27rem;

    height:6.6rem;

    line-height: 6.6rem;

    border:1px solid var(--color-white);

    border-radius: .8rem;

    font-weight: 500;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    transition: all .3s;

}

#main-section5 .link-box a:last-of-type{

    background:var(--color-white);

    color:#333;

}

#main-section5 .link-box a:hover,

#main-section5 .link-box a:last-of-type:hover{

    background:var(--color-primary);

    color:var(--color-white);

    border-color:var(--color-primary);

}



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

    #main-section5{

        padding:var(--main-margin) 0;

    }

    #main-section5 .link-box{

        flex-direction: column;

    }

}