@charset 'utf-8';

@media all and (max-width:479px){

    #wrap{min-width: 280px}
    h2 {font-size:3.2em}
    h2 span{display: inline-block}
    h2 span:first-child{line-height: 65px;margin: 0 0 0 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: 10px 0 8px 0;padding:9px 18px;font-size:17px;line-height: 17px}
    
    .schedule p{padding:10px 0;width: 90%;margin: 0 auto}
    .schedule p span{
        display: block;
        font-size: 16px;
        line-height: 26px;
    }

}
@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: 20px;
        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: 20px;
        line-height: 30px;
    }
}
@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{padding: 15px 0}
    .schedule p span{
        font-weight: 800;
        font-size: 20px;
        line-height: 30px;
    }
}

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: #54467b;
    color: #fff;
    font-weight: 800;
    font-size: 1.2em;
    border-radius: 40px;
    letter-spacing: -1px;
}
.area{margin: 0 auto}

/* 헤딩태그 */
h2 span:first-child{
    color:#fff;
    text-align:center;
    font-family:"TmonMonsori";
}
h2 span{
    display: block;
    font-weight: 900;
}
h2 span:last-child{
    color: #fff;
    letter-spacing: -.065em;
}
h3 {
    font-weight: 700;
    font-size: 1.7em; 
    margin: 0 0 30px 0;
    text-align: center;
    font-family: "TmonMonsori";
    color: #222;
}
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: #fff}

#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: #b097b1; font-weight: 700}
.header-top .previous-site{float: right}
.header-top .previous-site li.active span {color: #e9ceea;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 #e9ceea}

/* visual */
.visual {
    width:100%;
    background: #2c2750;
    background-size: 680px;
    background-repeat: no-repeat;
    background-position: bottom,bottom;
    height: 1000px;
}
.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:#fff;
    background:#aa6e72;
}
.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;
    padding: 0 40px;
}
.schedule p span{
    font-weight: 800;
    color: #fff;
    display: block;
    letter-spacing: -.065em;
}
.schedule p .detail-address{
    font-size: 16px;
    font-weight: 500;
}

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