/* 섹션01 - 동영상 */
.section01 {position: relative; margin-top: 60px;}
.section01 .bg {width: 100%; height: 784px; position: absolute; bottom: 0; z-index: -1; background: url(images/main_sec01/bg_mount.png)no-repeat left 200px / cover;}
.section01 .ef1 {width: 448px; height: 207px; position: absolute; left: 5px; top: -50px; background: url(images/main_sec01/bg_moon.png) no-repeat center / cover; z-index: -1;
animation: moon 3s linear infinite; }
@keyframes moon {
    0% {left: 0;}
    50% {left: 15px; top: -53px;}
    100% {left: 0;}
}
.section01 .ef2 {width: 119px; height: 115px; position: absolute; right: 400px; top: -50px; background: url(images/main_sec01/bg_bird.png) no-repeat center / cover;
animation: mainBird 6s linear infinite forwards;}
@keyframes mainBird {
    0% {right: 400px; top: -50px; opacity: .3;}
    50% {right: 300px; top: -30px; opacity: 1;}
    100% {right: 200px; top: -50px; opacity: 0;}
}
.section01 .ef3 {width: 447px; height: 252px; position: absolute; left: 0; bottom: 0; z-index: 2; background: url(images/main_sec01/bg_grass.png) no-repeat left bottom; transition: all .4s;}
.section01 .ef4 {width: 447px; height: 252px; position: absolute; bottom: 0; right: 0; z-index: -1; background: url(images/main_sec01/bg_grass2.png) no-repeat center bottom;}
.section01 .tit {text-align: center;  position: relative; top: -30px;}
.section01 .tit h2 {font-size: 3.0rem; color: #6b4c4f;}
.section01 .tit h1 {font-size: 10rem; color: #351215;}
.section01 .tit h1::before {content: ""; width: 30px; height: 42px; display: inline-block; margin-right: 10px;
    background: url(images/main_sec01/tit_deco.png) no-repeat 0 / contain;
}
.section01 .tit h1 span {color: #cd9969;}
/* video */
.section01 .video {max-width: 1300px; height: 563px; position: relative;  margin: 0 auto; background: #cd9969;}
.section01 .video .bg {width: 1100px; height: 569px; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); background: url(images/main_sec01/window_top.png) no-repeat center; z-index: 1;}
.section01 .video .door1 {width: 279px; height: 569px; position: absolute; top: 0px; left: 0; background: url(images/main_sec01/window_left.png) no-repeat left; z-index: 1; transition: all 3s;
animation:  door1 5s forwards;}
.section01 .video .door1-1 {height: 569px; width: 383px; position: absolute; top: 0; left: 270px; background: url(images/main_sec01/window_mid_left.png)no-repeat left; z-index: 1; transition: all 3s;
animation:  door1-1 5s forwards;}
.section01 .video .door2 {width: 279px; height: 569px; position: absolute; top: 0; right: 0; background: url(images/main_sec01/window_right.png) no-repeat right; z-index: 1; transition: all 3s;
animation:  door2 5s forwards;}
.section01 .video .door2-1 {height: 569px; width: 383px; position: absolute; top: 0; right: 270px; background: url(images/main_sec01/window_mid_right.png)no-repeat left; z-index: 1; transition: all 3s;
animation:  door2-1 5s forwards;}

@keyframes door1 {
    0% {left: 0}
    100% {left: -148px;}
}
@keyframes door2 {
    0% {right: 0;}
    100% {right: -148px;}
}
@keyframes door1-1 {
    0% {left: 270px;}
    100% {left: -148px;}
}
@keyframes door2-1 {
    0% {right: 270px}
    100% {right: -148px;}
}

.section01 .info {max-width: 1421px; height: 84px; margin: 0 auto; align-items: center; background: url(images/main_sec01/window_bt.png) no-repeat center;}
.section01 .info_txt {line-height: 18px;}
.section01 .info_txt h3 {font-size: 1.8rem; color: #351215; margin: 0 20px;}
.section01 .info_txt li {font-size: 2.0rem; color: #351215; font-weight: 700;}
.section01 .info_txt p {font-size: 1.2rem; color: #351215;}
.section01 .info_txt span {font-size: 1.2rem; color: #cd323d; font-weight: 600;}

/* 섹션02 - 전시관안내 */
.section02 {position: relative;}
.section02 > .tit {margin-top: 100px; margin-bottom: 58px;}
.section02 h3 {font-size: 1.6rem; text-align: center; color: #351215;}
.section02 h2 {font-size: 5.0rem;text-align: center; color: #805735;}
.bg_deco {height: 100%;}
.bg_deco .tree1 {width: 355px; height: 585px; position: absolute; top: -180px; z-index: 1; background: url(images/main_sec02/tree1.png) no-repeat 0; animation: tree1 5s linear infinite; transform-origin: left bottom;}
@keyframes tree1 {
    0% {transform: rotate(5deg) translate(-10px,5px);}
    50% {transform: rotate(0deg) translate(-15px,-5px);}
    100% {transform: rotate(5deg) translate(-10px,5px);}
}
.bg_deco .tree1-2 {width: 355px; height: 585px; position: absolute; top: 60px; left: -120px; z-index: 1; background: url(images/main_sec02/tree1-2.png) no-repeat 0; animation: tree1-2 5s ease-in-out infinite; transform-origin: left bottom;}
@keyframes tree1-2 {
    0% {transform: rotate(20deg) translate(-10px,-10px);}
    50% {transform: rotate(25deg) translate(0,-5px);}
    100% {transform: rotate(20deg) translate(-10px,-10px);}
}
.bg_deco .sun1 {width: 218px; height: 198px; position: absolute; top: 100px; left: 80px; background: url(images/main_sec02/sun.png)no-repeat 0; animation: sun 8s linear infinite; }
@keyframes sun {
    0% {transform: translate(0,0);}
    50% {transform: translate(20px,5px);}
    100% {transform: translate(0,0);}
}
.bg_deco .tree2 {width: 280px; height: 352px; position: absolute; z-index: 1; top: 55%; right: 0; background: url(images/main_sec02/tree2.png) no-repeat center; animation: tree2 5s ease-in-out forwards infinite; transform-origin: right bottom;}
@keyframes tree2 {
    0% {transform: rotate(-3deg) translate(-5px,5px);}
    50% {transform: rotate(0deg) translate(0,0px);}
    100% {transform: rotate(-3deg) translate(-5px,5px);}
}
/* 맵시작 */
.contents_map {width: 100%; height: 997px; position: relative; background: url(images/main_sec02/bg_load.png) no-repeat center;}
.contents_wrap {height: 100%;}
.contents > p {font-size: 1.6rem; color: #cdab8f;}
.contents .tit {font-size: 1.8rem; color: #fffcf6; background: #a17551; text-align: center; border-radius: 20px; padding: 5px 0px;}
.viewmore {display: none; width: 135px; height: 135px; margin-bottom: 12px; margin-left: 9px; text-align: center; align-content: center; background: #1e0f03; border-radius: 100%; opacity: .8;}
.viewmore a { font-size: 1.6rem; color: #fffcf6; }
.viewmore::after {content: ""; display: block; margin-top: 10px; background: url(images/main_sec02/arrow.png) no-repeat center; width: 100%; height: 7px;}
.top:hover .viewmore {display: block;}
/* 캐릭터 */
.character_box {width: 1073px; height: 100%; position: absolute; left: 50%; transform: translateX(-50%);}
.ch_1 {width: 99px; height: 149px; position: absolute; top: 100px; right: 80px; z-index: 1; background: url(images/main_sec02/ch_queen.png) no-repeat center;}
.ch_2 {width: 162px; height: 81px; position: absolute; top: 60px; left: 60px; background: url(images/main_sec02/char02.png)no-repeat center;}
.ch_3 {width: 58px; height: 82px; position: absolute; top: 170px; left: -20px; background: url(images/main_sec02/char03.png)no-repeat center; animation: ch_3 3s linear forwards infinite;}
@keyframes ch_3 {
    0% {top: 170px; opacity: 0;}
    50% {top: 249px; opacity: 1;}
    100% {top: 260px; opacity: 0;}
}
.ch_4 {width: 85px; height: 91px; position: absolute; top: 300px; left: 30px;  background: url(images/main_sec02/char04.png)no-repeat center; animation: ch_4 5s linear forwards infinite;}
@keyframes ch_4 {
    0% {left: 30px; opacity: 0;}
    50% {left: 100px; opacity: 1;}
    100% {left: 130px; transform: translateY(40px); opacity: 0;}
}
.ch_5 {width: 75px; height: 66px; position: absolute; top: 100px; right: 400px; opacity: 0; background: url(images/main_sec02/char05.png)no-repeat center; animation: ch_5 4s linear infinite forwards;}
@keyframes ch_5 {
    0% {top: 100px; opacity: 1;}
    50% {top: 160px;}
    100% {top: 240px; right: 500px;}
}
.ch_6 {width: 75px; height: 66px; position: absolute; top: 400px; right: 450px; opacity: 0; background: url(images/main_sec02/char06.png)no-repeat center; animation: ch_6 8s linear infinite forwards;}
@keyframes ch_6 {
    0% {top: 400px; opacity: 1;}
    50% {top: 200px; right: 460px;}
    100% {top: 120px; right: 400px;}
}
.ch_7 {width: 117px; height: 82px; position: absolute; top: 400px; right: 400px; background: url(images/main_sec02/char07.png)no-repeat center; animation: ch_7 4s linear infinite forwards;}
@keyframes ch_7 {
    0% {right: 300px; opacity: 0;}
    50% {right: 280px; opacity: 1;}
    100% {right: 150px; top: 440px; opacity: .8;}
}
.ch_8 {width: 36px; height: 75px; position: absolute; top: 450px; right: 80px; opacity: 0; background: url(images/main_sec02/char08.png)no-repeat center; animation:  ch_8 4s linear infinite forwards;}
@keyframes ch_8 {
    0% {}
    50% {transform: rotateY(20deg); opacity: 1;}
    100% {right: 0; top: 550px; right: 0;}
}
.ch_9 {width: 87px; height: 106px; position: absolute; bottom: 80px; right: 400px; background: url(images/main_sec02/char09.png)no-repeat center; animation:  ch_9 5s linear infinite forwards;}
@keyframes ch_9 {
    0% {right: 400px; opacity: 0;}
    50% {right: 500px; opacity: 1;}
    100% {right: 700px; opacity: 0;}
}
/* 신라역사관 */
.content01 {position: absolute; top: 0; right: 0; align-items: center;}
.content01 .text {transform: translateY(-10px);}
.content01 .text::before {content: ""; display: inline-block; width: 50px; height: 64px; margin-right: 10px;
background: url(images/main_sec02/map1_item.png) no-repeat center bottom / contain; transform: translateY(10px);}
.map1 {margin-left: 100px;} 
.map1 .top {width: 162px; height: 163px; align-content: center; cursor: pointer; background: url(images/main_sec02/content01.png) no-repeat center; transition: all 2s;}
.map1 .top::before {content: ""; display: inline-block; position: absolute; left: 500px; top: 30px; background: url(images/main_sec02/ch_queen.png)no-repeat 0; background-size: 80%; width: 102px; height: 100%; opacity: 0; transition: all .3s;}
.map1 .top:hover::before {opacity: 1;}
/* 유물 */
.item_box01 {width: 515px; height: 273px; position: absolute; right: 0; top: 135px;}
.item01 {width: 133px; height: 131px; position: absolute; right: 0; bottom: 0; background: url(images/main_sec02/item01.png) no-repeat center; animation: item 3s linear forwards infinite;}
@keyframes item {
    0% {transform: translate(0,0);}
    50% {transform: translate(0,5px);}
    100% {transform: translate(0,0);}
}
.item02 {width: 133px; height: 137px; position: absolute; right: 40%; bottom: 50%; background: url(images/main_sec02/item02.png) no-repeat center; animation: item 4s ease-in-out forwards infinite;}
.item03 {width: 133px; height: 101px; position: absolute; left: 0; bottom: 80px; background: url(images/main_sec02/item03.png) no-repeat center; animation: item 2s linear forwards infinite;}
/* 특별전시관 */
.content02 {position: absolute; top: 45px; left: 160px; align-items: center;}
.content02 .text {transform: rotate(-10deg) translateY(20px);}
.map2 {margin-left: 50px;}
.map2 .top {width: 162px; height: 163px; align-content: center; cursor: pointer; background: url(images/main_sec02/content02.png) no-repeat center;}
.map2 .top::before {content: ""; display: inline-block; position: absolute; left: 245px; top: 40px; background: url(images/main_sec02/ch_queen.png)no-repeat 0;  background-size: 85%; width: 109px; height: 100%; opacity: 0; transition: all .3s;}
.map2 .top:hover::before {opacity: 1;}
/* 신라미술관 */
.content03 {position: absolute; top: 375px; left: 300px; align-items: center;}
.content03 .text {transform: rotate(12deg) translateY(-50px);}
.map3 {margin-left: 100px;}
.map3 .top {width: 169px; height: 152px; align-content: center; cursor: pointer; background: url(images/main_sec02/content03.png) no-repeat center;}
.map3 .top::before {content: ""; display: inline-block; position: absolute; left: 440px; top: 30px; background: url(images/main_sec02/ch_queen.png)no-repeat 0; background-size: 90%; width: 109px; height: 100%; opacity: 0; transition: all .3s;}
.map3 .top:hover::before {opacity: 1; }
.map3 .top > .viewmore {margin-left: 6px; margin-bottom: 5px;}
/* 유물 */
.item_box02 {width: 292px; height: 218px; position: absolute; top: 160px;}
.item04 {width: 133px; height: 120px; position: absolute; right: 0; bottom: 0; background: url(images/main_sec02/item04.png) no-repeat center; animation: item 2s linear forwards infinite;}
.item05 {width: 147px; height: 135px; position: absolute; right: 40%; bottom: 50%; background: url(images/main_sec02/item05.png) no-repeat center; animation: item 3s ease-in-out forwards infinite;}
/* 옥외전시 */
.content04 {position: absolute; top: 550px; right: 0; align-items: center;}
.content04 .text {transform: rotate(-20deg) translate(50px, 210px);}
.map4 {margin-left: 100px;}
.map4 .top {width: 162px; height: 163px; align-content: center; cursor: pointer; background: url(images/main_sec02/content04.png) no-repeat center;}
.map4 .top::before {content: ""; display: inline-block; position: absolute; left: 420px; top: 40px; background: url(images/main_sec02/ch_queen.png)no-repeat 0; background-size: 95%; width: 109px; height: 100%; opacity: 0; transition: all .3s;}
.map4 .top:hover::before {opacity: 1;}
.map4 .top > .viewmore {margin-left: 11px; margin-bottom: 10px;}
/* 유물 */
.item_box03 {width: 366px; height: 495px; position: absolute; bottom: -260px; right: 0; z-index: -1;}
.item06 {width: 164px; height: 166px; position: absolute; left: 0; top: 50px; background: url(images/main_sec02/item06.png) no-repeat center; animation: item 4s ease-in-out forwards infinite;}
.item07 {width: 214px; height: 197px; position: absolute; right: -50px; bottom: 0; background: url(images/main_sec02/item07.png) no-repeat center; animation: item 2s linear forwards infinite;}
/* 수묵당과 고청지 */
.content05 {position: absolute; bottom: 0; left: 180px;}
.content05 .text {transform: translateY(100px);}
.map5 {margin-left: 70px;}
.map5 .top {width: 173px; height: 168px; align-content: center; cursor: pointer; background: url(images/main_sec02/content05.png) no-repeat center;}
.map5 .top::before {content: ""; display: inline-block; position: absolute; left: 330px; top: 50px; background: url(images/main_sec02/ch_queen.png)no-repeat 0; width: 109px; height: 100%; opacity: 0; transition: all .4s;}
.map5 .top:hover::before {opacity: 1;}
.map5 .top > .viewmore {width: 140px; height: 140px; margin-bottom: 0;}
/* 공지사항 광고판 */
.notice_board_wrap {width: 430px; height: 437px; position: absolute; bottom: 126px; }
.notice_board {width: 100%; height: 100%; align-content: center; background: url(images/main_sec02/notice_board.png) no-repeat center / contain; }
.notice_board .notice_slider {width: 100%; height: 100%; margin-top: 48px; }
.notice_board .notice_slider .slide {padding-left: 20px;}
.slide a img {width: 411px; height: 255px;  border-radius: 20px; transform: translate(-5px, 2px);}
.notice_board .btn_wrap {display: flex; position: absolute; bottom: 150px; right: 10px;} 
.btn_wrap .board_btn_left {margin-right: 10px;}
.btn_wrap .board_btn_right {margin-right: 15px;}

/* 더보기 */
.more_btn {width: 145px; height: 186px; position: absolute; bottom: 50px; left: 0;}
.more_btn a {width: 100%; height: 100%; background: url(images/main_sec02/ch_more.png) no-repeat 0;}

/* 섹션02 mb - max-width ~ 1400px */
.mb_section02 {display: none; position: relative;}
.mb_section02 > .tit { margin-top: 100px; margin-bottom: 58px;}
.mb_section02 .tit h3 {font-size: 1.6rem; text-align: center; color: #351215;}
.mb_section02 .tit h2 {font-size: 5.0rem; text-align: center; color: #805735;}
.mb_content {width: 300px; height: 621px; margin: 0 10px; position: relative;}
.mb_content:nth-child(1)::after {content: ""; display: inline-block; width: 314px; height: 314px; position: absolute; top: 50px; left: 150px; z-index: -1; background: url(images/main_sec02/mb_deco01.png)no-repeat center;}
.mb_content:nth-child(2) {align-content: end;}
.mb_content:nth-child(3)::after {content: ""; display: inline-block; width: 314px; height: 314px; position: absolute; bottom: -100px; left: 150px; z-index: -1; background: url(images/main_sec02/mb_deco01.png)no-repeat center;}
.mb_content:nth-child(4) {align-content: end;}
.mb_content li {cursor: pointer;}
.mb_content li:nth-child(2) {width: 100%; height: 282px; position: relative; border-radius: 20px 20px 0 0; border: 10px solid #fffcf6; overflow: hidden; box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.1);}
.mb_content li:nth-child(2):hover a { width: 100%; height: 100%; background: url(images/main_sec02/more_btn.png)no-repeat center; position: relative; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.mb_content li:nth-child(2):hover::after {content: ""; width: 100%; height: 100%; display: inline-block; position: absolute; left: 0; top: 0; background: #e0d6c0; opacity: .6;}
.mb_text {width: 300px; height: 116px; position: relative; border-radius: 0 0 20px 20px; background: #fffcf6; text-align: center; align-content: center; box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.1); }
.mb_text::before {content: ""; width: 283px; height: 98px; display: inline-block; position: absolute; left: 10px; top: 10px; background: url(images/main_sec02/tit_outline.png) no-repeat 0;}
.mb_text h2 {font-size: 2.2rem; color: #857560; margin-bottom: 10px;}
.mb_text p {font-size: 1.4rem; color: #857560;}

.mb_queen {width: 102px; height: 149px; background: url(images/main_sec02/ch_queen.png)no-repeat center 40px;}
.mb_item01 {width: 111px; height: 110px; background: url(images/main_sec02/item01.png)no-repeat center / contain;}
.mb_item02 {width: 111px; height: 90px; background: url(images/main_sec02/item02.png)no-repeat center / contain;}
.mb_item03 {width: 111px; height: 90px; background: url(images/main_sec02/item03.png)no-repeat center / contain;}
.mb_item04 {width: 111px; height: 90px; background: url(images/main_sec02/item04.png)no-repeat center / contain;}
.mb_item05 {width: 111px; height: 90px; background: url(images/main_sec02/item05.png)no-repeat center / contain;}
.mb_item06 {width: 111px; height: 90px; background: url(images/main_sec02/item06.png)no-repeat center / contain;}
.mb_item07 {width: 111px; height: 90px; background: url(images/main_sec02/item07.png)no-repeat center / contain;}
.mb_item08 {width: 95px; height: 74px; background: url(images/main_sec02/item08.png)no-repeat center;}

.mb_con01 {width: 100%; height: 100%; background: url(images/main_sec02/mb_con01.png)no-repeat center;}
.mb_con02 {width: 100%; height: 100%; background: url(images/main_sec02/mb_con02.png)no-repeat center;}
.mb_con03 {width: 100%; height: 100%; background: url(images/main_sec02/mb_con03.png)no-repeat center;}
.mb_con04 {width: 100%; height: 100%; background: url(images/main_sec02/mb_con04.png)no-repeat center;}

.mb_items {transform: translateY(150px); transition: all 0.5s;}
.mb_items.active {transform: translateY(150px); transform: scale(1.2);}
.mb_items.scroll {transform: translateY(150px); transform: scale(1.1);}

.tree3 {width: 309px; height: 257px; position: absolute; left: 0; background: url(images/main_sec02/tree3.png)no-repeat 0; animation: tree1 4s linear forwards infinite; transform-origin: left bottom;}
.tree4 {width: 279px; height: 352px; position: absolute; right: -20px; background: url(images/main_sec02/tree4.png)no-repeat right; animation: tree2 10s ease-in-out forwards infinite; transform-origin: right bottom;}
.sun {width: 218px; height: 198px; position: absolute; top: 60px; right: 100px; background: url(images/main_sec02/sun.png)no-repeat right; z-index: -1; animation: sun 10s linear forwards infinite;}
.flower1 {width: 110px; height: 110px; position: absolute; bottom: 0; right: 30px; background: url(images/main_sec02/flower1.png)no-repeat right;
    animation: flower 9s linear infinite; transition: 10s;}
.flower2 {width: 57px; height: 57px; position: absolute; bottom: 80px; left: 30px; background: url(images/main_sec02/flower1.png)no-repeat left / cover;
    animation: flower 6s linear infinite;}
@keyframes flower {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}

/* 섹션03 - 학술정보 */
.section03 {height: 1062px; background: url(images/main_sec03/bg.png) no-repeat 0 / cover; margin-top: 100px; position: relative;}
.section03 .tit {margin-bottom: 160px; transform: translateY(-80px);}
.section03 .tit h3 {font-size: 1.6rem; text-align: center; color: #351215;}
.section03 .tit h2 {font-size: 5.0rem; text-align: center; color: #805735;}
.section03 .bird {width: 119px; height: 115px; background: url(images/main_sec01/bg_bird.png)no-repeat 0; position: relative; left: 40%; top: 100px; opacity: 0; 
    animation: bird 8s ease-in-out infinite; }
@keyframes bird {
    0% {left: 20%; top: 200px; transform: rotate(10deg);}
    50% { top: 150px; opacity: 1; transform: rotate(30deg)}
    100% {left: 100%; top: 0px; opacity: 0.9; transform: rotate(10deg);}
}
.section03 .bird2 {width: 119px; height: 115px; background: url(images/main_sec01/bg_bird.png)no-repeat 0; position: absolute; top: 70%; right: 0; transform: scalex(-1); opacity: 0; display: inline-block;
animation: bird2 10s ease-in-out 6s infinite; 
}
@keyframes bird2 {
    0% {right: 0; }
    50% {right: 60%; opacity: 1;}
    100% {right: 100%; top: 20%;}
}

/* 공통 */
.book_wrap {align-items: end; position: relative;}
.book_slider {width: 590px; height: 335px; left: 20px;}
.book {width: 263px;}
.book_info {padding-left: 60px;}
.book_info h2 {font-size: 2.4rem; color: #5e3c36; margin-bottom: 30px;}
.book_info p {font-size: 1.4rem; color: #805735; margin-bottom: 10px;}
.book_open .btn_wrap {position: absolute; right: 130px;}
.book_open .btn_wrap i {color: #513a20; opacity: .5;}
.book_open .btn_wrap i:hover {color: #513a20; opacity: 1;}
.click {width: 43px; height: 63px; background: url(images/main_sec03/click.png)no-repeat 0; position: absolute; left: 120px; top: 200px;
    animation: click 3s linear infinite;}
    @keyframes click {
        0% {transform: translateY(0);}
        50% {transform: translateY(5px);}
        100% {transform: translateY(0);}
    }
/*공통 exit_btn */
.book_exit, .book_exit2 {display: none; position: absolute; top: -80px; transition: linear .4s; opacity: .6;}
.book_exit i, .book_exit2 i {font-size: 3.6rem; color: #1e0f03;}
.book_exit:hover, .book_exit2:hover {transform: rotate(180deg); opacity: 1;}
/* 공통 book-open */
.book_open {opacity: 0; width: 640px; height: 463px; align-content: center;  transform: scale(1.3); z-index: -1; transition: .4s;}
.book_open.active {opacity: 1; z-index: 1;}
/* 좌측 책 */
.book_left {position: relative;}
.book_left > a {width: 295px; height: 460px; background: url(images/main_sec03/book_left.png) no-repeat 0 / cover; margin: 30px; box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.1); transition: .3s; cursor: pointer;}
.book_left > a:hover {transform: rotate(-15deg) translate(-30px, -30px); animation: book1 1s linear infinite;}
@keyframes book1 {
    0% {outline: 8px solid #6ca2be;}
    100% {outline: 20px solid #9bcee949; }
}
.book_left .book_open {background: url(images/main_sec03/open_book.png)no-repeat 0; position: absolute; top: 30px; left: 25px; }
/* 우측 책 */
.book_right {position: relative;}
.book_right > a {width: 292px; height: 461px; background: url(images/main_sec03/book_right.png) no-repeat 0 / cover; margin: 30px; box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.1); 
    transition: .3s; cursor: pointer;}
.book_right > a:hover {transform: rotate(15deg) translate(30px, -30px);
animation: book2 1s linear forwards infinite;}
@keyframes book2 {
    0% {outline: 8px solid #663c21; }
    100% {outline: 20px solid #f5bf9d27; }}
.book_right .book_open {background: url(images/main_sec03/open_book.png)no-repeat 0; position: absolute; top: 30px; right: 40px;}

/* 섹션04 - 공지사항 */
.section04 {position: relative;}
.section04 .flower3 {width: 445px; height: 243px; position: absolute; left: 0; top: -100px; background: url(images/main_sec04/flower_left.png)no-repeat left; animation: tree1 6s linear forwards infinite; transform-origin: left bottom;}
.section04 .flower4 {width: 382px; height: 324px; position: absolute; left: 0; top: -250px; background: url(images/main_sec04/flower_left2.png)no-repeat left; animation: tree1 10s linear forwards infinite; transform-origin: left bottom;}
.section04 .flower4::after {content: ""; display: inline-block; top: 150px; left: 300px; position: absolute; background: url(images/main_sec04/flower_move.png)no-repeat left; width: 192px; height: 36px; animation: fallingFl 6s linear 2s forwards infinite; transform-origin: right bottom;}
@keyframes fallingFl {
    0% {opacity: 0;}
    50% {left: 200px;}
    90% {left: 300px; top: 700px; opacity: 1;}
    100% {top: 700px; opacity: 0;}
}
.section04 .flower5 {width: 445px; height: 243px; position: absolute; right: 0; top: -140px; background: url(images/main_sec04/flower.png)no-repeat right; animation: tree3 6s linear forwards infinite; transform-origin: right bottom;}
@keyframes tree3 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(5deg) translate(5px,-5px);}
    100% {transform: rotate(0deg);}
}
.section04 .bg {width: 100%; height: 630px; background: url(images/main_sec04/door2.png)no-repeat center / cover;}
.section04 .ch_10 {width: 365px; height: 300px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1; background: url(images/main_sec04/couple.png)no-repeat center / contain;
animation: ch_10 8s ease-in-out infinite;}
/* @keyframes ch_10 {
    0% {}
    30% {transform: translateX(-100px);}
    60% {transform: translateX(100px);}
    100% {}
} */

.section04 .notice {width: 100%;  display: flex; justify-content: space-around; position: absolute; top: 40%; transform: translateY(-40%); overflow-x: auto;}
/* 스크롤 커스텀 */
.section04 .notice::-webkit-scrollbar {height: 20px;}
.section04 .notice::-webkit-scrollbar-thumb {background: #3a5778;}
.section04 .notice::-webkit-scrollbar-track {background: #f7eddc; box-shadow: 3px 3px 3px rgba(0, 0, 0, .1); }
.section04 .notice::-webkit-scrollbar-thumb:hover {background: #2c435c; cursor: pointer;}
    
.paper_wrap:first-child .tit {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.paper_wrap:nth-child(2) .tit {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.paper {width: 303px; height: 203px; background: url(images/main_sec04/paper.png)no-repeat center; padding: 30px 20px; line-height: 25px;}
.paper h2 {font-size: 3.0rem; writing-mode: vertical-rl; color: #877849; margin-right: 15px;}
.news_wrap {width: 220px; height: 100px;}
.news {margin-bottom: 10px;}
.news .tit a {font-size: 1.4rem; color: #827a62; display: inline;}
.news .tit a:hover {font-weight: 800;}
.news .tit a::before {content: ""; background: rgba(81, 58, 32, 0.438); width: 1px; height: 2px; opacity: 0; position: absolute; transform: translateY(20px); transition: .4s;}
.news .tit a:hover::before {width: 220px; opacity: 1;}
.paper_wrap:nth-child(3) a::before {display: none;}
.paper_wrap:nth-child(4) a::before {display: none;}
.news .date {font-size: 1.4rem; color: #827a62;}


/* 반응형 */
@media screen and (max-width:1800px) {
    .section01 .ef3 {background-size: 90%;}
    .section02 .tree2 {display: none;}
}

@media screen and (max-width:1700px) {
    .section01 .ef3 {background-size: 80%;}
    .section02 .bg_deco .tree {background-size: 80%; background-position: left top;}
}

@media screen and (max-width:1600px) {
    .section01 .ef1 {background-size: 80%;  left: -100px;} 
    .section01 .ef2 {right: 200px;}
    @keyframes mainBird {
        0% {right: 200px; top: -50px; opacity: .3;}
        50% {right: 150px; top: -30px; opacity: 1;}
        100% {right: 100px; top: -50px; opacity: 0;}
    }
    .section01 .ef3 {left: -100px;}
    .section02 .bg_deco .tree {background-size: 70%; top: -50px;}

}

@media screen and (max-width: 1400px) {
    .section01 .ef1 {background-size: 70%; top: -60px; left: -80px;}
    @keyframes moon {
        0% {left: -80px; top: -60px;}
        50% {left: -70px; top: -70px;}
        100% {left: -80px; top: -60px;}
    }
    .section01 .ef3 {left: -180px;}
    .section02 {display: none;}
    .section02 .item07 {background-size: 80%;}
    .mb_section02 {display: block;}
}

@media screen and (max-width: 1320px) {
    .section01 .video .door1-1 {display: none;}
    .section01 .video .door2-1 {display: none;}
}

@media screen and (max-width: 1300px) {
    .section01 .ef2 {background-size: 80%; right: 140px}
    .section01 .ef3 {left: -200px;}
    .section01 .info_txt h3 {margin: 0 10px;}
    .mb_section02 .mb_contents {flex-wrap: wrap;}
    .mb_content:nth-child(4) {display: none;} 
    .section04 .paper_wrap {margin: 20px 20px;}
    .ch_10 {display: none;}

}

@media screen and (max-width: 1100px) {
    .section01 .ef1, .section01 .ef2, .section01 .ef3 {display: none;}
    .section01 .video .door1 {animation: none; left: -150px;}
    .section01 .video .door2 {animation: none; right: -150px;}

}

@media screen and (max-width: 975px) {
    .mb_content:nth-child(4) {display: block;} 
    .tree3 {background-size: 80%;}
    .tree4 {background-size: 80%; top: 150px;}
    .sun {background-size: 90%; top: 150px;}
}

@media screen and (max-width: 900px) {
    .section01 .info_txt h3 {font-size: 1.6rem;}
    .section01 .info_txt li {font-size: 1.8rem;}
    .section01 .info_txt p {display: none;}
    .section01 .video {height: 420px;}
    .section01 .video .door1 {height: 100%; background-size: contain; left: -100px;}
    .section01 .video .door2 {height: 100%; background-size: contain; right: -100px;}
    .tree4 {background-size: 80%;}
    .sun {background-size: 90%;;}
    .book_open {transform: scale(1.1);}
    .book_exit, .book_exit2 {top: -40px;}
    .book_left > a:hover {transform: rotate(-5deg) translate(0,0);}
    .book_right > a:hover {transform: rotate(5deg) translate(0,0);}
    .section04 .flower3 {left: -100px;}
    .section04 .flower4 {left: -50px;}
    .section04 .flower5 {right: -100px;}

}

@media screen and (max-width: 800px) {
    .section01 .info_txt span {font-size: 1.0rem;}
    .section01 .video {height: 390px;}
    .section01 .tit h1 {font-size: 7rem;}
    .mb_content:nth-child(1)::after {left: 50px;}
    .tree3 {top: 50px;}
    .book_open {transform: scale(1);}
    .book_left .book_open {left: 30px;}
    .book_right .book_open {right: 30px;}
}

@media screen and (max-width: 655px) {
    .section01 .info_txt {display: block; margin: 0 20px;}
    .section01 .info_txt h3 {margin: 0; font-size: 1.4rem;}
    .section01 .info_txt li {font-size: 1.6rem;}
    .section01 .video {height: 350px;}
    .section01 .video .door1-1 {left: -170px; animation: none; height: 100%; background-size: contain;}
    .mb_content {height: 580px; align-content: end;}
    .mb_content:nth-child(1)::after {left: -100px; top: 400px;}
    .tree3 {top: 100px; background-size: 60%;}
    .sun {background-size: 70%;}
    .flower1 {bottom: 50%;}
    .flower2 {bottom: 30%;}
    .section03 {background-position: -150px;}
    .book_left > a , .book_right > a {transform: scale(0.9); margin: 0;}
    .book_left > a:hover, .book_right > a:hover {transform: scale(0.9) translateY(-20px);}
    .book_open {transform: scale(0.9);}
    .book_left .book_open {left: -30px; top: 0;}
    .book_right .book_open {right: -30px; top: 0;}
    .section04 .flower3 {left: -150px;}
    .section04 .flower4 {left: -100px;}
    .section04 .flower5 {right: -150px;}
}

@media screen and (max-width: 600px) {
    .section01 .video {height: 330px;}

    .sun {right: 30px; top: 80px;}
    .tree3 {top: 0px; left: -30px;}
    .tree4 {top: 240px;}
    .book_left > a , .book_right > a {transform: scale(0.8); margin: 0;}
    .book_open {transform: scale(0.8);}
    .book_left .book_open {left: -25px; top: 0;}
    .book_right .book_open {right: -25px; top: 0;}
}

@media screen and (max-width: 500px) {
    .section01 .tit h2 {font-size: 2.0rem;}
    .section01 .tit h1 {font-size: 5.2rem;}
    .section01 .tit h1::before {height: 30px; margin: 0;}
    .section01 .info {height: 70px;}
    .section01 .info_txt {margin: 0 10px;}
    .section01 .info_txt h3 {font-size: 1.2rem;}
    .section01 .info_txt li {font-size: 1.4rem;}
    .section01 .video {height: 300px;}
    .section01 .video .door1 {animation: door1 3s;}
    .section01 .video .door2 {animation: door2 3s;}
    @keyframes door1 {
        0% {left: -50px}
        100% {left: -100px;}
    }
    @keyframes door2 {
        0% {right: -50px;}
        100% {right: -100px;}
    }
    .section01 .video .door1-1 {left: -160px; animation: none; height: 100%; background-size: contain;}
    .section01 .video .door2-1 {right: -340px; animation: none; height: 100%; background-size: contain;}
    .mb_section02 .tit h2, .section03 .tit h2 {font-size: 3.6rem;}
    .section03 .tit {margin-bottom: 30px;}    
    .tree4 {top: 500px;}
    .sun {top: 50px; right: 0;}
    .book_wrap {flex-wrap: wrap; transform: translateY(-100px);}
    .book_exit {top: 0; right: 30px; z-index: 1;}
    .book_exit2 {top: 460px; right: 30px; z-index: 1;}
    .book_left .book_open {left: -170px; top: 0; transform: scale(0.7);}
    .book_right .book_open {right: -170px; top: 0; transform: scale(0.7);}
    /* .mb_content li:nth-child(2) a { width: 100%; height: 100%; background: url(images/main_sec02/more_btn.png)no-repeat center; position: relative; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%);}
    .mb_content li:nth-child(2)::after {content: ""; width: 100%; height: 100%; display: inline-block; position: absolute; left: 0; top: 0; background: #e0d6c0; opacity: .6;} */
    .section03 {height: 1300px;}
    .section04 .ch_10 {display: block; height: 200px; background-position: bottom;}
    .section04 .flower3 {background-size: 70%; left: -50px;}
    .section04 .flower4 {background-size: 70%; left: -40px;}
    .section04 .flower5 {background-size: 70%; right: -120px;}
    
}

@media screen and (max-width: 400px) {
    .section01 .video .door1 {left: -120px;}
    .section01 .video .door2 {right: -120px;}
    .section01 .info {height: 60px;}
    .section01 .info_txt span {display: none;}
    .tree3, .tree4, .sun {background-size: 50%;}

}