@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 헤더영역 */
*{box-sizing: border-box;}
a {text-decoration: none;}
header {width: 100%;height: 85px;  z-index: 1000;}
nav>* {font-family: 'Noto Sans KR', sans-serif;color: black;}
nav {position: relative;max-width: 1200px;width: 100%;height: 100%;margin: auto;display: flex;}
.logo {width: 160px;height: 60px;background-image: url(../img/train_img/symbol.png);background-size: 100%;background-repeat: no-repeat;background-position: center;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);color: transparent;cursor: pointer;}
.menu_con>a{font-size: 14px;width: 90px;height: 25px;text-align: center;position: relative;top: 50%;display: inline-block;color: black;}
.menu_con>a:hover {color: #999;transition: none;}
.gnb>button {position: absolute;border: none;background-color: transparent;top: 50%;cursor: pointer;}
.gnb>button:hover {color: #999;}
.lang {right: 5%;}
.family {right: 10%;}
.fas {position: absolute;right: -15%;top: 20%;}
.fa-caret-up {display: none;}
.family>.fas {display: none;}
.family>.fas.to {display: block;}
.lang>.fas {display: none;}
.lang>.fas.to {display: block;}
.button_list {border: 1px solid #999;border-top: 2px solid black;background-color: white;position: absolute;text-align: center;display: flex;flex-direction: column;justify-content: space-between;top: 100%;opacity: 0; z-index: -1;}
.lang_list {height: 0px;width: 100px;right: 3%;transition: .3s;}
.lang_list>a:hover {color: #999;}
.lang_list.to {height: 80px;width: 100px;opacity: 1; z-index: 20;}
.family_list {right: 8%;width: 120px;height: 0px;transition: .3s;}
.family_list>a,.lang_list>a {color: black;font-size: 10pt;}
.family_list>a:hover {color: #999;}
.family_list.to {width: 120px;height: 100px;opacity: 1; z-index: 20;}
/* 헤더영역 */

body{
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
section{
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin: auto;
}

.section_nav{
    width: 360px;
    height: 880px;
    position: absolute;
    left: 0; bottom: 0;
    background-color: #0e4f65;
    
}

.section_nav>a,
.section_nav>ul{
    color: white;
    left: 50%;
    transform: translate(-50%);
    font-size: 15pt;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
}


.section_nav > a{
    position: absolute;
    top: 20%;
}

.section_nav>ul{
    position: absolute;
    top: 30%;
    width: 100%;
    text-align: center;
    line-height: 40px;
}
.section_nav>ul:nth-of-type(2){
    top: 55%;
}
.section_nav > a:hover,
.section_nav>ul>li:hover{
    color: #999;
}

.section_nav>img{
    position: absolute;
}

.logo1{
    height: 100px;
    right: 0;
    top: 3%;
}
.logo2{
    height: 70px;
    left: -13%;
    top: 5%;
}

footer{
    width: 100%;
    max-width: 1200px;
    height: 50px;
    position: absolute;
    bottom: 0;
}
footer>div{
    width: 100%;
    max-width: 1200px;
    height: 100%;
    background-color: black;
    position: relative;
}
footer>div>span{
    color: white;
    position: absolute;
    left: 50%;  top: 50%;
    transform: translate(-50% , -50%);
}



.section_nav>ul>li:nth-of-type(1){
    color: #999;
}

/* 공통요소 */
.fas{top: 50%;transform: translateY(-50%);z-index: 10;cursor: pointer;}
.fa-angle-up{right: 13%;}
.fa-angle-down{right: 10%;}
.fa-angle-double-up{right: 16%;}
.fa-angle-double-down{right: 7%;}
.fa-plus{right: 4%; top: 50%;font-size: 20px;}
.hd{width: 0;height: 50% !important;}

.kindergarden>.slide_con.on,
.elementary>.slide_con.on,
.six>.slide_con.on,
.eleven>.slide_con.on,
.sixteen>.slide_con.on{
    left: 0;
}
.slide_con
{
    width: 100%;
    max-width: 1200px;
    bottom: 0;
    position: relative;
    left: 100%;
    transition: 1s;
}

.kindergarden_sp,
.elementary_sp,
.six_sp,
.eleven_sp,
.sixteen_sp{
    position: absolute;
    width: 100%;
    max-width: 1200px;
    height: 50px;
    font-size: 20pt;
    font-family: 'Noto Sans KR', sans-serif;
    padding: 10px 0 10px 100px;
    z-index: 10;
    left: 100%;
    transition: 1s;
}
.elementary_sp.on,
.six_sp.on,
.eleven_sp.on,
.sixteen_sp.on{
    left: 0;
}
.introduction,
.review{
    width: 100%;
    max-width: 1200px;
    height: 100%;
    position: absolute;
    top: 85px;
    padding-top: 30px;
    overflow: hidden;
    left: 100%;
    transition: 1s;
}
.elementary,
.six,
.eleven,
.sixteen{
    width: 100%;
    height: calc(100% - 85px);
    overflow: hidden;
    position: absolute;
    top: 85px;

}
.six>.slide_con>.slide>li>span:nth-of-type(1),
.eleven>.slide_con>.slide>li>span:nth-of-type(1),
.sixteen>.slide_con>.slide>li>span:nth-of-type(1){
    color: #6AA5D9;
}
.six>.slide_con>.slide>li>span:nth-of-type(2),
.eleven>.slide_con>.slide>li>span:nth-of-type(2),
.sixteen>.slide_con>.slide>li>span:nth-of-type(2){
    top: 80%;
}
.slide>li>img{
    width: 80%;
    position: relative;
    top: 45%;left: 50%;
    transform: translate(-50% , -50%);
}
.slide>li span{
    position: absolute;
    text-align: center;
    line-height: 25px;
    font-family: 'Noto Sans KR', sans-serif;
    top: 75%;
    right: 50%;
    transform: translateX(50%);
}
.introduction.on,
.review.on{
    top: 60%;
    left: 50%;
    transform: translate(-50% , -50%);
    transition: 1s;
}
.introduction>div,
.review>div{
    height: 80%;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}
/* 공통요소 */
/* 유치부 */
.kindergarden{
    width: 100%;
    height: calc(100% - 85px);
    overflow: hidden;
}
.kindergarden>.slide_con{
    height: calc(250%);
}
.kindergarden>.slide_con>.slide{
    width: 100%;
    height: calc(100% / 5);
    display: flex;
}
.kindergarden>.slide_con>.slide>li{
    width: calc(100% / 3);
    height: 100%;
    position: relative;
}
.kindergarden_sp.on{
    top: 9%;
    left: 18%;
}
/* .kindergarden>.slide_con.to{
    border: 1px solid red;
    width: 100vw;
    height: 100%;

}
.kindergarden>.slide_con>.slide.to{
    border: 1px solid red;
    width: calc(100% / 2);

     */
/* 유치부 */
/* 대회소개 */
.introduction>span:nth-child(1){
    position: absolute;
    width: 100%;
    max-width: 1200px;
    height: 50px;
    font-size: 20pt;
    font-family: 'Noto Sans KR', sans-serif;
    padding: 10px 0 10px 100px;
    z-index: 10;
    transition: 1s;
}
.introduction>span:nth-child(1).on{
    left: 0;
}
.introduction>div>span{
    position: absolute;
    font-size: 0.9em;
    line-height: 30px;
    font-family: 'Noto Sans KR', sans-serif;
}
.introduction>div>span:nth-child(2){top:15%;}
.introduction>div>span:nth-child(3){top: 30%;}
.introduction>div>span:nth-child(4){top: 60%; font-size: 1.2em;}
.introduction>div>span:nth-child(5){top: 80%; right: 5%; font-size: 1.5em;}
.introduction>div>span:nth-child(5)>img{position: absolute; bottom: -50%; width: 150px;}
/* 대회소개 */
/* 심사평 */
.review>span:nth-child(1){
    position: absolute;
    width: 100%;
    max-width: 1200px;
    height: 50px;
    font-size: 20pt;
    font-family: 'Noto Sans KR', sans-serif;
    padding: 10px 0 10px 100px;
    z-index: 10;
    transition: 1s;
}
.review>div>span{
    position: absolute;
    font-size: 0.9em;
    line-height: 30px;
    font-family: 'Noto Sans KR', sans-serif;
}
.review>div>span:nth-child(2){top: 10%;}
.review>div>span:nth-child(3){top: 25%;}
.review>div>span:nth-child(4){top: 35%;}
.review>div>span:nth-child(5){top: 45%;}
.review>div>span:nth-child(6){top: 50%;}
.review>div>span:nth-child(7){top: 55%;}
.review>div>span:nth-child(8){top: 75%; right: 0; font-size: 1.2em;}
.review>div>span:nth-child(9){top: 80%; right: 0; text-align: right;}
/* 심사평 */
/* 초등부 */
.elementary>.slide_con{
    height: calc(450%);
}
.elementary>.slide_con>.slide{
    width: 100%;
    height: calc(100% / 9);
    display: flex;
}
.elementary>.slide_con>.slide>li{
    width: calc(100% / 3);
    height: 100%;
    position: relative;
}
/* 초등부 */
/* 2006 ~ 2010년 */
.six>.slide_con{
    height: calc(450%);
}
.six>.slide_con>.slide{
    width: 100%;
    height: calc(100% / 9);
    display: flex;
}
.six>.slide_con>.slide>li{
    width: calc(100% / 3);
    height: 100%;
    position: relative;
}
/* 2006 ~ 2010년 */
/* 2011 ~ 2015년 */
.eleven>.slide_con{
    height: calc(450%);
}
.eleven>.slide_con>.slide{
    width: 100%;
    height: calc(100% / 9);
    display: flex;
}
.eleven>.slide_con>.slide>li{
    width: calc(100% / 3);
    height: 100%;
    position: relative;
}
/* 2011 ~ 2015년 */
/* 2016 ~ 2019년 */
.sixteen>.slide_con{
    height: calc(450%);
}
.sixteen>.slide_con>.slide{
    width: 100%;
    height: calc(100% / 9);
    display: flex;

}
.sixteen>.slide_con>.slide>li{
    width: calc(100% / 3);
    height: 100%;
    position: relative;
}
/* 2016 ~ 2019년 */