#chuchyun_big,#chuchyun_mid,#chuchyun_small{transition-duration: .3s;}

/*pc*/
@media screen and (min-width:1561px){
/*secBtn start*/
#secBtn{position: fixed; left: 50px; top: 166px; z-index: 5;}
#secBtn li{position: relative; opacity: 0.7; transition-duration: .5s;}
#secBtn li.clicked_secBtn{opacity: 1;}
#secBtn li.clicked_secBtn::after{content: ''; height: 1px; width: 18px; background-color: #fff; left: -15px; top: 10px; position: absolute; transition-duration: .5s;}
#secBtn li a{position: relative; color: #fff; font-weight: 500; width: 65px; text-align: right; margin-top: 60px; transition-duration: .5s;}
/*secBtn end*/

/*toptopBanner start*/
#topBanner{position: relative; overflow: hidden;}
.top_banner_imgs{position: relative; display: flex; width: 400%; }
.top_banner_imgs li{height: 100vh; background-position:center; background-size: cover; position: relative; width: 25%;}
.top_banner_imgs li:nth-child(1){background-image: url(../img/main0.jpg);}
.top_banner_imgs li:nth-child(2){background-image: url(../img/main1.jpg);}
.top_banner_imgs li:nth-child(3){background-image: url(../img/main2.jpg);}
.top_banner_imgs li:nth-child(4){background-image: url(../img/main3.jpg);}
.topBanner_wrap{position: absolute; width: 80%; top: 0; left: 50%; transform: translateX(-50%); transition-duration: .3s;}
.top_time{position:relative; width: 263px; height: 30px; left: 10px; display: flex; justify-content: space-between; top:470px;}
.topBanner_wrap .top_time .time_bar{height: 2px; width: 180px; position: relative; background-color: #fff; top: 15px; overflow: hidden;}
.topBanner_wrap .top_time .time_bar span{height: 100%; width: 0%; position:absolute; background-color: #978774; top: 0; left: 0;}
.topBanner_wrap #topPage{color: #fff; font-weight: 500; line-height: 30px;}
.topBanner_wrap #topPage span{color: #fff; font-weight: 500; line-height: 30px;}
.topBanner_wrap .time_btn{top:3px; position: relative; cursor: pointer;}
.topBanner_wrap h2{font-size: 4em; font-weight: 800; position: relative; top: 500px; left: 0; transition-duration: .3s;}
.topBanner_wrap h3{font-size: 1.1em; font-weight: 500; color: #fff; position: relative; top: 520px; left: 0;}
.topBanner_wrap .top_text_box{position: relative; top: 530px;}
.topBanner_wrap .top_text_box li{position: relative; display: none;}
.topBanner_wrap .top_text_box li:first-child{display: block;}
.topBanner_wrap .top_text_box li p{font-weight: 500; font-size: 1.2em; color: #fff; position: absolute; transition-duration: .5s;}
.scroll_box{position: absolute; left: 50%; transform: translateX(-50%); width: 50px; height: 76px; top: 830px;}
.scroll_box img{position:relative; width: 100%; bottom: 10px; animation: scroll .8s 1s; animation-iteration-count:infinite;}
.scroll_box p{text-align: center; font-weight: 500; font-size: 1.2em; color: #fff;}

@keyframes scroll{
    0%{bottom: 10px; animation-timing-function:ease-out;}
    50%{bottom: 0px; animation-timing-function:ease-in;}
    100%{bottom: 10px;}
}
.family_btn{position: absolute; width: 100px; height: 60px; background-color: #333; border-radius:31px 0 0 31px; right: 0; top: 230px; z-index: 1; cursor: pointer;}
.family_btn img{position: relative; left: 25px; transform: rotate(0); transition-duration: .3s;}
.family_body{position: absolute; width: 340px; height: 417px; background-color: #fff; right: 0; top: 260px;}
.family_body img{width: 100%;}
.family_body h4{font-weight: 500; text-align: center; font-size: 1.3em; margin-top: 20px;}
.family_body p{text-align: center; margin-top: 25px; color: #666; font-size: 0.9em;}
.family_body button{width: 130px; height: 40px; background-color: #978774; text-align: center; line-height: 40px; color: #fff; font-size: 0.9em; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; cursor: pointer;}
/*toptopBanner end*/

/*chuchyun start*/
#chuchyun{position: relative; height: 100vh; background-image: url(../img/banner_bg.jpg); background-position:center; background-size: cover;}
.chuchyun_wrap{position: relative; width: 80%; margin: 0 auto;}
.chuchyun_wrap h2{font-size: 2.4em; position: absolute; top: 25%;}
.chuchyun_wrap .chuchyun_box_wrap{width: 843px; height: 618px; display: flex; justify-content: space-between; position: relative; margin: 0 auto; transform: translateY(40%); align-items: center;}
.chuchyun_box_wrap .first_box{position: relative; width: 448px; height: 448px;}
.chuchyun_box_wrap .first_box img{width:100%;}
.chuchyun_box_wrap .first_box .over_box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:rgba(225,225,225,.7); opacity: 0; transition-duration: .3s;}
.chuchyun_box_wrap .first_box .over_box::before{content: ''; background: url(../img/chuchyun_frame0.png); position: absolute; top: 0; left: 0; width: 150px; height: 150px;}
.chuchyun_box_wrap .first_box .over_box::after{content: ''; background: url(../img/chuchyun_frame1.png); position: absolute; bottom: 0; right: 0; width: 150px; height: 150px;}
.chuchyun_box_wrap .first_box .over_box li{position:relative; margin: 0 auto; margin-top: 50%; transform: translateY(-65%); display: none;}
.chuchyun_box_wrap .first_box .over_box li:first-child{display: block;}
.chuchyun_box_wrap .first_box .over_box li p:first-child{text-align: center; font-weight: 500; font-size: 1.2em; top: -10px; position: relative;}
.chuchyun_box_wrap .first_box .over_box li h3{text-align: center; font-weight: 500; font-size: 1.4em; position: relative;}
.chuchyun_box_wrap .first_box .over_box li p:last-child{text-align: center; font-weight: 500; font-size: 1.1em; color: #978774; position: relative; top: 20px;}
.chuchyun_box_wrap .last_box{position: relative;}
.chuchyun_box_wrap .last_box a:first-child{position: relative; width: 232px; height: 232px; top: -17px;}
.chuchyun_box_wrap .last_box a img{width: 100%;}
.chuchyun_box_wrap .last_box a:last-child{position: relative; width: 352px; height: 352px; bottom: -17px;}
#chuchyun_prev{position: absolute; top: 0; left: 400px; width: 50px; height: 50px; border: 1px solid #fff; border-radius:60%; cursor: pointer; transition-duration: .3s;}
#chuchyun_prev img{position: absolute; left: 10px; bottom: 12px;}
#chuchyun_prev img:last-child{opacity: 0; transform: rotate(180deg);}
#chuchyun_prev:hover{background-color: #fff;}
#chuchyun_prev:hover img:last-child{opacity: 1;}
.chuchyun_num{position: absolute; top: -45px; right: 220px; color: #fff; font-size: 1.1em;}
.chuchyun_num span{color: #fff; font-size: 1em;}
#chuchyun_next{position: absolute; top: 0; right: 28px; width: 50px; height: 50px; border: 1px solid #fff; border-radius:60%; cursor: pointer; transition-duration: .3s;}
#chuchyun_next img{position: absolute; left: 12px; bottom: 12px;}
#chuchyun_next img:first-child{transform: rotate(180deg);}
#chuchyun_next img:last-child{opacity: 0;}
#chuchyun_next:hover{background-color: #fff;}
#chuchyun_next:hover img:last-child{opacity: 1;}
/*chuchyun end*/

/*premiere start*/
#premiere{position: relative; height: 100vh; background-image: url(../img/premiere_bg.jpg); background-position:center; background-size: cover; display: flex; justify-content: space-between;}
.premiere_ctrl{width: 50%;}
.premiere_ctrl_wrap{width: 60%; position: relative; margin: 0 auto;}
.premiere_ctrl_wrap h2{font-size: 2.4em; position: absolute; top: 30%; color: #000;}
.premiere_ctrl_wrap p{font-size: 1.2em; position: absolute; top: 42%; color: #000;}
.premiere_ctrl_wrap .inner{position: relative; width: 110%; height: 480px; transform: translateY(70%);}
.premiere_ctrl_wrap .inner a{display: flex; justify-content: space-between; padding:0 10%; height: 160px; border-bottom: 1px solid #000; position: relative;}
.premiere_ctrl_wrap .inner a div:first-child{top: 50px; position: relative;}
.premiere_ctrl_wrap .inner .p_div{top: 65px; position: relative; width: 173px; height: 35px; display: flex; justify-content: space-between;}
.premiere_ctrl_wrap .inner .p_div p{position: absolute; top: 3px; font-size: 1.3em;}
.premiere_ctrl_wrap .inner .p_div div{width: 11px; height: 20px; position:absolute; right: 10px; top:2px;}
.premiere_ctrl_bg{width: 100%; height: 160px; background-color: #dcdcdc; position: absolute; top: -0%; left: 50%; transform: translate(-50%,-0%); z-index: -1; transition-duration: .3s; opacity: 0;}
.premiere_img{width: 50%; background-image: url(../img/premiere0.jpg); background-position:center; background-size: cover; transition-duration: .3s;}
/*premiere end*/

/*hot start*/
#hot{position: relative; height: 100vh; background-color: #dcdcdc; overflow: hidden;}
.hot_wrap{transition-duration:.3s ; width: 100%; height: 100%;}
.hot_top{position: relative; display: flex; justify-content: space-between; width: 80%; margin: 0 auto; }
.hot_top div{position: relative; display: flex; margin-top: 9.5%; align-items: flex-end;}
.hot_top div h2{font-size: 2.4em; color: #000; transition-duration: .3s;}
.hot_top div p{margin-left: 25px; font-size: 1.2em; transition-duration: .3s;}
.hot_top .drag{position: relative; margin-top: 9.5%; color: #978774; left:-1%; animation: drag .8s 1s; animation-iteration-count:infinite; transition-duration: .3s;}
@keyframes drag{
    0%{left:-1%; animation-timing-function:ease-out;}
    50%{left:-0%; animation-timing-function:ease-in;}
    100%{left:-1%;}
}
#hot ul{width: 200%; display: flex; position: relative; left: 10%; transition-duration: .5s;}
#hot ul li{position: relative; width: 130%; margin-left: 60px; top: 0;transform: translateY(20%); transition-duration: .3s;}
#hot ul li:first-child{margin-left: 0;}
#hot ul li img{width: 100%; transition-duration: .3s;}
#hot ul li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color:rgba(0,0,0,.3); box-sizing: border-box; border: 2px solid rgba(225,225,225,.5); opacity: 0; transition-duration: .3s;}
#hot ul li .over_box_wrap{position: relative; width: 90%; margin: 10% auto; opacity: 0.5; transition-duration: .3s;}
#hot ul li .over_box_wrap p:first-child{color: #fff; font-size: 0.9em;}
#hot ul li .over_box_wrap h3{color: #fff; font-size: 1.5em; margin-top: 20px;}
#hot ul li .over_box_wrap h4{color: #fff; font-size: 1.1em; margin-top: 50px;}
#hot ul li .over_box_wrap p{color: #fff; font-size: 1.1em; margin-top: 50px;}
/*hot end*/

/*notice start*/
#notice{position: relative; height: 100vh; background-image: url(../img/notice_bg.jpg); background-position:center; background-size: cover; }
.notice_bg{background-color:rgba(0,0,0,.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.notice_wrap{width: 80%; position: relative; margin: 0 auto; display: flex; justify-content: space-between;} 
.notice_wrap .note_text{position: relative; width: 55%; transition-duration: .3s;}
.notice_wrap .note_top{position: relative; display: flex; margin-top:19%; align-items: flex-end;}
.notice_wrap .note_top h2{font-size: 2.4em;}
.notice_wrap .note_top p{color: #fff; margin-left: 25px; font-size: 1.2em;}
.notice_wrap .note_text ul{position: relative; transform: translateY(15%);}
.notice_wrap .note_text ul li{position: relative; height: 120px; border-top: 1px solid #fff; padding:0 3%;}
.notice_wrap .note_text ul li:last-child{border-bottom: 1px solid #fff;}
.notice_wrap .note_text ul li a{position: relative; line-height: 120px; display: flex; justify-content: space-between;}
.notice_wrap .note_text ul li a h3{color: #fff; font-size: 1.3em;}
.notice_wrap .note_text ul li a p{color: #fff; font-size: 1.1em;}
.notice_wrap .note_text .view_more{position: relative; text-align: right; color: #fff; top: 15%; font-size: 1.3em;}
.notice_wrap .note_img{width:40%; height: 292px; position: relative; transform: translateY(100%); transition-duration: .3s;}
.notice_wrap .note_img img{width: 100%; border: 3px solid #978774; box-sizing: border-box;}
/*notice end*/
}













/*tablet 큰 가로*/
@media screen and (min-width:1201px) and (max-width:1560px){
    /*secBtn start*/
    #secBtn{position: fixed; left: 30px; top: 166px; z-index: 5;}
    #secBtn li{position: relative; opacity: 0.7; transition-duration: .5s;}
    #secBtn li.clicked_secBtn{opacity: 1;}
    #secBtn li span{height: 1px; width: 18px; background-color: #fff; left: -15px; top: 10px; position: absolute; opacity: 0; transition-duration: .5s; }
    #secBtn li span#clicked_secBtn_span{opacity: 1;}
    #secBtn li a{position: relative; color: #fff; font-weight: 500; width: 65px; text-align: right; margin-top: 60px; transition-duration: .5s;}
    /*secBtn end*/
    
    /*toptopBanner start*/
    #topBanner{position: relative; overflow: hidden;}
    .top_banner_imgs{position: relative; display: flex; width: 400%; }
    .top_banner_imgs li{height: 100vh; background-position:center; background-size: cover; position: relative; width: 25%;}
    .top_banner_imgs li:nth-child(1){background-image: url(../img/main0.jpg);}
    .top_banner_imgs li:nth-child(2){background-image: url(../img/main1.jpg);}
    .top_banner_imgs li:nth-child(3){background-image: url(../img/main2.jpg);}
    .top_banner_imgs li:nth-child(4){background-image: url(../img/main3.jpg);}
    .topBanner_wrap{position: absolute; width:80%; top: 0; left: 50%; transform: translateX(-50%); transition-duration: .3s;}
    .top_time{position:relative; width: 263px; height: 30px; left: 10px; display: flex; justify-content: space-between; top:470px; transition-duration: .3s;}
    .topBanner_wrap .top_time .time_bar{height: 2px; width: 180px; position: relative; background-color: #fff; top: 15px; overflow: hidden;}
    .topBanner_wrap .top_time .time_bar span{height: 100%; width: 0%; position:absolute; background-color: #978774; top: 0; left: 0;}
    .topBanner_wrap #topPage{color: #fff; font-weight: 500; line-height: 30px;}
    .topBanner_wrap #topPage span{color: #fff; font-weight: 500; line-height: 30px;}
    .topBanner_wrap .time_btn{top:3px; position: relative; cursor: pointer;}
    .topBanner_wrap h2{font-size: 3.8em; font-weight: 800; position: relative; top: 500px; left: 0; transition-duration: .3s;}
    .topBanner_wrap h3{font-size: 1.1em; font-weight: 500; color: #fff; position: relative; top: 520px; left: 0;}
    .topBanner_wrap .top_text_box{position: relative; top: 530px;}
    .topBanner_wrap .top_text_box li{position: relative; display: none;}
    .topBanner_wrap .top_text_box li:first-child{display: block;}
    .topBanner_wrap .top_text_box li p{font-weight: 500; font-size: 1.2em; color: #fff; position: absolute; transition-duration: .5s;}
    .scroll_box{position: absolute; left: 50%; transform: translateX(-50%); width: 50px; height: 76px; top: 830px; transition-duration: .3s;}
    .scroll_box img{position:relative; width: 100%; bottom: 10px; animation: scroll .8s 1s; animation-iteration-count:infinite;}
    .scroll_box p{text-align: center; font-weight: 500; font-size: 1.2em; color: #fff;}
    
    @keyframes scroll{
        0%{bottom: 10px; animation-timing-function:ease-out;}
        50%{bottom: 0px; animation-timing-function:ease-in;}
        100%{bottom: 10px;}
    }
    .family_btn{position: absolute; width: 100px; height: 60px; background-color: #333; border-radius:31px 0 0 31px; right: 0; top: 230px; z-index: 1; cursor: pointer; transition-duration: .3s;}
    .family_btn img{position: relative; left: 25px; transform: rotate(0); transition-duration: .3s;}
    .family_body{position: absolute; width: 340px; height: 417px; background-color: #fff; right: 0; top: 260px; }
    .family_body img{width: 100%;}
    .family_body h4{font-weight: 500; text-align: center; font-size: 1.3em; margin-top: 20px;}
    .family_body p{text-align: center; margin-top: 25px; color: #666; font-size: 0.9em;}
    .family_body button{width: 130px; height: 40px; background-color: #978774; text-align: center; line-height: 40px; color: #fff; font-size: 0.9em; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; cursor: pointer;}
    /*toptopBanner end*/
    
    /*chuchyun start*/
    #chuchyun{position: relative; height: 100vh; background-image: url(../img/banner_bg.jpg); background-position:center; background-size: cover;}
    .chuchyun_wrap{position: relative; width: 80%; margin: 0 auto; transition-duration: .3s;}
    .chuchyun_wrap h2{font-size: 2.4em; position: absolute; top: 25%; transition-duration: .3s;}
    .chuchyun_wrap .chuchyun_box_wrap{width: 843px; height: 618px; display: flex; justify-content: space-between; position: relative; margin: 0 auto; transform: translateY(40%); align-items: center; transition-duration: .3s;}
    .chuchyun_box_wrap .first_box{position: relative; width: 448px; height: 448px;}
    .chuchyun_box_wrap .first_box img{width:100%;}
    .chuchyun_box_wrap .first_box .over_box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:rgba(225,225,225,.7); opacity: 0; transition-duration: .3s;}
    .chuchyun_box_wrap .first_box .over_box::before{content: ''; background: url(../img/chuchyun_frame0.png); position: absolute; top: 0; left: 0; width: 150px; height: 150px;}
    .chuchyun_box_wrap .first_box .over_box::after{content: ''; background: url(../img/chuchyun_frame1.png); position: absolute; bottom: 0; right: 0; width: 150px; height: 150px;}
    .chuchyun_box_wrap .first_box .over_box li{position:relative; display: none; margin: 0 auto; margin-top: 50%; transform: translateY(-65%);}
    .chuchyun_box_wrap .first_box .over_box li:first-child{display: block;}
    .chuchyun_box_wrap .first_box .over_box li p:first-child{text-align: center; font-weight: 500; font-size: 1.2em; top: -10px; position: relative;}
    .chuchyun_box_wrap .first_box .over_box li h3{text-align: center; font-weight: 500; font-size: 1.4em; position: relative;}
    .chuchyun_box_wrap .first_box .over_box li p:last-child{text-align: center; font-weight: 500; font-size: 1.1em; color: #978774; position: relative; top: 20px;}
    .chuchyun_box_wrap .last_box{position: relative;}
    .chuchyun_box_wrap .last_box a:first-child{position: relative; width: 232px; height: 232px; top: -17px;}
    .chuchyun_box_wrap .last_box a img{width: 100%;}
    .chuchyun_box_wrap .last_box a:last-child{position: relative; width: 352px; height: 352px; bottom: -17px;}
    #chuchyun_prev{position: absolute; top: 0; left: 400px; width: 50px; height: 50px; border: 1px solid #fff; border-radius:60%; cursor: pointer; transition-duration: .3s;}
    #chuchyun_prev img{position: absolute; left: 10px; bottom: 12px;}
    #chuchyun_prev img:last-child{opacity: 0; transform: rotate(180deg);}
    #chuchyun_prev:hover{background-color: #fff;}
    #chuchyun_prev:hover img:last-child{opacity: 1;}
    .chuchyun_num{position: absolute; top: -45px; right: 220px; color: #fff; font-size: 1.1em;}
    .chuchyun_num span{color: #fff; font-size: 1em;}
    #chuchyun_next{position: absolute; top: 0; right: 28px; width: 50px; height: 50px; border: 1px solid #fff; border-radius:60%; cursor: pointer; transition-duration: .3s;}
    #chuchyun_next img{position: absolute; left: 12px; bottom: 12px;}
    #chuchyun_next img:first-child{transform: rotate(180deg);}
    #chuchyun_next img:last-child{opacity: 0;}
    #chuchyun_next:hover{background-color: #fff;}
    #chuchyun_next:hover img:last-child{opacity: 1;}
    /*chuchyun end*/
    
    /*premiere start*/
    #premiere{position: relative; height: 100vh; background-image: url(../img/premiere_bg.jpg); background-position:center; background-size: cover; display: flex; justify-content: space-between;}
    .premiere_ctrl{width: 50%;}
    .premiere_ctrl_wrap{width: 60%; position: relative; margin: 0 auto;}
    .premiere_ctrl_wrap h2{font-size: 2.4em; position: absolute; top: 30%; color: #000;}
    .premiere_ctrl_wrap p{font-size: 1.2em; position: absolute; top: 42%; color: #000;}
    .premiere_ctrl_wrap .inner{position: relative; width: 110%; height: 480px; transform: translateY(70%);}
    .premiere_ctrl_wrap .inner a{display: flex; justify-content: space-between; padding:0 10%; height: 160px; border-bottom: 1px solid #000; position: relative;}
    .premiere_ctrl_wrap .inner a div:first-child{top: 50px; position: relative;}
    .premiere_ctrl_wrap .inner .p_div{top: 65px; position: relative; width: 173px; height: 35px; display: flex; justify-content: space-between;}
    .premiere_ctrl_wrap .inner .p_div p{position: absolute; top: 3px; font-size: 1.3em;}
    .premiere_ctrl_wrap .inner .p_div div{width: 11px; height: 20px; position:absolute; right: 10px; top:2px;}
    .premiere_ctrl_bg{width: 660px; height: 160px; background-color: #dcdcdc; position: absolute; top: 0%; left: 50%; transform: translate(-50%,-0%); z-index: -1; transition-duration: .3s; opacity: 0;}
    .premiere_img{width: 50%; background-image: url(../img/premiere0.jpg); background-position:center; background-size: cover; transition-duration: .3s;}
    /*premiere end*/
    
    /*hot start*/
    #hot{position: relative; height: 100vh; background-color: #dcdcdc; overflow: hidden;}
    .hot_wrap{transition-duration:.3s ; width: 100%; height: 100%;}
    .hot_top{position: relative; display: flex; justify-content: space-between; width: 80%; margin: 0 auto; }
    .hot_top div{position: relative; display: flex; margin-top: 9.5%; align-items: flex-end;}
    .hot_top div h2{font-size: 2.4em; color: #000;transition-duration: .3s;}
    .hot_top div p{margin-left: 25px; font-size: 1.2em;transition-duration: .3s;}
    .hot_top .drag{position: relative; margin-top: 9.5%; color: #978774; left:-1%; animation: drag .8s 1s; animation-iteration-count:infinite; transition-duration: .3s;}
    @keyframes drag{
        0%{left:-1%; animation-timing-function:ease-out;}
        50%{left:-0%; animation-timing-function:ease-in;}
        100%{left:-1%;}
    }
    #hot ul{width: 250%; display: flex; position: relative; left: 10%; transition-duration: .5s;}
    #hot ul li{position: relative; width: 100%; margin-left: 60px; top: 0;transform: translateY(20%); transition-duration: .3s;}
    #hot ul li:first-child{margin-left: 0;}
    #hot ul li img{width: 100%; transition-duration: .3s;}
    #hot ul li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color:rgba(0,0,0,.3); box-sizing: border-box; border: 2px solid rgba(225,225,225,.5); opacity: 0; transition-duration: .3s;}
    #hot ul li .over_box_wrap{position: relative; width: 90%; margin: 10% auto; opacity: 0.5; transition-duration: .3s;}
    #hot ul li .over_box_wrap p:first-child{color: #fff; font-size: 0.9em;}
    #hot ul li .over_box_wrap h3{color: #fff; font-size: 1.5em; margin-top: 20px;}
    #hot ul li .over_box_wrap h4{color: #fff; font-size: 1.1em; margin-top: 50px;}
    #hot ul li .over_box_wrap p{color: #fff; font-size: 1.1em; margin-top: 50px;}
    /*hot end*/
    
    /*notice start*/
    #notice{position: relative; height: 100vh; background-image: url(../img/notice_bg.jpg); background-position:center; background-size: cover; transition-duration: .3s;}
    .notice_bg{background-color:rgba(0,0,0,.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .notice_wrap{width: 80%; position: relative; margin: 0 auto; display: flex; justify-content: space-between; transition-duration: .3s;} 
    .notice_wrap .note_text{position: relative; width: 55%; transition-duration: .3s;}
    .notice_wrap .note_top{position: relative; display: flex; margin-top:19%; align-items: flex-end; transition-duration: .3s;}
    .notice_wrap .note_top h2{font-size: 2.4em;}
    .notice_wrap .note_top p{color: #fff; margin-left: 25px; font-size: 1.2em;}
    .notice_wrap .note_text ul{position: relative; transform: translateY(15%);}
    .notice_wrap .note_text ul li{position: relative; height: 120px; border-top: 1px solid #fff; padding:0 3%; transition-duration: .3s;}
    .notice_wrap .note_text ul li:last-child{border-bottom: 1px solid #fff;}
    .notice_wrap .note_text ul li a{position: relative; line-height: 120px; display: flex; justify-content: space-between; transition-duration: .3s;}
    .notice_wrap .note_text ul li a h3{color: #fff; font-size: 1.3em;}
    .notice_wrap .note_text ul li a p{color: #fff; font-size: 1.1em;}
    .notice_wrap .note_text .view_more{position: relative; text-align: right; color: #fff; top: 15%; font-size: 1.3em;}
    .notice_wrap .note_img{width: 40%; height: 292px; position: relative; transform: translateY(100%); transition-duration: .3s;}
    .notice_wrap .note_img img{width: 100%; border: 3px solid #978774; box-sizing: border-box;}
    /*notice end*/
    }















    /*tablet 가로*/
@media screen and (min-width:801px) and (max-width:1200px){
    /*secBtn start*/
    #secBtn{position: fixed; left: 30px; top: 166px; z-index: 5; display: none;}
    /*secBtn end*/
    
    /*toptopBanner start*/
    #topBanner{position: relative; overflow: hidden;}
    .top_banner_imgs{position: relative; display: flex; width: 400%; }
    .top_banner_imgs li{height: 100vh; background-position:center; background-size: cover; position: relative; width: 25%;}
    .top_banner_imgs li:nth-child(1){background-image: url(../img/main0.jpg);}
    .top_banner_imgs li:nth-child(2){background-image: url(../img/main1.jpg);}
    .top_banner_imgs li:nth-child(3){background-image: url(../img/main2.jpg);}
    .top_banner_imgs li:nth-child(4){background-image: url(../img/main3.jpg);}
    .topBanner_wrap{position: absolute; width: 90%; top: 0; left: 50%; transform: translateX(-50%); transition-duration: .3s;}
    .top_time{position:relative; width: 263px; height: 30px; left: 10px; display: flex; justify-content: space-between; top:370px;}
    .topBanner_wrap .top_time .time_bar{height: 2px; width: 180px; position: relative; background-color: #fff; top: 15px; overflow: hidden;}
    .topBanner_wrap .top_time .time_bar span{height: 100%; width: 0%; position:absolute; background-color: #978774; top: 0; left: 0;}
    .topBanner_wrap #topPage{color: #fff; line-height: 30px;}
    .topBanner_wrap #topPage span{color: #fff; line-height: 30px;}
    .topBanner_wrap .time_btn{top:3px; position: relative; cursor: pointer;}
    .topBanner_wrap h2{font-size: 3em; font-weight: 800; position: relative; top: 400px; left: 0; transition-duration: .3s;}
    .topBanner_wrap h3{font-size: 1em; font-weight: 500; color: #fff; position: relative; top: 420px; left: 0;}
    .topBanner_wrap .top_text_box{position: relative; top: 430px;}
    .topBanner_wrap .top_text_box li{position: relative; display: none;}
    .topBanner_wrap .top_text_box li:first-child{display: block;}
    .topBanner_wrap .top_text_box li p{font-weight: 500; font-size: 1.2em; color: #fff; position: absolute; transition-duration: .5s;}
    .scroll_box{position: absolute; left: 50%; transform: translateX(-50%); width: 40px; height: 66px; top: 700px; transition-duration: .3s;}
    .scroll_box img{position:relative; width: 100%; bottom: 10px; animation: scroll .8s 1s; animation-iteration-count:infinite;}
    .scroll_box p{text-align: center; font-weight: 500; font-size: 1em; color: #fff;}
    
    @keyframes scroll{
        0%{bottom: 10px; animation-timing-function:ease-out;}
        50%{bottom: 0px; animation-timing-function:ease-in;}
        100%{bottom: 10px;}
    }
    .family_btn{position: absolute; width: 80px; height: 60px; background-color: #333; border-radius:31px 0 0 31px; right: 0; top: 220px; z-index: 1; cursor: pointer; transition-duration: .3s;}
    .family_btn img{position: relative; left: 25px; transform: rotate(0); transition-duration: .3s;}
    .family_body{position: absolute; width: 340px; height: 417px; background-color: #fff; right: 0; top: 250px; }
    .family_body img{width: 100%;}
    .family_body h4{font-weight: 500; text-align: center; font-size: 1.3em; margin-top: 20px;}
    .family_body p{text-align: center; margin-top: 25px; color: #666; font-size: 0.9em;}
    .family_body button{width: 130px; height: 40px; background-color: #978774; text-align: center; line-height: 40px; color: #fff; font-size: 0.9em; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; cursor: pointer;}
    /*toptopBanner end*/
    
    /*chuchyun start*/
    #chuchyun{position: relative; height: 100vh; background-image: url(../img/banner_bg.jpg); background-position:center; background-size: cover;}
    .chuchyun_wrap{position: relative; width: 90%; margin: 0 auto; transition-duration: .3s;}
    .chuchyun_wrap h2{font-size: 2em; position: absolute; top: 25%; transition-duration: .3s;}
    .chuchyun_wrap .chuchyun_box_wrap{width: 623px; height: 408px; display: flex; justify-content: space-between; position: relative; margin: 0 auto; transform: translateY(60%); align-items: center; transition-duration: .3s;}
    .chuchyun_box_wrap .first_box{position: relative; width: 338px; height: 338px;}
    .chuchyun_box_wrap .first_box img{width:100%;}
    .chuchyun_box_wrap .first_box .over_box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:rgba(225,225,225,.7); opacity: 0; transition-duration: .3s;}
    .chuchyun_box_wrap .first_box .over_box::before{content: ''; background: url(../img/chuchyun_frame0.png); position: absolute; top: 0; left: 0; width: 100px; height: 100px;}
    .chuchyun_box_wrap .first_box .over_box::after{content: ''; background: url(../img/chuchyun_frame0.png); position: absolute; bottom:0px; right:0px; width: 100px; height: 100px; transform: rotate(180deg);}
    .chuchyun_box_wrap .first_box .over_box li{position:relative; display: none; margin: 0 auto; margin-top: 50%; transform: translateY(-65%);}
    .chuchyun_box_wrap .first_box .over_box li:first-child{display: block;}
    .chuchyun_box_wrap .first_box .over_box li p:first-child{text-align: center; font-weight: 500; font-size: 1.2em; top: -10px; position: relative;}
    .chuchyun_box_wrap .first_box .over_box li h3{text-align: center; font-weight: 500; font-size: 1.4em; position: relative;}
    .chuchyun_box_wrap .first_box .over_box li p:last-child{text-align: center; font-weight: 500; font-size: 1.1em; color: #978774; position: relative; top: 20px;}
    .chuchyun_box_wrap .last_box{position: relative;}
    .chuchyun_box_wrap .last_box a:first-child{position: relative; width: 172px; height: 172px; top: -13px;}
    .chuchyun_box_wrap .last_box a img{width: 100%;}
    .chuchyun_box_wrap .last_box a:last-child{position: relative; width: 252px; height: 252px; bottom: -13px;}
    #chuchyun_prev{position: absolute; top: -30px; left: 292px; width: 45px; height: 45px; border: 1px solid #fff; border-radius:60%; cursor: pointer; transition-duration: .3s;}
    #chuchyun_prev img{position: absolute; left: 8px; bottom: 9px;}
    #chuchyun_prev img:last-child{opacity: 0; transform: rotate(180deg);}
    #chuchyun_prev:hover{background-color: #fff;}
    #chuchyun_prev:hover img:last-child{opacity: 1;}
    .chuchyun_num{position: absolute; top: -60px; right: 153px; color: #fff; font-size: 1.1em;}
    .chuchyun_num span{color: #fff; font-size: 1em;}
    #chuchyun_next{position: absolute; top: -30px; right: 5px; width: 45px; height: 45px; border: 1px solid #fff; border-radius:60%; cursor: pointer; transition-duration: .3s;}
    #chuchyun_next img{position: absolute; left: 10px; bottom: 9px;}
    #chuchyun_next img:first-child{transform: rotate(180deg);}
    #chuchyun_next img:last-child{opacity: 0;}
    #chuchyun_next:hover{background-color: #fff;}
    #chuchyun_next:hover img:last-child{opacity: 1;}
    /*chuchyun end*/
    
    /*premiere start*/
    #premiere{position: relative; height:100vh; background-image: url(../img/premiere_bg.jpg); background-position:left; background-size: cover; }
    .premiere_ctrl{width: 100%; height: 54.5%; transition-duration: .3s;}
    .premiere_ctrl_wrap{width: 60%; position: relative; margin: 0 auto;}
    .premiere_ctrl_wrap h2{font-size: 2em; position: absolute; top: 40%; color: #000; transition-duration: .3s; margin-left: -25%;}
    .premiere_ctrl_wrap p{font-size: 1em; position: absolute; top: 55%; color: #000; transition-duration: .3s; margin-left: -25%;}
    .premiere_ctrl_wrap .inner{position: relative; width: 100%; height: 243px; transform: translateY(80%); margin: 0 auto;}
    .premiere_ctrl_wrap .inner a{display: flex; justify-content: space-between; align-items: center; padding:0 10%; height: 80px; border-bottom: 1px solid #000; position: relative;}
    .premiere_ctrl_wrap .inner a div:first-child{ position: relative; height: 40px;}
    .premiere_ctrl_wrap .inner a div:first-child img{height: 100%;}
    .premiere_ctrl_wrap .inner .p_div{position: relative; width: 30%; height: 35px; display: flex; justify-content: space-between;}
    .premiere_ctrl_wrap .inner .p_div p{position: absolute; top: 6px; font-size: 1.1em;}
    .premiere_ctrl_wrap .inner .p_div div{width: 23px; height: 32px; position:absolute; right: 10px; top:6px;}
    .premiere_ctrl_wrap .inner .p_div div img{width:100%;}
    .premiere_ctrl_bg{width:100%; height: 80px; background-color: #dcdcdc; position: absolute; top: 0%; left: 50%; transform: translate(-50%,-0%); z-index: -1; transition-duration: .3s; opacity: 0;}
    .premiere_img{height: 54%; background-image: url(../img/premiere0.jpg); background-position:bottom center; background-size: cover; transition-duration: .3s;}
    /*premiere end*/
    
    /*hot start*/
    #hot{position: relative; height: 100vh; background-color: #dcdcdc; overflow: hidden;}
    .hot_wrap{transition-duration:.3s ; width: 100%; height: 100%;}
    .hot_top{position: relative; display: flex; justify-content: space-between; width: 90%; margin: 0 auto; transition-duration:.3s; padding-top: 8px;}
    .hot_top div{position: relative; margin-top: 100px; }
    .hot_top div h2{font-size: 2em; color: #000; transition-duration: .3s;}
    .hot_top div p{font-size: 1em; padding-top: 2%; transition-duration: .3s;}
    .hot_top .drag{position: relative; margin-top: 130px; color: #978774; left:-1%; animation: drag .8s 1s; animation-iteration-count:infinite; transition-duration: .3s;}
    @keyframes drag{
        0%{left:-1%; animation-timing-function:ease-out;}
        50%{left:-0%; animation-timing-function:ease-in;}
        100%{left:-1%;}
    }
    .hot_ul_wrap{position: relative; width: 100%; height: 60%; margin: 0 auto; overflow: hidden;  margin-top: 5%;}
    #hot ul{width: 260%; display: flex; position: relative; left: 5%; transition-duration: .5s; }
    #hot ul li{position: relative; width: 100%; margin-left: 60px; transition-duration: .3s;}
    #hot ul li:first-child{margin-left: 0;}
    #hot ul li img{width: 100%; transition-duration: .3s;}
    #hot ul li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color:rgba(0,0,0,.3); box-sizing: border-box; border: 2px solid rgba(225,225,225,.5); opacity: 0; transition-duration: .3s;}
    #hot ul li .over_box_wrap{position: relative; width:90%; margin: 10% auto; opacity: 0.5; transition-duration: .3s;}
    #hot ul li .over_box_wrap p:first-child{color: #fff; font-size: 0.9em;}
    #hot ul li .over_box_wrap h3{color: #fff; font-size: 1.3em; margin-top: 20px;}
    #hot ul li .over_box_wrap h4{color: #fff; font-size: 1em; margin-top: 50px;}
    #hot ul li .over_box_wrap p{color: #fff; font-size: 1em; margin-top: 50px;}
    /*hot end*/
    
    /*notice start*/
    #notice{position: relative; height:100vh; background-image: url(../img/notice_bg.jpg); background-position:center; background-size: cover; transition-duration: .3s;}
    .notice_bg{background-color:rgba(0,0,0,.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .notice_wrap{width: 90%; position: relative; margin: 0 auto; display: flex; justify-content: space-between; transition-duration: .3s;} 
    .notice_wrap .note_text{position: relative; width: 55%; transition-duration: .3s;}
    .notice_wrap .note_top{position: relative;  margin-top:27%; transition-duration: .3s;}
    .notice_wrap .note_top h2{font-size: 2em;}
    .notice_wrap .note_top p{color: #fff; font-size: 1em; margin-top: 10px;}
    .notice_wrap .note_text ul{position: relative; transform: translateY(17%);}
    .notice_wrap .note_text ul li{position: relative; height: 80px; border-top: 1px solid #fff; padding:0 3%; transition-duration: .3s;}
    .notice_wrap .note_text ul li:last-child{border-bottom: 1px solid #fff;}
    .notice_wrap .note_text ul li a{position: relative; line-height: 80px; display: flex; justify-content: space-between;}
    .notice_wrap .note_text ul li a h3{color: #fff; font-size: 1.1em; transition-duration: .3s;}
    .notice_wrap .note_text ul li a p{color: #fff; font-size: 1em; transition-duration: .3s;}
    .notice_wrap .note_text .view_more{position: relative; text-align: right; color: #fff; top: 15%; font-size: 1.1em; transition-duration: .3s;}
    .notice_wrap .note_img{width: 40%; height: 292px; position: relative; transform: translateY(100%); transition-duration: .3s;}
    .notice_wrap .note_img img{width: 100%; border: 3px solid #978774; box-sizing: border-box;}
    /*notice end*/
    }

/*tablet hot*/
@media screen and (min-width:801px) and (max-width:1000px){
    .hot_ul_wrap{position: relative; width: 100%; height: 70%; margin: 0 auto; overflow: hidden;  margin-top: 5%; }
    #hot ul{width: 330%; display: flex; position: relative; left: 5%; transition-duration: .5s; }
    #hot ul li{position: relative; width: 100%; margin-left: 60px; transition-duration: .3s;}
    #hot ul li:first-child{margin-left: 0;}
    #hot ul li img{width: 100%; transition-duration: .3s;}
    #hot ul li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color:rgba(0,0,0,.3); box-sizing: border-box; border: 2px solid rgba(225,225,225,.5); opacity: 0; transition-duration: .3s;}
    #hot ul li .over_box_wrap{position: relative; width: 90%; margin: 10% auto; opacity: 0.5; transition-duration: .3s;}
    #hot ul li .over_box_wrap p:first-child{color: #fff; font-size: 0.9em;}
    #hot ul li .over_box_wrap h3{color: #fff; font-size: 1.5em; margin-top: 20px;}
    #hot ul li .over_box_wrap h4{color: #fff; font-size: 1.1em; margin-top: 50px;}
    #hot ul li .over_box_wrap p{color: #fff; font-size: 1.1em; margin-top: 50px;}
}

















/*tablet 세로*/
@media screen and (min-width:601px) and (max-width:800px){
    /*secBtn start*/
    #secBtn{position: fixed; left: 30px; top: 166px; z-index: 5; display: none;}
    /*secBtn end*/
    
    /*toptopBanner start*/
    #topBanner{position: relative; overflow: hidden;}
    .top_banner_imgs{position: relative; display: flex; width: 400%; }
    .top_banner_imgs li{height: 100vh; background-position:center; background-size: cover; position: relative; width: 25%;}
    .top_banner_imgs li:nth-child(1){background-image: url(../img/main0.jpg);}
    .top_banner_imgs li:nth-child(2){background-image: url(../img/main1.jpg);}
    .top_banner_imgs li:nth-child(3){background-image: url(../img/main2.jpg);}
    .top_banner_imgs li:nth-child(4){background-image: url(../img/main3.jpg);}
    .topBanner_wrap{position: absolute; width: 90%; top: 0; left: 50%; transform: translateX(-50%); transition-duration: .3s;}
    .top_time{position:relative; width: 263px; height: 30px; left: 10px; display: flex; justify-content: space-between; top:370px; transition-duration: .3s;}
    .topBanner_wrap .top_time .time_bar{height: 2px; width: 180px; position: relative; background-color: #fff; top: 15px; overflow: hidden;}
    .topBanner_wrap .top_time .time_bar span{height: 100%; width: 0%; position:absolute; background-color: #978774; top: 0; left: 0;}
    .topBanner_wrap #topPage{color: #fff; line-height: 30px;}
    .topBanner_wrap #topPage span{color: #fff; line-height: 30px;}
    .topBanner_wrap .time_btn{top:3px; position: relative; cursor: pointer;}
    .topBanner_wrap h2{font-size: 2.5em; font-weight: 800; position: relative; top: 400px; left: 0; transition-duration: .3s;}
    .topBanner_wrap h3{font-size: 1em; font-weight: 500; color: #fff; position: relative; top: 410px; left: 0; transition-duration: .3s;}
    .topBanner_wrap .top_text_box{position: relative; top: 420px; width: 50%;}
    .topBanner_wrap .top_text_box li{position: relative; display: none;}
    .topBanner_wrap .top_text_box li:first-child{display: block;}
    .topBanner_wrap .top_text_box li p{font-weight: 400; font-size: 1.1em; color: #fff; position: absolute; transition-duration: .5s;}
    .scroll_box{position: absolute; left: 50%; transform: translateX(-50%); width: 40px; height: 66px; top: 670px; transition-duration: .3s;}
    .scroll_box img{position:relative; width: 100%; bottom: 10px; animation: scroll .8s 1s; animation-iteration-count:infinite;}
    .scroll_box p{text-align: center; font-weight: 500; font-size: 1em; color: #fff;}
    
    @keyframes scroll{
        0%{bottom: 10px; animation-timing-function:ease-out;}
        50%{bottom: 0px; animation-timing-function:ease-in;}
        100%{bottom: 10px;}
    }
    .family_btn{position: absolute; width: 80px; height: 60px; background-color: #333; border-radius:31px 0 0 31px; right: 0; top: 120px; z-index: 1; cursor: pointer; transition-duration: .3s;}
    .family_btn img{position: relative; left: 25px; transform: rotate(0); transition-duration: .3s;}
    .family_body{position: absolute; width: 340px; height: 417px; background-color: #fff; right: 0; top: 150px; }
    .family_body img{width: 100%;}
    .family_body h4{font-weight: 500; text-align: center; font-size: 1.3em; margin-top: 20px;}
    .family_body p{text-align: center; margin-top: 25px; color: #666; font-size: 0.9em;}
    .family_body button{width: 130px; height: 40px; background-color: #978774; text-align: center; line-height: 40px; color: #fff; font-size: 0.9em; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; cursor: pointer;}
    /*toptopBanner end*/
    
    /*chuchyun start*/
    #chuchyun{position: relative; height:100vh; background-image: url(../img/banner_bg.jpg); background-position:center; background-size: cover;}
    .chuchyun_wrap{position: relative; width: 90%; margin: 0 auto; transition-duration: .3s;}
    .chuchyun_wrap h2{font-size: 1.8em; position: absolute; top: 23%; transition-duration: .3s;}
    .chuchyun_wrap .chuchyun_box_wrap{width: 320px;  position: relative; margin: 0 auto; transform: translateY(40%);transition-duration: .3s;}
    .chuchyun_box_wrap .first_box{position: relative; width: 320px; height:320px;}
    .chuchyun_box_wrap .first_box img{width:100%;}
    .chuchyun_box_wrap .first_box .over_box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:rgba(225,225,225,.7); opacity: 1; transition-duration: .3s;}
    .chuchyun_box_wrap .first_box .over_box::before{content: ''; background: url(../img/chuchyun_frame0.png); position: absolute; top: 0; left: 0; width: 100px; height: 100px;}
    .chuchyun_box_wrap .first_box .over_box::after{content: ''; background: url(../img/chuchyun_frame0.png); position: absolute; bottom:0px; right:0px; width: 100px; height: 100px; transform: rotate(180deg);}
    .chuchyun_box_wrap .first_box .over_box li{position:relative; display: none; margin: 0 auto; margin-top: 50%; transform: translateY(-65%);}
    .chuchyun_box_wrap .first_box .over_box li:first-child{display: block;}
    .chuchyun_box_wrap .first_box .over_box li p:first-child{text-align: center; font-weight: 500; font-size: 1em; top: -10px; position: relative;}
    .chuchyun_box_wrap .first_box .over_box li h3{text-align: center; font-weight: 500; font-size: 1.2em; position: relative;}
    .chuchyun_box_wrap .first_box .over_box li p:last-child{text-align: center; font-weight: 500; font-size: 1.1em; color: #978774; position: relative; top: 20px;}
    .chuchyun_box_wrap .last_box{position: relative; display: flex; justify-content: space-between; margin-top: 10px;}
    .chuchyun_box_wrap .last_box a:first-child{position: relative; width: 155px; height:155px;}
    .chuchyun_box_wrap .last_box a img{width: 100%;}
    .chuchyun_box_wrap .last_box a:last-child{position: relative; width: 155px; height:155px;}
    #chuchyun_prev{position: absolute; bottom: -80px; left: 76px; width: 45px; height: 45px; border: 1px solid #fff; border-radius:60%; cursor: pointer; transition-duration: .3s;}
    #chuchyun_prev img{position: absolute; left: 8px; bottom: 9px;}
    #chuchyun_prev img:last-child{opacity: 0; transform: rotate(180deg);}
    #chuchyun_prev:hover{background-color: #fff;}
    #chuchyun_prev:hover img:last-child{opacity: 1;}
    .chuchyun_num{position: absolute;  bottom: -65px; right: 148px; color: #fff; font-size: 1.1em;}
    .chuchyun_num span{color: #fff; font-size: 1em;}
    #chuchyun_next{position: absolute; bottom: -80px; right: 76px; width: 45px; height: 45px; border: 1px solid #fff; border-radius:60%; cursor: pointer; transition-duration: .3s;}
    #chuchyun_next img{position: absolute; left: 10px; bottom: 9px;}
    #chuchyun_next img:first-child{transform: rotate(180deg);}
    #chuchyun_next img:last-child{opacity: 0;}
    #chuchyun_next:hover{background-color: #fff;}
    #chuchyun_next:hover img:last-child{opacity: 1;}
    /*chuchyun end*/
    
    /*premiere start*/
    #premiere{position: relative; height: 100vh; background-image: url(../img/premiere_bg.jpg); background-position:left; background-size: cover; }
    .premiere_ctrl{width: 100%; height: 54.5%; transition-duration: .3s;}
    .premiere_ctrl_wrap{width: 60%; position: relative; margin: 0 auto;}
    .premiere_ctrl_wrap h2{font-size: 2em; position: absolute; top: 40%; color: #000; transition-duration: .3s; margin-left: -25%;}
    .premiere_ctrl_wrap p{font-size: 1em; position: absolute; top: 56%; color: #000; transition-duration: .3s; margin-left: -25%;}
    .premiere_ctrl_wrap .inner{position: relative; width: 100%; height: 243px; transform: translateY(80%); margin: 0 auto;}
    .premiere_ctrl_wrap .inner a{display: flex; justify-content: space-between; align-items: center; padding:0 10%; height: 80px; border-bottom: 1px solid #000; position: relative;}
    .premiere_ctrl_wrap .inner a div:first-child{ position: relative; height: 40px;}
    .premiere_ctrl_wrap .inner a div:first-child img{height: 100%;}
    .premiere_ctrl_wrap .inner .p_div{position: relative; width: 103px; height: 35px; display: flex; justify-content: space-between;}
    .premiere_ctrl_wrap .inner .p_div p{position: absolute; top: 6px; font-size: 1.1em;}
    .premiere_ctrl_wrap .inner .p_div div{width: 23px; height: 32px; position:absolute; right: 10px; top:6px;}
    .premiere_ctrl_wrap .inner .p_div div img{width:100%;}
    .premiere_ctrl_bg{width:100%; height: 80px; background-color: #dcdcdc; position: absolute; top: 0%; left: 50%; transform: translate(-50%,-0%); z-index: -1; transition-duration: .3s; opacity: 0;}
    .premiere_img{height: 54%; background-image: url(../img/premiere0.jpg); background-position:bottom center; background-size: cover; transition-duration: .3s;}
    /*premiere end*/
    
    /*hot start*/
    #hot{position: relative; height:100vh; background-color: #dcdcdc; overflow: hidden;}
    .hot_wrap{transition-duration:.3s ; width: 100%; height: 100%;}
    .hot_top{position: relative; display: flex; justify-content: space-between; width: 90%; margin: 0 auto; transition-duration:.3s; padding-top:15px;}
    .hot_top div{position: relative; margin-top: 80px; }
    .hot_top div h2{font-size: 2em; color: #000; transition-duration: .3s;}
    .hot_top div p{font-size: 1em; padding-top: 2%; transition-duration: .3s;}
    .hot_top .drag{position: relative; margin-top:120px; color: #978774; left:-1%; animation: drag .8s 1s; animation-iteration-count:infinite; transition-duration: .3s; transition-duration: .3s;}
    @keyframes drag{
        0%{left:-1%; animation-timing-function:ease-out;}
        50%{left:-0%; animation-timing-function:ease-in;}
        100%{left:-1%;}
    }
    .hot_ul_wrap{position: relative; width: 100%; height: 60%; margin: 0 auto; overflow: hidden;  margin-top: 5%;}
    #hot ul{width: 380%; display: flex; position: relative; left: 5%; transition-duration: .5s; }
    #hot ul li{position: relative; width: 100%; margin-left: 60px; transition-duration: .3s;}
    #hot ul li:first-child{margin-left: 0;}
    #hot ul li img{width: 100%; transition-duration: .3s;}
    #hot ul li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color:rgba(0,0,0,.3); box-sizing: border-box; border: 2px solid rgba(225,225,225,.5); opacity: 0; transition-duration: .3s;}
    #hot ul li .over_box_wrap{position: relative; width: 90%; margin: 10% auto; opacity: 0.5; transition-duration: .3s;}
    #hot ul li .over_box_wrap p:first-child{color: #fff; font-size: 0.9em;}
    #hot ul li .over_box_wrap h3{color: #fff; font-size: 1.3em; margin-top: 15px;}
    #hot ul li .over_box_wrap h4{color: #fff; font-size: 1em; margin-top: 35px;}
    #hot ul li .over_box_wrap p{color: #fff; font-size: 1em; margin-top: 35px;}
    /*hot end*/
    
    /*notice start*/
    #notice{position: relative; height: 100vh; background-image: url(../img/notice_bg.jpg); background-position:center; background-size: cover; transition-duration: .3s;}
    .notice_bg{background-color:rgba(0,0,0,.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .notice_wrap{width: 90%; position: relative; margin: 0 auto; display: flex; justify-content: space-between; transition-duration: .3s;} 
    .notice_wrap .note_text{position: relative; transition-duration: .3s; margin: 0 auto;}
    .notice_wrap .note_top{position: relative;  margin-top:24%; transition-duration: .3s;}
    .notice_wrap .note_top h2{font-size: 2em;}
    .notice_wrap .note_top p{color: #fff; font-size: 1em; margin-top: 10px;}
    .notice_wrap .note_text ul{position: relative; transform: translateY(17%);}
    .notice_wrap .note_text ul li{position: relative; height: 80px; border-top: 1px solid #fff; padding:0 3%; transition-duration: .3s;}
    .notice_wrap .note_text ul li:last-child{border-bottom: 1px solid #fff;}
    .notice_wrap .note_text ul li a{position: relative; line-height: 80px; display: flex; justify-content: space-between;}
    .notice_wrap .note_text ul li a h3{color: #fff; font-size: 1.1em; transition-duration: .3s;}
    .notice_wrap .note_text ul li a p{color: #fff; font-size: 1em; transition-duration: .3s;}
    .notice_wrap .note_text .view_more{position: relative; text-align: right; color: #fff; top: 15%; font-size: 1.1em; transition-duration: .3s;}
    .notice_wrap .note_img{width: 40%; height: 292px; position: relative; transform: translateY(100%); transition-duration: .3s; display: none;}
    .notice_wrap .note_img img{width: 100%; border: 3px solid #978774; box-sizing: border-box;}
    /*notice end*/
    }

/*tablet hot*/
@media screen and (min-width:601px) and (max-width:670px){
    #hot{position: relative; height: 100vh; background-color: #dcdcdc; overflow: hidden;}
    .hot_wrap{transition-duration:.3s ; width: 100%; height: 100%;}
    .hot_top{position: relative; display: flex; justify-content: space-between; width: 90%; margin: 0 auto; transition-duration:.3s; padding-top: 15px;}
    .hot_top div{position: relative; margin-top: 80px; }
    .hot_top div h2{font-size: 2em; color: #000; transition-duration: .3s;}
    .hot_top div p{font-size: 1em; padding-top: 2%; transition-duration:.3s;}
    .hot_top .drag{position: relative; margin-top: 120px; color: #978774; left:-1%; animation: drag .8s 1s; animation-iteration-count:infinite; transition-duration: .3s;}
    @keyframes drag{
        0%{left:-1%; animation-timing-function:ease-out;}
        50%{left:-0%; animation-timing-function:ease-in;}
        100%{left:-1%;}
    }
    .hot_ul_wrap{position: relative; width: 100%; height: 70%; margin: 0 auto; overflow: hidden;  margin-top: 5%; }
    #hot ul{width: 530%; display: flex; position: relative; left: 5%; transition-duration: .5s; }
    #hot ul li{position: relative; width: 100%; margin-left: 60px; transition-duration: .3s;}
    #hot ul li:first-child{margin-left: 0;}
    #hot ul li img{width: 100%; transition-duration:.3s;}
    #hot ul li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color:rgba(0,0,0,.3); box-sizing: border-box; border: 2px solid rgba(225,225,225,.5); opacity: 0; transition-duration:.3s;}
    #hot ul li .over_box_wrap{position: relative; width: 90%; margin: 10% auto; opacity: 0.5; transition-duration:.3s;}
    #hot ul li .over_box_wrap p:first-child{color: #fff; font-size: 0.9em;}
    #hot ul li .over_box_wrap h3{color: #fff; font-size: 1.5em; margin-top: 20px;}
    #hot ul li .over_box_wrap h4{color: #fff; font-size: 1.1em; margin-top: 50px;}
    #hot ul li .over_box_wrap p{color: #fff; font-size: 1.1em; margin-top: 50px;}
}












/*mobile*/
@media screen and (max-width:600px){
    /*secBtn start*/
    #secBtn{position: fixed; left: 30px; top: 166px; z-index: 5; display: none;}
    /*secBtn end*/
    
    /*toptopBanner start*/
    #topBanner{position: relative; overflow: hidden;}
    .top_banner_imgs{position: relative; display: flex; width: 400%; }
    .top_banner_imgs li{height: 100vh; background-position:center; background-size: cover; position: relative; width: 25%;}
    .top_banner_imgs li:nth-child(1){background-image: url(../img/main0.jpg);}
    .top_banner_imgs li:nth-child(2){background-image: url(../img/main1.jpg);}
    .top_banner_imgs li:nth-child(3){background-image: url(../img/main2.jpg);}
    .top_banner_imgs li:nth-child(4){background-image: url(../img/main3.jpg); background-position:left center;}
    .topBanner_wrap{position: absolute; width: 90%; top: 0; left: 50%; transform: translateX(-50%); transition-duration: .3s;}
    .top_time{position:relative; width: 203px; height: 30px; left: 10px; display: flex; justify-content: space-between; top:370px; transition-duration: .3s;}
    .topBanner_wrap .top_time .time_bar{height: 2px; width: 120px; position: relative; background-color: #fff; top: 15px; overflow: hidden;}
    .topBanner_wrap .top_time .time_bar span{height: 100%; width: 0%; position:absolute; background-color: #978774; top: 0; left: 0;}
    .topBanner_wrap #topPage{color: #fff; line-height: 30px;}
    .topBanner_wrap #topPage span{color: #fff; line-height: 30px;}
    .topBanner_wrap .time_btn{top:3px; position: relative; cursor: pointer;}
    .topBanner_wrap h2{font-size: 2.5em; font-weight: 800; position: relative; top: 400px; left: 0; transition-duration: .3s;}
    .topBanner_wrap h3{font-size: 1.1em; font-weight: 500; color: #fff; position: relative; top: 410px; left: 0; transition-duration: .3s;}
    .topBanner_wrap .top_text_box{position: relative; top: 420px; width: 50%; display: none;}
    .scroll_box{position: absolute; left: 50%; transform: translateX(-50%); width: 40px; height: 66px; top: 670px; transition-duration: .3s;}
    .scroll_box img{position:relative; width: 100%; bottom: 10px; animation: scroll .8s 1s; animation-iteration-count:infinite;}
    .scroll_box p{text-align: center; font-weight: 500; font-size: 1em; color: #fff;}
    
    @keyframes scroll{
        0%{bottom: 10px; animation-timing-function:ease-out;}
        50%{bottom: 0px; animation-timing-function:ease-in;}
        100%{bottom: 10px;}
    }
    .family_btn{position: absolute; width: 70px; height: 50px; background-color: #333; border-radius:31px 0 0 31px; right: 0; top: 100px; z-index: 1; cursor: pointer; transition-duration: .3s;}
    .family_btn img{position: relative; left: 23px; width: 20px; height: 20px; transform: rotate(0); transition-duration: .3s;}
    .family_body{position: absolute; width: 340px; height: 417px; background-color: #fff; right: 0; top: 130px; }
    .family_body img{width: 100%;}
    .family_body h4{font-weight: 500; text-align: center; font-size: 1.3em; margin-top: 20px;}
    .family_body p{text-align: center; margin-top: 25px; color: #666; font-size: 0.9em;}
    .family_body button{width: 130px; height: 40px; background-color: #978774; text-align: center; line-height: 40px; color: #fff; font-size: 0.9em; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; cursor: pointer;}
    /*toptopBanner end*/
    
    /*chuchyun start*/
    #chuchyun{position: relative; height: 100vh; background-image: url(../img/banner_bg.jpg); background-position:center; background-size: cover;}
    .chuchyun_wrap{position: relative; width: 90%; margin: 0 auto; transition-duration: .3s;}
    .chuchyun_wrap h2{font-size: 1.8em; position: absolute; top: 23%; transition-duration: .3s;}
    .chuchyun_wrap .chuchyun_box_wrap{width: 320px;  position: relative; margin: 0 auto; transform: translateY(40%);transition-duration: .3s;}
    .chuchyun_box_wrap .first_box{position: relative; width: 320px; height:320px;}
    .chuchyun_box_wrap .first_box img{width:100%;}
    .chuchyun_box_wrap .first_box .over_box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:rgba(225,225,225,.7); opacity: 1; transition-duration: .3s;}
    .chuchyun_box_wrap .first_box .over_box::before{content: ''; background: url(../img/chuchyun_frame0.png); position: absolute; top: 0; left: 0; width: 100px; height: 100px;}
    .chuchyun_box_wrap .first_box .over_box::after{content: ''; background: url(../img/chuchyun_frame0.png); position: absolute; bottom:0px; right:0px; width: 100px; height: 100px; transform: rotate(180deg);}
    .chuchyun_box_wrap .first_box .over_box li{position:relative; display: none; margin: 0 auto; margin-top: 50%; transform: translateY(-65%);}
    .chuchyun_box_wrap .first_box .over_box li:first-child{display: block;}
    .chuchyun_box_wrap .first_box .over_box li p:first-child{text-align: center; font-weight: 500; font-size: 1em; top: -10px; position: relative;}
    .chuchyun_box_wrap .first_box .over_box li h3{text-align: center; font-weight: 500; font-size: 1.2em; position: relative;}
    .chuchyun_box_wrap .first_box .over_box li p:last-child{text-align: center; font-weight: 500; font-size: 1.1em; color: #978774; position: relative; top: 20px;}
    .chuchyun_box_wrap .last_box{position: relative; display: flex; justify-content: space-between; margin-top: 10px;}
    .chuchyun_box_wrap .last_box a:first-child{position: relative; width: 155px; height:155px;}
    .chuchyun_box_wrap .last_box a img{width: 100%;}
    .chuchyun_box_wrap .last_box a:last-child{position: relative; width: 155px; height:155px;}
    #chuchyun_prev{position: absolute; bottom: -80px; left: 76px; width: 45px; height: 45px; border: 1px solid #fff; border-radius:60%; cursor: pointer; transition-duration: .3s;}
    #chuchyun_prev img{position: absolute; left: 8px; bottom: 9px;}
    #chuchyun_prev img:last-child{opacity: 0; transform: rotate(180deg);}
    #chuchyun_prev:hover{background-color: #fff;}
    #chuchyun_prev:hover img:last-child{opacity: 1;}
    .chuchyun_num{position: absolute;  bottom: -65px; right: 148px; color: #fff; font-size: 1.1em;}
    .chuchyun_num span{color: #fff; font-size: 1em;}
    #chuchyun_next{position: absolute; bottom: -80px; right: 76px; width: 45px; height: 45px; border: 1px solid #fff; border-radius:60%; cursor: pointer; transition-duration: .3s;}
    #chuchyun_next img{position: absolute; left: 10px; bottom: 9px;}
    #chuchyun_next img:first-child{transform: rotate(180deg);}
    #chuchyun_next img:last-child{opacity: 0;}
    #chuchyun_next:hover{background-color: #fff;}
    #chuchyun_next:hover img:last-child{opacity: 1;}
    /*chuchyun end*/
    
    /*premiere start*/
    #premiere{position: relative; height:100vh; background-image: url(../img/premiere_bg.jpg); background-position:left; background-size: cover; }
    .premiere_ctrl{width: 100%; height: 54.5%; transition-duration: .3s;}
    .premiere_ctrl_wrap{position: relative; margin: 0 auto;}
    .premiere_ctrl_wrap h2{font-size: 1.8em; position: absolute; top: 40%; color: #000; transition-duration: .3s; margin-left: 5%;}
    .premiere_ctrl_wrap p{ position: absolute; top: 56%; color: #000; transition-duration: .3s; margin-left: 5%; width: 70%;}
    .premiere_ctrl_wrap .inner{position: relative; width: 100%; height: 243px; transform: translateY(80%); margin: 0 auto;}
    .premiere_ctrl_wrap .inner a{display: flex; justify-content: space-between; align-items: center; padding:0 10%; height: 80px; border-bottom: 1px solid #000; position: relative;}
    .premiere_ctrl_wrap .inner a div:first-child{ position: relative; height: 40px;}
    .premiere_ctrl_wrap .inner a div:first-child img{height: 100%;}
    .premiere_ctrl_wrap .inner .p_div{position: relative; width: 133px; height: 35px; display: flex; justify-content: space-between;}
    .premiere_ctrl_wrap .inner .p_div p{position: absolute; top: 6px; font-size: 1.1em;}
    .premiere_ctrl_wrap .inner .p_div div{width: 23px; height: 32px; position:absolute; right: 10px; top:6px;}
    .premiere_ctrl_wrap .inner .p_div div img{width:100%;}
    .premiere_ctrl_bg{width:100%; height: 80px; background-color: #dcdcdc; position: absolute; top: 0%; left: 50%; transform: translate(-50%,-0%); z-index: -1; transition-duration: .3s; opacity: 0;}
    .premiere_img{height: 50%; background-image: url(../img/premiere0.jpg); background-position:bottom center; background-size: cover; transition-duration: .3s;}
    /*premiere end*/
    
    /*hot start*/
    #hot{position: relative; height: 100vh; background-color: #dcdcdc; overflow: hidden;}
    .hot_wrap{transition-duration:.3s ; width: 100%; height: 100%;}
    .hot_top{position: relative; display: flex; justify-content: space-between; width: 90%; margin: 0 auto; transition-duration:.3s; padding-top:15px;}
    .hot_top div{position: relative; margin-top: 80px; }
    .hot_top div h2{font-size: 1.8em; color: #000; transition-duration: .3s;}
    .hot_top div p{ padding-top: 2%; width: 80%; transition-duration: .3s;}
    .hot_top .drag{position: absolute; margin-top: 180px; color: #978774; right:1%; animation: drag .8s 1s; animation-iteration-count:infinite; transition-duration: .3s;}
    @keyframes drag{
        0%{right:1%; animation-timing-function:ease-out;}
        50%{right:0%; animation-timing-function:ease-in;}
        100%{right:1%;}
    }
    .hot_ul_wrap{position: relative; width: 100%; height: 70%; margin: 0 auto; overflow: hidden;  margin-top: 10%; transition-duration: .3s;}
    #hot ul{width: 570%; display: flex; position: relative; left: 5%; transition-duration: .5s; top: 7%;}
    #hot ul li{position: relative; width: 100%; margin-left: 60px; transition-duration: .3s;}
    #hot ul li:first-child{margin-left: 0;}
    #hot ul li img{width: 100%; transition-duration: .3s;}
    #hot ul li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color:rgba(0,0,0,.3); box-sizing: border-box; border: 2px solid rgba(225,225,225,.5); opacity: 0; transition-duration: .3s;}
    #hot ul li .over_box_wrap{position: relative; width: 90%; margin: 10% auto; opacity: 0.5; transition-duration: .3s;}
    #hot ul li .over_box_wrap p:first-child{color: #fff; font-size: 0.9em;}
    #hot ul li .over_box_wrap h3{color: #fff; font-size: 1.3em; margin-top: 10px;}
    #hot ul li .over_box_wrap h4{color: #fff; font-size: 1em; margin-top: 28px;}
    #hot ul li .over_box_wrap p{color: #fff; font-size: 1em; margin-top: 28px;}
    /*hot end*/
    
    /*notice start*/
    #notice{position: relative; height: 100vh; background-image: url(../img/notice_bg.jpg); background-position:center; background-size: cover; transition-duration: .3s;}
    .notice_bg{background-color:rgba(0,0,0,.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .notice_wrap{width: 90%; position: relative; margin: 0 auto; display: flex; justify-content: space-between; transition-duration: .3s;} 
    .notice_wrap .note_text{position: relative; transition-duration: .3s; margin: 0 auto;}
    .notice_wrap .note_top{position: relative;  margin-top:100px; transition-duration: .3s;}
    .notice_wrap .note_top h2{font-size:1.8em;}
    .notice_wrap .note_top p{color: #fff; margin-top: 10px; width: 90%;}
    .notice_wrap .note_text ul{position: relative; transform: translateY(20%);}
    .notice_wrap .note_text ul li{position: relative; height: 80px; border-top: 1px solid #fff; padding:0 3%; transition-duration: .3s;}
    .notice_wrap .note_text ul li:last-child{border-bottom: 1px solid #fff;}
    .notice_wrap .note_text ul li a{position: relative; line-height: 80px; display: flex; justify-content: space-between;}
    .notice_wrap .note_text ul li a h3{color: #fff; font-size: 1em; transition-duration: .3s;}
    .notice_wrap .note_text ul li a p{color: #fff; transition-duration: .3s;}
    .notice_wrap .note_text .view_more{position: relative; text-align: right; color: #fff; top: 15%; font-size: 1em; transition-duration: .3s;}
    .notice_wrap .note_img{width: 40%; height: 292px; position: relative; transform: translateY(100%); transition-duration: .3s; display: none;}
    .notice_wrap .note_img img{width: 100%; border: 3px solid #978774; box-sizing: border-box;}
    /*notice end*/
    }

/*tablet hot*/
@media screen and (max-width:400px){
    #hot{position: relative; height:100vh; background-color: #dcdcdc; overflow: hidden;}
    .hot_wrap{transition-duration:.3s ; width: 100%; height: 100%;}
    .hot_top{position: relative; display: flex; justify-content: space-between; width: 90%; margin: 0 auto; transition-duration:.3s; padding-top:18px;}
    .hot_top div{position: relative; margin-top:80px; }
    .hot_top div h2{font-size: 1.8em; color: #000; transition-duration: .3s;}
    .hot_top div p{ padding-top: 2%; width: 80%; transition-duration:.3s ;}
    .hot_top .drag{position: absolute; margin-top: 180px; color: #978774; right:1%; animation: drag .8s 1s; animation-iteration-count:infinite; transition-duration: .3s;}
    @keyframes drag{
        0%{right:1%; animation-timing-function:ease-out;}
        50%{right:0%; animation-timing-function:ease-in;}
        100%{right:1%;}
    }
    .hot_ul_wrap{position: relative; width: 100%; height: 70%; margin: 0 auto; overflow: hidden;  margin-top: 30%; transition-duration: .3s;}
    #hot ul{width: 590%; display: flex; position: relative; left: 5%; transition-duration: .5s; top: 7%;}
    #hot ul li{position: relative; width: 100%; margin-left: 60px; transition-duration: .3s;}
    #hot ul li:first-child{margin-left: 0;}
    #hot ul li img{width: 100%; transition-duration:.3s ;}
    #hot ul li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color:rgba(0,0,0,.3); box-sizing: border-box; border: 2px solid rgba(225,225,225,.5); opacity: 0; transition-duration:.3s ;}
    #hot ul li .over_box_wrap{position: relative; width: 90%; margin: 10% auto; opacity: 0.5; transition-duration:.3s ;}
    #hot ul li .over_box_wrap p:first-child{color: #fff; font-size: 0.9em;}
    #hot ul li .over_box_wrap h3{color: #fff; font-size: 1.3em; margin-top: 5px;}
    #hot ul li .over_box_wrap h4{color: #fff; font-size: 1em; margin-top: 15px;}
    #hot ul li .over_box_wrap p{color: #fff; font-size: 1em; margin-top: 15px;}
}

.swiper {
    width: 100%;
    height: 100%;
  }