@font-face {
    font-family: gsdr;
    src: url(/lms/css/font/aGSDR.woff) format('woff');
}
@font-face {
    font-family: vitamin;
    src: url(/lms/css/font/avitamin.woff) format('woff');
}
@font-face {
    font-family: barn;
    src: url(/lms/css/font/abarn.woff) format('woff');
}


li {list-style: none;}
span,p {color: #000;}
a {text-decoration: none;}
img {display: block;}


/* nav */
header {width: 100%;}
header .bg {
    position: absolute;
    top: 154px;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 400px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}
nav {width: 1200px;margin: 0 auto;font-size: 18px;font-weight: 500;}
nav .mainMenu {position: relative;top: 0;left: 0;}
nav .mainMenu, .subWrap li {display: flex;justify-content: space-between;}
nav .subWrap {width: 100%;padding-top: 10px;}
nav .mainMenu>li, .subWrap a {
    display: block;
    padding: 5px 20px;
    width: 200px;
    text-align: center;
    margin-bottom: 8px;
    /* border: 1px solid red; */
}
nav .mainMenu>li { margin-bottom: 15px;}
nav .subWrap a {font-size: 16px; font-weight: 300;}
nav .mainMenu>li>a:hover {
    border-bottom: 2px solid #ee394d;
    color: #ee394d; 
    font-weight: bold;
}
nav .subWrap a:hover {color: #ee394d;}
nav .subWrap {
    position: absolute;
    width: 1200px;
    height: 400px;
    background: #fff;
    z-index: 200;
}

/* //nav */

/* main */
#main {width: 100%;height: 650px;background-image: url(/lms/data/file/B01/20a01/lhj/bg.jpg); background-repeat: no-repeat; background-size: cover;}
#main .main_wrap {
    width: 1200px;
    height: 650px;
    margin: 0 auto;
    padding: 110px 20px;
}
#main .main_wrap > ul {display: flex;flex-wrap: wrap;}
#main .main_wrap .left {
    width: 60%;
    text-align: center;
    color: #fff;
    padding-top: 30px;
    margin-right: 50px;
}
#main .main_wrap .left p {
    font-size: 25px;
    font-weight: 600;
    color: #38ffff;
}
#main .main_wrap .left > p > span {color: #fc59f8;}
#main .main_wrap .left > p:nth-child(2) {color: #fff;}
#main .main_wrap .left h1 {
    font-family: "barn";
    font-size: 52px;
    font-weight: normal;
}
#main .main_wrap .left h5 {
    font-size: 18px;
    font-weight: 400;
}

/* ========== 버튼 설정 ========= */
#main .main_wrap .left .button {width: 100%;}

:active,
:hover,
:focus {
    outline: 0 !important;
    outline-offset: 0;
}
::before,
::after {
    position: absolute;
    content: "";
}
#main .main_wrap .left .button {margin-top: 50px;}
/* ======== 버튼 shape ========= */
#main .main_wrap .left .button .btn01, #main .main_wrap .left .button .btn02 {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    background-color: transparent;
    border: none;
    margin: 0px 25px 15px;
    width: 220px;
    border-radius: 100px;
    overflow: hidden;
}
#main .main_wrap .left .button .btn01 span, #main .main_wrap .left .button .btn02 span {
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    transition: 0.3s;
}
/* ======== 버튼 shape end ========= */

/* ======== 교육비 버튼=========== */
.btn01::before {
    background-color: #ce069f;
    transition: 0.3s ease-out;
    border-radius: 100px;
}
.btn01 span {
    color: #fff;
    border: 2px solid #ce069f;
    transition: 0.2s 0.1s;
    border-radius: 100px;
}
.btn01 span:hover {
    color: #fff;
    transition: 0.2s 0.1s;
    font-weight: bold;
    border: 2px solid #fff;
}
.btn01::before {
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
.btn01:hover::before {width: 0%;}
/* ======== 교육비 버튼 end=========== */

/* ======== 교육신청버튼 =========== */
.btn02::before {
    background-color: #fff;
    transition: 0.3s ease-out;
    border-radius: 100px;
}

.btn02 span {
    color: #fff;
    border: 2px solid #ce069f;
    transition: 0.2s;
    border-radius: 100px;
}

.btn02 span:hover {
    color: #ce069f;
    transition: 0.2s 0.1s;
    font-weight: bold;
    border: 2px solid #fff;
}
.btn02::before {
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 0%;
}

.btn02:hover::before {width: 100%;}
/* ========교육신청버튼 end=========== */

#main .main_wrap .right {width: 32%;}
#main .main_wrap .right img {object-position: right;}
/* ================== main end ==================*/

/* ================== sub01 ========================= */
#sub01 {width: 100%;background-color:#d2e0ff;}
#sub01 .sub01_wrap {width: 1200px; margin: 0 auto;padding: 100px 30px;}
#sub01 .sub01_wrap li:nth-child(1) {height: 20%; /*border: 1px solid gold;*/}
#sub01 .sub01_wrap li:nth-child(1) {
    font-size: 52px;
    font-family: "vitamin";
    font-weight: normal;
    color: #ff8080;
    text-align: center;
    text-shadow: -1px 0 #542113, 0 1px #542113, 1px 0 #542113, 0 -1px #542113;
}
#sub01 .sub01_wrap li:nth-child(2) {
    height: 40%;
    /* border: 1px solid gold; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}
#sub01 .sub01_wrap li:nth-child(2) .images {
    width: 42%;
    overflow: hidden;
    margin-right: 20px;
    /* border: 1px solid violet; */
}
#sub01 .sub01_wrap li:nth-child(2) .text {width: 43.5%; /*border: 1px solid blue;*/}
#sub01 .sub01_wrap li:nth-child(2) .text h1 {font-size: 30px;margin-bottom: 30px;}
#sub01 .sub01_wrap li:nth-child(2) .text p {font-size: 16px;}
#sub01 .sub01_wrap li:nth-child(3) {
    height: 60%;
    /* border: 1px solid gold; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
}
#sub01 .sub01_wrap li:last-child {padding-left: 110px;}
/* ================== sub01 end ========================= */

/* ================== sub02 ========================= */
#sub02 {
    width: 100%;
    background-image: url(/lms/data/file/B01/20a01/lhj/bg03.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
#sub02 .sub02_wrap {
    width: 1200px;
    margin: 0 auto;
    padding: 100px 30px;
}
#sub02 .sub02_wrap .text {height: 40%; text-align: center;}
#sub02 .sub02_wrap .text h1 {
    font-size: 50px;
    font-family: "vitamin";
    font-weight: normal;
    color: #fff;
    margin-bottom: 20px;
}
#sub02 .sub02_wrap .text h1 > span {
    color: #12ffd7; 
    text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;
} 
#sub02 .sub02_wrap .text p {font-size: 18px;color: #fff;font-weight: 500;}
#sub02 .sub02_wrap .text p > span {color: #ffe35a;}
#sub02 .sub02_wrap .text h3 {font-size: 30px; color: #fff; margin-top: 30px;}
#sub02 .sub02_wrap .text h3 > .cyan {
    color: #12ffd7;
    text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;
}
#sub02 .sub02_wrap .text h3 > .yellow {
    color: #ffe979;
    text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;
}
#sub02 .sub02_wrap .img div:nth-child(1) {margin-left: 12rem;}
#sub02 .sub02_wrap .img div:nth-child(2) {margin-left: 12rem;}
/* ================== sub02 end ========================= */

/* ================== sub03 ========================= */
#sub03 {width: 100%;background-color: #4f0082;}
#sub03 .sub03_wrap {
    width: 1200px;
    margin: 0 auto;
    padding: 100px 30px 0;
}
#sub03 .sub03_wrap .text h1 {
    font-size: 50px;
    font-family: "vitamin";
    font-weight: normal;
    color: #92faff;
    margin-bottom: 40px;
}
#sub03 .sub03_wrap .text h3 {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
#sub03 .sub03_wrap .text p {
    font-size: 18px;
    color: #fff;
    margin-bottom: 6rem;
}
#sub03 .sub03_wrap .img img {margin-left: auto;}
/* ================== sub03 end ========================= */

/* ================== sub04 ========================= */
#sub04 {
    width: 100%;
    height: 1480px;
    background-image: url(/lms/data/file/B01/20a01/lhj/bg04.jpg);
    background-size: contain;
}
#sub04 .sub04_wrap {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 100px 30px 0;
}
#sub04 .sub04_wrap .text {text-align: center;}
#sub04 .sub04_wrap .text h1 {
    font-size: 36px;
    font-family: "gsdr";
    font-weight: normal;
    font-style: italic;
}
#sub04 .sub04_wrap .text h1 > span {color: #ff891f; margin-bottom: 10px;}
#sub04 .sub04_wrap .text h1 > .big {font-size: 60px;}
#sub04 .sub04_wrap .text p {
    font-size: 52px;
    font-family: "vitamin";
    font-weight: normal;
    color: #ff527b;
    margin-bottom: 4rem;
}
#sub04 .sub04_wrap .img_wrap01 {display: flex; justify-content: center;}
#sub04 .sub04_wrap .img_wrap01 img:nth-child(1) {margin-right: 10px;}
#sub04 .sub04_wrap .img_wrap02 {display: flex; justify-content: center;margin-top: 3rem;}
#sub04 .sub04_wrap .img_wrap02 img:nth-child(2) {margin-right: 10px;}
/* ================== sub04 end ========================= */

/* ================== sub05 ========================= */
#sub05 {background-color: #ffefdc;}
#sub05 .sub05_wrap {
    width: 1200px;
    margin: 0 auto;
    padding: 100px 30px 0;
}

/* 텍스트 */
#sub05 .sub05_wrap .text {text-align: center;}
#sub05 .sub05_wrap .text h1 {
    font-size: 52px;
    font-family: "vitamin";
    font-weight: normal;
}
#sub05 .sub05_wrap .text h1 > span {color: #6d76ec;}
#sub05 .sub05_wrap .text h3 {font-size: 30px;margin-bottom: 30px;}
#sub05 .sub05_wrap .text h3 .highlight {position: relative; z-index: 0;}
#sub05 .sub05_wrap .text h3 .highlight::before {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 20px;
    background-color: #e2cfff;
    content: '';
}
#sub05 .sub05_wrap .text p {font-size: 18px; font-weight: 500; margin-bottom: 3rem;}

/* 박스 */
#sub05 .sub05_wrap .midle ul {display: flex; flex-wrap: wrap; justify-content: center;}
#sub05 .sub05_wrap .midle li {
    width: 464px;
    background-color: #fff;
    padding: 40px;
}
#sub05 .sub05_wrap .midle .left {margin-right: 20px;}
#sub05 .sub05_wrap .midle li div:nth-child(1) {
    width: 314px;
    height: 66px;
    background-color: #ff8710;
    border-radius: 66px;
    padding-top: 8px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin: 0 auto;
}
#sub05 .sub05_wrap .midle li div:nth-child(2) {padding-left: 7rem;padding-top: 20px;}
/* 박스 end */

#sub05 .sub05_wrap .img {padding-bottom: 7rem;}
/* ================== sub05 end ========================= */

/* ================== sub06 ========================= */
#sub06 {background-color: #e8e8e8;}
#sub06 .sub06_wrap {
    width: 1200px;
    margin: 0 auto;
    padding: 100px 30px 0;
}
/* 텍스트 */
#sub06 .sub06_wrap .text {text-align: center;}
#sub06 .sub06_wrap .text h1 {
    font-size: 52px;
    font-family: "vitamin";
    font-weight: normal;
    margin-bottom: 20px;
}
#sub06 .sub06_wrap .text h1 > span {color: #6d76ec;}
#sub06 .sub06_wrap .text h3 {font-size: 30px; font-weight: 700; margin-bottom: 20px;}
#sub06 .sub06_wrap .text p {font-size: 18px;}
/* 텍스트 end */

/* 박스 */
#sub06 .sub06_wrap .box_wrap {padding: 6rem 0 8rem;}
#sub06 .sub06_wrap .box_wrap > ul {display: flex; flex-wrap: wrap; justify-content: space-between}
#sub06 .sub06_wrap .box_wrap .box {
    width: 328px;
    height: 352px;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px 14px;
}
#sub06 .sub06_wrap .box_wrap .box .boxtxt {
    width: 238px;
    height: 55px;
    background-color: #001f56;
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    line-height: 55px;
    border-radius: 55px;
    margin: 0 auto;
}
#sub06 .sub06_wrap .box_wrap .box .boxtxt.c02 {background-color: #00337c;}
#sub06 .sub06_wrap .box_wrap .box .boxtxt.c03 {background-color: #004fc1;}

#sub06 .sub06_wrap .box_wrap .box div:nth-child(2) {margin-top: 20px;}
/* 삼각형 */
#sub06 .sub06_wrap .box_wrap .triangle {display: flex; align-items: center;}
#sub06 .sub06_wrap .box_wrap .triangle div {
    width: 0px;
        height: 0px;
        border-top: 15px solid transparent;
        border-left: calc(15px * 1.732) solid #001f56;
        border-bottom: 15px solid transparent;
}