@charset "utf-8";



.mainWrap {margin-top:10px}
.contents.mainContents {display:flex; flex-wrap:wrap; min-height:auto; margin-top:0; padding:0; border-radius:0; border:none; background:none; box-shadow:none}
.mainContents section {flex:0 0 calc(22.5% - 40px); min-height:310px; max-height:310px; margin-left:40px; margin-bottom:40px; border-radius:15px; border:1px solid #e1e3ea; background:#fff; box-shadow: 0 0 5px rgba(0,0,0,0.1)}
.mainContents section:nth-child(4n+1) {flex:0 0 32.5%; margin-left:0}
.mainContents section:nth-child(n+4) {margin-bottom:0}
.mainContents section:nth-child(7) {overflow:hidden}
.mainTab {display:inline-flex; align-items:center; position:relative; width:100%}
.mainTab .tabList {display:inline-flex; justify-content:center; align-items:center; position:relative; width:150px; height:60px; padding:0 30px; background:none; font-size:2.4rem; color:#222; font-weight:600; text-decoration:none}
.mainTab .tabList ~ .tabList:before {content:""; position:absolute; left:0; width:1px; height:15px; background:#e1e3ea}

.mainTab .tabList:after {content:""; position:absolute; left:50%; bottom:0; width:0; height:3px; background:#6e6cfd; transition:0.3s linear}
.mainTab .tabList:hover:after, .mainTab .tabList:focus:after, .mainTab .tabList.curr:after {left:30px; width:calc(100% - 60px)}
.mainTab .more {position:absolute; right:30px; top:-43px; font-size:1.5rem; color:#555}
.mainTab .more:hover, .mainTab .more:focus {text-decoration:underline}

.mainTab > .tabContent {display:none; position:absolute; left:0; top:60px; width:100%; padding:30px; border-top:1px solid #e1e3ea}
.mainTab > .tabContent li {display:flex; justify-content:space-between; align-items:center}
.mainTab > .tabContent li:first-child {margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #e1e3ea}
.mainTab > .tabContent li.noData {display:flex; justify-content:center; align-items:center; height:185px; margin-bottom:0; padding-bottom:0; border-bottom:none; font-size:1.7rem}
.mainTab > .tabContent li a {display:flex; position:relative}
.mainTab > .tabContent li:first-child a:hover, .mainTab > .tabContent li:first-child a:focus {text-decoration:none}
.mainTab > .tabContent li a .txt {margin-left:15px}
.mainTab > .tabContent li:first-child a:hover .txt, .mainTab > .tabContent li:first-child a:focus .txt {text-decoration:underline}
.mainTab > .tabContent li .txt strong {display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:1; width:100%; margin-bottom:3px; font-size:1.9rem; color:#333; font-weight:600}
.mainTab > .tabContent li .txt:hover, .mainTab > .tabContent li .txt:hover strong {color:#7f8fdb}
.mainTab > .tabContent li .txt em {display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; width:100%; line-height:1.2}
.mainTab > .tabContent li a .date {display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:75px; max-width:75px; height:70px; border-radius:10px; background:#f0f1f4; font-size:12px; color:#555; text-align:center; line-height:1}
.mainTab > .tabContent li a .date em {font-size:3.0rem; color:#333; font-weight:600}
.mainTab > .tabContent li > .date {font-size:1.5rem; color:#757575}
.mainTab > .tabContent li > .date em {margin-left:3px}
.mainTab > .tabContent li:not(:first-child) > a {display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:keep-all; width:calc(100% - 90px);margin-bottom:5px}
.mainTab > .tabContent li:not(:first-child) > a:hover, .mainTab > .tabContent li:not(:first-child) > a:focus {color:#7f8fdb}
.mainTab > .tabContent li:not(:first-child) > a:before {content:""; display:inline-flex; justify-content:center; align-items:center; width:4px; height:4px; margin-right:8px; margin-top:-2px; border-radius:50%; background:#757575; vertical-align:middle}




/* card */
section.none {border-radius:0; border:none; background:none; box-shadow:none}
.cardBox {position:relative; perspective:1100px}
.cardBox01 .front {background:linear-gradient(135deg, rgba(0,191,184,1), rgba(0,191,136,1)); box-shadow: 0 0 5px rgba(0,0,0,0.1)}
.cardBox01 .back {background:linear-gradient(-135deg, rgba(0,191,184,1), rgba(0,191,136,1)); box-shadow: 0 0 5px rgba(0,0,0,0.1)}
.cardBox02 .front {background:linear-gradient(135deg, rgba(108,135,253,1), rgba(111,108,253,1)); box-shadow: 0 0 5px rgba(0,0,0,0.1)}
.cardBox02 .back {background:linear-gradient(-135deg, rgba(108,135,253,1), rgba(111,108,253,1)); box-shadow: 0 0 5px rgba(0,0,0,0.1)}
.cardBox03 .front {background:linear-gradient(135deg, rgba(0,187,191,1), rgba(0,144,191,1)); box-shadow: 0 0 5px rgba(0,0,0,0.1)}
.cardBox03 .back {background:linear-gradient(-135deg, rgba(0,187,191,1), rgba(0,144,191,1)); box-shadow: 0 0 5px rgba(0,0,0,0.1)}
.cardBox:hover .card, .cardBox:focus .card {transform:rotateY(-180deg)}
.cardBox:focus .card {outline:2px dotted #8b6cfd}
.card {display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d; text-align:center; transition:1s}

.card .front {font-size:3.0rem}
.card .front:before {content:""; display:flex; justify-content:center; align-items:center}
.card .front p {margin-top:20px}
.card .front, .card .back {display:flex; flex-direction:column; justify-content:center; align-items:center; position:absolute; width:100%; height:100%; padding:30px; backface-visibility:hidden; border-radius:15px; border:1px solid #e1e3ea; color:#fff}
.card .back {transform:rotateY(180deg)}
.card .back p {word-break:keep-all; font-weight:600}
.card .back em {display:flex; justify-content:center; align-items:center; width:150px; margin-top:20px; border-radius:35px; border:2px solid #fff; background:none; font-size:1.7rem; color:#fff}

.cardBox .front:before {width:175px; height:175px; background-position:center center !important; background-size:contain !important}
.cardBox01 .front:before {background:url("../images/ico_card01.svg") no-repeat}
.cardBox02 .front:before {background:url("../images/ico_card02.svg") no-repeat}
.cardBox03 .front:before {background:url("../images/ico_card03.svg") no-repeat}



/* customerBox */
.customerBox {display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; padding:30px}
.customerBox > p {font-size:3.0rem; color:#333; font-weight:600}
.customerBox > strong {font-size:3.0rem; color:#4050a7; font-weight:600}
.opening {display:flex; justify-content:center; align-items:center; width:100%; margin-top:20px; padding-top:20px; border-top:1px solid #e1e3ea}
.opening:before {content:""; display:flex; width:75px; height:65px; background:url("../images/ico_phone.svg") no-repeat; background-size:contain}
.opening ul {display:flex; flex-direction:column; margin-left:15px}
.opening li {font-size:1.7rem}
.opening li span {margin-right:5px; color:#333; font-weight:600}
.opening li em {color:#7f8fdb; font-weight:600}
@media (max-width: 1900px) {
    .customerBox > strong {font-size:2.4rem}
    .opening:before {width:55px; height:55px}
    .opening ul {margin-left:10px}
    .opening li {font-size:1.7rem; letter-spacing:-0.03em}
}



/* 알림판 */
.bannerWrap {position:relative}
.controlBox {display:flex; justify-content:space-between; align-items:center; padding:12px 30px}
.controlBox p {font-size:2.4rem; color:#333; font-weight:600}
.control {display:flex; justify-content:flex-end; align-items:center}
.control .paging {margin-right:10px; font-size:1.7rem; color:#757575}
.control button {display:flex; justify-content:center; align-items:center; width:24px; height:24px; margin-left:-1px; border:1px solid #e1e3ea; background-color:#fff}
.control button:before {content:""; display:flex; justify-content:center; align-items:center; width:6px; height:12px; background-size:contain}
.control button.prev:before {background:url("../images/control_prev.png") no-repeat}
.control button.pause:before {background:url("../images/control_pause.png") no-repeat}
.control button.play:before {background:url("../images/control_play.png") no-repeat}
.control button.next:before {background:url("../images/control_next.png") no-repeat}
.bannerSlide {overflow:hidden; position:absolute; top:60px; width:100%}
.bannerSlide img {width:100%; height:250px; border-radius:0 0 15px 15px}
.bannerSlide .slick-slide a:focus {outline:2px dashed #e41717; outline-offset:-2px}


/* quickMenu */
.quickMenu {display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; padding:30px}
.quickMenu li {display:flex; justify-content:space-between; align-items:center; width:100%}
.quickMenu li:not(:first-child) {margin-top:10px}
.quickMenu li a {display:flex; flex:1; align-items:center; position:relative; padding:10px; border-radius:10px; border:1px solid #e1e3ea; font-size:1.9rem}
.quickMenu li a:hover, .quickMenu li a:focus {color:#7f8fdb}
.quickMenu li a i {display:flex; justify-content:center; align-items:center; position:relative; width:35px; height:35px; margin-right:10px}
.quickMenu li a i:before {content:""; display:block; width:100%; height:100%; border-radius:50%; background-color:#e1e3ea }
.quickMenu li a i.quick:after {content:""; display:flex; justify-content:center; align-items:center; position:absolute; height:19px; background-size:contain !important; background-repeat:no-repeat !important}
.quickMenu li a i.quick01:after {left:9px; width:17px; background:url("../images/ico_quick01.svg")}
.quickMenu li a i.quick02:after {left:8px; width:20px; background:url("../images/ico_quick02.svg")}
.quickMenu li a i.quick03:after {left:8px; width:19px; background:url("../images/ico_quick03.svg")}
.quickMenu li a i.quick04:after {left:8px; width:19px; background:url("../images/ico_quick04.svg")}
@media (max-width: 1900px) {
    .quickMenu {padding:20px}
    .quickMenu li a {font-size:1.7rem; letter-spacing:-0.03em}
    .quickMenu li a i {width:30px; height:30px; margin-right:8px}
    .quickMenu li a i.quick:after {height:13px}
    .quickMenu li a i.quick01:after {left:10px; width:11px}
    .quickMenu li a i.quick02:after {left:8px; width:24px}
    .quickMenu li a i.quick03:after {left:9px; width:13px}
    .quickMenu li a i.quick04:after {left:9px; width:13px}
}