@charset "utf-8";

/* 레이아웃 공통 */
html, body{position:relative; width:100%;}
body{color:#000; font-size:16px; line-height:1.6; font-family: 'S-CoreDream'; word-break:break-all;letter-spacing:-0.7px;max-width:1920px;margin:0 auto;}
main{display:block;}
#wrapper{overflow:hidden;}


/* 본문바로가기 */
.skipnav{position:absolute;z-index:2999;top:-100px;width:100%;padding:0;list-style:none;font-size:14px;}
.skipnav li{position:relative;top:0;left:0;width:100%}
.skipnav li a{display:block;position:absolute;top:0;width:100%;padding:15px 0;background:#000;color:#fff;text-align:center;text-decoration:none}
.skipnav li a:focus,.skipnav li a:active{top:100px}

/* slick 플러그인 */
.slick-slider .slick-list{display:block; overflow-x:hidden; overflow-y:hidden; position:relative}
.slick-slider .slick-list.dragging{cursor:pointer}
.slick-slider .slick-list .slick-track{display:block; position:relative; top:0; left:0}
.slick-slider .slick-list .slick-track:before, .slick-slider .slick-list .slick-track:after{display:table; content:''}
.slick-slider .slick-list .slick-track:after{clear:both}
.slick-slider .slick-list.slick-loading .slick-track{visibility:hidden}
.slick-slider .slick-list .slick-track .slick-slide{display:none; float:left}
.slick-slider[dir='rtl'] .slick-list .slick-track .slick-slide{float:right}
.slick-slider .slick-list .slick-track .slick-slide img{display:block;width:100%;}
.slick-slider .slick-list .slick-track .slick-slide.slick-loading img{display:none}
.slick-slider.slick-initialized .slick-list .slick-track .slick-slide{display:block}
.slick-slider .slick-list .slick-track.slick-loading .slick-slide{visibility:hidden}
.slick-slider .slick-arrow.slick-hidden{display:none}
.slick-dots{display:flex;justify-content:center;align-items:center;}
.slick-dots li{transition:transform .3s;transform:scale(.8);}
.slick-dots li.slick-active{transform:scale(1);}
.slick-dots li a{display:block;width:70px;height:70px;}
.slick-dots img{display:block;width:100%;height:100%;object-fit:cover;}


/* 공통 */
main{background:#fff;}
.inner{max-width:1400px; position:relative; margin:0 auto;}

@media (max-width:1399px) {
  .inner{padding: 0 20px;}
}

@media (max-width:716px) {
  .inner{padding: 0 15px;}
}

#header .header_top{border-bottom: 1px solid #ddd;}
#header .header_top .page_btn{display: flex; align-items: center; justify-content: flex-end; padding:10px 0 13px;}
#header .header_top .page_btn a{position: relative; font-weight: 400; font-size: 14px; color: #333; padding: 0 20px;}
#header .header_top .page_btn a::after{content: ''; background: url(/page/portal2024/images/main/dot.png)no-repeat; width: 1px; height: 8px; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
#header .header_top .page_btn a:first-child{padding-left: 0;}
#header .header_top .page_btn a:last-child{padding-right: 0;}
#header .header_top .page_btn a:last-child::after{display: none;}
#header .header_top .page_btn a:hover{color: #c54283;}

#header .lang-wrap{height:70px;display:flex;align-items:center;justify-content:flex-end;background:#fff;padding-right:210px;border-bottom-left-radius: 70px;z-index:30;position:relative;}
#header .lang-bx{margin-right:0px;position:relative;}
#header .lang-bx .ibtn{display:flex;align-items:center;font-weight:700;}
#header .lang-bx .ibtn img{width:30px;margin-right:4px;margin-top:-4px;}
#header .lang-bx .ibtn:after{content:'';display:block;width:12px;height:7px;margin-left:5px;transition:all .2s;}
#header .lang-view{position:absolute;top:30px;width:100px;left:calc(50% - 61px);box-shadow: 2px 2px 3px 0px rgba(0,0,0,.07);display:none;background:#edf0f2;border:1px solid #dfe4e7;  padding:10px 0;border-radius:15px;opacity:0;transition:all .2s;transform:rotateY(90deg);pointer-events:none;}
#header .lang-view a{display:block;text-align:center;font-size:15px;height:24px;line-height:24px;color:#4e4e4e;padding:0 !important;}
#header .lang-bx.active .ibtn:after{transform:rotate(180deg);}
#header .lang-bx.active .lang-view{transform:rotateY(0deg);pointer-events:initial;opacity:1;display:block;z-index: 6;}

#header{position:fixed; z-index:2000; top:0; left:0px; right:0px;  transition:all .3s; border-bottom:1px solid #ddd; background:#fff;}
#header h1{margin-right:10px;}
#header h1 a, 
#header h1 img{display:block;height: 64px; transition: all .3s;}
#header.fixed{top:-150px;}
#header.fixed.active{background:#fff;}

#header .ev_box{width: 100%;height:42px;background-color: #edf1f5;overflow:hidden;transition:all .15s;}
#header .ev_box div {display: flex;align-items: center;}
#header .ev_box .logo_gover{display: flex; align-items: center; background-repeat: no-repeat; background-position: center left; height: 100%;}
#header .ev_box .logo_gover div img{margin-right: 9px;}
#header .ev_box .logo_gover .gover_t{color: #4f6280;font-size: 14px;}
#header.fixed .ev_box{height:0;}

#header .top-bx{display:flex; justify-content:space-between; align-items:center; position:relative;  transition:all .3s ease-out; height:105px; z-index: 5;}
#header .top-bx > div form{position: relative; max-width: 608px;}
#header .top-bx input[type=search]:focus::placeholder{color: transparent;}
#header .top-bx input::placeholder{display: inline-block; font-size: 18px; color: #777; font-family: 'S-CoreDream'; font-weight: 400;}
#header .top-bx input[type=search]{display: block; width: 595px; height: 64px; font-size: 18px; font-family: 'S-CoreDream'; padding-right: 64px; background: transparent; border: 4px solid #8436a9; border-radius: 40px 30px 30px 40px; padding-left: 44px;}
#header .top-bx fieldset{position: relative; }
#header .top-bx .search_box{margin-right: 59px;}
#header .top-bx .search_box form .submit-bx{background: linear-gradient(135deg, rgba(237,104,40,1) 10%, rgba(90,34,222,1) 80%); width: 64px; height: 64px; border-radius: 20px; position: absolute; right: 0; top: 0;}
#header .top-bx input[type="submit"]{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);  font-size: 0; background: url(/page/portal2024/images/main/css_sprites.png) no-repeat -541px -387px;
width: 21px; height: 21px; background-size: 586px 500px;}
#header .logo-bx{display:flex; align-items:center; position:relative;}
#header .logo-bx > a{position:relative;padding:15px;line-height:1.1;position:relative;margin-right:3px;transition:all .1s;}
#header .logo-bx a:hover{color:#008368;font-weight:700;}
#header .btn-bx{display:flex; align-items:center; justify-content:flex-end; }

#header .btn-bx .lang-view{position:absolute;top:40px;border-radius:5px; display: none; text-align: center; background:#fff; border: 1px solid #000; width:70px;left:50%;margin-left:-35px;z-index:20;padding:3px 0;}
#header .btn-bx .active + .lang-view{display:block;animation:gnb2 .2s 1 both ease-out; }
#header .btn-bx .lang-view a{display: inline-block;  padding: 9px 0; line-height: 1.1; text-align: center; color: #777; font-weight: 500; font-size: 14px;}
#header .btn-bx .lang-view a + a{border-top: 1px dotted rgba(255,255,255,.5);}
#header .btn-bx .lang-view a span{display: inline-block; outline: 1px solid #bfbfbf; padding: 8px; border-radius: 20px;}
#header .btn-bx .lang-view a:hover span{color: #fff; background: #000; outline: none;}
#header .btn-bx .sitemap{position: relative;}
#header .btn-bx .sitemap img{height: 26px;}
#header .nav-bx{display:flex; justify-content:center; align-items:center; position:relative; transition:all .3s;}
#header .nav-bx:before{content:''; display:block; background:#ddd; height:1px; position:absolute; left:-1000px; right:-1000px; top:-1px;}
#header nav{display:flex;}
#header .tlv-02 a{display:flex;height:70px;align-items:center;justify-content:center;font-size:18px;transition:color .3s;padding:0 50px;}
#header .tlv-02.active a{color:#008368;font-weight:700;}
#header .tlv-02 a span{position:relative;display:inline-block;z-index:1; color: #111; font-size: 20px; font-weight: 600;}
#header .tlv-02 a:hover span{color: #8b39a1;}
#header li:first-child .tlv-02 a{padding-left:0;}
#header li:last-child .tlv-02 a{padding-right: 0;}
#header .bg_pc{position:absolute; top:71px; background:#f9faff; left:50%; width:1920px; margin-left:-960px; z-index:-1; height:0; transition:all .35s ease-out; overflow:hidden;}
#header .depth-01{display:flex;align-items:flex-start;justify-content:center;  }
#header .depth-02{display:none;position:absolute;top:70px;width:100%;left:0;right:0;padding:0px 0 40px;font-size:0; }
#header .depth-02 > li{display:inline-block; vertical-align:top;width:calc((100% + 75px) / 6);  margin-right:41px; margin-top:40px; font-size:16px;}
#header .depth-02 > li:nth-child(5n){margin-right: 0;}
#header .depth-02 .tlv-03 a{height:50px; line-height:1; color: #333; padding:0 5px 0; white-space: nowrap; background: #fff; animation: gnb3 .2s 0s 1 both ease-out; display:flex; font-size:16px; font-weight: 500; border:1px solid #eee; border-radius:10px; align-items:center; justify-content:center; transition:all .3s;}
#header .depth-03 .tlv-03 a[target="_blank"]:after{content:'';margin-left:4px;background: url(/page/common/images/ico-newwindow.png) no-repeat;width:12px;height:12px; margin-left: 7px; display: block;}

#header.pc-mode .depth-02 > li:hover .tlv-03 a{color:#fff; background: #8b39a1; border:0;}
#header .depth-02.icon-bx > li{width: calc((100% - 3px) / 18); margin-bottom:15px;}
#header .depth-02.icon-bx > li:nth-child(5n){margin-right: 41px;}
#header .depth-02.icon-bx > li:last-child{margin-right: 0;}
#header .depth-02.icon-bx .tlv-03 a{border:0;flex-direction:column;padding:0;height:auto; background: transparent; width: 80px;}
#header .depth-02.icon-bx .tlv-03 a em{display:flex;margin:0 auto 22px;width:80px;height:80px; background: #fff; border-radius:9px; border: 1px solid #8436a9; justify-content:center;align-items:center;transition:all .15s;}
#header .depth-02.icon-bx .tlv-03 a em img{display:block;transition:all .15s; height: 40px;}
#header .depth-02.icon-bx .tlv-03 a span{display:block;text-align:center;word-break:keep-all; white-space: nowrap; font-size: 14px;}
#header .depth-02.icon-bx > li:hover .tlv-03 a{color:#000;background:transparent;}
#header .depth-02.icon-bx > li:hover .tlv-03 a em{background: #8436a9;}
#header .depth-02.icon-bx > li:hover .tlv-03 a em img{filter: brightness(0) invert(1);}
#header .depth-03{padding:13px 0 0 2px;}
#header .depth-03 .tlv-04 a{min-height:27px; font-size:17px; font-weight: 400; display:flex; align-items: center; animation: gnb1 .2s .2s 1 both ease-out; position: relative; color:#777; line-height:1.2; transition:all .2s; padding:3px 0;}
#header .depth-03 .tlv-04 a:before{content:''; margin-right:5px; width:6px; height:6px; border-radius:50%;background:#2d3548;flex-shrink:0;margin-top:2px;}
#header .depth-03 .tlv-04 a:hover{color:#8b39a1;}
#header .depth-02 > li:nth-child(2) .tlv-03 a{animation-delay:.1s;}
#header .depth-02 > li:nth-child(3) .tlv-03 a{animation-delay:.15s;}
#header .depth-02 > li:nth-child(4) .tlv-03 a{animation-delay:.2s;}
#header .depth-02 > li:nth-child(5) .tlv-03 a{animation-delay:.25s;}
#header .depth-02 > li:nth-child(6) .tlv-03 a{animation-delay:.3s;}
#header .depth-02 > li:nth-child(7) .tlv-03 a{animation-delay:.35s;}
#header .depth-02 > li:nth-child(8) .tlv-03 a{animation-delay:.4s;}
#header .depth-02 > li:nth-child(9) .tlv-03 a{animation-delay:.45s;}
#header .depth-02 > li:nth-child(10) .tlv-03 a{animation-delay:.5s;}
#header .depth-02 > li:nth-child(11) .tlv-03 a{animation-delay:.55s;}
#header .depth-02 > li:nth-child(12) .tlv-03 a{animation-delay:.6s;}
#header .depth-02 > li:nth-child(13) .tlv-03 a{animation-delay:.65s;}
#header .depth-02 > li:nth-child(14) .tlv-03 a{animation-delay:.7s;}
#header .depth-02 > li:nth-child(15) .tlv-03 a{animation-delay:.75s;}
#header .depth-02 > li:nth-child(16) .tlv-03 a{animation-delay:.8s;}
#header .depth-02 > li:nth-child(17) .tlv-03 a{animation-delay:.85s;}
#header .depth-02 > li:nth-child(18) .tlv-03 a{animation-delay:.9s;}
#header .depth-02 > li:nth-child(19) .tlv-03 a{animation-delay:.95s;}
#header .depth-02 > li:nth-child(2) .tlv-04 a{animation-delay:.25s;}
#header .depth-02 > li:nth-child(3) .tlv-04 a{animation-delay:.3s;}
#header .depth-02 > li:nth-child(4) .tlv-04 a{animation-delay:.35s;}
#header .depth-02 > li:nth-child(5) .tlv-04 a{animation-delay:.4s;}
#header .depth-02 > li:nth-child(6) .tlv-04 a{animation-delay:.45s;}
#header .depth-02 > li:nth-child(7) .tlv-04 a{animation-delay:.5s;}
#header .depth-02 > li:nth-child(8) .tlv-04 a{animation-delay:.55s;}
#header .depth-02 > li:nth-child(9) .tlv-04 a{animation-delay:.6s;}
#header .depth-02 > li:nth-child(10) .tlv-04 a{animation-delay:.65s;}
#header .depth-02 > li:nth-child(11) .tlv-04 a{animation-delay:.7s;}
#header .depth-02 > li:nth-child(12) .tlv-04 a{animation-delay:.75s;}
#header .depth-02 > li:nth-child(13) .tlv-04 a{animation-delay:.8s;}
#header .depth-02 > li:nth-child(14) .tlv-04 a{animation-delay:.85s;}
#header .depth-02 > li:nth-child(15) .tlv-04 a{animation-delay:.9s;}
#header .depth-02 > li:nth-child(16) .tlv-04 a{animation-delay:.95s;}
#header .depth-02 > li:nth-child(17) .tlv-04 a{animation-delay:.1s;}
#header .depth-02 > li:nth-child(18) .tlv-04 a{animation-delay:1.05s;}
#mask{display: none; position:fixed;z-index:1002;top:0;left:0;right:0;bottom:0;animation:mask1 .15s 1 both ease;}
#mask.active{background:rgba(0,0,0,.5); display: block;}
#header .mobile-search{display: none;}
@media (max-width:1399px) {
  #header{border-bottom: 1px solid #ddd;}

  #header{border-bottom:0;transition:all .35s .1s;height:162px; border-bottom: 1px solid #ddd;}
  #header.fixed{backdrop-filter:blur(0px);transition-delay:0s;top:0svi;transition:all .35s .1s; height: 112px;}
  #header.active{background:#fff !important;transition-delay:0s; top:0;}
  #header.fixed .btn-bx{position: relative; top: -4px; transition: all .3s;}
  #header .btn-bx .lang-bx{margin-left: 0;}
  #header h1 a, #header h1 img{height: 44px; position: relative; top: -1px;}
  #header.fixed h1 a, #header.fixed h1 img{height: 30px; top: -4px;}
  #header.fixed .btn-bx .sitemap img,
  #header.fixed .btn-bx .language img{height: 20px;}
  #header .ev_box{height:32px;}
  #header .ev_box .logo_gover div img{margin-right: 7px;width:19px;}
  #header .ev_box .logo_gover .gover_t{font-size: 11px;}
  #header .top-bx{top: 14px; height: 60px;}
  #header .logo-bx{justify-content: flex-start;}
  #header .logo-bx > a{display:none;}
  #header nav{flex-direction: column;}
  #header .nav-bx{display:flex;justify-content:flex-end;margin-top: -50px;}
  #header .nav-bx:before{display:none;}
  #header .mobile-search{display: block; padding: 0 15px; margin-top: 22px;}
  #header .mobile-search > div form{position: relative; max-width: 608px;}
  #header .mobile-search fieldset{position: relative;}
  #header .mobile-search input[type=search]{display: block; width: 100%; height: 64px; font-size: 16px; padding-right: 60px; background: transparent; border: 4px solid #8436a9;
  border-radius: 40px 30px 30px 40px; padding-left: 30px; }
  #header .mobile-search input[type=search]::placeholder{color: #777;}
  #header .mobile-search input[type=search]:focus::placeholder{color: transparent;}
  #header .mobile-search form .submit-bx{background: linear-gradient(135deg, rgba(237,104,40,1) 10%, rgba(90,34,222,1) 80%); width: 64px; height: 64px; border-radius: 20px; position: absolute; right: 0; top: 0;}
  #header .mobile-search input[type="submit"]{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);  font-size: 0; background: url(/page/portal2024/images/main/css_sprites.png) no-repeat -541px -387px;
  width: 21px; height: 21px; background-size: 586px 500px;}
  #header .bg_pc{display:none !important}
  #header .mobile-menu{display:block;transition:filter .3s 0s;z-index: 10;} */
  #header.fixed .mobile-menu{filter: invert(1) brightness(200) drop-shadow(1px 1px 1px rgba(0,0,0,.8));margin-top:70px;transition:margin .3s .5s;}
  #header.fixed.active .mobile-menu{filter:invert(0) brightness(1) drop-shadow(1px 1px 0px rgba(0,0,0,0));margin-top:0;transition:margin 0s 0s;}
  #header.fixed nav{top: 90px;}
  #header nav{position:fixed;width:500px;height:calc(100vh - 60px);top:100px;background:#fff;right:-500px;transition:all .35s ease-out;max-width:100%;}
  #header.active nav{right:0;}
  #header .depth-01{display:block;padding-top:75px;overflow-y:auto;padding-bottom:20px; width: 48%;}
  #header .depth-01:before{content:'';display:block;position:absolute;top:126px;bottom:0;left:0; border-radius: 0 46px 0 0; background:#f4e9f7;z-index:-1;width:148px;}
  #header .depth-01 .tlv-02 a{height:67px;padding:0 0px 0 20px !important;width: 166px;justify-content:flex-start;}
  #header .depth-01 li .tlv-02{display: inline-block;}
  #header .depth-01 li .tlv-02 a span{font-size: 20px; font-weight: 400;}
  #header .depth-01 li .tlv-02 a:hover span{color: #000;}
  #header .depth-01 li .tlv-02.active a{background: #8a39a2; border-radius: 0 40px 40px 0;}
  #header .depth-01 li .tlv-02.active a span{color: #fff; font-weight: 600;}
  #header .tlv-02 a:hover span{pointer-events: none;}
  #header .depth-02{display:none;position:absolute;left: 140px;top:126px;width: calc(100% - 140px); z-index: -1; padding: 45px 15px 70px 49px;overflow-y:auto;height:calc(100vh - 140px);}
  #header .depth-02 > li{display:block;width:100%;margin:0;  margin-bottom: 29px;}
  #header .depth-02 .tlv-03 a{height:50px; font-size:16px; border:1px solid #eee; color: #333; font-weight: 500; border-radius: 5px; justify-content:center; padding:0; position:relative;}
  #header .depth-02 .tlv-03.has-depth a:after{content:'';display:block;transition:all .2s;width:6px;height:6px;border:1px solid #7c7e97;position:absolute;right:10px;top:50%;margin-top:-5px;border-width:1px 1px 0 0;transform:rotate(135deg);} 
  #header .depth-02 .tlv-03.has-depth.active a:after{border-color:#8a39a2;transform:rotate(-45deg);margin-top:-2px}  
  #header .depth-02 .tlv-03.active a{border-color: #8a39a2 !important; color: #8a39a2 !important;}
  
  #header .depth-03{padding: 18px 23px 17px 23px; display:none; background: #f6f6f6; border-radius: 5px; margin-top: 10px;}
  #header .depth-03 .tlv-04 a{white-space:normal;font-size:17px; font-weight: 400; color: #777; word-break:keep-all;height:auto; padding:3px 0;align-items:flex-start;animation-delay:0s !important;}
  #header .depth-03 .tlv-04 a:before{margin-top:8px; margin-right: 8px;}
  #header .tlv-02.active a span:before{left:-15px;right:auto;width:130px;bottom:-6px;top:-6px;height:auto;border-radius:5px;background:linear-gradient(135deg, #00a886 0%,#019ea8 100%);}
  #header .depth-02.icon-bx{display:none;flex-wrap:wrap;}
  #header .depth-02.icon-bx > li{margin-bottom:20px;flex: 1 50%;margin-right:0;max-width: 50%;padding:0 5px;}
  #header .depth-02.icon-bx > li:nth-child(5n){margin-right: 0;}
  #header .depth-02.icon-bx > li:nth-child(2n){margin-right:0;}
  #header .depth-02.icon-bx .tlv-03 a{border:0;flex-direction:column;padding:0;height:auto;border:0 !important;font-size:15px;}
  #header .depth-02.icon-bx .tlv-03 a em{display:flex;margin:0 auto 10px;width:60px;height:60px;border-radius:10px;}
  #header .depth-02.icon-bx .tlv-03 a em img{transform:scale(.6);}
  #header .depth-02.icon-bx > li .tlv-03.active a em{background:linear-gradient(135deg, #01ba96 0%,#009ea6 100%);box-shadow:2px 2px 3px 1px rgba(0,0,0,.15);}
  #header .depth-02.icon-bx > li .tlv-03.active  a em img{filter:invert(1) brightness(2);}
  #header .tlv-02.active + .depth-02{display:block !important;}
  #header .tlv-02.active + .depth-02.icon-bx{display:flex !important;}
  #header .top-bx > div form{display: none;}
}

@media (max-width:716px) {
  #header{height: 95px;}
  #header .inner{height: 28px;}
  #header .header_top{background: #fff; width: 100%;}
  #header .header_top .page_btn{padding: 5px 0 0;}
  #header .header_top .page_btn a{font-size: 12px; padding: 0 10px;}
  #header.fixed .inner{height: 28px;}
  #header.fixed{height: 79px;}
  #header.fixed nav{top: 60px;}
  #header h1 a, #header h1 img{height: 35px; top: 3px;}
  #header nav{top: 80px;}
  #header.fixed h1 a, #header.fixed h1 img{height: 30px; top: -1px;}
  #header.fixed .btn-bx{top: 1px;}
  #header .top-bx{top: -3px;}
  #header .btn-bx .sitemap img,
  #header .btn-bx .language img{height: 22px;}
  #header .btn-bx .lang-view{top: 32px;}
  #header .btn-bx{position: relative; top: 8px;}
  #header.fixed .btn-bx .sitemap img,
  #header.fixed .btn-bx .language img{height: 18px;}
  #header .lang-bx .ibtn img{width:22px;margin-right:4px;margin-top:-1px;}
}  

@media (max-width:500px) {
  #header .depth-02.icon-bx > li{flex: 1 26%;}
}

@media (max-width:414px) {
  #header .depth-02.icon-bx > li{flex: 1 50%;}
}

#footer{position:relative; z-index:100; background:#000; padding: 0 0 76px;}
#footer .slick_wrap{background: #003350; color: #fff; height: 83px; display: flex; align-items: center;}
#footer .slick_wrap .slick{padding-left: 260px;}
#footer .slick_wrap .slick a{color: #fff; position: relative; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 40px 0 60px;}
#footer .slick_wrap .slick a::after{content: ''; background: rgba(255,255,255,.4); width: 5px; height: 5px; position: absolute; right: 0; top: 50%;
transform: translateY(-50%); border-radius: 50%;}
#footer .control{position:absolute; left:20px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; z-index:10; height:60px;}
#footer .control button{display: block; height:40px; width:40px;  background: url(/page/portal2024/images/main/css_sprites.png) no-repeat -487px -371px /586px 500px; font-size:0; color:transparent;}
#footer .control button.play{ background: url(/page/portal2024/images/main/footerplay_on.png) no-repeat; background-size: cover; width: 40px; height: 40px; display:none;}
#footer .control .prev.active{background-position: -437px -386px;}
#footer .control .next.active{background-position: -440px -453px;}
#footer .control button.pause{background-position:-541px -55px;}
#footer .control button.next{background-position:-390px -453px; margin: 0 8px;}
#footer .control a:active{transform:scale(.9);}
#footer .family_wrap{background: #fff; height: 71px;}
#footer .family-bx{display:flex; height: 71px;}
#footer .family-bx .item{flex:1;position:relative;}
#footer .family-bx .item:nth-child(1)::before{content: ''; background: #d5d5d5; width: 1px; height: 22px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#footer .family-bx .item::after{content: ''; background: #d5d5d5; width: 1px; height: 22px; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
#footer .family-bx .item button{display:flex;align-items:center;justify-content:space-between;width:100%; padding: 0 30px; color:#201e28; font-size:16px; font-weight:400; height: 71px;}
#footer .family-bx .item button::after{content: ''; background: url(/page/portal2024/images/main/css_sprites.png)no-repeat -541px -480px/586px 500px; width: 11px; height: 7px; 
position: absolute; right: 30px; top: 50%; transform: translateY(-50%); transition: all .3s;}
#footer .family-bx .item button.active::after{transform: rotate(-180deg);}
#footer .family-bx .item button img{width:11px;display:block;transition:all .2s;}
#footer .family-bx .item button.active img{transform:rotate(180deg);}
#footer .family-bx .item .view-bx{position:absolute; display: none; bottom:71px;left:0;right:0;background:#fff;border:1px solid #d4d4d4;background:#f1f1f1;padding:8px 0; z-index: 10;}
#footer .family-bx .item .view-bx a{display:flex;align-items:center;padding:3px 10px 3px 25px;font-size:14px;}
#footer .family-bx .item .view-bx a[target="_blank"]::after{content: ''; background: url(/page/common/images/ico-newwindow.png)no-repeat; width: 12px; height: 12px; display: block; margin-left: 5px;}
#footer .info-bx{position: relative;}
#footer .info-bx .personal-bx{display: block; padding: 40px 0 34px;}
#footer .info-bx .personal-bx .info_private{color:#ffff00;}
#footer .info-bx .personal-bx a{color: #fff; position: relative; font-size: 16px; font-weight: 400; display: inline-block; padding: 0 18px;}
#footer .info-bx .personal-bx a::after{content: ''; width: 1px; height: 16px; position: absolute; right: -2px; top: 5px; background: #fff;}
#footer .info-bx .personal-bx a:first-child{padding-left: 0;}
#footer .info-bx .personal-bx a:last-child::after{display: none;}
#footer .info-bx .personal-bx a:hover{color: #e8c0ff;}
#footer .info_wrap{display: flex; justify-content: space-between; align-items: center;}
#footer .info-bx .address strong{color: #bbb; font-weight: 300;  font-size: 16px; line-height: 1.9;}
#footer .info-bx .address strong + strong{padding-left: 34px;}
#footer .info-bx .address .copy{display: block; color: #bbb; padding-top: 3px; font-weight: 300;  font-size: 16px; line-height: 1.9;}
#footer .info-bx .logo_bx{display: flex; align-items: center;}
#footer .info-bx .logo_bx a img{display:block; height:36px; image-rendering: -webkit-optimize-contrast;}
#footer .info-bx .logo_bx a + a{margin-left: 28px;}
#footer .info-bx .logo_bx a img.v2{height: 48px;}
#footer .info-bx .logo_bx a > div{display: flex; align-items: center; padding: 1px; background: #fff;}
#footer .info-bx .logo_bx a > div span{padding: 5px; font-size: 13px; color: #fff; width: 63px; height: 48px; line-height: 1.6; background: #000; text-align: center;}
#btn-top{position:fixed; bottom: 30px !important; opacity: 0; border-radius: 50%; box-shadow: 1px 1px 8px rgba(0,0,0,.2);  left:50%;margin-left:807px; margin-top: 30px; display:block; background: url(/page/portal2024/images/main/top.png) no-repeat 50% 50%; background-size: cover; width: 61px; height: 61px;
transition: all .2s; font-size: 0; z-index:1001; image-rendering: -webkit-optimize-contrast;}
#btn-top.active{opacity:1;}

@media (max-width:1699px) {
  #footer{padding: 0 0 100px;}
  #footer .family_wrap .inner{padding: 0;}
  #btn-top{position:fixed;left:auto;margin-left:0;right:20px;bottom:20px!important;top:auto !important;}
  #footer .info-bx .address strong{font-size: 15px;}
  #footer .info-bx .address strong + strong{padding-left: 20px;}
  #footer .family-bx .item:nth-child(1)::before{display: none;}
  #footer .family-bx .item:last-child::after{display: none;}
}
@media (max-width:1024px){
  #footer .slick_wrap .slick{padding-left: 159px;}
}
@media (max-width:991px) {
  #footer{padding: 0 0 145px;}
  #footer .info_wrap{flex-direction: column;}
  #footer .info-bx .logo_bx{margin-top: 15px;}
  #footer .slick_wrap .slick{padding-left: 152px;}
  #footer .family-bx .item button{padding: 0 15px;}
  #footer .family-bx .item button::after{right: 15px;}
}

@media (max-width:768px) {
  #footer .info-bx .personal-bx a{padding: 0 15px;}
}

@media (max-width:760px) {
  #btn-top{right:15px;bottom:6px !important;width:35px;height:35px;}  
  #footer .info-bx .personal-bx{text-align: center;}
  #footer .info-bx .personal-bx a{font-size: 14px; padding: 0 11px;}
  #footer .info-bx .personal-bx a:nth-child(2)::after{display: none;}
  #footer .info-bx .personal-bx a::after{top: 2px;}
  #footer .info-bx .address{text-align: center;}
  #footer .info-bx .address .copy,
  #footer .info-bx .address strong{font-size: 13px;}
  #footer .info-bx .address p{font-size: 12px;}
  #footer .info-bx .address strong{display: block;}
  #footer .info-bx .address strong + strong {padding-left: 0;}
  #footer .info-bx .logo_bx a img{height: 30px;}
  #footer .info-bx .logo_bx a img.v2{height: 40px;}
  #footer .info-bx .logo_bx a + a{margin-left: 10px;}

  #footer .family-bx{justify-content: flex-start;}
  #footer .family_wrap,
  #footer .family-bx .item button{height: 100%;}
  #footer .family-bx .item button{width: 195px; font-size: 15px; outline: 1px solid #e5e5e5; padding: 15px 15px; outline-offset: -5px;}
  #footer .family-bx{flex-wrap: wrap;height: 100%;}
  #footer .family-bx .item{flex: none;}
  #footer .family-bx .item::after{display: none;}
  #footer .family-bx .item .view-bx{bottom: 46px; margin: 0 4px;}
  #footer .slick_wrap .slick a{padding: 0 40px 0 30px; font-size: 14px;}
  #footer .family-bx .item .view-bx a{padding: 3px 10px; font-size: 12px;}
}

@media (max-width:500px) {
  #footer .info-bx .personal-bx a:nth-child(2)::after{display: block;}
  #footer .info-bx .personal-bx a:nth-child(3)::after{display: none;}
  #footer .family-bx .item button{width: 241px;}
}

@media (max-width:414px) {
  #footer .info-bx .personal-bx a:nth-child(2)::after{display: none;}
  #footer .info-bx .personal-bx a:nth-child(3)::after{display: block;}
  #footer .family-bx .item button{width: 206px;}
}

@media (max-width:390px) {
  #footer .family-bx .item button{width: 195px;}
}

@media (max-width:375px) {
  #footer .family-bx .item button{width: 187px;}
}

@media (max-width:360px) {
  #footer .family-bx .item button{width: 180px;}
  #footer .info-bx .personal-bx a{padding: 0 7px;}
}

@keyframes gnb1{ 
  0%{opacity:0;transform:translateY(-100%);}
  100%{opacity:1;transform:translateY(0%);} 
}
@keyframes gnb3{ 
  0%{opacity:0;transform:translateY(-30%);}
  100%{opacity:1;transform:translateY(0%);} 
}

@keyframes gnb2{ 
  0%{opacity:0;transform:rotateY(90deg);}
  100%{opacity:1;transform:rotateY(0deg);} 
}

@keyframes view1{ 
  0%{opacity:.5;transform:translateY(70px);}
  100%{opacity:1;transform:translateY(0%);} 
}

@keyframes view2{ 
  0%{opacity:.5;transform:translateY(50px);}
  100%{opacity:1;transform:translateY(0%);} 
}

#day{position: absolute; top: 239px; right: 0; width: 99px; z-index: 100; height: 113px; transition: all .1s; display: flex;  justify-content: center; border-radius: 60px 0 0 60px; background: #e5e5e5;}
#day::before{content: ''; background: url(/page/portal2024/images/main/css_sprites.png)no-repeat -5px -201px; background-size: 586px 500px;
width: 108px; height: 102px; position: absolute; left: -59px; top: 50%; z-index: 1; transform: translateY(-50%);}
#day.active{width: 246px;}
#day .d-day_txt{display: none; text-align: center; padding-right: 18px;  padding-top: 13px;}
#day .d-day_txt.active{display: block;}
#day .d-day_txt span{font-size: 15px; font-weight: 700; color: #1f7ebc; text-align: center; display: block;} 
#day .d-day_txt strong{font-size: 32px; color: #ff8a00;}
#day button{width: 65px; height: 123px; font-size: 0; background: #1e1d1e; border-radius: 100px 0 0 100px; position: absolute; right: 0; top: -4px;}
#day button::after{content: ''; background: url(/page/portal2024/images/main/css_sprites.png)no-repeat -541px -448px; width: 14px; height: 22px; background-size: 586px 500px;
position: absolute; left: 30px; top: 50%; transform: translateY(-50%);}
#day button.active::after{background-position-y: -418px; width: 20px; height: 20px;}
#side-menu{position:absolute; z-index:150; right:50px; top:calc(50vh - 175px); box-shadow: 1px 1px 15px 0 rgba(0,0,0,.15); text-align: center; padding:27px 0 8px; width:125px; background: #fff; border: 1px solid #9847ad; border-radius:100px 100px 20px 20px; transition:all .4s ease-out;}
#side-menu::after{content: ''; background: url(/page/portal2024/images/main/css_sprites.png)no-repeat -123px -201px; background-size: 586px 500px; width: 85px; height: 67px;
position: absolute; top: -42px; left: 50%; transform: translate(-50%);}
#side-menu strong{font-size: 17px; color: #9847ad; display: block; padding-bottom: 7px;}
#side-menu em{font-weight: 400;}
#side-menu a{display:flex; position: relative; padding: 56px 0 12px; flex-direction: column; border: 1px solid #e7e7e7; border-width: 1px 0; height:84px; color:#333; justify-content:center; align-items:center; font-weight:500; font-size:14px; text-align:center; line-height:1.4; word-break:keep-all;}
#side-menu a::after{content:'';  position: absolute; top: 16px; left: 50%; transform: translate(-50%);}
#side-menu a:nth-child(2)::after{background: url(/page/portal2024/images/main/quick1.png)no-repeat; background-size: cover;  width: 34px; height: 30px;}
#side-menu a:nth-child(3)::after{background: url(/page/portal2024/images/main/quick2.png)no-repeat; background-size: cover;  width: 33px; height: 30px;}
#side-menu a:nth-child(4)::after{background: url(/page/portal2024/images/main/quick3.png)no-repeat; background-size: cover;  width: 30px; height: 30px;}
#side-menu a:nth-child(5)::after{background: url(/page/portal2024/images/main/quick4.png)no-repeat; background-size: cover;  width: 31px; height: 31px;}
#side-menu a:nth-child(6)::after{background: url(/page/portal2024/images/main/quick6.png)no-repeat; background-size: cover;  width: 40px; height: 31px;}
#side-menu a:last-child::after{background: url(/page/portal2024/images/main/quick7.png)no-repeat; background-size: cover;  width: 27px; height: 38px;}
#side-menu a:hover:nth-child(2)::after{background-image: url(/page/portal2024/images/main/quick1_on.png);}
#side-menu a:hover:nth-child(3)::after{background-image: url(/page/portal2024/images/main/quick2_on.png);}
#side-menu a:hover:nth-child(4)::after{background-image: url(/page/portal2024/images/main/quick3_on.png);}
#side-menu a:hover:nth-child(5)::after{background-image: url(/page/portal2024/images/main/quick4_on.png);}
#side-menu a:hover:nth-child(6)::after{background-image: url(/page/portal2024/images/main/quick6_on.png);}
#side-menu a:hover:last-child::after{background-image: url(/page/portal2024/images/main/quick7_on.png);}
#side-menu a:last-child{border-width: 1px 0 0 0; padding-bottom: 0;}
#side-menu a img{height: 30px;}
#side-menu a + a{border-top:1px dashed #fff}

.translated-ltr #side-menu a{flex-direction:column;font-size:14px}
.translated-ltr #side-menu a br{display:none;}

@media (max-width:1649px) {
  #btn-top{width:44px;height:44px;right:5px !important;bottom:5px !important;top:auto !important;position:fixed;}
  #side-menu{position:fixed;right:50px;top:auto !important;left:0;bottom:-123px;padding:5px;border-radius:0 20px 20px 0;display:flex;width:calc(100% - 60px);}
  #side-menu.active{bottom:0}
  #side-menu strong{padding: 20px;}
  #side-menu a{display:flex;height:40px;font-weight:400;font-size:14px;flex:1;  border-width: 0 1px;}
  #side-menu a:nth-child(3){border-width: 0;}
  #side-menu a:last-child{border-right: 0;}
  .translated-ltr #side-menu a{font-size:12px}

  .pageTab >li{border-width: 1px 1px 1px 0;}

  #side-menu a img{width: 50px;margin-bottom: 0px;}
}
@media (max-width:991px) {
  .pageTab >li:nth-child(3n+1){border-right: none;}
  .pageTab >li:last-child{border-right: 1px solid #dfdfdf;}
}
@media (max-width:716px){
  #day{display: none;}
  #side-menu{padding: 0; width: calc(100% - 28px);}
  #side-menu::after{/* width: 42.5px; height: 33.5px; background-size: 293px 250px;
  background-position: -61.5px -100.5px;  */top: -49px;}
  #side-menu a{height: 100%; padding: 56px 2px 12px;}
  #side-menu a:last-child{border-width: 0;}
  #side-menu a span{font-size: 13px;}
  #side-menu strong{font-size: 14px; line-height: 1.1; display: flex;flex-direction: column; padding: 5px; align-items: center; justify-content: center;}
}