@charset 'utf-8';
/* 폰트 */
/* font-family: Noto Sans KR 노토산스 */
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */

/* 공통 */
@media all and (max-width:767px){
    h2 {font-size:4em}
    h2 span{line-height: 65px}

    .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 {
        display: block;
        font-size: 1.3em;
        line-height: 30px;
        
    }
}

@media all and (min-width:768px) and (max-width:1279px){
    h2 {font-size:6em}
    h2 span{line-height: 100px}
    
    .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: 1.2em;
        line-height: 42px
    }
    .schedule p span:first-child:after {
        content: "";
        border-right: 1px solid #393a3a;
        margin: 0 10px;
    }
}

@media all and (min-width:1280px){
    h2 {font-size:7em}
    h2 span{line-height: 115px}
    
    .header-top{width: 95%}
    .area{width: 1280px}
    .visual_box{width: 1280px}

    .title_band {margin: 60px 0 30px 0;padding:10px 15px}
    
    .schedule p span {
        font-weight: 800;
        font-size: 1.2em;
        line-height: 42px
    }
    .schedule p span:first-child:after {
        content: "";
        border-right: 1px solid #393a3a;
        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;
    border-radius: 10px;
    background: #a2bee5;
    color: #fff;
    font-weight: 800;
    font-size: 1.2em;
    letter-spacing: -1px
}
.area{margin: 0 auto}

/* 헤딩태그 */
h2 {color: #393a3a;text-align: center;font-family: "TmonMonsori"}
h2 span{display: block;font-weight: 900}
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: #cce1ff;
    font-weight: 700;
}
.header-top .previous-site{float: right}
.header-top .previous-site li.active span {
    font-weight: 700;
    color: #cce1ff;
}

/* nav */
nav h1{float: left}
nav .nav-box ul{overflow: hidden;float: right}
nav .nav-box .gnb ul li span{color: #393a3a;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 #e99787
}

/* visual */
.visual {
    width:100%;
    background: #a2bee5;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 1000px 35%, 1900px 60%;
    background-position: bottom,bottom;
}
.bg_visual {
    text-align: center;
    padding: 140px 0 220px 0;
}
.visual_box {margin:0 auto}
.visual img {max-width: 100%}
.title_band {display:inline-block; border-radius: 10px;background: #e99787; font-size:19px; font-weight: 800; color: #fff}
.sub_text{margin-top: 10px; display:block; line-height: 1.5; font-size: 16px;color: #393a3a;font-weight: 700;font-size: 1.2em}

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

/*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}