@charset "utf-8";

/*** 팝업 공통 레이아웃 ***/
.pop-wrap.on {display: block; background: rgba(0,0,0,0.7); z-index: 9999;}
.pop-wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
.pop-wrap .pop-layer {position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.pop-wrap .pop-layout {max-width: 500px; height: 500px; background: #fff;}
.pop-wrap .pop-layer .pop-title {height: 60px; background: #5e6e88; font-size: 21px; line-height: 60px; padding-left: 30px; color: #fff;}
.pop-wrap .pop-layer .pop-contents {width: 100%; height: 100%;}
.pop-wrap .pop-layer .pop-inner {overflow-x: hidden; overflow-y: auto; height: calc(100% - 60px); padding: 0 30px;}
.btn-pop-close {position: absolute; right: 0; top: 0; width: 60px; height: 60px; cursor: pointer; text-indent: -9999px;}
.btn-pop-close .close-btn {display: contents; width: 60px; height: 60px; position: relative;}
.btn-pop-close .close-btn:before, .btn-pop-close .close-btn::after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 2px; height: 24px; background: #fff;}
.btn-pop-close .close-btn:after {transform: translate(-50%,-50%) rotate(-45deg);}

/*** 헤더관련 공통 레이아웃 - 모바일 first ***/
body.on {overflow: hidden;}
.header-dimm {position: fixed; left: 0; top: 0; bottom: 0; opacity: 0; width: 100%; height: 0; background: rgba(0,0,0,.3); transition: all 0.3s;}
.header-dimm.on {opacity: 1; height: auto; z-index: 20;}
.header {position: fixed; left: 0; top: 0; z-index: 20; width: 100%; box-sizing: border-box;}
.header.sticky {background-color: var(--header-on-bg);}
.gnb-wrap {position: fixed; left: -100%; top: 0; bottom: 0; width: 100%; max-width: 768px; overflow-y: hidden; overflow-x: auto; box-sizing: border-box; z-index: 25; transition: .2s; background: #fff;}
.gnb-wrap.open {left: 0;}
.gnb-close {width: 32px; height: 32px; position: relative;}
/*type5~8 높이 수정*/.gnb-close:before, .gnb-close:after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 2px; height: 24px; background: #fff;}
.gnb-close:after {transform: translate(-50%,-50%) rotate(-45deg);}

.menu-btn {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}
.menu-btn>span {display: block; width: 100%; height: 2px; background: var(--menu-btn-bg); overflow: hidden; box-sizing: border-box;}
.menu-btn:before {content: ''; display: block; width: 100%; height: 2px; background: var(--menu-btn-bg); box-sizing: border-box;}
.menu-btn:after {content: ''; display: block; width: 100%; height: 2px; background: var(--menu-btn-bg); box-sizing: border-box;}
.apply-btn {position: absolute; right: 60px; display: block; color: #fff;}
.apply-btn .ico-write {display: block; width: 22px; height: 22px; background: url('/type/common/img/layout/ico-linepen-w.png') center no-repeat; background-size: 22px;}
.apply-btn>span {position: absolute; top: 28px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; box-sizing: border-box; background-color: var(--point-color); color: #fff; word-break: keep-all;}
.apply-btn>span:before {content: ''; display: block; position: absolute; left: 50%; top: -5px; margin-left: -5px; width: 0; height: 0; border-bottom: 8px solid var(--point-color); border-left: 5px solid transparent; border-right: 5px solid transparent;}
.apply-btn>span>em {padding-top: 6px; text-align: center; color: #FFF; font-size: 12px; line-height: 14px;}

@media screen and (min-width: 768px){
    .apply-btn.type1 {right: 120px;}
    .apply-btn.type1 .ico-write {width: 44px; height: 44px; background-size: 44px;}
    .apply-btn.type1>span {width: 100px; height: 100px; top: 50px;}
    .apply-btn.type1>span>em {font-size: 25px; line-height: 28px;}
}
@media screen and (min-width: 1024px){
    .apply-btn.type1 {position: relative; top: 15px; right: 0; display: flex; justify-content: center; align-items: center; background: var(--point-color); width: 147px; height: 40px; padding: 0 20px; border-radius: 20px;;}
    .apply-btn.type1>span {display: block; position: static; top: auto; left: auto; width: auto; height: auto; transform: translateX(0); border-radius: 0; background: transparent; font-size: 15px; line-height: 15px; font-weight: 400;}
    .apply-btn.type1>span:before {display: none;}
    .apply-btn.type1>span>em {margin-left: 8px; padding: 0; font-size: 15px; line-height: 15px; font-weight: 400;}
    .apply-btn.type1>span>em br {display: none;}
    .apply-btn.type1 .ico-write {width: 18px; height: 18px; background-size: 18px; background-image: url('/type/common/img/layout/ico-linePen-w.png');}
}
@media screen and (min-width: 1200px){
    /*type5, type6 모양 체크*/
    .apply-btn {position: relative; right: 0; border-radius: 45px; background-color: var(--point-color); display: flex; align-items: center; justify-content: center; width: 120px; height: 36px;}
    .apply-btn>span {position: static; display: inline-block; width: auto; height: auto; background-color: inherit; transform: translateX(0); padding-left: 10px;}
    .apply-btn>span:before {display: none;}
    .apply-btn>span>em {display: inline; padding-top: 0; font-size: 15px; vertical-align: middle;}
    .apply-btn>span>em br {display: none;}
    .header.sticky .apply-btn.type2 .ico-write {background-image: url('/type/common/img/layout/ico-linepen-w.png');}
}


/*** 푸터관련 공통 레이아웃 ***/
.btn-top {position: absolute; right: 20px; top: -50px; width: 45px; height: 45px; border-radius: 3px; background: #535BF2 url('/type/common/img/layout/icon-top.png') 50%/18px no-repeat;}

/* footer type1 - template : type 1 ~ 4 */
.family-wrap .btn-site {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 35px; font-size: 16px; line-height: 35px; background: var(--family-site-bg); color: #fff; font-weight: 400;}
.family-wrap .btn-site.web {display: none;}
.family-wrap .btn-site.active .ico-arrow {transform: rotate(225deg); top: calc(50% - 3px);}
.family-wrap .btn-site .ico-arrow {position: absolute; right: 30px; top: calc(50% - 10px); width: 10px; height: 10px; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); transform: rotate(45deg);}
.family-wrap .site-btn-wrap {display: none;}
.family-list {display: none; background: #05548f; transition: 0.3s;}
.family-list.on {display: block;}
.family-site {display: none; flex-direction: column; padding: 30px 30px 20px;}
.family-site.on {display: flex;}
.family-site .site-list {width: 100%; position: relative;}
.family-site .site-list:before {content: ''; display: block; width: 40px; height: 1px; background: #e2b758; margin: 25px 0;}
.family-site .site-list>li {padding-bottom: 10px;}
.family-site .site-dep1 {margin-bottom: 10px; font-size: 16px; line-height: 18px; letter-spacing: -2px; color: #78bcee;}
.family-site .site-dep2 {display: flex; flex-wrap: wrap;}
.family-site .site-dep2>li {width: 50%; padding-bottom: 10px;}
.family-site .site-dep2>li>a {color: #fff; font-size: 14px; line-height: 16px; letter-spacing: -1px; font-weight: 300;}
.family-site .site-dep2>li>a:hover, .family-site .site-dep2>li>a:focus {font-weight: 500;}
.family-site .site-icon-list {display: flex; flex-wrap: wrap; width: 100%;}
.family-site .site-icon-list>li {width: 33.33%; margin-bottom: 20px;}
.family-site .site-icon-list>li>a {display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; line-height: 16px; text-align: center; color: #fff; letter-spacing: -1px;}
.family-site .site-icon-list .icon {height: 45px;}
.family-site .site-icon-list>li>a>em {display: block; padding-top: 10px;}
.footer-bottom {padding: 17px 20px; max-width: 1260px; position: relative; overflow: hidden; margin: 0 auto; box-sizing: border-box;}
.footer-menu, .footer-bottom .text-box>ul, .sns-list {display: none;}

.footer.type2 .family-site {display: flex; padding: 0;}

@media screen and (min-width: 500px) {
    .family-site .site-dep2 {width: 70%; gap: 0 30px;}
    .family-site .site-dep2>li {width: auto;}
}
@media screen and (min-width: 768px){
    .btn-top {right: 30px; top: -60px;}

    .family-wrap .btn-site {height: 55px; font-size: 28px;}
    .family-wrap .btn-site .ico-arrow {width: 20px; height: 20px; top: 23%;}
    .family-wrap .btn-site .ico-arrow:after {height: 26px; width: 2px;}
    .family-list {padding: 0 30px 30px; max-width: 1200px; margin: 0 auto;}
}
@media screen and (min-width: 1200px){
    .btn-top {right: 40px; top: -70px; width: 55px; height: 55px; background-size: 22px; border-radius: 5px;}

    .footer.type2 .family-site {padding: 0;}
}
@media screen and (min-width: 1550px){
    .btn-top {right: 60px;}
}

/* footer type2 - template : type 5 ~ 8 */
.footer.type2 {position: relative; background: var(--footer-bg);font-weight: 300; color: #878D91; font-size: 13px; text-align: center; padding: 25px 15px;}
.footer.type2 a {color: #878D91;}
.footer.type2 .footer-logo {font-size: 23px; font-weight: 500; display: flex; align-items: center; justify-content: center;}
.footer.type2 .footer-logo img {width: 35px; height: 35px; margin-right: 5px;}
.footer.type2 .footer-top .util {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.footer.type2 .footer-top .util>a {display: block; width: calc(50% - 30px); padding: 15px; position: relative;}
/*.footer.type2 .footer-top .util>a:nth-of-type(3) {text-align: right;}*/
/*.footer.type2 .footer-top .util>a:nth-of-type(4) {text-align: left;}*/
.footer.type2 .footer-top .util>a:nth-of-type(3) {text-align: center;}
.footer.type2 .footer-top .util>a:before {display: none; content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 24px; margin-top: -12px; background: var(--footer-border);}
.footer.type2 .footer-top .util>a:first-child:before {display: block;}
.footer.type2 .footer-top .info>a {display: inline-block; padding: 0 15px;}
.footer.type2 .footer-bottom {padding: 0; max-width: inherit;}
.footer.type2 .family-site-wrap, .footer.type2 .footer-bottom>* {padding-top: 30px;}
.footer.type2 .family-site-wrap {max-width: 500px; margin: 0 auto;}
.footer.type2 .family-site-wrap .family-site {position: relative;}
.footer.type2 .family-site .site-list {position: absolute; width: 100%; display: none; z-index: 1; bottom: 40px; background: #05548f; max-height: 300px; overflow: auto;}
.footer.type2 .family-site .site-list:before {display: none;}
.footer.type2 .family-site .site-category {height: 40px; display: flex; align-items: center; padding: 0 15px; color: #fff; font-weight: 700; border-bottom: 1px dashed rgba(255,255,255,0.5);}
.footer.type2 .family-site .site-category:nth-child(n+2) {border-top: 1px dashed rgba(255,255,255,0.5);}
.footer.type2 .family-site .site-list>li>a {display: block; text-align: left; padding: 7px 15px; color: #fff; opacity: 0.5; transition: opacity 0.3s;}
.footer.type2 .family-site .site-list>li>a:hover {opacity: 1;}
.footer.type2 .family-site:nth-child(n+2) {padding-top: 5px;}
.footer.type2 .family-site-wrap button {width: 100%; height: 40px; padding: 0 15px; color: #878D91; display: flex; text-align: left; align-items: center; justify-content: space-between; border: 1px solid var(--footer-border);}
.footer.type2 .family-site-wrap button:after {content: ''; display: block; width: 0; height: 0; border-top: 6px solid #878D91; border-left: 4px solid transparent; border-right: 4px solid transparent;}
.footer.type2 .family-site-wrap button.active:after {border-top: none; border-bottom: 6px solid #878D91;}
.footer.type2 .copyright {padding-top: 20px;}
.footer.type2 .copyright>span {display: inline-block;}
.footer.type2 .sns-wrap {display: flex; align-items: center; justify-content: center;}
.footer.type2 .sns-wrap>li:nth-child(n+2) {padding-left: 15px;}
.footer.type2 .sns-wrap>li>a {display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 45px; border: 1px solid var(--footer-border);}
.footer.type2 .sns-wrap>li>a:hover {opacity: 0.4; transition: all 0.3s;}

@media screen and (min-width: 768px){
    .footer.type2 {padding: 30px;}
    .footer.type2 .footer-top .left {display: flex; align-items: center; justify-content: center;}
    .footer.type2 .footer-top .util {flex-wrap: nowrap;}
    .footer.type2 .footer-top .util>a {white-space: nowrap; padding: 0; margin-right: 20px; padding-right: 20px;}
    .footer.type2 .footer-top .util>a:nth-of-type(2):before {display: block;}
    .footer.type2 .footer-top .info>a {padding: 0;}
    .footer.type2 .footer-top .info>a:last-child {padding-left: 20px;}
    .footer.type2 .footer-bottom {display: grid; grid-template-columns: 2fr 1fr; text-align: left; margin-top: 30px; border-top: 1px solid var(--footer-border);}
    .footer.type2 .footer-logo {justify-content: flex-start; font-size: 25px;}
    .footer.type2 .footer-bottom .txt {grid-template: 1; grid-row: 2;}
    .footer.type2 .sns-wrap {justify-content: flex-end;}
}
@media screen and (min-width: 1024px){
    .footer.type2 {font-size: 14px; padding: 30px 40px 40px;}
    .footer.type2 .footer-top {display: flex; justify-content: space-between;}
    .footer.type2 .family-site-wrap {margin: 0; padding-top: 0; display: flex;}
    .footer.type2 .family-site-wrap .family-site {width: 180px;}
    .footer.type2 .family-site:nth-child(n+2) {padding-top: 0; margin-left: 5px;}
    .footer.type2 .footer-top .left {justify-content: flex-start;}
    .footer.type2 .footer-top .left a:hover, .footer.type2 .footer-top .left a:focus {text-decoration: underline; text-underline-position: under;}
    .footer.type2 .footer-top .left:before {display: inline-block; content: ''; width: 1px; height: 24px; background: var(--footer-border);}
    .footer.type2 .sns-wrap>li>a {width: 50px; height: 50px;}
}
@media screen and (min-width: 1200px){
    .footer.type2 {font-size: 15px;}
    .footer.type2 .footer-top, .footer.type2 .footer-bottom {max-width: 1600px; margin: 0 auto;}
    .footer.type2 .footer-top .util {padding-left: 20px;}
    .footer.type2 .footer-bottom {margin-top: 40px;}
}

/* footer type3 - union */
.footer.type3 {position: relative; z-index: 1; background: var(--footer-bg);font-weight: 300; color: #878D91; font-size: 13px; text-align: center; padding: 30px 20px 60px;}
.footer.type3 a {color: #878D91;}
.footer.type3 .footer-logo {font-size: 23px; font-weight: 500; display: flex; align-items: center; justify-content: center;}
.footer.type3 .footer-logo img {width: 35px; height: 35px; margin-right: 5px;}
.footer.type3 .footer-top .util {display: flex; align-items: center; justify-content: center;}
.footer.type3 .footer-top .util>a {display: block;}
.footer.type3 .footer-top .util>a::after {content: ''; display: inline-block; position: relative; width: 1px; height: 15px; top: 3px; margin: 0 10px; background: var(--footer-border);}
.footer.type3 .footer-top .util>a:last-of-type::after {display: none;}
.footer.type3 .footer-top .info>a {display: inline-block; padding: 0 15px;}
.footer.type3 .family-site-wrap, .footer.type3 .footer-bottom {padding-top: 30px;}
.footer.type3 .family-site-wrap {display: flex; flex-direction: column; gap: 5px; margin: 0 auto;}
.footer.type3 .family-site-wrap .family-site {display:block; padding: 0; position: relative;}
.footer.type3 .family-site .site-list {position: absolute; width: 100%; display: none; z-index: 1; bottom: 40px; background: #05548f; max-height: 300px; overflow: auto;}
.footer.type3 .family-site .site-category {height: 40px; display: flex; align-items: center; padding: 0 15px; color: #fff; font-weight: 700; border-bottom: 1px dashed rgba(255,255,255,0.5);}
.footer.type3 .family-site .site-category:nth-child(n+2) {border-top: 1px dashed rgba(255,255,255,0.5);}
.footer.type3 .family-site .site-list>li>a {display: block; text-align: left; padding: 7px 15px; color: #fff; opacity: 0.5; transition: opacity 0.3s;}
.footer.type3 .family-site .site-list>li>a:hover {opacity: 1;}
.footer.type3 .family-site-wrap button {width: 100%; height: 40px; padding: 0 15px; color: #878D91; display: flex; text-align: left; align-items: center; justify-content: space-between; border: 1px solid var(--footer-border);}
.footer.type3 .family-site-wrap button:after {content: ''; display: block; width: 0; height: 0; border-top: 6px solid #878D91; border-left: 4px solid transparent; border-right: 4px solid transparent;}
.footer.type3 .family-site-wrap button.active:after {border-top: none; border-bottom: 6px solid #878D91;}
.footer.type3 .footer-bottom {display: flex; justify-content: center; align-items: flex-start; border-top: none; text-align: left; flex-direction: column; max-width: initial; padding: 30px 0 0;}
.footer.type3 .footer-bottom .txt-box {font-size: 12px;}
.footer.type3 .footer-bottom .txt-box .tel {display: flex; gap: 13px;}
.footer.type3 .footer-bottom .txt-box ul li span {color: #F8FAFB; padding-right: 5px;}
.footer.type3 .footer-bottom .txt-box ul li .letter {display: inline-block; font-size: 0; }
.footer.type3 .footer-bottom .txt-box ul li .letter:first-letter {font-size: 14px;}
.footer.type3 .footer-bottom .txt-box ul li .letter::after {content: '.'; color: #878D91; font-size: 14px;}

@media screen and (min-width: 768px){
    .footer.type3 {padding: 30px;}
    .footer.type3 .footer-top .left {display: flex; align-items: center; justify-content: center;}
    .footer.type3 .footer-bottom {flex-direction:row; justify-content: space-between; align-items: flex-end; margin-top: 30px; border-top: 1px solid var(--footer-border);}
    .footer.type3 .family-site-wrap {flex-wrap: wrap; flex-direction: row;}
    .footer.type3 .family-site-wrap .family-site {position: relative; width: calc(50% - 5px);}
    .footer.type3 .footer-bottom .txt-box ul {display: flex;}
    .footer.type3 .footer-bottom .txt-box ul:first-of-type {flex-direction: column;}
    .footer.type3 .footer-bottom .txt-box .tel {font-size: 16px;}
    .footer.type3 .footer-bottom .txt-box ul li .letter {font-size: inherit;}
    .footer.type3 .footer-bottom .txt-box ul li .letter:first-letter {font-size: inherit;}
    .footer.type3 .footer-bottom .txt-box ul li .letter::after {display: none;}
}
@media screen and (min-width: 1024px){
    .footer.type3 {font-size: 14px; padding: 40px;}
    .footer.type3 .footer-top {display: flex; flex-direction: column; align-items: flex-start;}
    .footer.type3 .footer-top .util>a {display: flex; font-size: 15px;}
    .footer.type3 .footer-top .util>a::after {height: 34px; margin: 0 40px; top: 0;}
    .footer.type3 .family-site-wrap {width: 100%; margin: 0; display: flex; flex-wrap: nowrap; padding-top: 30px; gap: 10px; border-top: 1px solid var(--footer-border);}
    .footer.type3 .family-site-wrap .family-site {max-width: 180px;}
    .footer.type3 .family-site-wrap .family-site button {font-size: 15px;}
    .footer.type3 .footer-bottom {flex-direction: column; align-items: flex-start; border-top: none; margin-top: 0; font-size: 15px;}
    .footer.type3 .footer-bottom .txt-box {font-size: 15px;}
    .footer.type3 .footer-bottom .txt-box ul:first-of-type {flex-direction: row; gap: 12px;}
    .footer.type3 .footer-bottom .txt-box ul>li{padding-bottom: 9px;}
    .footer.type3 .footer-top .left {justify-content: flex-start; line-height: 34px; padding-bottom: 30px;}
    .footer.type3 .footer-top .left a:hover, .footer-top .left a:focus {text-decoration: underline; text-underline-position: under;}
    .footer.type3 .footer-top .left:before {display: inline-block; content: ''; width: 1px; height: 34px; margin-right: 40px; background: var(--footer-border);}

}
@media screen and (min-width: 1350px){
    .footer.type3 .footer-top {flex-direction: row; justify-content: space-between;}
    .footer.type3 {font-size: 15px;}
    .footer.type3 .footer-top .left {padding-bottom: 0;}
    .footer.type3 .family-site-wrap {border-top: none; padding-top: 0; width: auto;}
    .footer.type3 .family-site-wrap .family-site {width: 180px;}
    .footer.type3 .footer-top, .footer.type3 .footer-bottom {max-width: 1600px; margin: 0 auto;}
    .footer.type3 .footer-bottom {flex-direction: row; margin-top: 40px; border-top: 1px solid var(--footer-border); align-items: flex-end;}
    .footer.type3 .footer-bottom .txt-box ul {gap: 30px;}
    .footer.type3 .footer-bottom .txt-box ul:first-of-type {flex-direction: row;}
}