@charset "utf-8";
@font-face {
    font-family: 'gmarket';
    font-style: normal;
    font-weight: 300;
    src: url(/pcms/common/font/gmarketsans/GmarketSansBold.woff) format('woff');
  }
  
html {overflow-y: auto;}
body{margin:0}
body:before{content:"";display:block;position:fixed;left:0;top:0;z-index:0;width:100%;height:100%;}
a, p, strong, span, em{/* font-family: "Noto Sans KR"; */font-weight:300;}
.wrap{position:relative; z-index:100; width:1660px;max-width:100%;/*padding: 0 30px;*/margin:0 auto;}
#skipnavi{display:none;}
#body_layout{overflow-x: hidden;position: relative; width:100%;height:100%;}

#contents * {font-family: 'Noto Sans KR';}
#contents {position: relative;min-height: calc(100vh - 94px); background: url(../images/bg1.jpg) no-repeat top; background-size: cover;text-align: center;background: #dce9f3;}
#contents .wrap {display: flex;flex-wrap: wrap;min-height: calc(100vh - 94px);}
#contents .left {display: flex;align-items: center;position: relative; width: 46%;padding:0 30px;}
#contents .left::before {content: "";position: absolute;right:0;bottom: 0;width: 50vw;height: 100%;background: url('../images/bg1.jpg') no-repeat;background-size: cover;z-index: -1;}
#contents .right {position: relative; display: flex;align-items: center;justify-content: flex-end;width: 54%;padding: 0 30px;}

/* #contents .title {display:flex;align-items: flex-start;flex-direction: column;text-align: left;} */
#contents .title p {margin-top: 95px;font-family: 'gmarket'; font-size: 43px; color: #080933;line-height: 1.34;}
#contents .title p span {display: inline-block;padding: 8px 5px 0;font-family: 'gmarket';color: #fff;background: #1caae8;line-height: 1;letter-spacing: 0;}

#contents .link-list {display: flex; justify-content: center;flex-direction: column;gap:40px;max-width: 100%;}
#contents .link-list .link-item {overflow: hidden; position: relative; width: 700px;max-width: 100%; height: 390px;text-align: left;/*box-shadow: 20px 0 20px rgba(0, 0, 0, 0.1);*/}
#contents .link-list .link-item > a {overflow: hidden;display: block; width: 100%; height: 100%;transition: all 0.5s;}
#contents .link-list .link-item > a:hover .box,
#contents .link-list .link-item > a:focus .box {height: 100%;}
#contents .link-list .link-item.item01 > a {background: url('../images/img01.jpg') no-repeat center; background-size: cover;}
#contents .link-list .link-item.item02 > a {background: url('../images/img02.jpg') no-repeat center; background-size: cover;}
 
#contents .link-list .link-item .box {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap:10px;position: absolute;left: 0;bottom: 0;width: 100%;padding: 5% 5% 5% 9%;z-index: 0;}
#contents .link-list .link-item.item01 .box {background: rgba(50,74,177,.8);}
#contents .link-list .link-item.item02 .box {background: rgba(24,148,203,.8);}
#contents .link-list .link-item .box::before {content:'';position: absolute;left: 50%;margin-left: -15px;bottom: -30px;width: 30px;height: 30px;z-index: -1;transform-origin: 50% 50%;border-radius: 50%; transition:transform 0.25s ease-out;}
#contents .link-list .link-item.item01 .box::before {background: rgba(50,74,177,.8);}
#contents .link-list .link-item.item02 .box::before {background: rgba(24,148,203,.8);}
#contents .link-list .link-item a:hover .box,
#contents .link-list .link-item a:focus .box {background: none;}
#contents .link-list .link-item a:hover .box::before,
#contents .link-list .link-item a:focus .box::before {transform: scale(40);}
#contents .link-list .link-item .box .item-tit {display: block;}
#contents .link-list .link-item .box .item-btn {position: relative; flex-shrink: 0; display: block;width: 78px;height: 78px; background: url('../images/arrow.png');background-size: contain; font-size: 0;}

/*한번수납시스템 이미지 임시 등록 */
#contents .left {box-shadow: 20px 0 20px rgba(0, 0, 0, 0.2);}
.wrap {width:auto;}
.wrap .box {display: flex; width:100%; background:#006394}
#contents {background:#fff}
#contents .wrap {flex-wrap: nowrap; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh;}
#contents .right {justify-content: center;}
#contents .left {justify-content: end; padding: 0;}
#contents .left::before {background: none;}
#contents .left img {width: auto; height:115%;}
#contents .link-list {gap:25px}
#contents .link-list .link-item {height: 340px;}
.footer {width: 100%;}

@media (max-width: 1400px){
    #contents .left img {width: 100%; height: auto;}
}

/*한번수납시스템 이미지 임시 등록 end*/

@media (max-width: 1024px){
    #contents .wrap {flex-direction: column;justify-content: center;}
    #contents .left {width: 100%;padding: 100px 30px 60px;}
    #contents .left::before {width: 100vw;height: 50vh;min-height: 100%;}
    #contents .right {justify-content: center;width: 100%;padding: 60px 30px 40px;}
    #contents .title {align-items: center;text-align: center;}
    #contents .title p {margin-top:50px;}

    /*한번수납시스템 이미지 임시 등록 */
    #contents {background: #dce9f3;}
    /* .wrap .box {flex-wrap: wrap; overflow: auto;} */
    #contents .left {width:auto; padding: 24px 30px 3px; margin: 0 auto; box-shadow: none;}
    #contents .left::before {width: 100%; height: 100%; background-size: cover;}
    #contents .right {padding: 22px 30px 40px}

}

@media (max-width:600px) {
  #contents .title img {max-width: 280px;}
  #contents .title p {font-size: 37px;} 
  #contents .link-list .link-item .box {flex-direction: column;/*justify-content: center;*/padding: 30px 20px;}
 /* #contents .link-list .link-item.item01 .box .item-tit {max-width: 260px;}
  #contents .link-list .link-item.item02 .box .item-tit {max-width: 300px;}*/
  #contents .link-list .link-item .box .item-btn {width: 200px;height: auto; min-height: 45px; padding: 0 30px 0 25px;/*border: 1px solid #fff;*/line-height: 45px;/*background: none;font-size: 16px;*/ color: #fff;}
  #contents .link-list .link-item .box .item-btn::before {content: ""; display: inline-block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%) rotate(45deg); width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff;} 
}

.footer {display: flex; flex-direction: column; justify-content: center; align-items: center;position: relative; min-height: 94px; padding: 20px; background-color: #fff;z-index: 1;}
.footer p {font-size: 16px; font-weight: 200; color: rgba(51,51,51,0.5); letter-spacing: 0; text-align: center;}

/* 240229 인트로 디자인 변경 */

.wrap .box {flex-direction: column; background: #a9e4ff; height:100%; overflow: auto;}
#contents .link-list .link-item a:hover .box,
#contents .link-list .link-item a:focus .box {overflow:hidden}
#contents .box .top {/*background: url(../images/intro_bg.jpg) no-repeat; background-size: cover;*/ display: flex; min-height: 50vh; justify-content: center; align-items: center;}
#contents .box .top .title {margin-bottom:85px}
#contents .box .top .title .title_mobile {display: none;}
#contents .link-list {flex-direction: row;}
#contents .bottom .link-list {justify-content: center; align-items: end; flex-wrap:wrap; /*margin-top: -155px;*/}
#contents .bottom .link-list .link-item {width:500px; border-top-right-radius: 50px; border-bottom-left-radius: 50px;}
#contents .bottom .link-list .link-item.item01 > a {background:url('../images/intro_img01.jpg?ver=1.0') no-repeat center}
#contents .bottom .link-list .link-item.item02 > a {background:url('../images/intro_img02.jpg') no-repeat center}
#contents .bottom .link-list .link-item.item03 > a {background:url('../images/intro_img03.jpg') no-repeat center}
#contents .bottom .link-list .link-item.item01,
#contents .bottom .link-list .link-item.item02 {height:400px;}
#contents .bottom .link-list .link-item.item03 {width:367px; height:372px}
#contents .bottom .link-list .link-item.item03 .box {background: linear-gradient(to right, #12b2ca, #3fbcb2, #69c69b);}
#contents .bottom .link-list .link-item.item03 .item-tit {position: relative;}
#contents .bottom .link-list .link-item.item03 .item-tit:after {content: ""; display: inline-block; background: url(../images/logo3_icon.png); position:absolute; width: 80px; height:71px; top: 0px; right: -18px;}
#contents .bottom .link-list .link-item .box {flex-direction: row; /*height: 150px;*/ overflow:hidden;} 


@media (max-width: 1024px) {
  #contents .box .top {min-height: 30vh; padding:20px;}
  #contents .bottom .link-list {flex-direction: column; align-items: center;}
  #contents .bottom .link-list .link-item.item01, #contents .bottom .link-list .link-item.item02 {height: 350px;}
  #contents .bottom .link-list .link-item.item03 {width: 500px;}
}


@media (max-width:600px) {
  #contents .box .top .title .title_mobile {display: block; max-width: 500px; width:100%; padding: 20px; overflow: hidden;}
  #contents .box .top {min-height: 180px;}
  #contents .box .top .title {margin-bottom: 0;}
  #contents .box .top .title .title_pc {display: none;}
  #contents .bottom {padding: 20px;}
  #contents .bottom .link-list {margin-top: 40px; margin-bottom: 40px;}
  #contents .bottom .link-list .link-item .box {padding: 12px 20px;}
#contents .bottom .link-list .link-item.item01, #contents .bottom .link-list .link-item.item02, #contents .bottom .link-list .link-item.item03 {height:260px}
#contents .bottom .link-list .link-item.item01 > a {background-position:10px -54px}
#contents .bottom .link-list .link-item.item01 .item-tit, #contents .bottom .link-list .link-item.item02 .item-tit {max-width:210px}
#contents .bottom .link-list .link-item.item03 .item-tit {max-width:155px}
  #contents .link-list .link-item .box .item-btn {width:165px}
 /*.footer p {font-size:13pt}*/
  
}

/* 20250310 인트로 디자인변경*/
#contents .wrap {overflow: hidden;}
.wrap .box {flex-direction: column; background: linear-gradient(45deg, #DDF6F7, #FDCFDD); height:100%; overflow: hidden;}
#contents .box .top {display: flex; justify-content: center; align-items: center; height: 340px; margin-top: 104px; min-height: 340px;position: relative;}
#contents .box .top::before{content: ""; display: block; width: 540px; height: 558px; position: absolute; top: -104px; left: 0; background: url(../images/top_icon.png);}
#contents .box .top .link-list .link-item {width: 638px !important; border-radius: 30px 0 30px 30px !important; z-index: 50; box-shadow: 10px 0 10px rgba(0, 0, 0, 0.1);}
#contents .box .top .link-list .link-item .box {flex-direction: row; height: 150px; overflow:hidden; padding: 2% 5% 2% 6%;} 
#contents .link-list .link-item .box .item-btn {width: 65px; height: 65px;}
#contents .box .top .link-list .link-item a .box {width: 100%; height: 106px;}
#contents .box .top .link-list .item > a {transition: all 0.5;}
#contents .box .top .link-list .item01 > a .box {background-color: #024CAA;}
#contents .box .top .link-list .item01 > a{background:url('../images/intro_img01.jpg?ver=1.0') no-repeat center;}
#contents .box .top .link-list .item02 > a{background:url('../images/intro_img02.png') no-repeat center;}
#contents .box .top .link-list .item02 > a .box {background-color: #179CDA;}
#contents .box .top .link-list .item01 > a .box::before {background-color: #024CAA;}
#contents .box .top .link-list .item02 > a .box::before {background-color: #179CDA;}
#contents .box .top .link-list .link-item > a:hover .box,
#contents .box .top .link-list .link-item  > a:focus .box {background: none; height: 100%;}
#contents .box .top .link-list .link-item > a:hover .box::before,
#contents .box .top .link-list .link-item  > a:focus .box::before {transform: scale(40);}
#contents .box .bottom {height: 257px; margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 25px;position: relative;}
#contents .box .bottom::before{content: ""; display: block; width: 1222px; height: 795px; position: absolute; bottom: -154%; right: -11%; z-index: 0; background: url(../images/box_icon.png) no-repeat;}
#contents .box .bottom .login{background: #fff; border-radius: 45px;width: 638px; height: 100%; border-radius: 30px; z-index: 50; box-shadow: 10px 0 10px rgba(0, 0, 0, 0.1);}
#contents .box .bottom .login .tab {display: flex; padding: 17px 40px 0;}
#contents .box .bottom .login .tab li {width: 50%; border-bottom: 2px solid #E9E9EC; padding-bottom: 15px; }
#contents .box .bottom .login .tab li a {color: #616161; font-size: 20px;}
#contents .box .bottom .login .tab li.on {border-bottom: 2px solid #040105;}
#contents .box .bottom .login .tab li.on a {color: #040105;  color: #040105; font-weight: bold;}
#contents .box .bottom .login .con_box {display: none;}
#contents .box .bottom .login .con_box.on {display: block;}
#contents .box .bottom .login .bot_box {display: flex; padding: 33px 54px; justify-content: space-between;}
#contents .box .bottom .login .bot_box div {width: calc(50% - 0px);}
#contents .box .bottom .login .bot_box .text p {font-size: 20px; text-align: left; letter-spacing: -1px;}
#contents .box .bottom .login .bot_box .button {text-align: center; }
#contents .box .bottom .login .bot_box .button button {background-color: #EDEAEC; border-radius: 8px; border: 1px solid #ddd; color: #060305; font-size: 16px; width: 100%;height: 50px;}
#contents .box .bottom .login .bot_box .button button.log {border: none; background-color: #1C90EC; color: #fff; margin-bottom: 12px;}
#contents .bottom .inner {width: 638px; height: 100%; gap: 25px; z-index: 50;}
#contents .bottom .inner .link-list .link-item {height: 114px; width: 100%; border-radius: 30px; z-index: 50; box-shadow: 10px 0 10px rgba(0, 0, 0, 0.1);}
#contents .bottom .inner .link-list .link-item .box {padding: 2% 5% 2% 6%;}
#contents .bottom .inner .link-list .link-item.item03 .box {background: linear-gradient(to right, #12b2ca, #3fbcb2, #69c69b);}
#contents .bottom .inner .link-list .link-item.item03 .box .item-tit:after {content: ""; display: inline-block; background: url(../images/logo3_icon.png); position:absolute; width: 80px; height:71px; top: 13px; left: 216px;}
#contents .bottom .inner .link-list .link-item.item04 .box {background: #8C85EE;}
#contents .bottom .inner .link-list .link-item.item04 .box .item-tit:after {content: ""; display: inline-block; background: url(../images/logo4_icon.png); position:absolute; width: 62px; height:91px; top: 7px; left: 157px;}

@media (max-width: 1400px) {
  #contents .box .top {padding: 20px;}
  #contents .box .bottom {padding: 20px; height: auto;}
  #contents .box .bottom .login .bot_box {padding: 33px 20px;}
  #contents .box .bottom .login .bot_box .text p {font-size: 18px;}
}

@media (max-width: 1024px) {
  .wrap .box .blend{display: none;}
  #contents .box .top::before{display: none;}
  #contents .box .top::after{display: none;}
  #contents .box .bottom::before{display: none;}
  #contents .box .bottom::after{display: none;}
  .wrap .box {overflow: auto;}
  #contents .box .top {display: block; margin: 72px auto 0;}
  #contents .link-list {display: block;}
  #contents .box .top .link-list .link-item {margin-bottom: 32px;}
  #contents .box .top .link-list .link-item .box {flex-direction: row; height: 150px; overflow:hidden; padding: 2% 40px 2% 40px;} 
  #contents .box .bottom {display: block; margin: 431px auto 51px; height: auto; padding: 0;}
  #contents .box .bottom .login {height: 417px;}
  #contents .box .bottom .login .bot_box {display: block; padding: 44px 39px;}
  #contents .box .bottom .login .bot_box div {width: 100%;}
  #contents .box .bottom .login .bot_box .text {margin-bottom: 50px;}
  #contents .box .bottom .login .bot_box .text p {text-align: center;}
  #contents .bottom .inner {height: 280px; margin-top: 40px;}
  #contents .bottom .inner .link-list .link-item.item03 {margin-bottom: 30px;}
  #contents .bottom .inner .link-list .link-item.item03 .box .item-tit:after {top: -7px; left: 135px;}
  #contents .bottom .inner .link-list .link-item.item04 .box .item-tit:after {top: 5px; left: 131px;}
}
@media (max-width: 700px) {
  #contents .box .top{width: 100%;margin: 15px auto 0;}
  #contents .box .top .link-list .link-item {width: 100% !important; height: 205px;margin-bottom: 25px;}
  #contents .box .top .link-list .link-item a .box {height: 86px;}
  #contents .box .top .link-list .item01 > a{background-size: cover;}
  #contents .box .top .link-list .item02 > a{background-size: cover;}
  #contents .box .bottom {width: 100%; padding: 0 20px; margin: 142px auto 12px;}
  #contents .bottom .inner {margin-top: -12px;}
  #contents .box .bottom .login{width: 100% !important;}
  #contents .box .bottom .login {height: 365px;}
  #contents .box .bottom .login .bot_box {padding: 20px 39px;}
  #contents .box .bottom .login .bot_box .text {margin-bottom: 20px;}
  #contents .bottom .inner .link-list .link-item.item03 {margin-bottom: 25px;}
  #contents .top .link-list .link-item .item-tit, #contents .bottom .link-list .link-item .item-tit {max-width:250px}
  #contents .bottom .link-list .link-item.item04 .item-tit {max-width:80px}
  #contents .bottom .inner{width: 100%;}
}
@media (max-width: 600px) {
  #contents .top .link-list .link-item .item-tit, #contents .bottom .link-list .link-item .item-tit {max-width:192px}
  #contents .link-list .link-item .box .item-btn {width: 50px; height: 50px; background-repeat: no-repeat;}
  #contents .box .top .link-list .link-item .box {padding: 2% 20px 2% 20px;}
  #contents .box .bottom .login {height: 330px;}
  #contents .box .bottom .login .tab {padding: 17px 18px 0;}
  #contents .box .bottom .login .tab li a{font-size: 16px;}
}