/* 전체설정 */
html, body {height: 100%;}
@keyframes dotAction {
0% {transform: scale(1);}
100% {transform: scale(1);}
}
@keyframes dotAction {
0% {transform: scale(1);}
30% {transform: scale(0);}
60%, 100% {transform: scale(1);}
}
/* intro */
#intro {height: 100%; letter-spacing: -0.05rem; overflow-x: hidden;}
#intro .intTp {height: auto; padding: 1.5rem 0 31.8rem; position: relative;}
#intro .intTp:before {content: ""; display: block; width: 100%; height: 100%; background: url(/images/bizcard/intro_bg.png) center top no-repeat; position: absolute; left: 0; top: 0; z-index: -1;}
#intro .intTp:after {content: ""; display: block; width: 100%; height: 100%; background: url(/images/bizcard/intro_chr.png) center bottom no-repeat; position: absolute; left: 0; bottom: 0; z-index: -1;}
#intro .intTp #logo {width: 16rem; height: 1.6rem; background: url(/images/koreg/intro/logo.png) left center/contain no-repeat;}
#intro .intTp .intHd {margin-top: 1rem; position: relative;}
#intro .intTp .intHd h2 {font-size: 0; line-height: 0; position: absolute; left: 0; top: calc(50% - 3.3rem);}
#intro .intTp .intHd h2 img {max-width: 100%; max-height: 100%;}
#intro .intTp .intHd .txtBox {padding: 0 17.8rem; font-size: 2rem; font-weight: 700; text-align: center; line-height: 1.8; letter-spacing: -0.2rem; position: relative;}
#intro .intTp .intHd .txtBox .col01 {display: block; color: #287cbe;}
#intro .intTp .intHd .txtBox .col01 em {color:#f18d00;}
#intro .intTp .intHd .txtBox .col01 em sup {font-size:1.2rem; top:-1.4rem;}
#intro .intTp .intHd .txtBox .col02 {display: block; color: #0c264a;}
#intro .intTp .intHd .txtBox .col02 [class^='cc'] {color: #f18d00; position: relative;}
#intro .intTp .intHd .txtBox .col02 [class^='cc']:before {content: ""; display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; position: absolute; left: calc(50% - 0.25rem); top: -0.4rem;}
#intro .intTp .intHd .txtBox .col02 .cc01:before {background: #43c3e5;}
#intro .intTp .intHd .txtBox .col02 .cc02:before {background: #fac000;}
#intro .intTp .intHd .txtBox .col02 .cc03:before {background: #f18d00;}
#intro .intTp .intBd {margin-top: 2rem;}
#intro .intTp .intBd .colLink {display: flex; justify-content: center;}
#intro .intTp .intBd .colLink a {display: block; width: 21.7rem; border-radius: 5.05rem; border: 4px solid #222; padding: 1rem 1rem; font-size: 1.7rem; font-weight: 700; text-align: center; margin: 0 1rem;}
#intro .intTp .intBd .colLink a.link01 {border-color: #ffa92f; color: #222;}
#intro .intTp .intBd .colLink a.link02 {border-color: #43c3e5; color: #287cbe;}
#intro .intBt {background: #fce79f; padding: 2.5rem 0;}
#intro .intBt .copyright {font-size: 0.75rem; color: #222; text-align: center; letter-spacing: 0;}
/* intro : active */
#intro .intTp .intBd .colLink a {transition: 0.15s;}
#intro.tabOn .intTp {padding-bottom: 3.5rem;}
#intro.tabOn .intTp:after {opacity: 0;}
#intro .intTp .intBd .colLink a.link01:hover,
#intro .intTp .intBd .colLink a.link01:focus,
#intro .intTp .intBd .colLink a.link01.actv {border-color: #fce79f; background: #fce79f;}
#intro .intTp .intBd .colLink a.link02:hover,
#intro .intTp .intBd .colLink a.link02:focus,
#intro .intTp .intBd .colLink a.link02.actv {border-color: #d1ebff; background: #d1ebff;}
/* intro : animate */
#intro .intTp .intHd .txtBox .col02 .cc01:before {animation: dotAction 1.5s infinite;}
#intro .intTp .intHd .txtBox .col02 .cc02:before {animation: dotAction 1.5s infinite; animation-delay: 0.25s;}
#intro .intTp .intHd .txtBox .col02 .cc03:before {animation: dotAction 1.5s infinite; animation-delay: 0.5s;}
/* con */
[id^='con'] {display: none; border-radius: 3rem 3rem 0 0; border: 2px solid #d0d0d0; background: rgba(255,255,255,0.9); padding: 2.5rem 2.5rem 3.5rem; margin-top: 2.5rem; word-break: keep-all;}
[id^='con'] [class^='row'] + [class^='row'] {margin-top: 2rem;}
[id^='con'] .imgBox {border-radius: 0.5rem; border: 1px solid #d6d6d6; text-align: center;}
[id^='con'] [class^='list_st'] > li {font-size: inherit; margin-top: 0;}
[id^='con'] p + [class^='list_st'],
[id^='con'] [class^='list_st'] > li + li,
[id^='con'] [class^='list_st'] > li > [class^='list_st'] {margin-top: 0.5rem;}
/* con01 */
#con01 .row01 {display: flex; flex-wrap: wrap; justify-content: space-between;}
#con01 .row01 h2 {width: 100%;}
#con01 .row01 .list_st1 {width: 100%;}
#con01 .row01 .imgBox {display: flex; width: 100%; margin-top: 2rem;}
#con01 .row01 .imgBox .col {width: calc(100% / 3); font-size: 0; line-height: 0;}
#con01 .row01 .imgBox .col + .col {border-left: 1px dashed #c4c4c4;}
#con01 .row01 .imgBox .col .rsp_img {padding: 0 1rem;}
#con01 .row01 .imgBox .col .rsp_img img {max-width: 100%;}
#con01 .row01 .bu_wnrn {width: calc(100% - 17.75rem); margin-top: 0.75rem;}
#con01 .row01 .btns {margin: 0.75rem 0 0;}
#con01 .row02 .imgBox {margin-top: 1rem;}
#con01 .row02 .imgBox .rsp_img {padding: 2.35rem 1rem;}
#con01 .row02 .bu_wnrn {margin-top: 0.75rem;}
#con01 .row03 .tbl_st > table td table {border-top: 1px solid #ddd;}
#con01 .row03 .tbl_st > table td table th {border-color: #ddd !important; background: #fffaea; padding: 0.5rem; font-size: inherit; color: inherit;}
#con01 .row03 .tbl_st > table td table td {border-color: #ddd !important; padding: 0.25rem 0.5rem;}
#con01 .row03 .tbl_st > table td span {display: block; font-size: 0.7rem; color: #999; margin-top: 0.25rem;}
#con01 .row04 .rowCon [class^='rc_Row_01'] {display: flex; justify-content: space-between;}
#con01 .row04 .rowCon [class^='rc_Row_01'] + [class^='rc_Row_01'] {margin-top: 1rem;}
#con01 .row04 .rowCon [class^='rc_Row_01'] > .tit {display: flex; justify-content: center; align-items: center; width: 7.5rem; border: 2px solid #000; padding: 0.95rem 1rem; text-align: center;}
#con01 .row04 .rowCon .rc_Row_0101 > .tit {border-color: #ff9344;}
#con01 .row04 .rowCon .rc_Row_0102 > .tit {border-color: #9093a0; position: relative;}
#con01 .row04 .rowCon .rc_Row_0102 > .tit:after {content: ""; display: block; width: 1.3rem; height: 0.55rem; border-left: 0.65rem solid transparent; border-right: 0.65rem solid transparent; border-top: 0.55rem solid #9093a0; position: absolute; left: calc(50% - 0.65rem); bottom: -2px; transform: translateY(100%);}
#con01 .row04 .rowCon .rc_Row_0103 > .tit {border-color: #3d5483;}
#con01 .row04 .rowCon [class^='rc_Row_01'] > .tit span {font-size: 1.05rem; font-weight: 600; position: relative;}
#con01 .row04 .rowCon .rc_Row_0101 > .tit span {color: #222;}
#con01 .row04 .rowCon .rc_Row_0102 > .tit span {color: #555;}
#con01 .row04 .rowCon .rc_Row_0103 > .tit span {color: #2e3950;}
#con01 .row04 .rowCon .rc_Row_0102 > .tit span:before {content: ""; display: block; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #9093a0; position: absolute; left: -0.3rem; top: -0.2rem;}
#con01 .row04 .rowCon .rc_Row_0103 > .tit span:before {content: ""; display: block; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #7995cf; position: absolute; left: -0.3rem; top: -0.2rem;}
#con01 .row04 .rowCon [class^='rc_Row_01'] > .con {display: flex; flex-wrap: wrap; justify-content: space-between; width: calc(100% - 9rem);}
#con01 .row04 .rowCon [class^='rc_Row_02'] {display: flex; justify-content: space-between; width: 100%;}
#con01 .row04 .rowCon [class^='rc_Row_02'] + [class^='rc_Row_02'] {padding-top: 2rem;}
#con01 .row04 .rowCon [class^='rc_Row_02'] + [class^='rc_Row_02'] .txtBox01:before {content: ""; display: block; width: 1.3rem; height: 0.55rem; border-left: 0.65rem solid transparent; border-right: 0.65rem solid transparent; border-top: 0.55rem solid #adcbdb; position: absolute; left: calc(50% - 0.65rem); top: -1.26rem;}
#con01 .row04 .rowCon .txtBox01 {display: flex; align-items: center; width: calc(74.5% - 1.3rem); border: 2px solid #e0e0e0; padding: 1.25rem 1.5rem; position: relative;}
#con01 .row04 .rowCon .txtBox01 .pl {display: block; font-size: 0.8rem; color: #999; margin-top: 0.25rem;}
#con01 .row04 .rowCon .txtBox02 {display: flex; justify-content: center; align-items: center; width: 25.5%; border: 2px solid #e0e0e0; padding: 0 1.5rem; color: #404a5f; font-weight: 600; text-align: center;}
#con01 .row04 .rowCon .rc_Row_0101 .con [class^='txtBox'] {display: flex; justify-content: center; align-items: center; padding: 0.95rem 1rem; font-size: 1.05rem; color: #222; font-weight: 600; text-align: center;}
#con01 .row04 .rowCon .rc_Row_0101 .con .txtBox01 {border-color: #0288d1;}
#con01 .row04 .rowCon .rc_Row_0101 .con .txtBox02 {border-color: #a9a9a9;}
/* con02 */
#con02 .imgBox {display: flex; text-align: left; margin-top: 0.7rem;}
#con02 .imgBox .imgWr {display: flex; justify-content: center; align-items: center; width: 12.8rem; padding: 1.35rem 1rem; font-size: 0; line-height: 0;}
#con02 .imgBox .imgWr img {max-width: 100%;}
#con02 .imgBox dl {display: flex; align-items: center; width: calc(100% - 12.8rem); border-left: 1px dashed #c4c4c4; padding: 1.35rem 0; padding-left: 2.3rem; padding-right: 2rem;}
#con02 .imgBox dl dt {width: 19%; padding-right: 1rem; font-weight: 600;}
#con02 .imgBox dl dd {display: flex; justify-content: space-between; align-items: center; width: 81%;}
#con02 .imgBox dl dd .list_st1 {width: calc(100% - 4rem);}
#con02 .imgBox dl dd a {display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #f1f1f1; font-size: 1.3rem; color: #8f8f8f;}
/* con02 : active */
#con02 .imgBox dl dd a {transition: 0.15s;}
#con02 .imgBox dl dd a:hover,
#con02 .imgBox dl dd a:focus {background: #007bad; color: #fff;}
/* 반응형 */
@media (max-width: 1600px) {
/* intro */
#intro .intTp {padding-bottom: 30rem;}
#intro .intTp .intBd .colLink a {width: 20rem; font-size: 1.5rem;}
}
@media (max-width: 1400px) {
/* intro */
#intro .intTp .intHd h2 {width: 14.3rem; top: 50%; transform: translateY(-50%);}
#intro .intTp .intHd .txtBox {padding: 0 16.8rem;}
/* con01 */
#con01 .row01 .imgBox {margin-top: 1rem;}
}
@media (max-width: 1280px) {
/* intro */
#intro .intTp .intHd h2 {width: 12rem;}
#intro .intTp .intHd .txtBox {padding: 0 13.5rem; font-size: 1.8rem;}
#intro .intTp .intHd .txtBox .col02 [class^='cc']:before {width: 0.4rem; height: 0.4rem; left: calc(50% - 0.2rem); top: -0.3rem;}
#intro .intTp .intBd .colLink a {width: 17.5rem; font-size: 1.4rem;}
/* con01 */
#con01 .row01 .bu_wnrn {width: calc(100% - 10.75rem);}
#con01 .row04 .rowCon [class^='rc_Row_01'] > .tit span {font-size: 1rem;}
#con01 .row04 .rowCon .txtBox01 {padding: 1.25rem 1rem;}
#con01 .row04 .rowCon .txtBox02 {padding: 0 1rem;}
#con01 .row04 .rowCon .rc_Row_0101 .con [class^='txtBox'] {font-size: 1rem;}
/* con02 */
#con02 .imgBox dl {display: block;}
#con02 .imgBox dl dt {width: 100%; padding-right: 0; color: #000;}
#con02 .imgBox dl dd {width: 100%; margin-top: 0.5rem;}
}
@media (max-width: 1024px) {
/* intro */
#intro .intTp {padding-bottom: 65vw;}
#intro .intTp:after {width: calc(100% + 170vw); background: url(/images/bizcard/intro_chr.png) center bottom/contain no-repeat; left: -82.5vw;}
#intro .intTp .intHd {display: flex; justify-content: center; align-items: center;}
#intro .intTp .intHd h2 {position: static; transform: none;}
#intro .intTp .intHd .txtBox {padding: 0; margin-left: 2.5rem;}
#intro .intTp .intBd {margin-top: 4vw;}
#intro .intTp .intBd .colLink {justify-content: space-between;}
#intro .intTp .intBd .colLink a {width: 46%; border-width: 3px; padding: 0.75rem 1rem; margin: 0 2%;}
/* intro : active */
#intro.tabOn .intTp {padding-bottom: 2rem;}
/* con */
[id^='con'] {border-radius: 1.5rem 1.5rem 0 0; border-color: #eee; padding: 1.5rem 1rem 2rem; margin-top: 4vw;}
/* con01 */
#con01 .row02 .imgBox .rsp_img {padding: 1rem;}
#con01 .row03 .scroll_gr > table table {width: 100%;}
#con01 .row04 .rowCon [class^='rc_Row_01'] > .con {display: block;}
#con01 .row04 .rowCon [class^='rc_Row_02'] {display: block;}
#con01 .row04 .rowCon .txtBox01 {width: 100%; border-bottom: 0; padding: 1rem;}
#con01 .row04 .rowCon .txtBox02 {width: 100%; border-top: 2px dashed #c4c4c4; padding: 1rem;}
}
@media (max-width: 768px) {
/* intro */
#intro .intTp .intHd {margin-top: 6vw;}
#intro .intTp .intHd h2 {width: auto; height: 5rem;}
#intro .intTp .intHd .txtBox {font-size: 1.6rem;}
#intro .intTp .intBd .colLink a {font-size: 1.2rem;}
/* con01 */
#con01 .row04 .rowCon [class^='rc_Row_01'] > .tit {width: 6rem;}
#con01 .row04 .rowCon [class^='rc_Row_01'] > .tit span {font-size: 0.9rem;}
#con01 .row04 .rowCon [class^='rc_Row_01'] > .con {width: calc(100% - 7rem);}
#con01 .row04 .rowCon .rc_Row_0101 .con [class^='txtBox'] {font-size: 0.9rem;}
/* con02 */
#con02 .imgBox {flex-direction: column;}
#con02 .imgBox .imgWr {width: 100%;}
#con02 .imgBox dl {width: 100%; border-left: 0; border-top: 1px dashed #c4c4c4; padding: 1rem;}
}
@media (max-width: 580px) {
/* intro */
#intro .intTp #logo {background: url(/images/koreg/intro/logo_m.png) left center/contain no-repeat;}
#intro .intTp .intHd {flex-direction: column;}
#intro .intTp .intHd .txtBox {margin-left: 0; margin-top: 0.75rem;}
#intro .intTp .intBd .colLink a {font-size: 1.1rem;}
/* con */
[id^='con'] {padding: 1.25rem 0.75rem 1.75rem;}
/* con01 */
#con01 .row01 .bu_wnrn {width: 100%;}
#con01 .row01 .btns {width: 100%; text-align: right;}
}
@media (max-width: 480px) {
/* intro */
#intro .intTp .intHd h2 {height: 4.5rem;}
#intro .intTp .intHd .txtBox {font-size: 1.4rem;}
#intro .intTp .intBd {margin-top: 6vw;}
#intro .intTp .intBd .colLink a {width: 49%; padding: 0.75rem 0.5rem; font-size: 1rem; margin: 0;}
/* con */
[id^='con'] {margin-top: 6vw;}
/* con01 */
#con01 .row01 .imgBox {flex-direction: column;}
#con01 .row01 .imgBox .col {width: 100%;}
#con01 .row01 .imgBox .col + .col {border-left: 0; border-top: 1px dashed #c4c4c4;}
#con01 .row01 .imgBox .col .rsp_img {padding: 0;}
#con01 .row01 .imgBox .col .rsp_img img {width: 50%;}
#con01 .row04 .rowCon [class^='rc_Row_01'] {flex-direction: column;}
#con01 .row04 .rowCon [class^='rc_Row_01'] + [class^='rc_Row_01'] {margin-top: 1.25rem;}
#con01 .row04 .rowCon .rc_Row_0102 {position: relative;}
#con01 .row04 .rowCon .rc_Row_0102:after {content: ""; display: block; width: 1.3rem; height: 0.55rem; border-left: 0.65rem solid transparent; border-right: 0.65rem solid transparent; border-top: 0.55rem solid #e0e0e0; position: absolute; left: calc(50% - 0.65rem); bottom: 0; transform: translateY(100%);}
#con01 .row04 .rowCon [class^='rc_Row_01'] > .tit {width: 100%;}
#con01 .row04 .rowCon .rc_Row_0102 > .tit:after {display: none;}
#con01 .row04 .rowCon [class^='rc_Row_01'] > .tit span br {display: none;}
#con01 .row04 .rowCon [class^='rc_Row_01'] > .con {width: 100%; margin-top: 0.5rem;}
}
@media (max-width: 380px) {
/* intro */
#intro .intTp .intHd h2 {height: 4rem;}
#intro .intTp .intHd .txtBox {font-size: 1.2rem; line-height: 1.6;}
#intro .intTp .intHd .txtBox .col02 [class^='cc']:before {width: 0.3rem; height: 0.3rem; left: calc(50% - 0.15rem); top: -0.2rem;}
#intro .intTp .intBd .colLink {flex-direction: column; align-items: center;}
#intro .intTp .intBd .colLink a {width: 70%; border-width: 2px; padding: 0.5rem;}
#intro .intTp .intBd .colLink a + a {margin-top: 0.5rem;}
#intro .intBt {padding: 2rem 0;}
#intro .intBt .copyright {font-size: 0.7rem;}
/* con02 */
#con02 .imgBox dl dd {flex-direction: column;}
#con02 .imgBox dl dd .list_st1 {width: 100%;}
#con02 .imgBox dl dd a {width: 2.5rem; height: 2.5rem; margin-top: 1rem;}
}