#wrap {min-width:1200px;}
header {position:relative;border-bottom:1px solid #ddd;}
header .top-banner {background:#333;color:#fff;font-size:0.7rem;font-weight:300;line-height:2rem;}
header .top-banner>div {padding:0 0.75rem;position:relative;}
header .top-banner i {position:absolute;top:0.5rem;right:0.75rem;cursor:pointer;padding:0.25rem;background:#666;}

nav {position:relative;}
nav>div {padding:0 0.75rem;}
nav h1{float:left;width:20%;line-height:5rem;}
nav .gnb-menu {float:left;width:70%;font-size:0;text-align:right;}
nav .gnb-sns {float:right;font-size:0;text-align:right;}
nav .gnb-menu>li {display:inline-block;font-size:0.8rem;position:relative;}
nav .gnb-menu>li>a {display:block;padding:0 1.5rem;line-height:5rem;position:relative;}
nav .gnb-menu>li>a:after {content:"";display:block;width:1px;height:12px;background:#999;position:absolute;top:50%;right:0;transform:translateY(-50%)}
nav .gnb-menu>li:last-child>a:after {display:none;}

nav .gnb-sns>li {display:inline-block;font-size:0.8rem;position:relative;}
nav .gnb-sns>li>a {padding:0 1rem 0 1rem;font-size:0.8rem;line-height:5rem;position:relative;}
nav .gnb-sns>li>a:after {content:"";display:block;width:1px;height:12px;background:#999;position:absolute;top:50%;right:0;transform:translateY(-50%)}
nav .gnb-sns>li:last-child>a:after {display:none;}
nav .gnb-sns>li:last-child>a {padding:0 0 0 1rem;}

nav ul>li .gnb-submenu {height:0;overflow:hidden;transition:0.3s;position:absolute;top:5rem;left:50%;transform:translateX(-50%);padding:1rem 0 0 0;z-index:222;}
nav ul:hover>li .gnb-submenu {height:11rem;}

nav .gnb-menu:after {height:0;transition:0.3s;content:"";width:100%;background:#fff;border-bottom:1px solid #ddd;position:absolute;top:calc(5rem + 1px);left:0;z-index:111;}
nav .gnb-menu:hover:after {height:11rem;}

nav ul .gnb-submenu>li a {display:block;text-align:center;line-height:1.5rem;padding:0 2rem;}


.section {padding:5rem 0;text-align:center;}
.section h2 {margin:0 0 0.5rem 0;font-size:1.5rem;font-weight:500;}
.section p {margin:0 0 1rem 0;font-size:0.7rem;font-weight:300;}
.section figure img {width:100%;}
.section figure strong {display:block;margin:0.5rem 0 0.5rem 0;}
.section figure a {display:block;width:150px;margin:0 auto;border:1px solid #333;border-radius:0.25rem;line-height:1.5rem;font-size:0.7rem}


#main-visual {position:relative;height:25rem;background:#333;color:#fff;background:url(../img/main_visual01.jpg) no-repeat center center/cover}
#main-visual .slogan-text {position:absolute;top:10rem;left:50%;padding:0 0.75rem;text-align:left;width:1200px;transform:translateX(-50%)}
#main-visual h2 {margin:0 0 1rem 0;font-size:2.5rem;}
#main-visual p {line-height:1.25}


#content01 {background:#fff;}
#content01 figure {float:left;width:33.3333333%;padding:0 0.75rem;}

#event {background:#f2f2f2;}
#event figure {float:left;width:50%;padding:0 0.75rem;}

footer {padding:2.5rem 0;border-top:1px solid #ddd;}
footer address, footer .sns, footer .link {float:left;padding:0 0.75rem;}

footer address {width:60%;font-size:0.7rem;line-height: 1.25;}
footer .link {width:20%;text-align:right}
footer .sns {width:20%;text-align:right}
footer .link select {padding:0 1rem;background:#333;color:#fff;}
footer .sns i {padding:0.2rem;background:#333;font-size:1.3rem;color:#f2f2f2;}

.mopen {display:none;position:fixed;top:1.5rem;right:1rem;width:2rem;height:2rem;background:#fff;border-radius:5px;z-index:999;}

.mopen>span {display:block;position:absolute;top:0;left:0.25rem;width:1.5rem;height:1px;background:#333;transition:0.3s;}
.mopen>span:nth-child(1) {top:0.5rem;}
.mopen>span:nth-child(2) {top:1rem;}
.mopen>span:nth-child(3) {top:1rem;}
.mopen>span:nth-child(4) {top:1.5rem;}

.mopen.on>span:nth-child(1) {opacity:0;}
.mopen.on>span:nth-child(2) {transform:rotate(45deg)}
.mopen.on>span:nth-child(3) {transform:rotate(-45deg)}
.mopen.on>span:nth-child(4) {opacity:0;}


/*-----------------------

반응형 768px 이하

------------------------*/

@media (max-width:768px) {
    #wrap {min-width:auto;}
    header {position:relative;border-bottom:none;}
    header .top-banner {display:none;background:#333;color:#fff;font-size:0.7rem;font-weight:300;line-height:2rem;}
    header .top-banner>div {padding:0 0.75rem;position:relative;}
    header .top-banner i {position:absolute;top:0.5rem;right:0.75rem;cursor:pointer;padding:0.25rem;background:#666;}

    .container{width:100%; margin:0 auto;}
    .container:after{content:""; clear:both; display:block;}

    nav {position:relative;}
    nav>div {padding:0 0.75rem;}
    nav h1{float:left;width:20%;line-height:5rem;}
    nav .gnb-menu {position:fixed;top:0;left:-100%;background:#fff;float:none;width:calc(100% - 90px);height:100vh;font-size:0;text-align:left;border-right:1px solid #ddd;padding:2rem 1rem;transition:0.3s;z-index:999;}
    nav.on .gnb-menu {left:0;}
    nav .gnb-sns {display:none;float:right;font-size:0;text-align:right;}
    nav .gnb-menu>li {display:block;font-size:0.8rem;position:relative;}
    nav .gnb-menu>li>a {display:block;padding:0 0.5rem;line-height:2rem;border-bottom:1px solid #ddd;position:relative;}
    nav .gnb-menu>li>a:after {content:"+";display:block;width:10px;height:10px;background:transparent;position:absolute;top:0.5rem;right:0;transform:translateY(-50%);color:#ddd;}
    nav .gnb-menu>li:last-child>a:after {display:block;}

    nav .gnb-sns>li {display:inline-block;font-size:0.8rem;position:relative;}
    nav .gnb-sns>li>a {padding:0 1rem 0 1rem;font-size:0.8rem;line-height:5rem;position:relative;}
    nav .gnb-sns>li>a:after {content:"";display:block;width:1px;height:12px;background:#999;position:absolute;top:50%;right:0;transform:translateY(-50%)}
    nav .gnb-sns>li:last-child>a:after {display:none;}
    nav .gnb-sns>li:last-child>a {padding:0 0 0 1rem;}

    nav ul>li .gnb-submenu {height:0;overflow:hidden;background:#f2f2f2;transition:0.3s;position:static;top:0;left:0;transform:translateX(0);padding:0 0 0 0;z-index:222;}
    nav ul:hover>li .gnb-submenu {height:0;}
    nav ul>li .gnb-submenu.on {height:9.3rem;}

    nav .gnb-menu:after {display:none;height:0;transition:0.3s;content:"";width:100%;background:#fff;border-bottom:1px solid #ddd;position:absolute;top:calc(5rem + 1px);left:0;z-index:111;}
    nav .gnb-menu:hover:after {display:none;}

    nav ul .gnb-submenu>li a {display:block;text-align:left;line-height:1.5rem;padding:0 0.5rem;border-bottom:1px solid #ddd;}


    .section {padding:5rem 0;text-align:center;}
    .section h2 {margin:0 0 0.5rem 0;font-size:1.5rem;font-weight:500;}
    .section p {margin:0 0 1rem 0;font-size:0.7rem;font-weight:300;}
    .section figure img {width:100%;}
    .section figure strong {display:block;margin:0.5rem 0 0.5rem 0;}
    .section figure a {display:block;width:6rem;padding:0 1rem;margin:0 auto;border:1px solid #333;border-radius:0.25rem;line-height:1.5rem;font-size:0.7rem}


    #main-visual {position:relative;height:25rem;background:#333;color:#fff;background:url(../img/main_visual01.jpg) no-repeat center center/cover}
    #main-visual .slogan-text {position:absolute;top:4rem;left:0;padding:0.75rem 0.75rem;text-align:left;width:auto;transform:translateX(0)}
    #main-visual h2 {margin:0 0 1rem 0;font-size:2.5rem;}
    #main-visual p {line-height:1.25}


    #content01 {background:#fff;}
    #content01 figure {float:left;width:100%;padding:0.5rem 0.3rem;}

    #event {background:#f2f2f2;}
    #event figure {float:left;width:100%;padding:0.5rem 0.3rem;}

    footer {padding:2.5rem 0.3rem;border-top:1px solid #ddd;}
    footer address, footer .sns, footer .link {float:none;padding:0 0.3rem;}

    footer address {width:100%;font-size:0.7rem;line-height: 1.25;}
    footer .link {width:100%;text-align:left;}
    footer .sns {width:100%;text-align:left;padding:0.5rem 0.3rem;}
    footer .link select {padding:0 1rem;background:#333;color:#fff;}
    footer .sns i {padding:0.2rem;background:#333;font-size:1.3rem;color:#f2f2f2;}

    .mopen {display:block;}
}