header #menu li a,
.layout-foot-wrap ul li a {
  text-decoration: none;
}

/*********************************************************
        PC header area  
*/
header {
  position: fixed; top: 0px; left: 0px; z-index: 10;
  width: 100%; height: 78px;
  background-color: rgba(255, 255, 255, 1);
  -webkit-transition-duration:0.4s;
  -webkit-transition-timing-function:ease;
  transition-duration:0.4s;
  transition-timing-function:ease;
}
header {
  background-color: rgba(0, 0, 0, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
header.activated {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 8px rgba(0,0,0, 0.15);
}
header #menu {
  position: relative; top: 0; left: 50%; z-index: 1;
  transform: translateX(-50%);
  width: 1200px; height: 78px;
  padding: 0; margin: 0;
}
header #menu > h1 a.logo {
  position: fixed; top: 12px; left: 0%; z-index: 2;
  width: 145px; height: 60px;
  background: url('../img/common/ulife_financial_4.png?e') no-repeat;
  background-size: 100%;
}
header.activated #menu > h1 a.logo {
  position: fixed; top: 12px; left: 0%; z-index: 2;
  width: 145px; height: 60px;
  background: url('../img/common/ulife_financial_3.png?e') no-repeat;
  background-size: 100%;
}
header #menu ul {
  display: flex;
  flex-direction: row; align-content: center; justify-content: flex-end; align-items: center;
}
header #menu li {
  display: inline-block;
  margin: 0px 1rem;
  background: transparent; color: var(--color-white);
  -webkit-border-radius: 10px;
		  border-radius: 10px;
}
header #menu li:hover {
  background: transparent;
}
header #menu li a, 
header #menu li.active a {
  padding: 0px 18px; height: 78px; line-height: 78px;
  display: block;
  font-size: var(--fS-ttl-1-125);
}
header #menu li a {
  color: var(--color-white);
}
header #menu li a:hover {
  color: var(--color-yellow);
}
header #menu li.active {
  background: transparent;
}
header.activated #menu li a,
header.activated #menu li.active a {
  color: var(--color-black);
}
header #menu l a:hover,
header #menu li.active a:hover {
  color: var(--point-color);
}


/*********************************************************
        PC Footer area  
*/
#section5 {
  width: 100%; height: 187px; min-height: 187px;
  /* margin-top: 6.25rem; */
  background-color: var(--color-dark-gray);
}
#section5 .intro.footer {
  position: relative;
}
#section5 .intro.footer ul {
  overflow: hidden;
  margin-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .25)
}
#section5 .intro.footer > ul li {
  position: relative;
  float: left;
  padding: .55rem 1.5625rem;
}
#section5 .intro.footer > ul li:first-child {
  padding-left: 0rem;
}
.footer > ul li a.link {
  display: block;
  font-size: var(--fS-txt-1); font-weight: 400; color: var(--color-white);
  line-height: 1.4;
}
.footer > ul li:after {
  content: "";
  position: absolute; top: 12px; right: 0;
  width: 1px; height: 16px;
  background-color: rgba(255, 255, 255, .35);
}
.footer > ul li:last-child:after {
  position: absolute; top: 0px; right: 0;
  width: 0px; height: 0px;
  background-color: rgba(255, 255, 255, .0);
}
.footer > ul li a.link:hover {
  color: var(--color-yellow);
}
.footer .foot-add-wrap {
  margin-top: .75rem;
}
.footer .foot-add-wrap p {
  text-align: left;
  width: 100%; line-height: 1.6;
  font-size: 0; padding-top: .35rem;
}
.footer .foot-add-wrap p span {
  position: relative;
  font-size: var(--fS-txt-875); font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, .55);
  padding: 0 1rem; letter-spacing: 0;
}
.footer .foot-add-wrap p span:after {
  content: "";
  position: absolute; top: 5px; right: 0;
  width: 1px; height: 11px;
  background-color: rgba(255, 255, 255, .35);
}
.footer .foot-add-wrap p span:nth-child(4n+1) {
  padding-left: 0rem;
}
.footer .foot-add-wrap p span:last-child:after {
  position: absolute; top: 0px; right: 0;
  width: 0px; height: 0px;
  background-color: rgba(255, 255, 255, .0);
}


/************************************************************************** Footer */
footer {
  width: 100%; height: 187px; min-height: 187px;
  background-color: var(--color-dark-gray);
}
.layout-foot-wrap {
  position: relative;
  overflow: hidden;
  width: 1200px; margin: 0 auto; margin-top: 1rem;
}
.layout-foot-wrap ul {
  margin-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .25)
}
.layout-foot-wrap ul li {
  position: relative;
  padding: .55rem 1.5625rem;
}
.layout-foot-wrap ul li:after {
  content: "";
  position: absolute; top: 13px; right: 0;
  width: 1px; height: 14px;
  background-color: rgba(255, 255, 255, .35);
}
.layout-foot-wrap ul li:last-child:after {
  position: absolute; top: 0px; right: 0;
  width: 0px; height: 0px;
  background-color: rgba(255, 255, 255, .0);
}
.layout-foot-wrap ul li:first-child {
  padding-left: 0rem;
}
.layout-foot-wrap ul li a.link {
  display: block;
  font-size: var(--fS-txt-1); font-weight: 400; color: var(--color-white);
  line-height: 1.4;
}
.font-cont-wrap {
  display: block;
  margin-top: .3125rem;
}
.font-cont-wrap.first {
  margin-top: 1.55rem;
}
.font-cont-wrap,
.font-cont-wrap span {
  position: relative;
  font-size: var(--fS-txt-875); font-weight: 300; color: var(--color-white);
  line-height: 1.4; letter-spacing: 0;
}
.font-cont-wrap span {
  display: inline-block;
  padding: 0 1rem;
}
.font-cont-wrap span:after {
  content: "";
  position: absolute; top: 5px; right: 0;
  width: 1px; height: 11px;
  background-color: rgba(255, 255, 255, .35);
}
.font-cont-wrap span:nth-child(4n+1) {
  padding-left: 0rem;
}
.font-cont-wrap span:last-child:after {
  position: absolute; top: 0px; right: 0;
  width: 0px; height: 0px;
}

a.kbstar {
  position: absolute; top: 78px; right: 0;
  width: 72px;
}
a.kbstar img {
  height: 100%;
}


/*********************************************************
        PC Basic area  
*/
.type-dash {
  text-indent: -10px;
  padding-left: 10px;
}
.radius {
  border-radius: 30px;
}
.radius-10 {
  border-radius: 10px;
}
.radius-3300 {
  border-radius: 30px 30px 0 0;
}
.radius-0033 {
  border-radius: 0 0 30px 30px;
}
.radius-1100 {
  border-radius: 10px 10px 0 0;
}
.radius-0011 {
  border-radius: 0 0 10px 10px;
}


/*********************************************************
        Box list style css
*/
.icon-item {
  display: flex;
  align-items: center; justify-content: center;
}
.icon-item > i {
  display: block;
  width: 78px; height: 78px;
  background-color: var(--color-black);
}
.box-list-warp {
  position: relative;
  display: flex; flex-direction: row; align-items: flex-start;
  width: 100%;
  background-color: var(--color-white);
}
.box-list-warp > .box-list {
  width: 100%; height: auto;
  margin-left: 36px;
}
.box-list-warp.second > .box-list {
  border: 1px solid var(--color-ligth-gray);
}
.box-list-warp > .box-list:only-child {
  width: 100%;
}
.box-list-warp > .box-list:nth-last-child(2), .box-list-warp > .box-list:nth-last-child(2)+.box-list {
  width: 582px;
}
.box-list-warp > .box-list:nth-last-child(3), .box-list-warp > .box-list:nth-last-child(3)~.box-list {
  width: 376px;
}
.box-list-warp > .box-list:nth-last-child(4), .box-list-warp > .box-list:nth-last-child(4)~.box-list {
  width: 273px;
}
.box-list-warp > .box-list:first-child {
  margin-left: 0;
}
.box-list-warp > .box-list > .box-inner {
  display: flex;
  flex-direction: row; align-items: center; justify-content: flex-start;
  padding-top: 0;
  padding: 50px;
}
.box-list-warp > .box-list > .box-inner .icon-item {
  width: 150px; height: 150px;
  border-radius: 100%;
  background-color: var(--color-snow);
}
.box-list-warp > .box-list > .box-inner .icon-item > i {
  display: block;
  width: 78px; height: 78px;
  background-color: var(--color-black);
}
.box-list-warp > .box-list > .box-inner .cont-box {
  margin-left: 50px;
}
.box-list-warp > .box-list > .inner .cont-box > h3 {
  font-size: var(--fS-ttl-1-75); font-weight: 700;
}
.box-list-warp > .box-list > strong {
  display: block;
  font-size: var(--fS-ttl-1-55);
  padding-top: 20px;
}
.box-list-warp > .box-list > p.text-conts-itme {
  font-size: var(--fS-txt-1);
  padding-top: 10px;
}


/*********************************************************
        Table style css
*/
.table-gray {
  width:100%;
  border-collapse:collapse;
  border-spacing:0px;
}
.table-gray thead th, .table-gray tbody th, .table-gray tbody td, .table-gray tfoot tr th, .table-gray tfoot tr td {
  border: 1px solid var(--color-silver);
  padding: .75rem 1.25rem;
  font-size: var(--fS-txt-75); font-weight: 400; line-height: 1.4;
  vertical-align: middle; letter-spacing: -.0313rem;
  word-break: keep-all;
}
.table-gray thead th {
  background-color: #e2e2e2;
  font-weight: 700; font-size: var(--fS-txt-95);
  text-align: center;
}
.table-gray tbody th, .table-gray tfoot tr th {
  background-color: var(--color-snow);
  text-align: left; font-weight: 700;
}
.table-gray tbody td {
  font-size: var(--fS-txt-8);
  background-color: var(--color-white);
}
.table-gray tbody td.center,
.table-gray tfoot td.center {
  text-align: center;
}
.table-gray tbody td.right,
.table-gray tfoot td.right {
  text-align: right;
}
/* .table-gray tbody td.right.won {
  font-size: var(--fS-txt-7);
} */
.table-gray tfoot tr th,
.table-gray tfoot tr td {
  background-color: #E9F6FB;
  font-weight: 700;
  color: var(--color-navy);
}



/*********************************************************
        PC Layer PopUp area  
*/
/* modal */
#modal {
  position: fixed; left:0; top:0; z-index: 11;
  width: 100%; height: 100%; 
  transform: scale(0);
}
#modal .modal-bg {
  background: rgba(0,0,0,0.7); 
  display:flex; 
  align-items: center; justify-content: center; 
  height: 100%;
}
#modal .modal-bg .modal-cont {
  position:relative; 
  display: inline-block;
  background: #fff; 
  padding: 40px; min-width: 520px;
}
#modal .modal-bg .modal-cont h2 {
  position: relative; 
  padding: 0; margin: 0; margin-bottom: 1rem;
  font-size: 1.55rem; font-weight: 700;  
}
#modal .modal-bg .modal-cont p {
  position: relative; 
  font-size: 1rem; 
}
#modal .modal-bg .modal-cont .close {  
  display: block;
  margin: 0px auto; padding: 0;
  width: 180px; height: 48px;
  border-radius: 3px;
  margin-top: 1rem;
}
#modal .modal-bg .modal-cont .claose-box {
  position: absolute; top: 40px; right: 40px;
  width: 24px; height: 24px;
  cursor: pointer;
}
#modal .modal-bg .modal-cont .claose-box a {
  display: block;
  position: relative;
  margin: 0px;
  width: 100%; height: 100%;
  border-radius: 0px;
}
#modal .modal-bg .modal-cont .claose-box i.icon-btn-close {
  display: block;
  width: 24px; height: 24px;  
  background-color: #000; background-size: 100%;
  -webkit-mask: url('../img/sub/icon-btn-close.svg') no-repeat;
          mask: url('../img/sub/icon-btn-close.svg') no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}
#modal .modal-bg .modal-cont .close svg {
  width: 24px; fill: #fff; vertical-align: top;
}
#modal .modal-bg .modal-cont .modal-cont-item {
  overflow-y: scroll;
  border: 1px solid var(--color-ligth-gray);
  padding: 1rem; text-align: left;
}
#modal .modal-bg .modal-cont > .modal-cont-item p {
  position: relative; 
  font-size: 1rem; line-height: 1.4; font-weight: 400;
}
#modal .modal-bg .modal-cont > .modal-cont-item p.first {
  padding-top: .75rem;
}
#modal .modal-bg .modal-cont > .modal-cont-item strong {
  display: block;
  font-size: 1rem; font-weight: 700; line-height: 1.6;
  margin-bottom: .55rem;
}
#modal .modal-bg .modal-reser-item {
  position:relative; 
  width: 520px;
  border-top: 2px solid #000;
  padding-top: 1.25rem; text-align: left;
}
#modal .modal-bg .modal-reser-item form {
  width: 100%;
}
#modal .modal-bg .modal-reser-item form > ul li,
#modal .modal-bg .modal-reser-item > ul li {
  margin-top: .55rem;
}
#modal .modal-bg .modal-reser-item form > ul li:first-child,
#modal .modal-bg .modal-reser-item > ul li:first-child {
  margin-top: 0rem;
}
.modal-reser-item form > ul li > h3,
.modal-reser-item > ul li > h3 {
  font-size: var(--fS-ttl-1-125); font-weight: 700;
  margin-top: 1rem;
}
.modal-reser-item form > ul li .input01,
.modal-reser-item > ul li .input01 {
  font-weight: 400;
  width: calc(100% - .75rem);
  padding-left: .75rem;
}
.modal-reser-item form > ul li .textarea,
.modal-reser-item > ul li .textarea {
  border: 1px solid var(--color-ligth-gray);
  width: calc(100% - 1.1rem);
  padding: 1rem 0.55rem;
}
.modal-reser-item form > ul li .box-privacy-item,
.modal-reser-item > ul li .box-privacy-item {
  overflow-y: scroll;
  max-height: 120px;
  border: 1px solid var(--color-ligth-gray);
  width: calc(100% - 1.1rem);
  margin-top: 1rem; padding: .55rem;
}
.modal-reser-item form > ul li .box-privacy-item strong,
.modal-reser-item > ul li .box-privacy-item strong {
  font-size: var(--fS-txt-1); font-weight: 700;
}
.modal-reser-item form > ul li .box-privacy-item strong,
.modal-reser-item > ul li .box-privacy-item strong {
  font-size: var(--fS-txt-95); font-weight: 700;
}
#modal.two .modal-bg .modal-cont .modal-reser-item form > ul li .box-privacy-item p,
#modal.two .modal-bg .modal-cont .modal-reser-item > ul li .box-privacy-item p {
  font-size: var(--fS-txt-8); font-weight: 400;
  padding-top: .55rem;
}             
#modal.two .modal-bg .modal-cont .modal-reser-item form .agree,
#modal.two .modal-bg .modal-cont .modal-reser-item .agree {
  margin-top: .55rem;
}
#modal.two .modal-bg .modal-cont .modal-reser-item form .agree label.checkbox:before,
#modal.two .modal-bg .modal-cont .modal-reser-item .agree label.checkbox:before {
  border-color: var(--color-black);
}
#modal.two .modal-bg .modal-cont .modal-reser-item form .agree label.checkbox span:after,
#modal.two .modal-bg .modal-cont .modal-reser-item form .agree label.checkbox  span::before,
#modal.two .modal-bg .modal-cont .modal-reser-item .agree label.checkbox span:after,
#modal.two .modal-bg .modal-cont .modal-reser-item .agree label.checkbox  span::before {
  background-color: var(--color-black);
}
#modal.two .modal-bg .modal-cont .modal-reser-item form > ul li .close,
#modal.two .modal-bg .modal-cont .modal-reser-item > ul li .close {
  width: 100%;
}

/* 2023.08.03 수정내용 */
#modal .modal-bg .modal-cont .box-textarea {
  background-color: var(--color-snow);
  padding: 30px;
  width: calc(100% - 30px - 30px);
}
#modal .modal-bg .modal-cont .box-textarea > strong {
  font-size: var(--fS-txt-1-05); font-weight: 700;
}
#modal .modal-bg .modal-cont .box-textarea > ul {
  margin-top: 15px;
}
#modal .modal-bg .modal-cont .box-textarea > ul li {
  margin-top: 5px;
  font-size: var(--fS-txt-875); font-weight: 400;
}
#modal .modal-bg .modal-cont .box-textarea > ul li > b {
  font-weight: 700;
}


/* one */
#modal.one {
	transform: scale(1);
}
#modal.one.out {
	transform: scale(0);
}
/* two */
#modal.two {
	transform: scaleY(0.01) scaleX(0);
	animation: unfoldIn 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.two .modal-bg .modal-cont {
	transform: scale(0);
	animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

#modal.two.out {
	transform: scale(1);
	animation: unfoldOut 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.two.out .modal-bg .modal-cont {
	transform: scale(0);
	animation: zoomOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

/* three */
#modal.three {
	transform: scale(1);
}
#modal.three .modal-bg {
	background: rgba(0,0,0,0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.three .modal-bg .modal-cont {
	opacity: 0;
	animation: scaleUp 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.three.out {
	animation: quickScaleDown 0s .5s linear forwards;
}
#modal.three.out .modal-bg {
	background: rgba(0,0,0,0);
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.three.out .modal-bg .modal-cont {
	opacity: 0;
	animation: scaleDown 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

#modal.four {
	transform: scale(1);
}
#modal.four .modal-bg {
	background: rgba(0,0,0,0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.four .modal-bg .modal-cont {
	transform: translatex(-1500px);
	animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

#modal.out.four {
	animation: quickScaleDown 0s .5s linear forwards;
}
#modal.out.four .modal-bg {
	background: rgba(0,0,0,0);
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.out.four .modal-bg .modal-cont {
	animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

#modal.five {
	transform: scale(1);
}
#modal.five .modal-bg {
	background: rgba(0,0,0,0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.five .modal-bg .modal-cont {
	border-radius: 75px;
	height: 75px;
	width: 75px;
	overflow: hidden;
	animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.five .modal-bg .modal-cont h2, #modal.five .modal-bg .modal-cont p {
	opacity:0;
	animation: modalContentFadeIn 0.5s 1.4s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.five .modal-bg .modal-cont .close {
	opacity:0;
	animation: closeFadeIn 0.5s 1.4s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

#modal.out.five {
	animation: slowFade 0.5s 1.5s linear forwards;
}
#modal.out.five .modal-bg {
	background: rgba(0,0,0,0.7);
	animation: fadeToRed 2s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.out.five .modal-bg .modal-cont {
	border-radius: 3px;
	height: 200px;
	width: 450px;
	animation: killShot 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.out.five .modal-bg .modal-cont h2, #modal.out.five .modal-bg .modal-cont p {
	animation: modalContentFadeOut 0.5s 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.out.five .modal-bg .modal-cont .close {
	animation: closeFadeOut 0.5s 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}



/*********************************************************
        PC @keyframes area  
*/
@keyframes visual-zoom {
  0% {
    transform: scale(1.3);
    -webkit-transform:scale(1.3);  /*  크롬 */
    -moz-transform:scale(1.3);     /* FireFox */
    -o-transform:scale(1.3);        /* Opera */ 
  }
  100% {
    transform: scale(1);
    -webkit-transform:scale(1);  /*  크롬 */
    -moz-transform:scale(1);     /* FireFox */
    -o-transform:scale(1);        /* Opera */ 
  }
}

@keyframes unfoldIn{
	0% {transform: scaleY(0.005) scaleX(0);}
	50% {transform: scaleY(0.005) scaleX(1);}
	100% {transform: scaleY(1) scaleX(1);}
}
@keyframes unfoldOut{
	0% {transform: scaleY(1) scaleX(1);}
	50% {transform: scaleY(0.005) scaleX(1);}
	100% {transform: scaleY(0.005) scaleX(0);}
}
@keyframes zoomIn {
	0% {transform: scale(0);}
	100% {transform: scale(1); }
}
@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0); }
}

@keyframes roadRunnerIn {
	0% {transform: translatex(-1500px) skew(30deg) scalex(1.3); }
	70% {transform: translatex(30px) skew(0deg) scalex(0.9);}
	100% {transform: translatex(0px) skew(0deg) scalex(1);}
}
@keyframes roadRunnerOut {
	0% {transform: translatex(0px) skew(0deg) scalex(1); }
	70% {transform: translatex(-30px) skew(-5deg) scalex(0.9);}
	100% {transform: translatex(1500px) skew(30deg) scalex(1.3);}
}

@keyframes fadeIn {
	0% {background: rgba(0,0,0,0)}
	100% {background: rgba(0,0,0,0.7)}
}
@keyframes fadeOut {
	0% {background: rgba(0,0,0,0.7)}
	100% {background: rgba(0,0,0,0)}
}

@keyframes scaleUp {
	0% {transform: scale(0.5) translatey(1000px); opacity:0}
	100% {transform: scale(1) translatey(0px); opacity:1}
}
@keyframes scaleDown {
	0% {transform: scale(1) translatey(0px); opacity:1}
	100% {transform: scale(0.5) translatey(1000px); opacity:0}
}
@keyframes quickScaleDown {
	0% {transform: scale(1);}
	99.9% {transform: scale(1); }
	100% {transform: scale(0); }
}

@keyframes slowFade {
	0% {opacity: 1;}
	99.9% {opacity:0; transform: scale(1);}
	100% {transform: scale(0);}
}
@keyframes fadeToRed {
	0% {box-shadow: inset 0 0 0 rgba(201,24,24,0.8);}
	100% {box-shadow: inset 0 2000px 0 rgba(201,24,24,0.8);}
}
@keyframes bondJamesBond {
	0% {transform: translatex(1000px);}
	80% {transform: translatex(0px); border-radius: 75px;height:75px;width:75px}
	90% {border-radius: 3px; height: 220px; width: 450px;}
	100% {border-radius: 3px; height: 200px; width: 450px;}
}
@keyframes killShot {
	0% {transform: translatey(0) rotate(0deg); opacity:1;}
	100% {transform: translatey(300px) rotate(45deg); opacity:0;}
}

@keyframes modalContentFadeIn {
	0% {opacity: 0; top: -20px;}
	100% {opacity: 1; top: 0px;}
}
@keyframes modalContentFadeOut {
	0% {opacity: 1; top: 0px;}
	100% {opacity: 0; top: -20px;}
}
@keyframes closeFadeIn {
	0% {opacity: 0; top: -20px;}
	100% {opacity: 1; top: 0px;}
}
@keyframes closeFadeOut {
	0% {opacity: 1; top: 0px;}
	100% {opacity: 0; top: -20px;}
}



@media(max-width: 1024px){ 
 header #menu {
    width: 880px; height: 58px;
 }
 
}
@media(max-width:800px){
 header #menu {
    width: 680px; height: 58px;
 }
 header #menu li {
    margin: 0px .55rem;
 }
 header #menu li a, header #menu li.active a {
    padding: 0px .125rem;
    height: 58px; line-height: 58px;
    font-size: var(--fS-txt-8);
 }
}

@media only screen and (max-width:1024px) and (min-width:280px){
  /********************** Mobile 해상도 공통 css */
  header {
    height: 58px;
  }  
  header #menu {
    width: 90%; height: 58px;
  }
  header #menu > h1 a.logo {
    position: fixed; top: 12px; left: 50%; z-index: 2;
	transform: translateX(-50%);
    width: 92px; height: 32px;
  }
  header.activated #menu > h1 a.logo {
	position: fixed; top: 12px; left: 50%;
	transform: translateX(-50%);
	width: 92px; height: 32px;
  }
  header #menu ul {
	display: none;
  }
  header #menu li a, header #menu li.active a {
    padding: 0px .125rem;
    height: 58px; line-height: 58px;
    font-size: .75rem;
  }
  #section5 .intro.footer > ul li {
    position: relative;
    float: left;
    padding: 0.55rem .55rem;
  }
  .layout-foot-wrap ul li:after {
    top: 12px; right: -1px;
    width: 1px; height: 13px;
  }
  .footer > ul li a.link {
    font-size: var(--fS-txt-75);
  }
  .footer .foot-add-wrap p span {
    display: block;
    font-size: var(--fS-txt-75);
    padding: 0 0rem;
  }
  .footer .foot-add-wrap p span:after {
    position: absolute; top: 0px; right: 0;
    width: 0px; height: 0px;
  }
  .footer .foot-add-wrap p:last-child {
    font-size: .55rem;
	padding: .75rem 0 1.55rem;
  }
  footer {
    width: 100%; min-height: 220px;
    padding-bottom: 20px;
  }
  .layout-foot-wrap {
    width: 90%;
  }
  .layout-foot-wrap ul li  {
	padding: 0.55rem .75rem;
  }
  .layout-foot-wrap ul li a.link {
	font-size: var(--fS-txt-875);
  }
  .font-cont-wrap span {
    display: block;
	font-size: var(--fS-txt-75);
    padding: 0 0rem;
  }
  .font-cont-wrap span:after {
    width: 0px; height: 0;
  }
  .font-cont-wrap {
    margin-top: 0rem;
  }
  .font-cont-wrap.first {
    margin-top: .75rem;
  }
  .font-cont-wrap:last-child {
    margin-top: .55rem;
  }

  a.kbstar {
    top: 70px; right: 0; width: 45px; height: 45px;
  }
}