@charset 'utf-8';

@media all and (max-width:479px){
    #wrap{min-width: 280px}
    h2 {font-size:3em}
    h2 span{display: inline-block}
    h2 span:first-child{line-height: 65px;margin: 0 0 5px 0}
    h2 span:last-child{font-size: 28px;line-height: 45px}

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

    .title_band {margin: 25px 0 20px 0;padding:7px 15px;font-size:16px;line-height: 16px}
    
    .schedule p{padding:10px 0;width: 90%;margin: 0 auto}
    .schedule p span{
        display: block;
        font-size: 1.1em;
        line-height: 30px;
    }
}
@media all and (min-width:480px) and (max-width:767px){

    h2 {font-size:3em}
    h2 span{display: inline-block}
    h2 span:first-child{line-height: 65px;margin: 0 0 5px 0}
    h2 span:last-child{font-size: 28px;line-height: 45px}

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

    .title_band {margin: 25px 0 20px 0;padding:7px 15px;font-size:18px;line-height: 18px}
    
    .schedule p{padding:10px 0;width: 80%;margin: 0 auto}
    .schedule p span{
        display: block;
        font-size: 1.3em;
        line-height: 30px;
    }
}
@media all and (min-width:768px) and (max-width:1279px){

    h2 {font-size:4.5em}
    h2 span{line-height: 100px}
    h2 span:last-child{font-size: 42px;line-height: 60px}
    
    .header-top{width: 95%}
    .area{width: 90%}
    .visual_box{width: 95%}

    .title_band {margin: 60px 0 30px 0;padding:10px 15px;font-size:22px;line-height: 22px}
    
    .schedule p span {
        font-weight: 800;
        font-size: 1.2em;
        line-height: 42px;
    }
    .schedule p span:first-child:after{
        content: "";
        border-right: 1px solid #fff;
        margin: 0 10px;
    }
}
@media all and (min-width:1280px){

    h2 {font-size:5.5em}
    h2 span{line-height: 100px}
    h2 span:last-child{font-size: 48px;line-height: 80px}
    .header-top{width: 95%}
    .area{width: 1280px}
    .visual_box{width: 1280px}

    .title_band {margin: 50px 0 25px 0;padding:10px 20px 8px 20px;font-size:22px;line-height: 22px}
    
    .schedule p span{
        font-weight: 800;
        font-size: 1.2em;
        line-height: 42px;
    }
    .schedule p span:first-child:after{
        content: "";
        border-right: 1px solid #fff;
        margin: 0 10px;
    }
}

body{color: #171717}

#container {width:100%}
#container section {margin: 0 auto 40px auto; padding: 0 0 50px 0}
button {
    width: 300px;
    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 span:first-child {color:#29496a;text-align:center;font-family:"TmonMonsori"}
h2 span{display: block;font-weight: 900}
h2 span:last-child{color: #5d5a5e;letter-spacing: -.065em}
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.2em; font-weight: 800}
h5 {line-height: 20px; font-weight: bold; font-size: 0.93em ; color: #393a3a}

#wrap{background: #fff}

/* 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: #fff}
.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: #fff;font-weight: 800;font-size: 1.1em}
nav .nav-box .gnb ul li span:hover {opacity: 0.7; transition: 0.8s}
nav .nav-box .gnb ul li:nth-child(1) span {border-bottom: 2px solid #29496a}

/* visual */
.visual {
    width:100%;
    background: #86a4c3;
    background-size: 1280px;
    background-repeat: no-repeat;
    background-position: bottom,bottom;
}
.bg_visual {text-align: center; padding: 120px 0 320px 0}
.visual_box {margin:0 auto}
.visual img {max-width: 100%}
.title_band {display:inline-block;font-weight:800;letter-spacing:-.065em;border-radius:5px;color:#29496a;background:#fff}
.sub_text{margin-top:10px;display:block;color:#fff;font-weight:700}

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

/*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: #555;color: #fff}