/* v2.0 | 20110126
  http://meyerweb.com/eric/tools/css/reset/ 
  License: none (public domain)
*/
body {margin:0; padding:0;}

* {box-sizing:border-box; margin:0; padding:0;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	vertical-align: baseline;
	box-sizing:border-box;
	font-style:normal;
}

img {border:0;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

a {text-decoration:none; color:inherit; }


/* 포커스 효과 */
::selection {background:#333; color:#fff;}


table {border-collapse:collapse; vertical-align:middle;}
table th, table td {vertical-align:middle;}
* {-webkit-text-size-adjust:none}
* {-webkit-tap-highlight-color:rgba(0,0,0 0);}
* {-webkit-tap-highlight-color:transparent;}
textarea:focus, input:focus{
    outline: none;
}
input[type='text'], input[type='button'], input[type='password'], input[type='number'], textarea, button, select {-webkit-appearance:none; -moz-appearance:none; appearance:none;}









.app_introduce {position:relative; width:100%; font-family:"Pretendard", sans-serif;}
.app_introduce .pc {display:block  !important;}
.app_introduce .mb {display:none !important;}
.app_introduce .logo {position:absolute; left:60px; top:30px; z-index:10; width:132px;}
.app_introduce .logo:hover {transform:rotate(360deg); transition:1.5s;}
.app_introduce .logo img {width:100%;}
.app_introduce .inner {position:relative; width:1200px; margin:auto;}
.app_introduce .section {position:relative; width:100%; text-align:center;}
.app_introduce .section1 {height:100vh; overflow:hidden; background:url("../images/bg_section1_title.png") center no-repeat; padding-top:200px;}
.app_introduce .section1 .inner {position:static;}
.app_introduce .section1 .title {position:relative; margin-bottom:72px; text-align:center;}
.app_introduce .section1 .title {
	animation-name: title;
	animation-duration:2s;
	animation-delay:.5s;
	animation-duration: leaner;
	animation-iteration-count:1;
	animation-direction:alternate;
	animation-fill-mode: forwards;
}
@-webkit-keyframes title {
  0% {
	opacity:0;
    top:-100px;
  }
  100% {
	opacity:1;
    top:0px;
  }
}
.app_introduce .section1 .title img {margin:auto;}
.app_introduce .section1 .app_link {position:relative; z-index:10; width:100%; font-size:0;}
.app_introduce .section1 .app_link li {display:inline-block; vertical-align:top; margin-right:20px; width:200px;}

.app_introduce .section1 .app_link li:last-child {margin-right:0;}
.app_introduce .section1 .app_link li a {position:relative; transition:.3s; display:block; width:200px; height:56px; background:rgba(255,255,255,0.1); border-radius:56px;}
.app_introduce .section1 .app_link li a:hover {background:rgba(255,255,255,0.3);}
.app_introduce .section1 .app_link li a:active {background:rgba(100,100,100,0.1);}
.app_introduce .section1 .app_link li a img {width:100%;}
.app_introduce .section1 .app_link li a {
	animation-name: applink;
	animation-duration:2s;
	animation-delay:.5s;
	animation-duration: leaner;
	animation-iteration-count:1;
	animation-direction:alternate;
	animation-fill-mode: forwards;	
}

@-webkit-keyframes applink {
  0% {
	opacity:.3;
  }
  100% {
	opacity:1;
  }
}



.app_introduce .section1 .animal {position:absolute !important; bottom:0; left:0; right:0; margin:auto; width:calc(100% - 60px); max-width:878px;}
.app_introduce .section1 .animal {
	animation-name: animal;
	animation-duration:2s;
	animation-delay:.5s;
	animation-duration: leaner;
	animation-iteration-count:1;
	animation-direction:alternate;
	animation-fill-mode: forwards;
}

@-webkit-keyframes animal {
  0% {
	opacity:0;
    bottom:-100px;
  }
  100% {
	opacity:1;
    bottom:0px;
  }
}

/*
.app_introduce .section1 .animal {font-size:0; position:relative; width:900px; margin:auto; text-align:center;}
.app_introduce .section1 .animal li {position:absolute;}
.app_introduce .section1 .animal li.animal06 {bottom:345px;}
*/
.app_introduce .section2 {padding-top:100px;}
.app_introduce .section2 .title_wrap {width:100%; text-align:center;}
.app_introduce .section2 .title {margin:auto; margin-bottom:40px; }
.app_introduce .section2 .title img {width:100%; max-width:100%;}
.app_introduce .section2 .txt {margin:auto; margin-bottom:90px;}
.app_introduce .section2 .title, .app_introduce .section2 .txt {display:block;}
.app_introduce .section2 .service {margin-bottom:92px; font-size:0; width:100%;}
.app_introduce .section2 .service li {display:inline-block; vertical-align:top; margin-right:53px;}
.app_introduce .section2 .service li:last-child {margin-right:0;}
.app_introduce .section2 .contact {width:100%; padding:56px 0; background:#4f3174;}
.app_introduce .section2 .contact ul {width:100%; font-size:0;}
.app_introduce .section2 .contact ul li {position:relative; display:inline-block; margin-right:60px; padding-right:61px;}
.app_introduce .section2 .contact ul li:last-child {margin-right:0; padding-right:0;}
.app_introduce .section2 .contact ul li:last-child:after {display:none;}
.app_introduce .section2 .contact ul li:after {position:absolute; right:0; top:50%; margin-top:-20px; background:#846f9e; content:""; width:1px; height:40px; }
.app_introduce .section3 {padding-top:135px; height:800px; background:url("../images/bg_section3.png") center no-repeat; background-size:cover;}
.app_introduce .section3 .left {text-align:left;}																														
.app_introduce .section3 .left .title {margin-bottom:80px;}
.app_introduce .section3 .left ul {font-size:0;}
.app_introduce .section3 .left ul li {display:block; margin-bottom:30px; color:#fff;}
.app_introduce .section3 .left ul li:last-child {margin-bottom:0;}
.app_introduce .section3 .left ul li img, .app_introduce .section3 .left ul li span {display:inline-block; vertical-align:middle;}
.app_introduce .section3 .left ul li img {margin-right:40px;}
.app_introduce .section3 .left ul li span {font-size:20px;}
.app_introduce .section3 .right {position:absolute; bottom:-100px; right:0;}
.app_introduce .section4 {background:url("../images/bg_section4.png") center no-repeat; background-size:cover;}
.app_introduce .section5 {padding-top:194px;background:url("../images/bg_section5.png") top repeat;}
.app_introduce .section5 .title {margin:auto; margin-bottom:40px;}
.app_introduce .section5 .tit .title {margin:0;}
.app_introduce .section5 .list {position:relative; width:100%; font-size:0;}
.app_introduce .section5 .list .column {overflow:hidden; position:relative; width:100%; text-align:left; padding:95px 0;}
.app_introduce .section5 .list .column .tit {width:calc(100% - 600px); padding-left:80px; padding-top:120px;}
.app_introduce .section5 .list .column .tit * {display:block;}
.app_introduce .section5 .list .column .tit .icon {margin-bottom:60px;}
.app_introduce .section5 .list .column .phone {position:relative; float:right; width:600px; padding:0 70px;}
.app_introduce .section5 .list .column .phone:after {position:absolute; top:50%; right:444px; content:""; width:145px; height:1px; border-top:1px dashed #4f3174;}
.app_introduce .section5 .list .column .phone:before {position:absolute; top:50%; left:0px; content:""; width:14px; height:14px; margin-top:-9px; background:#4f3174; border-radius:14px; border:3px solid #ddc5fc;}
.app_introduce .section5 .list .column .tit, .app_introduce .section5 .list .column .phone {display:inline-block; vertical-align:top;}
.app_introduce .section5 .list .column:nth-child(even) {background:url("../images/bg_section5_2.png") top repeat #f6f6f6;}
.app_introduce .section5 .list .column:nth-child(even) .tit {float:right;}
.app_introduce .section5 .list .column:nth-child(even) .phone:after {right:auto; left:444px;}
.app_introduce .section5 .list .column:nth-child(even) .phone:before {left:auto; right:0;}
.app_introduce .section5 .list .column:nth-child(2) .phone:after {border-color:#ef83b1;}
.app_introduce .section5 .list .column:nth-child(2) .phone:before {background:#ef83b1; border-color:#ffc6df;}
.app_introduce .section5 .list .column:nth-child(3) .phone:after {border-color:#f0931b;}
.app_introduce .section5 .list .column:nth-child(3) .phone:before {background:#f0931b; border-color:#ffe0b8;}
.app_introduce .section5 .list .column:nth-child(4) .phone:after {border-color:#00bae8;}
.app_introduce .section5 .list .column:nth-child(4) .phone:before {background:#00bae8; border-color:#91e6fc;}

.app_introduce .footer {position:relative; width:100%; background:#363636;}
.app_introduce .footer .area_inquire {width:100%; font-size:16px; background:#3c3c3c; height:80px; line-height:80px;}
.app_introduce .footer .area_inquire em {width:148px; color:#fff; font-weight:bold; color:#fff;}
.app_introduce .footer em, .app_introduce .footer ul {display:inline-block; vertical-align:middle;}
.app_introduce .footer .area_inquire ul li {position:relative; display:inline-block; color:#ddd; padding-right:24px; margin-right:23px; font-size:16px;}
.app_introduce .footer .area_inquire ul li:after {content:""; width:1px; height:10px; margin-top:-5px; position:absolute; right:0; top:50%; margin-top:-5px; background:#505050;}
.app_introduce .footer .area_inquire ul li:last-child {margin-right:0; padding-right:0;}
.app_introduce .footer .area_inquire ul li:last-child:after {display:none;}
.app_introduce .footer .area_inquire ul {font-size:0;}
.app_introduce .footer .area_contact {padding:40px 0px 50px;}
.app_introduce .footer .area_contact em {width:148px; color:#fff; font-weight:bold;}
.app_introduce .footer .area_contact ul li {position:relative; display:block; line-height:22px; font-size:0px; color:#999;}
.app_introduce .footer .area_contact ul li span {position:relative; font-size:16px; display:inline-block; padding-right:16px; margin-right:15px;}
.app_introduce .footer .area_contact ul li span:last-child {margin-right:0; padding-right:0;}
.app_introduce .footer .area_contact ul li span:after {position:absolute; content:""; right:0; top:50%; margin-top:-5px; background:#3d3d3d; width:1px; height:10px;}
.app_introduce .footer .area_contact ul li span:last-child:after {display:none;}
.app_introduce .footer .area_contact ul li.copyright {color:#888; font-size:16px; padding-top:8px}




@media screen and (max-width: 1280px) {
	.app_introduce .logo {left:50px;}
	.app_introduce .inner {width:100%; padding:0 50px;}
	.app_introduce .section2 .service li {width:50%; margin-right:0; margin-bottom:50px;}
	.app_introduce .section2 .service li img {width:200px;}
	.app_introduce .section2 .contact {padding:50px 0;}
	.app_introduce .section2 .contact ul {text-align:left;}
	.app_introduce .section2 .contact ul li {margin-right:0; padding-right:0; display:block;}
	.app_introduce .section2 .contact ul li:first-child {margin-bottom:30px;}
	.app_introduce .section2 .contact ul li:after {display:none;}
	.app_introduce .section3 .left ul li img {margin-right:30px;}
	.app_introduce .section3 .right {width:90%; max-width:480px; right:50px;}
	.app_introduce .section3 .left .title {max-width:400px;}
	.app_introduce .section5 .title {max-width:540px;}
	.app_introduce .section5 .tit .title {max-width:max-content;}
	.app_introduce .section5 .list .column .tit {width:calc(100% - 500px); padding-top:100px; padding-left:40px;}
	.app_introduce .section5 .list .column .phone {width:500px; padding-right:0; padding-left:0; text-align:right;}
	.app_introduce .section5 .list .column .phone img {width:400px;}
	.app_introduce .section5 .list .column .phone:after {display:none;}
	.app_introduce .section5 .list .column .phone:before {display:none;}
	.app_introduce .section5 .list .column:nth-child(even) .phone {text-align:left;}
}



@media screen and (max-width: 768px) {
	.app_introduce .logo {top:30px; left:30px; width:100px;}
	.app_introduce .inner {padding:0 30px;}
	.app_introduce .section1 {padding-top:175px; height:90vh;}
	.app_introduce .section1 .title {width:100%; max-width:350px; margin:auto; margin-bottom:54px;}
	.app_introduce .section1 .title img {width:100%;}
	.app_introduce .section1 .app_link li {display:block; margin:auto; margin-bottom:10px;}
	.app_introduce .section1 .app_link li:last-child {margin:auto;}
	.app_introduce .section2 {padding-top:75px;}
	.app_introduce .section2 .title {width:100%; max-width:350px;}
	.app_introduce .section2 .txt {width:291px; margin-bottom:60px;}
	.app_introduce .section2 .service {margin-bottom:60px;}
	.app_introduce .section2 .service li {width:50%; padding:0 15px;}
	.app_introduce .section2 .service li img {width:100%;}
	.app_introduce .section2 .contact {padding:30px 0;}
	.app_introduce .section2 .contact ul li {width:100%; text-align:center; max-width:300px;}
	.app_introduce .section2 .contact ul li:first-child {margin-bottom:15px;}
	.app_introduce .section2 .contact ul li img {width:100%;}
	.app_introduce .pc {display:none !important;}
	.app_introduce .mb {display:block  !important;}


	.app_introduce .section3 {height:auto; padding:85px 0 40px;}
	.app_introduce .section3 .left {margin-bottom:60px;}
	.app_introduce .section3 .left .title {width:100%; max-width:350px; margin:auto; margin-bottom:40px;}
	.app_introduce .section3 .left .title img {width:100%;}
	.app_introduce .section3 .left ul li {margin-bottom:15px;}
	.app_introduce .section3 .left ul li img {width:32px; margin-right:24px;}
	.app_introduce .section3 .left ul li span {font-size:18px;}
	.app_introduce .section3 .right {position:relative; bottom:0; right:0;}


	.app_introduce .section5 {padding-top:100px;}
	.app_introduce .section5 .title {width:100%; max-width:420px; margin:auto;}
	.app_introduce .section5 .title img {width:100%;}
	.app_introduce .section5 .tit .title {max-width:420px;}
	.app_introduce .section5 .list .column {padding:65px 0;}
	.app_introduce .section5 .list .column .tit {width:100%; margin-bottom:50px; padding-top:0px; padding-left:0; text-align:center;}
	.app_introduce .section5 .list .column .tit .title {margin:auto;}
	.app_introduce .section5 .list .column .tit .icon {margin:auto; width:60px; margin-bottom:30px;}
	.app_introduce .section5 .list .column .phone {padding-left:0; text-align:center; width:100%; margin:auto;}
	.app_introduce .section5 .list .column .phone img {width:100%; max-width:300px;}
	.app_introduce .section5 .list .column:nth-child(even) .phone {text-align:center;}


	.app_introduce .footer .area_inquire {font-size:14px; height:50px; line-height:50px;}
	.app_introduce .footer .area_inquire ul li {font-size:14px; padding-right:16px; margin-right:15px;}
	.app_introduce .footer .area_inquire em {width:100px;}
	.app_introduce .footer .area_contact {padding:30px 0px 40px;}
	.app_introduce .footer .area_contact em {display:block; margin-bottom:15px; font-size:14px;}
	.app_introduce .footer .area_contact ul li {line-height:18px;}
	.app_introduce .footer .area_contact ul li span {font-size:14px; padding-right:10px; margin-right:10px;}
	.app_introduce .footer .area_contact ul li.copyright {font-size:14px;}

}

@media screen and (max-width: 480px) {
	.app_introduce .inner {padding:0 20px;}
	.app_introduce .section2 .title {max-width:305px;}
	.app_introduce .section2 .service {font-size:0;}
	.app_introduce .section2 .service li {width:50%; margin:0px 0px 20px 0px !important; padding:0 10px;}
	.app_introduce .section2 .service li img {}
	.app_introduce .section3 .left .title {max-width:300px;}
	.app_introduce .section5 .title {max-width:323px;}
	.app_introduce .section5 .tit .title {max-width:max-content;}
	.app_introduce .footer .area_inquire em {margin-right:20px; width:auto; vertical-align:top;}
	.app_introduce .footer .area_contact ul li {line-height:15px;}
	.app_introduce .footer .area_contact ul li span {font-size:12px; padding-right:0; margin-right:8px;}
	.app_introduce .footer .area_contact ul li span:after {display:none;}
	.app_introduce .footer .area_contact ul li.copyright {font-size:12px;}
}