@charset "utf-8";

*{margin:0;padding:0}
html, body{overflow-y:hidden}
ul, ol{list-style:none}
.bor{border: 1px solid red;}
img{width:100%;}



.section{ position: relative; width: 100vw; height: 100%; overflow: hidden;}

.intro_wrap{ position:absolute; width: 100vw; height: 100%; background-image:url(../img/bg_00.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; inset: 0px; overflow: hidden;}
.intro_wrap .logo_w{ position: absolute; left:240px; top:calc( 30% - 160px ); width:156px; height:57px;}
.intro_wrap .txt00{ position: absolute; left:240px; top:calc( 40% - 130px ); width: 508px; height: 369px;}
.intro_wrap .img00{ position: absolute; left:838px; top:calc( 40% - 130px ); width:calc( 100% - 1078px ); height: 369px; background-image:url(../img/img_00.png); background-repeat: no-repeat; background-position: right top;}
.intro_wrap .img01{display:block; position:absolute; right: -18px; top: 390px; width:70px; height:70px;}

.text_s_00{ position: absolute; left:240px; top:calc( 40% + 225px ); width:350px;}
.down01{ position: absolute; left:240px; top:calc( 40% + 265px ); display:inline-block; width:200px; height:70px;}
.down02{ position: absolute; left:460px; top:calc( 40% + 265px ); display:inline-block; width:200px; height:70px;}

#down_s{display:none; opacity:0;}
.sub_down{position: absolute; top:calc( 30% - 160px ); right: 240px; z-index:100;}
.sub_down .down03{ position: absolute; right:230px; top:0; display:inline-block; width:200px; height:60px;}
.sub_down .down04{ position: absolute; right:0px; top:0; display:inline-block; width:200px; height:60px;}

.info_wrap{position: relative; width: 100%; height: 100%; overflow: hidden; background-color:#ddd740;}
.info_wrap .logo_b{ position: absolute; left:240px; top:calc( 30% - 160px ); width:156px; height:57px;}
.info_wrap .txt01{ position: absolute; left:240px; top:calc( 40% - 50px ); width: 508px; height: 369px;}
.info_wrap .txt02{ position: absolute; left:240px; top:calc( 40% - 50px ); width: 508px; height: 369px;}
.info_wrap .ist01{ position: absolute; right:240px; bottom:-500px; width: 662px; height: 443px;}
.info_wrap .ist02{ position: absolute; right:240px; bottom:-500px; width: 536px; height: 450px;}
.info_wrap .ist03{ position: absolute; right:240px; bottom:-550px; width: 656px; height: 525px;}
.info_wrap .ist04{ position: absolute; right:240px; bottom:-500px; width: 663px; height: 492px;}
.info_wrap .ser_txt01{position: absolute; left:240px; top:calc( 40% + 340px ); font-size:16px; font-weight:400; font-family: 'Noto Sans KR', sans-serif; line-height: 22px;}
.info_wrap .ser_txt02{position: absolute; left:240px; top:calc( 40% + 240px ); width:580px; font-size:16px; font-weight:400; font-family: 'Noto Sans KR', sans-serif; line-height: 22px;}

#down_s.fadeout{animation-name:fadeout; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
#down_s.fadein{display: block; animation-name:fadein; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards; }
#down_s.block{display: block;}
#ist01.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
#ist02.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
#ist03.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
#ist04.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
  
.fav_wrap{ position: relative; width: 100vw; height: 100%; background-image:url(../img/bg_06.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; inset: 0px; overflow: hidden;}
.fav_wrap .title{display: flex; margin-top:calc( 10% - 80px ); margin-bottom:calc( 13% - 100px ); justify-content:center;}
.fav_wrap .title p{width:504px; height:48px;}
.container{ display: flex; justify-content:center;}
.container .item{margin:0 20px; width:350px; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.1) 20px 20px 20px;}
.container .t_txt{margin:10px; font-size:16px; font-weight:700; font-family: 'Noto Sans KR', sans-serif; color:#00bed6;}
.container .ds_txt{margin:10px 10px 20px 10px; font-size:14px; font-weight:400; font-family: 'Noto Sans KR', sans-serif; color:#303030;}

.footer_wrap{ position: relative; width: 100vw; height: 100%; background-color: #fff; overflow: hidden;}
.footer_wrap .title{display: flex; margin-top:calc( 10% - 80px ); margin-bottom:calc( 13% - 100px ); justify-content:center;}
.footer_wrap .partner{display: flex; justify-content:center; margin:0 0 10px 0;}
.footer_wrap .footer{display: flex; position: relative; margin-top:calc( 10% - 80px ); height:100%; background-color:#2f2f2f;}
.footer_wrap .footer .logo_g{ position: absolute; left:240px; top:50px; width:156px; height:57px;}
.footer_wrap .footer .adress{ position: absolute; left:480px; top:50px; font-size:16px; font-weight:300; line-height:30px; font-family: 'Noto Sans KR', sans-serif; color:#999;}
.footer_wrap .footer .copy{position: absolute; right:240px; top:140px; text-align: right; font-size:16px; font-weight:300; line-height:30px; font-family: 'Noto Sans KR', sans-serif; color:#999;}

@-webkit-keyframes ist_on {
    from {bottom:-400px;}
    to {bottom:-3px;}
}
@-webkit-keyframes fadeout {
    from {opacity:1;}
    to {opacity:0;}
}

@-webkit-keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}

@media all and (max-width:1280px){
    .section{ position: relative; width: 100vw; height: 100%; overflow: hidden;}

    .intro_wrap{ position:absolute; width: 100vw; height: 100%; background-image:url(../img/bg_00.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; inset: 0.00vw; overflow: hidden;}
    .intro_wrap .logo_w{position: absolute;left: 6.44vw;top: calc( 30% - 12.63vw ); width:15.23vw; height:5.57vw;}
    .intro_wrap .txt00{position: absolute;left: 6.44vw;top: calc( 40% - 8.7vw );width: 41.61vw;height: 36.04vw;}
    .intro_wrap .img00{position: absolute;left: 54.84vw;top: calc( 40% - 8.7vw );width: calc( 100% - 63.27vw );height: 36.04vw; background-image:url(../img/img_00.png);background-repeat: no-repeat;background-position: right top;background-size: 126vw;}
    .intro_wrap .img01{display:block; position:absolute;right: -1.76vw;top: 33.59vw;width: 6.34vw; height:6.84vw;}
    
    .text_s_00{position: absolute;left: 6.64vw; top:calc( 40% + 21.97vw );width: 33.18vw;}
    .down01{position: absolute;left: 6.74vw; top:calc( 40% + 25.88vw ); display:inline-block;width: 15.53vw; height:6.84vw;}
    .down02{position: absolute;left: 24.52vw; top:calc( 40% + 25.88vw ); display:inline-block;width: 15.53vw; height:6.84vw;}
    
    #down_s{display:none; opacity:0;}
    .sub_down{position: absolute;top: calc( 30% - 12.63vw );right: 5.44vw; z-index:100;}
    .sub_down .down03{position: absolute;right: 18.46vw; top:0; display:inline-block;width: 16.53vw; height:5.86vw;}
    .sub_down .down04{position: absolute; right:0.00vw; top:0; display:inline-block;width: 16.53vw; height:5.86vw;}
    
    .info_wrap{position: relative; width: 100%; height: 100%; overflow: hidden; background-color:#ddd740;}
    .info_wrap .logo_b{position: absolute;left: 6.44vw;top: calc( 30% - 12.63vw ); width:15.23vw; height:5.57vw;}
    .info_wrap .txt01{position: absolute;left: 6.44vw;top: calc( 40% - 8.7vw );width: 36.61vw;height: 36.04vw;}
    .info_wrap .txt02{position: absolute;left: 6.44vw;top: calc( 40% - 8.7vw );width: 41.61vw;height: 36.04vw;}
    .info_wrap .ist01{position: absolute;right: 2.44vw;bottom: -49.83vw;width: 54.65vw;height: 43.26vw;}
    .info_wrap .ist02{position: absolute;right: 2.44vw; bottom:-48.83vw;width: 44.34vw;height: 43.95vw;}
    .info_wrap .ist03{position: absolute;right: 4.54vw;bottom: -55.91vw;width: 45.66vw;height: 51.27vw;margin-bottom: -8.1vw;}
    .info_wrap .ist04{position: absolute;right: 5.44vw; bottom:-48.83vw;width: 45.85vw;height: 48.05vw;margin-bottom: -7.3vw;}
    .info_wrap .ser_txt01{position: absolute;left: 6.44vw;top: calc( 40% + 20.2vw );font-size: 1.66vw; font-weight:400;font-family: 'Noto Sans KR', sans-serif;line-height: 2.55vw;}
    .info_wrap .ser_txt02{position: absolute;left: 6.44vw;top: calc( 40% + 14.44vw );width: 42.64vw; font-size:1.56vw; font-weight:400;font-family: 'Noto Sans KR', sans-serif;line-height: 2.15vw;}
    
    #down_s.fadeout{animation-name:fadeout; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
    #down_s.fadein{display: block; animation-name:fadein; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards; }
    #down_s.block{display: block;}
    #ist01.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
    #ist02.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
    #ist03.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
    #ist04.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
      
    .fav_wrap{ position: relative; width: 100vw; height: 100%; background-image:url(../img/bg_06.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; inset: 0.00vw; overflow: hidden;}
    .fav_wrap .title{display: flex; margin-top: calc( 10% - 1.51vw );margin-bottom: calc( 13% - 2.77vw ); justify-content:center;}
    .fav_wrap .title p{width: 71.22vw; height:4.69vw;}
    .container{display: flex;justify-content: flex-start;flex-direction: column;width: 100%;}
    .container .item_txt_wrap{position: absolute;right: 0;display: flex;flex-direction: column;width: 34vw;padding: 0 2vw 0 0;top: 0;}
    .container .item{position: relative;left: 11px;top: 0;margin: 0 0 8vw 0;width: 93.18vw;background-color: #fff;box-shadow: rgba(0, 0, 0, 0.1) 1.95vw 1.95vw 1.95vw;border-radius: 3vw;}
    .container .item .thum{width: 56vw; line-height:0;border-radius: 3vw 0vw 0vw 3vw;overflow: hidden;}
    .container .t_txt{margin: 2vw 0 1vw 0;font-size: 3.16vw;font-weight:700;font-family: 'Noto Sans KR', sans-serif; color:#00bed6;}
    .container .ds_txt{ font-size:1.37vw; font-weight:400;font-family: 'Noto Sans KR', sans-serif; color:#303030;line-height: 3.9vw;margin: 0;}
    
    .footer_wrap{ position: relative; width: 100vw; height: 100%; background-color: #fff; overflow: hidden;}
    .footer_wrap .title{display: flex;margin-top: calc( 10% - 3.51vw );margin-bottom: calc( 13% - 7.77vw ); justify-content:center;}
    .footer_wrap .partner{display: flex; justify-content:center;margin: 0 0 -0.32vw 0;}
    .footer_wrap .footer{display: flex;position: relative;margin-top: calc( 10% - 4.31vw ); height:100%; background-color:#2f2f2f;}
    .footer_wrap .footer .logo_g{position: absolute;left: 7.44vw; top:4.88vw; width:15.23vw; height:5.57vw;}
    .footer_wrap .footer .adress{position: absolute;left: 31.88vw; top:4.88vw; font-size:1.56vw; font-weight:300; line-height:2.93vw;font-family: 'Noto Sans KR', sans-serif; color:#999;}
    .footer_wrap .footer .copy{position: absolute;right: auto;left: 32vw;top: 19.67vw;text-align: right; font-size:1.56vw; font-weight:300; line-height:2.93vw;font-family: 'Noto Sans KR', sans-serif; color:#999;}
    
    @-webkit-keyframes ist_on {
        from {bottom: -40.06vw;}
        to {bottom: -6.69vw;}
    }
    @-webkit-keyframes fadeout {
        from {opacity:1;}
        to {opacity:0;}
    }
    
    @-webkit-keyframes fadein {
        from {opacity:0;}
        to {opacity:1;}
    }
}


@media all and (max-width:720px){
    .section{ position: relative; width: 100vw; height: 100%; overflow: hidden;}

    .intro_wrap{ position:absolute; width: 100vw; height: 100%; background-image:url(../img/bg_00.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; inset: 0.00vw; overflow: hidden;}
    .intro_wrap .logo_w{position: absolute;left: 6.44vw;top: calc( 30% - 39.63vw );width: 24.23vw; height:5.57vw;}
    .intro_wrap .txt00{position: absolute;left: 6.44vw;top: calc( 40% - 34.7vw );width: 69.61vw;height: 36.04vw;}
    .intro_wrap .img00{/* display: none; */position: absolute;left: 54.84vw;top: auto;bottom: 17vw;width: calc( 100% - 63.27vw );height: 36.04vw;background-image: none;background-repeat: no-repeat;background-position: right top;background-size: 126vw;}
    .intro_wrap .img01{display:block; position:absolute;right: -1.76vw;top: auto;bottom: 0;width: 11.34vw; height:6.84vw;}
    
    .text_s_00{position: absolute;left: 6.64vw;top: auto;bottom: 27vw;width: 71.18vw;}
    .down01{position: absolute;left: 6.74vw;top: auto;bottom: 17vw;display:inline-block;width: 31.53vw; height:6.84vw;}
    .down02{position: absolute;left: 43.52vw;top: auto;bottom: 17vw;display:inline-block;width: 31.53vw; height:6.84vw;}
    
    #down_s{display:none; opacity:0;}
    .sub_down{position: absolute;top: calc( 30% - 38.63vw );right: 5.44vw; z-index:100;}
    .sub_down .down03{position: absolute;right: 26.46vw; top:0; display:inline-block;width: 24.53vw; height:5.86vw;}
    .sub_down .down04{position: absolute;right: -1vw; top:0; display:inline-block;width: 24.53vw; height:5.86vw;}
    
    .info_wrap{position: relative; width: 100%; height: 100%; overflow: hidden; background-color:#ddd740;}
    .info_wrap .logo_b{position: absolute;left: 6.44vw;top: calc( 30% - 39.63vw );width: 24.23vw; height:5.57vw;}
    .info_wrap .txt01{position: absolute;left: 6.44vw;top: calc( 40% - 34.7vw );width: 64.61vw;height: 36.04vw;}
    .info_wrap .txt02{position: absolute;left: 6.44vw;top: calc( 40% - 34.7vw );width: 76.61vw;height: 36.04vw;}
    .info_wrap .ist01{position: absolute;right: 6.44vw;bottom: -49.83vw;width: 80.65vw;height: 43.26vw;}
    .info_wrap .ist02{position: absolute;right: 2.44vw; bottom:-48.83vw;width: 66.34vw;height: 43.95vw;margin-bottom: 1vw;}
    .info_wrap .ist03{position: absolute;right: 10.54vw;bottom: -55.91vw;width: 66.66vw;height: 51.27vw;margin-bottom: -8.1vw;}
    .info_wrap .ist04{position: absolute;right: 5.44vw; bottom:-48.83vw;width: 68.85vw;height: 48.05vw;margin-bottom: -7.3vw;}
    .info_wrap .ser_txt01{position: absolute;left: 6.44vw;top: calc( 40% + 15.2vw );width: 81vw;font-size: 4.66vw; font-weight:400;font-family: 'Noto Sans KR', sans-serif;line-height: 6.55vw;}
    .info_wrap .ser_txt02{position: absolute;left: 6.44vw;top: calc( 40% + 8.44vw );width: 81vw;font-size: 4.66vw; font-weight:400;font-family: 'Noto Sans KR', sans-serif;line-height: 6.55vw;}
    
    #down_s.fadeout{animation-name:fadeout; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
    #down_s.fadein{display: block; animation-name:fadein; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards; }
    #down_s.block{display: block;}
    #ist01.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
    #ist02.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
    #ist03.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
    #ist04.active{animation-name:ist_on; animation-duration:0.5s; animation-iteration-count:1; animation-direction:alternate; animation-fill-mode: forwards;}
      
    .fav_wrap{ position: relative; width: 100vw; height: 100%; background-image:url(../img/bg_06.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; inset: 0.00vw; overflow: hidden;}
    .fav_wrap .title{display: flex; margin-top: calc( 10% - 1.51vw );margin-bottom: calc( 13% - 2.77vw ); justify-content:center;}
    .fav_wrap .title p{width: 71.22vw; height:4.69vw;}
    .container{display: flex;justify-content: flex-start;flex-direction: column;width: 100%;}
    .container .item_txt_wrap{position: absolute;right: 0;display: flex;flex-direction: column;width: 34vw;padding: 0 2vw 0 0;top: 0;}
    .container .item{position: relative;left: 11px;top: 0;margin: 0 0 8vw 0;width: 93.18vw;background-color: #fff;box-shadow: rgba(0, 0, 0, 0.1) 1.95vw 1.95vw 1.95vw;border-radius: 3vw;}
    .container .item .thum{width: 56vw; line-height:0;border-radius: 3vw 0vw 0vw 3vw;overflow: hidden;}
    .container .t_txt{margin: 2vw 0 1vw 0;font-size: 3.16vw;font-weight:700;font-family: 'Noto Sans KR', sans-serif; color:#00bed6;}
    .container .ds_txt{ font-size:1.37vw; font-weight:400;font-family: 'Noto Sans KR', sans-serif; color:#303030;line-height: 3.9vw;margin: 0;}
    
    .footer_wrap{ position: relative; width: 100vw; height: 100%; background-color: #fff; overflow: hidden;}
    .footer_wrap .title{display: flex;margin-top: calc( 10% - 1.51vw );margin-bottom: calc( 13% - 2.77vw ); justify-content:center;}
    .footer_wrap .title p{width: 39.22vw; height:4.69vw;}
    .footer_wrap .partner{text-align: center;display: flex;justify-content: center;flex-wrap: wrap;margin: 0 0 -0.32vw 0;}
    .footer_wrap .partner p{width: 45vw;margin: 0 0 2vw 0;}
    .footer_wrap .footer{display: flex;position: relative;margin-top: calc( 10% - 4.31vw ); height:100%; background-color:#2f2f2f;}
    .footer_wrap .footer .logo_g{position: absolute;left: 7.44vw; top:4.88vw; width:15.23vw; height:5.57vw;}
    .footer_wrap .footer .adress{position: absolute;left: 31.88vw; top:4.88vw;font-size: 2.56vw; font-weight:300;line-height: 3.93vw;font-family: 'Noto Sans KR', sans-serif; color:#999;margin: 0 5vw 0 0;}
    .footer_wrap .footer .copy{position: absolute;right: auto;left: 32vw;top: 29.67vw;text-align: right;font-size: 2.56vw; font-weight:300; line-height:2.93vw;font-family: 'Noto Sans KR', sans-serif; color:#999;}
    
    #fp-nav.right {right: -1vw !important;}



    @-webkit-keyframes ist_on {
        from {bottom: -40.06vw;}
        to {bottom: 10.31vw;}
    }
    @-webkit-keyframes fadeout {
        from {opacity:1;}
        to {opacity:0;}
    }
    
    @-webkit-keyframes fadein {
        from {opacity:0;}
        to {opacity:1;}
    }
}