#main{padding-top: 136px;}

@media (max-width:991px) {
    #main{padding-top: 84px;}
}

@media (max-width:716px) {
    #main{padding-top: 84px;}
}

#visual{position: relative; height: 822px;}
#visual::after{content: ''; width: 100%; height: 695px; position: absolute; left: -106px; top: 0; z-index: -1; background: url(/page/mayor2024/images/main/governor_bg.png)no-repeat; }
#visual::before{content: ''; width: 100%; height: 628px; position: absolute; left: 0; top: 195px;  z-index: -2;  background: url(/page/mayor2024/images/main/pyeongchang_bg.png)right no-repeat; background-size: cover;}
#visual .tit-bx{position: absolute; top: 181px;}
#visual .tit-bx h2{font-family: 'NanumMyeongjo'; animation: 1s linear 2s both  down01;
 color: #fff; font-size: 40px; font-weight: 600; text-shadow: 1px 1px 10px rgba(0,0,0,.3);}
#visual .tit-bx h2 > em{color: #d68eff;}
#visual .tit-bx h2 strong{position: relative; display: block; padding-top: 14px; font-size: 56px; font-weight: 800; text-decoration: underline; text-underline-position: under;}
#visual .tit-bx h2 strong::before{content: ''; background: url(/page/mayor2024/images/main/icon.png)no-repeat; width: 124px; height: 100px; position: absolute; left: -108px; top: 0;}
#visual .tit-bx h2 strong em{color: #77d1ff; text-decoration: underline; text-decoration-color:#77d1ff;}
#visual .man{position: absolute; top:65px; right: 210px; animation: 1s linear 1s both fade01;}
#visual .man img{height: 758px;  image-rendering: -webkit-optimize-contrast;}
#visual .link-bx{position: absolute; right: 0; top: 239px; display: flex;}
#visual .link-bx a{display: flex; justify-content: center; align-items: center; transition: all .3s;
overflow: hidden; height: 321px; font-size: 18px; color: #fff; font-weight: 700;}
#visual .link-bx a img{max-width: 150%; max-height: 150%; display: block; height: 321px; image-rendering: -webkit-optimize-contrast;}
#visual .link-bx a img.hover{display: none; height: 361px;}
#visual .link-bx a:hover{margin: -20px 0; z-index: 10; height: 361px;}
#visual .link-bx a:hover > img{display: none; height: 361px;}
#visual .link-bx a:hover > img.hover{display: block; width: 184px; height: 365px;}
#visual .link-bx a > div{position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; flex-direction: column;}
#visual .link-bx a > div img{ width: 32px; height: 45px;}
#visual .link-bx a:nth-child(2) > div img,
#visual .link-bx a:nth-child(3) > div img{width: 45px;}
#visual .link-bx a > div strong{padding-top: 59px;}
#visual .link-bx::after{content: ''; background: url(/page/mayor2024/images/main/scroll.png)no-repeat; width: 47px; height: 142px;
position: absolute; bottom: -227px; right: 50px; animation: visual-move2 .7s alternate infinite ease-in-out;}

@media (max-width:1399px) {
    #visual{height: 824px;}
    #visual::after{border-radius: 0 30px 30px 0; left: -250px;}
    #visual .link-bx::after{bottom: 340px;}
    #visual .tit-bx h2{font-size: 35px;}
    #visual .tit-bx h2 strong::before{left: -11px; top: 0; width: 64px; height: 50px; background-size: contain;}
    #visual .tit-bx h2 strong{font-size: 40px;}
    #visual .link-bx{top: 450px;}
}

@media (max-width:1024px) {
    #visual .tit-bx{top: 200px;}
    #visual .tit-bx h2{font-size: 25px;}
    #visual .tit-bx h2 strong{font-size: 30px;}
}

@media (max-width:991px){
    #visual{height: 773px;}
    #visual::before{top: 145px;}
    #visual .tit-bx h2{font-size: 30px;}
    #visual .tit-bx h2 strong{font-size: 35px;}
    #visual .man{top: 415px; right: auto; left: 0;}
    #visual .man img{height: 358px;}
    #visual .link-bx{top: 452px;}
} 

@media (max-width:760px){
    #visual{height: 840px;}
    #visual::after{height: 580px;}
    #visual::before{top: 85px; height: 531px; background-position: left;}
    #visual::after{left: -106px;}
    #visual .tit-bx{top: 106px; left: 8px;}
    #visual .tit-bx h2{font-size: 20px;}
    #visual .tit-bx h2 strong::before{display: none;}
    #visual .tit-bx h2 strong{font-size: 22px;}
    #visual .link-bx{top: 616px;}
    #visual .link-bx a{height: 250px; transition: all .5s;}
    #visual .link-bx a img{height: 290px;}
    #visual .link-bx a img.hover{width: auto;}
    #visual .link-bx a:hover{height: 290px; margin: -20px 0;}
    #visual .link-bx a:hover > img.hover{height: 290px; transition: all .5s;}
    #visual .link-bx a > div strong{font-size: 14px;}
    #visual .link-bx::after{bottom: 310px; right: 20px;}
    #visual .man{top: 258px;}
}


#schedule{position: relative; padding: 42px 0 164px;}
#schedule::before{content: ''; background: url(/page/mayor2024/images/main/schedule_bg.png)no-repeat; width: 1920px; height: 1008px; position: absolute; bottom: 291px; left: 0; z-index: -3;}
#schedule .title{display: flex; align-items: flex-start; flex-direction: column;}
#schedule h3{font-size: 48px; font-weight: 500; color: #202531; display: inline-block; padding: 10px 0 0 53px; position: relative;}
#schedule h3::before{content: ''; width: 35px; height: 82px; position: absolute; left: 0; top: 30px; background: url(/page/mayor2024/images/main/promise.png)no-repeat;}
#schedule h3 strong{font-weight: 600; padding-left: 8px;  background: linear-gradient(142deg, rgba(30,19,110,1) 30%, rgba(73,7,58,1) 50%);  color: transparent;    -webkit-background-clip: text;
}
#schedule h3 em{font-weight: 300; color: #191e75; font-size: 40px;}
#schedule h3 span{font-size: 20px; color: #000; display: block; font-weight: 400; margin-top: -4px; letter-spacing: 0.2px;}
#schedule .schedule_wrap{display: flex; align-items: flex-end; margin-top: 54px;}
#schedule .slick_wrap{width: calc(100% - 880px); position: relative;}
#schedule .slick_wrap::before{content: ''; background: url(/page/mayor2024/images/main/logo2.png)no-repeat; width: 121px; height: 88px;
position: absolute; left: 20px; top: -35px; z-index: 1; background-size: cover;}
#schedule .slick_wrap > a{position: absolute; right: 0; top: -29px; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; width: 187px; height: 79px; background: #000;}
#schedule .slick_wrap > a img{height: 6px; padding-left: 15px;}
#schedule .slick_wrap > a:hover img{animation: front .9s infinite ease-in-out;}
#schedule .slick_wrap .slick .slick-active .work ul li{animation:rise04 .8s .05s ease 1 both;}
#schedule .slick_wrap .slick .slick-active .work ul li:nth-child(2) h3{animation-delay:.2s;}
#schedule .slick_wrap .slick .slick-active .work ul li:nth-child(3) h3{animation-delay:.55s;}
#schedule .slick_wrap .slick .slick-active .work ul li:nth-child(4) h3{animation-delay:.3s;}
#schedule .slick_wrap .slick .slick_slide{width:100%; height: 465px; padding: 72px 0 0 43px; color: #fff; border-radius: 25px; background: url(/page/mayor2024/images/main/slick_bg01.png)no-repeat right bottom; background-size: cover;}
#schedule .slick_wrap .slick .slick_slide:nth-child(2){background-image: url(/page/mayor2024/images/main/slick_bg01.png);}
#schedule .slick_wrap .slick .slick_slide:nth-child(3){background-image: url(/page/mayor2024/images/main/slick_bg02.png);}
#schedule .slick_wrap .slick .slick_slide:nth-child(4){background-image: url(/page/mayor2024/images/main/slick_bg03.png);}
#schedule .slick_wrap .slick .slick_slide:nth-child(5){background-image: url(/page/mayor2024/images/main/slick_bg04.png);}
#schedule .slick_wrap .slick .slick_slide:nth-child(6){background-image: url(/page/mayor2024/images/main/slick_bg05.png);}
#schedule .slick_wrap .slick .slick_slide em{font-size: 32px; font-weight: 300;}
#schedule .slick_wrap .slick .slick_slide strong{display: block; font-size: 52px;}
#schedule .slick_wrap .slick .slick_slide .work{padding-top: 55px;}
#schedule .slick_wrap .slick .slick_slide span{display: block; font-weight: 400; font-size: 18px; position: relative;}
#schedule .slick_wrap .slick .slick_slide span .b_number{position: relative; font-size: 18px; color: #353a8e; margin-right: 17px;  font-weight: 900; width: 34px; height: 32px; line-height: 32px; background: #fff; border-radius: 20px; display: inline-block; text-align: center;}
#schedule .slick_wrap .slick .slick_slide span .b_number::after{content: ''; width: 9px; height: 7px; background: #fff; position: absolute; right: 2px; bottom: 2px;}
#schedule .slick_wrap .slick .slick_slide li + li{padding-top: 17px;}
#schedule .control{position:absolute; left: 50%; bottom:-77px; transform: translate(-50%);  display: flex; align-items: center; justify-content: center; z-index:10; width: 274px; height:57px; padding:0 62px;}
#schedule .control .count{color:#353a8e; font-weight: 800; font-size:34px; display:flex; align-items:center;}
#schedule .control .count span{background: #6c6c6c; width: 7px; height: 7px; border-radius: 50%; margin: 0 23px;}
#schedule .control .count strong{font-size: 34px; color: #000; font-weight: 400;}
#schedule .control a{display: block; width:14px; height:24px; position: absolute; background: url(/page/mayor2024/images/main/css_sprites.png) no-repeat; font-size:0; color:transparent;}
#schedule .control a.prev{background-position: -10px -128px; left: 0;}
#schedule .control a.next{background-position: -44px -128px; right: 0;}
#schedule .slick_wrap01{width: calc(100% - 495px); position: relative;}
#schedule .slick01{ position:relative;z-index:3; margin-left: 64px;}
#schedule .slick01 .slick-list{margin:-15px -30px; position: relative; z-index: -5;}
#schedule .slick01::before{content: ''; background: url(/page/mayor2024/images/main/line.png)no-repeat right; background-size: cover; width: 829px; height: 1px; position: absolute; left: -16px; top: -34px;}
#schedule .slick01 .slick-slide{margin:15px 15px;  border-radius: 12px;  position:relative; outline: 2px solid #e2e2e2;}
#schedule .slick01 .slick-slide:hover{outline: 2px solid #907fed;}
#schedule .slick01 .slick-slide .thumb{height:218px;overflow:hidden;position:relative;}
#schedule .slick01 .slick-slide .thumb img{width:100%;height:100%;object-fit:cover;transition:all .2s; border-radius: 12px 12px 0 0;}
#schedule .slick01 .slick-slide:hover .thumb img{transform:scale(1.1); border-radius:47px 47px 0 0;}
#schedule .slick01 .slick-slide p{background:#fff;height:84px; border-radius: 0 0 8px 8px; padding:30px 20px 0 20px; height: 197px; word-break:keep-all;}
#schedule .slick01 .slick-slide:hover p strong{text-decoration: underline; text-underline-position: under; text-decoration-color: #474747;}
#schedule .slick01 .slick-slide p strong{font-size: 20px; font-weight: 500; color: #333; display:-webkit-box;-webkit-line-clamp: 2;overflow: hidden;-webkit-box-orient: vertical;}
#schedule .slick01 .slick-slide p span{font-size: 16px; color: #777; padding-top: 45px; display: block;}
#schedule .control01{position: absolute; left: 50%; top: -73px; transform: translate(-50%);}
#schedule .control01 a{display: block; width:49px; height:49px; position: absolute; background: url(/page/mayor2024/images/main/css_sprites.png) no-repeat; background-size: 118px 81px; font-size:0; color:transparent;}
#schedule .control01 a.prev{background-position: -5px -5px; left: -22px;}
#schedule .control01 a.next{background-position: -64px -5px; right: -92px;}


@media (max-width:1399px) {
    #schedule::before{left: auto; right: -340px; bottom: 330px;}
    #schedule .slick::before{width: 100%;}
    #schedule .slick01::before{width: 629px;}
    #schedule .control01 a.prev{left: -145px;}
    #schedule .control01 a.next{right: -4px;}
    #schedule .slick_wrap{width: calc(100% - 680px);}
    #schedule .slick_wrap01{width: calc(100% - 460px);}
}

@media (max-width:1024px) {
    #schedule .slick::before{display: none;}
    #schedule .slick_wrap{width: calc(100% - 550px);}
    #schedule .slick_wrap01{width: calc(100% - 460px);}
    #schedule .slick01 .slick-list{margin: -15px -40px;}
    #schedule .slick01::before{display: none;}
    #schedule .control01 a.prev{left: -31px;}
    #schedule .control01 a.next{right: -92px;}
  }

@media (max-width:991px){
    #schedule{padding: 40px 0 70px}
    #schedule::before{bottom: 662px; left: auto; right: -340px;}
    #schedule h3{font-size: 35px;}
    #schedule h3::before{top: 19px;}
    #schedule h3 em{font-size: 30px;}
    #schedule h3 span{font-size: 18px;}
    #schedule .schedule_wrap{flex-direction: column; align-items: center;}
    #schedule .slick_wrap{width: 100%}
    #schedule .slick_wrap01{width: 100%;}
    #schedule .slick01{margin-left: 0; margin-top: 100px;}
    #schedule .slick01 .slick-list{margin: -15px -15px;}
    #schedule .control{bottom: -68px;}
    #schedule .control01{display: none;}
    #schedule .slick_wrap > a,
    #schedule .slick_wrap::before{top: -9px;}
    #schedule .slick-list{padding-top: 0; margin-top: 40px;}
    #schedule .slick-slide{border-radius: 11px;}
    #schedule .slick::before{display: none;}
    #schedule .slick-slide p strong{font-size: 18px;}
    #schedule .slick-slide p span{font-size: 15px;}
    #schedule .slick-slide p{height: 170px; padding:25px 20px 0 20px;}
}

@media (max-width:716px){
    #schedule::before{right: -540px;}
    #schedule h3{font-size: 19px; padding: 10px 0 0 27px}
    #schedule h3::before{top: 15px;}
    #schedule h3::before{width: 17.5px; height: 42px; background-size: cover;}
    #schedule h3 em{font-size: 19px;}
    #schedule h3 span{font-size: 14px;}
    #schedule .schedule_wrap{margin-top: 50px;}
    #schedule .slick_wrap::before{width: 90px; height: 65px; background-size: cover;}
    #schedule .slick_wrap > a{width: 150px; height: 55px; font-size: 16px; padding: 0 10px;}
    #schedule .slick_wrap > a, 
    #schedule .slick_wrap::before{top: 10px;}
    #schedule .slick_wrap .slick .slick_slide{padding: 52px 0 0 23px; height: 330px;}
    #schedule .slick_wrap .slick .slick_slide .work{padding-top: 35px;}
    #schedule .slick_wrap .slick .slick_slide em{font-size: 25px;}
    #schedule .slick_wrap .slick .slick_slide strong{font-size: 45px;}
    #schedule .slick_wrap .slick .slick_slide span{font-size: 14px;}
    #schedule .slick_wrap .slick .slick_slide span .b_number{margin-right: 5px; font-size: 14px; width: 27px; height: 28px; line-height: 28px;}
    #schedule .slick_wrap .slick .slick_slide li + li{padding-top: 10px;}
    #schedule .control{width: 190px; padding: 0; bottom: -55px;}
    #schedule .control .count strong,
    #schedule .control .count{font-size: 25px;}
    #schedule .slick01{margin-left: 0; margin-top: 80px;}
    #schedule .slick-slide p{height: 120px; padding: 20px 20px 0 20px;}
    #schedule .slick-slide p strong{font-size: 16px;}
    #schedule .slick-slide p span{padding-top: 25px; font-size: 14px;}
    #schedule .slick-slide .thumb img{border-radius: 12px 12px 0 0;}
    #schedule .slick01 .slick-slide p{height: 110px; padding: 20px 10px 0 10px;}
    #schedule .slick01 .slick-slide p span{padding-top: 25px;}
    #schedule .slick01 .slick-slide p strong{font-size: 16px; -webkit-line-clamp: 1;}

    #schedule .slick01 .slick-slide:hover .thumb img{border-radius:53px 53px 0 0;}
    #schedule .slick-slide:hover .thumb img{border-radius:56px 56px 0 0;}
}

@media (max-width:500px){
    #schedule .slick-slide:hover .thumb img{border-radius: 64px 64px 0 0;}
}

@media (max-width:414px){
}

@keyframes down01 { 
    0% { transform: translateY(-60%); opacity: 0;}
    100% { transform: translateY(0%); opacity: 1;}
}

@keyframes front { 
    0% { transform: translateX(10%);}
    100% { transform: translateX(0%);}
}

@keyframes fade01 { 
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes visual-move2{ 
    0%{transform:translateY(-10%);}
    100%{transform:translateY(0%);}
}