@charset "utf-8";

.pageTitle {padding:4.5em 0 7em 0;}
.pageTitle:before {background:#EFFCFF !important; margin-top:-50vw;}

/* --------------------------------------------------
	상단 문구
----------------------------------------------------- */
.aboutWrap {word-break:keep-all;}
.aboutWrap .top {position:relative; text-align:center; }
.aboutWrap .top > * + * {margin-top:6em;}
.aboutWrap .top h3 {position:relative; margin-bottom:6em;}
.aboutWrap .top h3 strong {display:block; font-weight:900; font-size:2.4em; }
.aboutWrap .top h3 strong .logo{display:inline-block; width:2.4064em; height:1.2032em; background:url(../img/common/logo_blue.svg) no-repeat 50% 50%; background-size:contain; overflow:hidden; text-indent:-9999px; vertical-align:middle;}
.aboutWrap .top p.tit strong {display:block; font-size:1.8em; font-weight:800; color:#222;}
.aboutWrap .top p.tit strong + strong {margin-top:0;}

.aboutWrap .icons ul li.icon {position:absolute; display:block; width:5em; height:5em; background:#fff; border-radius:.5em; overflow:hidden; box-shadow:0 0 1em 0 rgba(0,0,0,0.05);}
.aboutWrap .icons ul .ty1 {left:15%; top:0%; opacity:0; animation:icons1 4s linear infinite; animation-fill-mode:forwards;}
.aboutWrap .icons ul .ty2 {right:15%; top:0%; opacity:0; animation:icons1 4s linear infinite; animation-fill-mode:forwards;}
.aboutWrap .icons ul .ty3 {left:5%; top:40%; opacity:0; animation:icons2 5s linear infinite; animation-fill-mode:forwards; animation-delay:.5s;}
.aboutWrap .icons ul .ty4 {right:5%; top:40%; opacity:0; animation:icons1 5s linear infinite; animation-fill-mode:forwards; animation-delay:.5s;}
.aboutWrap .icons ul .ty5 {left:10%; top:90%; opacity:0; animation:icons1 6s linear infinite; animation-fill-mode:forwards; animation-delay:.7s;}
.aboutWrap .icons ul .ty6 {right:10%; top:90%;opacity:0; animation:icons2 6s linear infinite; animation-fill-mode:forwards; animation-delay:.7s;} 

@keyframes icons1 { 
  10%{
    opacity: 1;
  }
  70%{
    opacity: 1;
  }
  80%{
    opacity: 0;
    transform: translateY(-100px);
  }
  100%{
    opacity: 0;
    transform: translateY(-100px);
  }
}

@keyframes icons2 {
  10%{
    opacity: 1;
  }
  70%{
    opacity: 1;
  }
  80%{
    opacity: 0;
    transform: translateY(-80px);
  }
  100%{
    opacity: 0;
    transform: translateY(-80px);
  }
}

.aboutWrap .boxWrap {margin-top:10em;}
.aboutWrap .boxWrap .box + .box {margin-top:10em;}
.aboutWrap .boxWrap .box {display:flex; flex-wrap:wrap; align-content:center; justify-content:space-between; align-items:center; flex-direction:row;}
.aboutWrap .boxWrap .box .img {position:relative; width:46%; padding:2em; background:#F3F7F8; border-radius:1em;text-align:center;}
.aboutWrap .boxWrap .box .cont {width:calc(100% - 46% - 5%);}
.aboutWrap .boxWrap .box .cont .tit {padding:.5em; font-size:2em; font-weight:800; color:#111;}
.aboutWrap .boxWrap .box .cont .txt {padding:2em 1em; border-top: 2px solid #E6E6E6; word-break:keep-all;}
.aboutWrap .boxWrap .box .cont .txt strong {font-weight:600; }
.aboutWrap .boxWrap .box .img .fireEffect > * {position:absolute; background-size:auto 100%; background:no-repeat 0 0; }
.aboutWrap .boxWrap .box .img .fireEffect .ty1 {width:2.4em; height:2.7em; right:4em; top:3em; background-image:url(../img/main/obj_twinkle01.svg); animation-delay:.6s; transform:scale(1); animation:fireworks1 1s infinite alternate;}
.aboutWrap .boxWrap .box .img .fireEffect .ty2 {width:2.65em; height:3.2em; left:2em; top:3em; margin-bottom: 22em;background-image:url(../img/main/obj_twinkle02.svg); animation-delay:.6s; transform:scale(1);animation: fireworks1 2s infinite alternate;}


@keyframes fireworks1 {
    0% {
        transform:scale(.3);
        opacity:0;
    }

    100% {
        transform: scale(1);
    }
}

.aboutWrap .bottom {position:relative;display:block;margin:10em 0;text-align:center;}
.aboutWrap .bottom strong {position:relative; display:inline-block; padding:0 3em; color:#111 ;font-weight:900; font-size:2em;}
.aboutWrap .bottom strong:before {content:''; display:block; width:2.375em; height:1.65em; position:absolute; top:50%; left:0; margin-left:-2em; margin-top:-.5em; transform:translateX(-50%); background:url(../img/contents/about/img_about_obj01.svg) no-repeat 0 0; background-size:contain;}
.aboutWrap .bottom strong:after {content:''; display:block; width:2.375em; height:1.65em; position:absolute; top:50%; right:0; margin-right:-4.5em; margin-top:-.5em; transform:translateX(-50%); background:url(../img/contents/about/img_about_obj02.svg) no-repeat 0 0; background-size:contain;}
.aboutWrap .bottom strong em {display:block; color:#0F62FD;}

@media all and (max-width:1400px) {
	.aboutWrap .bottom strong:before {margin-left:2em;}
	.aboutWrap .bottom strong:after {margin-right:-.5em;}

}

@media all and (max-width:1024px) {
	.aboutWrap .top h3 strong {font-size:2em;}
	.aboutWrap .boxWrap .box .cont .tit,
	.aboutWrap .top p.tit strong {font-size:1.6em;}
	.aboutWrap .boxWrap {margin-top:3em;}
	.aboutWrap .boxWrap .box {flex-direction:column; justify-content:center;}
	.aboutWrap .boxWrap .box:last-child {flex-direction:column-reverse;}
	.aboutWrap .boxWrap .box + .box {margin-top:3em; width:100;}
	.aboutWrap .boxWrap .box .cont {width:100%;}
	.aboutWrap .boxWrap .box .img  {width:100%; margin-top:1em;}
	.aboutWrap .bottom strong {font-size:1.6em;}
	.aboutWrap .icons ul li.icon  {display:none;}
}

@media all and (max-width:960px) {
	.aboutWrap .top h3 {margin-bottom:4em;}
	.aboutWrap .top > * + * {margin-top:4em;}
	.aboutWrap .boxWrap .box .cont .tit,
	.aboutWrap .top p.tit strong {font-size:1.2em;}
	.aboutWrap .icons ul .ty1 {left:0%; top:0%;}
	.aboutWrap .icons ul .ty2 {right:0%; top:0%;}
	.aboutWrap .icons ul .ty3 {left:5%; top:50%;}
	.aboutWrap .icons ul .ty4 {right:5%; top:50%;}
	.aboutWrap .icons ul .ty5 {left:0%; top:100%;}
	.aboutWrap .icons ul .ty6 {right:0%; top:100%;} 
	.aboutWrap .bottom strong {padding:0;}
	.aboutWrap .bottom strong:before {margin-left:0; left:50%; transform: translate(-50%,50%); top:0; margin-top:-3em;}
	.aboutWrap .bottom strong:after {display:none;}
	
}

@media all and (max-width:640px) {
	.aboutWrap .boxWrap .box + .box {margin-top:2em;}
}