@charset 'utf-8';
/*메인페이지 비주얼*/
.main_visual_wrap {
    position: relative;
    width: 100%;
    height: calc(100vh/* - 100px*/);
    overflow: hidden;
    background-color: #fff;
}
/*
 (정사각형 같은, 크기 비례 이용할 때만 필요하다.)
.main_visual_wrap:before {
    content: '';
    display: block;
    padding-top: 56.25%;
}
*/
.main_visual_wrap>input {
    display: none;
}
.main_visual {
    position: absolute;
    left: 0;
    top: 0;
    width: 300%; /*슬라이드 개수(*100%)에 따라 다름*/
    height: 100%;
    transition: 0.6s;
}
.main_visual>li {
    float: left;
    width: 33.33%; /*슬라이드 개수(100/개수%)에 따라 다름*/
    height: 100%;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}
.main_visual>.v1 {
    background-position: 62% center;
    background-image: url('../images/bg_mosaic_01.jpg');
}
.v2 {
    background-image: url('../images/bg_mosaic_02.jpg');
}
.v3 {
    background-image: url('../images/bg_mosaic_03.jpg');
}
.main_visual .wrap {
    position: relative;
    height: 100%;
}
.main_visual .v_txt {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 300px;
}
.txt1 {
    display: block;
    margin: 20px;
    font-family: 'Nanum Myeongjo', sans-serif;
    font-size: 3em;
    line-height: 1.6;
}
.txt2 {
    display: block;
    line-height: 1.8;
}
.main_btn {
    position: absolute;
    padding-right: 25px;
    right: 100px;
    top: 290px;
    width: 160px;
    display: block;
    line-height: 40px;
    border: 1px solid #fff;
    background: url(../images/arrow_wh.png) no-repeat 110px center;
}
.controls {
    position: absolute;
    width: 25%;
    left: 37%;
    top: 92%;
    transform: translateY(-50%);
}
.controls label {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-width: 2px 0 0 2px;
    text-indent: -9999em;
}
.pages {
    display: none;
}


#v_radio1:checked ~ .main_visual {
    left: 0;
}
#v_radio2:checked ~ .main_visual {
    left: -100%;
}
#v_radio3:checked ~ .main_visual {
    left: -200%;
}
#v_radio1:checked ~ .controls .v_label1,
#v_radio2:checked ~ .controls .v_label2,
#v_radio3:checked ~ .controls .v_label3 {
    display: none;
}
/*이전버튼*/
#v_radio1:checked ~ .controls .v_label3,
#v_radio2:checked ~ .controls .v_label1,
#v_radio3:checked ~ .controls .v_label2 {
    float: left;
    transform: scaleX(0.8) rotate(-45deg);
}
/*다음버튼*/
#v_radio1:checked ~ .controls .v_label2,
#v_radio2:checked ~ .controls .v_label3,
#v_radio3:checked ~ .controls .v_label1 {
    float: right;
    transform: scaleX(0.8) rotate(135deg);
}



/*교육 및 행사 페이지 비주얼*/
.main_event_wrap {
    position: relative;
    width: 100%;
    height: calc(100vh);
    background: url('../images/bg_event.jpg') 0px 0px no-repeat;
    background-size: cover;
    overflow: hidden;
}
.main_event_wrap>.wrap {
    display: block;
    padding: 0 20px;
    width: 100%;
    height: 100%;
}
.wrap_event_wrap {
    display: block;
    padding-top: 15px;
}
.wrap_event_wrap>input {
    display: none;
}
.event {
    position: relative;
    width: 100%;
    height: 500px;
    font-size: 0.9em;
}
.event>li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.5s;
}
.event_img {
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
}
.event_img:before {
    content: '';
    display: block;
    padding-top: 60%;
}
.event_img1 {
    background-image: url('../images/event_01.png');
}
.event_img2 {
    background-image: url('../images/event_02.png');
}
.event_img3 {
    background-image: url('../images/event_03.png');
}
.event_t {
    position: relative;
}

#event_radio1:checked ~ .event .event1 {
    opacity: 1;
    z-index: 2;
}
#event_radio2:checked ~ .event .event2 {
    opacity: 1;
    z-index: 2;
}
#event_radio3:checked ~ .event .event3 {
    opacity: 1;
    z-index: 2;
}
#event_radio1:checked ~ .event_page .event_label1,
#event_radio2:checked ~ .event_page .event_label2,
#event_radio3:checked ~ .event_page .event_label3 {
    background-color: #444444;
}


#event_radio1:checked ~ .event_t {
    left: 0;
}
#event_radio2:checked ~ .event_t {
    left: -100%;
}
#event_radio3:checked ~ .event_t {
    left: -200%;
}
#event_radio1:checked ~ .event_page .event_label1,
#event_radio2:checked ~ .event_page .event_label2,
#event_radio3:checked ~ .event_page .event_label3 {
    background-color: #444444;}


.event_page{
    text-align: center;
}
.event_page label {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 5px;
    border-radius: 50%;
    background-color: #bdbcbc;
    text-indent: -9999em;
}
.category {
    display: block;
    padding-top: 15px;
}
.title{}
.event_txt2 dt, .event_txt2 dd {
    float: left;
    padding-top: 15px;
    font-weight: bold;
/*    line-height: 18px;*/
}
.event_txt2 dt:nth-child(3),.event_txt2 dd:nth-child(4) {
    padding-top: 0;
}

.event_btn {
    position: absolute;
    right: 5px;
    top: 25px;
    width: 120px;
    display: block;
    padding: 5px;
    color: #bbc2b9;
    border: 1px solid #bbc2b9;
    background: url(../images/arrow_1.png) no-repeat 88px center;
}
.event_btn:hover {
    background: url(../images/arrow_2.png) no-repeat 88px center;
}


/*상설전시 및 특별전시 페이지 비주얼*/
.main_exhi_wrap {
    position: relative;
    height: calc(100vh);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6f7768+0,6f7768+38,7d8679+86,828a7d+100 */
    background: rgb(111,119,104); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(111,119,104,1) 0%, rgba(111,119,104,1) 38%, rgba(125,134,121,1) 86%, rgba(130,138,125,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(111,119,104,1) 0%,rgba(111,119,104,1) 38%,rgba(125,134,121,1) 86%,rgba(130,138,125,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(111,119,104,1) 0%,rgba(111,119,104,1) 38%,rgba(125,134,121,1) 86%,rgba(130,138,125,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f7768', endColorstr='#828a7d',GradientType=0 ); /* IE6-9 */
    overflow: hidden;
}
.wrap_exhi_wrap {
    position: relative;
}
.main_exhi_wrap>.wrap {
    padding: 50px 20px;
}
.exhi {
    padding: 40px 0;
}
.exhi li {
    position: relative;
    float: left;
    margin: 2%; 
    width: 46%;
    padding: 2%;
    height: 200px;
    box-shadow: 10px 12px 8px rgb(0 0 0 / 30%);
    transition: 0.5s;
}
.exhi li:hover {
    background: #bdbcbc;
}

.standing {
    background: url('../images/exhi_01.png') 0 0;}
.special_1 {
    background: url('../images/exhi_02.png') 0 0;}
.special_2 {
    background: url('../images/exhi_03.png') 0 0;}
.special_3 {
    background: url('../images/exhi_04.png') 0 0;}

.exhi_txt{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-weight: bold;
}
.exhi_txt dt {
    font-size: 1.3em;
    font-weight: 900;
    padding-bottom: 0.2em;
}
.exhi_btn{
    display: inline-block;
    background: url('../images/exhi_btn.png') no-repeat center center;
    width: 35px;
    height: 35px;
    margin-top: 1.2em;
    transition: 0.2s;
}
.exhi_btn:hover {
    background: url('../images/exhi_btn_wh.png') no-repeat center center;
    transform: scale(1.2);
    z-index: 1;
}


/*커뮤니티 영역 페이지 비주얼*/
.main_community_wrap {
    position: relative;
    width: 100%;
    height: calc(100vh + 100%);
/*    overflow: hidden;*/
    background-color: #ededed;
}
.main_community_img {
    position: relative;
    height: 200px;
    top: -100px;
    background: url('../images/community_wrap.jpg') center center no-repeat;
    background-attachment: fixed;
    background-size: cover;
    text-indent: -9999em;
}
.wrap_community_wrap {
    display: block;
}
.schedule_box {
    position: relative;
    width: 350px;
    height: 150px;
    left: 50%;
    top: -175px;
    margin-left: -175px;
    background: #d9aa8f;
}
.schedule_txt {
    padding-top: 10%;
    color: #261726;
    font-size: 1.25em;
    font-weight: bold;
}
.wrap_community_wrap>h3 {
    font-size: 1.7em;
    font-weight: 700;
    margin-top: -150px;
}
.bbs {
    margin: auto;
    max-width: 1200px;
}
.bbs_wrap {
    float: left;
    height: 230px;
    max-width: 375px;
    margin: 25px 15px;
    padding: 0 5px;
    position: relative;
    top: 100%;
    left: 46%;
    transform: translate(-50%, 0);
    background-color: #fff;
    box-sizing: border-box;
}
.bbs_name {
    padding: 25px 0 0 20px;
    height: 68px;
    font-size: 22px;
    font-weight: bold;
    box-sizing: border-box;
    border-bottom: 1px solid #848585;
}
.bbs_contents {}
.bbs_subject {
    display: block;
    height: 4em;
    padding: 20px;
    padding-bottom: 0;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
}
.bbs_date {
    padding: 30px 0 0 20px;
    color: #848585;
    font-size: 15px;
    font-weight: bold;
}

.bbs_controls {
    position: absolute;
    right: 1.1em;
    bottom: 1.1em;
}
.bbs_controls a {
    position: relative;
    float: right;
    display: block;
    width: 36px;
    height: 36px;
    margin-left: 5px;
    border: 1px solid #c1c7bf;
    text-indent: -9999em;
}
.bbs_controls a:after {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    border: 1px solid #c1c7bf;
    border-color: #c1c7bf #c1c7bf transparent transparent;
    transform: translate(calc(-50% - 3px), -50%) rotate(45deg);
}
.bbs_controls .bbs_btns {
    border-color: #848585;
}
.bbs_controls .bbs_btns:after {
    border-color: #848585 #848585 transparent transparent;
}
.bbs_controls .bbs_next:after {
    transform:translate(calc(-50% + 3px), -50%) rotate(-135deg);
}