/* common */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, div, span, dl, dt, dd, p, span, img {padding: 0; margin: 0;}
html > * {line-height: 1.3; letter-spacing: -.4px;}
.txtBlue02 {color: #0C58CA;}
.block {display: block;}
.tc {text-align: center;}
.equal-list {display: flex;}
.main .title {font-size: 2.75rem; color: #101010; font-weight: 700;}
.main .title p,.main .title .p {font-size: 1.75rem; color:#555; font-weight: 400;}
.main .title.v2 {font-size: 3rem;}
.main .title.v3 {font-size: 2.5rem;}
.main .txt {font-size: 24px; color:#777; word-break: keep-all;}
.main .title.v2 + .txt {margin: 2rem auto 0;}
.main .s_title {font-size: 2rem; font-weight: 700; color:#101010;}
.main .s_title.v2 {font-size: 1.5rem;}

/* 접근성 */
/* a:focus, button:focus {    outline: 2px #f00 solid !important;} */
.scroll-on  .container > * , .scroll-on-small {transition: all .5s; opacity: 1; transform: translate(0,100px);}
.scroll-on.active .container > *, .scroll-on-small.active {transform: translate(0, 0px);}

/* 클래스중복으로 변경해야하는 것 */
.inner-box { padding: 0; background: none; border-radius: 0;}
.layer_area.active:not(.alert).popup_login_start .layer_header .tit_comm { font-size: 24px;  line-height: inherit; font-weight: 700;}
.layer_area.active:not(.alert).popup_login_start .layer_header {height: auto; line-height: inherit; border-bottom:0 none;}
/* .layer_wrapper .popup_login_start.layer_area.active {position: absolute;} */

#wrap {overflow: hidden;}

/* pc */
@media screen and (min-width: 1400px){
    .container {max-width:1280px; padding-right: 15px; padding-left:15px;}
    #notice.container {padding-left: 0; padding-right: 0px; }
}

/* mainvisual -------------------*/
.main #mainvisual {position: relative; z-index: 0;}
.main #mainvisual::before {content: ''; display: block; position: absolute; top:0; left:0; width:100%; height:600px; background: linear-gradient(#EDF0FF 26%, #b9E8FC);}
.main #mainvisual .container {position: relative;}
.main #mainvisual .title {padding-top: 110px;}
.main #mainvisual .title p,.main #mainvisual .title .p { margin-bottom: 20px; }
.main #mainvisual .s_title + .txt {margin-top: 24px; line-height: 1.5;}
.main #mainvisual .btn img {width:48px; margin-right: 4px;}
.main #mainvisual .w560 {width:615px !important;}
.main .badge {width:48px; height:48px; display: block; padding:0;}
.main #mainvisual .badge + .s_title {margin-top: 20px;}
.inner_wrapper {z-index: 11 !important;}

/* 버튼 */
.main .btn:focus {outline: auto !important;}
.main .btn-wrap {margin-top: 3.5rem; margin-bottom: 2.875rem;}
.main .btn:first-child {margin-left:0;}
.main .btn {background-color: #fff; box-shadow: 0 0 020px rgba(0,0,0,0.05); padding:12px 36px; border-radius: 16px; display: inline-flex; align-items: center; margin-left: 13px; max-height: 72px;}
.main .btn span {font-size:1.25rem; color: #111; font-weight: 600; margin-bottom: 2px;}
.main .btn.start {background-color: #0D56C3; max-width: 472px; width:100%; height:72px; text-align: center; display: inline-block;}
.main .btn.start span {font-size: 1.125rem; color: #fff; font-weight: 700; }
.main .btn-wrap .inner-box button .mo {display: block;}
.main .btn-wrap .inner-box button .pc{display: none;}
.text-wrap.isMargin {margin-top: 298px;}

/* 로그인/로그아웃 영역 */
#mainContents .login {border:1px #0C58CA solid; width:472px; height:373px; box-sizing: border-box; border-radius: 16px; background: #fff; text-align: center;}
#mainContents .login {display: none;}
#mainContents .logout {display: block;}
#mainContents.on .login {display: block;}
#mainContents.on .logout {display: none;}

.main.on #mainvisual::before {height:871px;}


.login .inner-padding {padding:32px 40px;}
.main #mainvisual .s_title.v2 + .txt {margin: 8px 0 24px; color: #555; font-size: 1.125rem;}
.txtBlue03 {color: #0076c9 !important;}

.counts-wrap .shadow-box {box-shadow: none;  padding: 32px 75px;  border-radius: 16px;  background: #f4f7fd; margin-bottom:1.25rem;}
.counts-wrap .btn {margin-left: 0;}
.equal-list.service.another {justify-content: space-between;position: relative;}
.equal-list.service.another dl {display: flex;flex-direction: column;width:auto;min-width: 71px;}
.equal-list.service.another dl:first-child::before {content: ''; display: block; position: absolute; bottom:8px; left:50%; width:1px; height:14px; background: rgba(17, 17, 17, 0.2);}
.equal-list.service.another dt {font-size: 1.25rem; color: #333; font-weight: 400; line-height: 1.4; text-align: center;}
.equal-list.service.another dd {align-self: center; margin-top: 8px; display: flex; align-items: flex-end; margin-left: -20px; color:#666; font-size: 1.25rem; position: relative;}
.equal-list.service.another dd .txtBlue03 {font-size: 32px;font-weight: 700;line-height: 28px;position: relative;margin-right: 5px;margin-left: 15px;}
.equal-list.service.another dd .txtBlue03::after {content: ''; width:calc(100% - 0px); height:1px; background: #0076c9; position: absolute; bottom: -5px; left:0px;}
.equal-list.service.another .badge {height: 31px;  position: absolute;  top: -80px;  left: 15px;}
.overtime {margin: 0 auto;}

/* #header {height:138px;} */
/* 로그인 팝업 */
body {position: relative; /*overflow: visible !important;*/}
.layer_wrapper.type1.active {position: absolute; top:0; left:0; right:auto; bottom: auto;}
.layer_wrapper.type1 .active .inner_wrapper {overflow: visible;}
.layer_wrapper.type1 .active .dummy {/*background: transparent;*/ position: absolute;}
.popup_login_start.active {width:472px; height:433px; border:1px #eee solid; box-sizing: border-box; box-shadow: 0 0 20px rgba(0,0,0,0.05); text-align: center; border-radius: 16px; top: 50%; left: 50%;  right: auto;  bottom: auto;  position: absolute;  margin: 0;}
.popup_login_start.active .layer_header {height: auto; line-height: normal; padding:2rem 2rem 0; font-size: 24px; line-height: 1.4; color: #101010; border-radius: 16px 16px 0 0; position: static;}
.popup_login_start.active .layer_header .header {padding-right: 32px;}
.popup_login_start.active .layer_container {height:auto; margin-top: 0; padding:4px 32px 32px; overflow: visible;}
.popup_login_start.active .inner_area {padding:0; border-radius: 16px;}
.popup_login_start.active .layer_footer {border-radius:0 16px 0 0;margin: 0rem;position: absolute; top:32px; right:32px;}
.popup_login_start.active .img_gradient_1x20 {display: none;}
.popup_login_start.active .txt {color: #555;position: relative;z-index: 21;margin: 4px 0 0;}
.popup_login_start.active .txt::after {content: '';display: block;width:142px;height: 169px;background: url(../../images/tot/icon_imgs1.png) no-repeat top 25px center;background-size: contain;margin: -17px auto 0;}
.popup_login_start.active .btn_comm.full {height:64px;}
.popup_login_start.active .btn_comm.white {background-color: #fff; border-color:#0c58ca; color:#0c58ca;}
.popup_login_start.active .btn_comm.white:hover {background-color: #e6f3ff;}
.popup_login_start.active .ico_close_28x28 {background: url(../../images/tot/icon_x.png) no-repeat; width:32px; height:32px; background-size: 32px 32px;}
.popup_login_start.active .layer_container .grp_gravity {margin-top: 0;}
.popup_login_start.active .inner_gravity {padding: 0 1rem 1rem;}
.popup_login_start.active .layer_container .grp_gravity button + button, .popup_login_start.active .layer_container .grp_gravity button + a + button {margin-top: 20px;}

/**************************************************************************************************************
	bootstrap modal [메인에 붙은 모달]
    **************************************************************************************************************/
.modal{text-align: center;padding: 0!important; top: 50% !important; left: 50% !important; margin-left: 0; z-index: 1050; display: none; width: auto !important; height: auto !important; overflow: hidden !important; outline: 0; }
.modal:before {content: '';display: inline-block;height: 100%;vertical-align: middle;margin-right: -4px;}
.modal-dialog {display: inline-block;text-align: left;vertical-align: middle; width:474px !important; min-height:auto !important; margin:0 !important;}
.modal-dialog.autoScroll{overflow-y: scroll;}
.modal-content{ border: 1px #eee solid; box-shadow: 0 0 20px rgba(0,0,0,0.05); box-sizing: border-box; border-radius: 16px;}
.modal-content .modal-header{position: relative; padding: 24px 24px 28px;border-bottom: 0; height: auto; background-color: #fff; border-radius: 16px 16px 0 0; border-bottom: 1px #eee solid;;}
.modal-content .modal-header .modal-title {float: left;font-weight: 400 !important;font-size: 20px !important; line-height: 1;color: #101010;}
.modal-content .modal-header .close {display: block; position: absolute; top: 24px; right: 24px; color: #fff; opacity: 1;text-shadow: none; margin:-20px;}
.modal-content .modal-header .close:focus {outline: solid black;}
.modal-content .modal-header .close img {display: block; width:28px; content: url(../../images/tot/icon_x.png);}
.modal-content .modal-body {max-height: 80vh; padding: 32px 40px; overflow-y: auto;}
.modal-content .modal-body .btn_comm:focus {outline: solid black;}
/* popup_grp_qr
---------- ---------- ---------- ---------- ---------- */
.popup_grp_qr {/* padding: 28px 0 0; */ text-align: center;}
.popup_grp_qr img {margin: 0 auto; width:160px; height:160px;}
.popup_grp_qr .emph_qr{ display: inline-block; font-style: normal; font-size: 24px; line-height: 1.42; color: black; letter-spacing: 0; font-weight: 700;}
.popup_grp_qr .emph_qr.v2 {font-size: 18px; color: #333; font-weight: 400; margin-bottom: 32px;}
.popup_grp_qr .img_qr{ display: block; width: 160px; margin: 20px auto;}
.popup_grp_qr .btn_comm{ width: 393px; padding: 22px 0 29px; border-radius: 16px;}
.popup_grp_qr .btn_comm span{ font-weight: 700; font-size: 24px;}



/* 배너롤링 default */
.ovh {overflow: hidden;}
.defalut-swiper-wrap {background:linear-gradient(#f9f9fa, #f1f5f9 100%); box-sizing: border-box; z-index: 13;}
.defalut-swiper.swiper-container {position: relative; margin: 4px 0 30px 0;}
.defalut-swiper.swiper-container .swiper-slide {width: auto; padding:13px 0; background: #fff;}
.defalut-swiper .swiper-horizontal>.swiper-pagination-bullets,
.defalut-swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.defalut-swiper .swiper-pagination-custom, .swiper-pagination-fraction {bottom:-30px; position: static;}
.defalut-swiper .swiper-pagination-bullet {width:4px; height:4px; background: #bcbcbc; transition: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 4px;}
.defalut-swiper .swiper-pagination-bullet-active {width:10px; background: #0c58ca;}
.defalut-swiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.defalut-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 1.5px;}

/* swiper - index */
.index-swiper.swiper-container .swiper-wrapper {align-items: center;}
.index-swiper.swiper-container .swiper-slide {padding:0; border-radius:24px; background: transparent; position: relative;}
.index-swiper.swiper-container .swiper-slide .link { border-radius: 24px; transform: scale(0.9); padding:0; transition: 1s;}
.index-swiper.swiper-container .swiper-slide-active .link {transform: scale(1);}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:var(--swiper-pagination-bottom,36px);}

/* news  -------------------*/
#news {max-width:1280px; width:100%; height:465px; margin:12.5rem auto 0; box-sizing: border-box;}
#news .row {margin:0;}
#news .news__wrapper {padding: 0;}
#news .swiper .slide-control-box {position: static; margin-top: 40px;}
#news .swiper .carousel-box .swiper-pagination-bullet {background: #eee; opacity: 1; border-radius: 50%;}
#news .swiper .carousel-box[data-color=blue] .carousel-btn .bar {background-color: #eee;}
#news .carousel-box[data-color=blue] .carousel-btn span {background: #eee; opacity: 1; border-radius: 50%;}
/* #news .play-pause-box {display: none !important;} */


/* notice  -------------------*/
#notice {margin-top:11.875rem; padding: 10rem 0; background: #ebf2ff;}
#notice .title {text-align: center;}
#notice .txt {width:505px; text-align: center;}
.icon_way3 {margin-left: 1rem;}
.character1_1 {width:133px; height:148px; position: absolute; top: 12px; left: 51%; transform: rotate(50deg);}
.character1_2 {width:104px; height:150px; position: absolute; top:80%; left:49%;}

/* 캐릭터애니메이션 제어 */
.character-bg.active .character3_1 {animation-fill-mode: forwards; animation-name: move10, move11; animation-delay: 0s, 1.3s; animation-duration: 1.2s, 2s; animation-iteration-count: 1, 1; }
.character-bg.active .character3_2 {animation: move12 .7s linear both;}
.character-bg.active .logo-squere {animation: move16 .5s;}
.character-bg.active .move1 {animation: .5s move1 linear both;}
.character-bg.active .move2 {animation: .8s move2 linear both;}
.character-bg.active .move3 {animation: .8s move2 linear both; }

.wayToUse {display: flex; gap:24px; align-items: center;justify-content: center;}
.wayToUse li {width:100%;}
.wayToUse .equal-list dt {font-weight: 400; font-size: 1.5rem; color:#101010;margin-top: 24px;}
#notice .wayToUse .equal-list {padding:3.75rem 2.5rem; justify-content: center; background: #fff; border-radius: 24px; box-shadow: 0 0 20px rgba(0,0,0,0.05); width:100%; height:346px; align-items: center; flex-direction: column-reverse;}
#notice  .wayToUse li {display: inline-flex;}
#notice .wayToUse .equal-list dd {width:10rem; height:130px;}
.s_title + .wayToUse  {margin-top: 3.75rem;}

/* explain  -------------------*/
#explain {text-align: center; padding-top: 10rem;}
#explain .container {max-width: 1220px; padding: 0 20px;}
#explain .wayToUse {padding-top: 7.5rem; flex-direction: column; gap:0;}
#explain .wayToUse li {width: 100%;}
#explain .wayToUse li:nth-child(n+2):nth-child(-n+4) {margin-top: 11.25rem;}
#explain .wayToUse li:nth-child(2n) dd {background: #fff;}
#explain .wayToUse .equal-list {align-items: center;}
#explain .wayToUse .equal-list dt, #explain .wayToUse .equal-list dd {width:50%; text-align: left; max-height: 400px; margin-top: 0; height: 100%;}
#explain .wayToUse .equal-list dd {background: #f4f7fd; border-radius: 24px;}
#explain .wayToUse .equal-list dd img {width:300px; margin: 50px auto 0;}
#explain .wayToUse .equal-list .tit {font-size: 2.5rem; font-weight: 700; color:#101010;}
#explain .wayToUse .equal-list .txt {margin-top: 2rem; padding-right:2rem; line-height: 1.5;}

#explain .wayToUse li:nth-child(2n) .equal-list {flex-direction: row-reverse;}
#explain .wayToUse li:nth-child(2n) .equal-list dd {margin-right:50px;}
#explain .wayToUse li:nth-child(2n) .equal-list dd img {margin-left:0; margin-top:0; width:437px;}
#explain .wayToUse li:nth-child(2n) .equal-list .txt + .txt {margin-top: 12px; color: #777;}
#explain .wayToUse li:nth-child(1) .equal-list .txt .block {padding-right:6rem;}
#explain .wayToUse li:nth-child(2) .equal-list .txt {color: #0C58CA;}
#explain .wayToUse li:nth-child(4) .equal-list {justify-content: space-between;}
#explain .wayToUse li:nth-child(4) .equal-list dd {width:auto; margin-right:0px;}
#explain .wayToUse li:nth-child(4) .equal-list dd img {width:473px;}

/* bottomVisual  -------------------*/
#bottomVisual {background: linear-gradient(#ebf2ff, #fff); margin-top: 6.25rem;}
.manager_wrap {text-align: center; position: relative;}
.manager_wrap::before {content: ''; display: block; background: url(../../images/tot/logo_bg.png) no-repeat; width:524px; height:344px; background-size: cover; position: absolute; top:130px; left:50%; margin-left:-262px;}
.manager_wrap .img {width:253px; margin:0 auto; display: block; padding-top: 187px; position: relative;}
.manager_wrap.move::before { animation: move18 .5s;}
.manager_wrap.move .img {animation: move17 .4s linear;}
.manager_wrap .txt {margin-top: 72px; font-size: 2rem; color: #555;}

/* 텍스트 관련 */
.mo-block {display: inline;}
#bottomVisual .block {display: block;}


/* pc */
@media screen and (min-width: 992px){
    .main #mainvisual .title {font-size: 2.3rem; line-height: 1.3;}
    .main #mainvisual .title p {font-size: 1.4rem;}

    .main .btn-wrap .inner-box {margin-top: 24px; position: relative;}
    .main .btn-wrap .inner-box button .mo {display: none;}
    .main .btn-wrap .inner-box button .pc{display: block;}
    .main .btn.start span {font-size: 1.5rem;}

    .character-wrap {position: absolute; top:149px; right:8px;}
    .character_phone {position: relative; z-index: 12; width:322px; height:597px; overflow: hidden;}
    .character-bg .logo-squere {position: absolute; top: 147px; left: -65px; width:173px; z-index: 14; display: block;}
    .character-bg .character3_1 {position: absolute; top:-7px; left: -126px; width:150px;z-index: 14; }
    .character-bg .character3_2 {position: absolute; top:316px; right:-55px; width:106px; z-index: 11;}

    .move1 {width:136px; position: absolute; top: -49px; right: 349px;}
    .move2 {width:17px; position: absolute; top: 46%; right: -4%;}
    .move3 {width:6px; position: absolute; top: 50%; right: -11%;}

    .defalut-swiper-wrap {width: 248px; position: absolute; top: 93px; right: 48px;}
    /* .popup_login_start.active {margin-left: -230px;} */

    #news {border:1px #ddd solid; border-radius: 36px; padding:4.5rem 6.5rem 3rem; }
    #news .image-box img {height:297px;}

}

/* pc */
@media screen and (min-width: 1200px){
    .character-wrap {position: absolute; top:100px; right:0;}
    .character_phone {width: 462px; height:904px;}
    .character-bg .logo-squere {top: 205px; left: -121px; width:260px;}
    .character-bg .character3_1 { width:202px; top:0px; left: -200px;}
    .character-bg .character3_2 { width:160px; top:299px; right:-85px;}

    .move1 {width:204px; top: -70px; right: 527px;}
    .move2 {width:26px;  top: 239px;  right: -25px;}
    .move3 {width:10px;  top: 273px;  right: -53px;}

    .defalut-swiper-wrap {margin: 0; width:355px; position: absolute; top:146px; right: 69px;}
    /* .popup_login_start.active {margin-left: -320px;} */

    /* explain */
    #explain .container {max-width:1220px; padding-right: 0; padding-left:0;}
    .main.on .character-bg .character3_2 {top:569px;}
    .main.on .move2 {top: 508px;}
    .main.on .move3 {top: 542px;}
    /* .modal {margin-left: -563px;} */
}

/* pc */
@media screen and (min-width: 1400px){
    /* .popup_login_start.active {margin-left: -392px;} */
    /* .modal {margin-left: -634px;} */
}

/* modile */
@media screen and (max-width: 991px){
    /* 팝업 관련 */
    .layer_wrapper.type1.active {left:0px; right:0px; bottom:0; width:auto; }
    .layer_wrapper.type1.active .inner_wrapper {position: static;}
    .layer_wrapper.type1.active .dummy {z-index: 0 !important; }
    .popup_login_start.active {width:100%; height:285px; left:0; top:50%; bottom:auto; transform: translateY(-50%);}
    .popup_login_start.active .txt::after {display: none;}
    .popup_login_start.active .layer_container {padding-left:13px; padding-right: 13px; padding-bottom: 1rem;}
    .popup_login_start.active .layer_container .grp_gravity {margin-top: 24px;}
    .popup_login_start.active .ico_close_28x28 {width:24px; height:24px; background-size: cover;}
    .popup_login_start.active .layer_footer {top:1.4rem; right:1.4rem;}

    .main .title {text-align: center; font-size: 1.75rem;}
    .main .title p,.main .title .p {font-size: 1.4rem;}
    .main .txt {font-size: 16px; text-align: center; line-height: 1.5}
    .main .title.v2 {font-size: 24px;}
    .main .s_title {font-size: 24px;}
    .s_title + .wayToUse {margin-top: 2.25rem;}
    .wayToUse {gap:16px; flex-wrap: wrap; justify-content: space-between; align-items:center; flex-direction: column;}
    .wayToUse li {width:100%;}
    .wayToUse .equal-list {height:auto;}
    .wayToUse .equal-list dt {font-size: 18px;}

    .main #mainvisual .container {padding-left: 1.25rem; padding-right: 1.25rem;}
    .main #mainvisual::before {content: ''; height:759px;}
    .main #mainvisual .title {padding:64px 2rem 0; line-height: 1.5;}
    .main #mainvisual .title p, .main #mainvisual .title .p{margin-bottom: 10px;}
    .main #mainvisual .w560 {width:auto !important;}
    .main #mainvisual .s_title {font-size: 24px; word-break: break-word;}
    .main #mainvisual .s_title + .txt {margin-top: 20px;}
    .main #mainvisual .s_title.v2 {font-size: 20px;}
    .main #mainvisual .s_title.v2 + .txt {font-size: 16px;}
    .main .badge {margin: 0 auto;}

    /* 로그인 후 */
    #mainContents.on .character-bg .character3_1 {animation: move11 1.2s linear 2;}
    .main.on #mainvisual::before {height:1082px;}


    .main .btn-wrap {margin-top: 1.5rem;display: flex; justify-content: center;flex-wrap: wrap;flex-direction: column; gap:20px; align-items: center; width:100%; }
    .main .btn-wrap .btn {padding:7px 20px; border-radius: 100px; font-size: 1rem; margin-left:0; justify-content: center; /*max-width: 236px;*/ height: 56px; width: 100%; }
    .main .btn-wrap .inner-box {text-align: center;}
    .main #mainvisual .btn img {width:40px;}
    .text-wrap.isMargin {margin-top: 3.75rem; text-align: center;}

    #mainContents .login {width:100%; height:auto;}
    #mainContents .logout {min-width: 236px;}

    /* 버튼 */
    #mainContents.on .btn-wrap {align-items:stretch; width:auto;}
    #mainContents.on .btn-wrap .btn {order: 1; margin: 0 auto;}

    .login .inner-padding {padding-left:22px; padding-right:22px;}
    .main .counts-wrap .btn {border-radius: 16px;}
    .main .btn.start span {font-size: 16px;}

    .counts-wrap .shadow-box {padding:24px 3.75rem;}
    .popup_login_start.active .btn_comm.full {height:56px;}

    .equal-list.service.another dl {min-width: 58px;}
    .equal-list.service.another dt {font-size:  16px;}
    .equal-list.service.another dd {font-size: 14px;}
    .equal-list.service.another dd .txtBlue03 {font-size: 1.5rem; line-height: 1;}
    .equal-list.service.another .badge {width:40px; height:25px; top:-62px; left:17px;}

    /* swiper */
    .defalut-swiper-wrap {top:208px; left: 56px; right: 0;position: absolute;width: 523px; background: linear-gradient(#fafbfb, #f1f5f9 100%);}
    .index-swiper.swiper-container .swiper-slide .link {width:100%;}

    /* 캐릭터 애니메이션 */
    .character-wrap {position: relative; margin-top: 4.9375rem; left: 0.5rem;}
    .character-bg {position: relative; width: 100%; margin: 0 auto; max-width: none; }
    .character-bg::before {content: ''; display: block; position: absolute; top: 3%; left: 13%; width: 11%; height: 3%; background: #f8fafa; }
    .character-bg .character3_2, .character-bg .logo-squere, .move2 , .move3 {display: none;}
    .character3_1 {width: 310px; position: absolute; top: -240px; left: -105px;}
    .move1 {position: absolute; top: -367px; left: -64px; content: url(../../images/tot/img_firework1_mo.png);}


    /* 캐릭터애니메이션 제어 */
    .character-bg.active .character3_1 { animation-fill-mode: forwards; animation-name: move10, move15; animation-delay: 0s, 1.3s;  animation-duration: 1.1s, 3s; animation-iteration-count: 1, 1;}
    .character-bg.active .move1 { animation: .5s move2 linear both;}
    .character-bg.active .character3_2, .character-bg.active .logo-squere,.character-bg.active .move2,.character-bg.active .move3 {display: none;}


    #notice {margin-top:6.25rem; padding-bottom: 5rem; padding-top: 5.1875rem;}
    #notice .container {padding-right: 20px; padding-left:20px;}
    #notice .wayToUse .equal-list {padding:1.25rem 14.75px 2rem; height: 262px;}
    #notice .wayToUse .equal-list dd {width:8.125rem; height: auto;}
    #notice .txt {width:auto; margin-top: 1.25rem; padding-left:2.5rem; padding-right:2.5rem;}

    .icon_way3 {margin-left: .6rem;}
    .character1 .bg {transform: scale(1.4); width: 955px; padding-top: 158px;}

    #news {margin-top:6.25rem; height:auto;}
    #news .row {margin-left: 20px; margin-right: 20px;}

    #explain {padding-top:6.25rem;}
    #explain .wayToUse {padding-top:3.75rem;}
    #explain .wayToUse .equal-list dt, #explain .wayToUse .equal-list dd {text-align: center; width: 100%;}
    #explain .wayToUse .equal-list {flex-direction: column-reverse;}
    #explain .wayToUse .equal-list .tit {font-size: 22px; margin-top: 32px;}
    #explain .wayToUse .equal-list .txt {text-align: center; margin-top: 12px; padding-right: 0;}
    #explain .wayToUse .equal-list .txt .block {padding-right:0;}

    #explain .wayToUse li .equal-list dd {width:100%; padding:50px 40px 0;}
    #explain .wayToUse li .equal-list dd img {width:100%; max-width: 260px; margin:0 auto;}
    #explain .wayToUse li:nth-child(1) .equal-list .txt .block {padding-right: 0;}
    #explain .wayToUse li:nth-child(2n) dd {background: #f4f7fd;}
    #explain .wayToUse li:nth-child(2n) .equal-list {flex-direction: column-reverse;}
    #explain .wayToUse li:nth-child(2n) .equal-list dd { margin-right: 0;}
    #explain .wayToUse li:nth-child(2n) .equal-list dd img {margin-left: auto; margin-right: auto; }
    #explain .wayToUse li:nth-child(2) .equal-list dd { padding: 57px 35px 41px;}
    #explain .wayToUse li:nth-child(2) .equal-list dd img {max-width:437px; width:100%;}
    #explain .wayToUse li:nth-child(n+2):nth-child(-n+4) {margin-top: 7.5rem;}
    #explain .wayToUse li:nth-child(3) .equal-list dd { padding: 50px 35px 0; }
    #explain .wayToUse li:nth-child(3) .equal-list dd img {max-width:260px;margin: 0 auto;}
    #explain .wayToUse li:nth-child(4) .equal-list dd {width:100%;padding: 59px 16px 63px;}
    #explain .wayToUse li:nth-child(4) .equal-list dd img {max-width: 303px; width:100%;}

    #bottomVisual {padding-bottom: 6.25rem;}
    .a123 {margin-bottom: 131px!important;}
   
    .manager_wrap .img {padding-top: 131px; width:8.625rem; }
    .manager_wrap::before {width:100%; height:100%; top:100px; max-width: 17.875rem; max-height: 11.75rem; margin-left: -8.9375rem;}
    .manager_wrap .txt {margin-top: 44px; font-size: 20px;}

    /* 텍스트 관련 */
    .mo-block {display: block;}
    #bottomVisual .block {display: inline;}
}

/* modile */
@media screen and (max-width: 768px){
    .defalut-swiper-wrap {width: 76.7%; left: 8.3%; top: 16%;}
    .character3_1 {width: 270px; top:-226px;}
    .index-swiper.swiper-container .swiper-slide .link {transform: scale(.9);}
    .index-swiper.swiper-container .swiper-slide-active .link {transform: scale(1);}
}

/* modile */
@media screen and (max-width: 578px){
    .character3_1 {position: absolute; width: 144px;  top: -108px;  left: -47px;}
    .move1 {width:90px; top: -168px; left: -27px;}
    .character-bg::before{top: 4%; left: 11%; width: 10%; height: 2%;}

    #notice .wayToUse .equal-list {height:176px; padding: 20px;}
    #notice .wayToUse .equal-list dt {margin-top: 8px;}
    #notice .wayToUse .equal-list dd { width: 100px; height: 100px;}
}

/* modile */
@media screen and (max-width: 370px){
    .popup_login_start.active {height:300px;}
}

/* 캐릭터 애니메이션 */
/* 캐릭터 위치 및 로고 */

@keyframes move00 {
    0% {display: none;}
    100% {display: block;}
}

@keyframes move10 {
    0% {transform:  translateY(-500px); animation-timing-function: ease-in; opacity: 0;}
    38% {transform:  translateY(0); animation-timing-function: ease-out; opacity: 1;}
    55% {transform:  translateY(-65px); animation-timing-function: ease-in;}
    72% {transform:  translateY(0); animation-timing-function: ease-out;}
    81% {transform:  translateY(-28px); animation-timing-function: ease-in;}
    90% {transform:  translateY(0); animation-timing-function: ease-out;}
    95% {transform:  translateY(-8px); animation-timing-function: ease-in;}
    100% {transform:  translateY(0); animation-timing-function: ease-out;}
}

@keyframes move11 {
    0% {transform: translateY(0%);}
    25% {transform: translateY(-20%);}
    50% {transform: translateY(1%);}
    75% {transform: translateY(-20%);}
    100% {transform: translateY(0%);}
}

@keyframes move12 {
    0% {transform: translateX(-134px);  opacity: 0;  z-index: -1;}
    100% {transform: translateX(0px); opacity: 1; z-index: 1;}
}

@keyframes move13 {
    0% {transform: translateY(-50px) scale(0); opacity: 0;}
    100% {transform: translateY(0px) scale(1); opacity: 1;}
}

@keyframes move14 {
    0% {transform: scale3d(1,1,1);}
    30% {transform: scale3d(1.25,0.75,1);}
    40% {transform: scale3d(0.75,1.25,1);}
    50% {transform: scale3d(1.15,0.85,1);}
    65% {transform: scale3d(0.95,1.05,1);}
    75% {transform: scale3d(1.05,0.95,1);}
    100% {transform: scale3d(1,1,1);}
}

@keyframes move15 {
    0%, 100% {transform: translateX(0%); transform-origin: 50% 50%;}
    15% {transform: translateX(-30px) rotate(-6deg);}
    30% {transform: translateX(20px) rotate(6deg);}
    45% {transform: translateX(-15px) rotate(-3.6deg);}
    60% {transform: translateX(9px) rotate(2.4deg);}
    75% {transform: translateX(-6px) rotate(-1.2deg);}
}

@keyframes move16 {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0%);}
}

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

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


@keyframes move1 {
    0% {transform: scale(0); opacity: 0;}
    50% {transform: scale(1); opacity: 1;}
    100% {transform: scale(1); opacity: 1;}
}

@keyframes move2 {
    0% {transform: translateY(-200px) scale(0); opacity: 0;}
    100% {transform: translateY(0px) scale(1); opacity: 1;}
}

/* 마우스 우클릭 방지 */
div, main,body  {
    -webkit-touch-callout: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* 2503 메인 복합지원 수정 s */
.cp-main .main-tit-logo  {
    width: 200px;
    margin: 0;
}
.cp-main.main #mainvisual .sub-t    {display: none;}
.cp-main.main #mainvisual .sub-t p   {
    font-size: 1.375rem;
    margin: 0;
}
.cp-main.main .complex-btn  {
    display: block;
    text-align: center;
}
.cp-main.main .complex-btn a  {
    font-size: 18px;
    font-weight: 500;
    margin: 14px 0 0;
    padding: 2px 6px;
    display: inline-block;
    text-decoration: underline;
    background-color: #ffe5ec;
    color: #111;
    font-size: 16px;
    border-radius: 7px;
}
.cp-main .btn-lay2   {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 24px;
}
.cp-main.main .btn.start    {
    height: 64px;
    display: flex;
    justify-content: center;
    background-color: #fff;
    color: #111;
    max-width: initial;
}
.cp-main.main.main #mainvisual .title  {padding-top: 100px;}
.cp-main.main #mainvisual .btn.start > img  {
    width: 40px;
    margin: 0;
}
.cp-main .btn-lay2 .btn-con   {
    width: 50%;
}
.cp-main .btn-lay2 .btn-con:last-child  {margin: 0;}
.cp-main .btn-lay2 .btn-con .tit   {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 16px;
}
.cp-main .btn-lay2 .btn-con .tit > span:first-child {display: block;}
.cp-main .btn-lay2 .btn-con .btn    {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-left: 0;
    padding: 12px;
    height: 80px;
}
.cp-main.main .btn-lay2 .btn-con .btn img    {
    width: 48px;
    margin: 0;
}
.cp-main .btn-lay2 .btn-con .btn .txt-btn   {
    font-size: 17px;
    font-weight: 500;
}
.main.cp-main .btn.start span   {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #111;
    margin-left: 4px;
}
.cp-main .btn-lay2 .btn-con .btn .txt-btn span   {
    font-size: 17px;
    color: #fff;
    margin: 0;
}
.cp-main .btn-lay2 .btn-con .btn .txt-btn span:first-child    {display: block;}
.cp-main .btn-lay2 .btn-con .btn .txt-btn span:last-child   {font-size: 15px;}

/* 핸드폰 이미지 s */
@media screen and (min-width: 992px)   {

    .cp-main .character-wrap {
        margin: 5px 12px 0px 0px;
        width: 338px;
    }
    .cp-main .defalut-swiper-wrap {
        /* width: 274px;
        top: 108px;
        right: 44px; */
        width: 261px;
        top: 104px;
        right: 50px;
    }
    .character-wrap .character_phone2   {
        position: relative;
        z-index: 12;
    }
}

@media screen and (min-width: 1200px) {
    .cp-main .character-wrap {
        position: absolute;
        top: 100px;
        right: 0;
        margin: 5px 12px 0px 0px;
        width: 438px;
    }
    .cp-main .defalut-swiper-wrap {
        margin: 0;
        width: 337px;
        position: absolute;
        /* top: 141px; 
        right: 58px; */
        top: 134px;
        right: 65px;
    }
}

@media screen and (max-width: 991px)    {
    .cp-main.main.main #mainvisual .title  {padding: 64px 2rem 20px;}
    .cp-main.main #mainvisual .sub-t    {display: none;}
    .cp-main.main .complex-btn a    {
        margin:0 ;
        font-size: 16px;
    }
    .cp-main .character-wrap {
        margin-top: 5.9375rem;
    }
    .cp-main .defalut-swiper-wrap   {
        /* top: 218px;
        left: 40px;
        width: 550px;
        right: 0; */
        width: 77.1%;
        left: 8.1%;
        top: 16%;
    }
    .cp-main.main .complex-btn  {display: block;}
    .cp-main .btn-lay2 .btn-con:last-child  {margin: 24px 0 0;}
}
@media screen and (max-width: 768px) {
    .cp-main .defalut-swiper-wrap   {
        /* width: 80.7%;
        left: 6.1%;
        top: 22%; */
        width: 76.7%;
        left: 8.4%;
        top: 16%;
    }
}
/* 핸드폰 이미지 e */


/* 간격 s */
.cp-main.main .btn-wrap    {
    width: 510px;
    margin-top: 2.5rem;
    /* 간격 e */
}

/* img s */
.cp-main .move1 {
    right: 410px;
    width: 250px;
    top: -60px;
}
.cp-main .character-bg .character3_1    {
    left: -180px;
    z-index: 14;
    top: -40px;
}
.cp-main.main #mainvisual   {overflow: hidden;}
.cp-main.main #mainvisual,
.cp-main.main #mainvisual::before  {
    /* height: 70vh; */
    height: 63%;
}
/* img e */
.cp-main.main .text-wrap.isMargin   {margin-top: 180px;}
.cp-main.main #notice   {margin-top: 7.875rem;}

@media screen and (max-width: 1200px)    {
    /* img s */
    .cp-main .move1 {
        left: -170px;
        top: -115px;
        width: 220px;
    }
    .cp-main .character-bg .character3_1    {
        top: -80px;
        left: -120px;
        width: 140px;
    }
    /* img e */
}

@media screen and (max-width: 991px) {
    .cp-main.main .btn-wrap {
        width: auto;
        min-width: 290px;
        max-width: 350px;
        margin: 1.5rem auto 0;
    }
    .cp-main .main-tit-logo  {
        width: 40%;
        min-width: 140px;
        margin: 0 auto;
    }
    .cp-main .btn-lay2   {display: block;}
    .cp-main .btn-lay2 .btn-con {
        width: 100%;
        text-align: center;
    }
    .cp-main .btn-lay2 .btn-con .btn    {height: 72px;}
    .cp-main.main #mainvisual .btn-lay2 .btn-con .btn img    {
        width: 54px;
    }

    .cp-main .btn-lay2 .btn-con .tit   {font-size: 16px;}
    .cp-main .btn-lay2 .btn-con .btn,
    .cp-main.main .btn-wrap .inner-box,
    #mainContents .app-wrap    {
        width: 100%;
        max-width: 310px;
        min-width: 290px;
        margin: 0 auto;
    }
    .main.cp-main .btn.start span {
        font-size: 16px;
    }
    .cp-main .btn-lay2 .btn-con .btn .txt-btn span,
    .cp-main .btn-lay2 .btn-con .btn .txt-btn span:last-child   {font-size: 17px;}

    .cp-main .btn-lay2 .btn-con .btn .txt-btn span:first-child    {display: inline-block;}

    /* img s */

    .cp-main .move1 {
        left: -54px;
        top: -245px;
        width: 130px;
    }
    .cp-main .character-bg .character3_1    {
        top: -150px;
        left: -80px;
        width: 200px;
    }
    .cp-main.main #mainvisual   {height: initial;}
    .cp-main.main #mainvisual::before  {
        height: 1060px;
    }
    /* img e */
}
@media screen and (max-width: 768px)    {
    .cp-main .character-bg .character3_1    {width: 170px;}
}

@media screen and (max-width: 578px)    {
    /* img s */
    .cp-main .character-bg .character3_1 {
        left: -40px;
        width: 140px;
        top: -130px;
    }
    .cp-main .move1 {
        left: -7px;
        width: 90px;
        top: -180px;
    }
    /* img e */
}
@media screen and (max-width: 455px)    {
    /* img s */
    .cp-main .character-bg .character3_1 {
        left: -35px;
        width: 120px;
        top: -110px;
    }
    .cp-main .move1 {
        left: -15px;
        width: 70px;
        top: -150px;
    }
    /* img e */

}
@media screen and (max-width: 340px) {
    .cp-main .character-bg .character3_1    {width: 120px;}
}
.cp-main.main .btn-wrap.btn-wrap-bt	{
    margin: 30px auto;
}
#notice.notice-complex .wayToUse .equal-list dd    {
    width: 7rem;
    height: 100%;
    align-items: center;
    display: flex;
}
#notice.notice-complex .wayToUse .equal-list-2 dd   {
    width: 6rem;
} 
#notice.notice-complex .wayToUse .equal-list dd img    {
    margin: 0 auto;
    height: auto;
}
#bottomVisual.complex-bt {height: 805px;}
@media (max-width: 1200px)  {
    #notice.notice-complex .wayToUse .equal-list dd img    {
        width: 90%;
    }
}
@media (max-width: 991px)  {
    #notice.notice-complex .wayToUse .equal-list dd img    {
        width: 70%;
    }
    .wayToUse .equal-list dt    {
        font-size: 16px;
    }
    #bottomVisual.complex-bt {padding-bottom: 6.25rem; max-height: 640px;}
}
/* 
#notice.notice-complex .wayToUse .equal-list-1 dd img    {width: 120px;}
#notice.notice-complex .wayToUse .equal-list-2 dd img    {width: 90px;}
#notice.notice-complex .wayToUse .equal-list-3 dd img    {width: 130px;} */

/* 2503 메인 복합지원 수정 e */