@charset "utf-8";
@import url(./contents.css);

@-webkit-keyframes fadeUp{0%{-webkit-transform:translateY(0); transform:translateY(0); opacity:0;} 50%{-webkit-transform:translateY(-0.5em); transform:translateY(-0.5em); opacity:1;} 100%{-webkit-transform:translateY(-1em); transform:translateY(-1em); opacity:0;}}
@keyframes fadeUp{0%{-webkit-transform:translateY(0); transform:translateY(0); opacity:0;} 50%{-webkit-transform:translateY(-0.5em); transform:translateY(-0.5em); opacity:1;} 100%{-webkit-transform:translateY(-1em); transform:translateY(-1em); opacity:0;}}


/*************************************
	Intro page : 01-01
*************************************/

.pageIntro {position:relative; background:#EEF8F5; font-size:calc((20 / 19) * 1em); padding:4.5em; z-index:0;}
.pageIntro h4 {font-size:2em; padding-bottom:2.5em; margin:0;}
.pageIntro .tit {position:relative;}
.pageIntro .txt {display:block; position:relative; padding:2.5em; background:#fff url(../img/sub/01/txt_intro_yangsan.svg) no-repeat right bottom / auto 3.8em; border-radius:1.5em;}
.pageIntro .txt p {line-height:1.5em; word-break:keep-all;}
.pageIntro .txt p + p {margin-top:2.3em;}

.pageIntro .animation {position:absolute; right:3.3em; bottom:0; width:16.4em; height:14.9em; overflow:hidden; z-index:-1;}
.pageIntro .animation > *[class*='obj'] {position:absolute; background:url(../img/sub/01/spr_intro_ani_illust.svg) no-repeat 0 0 / 42.4em auto;}
.pageIntro .animation .obj1 {left:0; bottom:0; width:5em; height:5em; background-position-x:-30.3em; z-index:3;}
.pageIntro .animation .obj2 {left:9.8em; bottom:0; width:6.6em; height:8.6em; background-position-x:-35.8em; z-index:3;}
.pageIntro .animation .obj3 {left:3.15em; bottom:0; width:8.5em; height:11.2em; background-position-x:-21.3em; z-index:2;}
.pageIntro .animation .obj4 {left:.6em; bottom:0; width:6.4em; height:10.9em; background-position-x:-14.4em; z-index:1;}
.pageIntro .animation .obj5 {left:7.6em; bottom:0; width:8.6em; height:13.8em; background-position-x:-5.3em; z-index:1;}
.pageIntro .animation .heart {position:absolute; top:1em; left:4.1em; width:2.3em; height:4.15em;}
.pageIntro .animation .heart > * {display:block; position:absolute; background:url(../img/sub/01/spr_intro_ani_illust.svg) no-repeat 0 0 / 42.4em auto; -webkit-animation:fadeUp 1.2s linear infinite; animation:fadeUp 1.2s linear infinite;}
.pageIntro .animation .heart .h1 {width:1.7em; height:1.7em; left:.5em; top:2.45em; background-position-x:0;}
.pageIntro .animation .heart .h2 {width:1.2em; height:1.2em; left:0; top:.85em; background-position-x:-2.2em;}
.pageIntro .animation .heart .h3 {width:.9em; height:.9em; left:1.4em; top:0; background-position-x:-3.9em;}

@media all and (max-width:1024px) {
	.pageIntro {padding:3em;}
	.pageIntro h4 {font-size:1.8em; word-break:keep-all; padding-bottom:1em;}
	.pageIntro .tit {padding-right:17em; min-height:13em;}
	.pageIntro .txt {font-size:.9em; padding:2em;}
	.pageIntro .animation {right:0;}
}
@media all and (max-width:840px) {
	.pageIntro .tit {padding-right:14em;}
	.pageIntro .txt {border-radius:1em;}
	.pageIntro .txt p br {display:none !important;}
	.pageIntro .animation {font-size:.8em;}
}
@media all and (max-width:700px) {
	.pageIntro .tit {padding-right:8em;}
	.pageIntro .animation {font-size:.6em;}
}
@media all and (max-width:640px) {
	.pageIntro {padding:2em;}
	.pageIntro .tit {padding-right:0; min-height:14em;}
}
@media all and (max-width:510px) {
	.pageIntro {padding:2em;}
	.pageIntro h4 {font-size:1.7em;}
	.pageIntro .tit {min-height:16em;}
}
@media all and (max-width:420px) {
	.pageIntro {padding:1.5em 1em 1em;}
	.pageIntro h4 {text-align:center; padding-bottom:0;}
	.pageIntro .tit {padding-bottom:10em;}
	.pageIntro .animation {right:auto; left:50%; margin-left:-8.2em;}
	.pageIntro .txt {padding:1.5em 1.5em 3em;}
}




/*************************************
	Tenant page : 01-03
*************************************/

.pageTenant {font-size:calc((20 / 19) * 1em); position:relative; padding:7em 4em 5em; background:#EEF8F5 url(../img/sub/01/bak_tenant.png) no-repeat top right / 15.5em auto;}
.pageTenant:before {content:""; display:block; position:absolute; top:0; left:3em; right:3em; height:4.6em; background:url(../img/sub/01/txt_tenant_yangsan.svg) no-repeat 0 0 / contain;}
.pageTenant h4 {font-size:1.9em; color:#1D8869; margin-bottom:1em; word-break:keep-all;}
.pageTenant .list {margin:-.65em;}
.pageTenant ul {display:flex; align-items:center; flex-wrap:wrap;}
.pageTenant ul > li {display:block; position:relative; padding:.4em; width:50%;}

.pageTenant li > * {display:flex; justify-content:center; flex-direction:column; border-radius:.5em; background:#fff; height:5.45em; padding:1.5em 1.7em;}
.pageTenant li > * strong {font-size:1em; font-weight:600;}
.pageTenant li > * span {font-size:.8em; color:#555;}
.pageTenant a:after {content:""; display:block; position:absolute; width:2em; height:2em; top:50%; right:1.7em; margin-top:-1em; background:url(../img/sub/01/ico_temamt_link.svg) no-repeat 50% 50% / contain; transition:.3s all; -webkit-transition:.3s all;}
.pageTenant a:hover:after,
.pageTenant a:focus:after {transform:translateX(-.5em); -webkit-transform:translateX(-.5em);}

@media all and (max-width:1024px) {
	.pageTenant {padding:3em;}
	.pageTenant h4 {font-size:1.7em;}
}
@media all and (max-width:740px) {
	.pageTenant {padding:2em 1.5em;}
	.pageTenant li > * {padding:1em;}
	.pageTenant a:after {right:1em;}
}
@media all and (max-width:590px) {
	.pageTenant {padding:2em 1.5em;}
	.pageTenant ul > li {width:100%;}
}



/****************************************************************
	찾아오시는 길
****************************************************************/

.addrInfoMap {display:block; position:relative;}
.addrInfoMap > .map {display:block;position:relative;height: 20em;border:1px solid #ddd;overflow: hidden;}
.addrInfoMap > .map .root_daum_roughmap_landing,
.addrInfoMap > .map .root_daum_roughmap .wrap_map {width:100% !important; height:100% !important;}
.addrInfoMap > .map .map_border {display:none !important;}
.addrInfoMap > .info {display:block; position:relative; padding:1.24em 2em 1.24em 2em; overflow:hidden;border:1px solid #ddd;border-top:0;}


.addrInfoMap > .info .tit {float:left;width:50%;margin:0.5em 0;}
.addrInfoMap > .info .tit strong {position:relative;padding-right:1em;margin-right:.8em;}
.addrInfoMap > .info .tit strong:after {content:"";position:absolute;top:4px;right:0;height:.9em;border-right:2px solid #ddd;}
.addrInfoMap > .info .info-contact {padding:0; border:none; background:transparent; float:right;font-weight:500;}

@media all and (max-width:1024px) {
	.addrInfoMap > .map > .map-img {max-width:none !important; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
}
@media all and (max-width:980px) {
	.addrInfoMap > .info .tit,
	.addrInfoMap > .info .info-contact {float:none;width: 100%;}
}
@media all and (max-width:720px) {
	.addrInfoMap > .info {padding:1em;}
	.addrInfoMap > .info .info-contact {margin-left:0;}
}