@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700&display=swap');

/* visual */
.user#main #visual{height:58.1em; padding-top:10.2em; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.user#main #visual > .layout > .head,
.user#main #visual > .layout > .midd{max-width:65em;}
.user#main #visual > .layout > .head > span,
.user#main #visual > .layout > .head > strong{display:block; line-height:1.4;}
.user#main #visual > .layout > .head > span{font-weight:300; font-size:2.8em; color:#7A7A7A;}
.user#main #visual > .layout > .head > strong{font-family: 'Noto Serif KR', serif; font-weight:500; font-size:5.5em;}
.user#main #visual > .layout > .midd{margin-top:6.6em;}
.user#main #visual > .layout > .midd > ul{margin-left:-3em;}
.user#main #visual > .layout > .midd > ul:after{content:""; display:block; clear:both;}
.user#main #visual > .layout > .midd > ul > li{float:left; width:calc((100% - 1px) / 4); text-align:center;}
.user#main #visual > .layout > .midd > ul > li:nth-child(n+5){margin-top:3em;}
.user#main #visual > .layout > .midd > ul > li > a{display:block;}
.user#main #visual > .layout > .midd > ul > li > a:before{
    content:""; display:block; width:5em; height:5em; margin:0 auto 1em; background-repeat:no-repeat; background-position:center center; background-size:contain;
    -webkit-transition:transform 0.2s linear;
    transition:transform 0.2s linear;
}
.user#main #visual > .layout > .midd > ul > li:nth-child(1) > a:before{background-image:url(../../../images/site/erw/main/icon_list_1.svg);}
.user#main #visual > .layout > .midd > ul > li:nth-child(2) > a:before{background-image:url(../../../images/site/erw/main/icon_list_2.svg);}
.user#main #visual > .layout > .midd > ul > li:nth-child(3) > a:before{background-image:url(../../../images/site/erw/main/icon_list_3.svg);}
.user#main #visual > .layout > .midd > ul > li:nth-child(4) > a:before{background-image:url(../../../images/site/erw/main/icon_list_4.svg);}
.user#main #visual > .layout > .midd > ul > li:nth-child(5) > a:before{background-image:url(../../../images/site/erw/main/icon_list_5.svg);}
.user#main #visual > .layout > .midd > ul > li:nth-child(6) > a:before{background-image:url(../../../images/site/erw/main/icon_list_6.svg);}
.user#main #visual > .layout > .midd > ul > li:nth-child(7) > a:before{background-image:url(../../../images/site/erw/main/icon_list_7.svg);}
.user#main #visual > .layout > .midd > ul > li:nth-child(8) > a:before{background-image:url(../../../images/site/erw/main/icon_list_8.svg);}
.user#main #visual > .layout > .midd > ul > li > a > span{font-size:2em; color:#222;}

.user#main #visual > .layout > .midd > ul > li > a:hover:before{
    -webkit-transform:translateY(-0.5em);
    transform:translateY(-0.5em);
}
@media screen and (max-width: 1024px) {
    .user#main #visual{font-size:0.8em;}
    .user#main #visual > .layout > .midd{max-width:52em;}
}
@media screen and (max-width: 700px) {
    .user#main #visual{background-position:right 40% center;}
}
@media screen and (max-width: 600px) {
    .user#main section#sec_1{height:37.5em;}
    .user#main #visual{height:23.5em; padding:0;}
    .user#main #visual > .layout{padding-top:23.5em;}
    .user#main #visual > .layout > .head{
        position:absolute; left:3em; top:13em;
        transform:translateY(-50%);
    }
    .user#main #visual > .layout > .head > span{display:none;}
    .user#main #visual > .layout > .head > strong{font-size:3em;}
    .user#main #visual > .layout > .head > strong > span{display:block;}
    .user#main #visual > .layout > .midd{max-width:100%; margin:3em 0;}
    .user#main #visual > .layout > .midd > ul{margin-left:0;}
}
@media screen and (max-width: 500px) {
    
}
@media screen and (max-width: 400px) {
    .user#main section#sec_1{font-size:0.8em;}
}



/* youtube + notice */
section#sec_2{padding:7em 0 8em;}
.user#main #youtube_notice:after{content:""; display:block; clear:both;}
.user#main #youtube,
.user#main #notice{float:left;}
.user#main #youtube{width:56.6em; height:31.8em; margin-right:3em;}
.user#main #youtube iframe{
    overflow:hidden; width:100%; height:100%;
    -webkit-border-radius:1em;
    border-radius:1em;
}
.user#main #notice{position:relative; width:calc(100% - 56.6em - 3em - 1px);}
.user#main #notice>.head>strong{font-weight:500; font-size:3em; color:#222;}
.user#main #notice>.midd{margin-top:1.9em;}
.user#main #notice>.midd>ul:after{content:""; display:block; clear:both;}
.user#main #notice>.midd>ul>li{float:left; width:calc((100% - 1px - 6em) / 3); margin-right:3em;}
.user#main #notice>.midd>ul>li:nth-child(3n+3){margin-right:0;}
.user#main #notice>.midd>ul>li>a{
    display:block; height:25.5em; padding:3.2em 3em; border:1px solid #C8C8C8;
    -webkit-border-radius:0.8em;
    border-radius:0.8em;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.user#main #notice>.midd>ul>li>a>span,
.user#main #notice>.midd>ul>li>a>strong{display:block;}
.user#main #notice>.midd>ul>li>a .t{overflow:hidden; height:9em; font-size:1.8em; color:#222;}
.user#main #notice>.midd>ul>li>a .c{display: none; overflow:hidden; height:6em; margin-top:1.3em; font-size:1.5em; color:#666;}
.user#main #notice>.midd>ul>li>a .d{margin-top:0.8em; font-size:1.5em; color:#666;}
.user#main #notice>.more{overflow:hidden; position:absolute; right:0; top:1em; width:2.4em; height:2.4em; text-align:left; text-indent:-1000px;}
.user#main #notice>.more>a{display:block; width:100%; height:100%;}
.user#main #notice>.more>a:before{
    content:""; display:block; width:100%; height:100%; background-image:url(../../../images/site/erw/main/main_more.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;
    -webkit-transition:transform 0.2s linear;
    transition:transform 0.2s linear;
}
.user#main #notice>.more>a:hover:before{
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.user#main #notice>.midd>ul>li>a:hover{
    border-color:#222;
    -webkit-transform:translateY(-0.5em);
    transform:translateY(-0.5em);
}

@media screen and (max-width: 1300px) {
    .user#main #notice>.midd>ul>li{width:calc((100% - 1px - 2em) / 2); margin-right:2em;}
    .user#main #notice>.midd>ul>li:nth-child(n+2){margin-right:0;}
    .user#main #notice>.midd>ul>li:nth-child(n+3){display:none;}
}
@media screen and (max-width: 1100px) {
    .user#main #youtube{width:46em;}
    .user#main #notice{width:calc(100% - 46em - 3em - 1px);}
}
@media screen and (max-width: 1024px) {
    section#sec_2{padding:4em 0 4em;}
    .user#main #youtube{width:40em; height:25em;}
    .user#main #notice{width:calc(100% - 40em - 3em - 1px);}
    .user#main #notice>.midd>ul>li>a{height:18.5em;}
    .user#main #notice>.midd>ul>li>a .t{height:4.7em;}
    .user#main #notice>.midd>ul>li>a .c{display:none;}
    .user#main #notice>.midd>ul>li>a .d{margin-top:1.2em;}
}
@media screen and (max-width: 800px) {
    .user#main #youtube{position:relative; width:100%; height:auto; padding-top:56.25%;}
    .user#main #youtube>iframe{position:absolute; left:0; top:0; width:100%; height:100%;}
    .user#main #notice{width:100%; margin-top:3em;}
    .user#main #notice>.head>strong{font-size:2em;}
    .user#main #notice>.more{top:0.7em; width:1.8em; height:1.8em;}
    .user#main #notice>.midd>ul>li>a{height:15.5em; padding:2.8em 2.5em;}
    .user#main #notice>.midd>ul>li>a .t,
    .user#main #notice>.midd>ul>li>a .d{font-size:1.4em;}
}
@media screen and (max-width: 400px) {
    .user#main #notice>.midd>ul>li{width:calc((100% - 1px - 1.5em) / 2); margin-right:1.5em;}
    .user#main #notice>.midd>ul>li>a{padding:2em 2em;}
}


/* info */
.user#main #info{padding:6em 0 8em; background-image:url(../../../images/site/erw/main/main_info_bg.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover;}

.user#main #info>.layout>.midd{position:relative; height:56.4em;}
.user#main #info>.layout>.midd>ul{text-align:center;}
.user#main #info>.layout>.midd>ul>li{display:inline-block; padding:0 4.5em;}
.user#main #info>.layout>.midd>ul>li>strong>a{display:block; position:relative;}
.user#main #info>.layout>.midd>ul>li>strong>a:after{
    opacity:0; content:""; display:block; position:absolute; left:50%; bottom:0; width:0; height:3px; background-color:#E3CB98;
    -webkit-transition:left 0.2s linear, width 0.2s linear;
    transition:left 0.2s linear, width 0.2s linear;
}
.user#main #info>.layout>.midd>ul>li>strong>a>span{font-weight:300; font-size:3em; color:rgba(255,255,255,0.8);}
.user#main #info>.layout>.midd>ul>li>div.midd{
    overflow:hidden; display:none; position:absolute; left:0; top:9.4em; width:100%; height:47em; text-align:left;
    -webkit-border-radius:1.6em;
    border-radius:1.6em;
}
.user#main #info>.layout>.midd>ul>li>div.midd>.photo{width:60%; height:100%; background-color:#ddd; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.user#main #info>.layout>.midd>ul>li>div.midd>.in{position:absolute; right:0; top:0; width:40%; height:100%; padding:8.2em; background-color:#fff;}
.user#main #info>.layout>.midd>ul>li>div.midd>.in>em,
.user#main #info>.layout>.midd>ul>li>div.midd>.in>strong,
.user#main #info>.layout>.midd>ul>li>div.midd>.in>span{display:block; opacity:0;}
.user#main #info>.layout>.midd>ul>li>div.midd>.in>em{font-style:normal; font-size:2em; color:#967D47;}
.user#main #info>.layout>.midd>ul>li>div.midd>.in>strong{margin-top:0.2em; font-size:3em; color:#222;}
.user#main #info>.layout>.midd>ul>li>div.midd>.in>span{overflow:auto; height:9.1em; line-height:1.6; margin:1.25em 0 1em; font-size:1.6em; color:#666;}
.user#main #info>.layout>.midd>ul>li>div.midd>.in>a{
    opacity:0; display:inline-block; padding:1.3em 3.5em; background-color:#E3CB98;
    -webkit-border-radius:0.8em;
    border-radius:0.8em;
    -webkit-transition:background-color 0.2s linear;
    transition:background-color 0.2s linear;
}
.user#main #info>.layout>.midd>ul>li>div.midd>.in>a>span{font-size:1.5em; color:#222;}

.user#main #info>.layout>.midd>ul>li>div.midd>.in>a:hover{background-color:#baa067;}

.user#main #info>.layout>[class*="btn_"]{overflow:hidden; display:block; position:absolute; top:50%; width:4.3em; height:8.6em; text-align:left; text-indent:-1000px; background-image:url(../../../images/site/erw/main/info_arrow.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;}
.user#main #info>.layout>.btn_prev{right:calc(100% + 10em);}
.user#main #info>.layout>.btn_next{
    left:calc(100% + 10em);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.user#main #info>.layout>.midd>ul>li>div.midd>.in>em,
.user#main #info>.layout>.midd>ul>li>div.midd>.in>strong,
.user#main #info>.layout>.midd>ul>li>div.midd>.in>span,
.user#main #info>.layout>.midd>ul>li>div.midd>.in>a{
    -webkit-animation-name:info_text;
    -webkit-animation-duration:0.5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;

    animation-name:info_text;
    animation-duration:0.5s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count:1;
}
.user#main #info>.layout>.midd>ul>li>div.midd>.in>em{-webkit-animation-delay:0; animation-delay:0;}
.user#main #info>.layout>.midd>ul>li>div.midd>.in>strong{-webkit-animation-delay:0.2s; animation-delay:0.2s;}
.user#main #info>.layout>.midd>ul>li>div.midd>.in>span{-webkit-animation-delay:0.4s; animation-delay:0.4s;}
.user#main #info>.layout>.midd>ul>li>div.midd>.in>a{-webkit-animation-delay:0.6s; animation-delay:0.6s;}
@-webkit-keyframes info_text {
    0%{opacity:0; -webkit-transform:translateX(30px); transform:translateX(30px);}
    100%{opacity:1; -webkit-transform:translateX(0); transform:translateX(0);}
}
@keyframes info_text {
    0%{opacity:0; -webkit-transform:translateX(30px); transform:translateX(30px);}
    100%{opacity:1; -webkit-transform:translateX(0); transform:translateX(0);}
}

.user#main #info[data-page="1"]>.layout>.midd>ul>li:nth-child(1)>.midd,
.user#main #info[data-page="2"]>.layout>.midd>ul>li:nth-child(2)>.midd,
.user#main #info[data-page="3"]>.layout>.midd>ul>li:nth-child(3)>.midd,
.user#main #info[data-page="4"]>.layout>.midd>ul>li:nth-child(4)>.midd,
.user#main #info[data-page="5"]>.layout>.midd>ul>li:nth-child(5)>.midd{display:block;}

.user#main #info[data-page="1"]>.layout>.midd>ul>li:nth-child(1)>strong>a>span,
.user#main #info[data-page="2"]>.layout>.midd>ul>li:nth-child(2)>strong>a>span,
.user#main #info[data-page="3"]>.layout>.midd>ul>li:nth-child(3)>strong>a>span,
.user#main #info[data-page="4"]>.layout>.midd>ul>li:nth-child(4)>strong>a>span,
.user#main #info[data-page="5"]>.layout>.midd>ul>li:nth-child(5)>strong>a>span{font-weight:500; color:#E3CB98;}

.user#main #info[data-page="1"]>.layout>.midd>ul>li:nth-child(1)>strong>a:after,
.user#main #info[data-page="2"]>.layout>.midd>ul>li:nth-child(2)>strong>a:after,
.user#main #info[data-page="3"]>.layout>.midd>ul>li:nth-child(3)>strong>a:after,
.user#main #info[data-page="4"]>.layout>.midd>ul>li:nth-child(4)>strong>a:after,
.user#main #info[data-page="5"]>.layout>.midd>ul>li:nth-child(5)>strong>a:after{opacity:1; left:0; width:100%;}
@media screen and (max-width: 1750px) {
    .user#main #info>.layout>.btn_prev{right:calc(100% + 2em);}
    .user#main #info>.layout>.btn_next{left:calc(100% + 2em);}
}
@media screen and (max-width: 1600px) {
    .user#main #info>.layout{max-width:100%; width:calc(100% - 20em);}
}
@media screen and (max-width: 1200px) {
    .user#main #info{font-size:0.8em;}
}
@media screen and (max-width: 1024px) {
    .user#main #info>.layout>.midd>ul>li>div.midd{background-color:#fff;}
    .user#main #info>.layout>.midd>ul>li>div.midd>.in{
        top:50%; height:auto; padding:5em;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
    }
    .user#main #info>.layout>.midd>ul>li>div.midd>.in>strong{margin-bottom:1.2em;}
    .user#main #info>.layout>.midd>ul>li>div.midd>.in>span{display:none;}
}
@media screen and (max-width: 800px) {
    .user#main #info{padding:4em 0 5em;}
    .user#main #info>.layout{width:100%;}
    .user#main #info>.layout>[class*="btn_"]{display:none;}
    .user#main #info>.layout>.midd{height:54.4em;}
    .user#main #info>.layout>.midd>ul>li>div.midd{top:7.4em;}
}
@media screen and (max-width: 700px) {
    .user#main #info>.layout>.midd>ul>li>div.midd>.photo{width:50%;}
    .user#main #info>.layout>.midd>ul>li>div.midd>.in{width:50%;}
}
@media screen and (max-width: 600px) {
    .user#main #info>.layout>.midd>ul>li>strong>a>span{font-size:2.4em;}
    .user#main #info>.layout>.midd{height:42.4em;}
    .user#main #info>.layout>.midd>ul>li{padding:0 2em;}
    .user#main #info>.layout>.midd>ul>li>div.midd{top:5.4em; height:37em;}
    .user#main #info>.layout>.midd>ul>li>div.midd>.in{padding:3em;}
    .user#main #info>.layout>.midd>ul>li>div.midd>.in>a{display:block; padding:1.3em; text-align:center;}
}
@media screen and (max-width: 400px) {
    .user#main #info>.layout>.midd{height:32.4em;}
    .user#main #info>.layout>.midd>ul>li{padding:0 1.2em;}
    .user#main #info>.layout>.midd>ul>li>strong>a>span{font-size:2em;}
    .user#main #info>.layout>.midd>ul>li>div.midd{height:27em;}
    .user#main #info>.layout>.midd>ul>li>div.midd>.in>em{font-size:1.7em;}
    .user#main #info>.layout>.midd>ul>li>div.midd>.in>strong{font-size:2.6em;}
}


/* 포토갤러리 */
section#sec_4{overflow:hidden; position:relative; padding:7em 0 8em;}
section#sec_4:before,
section#sec_4:after{content:""; display:block; position:absolute; z-index:-1; width:50em; height:50em; background-repeat:no-repeat; background-position:center center; background-size:contain;}
section#sec_4:before{left:-10em; bottom:-15em; background-image:url(../../../images/site/erw/main/sec_4_simbol_1.svg);}
section#sec_4:after{right:-10em; top:-15em; background-image:url(../../../images/site/erw/main/sec_4_simbol_2.svg);}
.user#main #photo-list{position:relative;}
.user#main #photo-list>.head{text-align:center;}
.user#main #photo-list>.head>strong{font-size:3em; color:#222;}
.user#main #photo-list>.midd{margin-top:3em;}
.user#main #photo-list>.midd>ul:after{content:""; display:block; clear:both;}
.user#main #photo-list>.midd>ul>li{float:left; width:calc((100% - 1px - 9em) / 4); margin-right:3em;}
.user#main #photo-list>.midd>ul>li:nth-child(4n+4){margin-right:0;}
.user#main #photo-list>.midd>ul>li>a{display:block;}
.user#main #photo-list>.midd>ul>li>a>.p,
.user#main #photo-list>.midd>ul>li>a>strong{
    -webkit-transition:transform 0.2s linear;
    transition:transform 0.2s linear;
}
.user#main #photo-list>.midd>ul>li>a>.p{display:block; border: 1px solid rgba(200, 200, 200, 0.5); background-repeat:no-repeat; background-position:center center; background-size:cover;}
.user#main #photo-list>.midd>ul>li>a>.p>img{display:block; width:100%;}
.user#main #photo-list>.midd>ul>li>a>strong{display:block; margin-top:1em; text-align:left; font-weight:400; font-size:1.6em; color:#444;}
.user#main #photo-list>.more{overflow:hidden; position:absolute; right:0; top:1em; z-index:100; width:2.4em; height:2.4em; text-align:left; text-indent:-1000px;}
.user#main #photo-list>.more>a{display:block; width:100%; height:100%;}
.user#main #photo-list>.more>a:before{
    content:""; display:block; width:100%; height:100%; background-image:url(../../../images/site/erw/main/main_more.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;
    -webkit-transition:transform 0.2s linear;
        transition:transform 0.2s linear;
}
.user#main #photo-list>.more>a:hover:before{
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.user#main #photo-list>.midd>ul>li>a:hover>.p,
.user#main #photo-list>.midd>ul>li>a:hover>strong{
    -webkit-transform:translateY(-10px);
    transform:translateY(-10px);
}
@media screen and (max-width: 1024px) {
    .user#main #photo-list>.midd>ul>li{float:left; width:calc((100% - 1px - 4em) / 3); margin-right:2em;}
    .user#main #photo-list>.midd>ul>li:nth-child(n+3){margin-right:0;}
    .user#main #photo-list>.midd>ul>li:nth-child(n+4){display:none;}
}
@media screen and (max-width: 800px) {
    section#sec_4{padding:4em 0 5em;}
    .user#main #photo-list>.head>strong{font-size:2.4em;}
    .user#main #photo-list>.midd{margin-top:1.5em;}
    .user#main #photo-list>.more{width:1.8em; height:1.8em;}
}
@media screen and (max-width: 700px) {
    .user#main #photo-list>.midd>ul>li{float:left; width:calc((100% - 1px - 2em) / 2);}
    .user#main #photo-list>.midd>ul>li:nth-child(n+2){margin-right:0;}
    .user#main #photo-list>.midd>ul>li:nth-child(n+3){display:none;}
}
@media screen and (max-width: 400px) {
    section#sec_4{padding:3em 0;}
    .user#main #photo-list>.head>strong{font-size:2em;}
    .user#main #photo-list>.midd>ul>li>a>strong{font-size:1.4em;}
    .user#main #photo-list>.more{top:0.5em;}
}