@charset "utf-8";

/*-----------------------------------------------------------
Author :GH, Park
Creative date :2021. 06. 17
-----------------------------------------------------------*/

/* intro : */
#wrap{position:relative;min-height:100vh;font-family: 'SCDream';margin: 0 auto;padding-top: 1.5rem;}
/* 애니메이션 효과 제거 */
/* #wrap:before{position:absolute; bottom:0; right:0; width:0; height:0; border-top:5000px solid transparent; border-right:5000px solid rgba(0,0,0,.4); opacity:0; content:""; -webkit-transition:opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1), border-top 1000ms cubic-bezier(0.77, 0, 0.175, 1), border-right 1000ms cubic-bezier(0.77, 0, 0.175, 1); transition:opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1), border-top 1000ms cubic-bezier(0.77, 0, 0.175, 1), border-right 1000ms cubic-bezier(0.77, 0, 0.175, 1); } */
/* #wrap:after{position:absolute; top:0; left:0; width:0; height:0; border-bottom:5000px solid transparent; border-left:5000px solid rgba(0,0,0,.4); opacity:1; content:""; -webkit-transition:opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1), border-bottom 1000ms cubic-bezier(0.77, 0, 0.175, 1), border-left 1000ms cubic-bezier(0.77, 0, 0.175, 1); transition:opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1), border-bottom 1000ms cubic-bezier(0.77, 0, 0.175, 1), border-left 1000ms cubic-bezier(0.77, 0, 0.175, 1); } */
/* body.start #wrap:before{border-top:500px solid transparent; border-right:500px solid rgba(0,0,0,.4); opacity:1; }
body.start #wrap:after{border-bottom:0 solid transparent; border-left:0 solid rgba(0,0,0,.4); } */

/* intro : header */
#header{display: flex;position:relative;width: 100%;max-width: 1400px;height: 5rem;align-items: center;justify-content: space-between;border-radius: 0.75rem;background: #f0fafb;padding: 0 2.1rem 0 1.75rem;margin: 0 auto;opacity: 0;visibility:hidden;-webkit-transition:opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1), visibility 1000ms cubic-bezier(0.77, 0, 0.175, 1), margin-top 1000ms cubic-bezier(0.77, 0, 0.175, 1);transition:opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1), visibility 1000ms cubic-bezier(0.77, 0, 0.175, 1), margin-top 1000ms cubic-bezier(0.77, 0, 0.175, 1);-webkit-transition-delay:.5s;transition-delay:.5s;}
#header .logo{display: inline-block;}
#header .logo a,
#header .logo a img{display:block; max-width:100%; }
#header .util_lst{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem;}
#header .util_lst > li > a{position: relative;display: flex;gap: 0.5rem;width: 100%;height: 2.25rem;padding: 0 3.5rem 0 0.4rem;background: #42aab4;color:#fff;border-radius: 1.125rem;align-items: center; transition:.2s all; -webkit-transtion:.2s all}
#header .util_lst > li > a:before{position: absolute;top: 50%;right: 1rem;transform: translateY(-50%);content:"\e93f";font-family:'xeicon'}
#header .util_lst > li > a .ico {display:flex;width: 1.65rem;height: 1.65rem;justify-content:center;align-items:center;background:#fff;border-radius: 50%;}
#header .util_lst > li > a .ico img {max-width:100%;}
#header .util_lst > li > a.until_btn2{background: #44aad5;}
#header .util_lst > li > a > em{font-family:"SCDream";font-size: 0.8rem;font-weight: 500;line-height:1.3;}
#header .util_lst > li > a > em img{display:block; position:absolute; top:0; left:0; padding-top:15px; -webkit-transition:left .3s; transition:left .3s; }
#header .util_lst > li > a:hover > em img,
#header .util_lst > li > a:focus > em img{left:-.25rem; }

/*active*/
#header .util_lst > li > a:hover,#header .util_lst > li > a:focus {background: #22a6b3;}
#header .util_lst > li > a.until_btn2:hover,#header .util_lst > li > a.until_btn2:focus {background: #2299cb;}


/* intro : layout */
#container{width:1400px; max-width:96%; margin:auto; z-index:1; opacity:0; visibility:hidden; margin-top:3rem ;-webkit-transition:opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1), visibility 1000ms cubic-bezier(0.77, 0, 0.175, 1), margin-top 1000ms cubic-bezier(0.77, 0, 0.175, 1); transition:opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1), visibility 1000ms cubic-bezier(0.77, 0, 0.175, 1), margin-top 1000ms cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-delay:.5s; transition-delay:.5s; }
body.start #header {opacity:1;visibility:visible;margin: 0 auto;}
body.start #container{opacity:1; visibility:visible; margin-top:0; }

/* intro : footer */
#footer{position:relative; z-index:1; width:1400px; max-width:90%; margin:auto; padding:2rem 0; }
#footer .copyright{color:#fff; text-align:center; font-family:"SCDream"; font-size:.85rem; font-weight:300; }

/* intro : contents */
.main_visual{position:relative;margin-top: 2.5rem;}

.m_visual_top{position:relative;width: 100%;text-align:center;}

.m_visual_top > h3{font-size: 1.9rem;color:#091f46;font-weight:400;}
.m_visual_top > h3 > strong{font-weight: 900;color: #102f66;}
.m_visual_top > ul.date{display:inline-block;margin-top: 1rem;width: auto;margin-bottom: 2rem;}
.m_visual_top > ul.date > li{position:relative;padding-left:.75rem;color:#333;font-size:.9rem;text-align:left;width:80%;white-space: nowrap;}
.m_visual_top > ul.date > li span {font-weight:700;}
.m_visual_top > ul.date > li + li {margin-top:.25rem; }
.m_visual_top > ul.date > li:before{position:absolute;top: 18px;left:0;width:5px;height:5px;background: #127fff;border-radius:5px;content:"";}
.m_visual_top > ul.date > li > strong {font-size: 1.15rem;}
.m_visual_top > ul.date > li > em{ font-size:.8rem; font-weight:600; color:#e33d65; }
.m_visual_top > ul.date:after {content:"";position: absolute;background: url(../images/intro/ch_01.png) no-repeat;width: 8.95rem;height: 8.5rem;top: 0;left: 9.15%;-webkit-animation-name:float1;animation-name:float1;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-delay:.5s;animation-delay:.5s;background-size: contain;}
.m_visual_top > ul.date:before {content:"";position: absolute;background: url(../images/intro/ck_02.png) no-repeat;width: 7.8rem;height: 9.35rem;bottom: -1.5rem;right: 10%;z-index: 1;-webkit-animation-name:float;animation-name:float2;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-delay:.5s;animation-delay:.5s;background-size: contain;}
.m_visual_bottom{display: flex;position:relative;width: 100%;flex-wrap: wrap;gap: 1.5rem 2rem;}
.m_visual_bottom .contWrap {width: calc(50% - 1rem);border-radius: 1rem;overflow: hidden;box-shadow: 0 0 10px rgb(34 73 157 / 15%);border: 3px solid #fff;background: #fff;}
.m_visual_bottom .contWrap .titWrap{display: flex;height: 3.25rem;justify-content: center;align-items: center;font-size: 1rem;font-weight: 700;}
.m_visual_bottom .contWrap:nth-of-type(1) .titWrap{background: #b1e2ff;}
.m_visual_bottom .contWrap:nth-of-type(2) .titWrap{background: #b1e2ff;}
.m_visual_bottom .contWrap:nth-of-type(3) .titWrap{background: #b1e2ff;}
.m_visual_bottom .contWrap:nth-of-type(4) .titWrap{background: #dbdbfc;}
.m_visual_bottom .contWrap .txtWrap{padding: 1.5rem 2rem;}

@-webkit-keyframes float1{
  to{
    top:0rem;
  } from{
    top:0.5rem;
  }
}
@keyframes float1 {
  to{
    top:0rem;
  } from{
    top:0.5rem;
  }
}
@-webkit-keyframes float2{
  to{
    bottom:-1.5rem;
  } from{
    bottom:-1rem;
  }
}
@keyframes float2 {
  to{
    bottom:-1.5rem;
  } from{
    bottom:-1rem;
  }
}

/* 블릿 */
.list_st1 > li, .list_st2 > li, .list_st3 > li{position:relative;padding-left: 0.75rem;color: #242424;font-size:.8rem;line-height: 1.35rem;letter-spacing: -1px;}
.list_st1 > li + li {margin-top:1rem;}
.list_st1 > li > span, .list_st2 > li > span, .list_st3 > li > span{color:#127fff; font-weight:700;}
.list_st1 > li > strong, .list_st2 > li > strong, .list_st3 > li > strog{font-weight:700;}

.list_st1 > li:before{content:'';position:absolute;top:9px;left:0;width:6px;height:6px;border-radius:50%;background: #127fff;}
.list_st2 > li:before{content:''; position:absolute; top:0.6rem; left:0; width:6px; height:2px; background:#888; }
.list_st3 > li:before{content:''; position:absolute; top:0.6rem; left:0; width:3px; height:3px; background:#9a9a9a; }
.list_st4 > li:before{content:''; position:absolute; top:0.6rem; left:0; width:6px; height:1px; background:#9a9a9a; }


/* 리스트 :블릿 타입 */
.list_st2 > li{font-size:.8rem; }
.list_st3 > li{font-size:.75rem; color:#666; }
.list_st4 > li{font-size:.75rem; color:#666; }


.con_wrap {overflow:hidden;}
/* 바로가기1 */
.m_link1{display: flex;align-items: center;gap: 1rem;justify-content: center;flex-wrap: wrap;}
.m_link1 > li > a{position: relative;display: flex;gap: 0.5rem;min-width: 15rem;width: 100%;height: 2.75rem;padding: 0 1.5rem;background: #fff;border: 1px solid #127fff;border-radius: 1.375rem;align-items: center;justify-content: space-between; box-shadow: 0 0 10px rgb(34 73 157 / 10%);}
.m_link1 > li > a span {color:#363636; font-weight:500;}
.m_link1 > li > a i {color:#127fff;}
.m_link1 > li > a .ico {display:flex;width: 1.65rem;height: 1.65rem;justify-content:center;align-items:center;background:#fff;border-radius: 50%;}
.m_link1 > li > a .ico img {max-width:100%;}

/*active*/
.m_link1 > li > a {transition:0.2s all; webkit-transition:0.2s all; }
.m_link1 > li > a:hover,.m_link1 > li > a:focus {background:#127fff;}
.m_link1 > li > a:hover span,.m_link1 > li > a:focus span{color:#fff;}
.m_link1 > li > a:hover i,.m_link1 > li > a:focus i{color:#fff;}
/* 바로가기2  */
.m_link2{display: flex;align-items: center;gap: 0.65rem;justify-content: center;}
.m_link2 > li {width:auto;}
.m_link2 > li > a{position: relative;display: flex;gap: 0.5rem;min-width: 11.5rem;width: 100%;height: 2.75rem;padding: 0 1rem;background: #fff;border: 1px solid #6ecbf9;border-radius: 0.5rem;align-items: center;justify-content: space-between;}
.m_link2 > li > a span {color: #292929;font-weight:500;letter-spacing: -1px;}
.m_link2 > li > a i {color: #999999;}
.m_link2 > li > a .ico {display:flex;width: 1.65rem;height: 1.65rem;justify-content:center;align-items:center;background:#fff;border-radius: 50%;}
.m_link2 > li > a .ico img {max-width:100%;}
/*active*/
.m_link2 > li > a {transition:0.2s all; webkit-transition:0.2s all; }
.m_link2 > li > a:hover,.m_link1 > li > a:focus {background:#6ecbf9;}
.m_link2 > li > a:hover span,.m_link1 > li > a:focus span{color:#fff; font-weight:700;}
.m_link2 > li > a:hover i,.m_link1 > li > a:focus i{color:#fff;}


.conBox02 {position: relative;margin-top: 2.5rem;}
.conBox02:before {position: absolute;content:"";background:#def4ff;width: calc(100% + 10rem);height: calc(100% + 8rem);top: -3.9rem;left: 50%;transform: translate(-50%, 0);z-index: -1;border-radius: 2.5rem 2.5rem 0 0;}
.footer {display:flex;align-items:center;gap:1.5rem;margin-top: 1.8rem;}
.footer .copyright {font-size:0.7rem;font-weight:400;color:#292929;letter-spacing: -1px;}





/******** responsive ********/
@media (max-width:1600px){
.conBox02:before {width:100vw;}
}
@media (max-width:1440px){

.footer {justify-content:center; flex-wrap:wrap;}
.footer .copyright {width:100%;text-align:center;order: 2;}
.m_link2 {flex-wrap:wrap;width:100%;order: 1;}
  .m_link2 > li {flex:1;}
  .m_link2 > li > a {min-width:auto;}
}
@media (max-width:1240px){
.m_visual_top > ul.date:after {
    width: 6rem;
    height: 6.5rem;
    left: 1rem;
}
.m_visual_top > ul.date:before {
    width: 6rem;
    height: 7rem;
    right: 1rem;
}

}
@media (max-width:1024px){
  .main_visual {margin-top:1.5rem;}
.m_visual_top > h3 {font-size:1.5rem;word-break: auto-phrase;}
.m_visual_top > ul.date {margin-top:1rem;margin-bottom: 1.5rem;}
  .m_visual_top > ul.date > li{width: 100%;font-size: .8rem;white-space:wrap;}
  .m_visual_top > ul.date > li strong{font-size: 0.9rem;}
.m_visual_bottom {gap:1rem;}
  .m_visual_bottom .contWrap {width:100%;}


}

@media (max-width:860px){
.m_visual_top > ul.date:after {display:none;}
.m_visual_top > ul.date:before {display:none;}
}

@media (max-width:768px){
#header {width: 95%;justify-content: center;gap: 1rem;height: auto;flex-wrap:wrap;padding: 1rem;}
.m_link1 > li > a{min-width: auto;}
  .m_link2 > li {flex:1 0 45%;}
    #header .util_lst {width: 100%;justify-content:center; padding:0 1rem;}
  #header .util_lst li{max-width: 15rem;width: 100%;}
#header .util_lst > li > a {padding:0 0.4rem;}





}
@media (max-width:480px){
  .m_link1 > li {width:100%;}
  .m_link2 > li {flex:1 0 100%;}
  
}