@charset "utf-8";
@import url("layout.css");
/*-------------------------------------------------
Author : 조민지
Create date : 2018-10-30
-------------------------------------------------*/

#main {background: url('/webroot/images/common/main/bg.jpg') no-repeat; background-size: 100% auto;}
#main::after {display: block; clear: both; width: 100%; height: 0; content: '';}

/* 비주얼 */
#visual {float: left; position: relative; z-index: 0; width: 50%; height: 29.25rem; text-align: center;}
#visual .img {position: relative; top: 50%; height: 80%; transform: translate(0, -50%);}
#visual .img img {position: relative; top: 50%; width: 25rem; max-width: 90%; max-height: 100%; transform: translate(0, -50%);}
#visual .list {position: absolute; left: 0; top: 0; z-index: -1; width: 200%; height: 100%;}
#visual .list .bx-wrapper,
#visual .list .bx-viewport,
#visual .list ul {width: 100% !important; height: 100% !important;}
#visual .list img {width: 100%;}

/* 서비스 전체보기 */
.service {float: right; position: relative; width: 50%; height: 25.25rem; margin: 2rem 0; padding-right: 4rem; word-break: keep-all;}
.service h2 a {position: absolute; right: 4rem; bottom: 0; width: 8.5rem; height: 49.5%; padding: 1rem; border: 0.3rem solid #fff; background-color: rgba(255, 255, 255, 0.2); font-size: 1.05rem; color: #fff;}

/* 서비스 전체보기 오픈 전 */
.service .area {position: relative; height: 100%; margin-right: 8.5rem;}
.service .area ul,
.service .group1 {height: 100%;}
.service .group1 li {float: left; width: 24%; height: 49.2%; margin-right: 1%;}
.service .group1 li:nth-child(2),
.service .group1 li:nth-child(6) {width: 49%;}
.service .group1 li:nth-child(n+4) {margin-top: 1%;}
.service .group1 a {display: block; position: relative; z-index: 0; height: 100%; padding: 1.5rem; font-size: 1.05rem;}
.service .group1 strong {font-weight: 500;}

/* 서비스 전체보기 작은 박스 */
.service .link1 {background-color: #0e2546; color: #fff;}
.service .link1 span {position: absolute; left: 1.5rem; bottom: 1.5rem; padding: 0 0.6rem 0.25rem 0; border-bottom: 1px solid #fff; font-size:0.75rem; transition: all 0.2s;}
.service .link1 span::after {position: absolute; right: 4px; bottom: -2px; width: 1px; height: 0.6rem; background-color: #fff; content: ''; transform: rotate(-45deg);}
.service .link1:hover span,
.service .link1:focus span,
.service .link1:active span {padding-right: 1.5rem;}
.service .link1.type1 {background-color: #fff; color: #000;}
.service .link1.type1 span {border-color: #000;}
.service .link1.type1 span::after {background-color: #000;}
.service .link1.type3 {background-color: #ecb399; color: #000;}
.service .link1.type3 span {border-color: #000;}
.service .link1.type3 span::after {background-color: #000;}

/* 서비스 전체보기 큰 박스 */
.service .link2 {background-color: #e6e6e6;}
.service .link2 strong::after {display: inline-block; position: relative; top: -3px; width: 0.9rem; height: 0.9rem; margin-left: 0.4rem; border-radius: 100%; border: 1px solid #384850; font-family: 'xeicon'; font-size: 0.6rem; content: ''; text-indent: 1px; text-align: center; line-height: 0.9rem; vertical-align: middle;}
.service .link2 span {position: absolute; right: 0; bottom: 0; width: 100%; height: 70%; text-align: right;}
.service .link2 span img {position: absolute; right: 0; bottom: 0; max-height: 100%; opacity: 1; transition: all 0.3s;}
.service .link2:hover strong,
.service .link2:focus strong,
.service .link2:active strong {color: #004c98 !important;}
.service .link2:hover img,
.service .link2:focus img,
.service .link2:active img {opacity: 0.7;}
.service .link2.type1 {background-color: #fff0cf;}
.service .link2.type1 span {right: 1rem; bottom: 1rem;}

/* 서비스 전체보기 오픈 후 */
.service .group2 {visibility: hidden; overflow: hidden; overflow-y: auto; position: absolute; left: 0; top: 0; width: 99%; height: 100%; padding: 0.75rem; background-color: #fff; opacity: 0; transition: all 0.3s;}
.service .group2 .item {float: left; position: relative; width: 50%; height: 50%; padding: 1rem 0; font-size: 0.85rem; color: #033356;}
.service .group2 .item:nth-child(2n) {border-left: 1px dotted #cfcfcf;}
.service .group2 .item:nth-child(n+3) {border-top: 1px dotted #cfcfcf;}
.service .group2 .label {position: absolute; left: 0; top: auto; width: 6.75rem; padding: 0 1rem; font-weight: 500; color: #333; text-align: center; word-break: keep-all;}
.service .group2 .label span {display: block;}
.service .group2 ul {margin-left: 6.75rem; line-height: 1.764;}
.service .group2 a {display: block; white-space: nowrap;}
.service .group2 a::after {display: inline-block; position: relative; top: -2px; width: 0.75rem; height: 0.75rem; margin-left: 0.4rem; border-radius: 100%; border: 1px solid #384850; font-family: 'xeicon'; font-size: 0.3rem; content: ''; text-indent: 1px; text-align: center; line-height: 0.7rem; vertical-align: middle;}
.service .group2 a:hover,
.service .group2 a:focus,
.service .group2 a:active {text-decoration: underline;}
.service .group2 .close {display: none;}

/* 서비스 전체보기 오픈 */
.service.active .group2 {visibility: visible; opacity: 1;}

/* 공지사항 */
.notice {clear: both; float: left; width: 50%; height: 14.60rem; background-color: #fff;}
.notice ul {height: 100%;}
.notice li {float: left; width: 33.333%; height: 100%;}
.notice li + li {border-left: 1px solid #d6d6d6;}
.notice a {display: block; overflow: hidden; position: relative; z-index: 0; height: 100%; padding: 2rem; color: rgba(0, 0, 0, 0.68); transition: all 0.3s;}
.notice a::before {position: absolute; left: 50%; top: 50%; z-index: -1; width: 0; height: 0; background-color: #004c98; content: ''; transition: all 0.3s;}
.notice a::after {position: absolute; bottom: 2rem; right: 1.6rem; width: 2.2rem; height: 2.2rem; border-radius: 100%; border: 1px solid #b8b8b8; font-family: 'xeicon'; font-size: 1.3rem; color: #b8b8b8; content: ''; text-align: center; line-height: 2.2rem;}
.notice a:hover,
.notice a:focus,
.notice a:active {color: rgba(255, 255, 255, 0.48);}
.notice a:hover::before,
.notice a:focus::before,
.notice a:active::before {left: 0; top: 0; width: 100%; height: 14.75rem;}
.notice a:hover::after,
.notice a:focus::after,
.notice a:active::after {border-color: #fff; color: #fff;}
.notice a:hover strong,
.notice a:focus strong,
.notice a:active strong,
.notice a:hover p,
.notice a:focus p,
.notice a:active p {color: #fff;}
.notice strong {font-family: 'Montserrat'; font-size: 0.9rem; font-weight: 700; color: #004c98; text-transform: uppercase;}
.notice strong em {display: inline-block; position: relative; top: -2px; height: 0.55rem; margin-left: 0.4rem; padding-left: 0.4rem; border-left: 1px solid #d2d2d2; font-family: 'Noto Sans KR'; font-size: 0.75rem; font-weight: 400; color: #767676; line-height: 0.55rem; vertical-align: middle;}
.notice p {display: block; overflow: hidden; height: 3.1rem; margin: 0.25rem 0 0.8rem; font-size: 1.2rem; font-weight: 600; color: #333; line-height: 1.291;}

/* 팝업존 */
.popupzone {float: left; position: relative; width: 25%; height: 14.60rem; border: 0.5rem solid #fff; background-color: #000; text-align: center; line-height: 14.60rem;}
.popupzone .bx-wrapper,
.popupzone .bx-viewport,
.popupzone .bx-viewport ul,
.popupzone .bx-viewport li,
.popupzone .bx-viewport a {display: block; height: 100% !important; line-height: 0;}
.popupzone img {position: relative; top: 50%; width: 100%; transform: translate(0, -50%);}
.popupzone .bx-pager {position: absolute; right: 1.25rem; top: 1.25rem; text-align: right;}
.popupzone .bx-pager div {display: inline; vertical-align: top;}
.popupzone .bx-pager a {display: inline-block; overflow: hidden; width: 0.5rem; height: 0.5rem; margin-left: 0.25rem; border-radius: 100%; border: 2px solid #fff; content: ''; vertical-align: top; transition: all 0.2s;}
.popupzone .bx-pager a::before {display: block; height: 200%; content: '';}
.popupzone .bx-pager .active {background-color: #fff;}

/* 헬프데스크 */
.helpdesk {float: left; width: 25%; height: 14.60rem; border: 0.5rem solid #fff; border-left: 0 none; background: url('/webroot/images/common/main/helpdesk.jpg') no-repeat center center; background-size: 100% auto; text-align: center;}
.helpdesk h2 {padding: 3.5rem 0 2rem; font-family: 'Montserrat'; font-size: 1.8rem; color: #fff;}
.helpdesk a {display: inline-block; width: 9.3rem; max-width: 40%; height: 3rem; margin: 0 1.5%; background-color: rgba(255, 255, 255, 0.98); font-size: 0.9rem; color: #000; line-height: 3rem; vertical-align: top;}
.helpdesk a::before {display: inline-block; margin-right: 0.2rem; font-family: 'xeicon'; font-size: 1rem; content: ''; vertical-align: middle;}
.helpdesk a + a::before {content: '';}

.helpdesk.mobile-only { display:none; }