@charset 'utf-8';
@media all and (max-width:479px){

    h2 {font-size:3em}
    h2 span{display: block}

    nav{min-width: 280px}
    .header-top{width: 95%;min-width: 280px}
    .area{width: 100%}
    .visual_box{width: 100%}

    .title_band{margin: 25px 0 20px 0;padding:7px 15px}
    
    .schedule p{padding:10px 0}
    .schedule p span {
        font-weight: 800;
        font-size: 26px;
        line-height: 42px;
        letter-spacing: -0.4px;
    }
    #visual {
        width:100%;
        min-width: 280px;
        background-repeat: no-repeat;
        background-size:cover;
        background-position: center;
    }

    .visual-area{width: 90%;padding: 130px 0 0 0}
    .visual-area h2 {font-size:2.5em;color: #fff}
    .visual-area h2 span{line-height: 50px;display: block}
    .visual-area h2 span:nth-child(1){display: inline-block}
    .visual-area h2 span:nth-child(2){display: inline-block}
    .visual-area > div > p:nth-child(1){font-size: 2em;color: #fff}
    .visual-area > div > p:nth-child(3){margin: 40px 0 0 0}
    .visual-area > div > p:nth-child(3) a span{border:1px solid #fff;display: inline-block;width:150px;color: #fff;text-align: center;padding: 10px 0}

    #content-text > div{width: 960px}
    #content-text > div{padding: 40px 0;border:5px solid #556ec4}
    #content-text > div p{padding:0 40px;margin: 0 0 20px 0}
    #content-text > div p span{font-size: 20px;line-height:28px}

    #content-text > div{width: 480px}
    #content-text > div{padding: 30px 0;border:3px solid #556ec4}
    #content-text > div p{padding:0 20px;margin: 0 0 20px 0}
    #content-text > div p span{font-size: 20px;line-height:28px}

    .schedule-area > p{width: 480px}

}

@media all and (min-width:480px) and (max-width:767px){

    h2 {font-size:3.5em}
    h2 span{display: block}

    .header-top{width: 95%}
    .area{width: 100%}
    .visual_box{width: 100%}

    .title_band{margin: 25px 0 20px 0;padding:7px 15px}
    
    .schedule p{padding:10px 0}
    .schedule p span {
        font-weight: 800;
        font-size: 26px;
        line-height: 42px;
        letter-spacing: -0.4px;
    }
    #visual {
        width:768px;
        background-repeat: no-repeat;
        background-position: center;
        background-size:cover;
    }

    .visual-area{width: 90%;padding: 130px 0 0 0}
    .visual-area h2 {font-size:3em;color: #fff}
    .visual-area h2 span{line-height: 50px;display: block}
    .visual-area h2 span:nth-child(1){display: inline-block}
    .visual-area h2 span:nth-child(2){display: inline-block}
    .visual-area > div > p:nth-child(1){font-size: 2em;color: #fff}
    .visual-area > div > p:nth-child(3){margin: 40px 0 0 0}
    .visual-area > div > p:nth-child(3) a span{border:1px solid #fff;display: inline-block;width:150px;color: #fff;text-align: center;padding: 10px 0}

    #content-text > div{width: 960px}
    #content-text > div{padding: 40px 0;border:5px solid #556ec4}
    #content-text > div p{padding:0 40px;margin: 0 0 20px 0}
    #content-text > div p span{font-size: 20px;line-height:28px}

    #content-text > div{width: 480px}
    #content-text > div{padding: 30px 0;border:3px solid #556ec4}
    #content-text > div p{padding:0 20px;margin: 0 0 20px 0}
    #content-text > div p span{font-size: 20px;line-height:28px}

    .schedule-area > p{width: 480px}
}

@media all and (min-width:768px) and (max-width:1279px){

    .header-top{width: 95%}
    .area{width: 90%}
    .visual_box{width: 95%}

    .title_band {margin: 60px 0 30px 0;padding:10px 15px}
    
    .schedule p span {
        font-weight: 800;
        font-size: 26px;
        line-height: 42px;
        letter-spacing: -0.4px;
    }
    #visual {
        width:100%;
        background-repeat: no-repeat;
        background-size:cover;
        background-position: center;
    }
    .visual-area{width: 90%;padding: 130px 0 0 0}
    .visual-area h2 {font-size:3em;color: #fff}
    .visual-area h2 span{line-height: 50px;display: block}
    .visual-area h2 span:nth-child(1){display: inline-block}
    .visual-area h2 span:nth-child(2){display: inline-block}
    .visual-area > div > p:nth-child(1){font-size: 2em;color: #fff}
    .visual-area > div > p:nth-child(3){margin: 40px 0 0 0}
    .visual-area > div > p:nth-child(3) a span{border:1px solid #fff;display: inline-block;width:150px;color: #fff;text-align: center;padding: 10px 0}

    #content-text > div{width: 960px}
    #content-text > div{padding: 40px 0;border:5px solid #556ec4}
    #content-text > div p{padding:0 40px;margin: 0 0 20px 0}
    #content-text > div p span{font-size: 20px;line-height:28px}

    #content-text > div{width: 768px}
    #content-text > div{padding: 40px 0;border:4px solid #556ec4}
    #content-text > div p{padding:0 40px;margin: 0 0 20px 0}
    #content-text > div p span{font-size: 18px;line-height:26px}

    .schedule-area > p{width: 600px}
    
}
@media all and (min-width:1280px){

    .header-top{width: 95%}
    .area{width: 1180px}
    .visual_box{width: 1180px}

    .title_band {margin: 60px 0 15px 0;padding:10px 15px}
    
    .schedule p span {
        font-weight: 800;
        font-size: 26px;
        line-height: 42px;
        letter-spacing: -0.4px;
    }

    #visual {
        width:100%;
        background-repeat: no-repeat;
        background-size:cover;
        background-position: center;
    }
    .visual-area{width: 1280px;padding: 130px 0 0 0}
    .visual-area h2 {font-size:3em;color: #fff}
    .visual-area h2 span{line-height: 50px;display: block}
    .visual-area h2 span:nth-child(1){display: inline-block}
    .visual-area h2 span:nth-child(2){display: inline-block}
    .visual-area > div > p:nth-child(1){font-size: 2em;color: #fff}
    .visual-area > div > p:nth-child(3){margin: 40px 0 0 0}
    .visual-area > div > p:nth-child(3) a span{display: inline-block;width:150px;color: #fff;text-align: center;padding: 10px 0}

    #content-text > div{width: 960px}
    #content-text > div{padding: 40px 0;border:5px solid #556ec4}
    #content-text > div p{padding:0 40px;margin: 0 0 20px 0}
    #content-text > div p span{font-size: 20px;line-height:28px}

    .schedule-area > p{width: 600px}
}

body{color: #171717}
.visual-area > div > p:nth-child(3) a span:hover{opacity: 0.7}
#container {width:100%}
#container section{margin: 0 auto;margin:0 auto 50px auto}

button{
    width: 280px;
    margin: 20px auto 0 auto;
    display: block;
    padding: 15px 0;
    background: #003668;
    color: #fff;
    font-weight: 800;
    font-size: 1.2em;
    letter-spacing: -1px;
}
.area{margin: 0 auto}

h2 {color: #222;text-align: left;font-family: "TheJamsil5Bold"}
h2 span{font-weight: 900;letter-spacing: -.045em}
h3 {font-weight: 700;font-size: 1.7em; margin: 0 0 30px 0;text-align: center;font-family: "TmonMonsori";color: #393a3a}
h3:after {
    content:"";
    display:block;
    width:20px;
    margin:10px auto 10px auto;
    height:4px;
    border-bottom:4px solid #222;
}
h4 {font-size: 1.7em; font-weight: 700;text-align: center;font-family: "TmonMonsori";color: #393a3a;margin: 40px 0 0 0}
h4:after{
    content:"";
    display:block;
    width:20px;
    margin:10px auto 10px auto;
    height:4px;
    border-bottom:4px solid #222;
}
h5 {line-height:20px;font-weight:bold;font-size:0.93em;color:#393a3a}

#wrap{background: #fff}
section{position: relative}
/* header */
header{width: 100%;position: absolute;border-top:2px solid #ccc;z-index: 100}
header section{background: rgba(0,0,0,0.1)}
header section .header-top {margin: 0 auto; overflow: hidden}
.header-top ul{overflow: hidden;padding: 10px 0;display: inline-block}
.header-top ul li{float: left;margin: 0 10px 0 0;text-align: center}
.header-top ul li span { padding: 10px 0; font-size: 0.8em; color: #222}
.header-top .family-site{float: left}
.header-top .family-site li:first-child span {color:#29496a;font-weight:700}
.header-top .previous-site{float: right}
.header-top .previous-site li.active span {color:#29496a;font-weight:700}

/* nav */
nav h1{float: left}
nav .nav-box ul{overflow: hidden;float: right}
nav .nav-box .gnb ul li span{color: #444;font-weight: 800;font-size: 1.1em}
nav .nav-box .gnb ul li span:hover{opacity: 0.7; transition: 0.8s}

#visual{position:relative;top:68px;height: 500px;border:1px solid #ccc;background-repeat: no-repeat;margin:0 auto 50px auto}
#visual h2 em{color: #526bc0}
.visual-area{margin: 0 auto}
.visual-area h2 span:last-child{
    font-size: 22px;
}

.visual-text{padding-top: 80px}
.visual_box {margin:0 auto}
.visual img {max-width: 100%}
.title_band{
    display:inline-block;
    font-size:22px;
    font-weight: 800;
    letter-spacing: -.065em;
    border-radius: 10px;
    color: #29496a;
    background: #9fb3e3;
    color: #fff;
}
.sub_text{margin-top: 10px;display:block;line-height:1.5;font-size:16px;color:#fff;font-weight:700;font-size:1.2em}

/*schedule*/
.schedule{margin: 30px 0 0 0}
.schedule p{border-top:2px solid #222;border-bottom: 2px solid #222;display: inline-block}
.schedule p span{font-weight: 800;color: #222;padding: 10px 0}

/*host*/
.host_box{background: rgba(255,255,255,0.4);border-radius:20px;width:70%;margin:30px auto 0 auto}
.host_box p{display: inline-block;margin: 0 30px}
.host_box p span{font-size: 1.2em;margin: 0 5px;line-height: 50px;color:#fff}
.host_box p span img{margin:7px 0 0 0}
.host_box p span:first-child {
    background: #e99787;
    border-radius: 2px;
    font-weight: 900;
    padding: 5px 20px;
    border-radius: 10px;
}
footer{background: #fff;color: #222}

#content-text{width: 100%;background: #d0e1f9}
#content-text > div{border:5px solid #556ec4;border-radius: 10px;background: #fff;margin: 0 auto;box-shadow: 1px 7px 5px 2px rgba(0,0,0,0.2);}
#content-text > div p span{letter-spacing:-0.4px;text-align: justify;display: inline-block;font-weight: 600}

/*schedule*/
#schedule h3{padding: 50px 0 0 0}
.schedule-area{margin:100px auto 0 auto}
.schedule-area > p{margin: 0 auto}
.schedule-area > p span{font-size: 22px;line-height:30px;display: block;font-family: 'Noto Sans KR';margin: 0 0 20px 0;font-weight: 700;letter-spacing: -0.4px}
.schedule-area > p span em{background: #555;color: #fff;border-radius: 5px;padding: 5px 20px;font-size: 18px;font-weight: 600}

table{width: 100%;border-top:1px solid #ccc;border-bottom: 1px solid #ccc;font-size: 1.2em}
table thead{text-align: center}
table thead tr {background: #003668;margin: 10px 0}
table thead td{padding: 12px 0;color: #fff;font-weight: 800}

table tbody{text-align: center}
table tbody tr{border-bottom: 1px solid #ccc}
table tbody td{padding: 12px 0;font-weight: 600;vertical-align: middle}
table tbody td:first-child{border-right: 1px solid #ccc}
table tbody td:last-child{
    text-align: left;
    padding: 20px 10px;
    line-height: 26px;
    letter-spacing: -.065em;
}
table tbody td em{font-size: 14px;display: block}
table tbody td p span{display: block}
table tbody td:nth-child(3){text-align: left;width: 80%;margin: 0 auto;display: inline-block}
td strong{color: #003686;font-weight: 800}
td img{width: 30px;margin: 0 auto}

.visual-area > div > p:nth-child(3) a span{
    background: #014d8b;
    font-weight: 700;
    letter-spacing: -.065em;
    font-size: 18px;
}
.schedule-intro{
    border:1px solid #ccc;
    padding: 35px 30px 20px 30px;

}
.schedule-intro p{}
.schedule-intro p span{
    display: block;
    line-height: 26px;
    font-size: 22px;
    display: block;
    font-family: 'Noto Sans KR';
    margin: 0 0 20px 0;
    font-weight: 700;
    letter-spacing: -.065em
}
.schedule-intro p span em{
    background: #555;
    color: #fff;
    border-radius: 5px;
    padding: 5px 20px;
    font-size: 15px;
    font-weight: 600;
    margin: 0 10px 0 0;
}