#contents {position:relative; min-width:1200px;}
#contents > div {clear:both; width:100%; overflow:hidden;}

.title_01 {display:block; font-size:55px; line-height:70px; color:#fff; letter-spacing:-2px; font-family:NanumGothicBold; }
.title_02 {display:block; font-size:20px; line-height:30px; color:yellow; letter-spacing:-1px; font-family:NanumGothicBold; }

.hidden {display:none;}
.bold {font-family:NanumGothicBold !important;}
.main .wrap {position:relative; width:1200px; margin:0 auto; text-align:center;}
.main .head {text-align:center; color:#fff; text-shadow:5px 5px 10px rgba(0,0,0,.2); margin-bottom:80px;}
.main .head>p {margin-bottom:30px; font-size:70px; line-height:1; letter-spacing:-3px; font-family:NanumGothicBold;}
.main .head>span {font-size:18px; line-height:1.6;}


/*** 첫 화면 ***/
.front {position:relative; background:#4175cc;}
.front .wrap {position:absolute; width:100%; top:15%;}
.front .head {position:absolute; width:100%; bottom:25%;}
.front .head p {font-size:24px; line-height:1; letter-spacing:-0.5px;}
.front .head span {color:yellow; font-size:60px; font-family:NanumGothicBold; line-height:1.4;}
.front li {}
.front li.obj {position:absolute; width:100%; text-align:center; top:0px;}
.front li.arrow {bottom:100px;}
.front span {display:block; overflow:hidden; text-align:center; color:#fff;}
.front span.t1 {font-family:NanumGothicBold; line-height:1.8; font-size:80px; letter-spacing:-1px;}
.front span.t2 {font-family:NanumGothicBold; line-height:1.4; font-size:24px; letter-spacing:-1px; color:#ffff33;}
.front span.t2 span {display:inline; border-radius:5px; background-color:#ffff33; color:#4175cc;}
.front span.t3 {margin-top:20px; font-size:14px;}
.wheel {z-index:110; position:absolute; bottom:100px; left:50%;}

.front .ani {z-index:400; position:absolute; width:100%; height:100px; padding:0; margin:0 auto; bottom:90px; text-align:center;}
.front .ani li {position:relative; display:inline-block; height:110px; width:100px; margin:0 80px; padding:0;}
.front .ani li a {position:absolute; left:0; top:0; height:100px; overflow:hidden;}
.front .ani .tip {position:absolute; top:-115px; left:-20px;}

/*** 이벤트배너 / 홈페이지 이렇게 만들어요***/
.event1 {z-index:500; position:fixed; left:0; top:0;}
.event1 .pop {overflow:hidden; visibility:hidden; position:absolute; width:100%; height:100%; min-width:1200px; left:0; top:0; background:#00b5b7;}
.event1 .pop .btnClose {position:fixed; right:50px; top:30px;}
.event1 .pop .obj {position:absolute; left:50%; bottom:0;}
.event1 .pop .obj1 {position:absolute; left:50%; bottom:160px;}
.event1 .pop .box {position:relative; width:1200px; margin:0 auto;}
.event1 .pop .box img {position:absolute; padding-bottom:80px;}
.event1 .pop .box .obj2 {}
.event1 .pop .box .obj3 {right:0;}

/*** 이벤트배너 / 유지보수***/
.event2 {z-index:500; min-width:1200px; position:fixed; left:0; top:0;}
.event2 .pop {overflow:hidden; visibility:hidden; position:absolute; width:100%; height:100%; min-width:1200px; left:0; top:0; background:#54b34f;}
.event2 .pop .btnClose {position:fixed; right:50px; top:30px;}
.event2 .pop .box {position:relative; width:1200px; height:700px; margin:0 auto;}
.event2 .pop .box [class*="obj"] {position:absolute;}
.event2 .pop .box .obj1 {left:30px; top:60px;}
.event2 .pop .box .obj2 {left:0; top:157px;}
.event2 .pop .box .obj3 {left:393px; top:195px;}
.event2 .pop .box .obj4 {left:422px; top:0;}
.event2 .pop .box .obj5 {left:863px; top:37px;}
.event2 .pop .box .obj6 {left:1045px; top:80px;}
.event2 .pop .box .obj7 {left:716px; top:218px;}
.event2 .pop .box .obj8 {left:853px; top:167px;}
.event2 .pop .box .obj9 {left:1000px; top:394px;}
.event2 .pop .box .obj10 {left:783px; top:510px;}
.event2 .pop .box .obj11 {left:90px; top:395px;}
.event2 .pop .box .obj12 {left:-20px; top:540px;}
.event2 .pop .box .obj13 {left:110px; top:650px;}
.event2 .pop .box .obj14 {left:360px; top:270px;}
.event2 .pop .box .obj15 {left:215px; top:323px;}



/*** 키즈홈  소개 ***/
.intro {color:#fff; background:url(../images/include/support_bg.png) #54b34f;}
.intro.scene1 .obj {position:relative; height:340px; width:1200px; }
.intro.scene1 .obj > * {display:inline-block; vertical-align:top;}
.intro.scene1 .obj a {display:inline-block; width:120px; margin:50px 20px 0 20px; vertical-align:top;}
.intro.scene1 .obj a i {display:block; height:120px;}
.intro.scene1 .obj a p {color:#fff; font-size:14px; margin-bottom:10px;}
.intro.scene1 .obj a span {display:block; padding:10px 10px; color:#000; background:yellow; line-height:1; border-radius:20px;}
.intro.scene1 .obj a:hover span {display:block; padding:10px 10px; color:#000; background:#fff; line-height:1; border-radius:20px;}
.intro.scene1 .obj .area {width:403px; height:333px; margin:0 50px; padding:15px 0 0 19px; background:url(../images/main/intro_scene2.png) no-repeat;}
.intro.scene1 .obj .area ul {position:relative; width:365px; height:220px; overflow:hidden; border:1px solid #000;}
.intro.scene1 .obj .area li {position:absolute; display:none;}
.intro.scene1 .obj .area li.on {display:block;}

.main .intro.scene2 {background-color:#49a644;}
.main .intro.scene3 .obj {position:relative;}
.main .intro.scene3 .app_view {position:absolute; left:670px; top:-30px;}
.main .intro.scene3 .app_view img {cursor:pointer;}

.app {z-index:8888; position:fixed; display:none; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7);}
.app.on {display:block;}
.app .appClose {position:absolute; top:20px; right:20px; cursor:pointer;}
.app .wrap {display:table; width:1200px; height:650px; overflow:hidden; margin:0 auto; font-size:14px; background:#fff; border:1px solid #000; background:transparent;}
.app .wrap>div {display:table-cell; height:100%; vertical-align:top;}
.app .wrap .info {padding-top:100px; text-align:center; color:#fff; background:#0038a4;}
.app .wrap .info > * {display:inline-block; margin:30px;}
.app .wrap .mov {position:relative; overflow:hidden; width:365px; height:100%; background:url(../images/main/app_mov_bg.png) #000; border:1px solid #000; border-top:0; border-bottom:0;}
.app .wrap .mov iframe {position:absolute; top:0; left:-395px;}
.app .wrap .nav {width:250px; background:#fff;}
.app .wrap .nav * {text-align:left;}
.app .wrap .nav p {padding:50px 0 30px 30px; font-size:36px; font-weight:bold; color:#0e81fd; border-bottom:1px solid #ddd; font-family:Tahoma, Arial;}
.app .wrap .nav li {line-height:1.2; border-bottom:1px solid #ddd;}
.app .wrap .nav li a {display:block; padding:15px 30px; font-weight:bold; background:url(../images/main/app_mov.png) no-repeat 90% 50%;}
.app .wrap .nav li a:hover {background-color:#f5f5f5;}
.app .wrap .nav li.on a {color:#0e81fd; background:url(../images/main/app_on.png)no-repeat 0 50% #f0f0f0;}
.app .wrap .nav span {display:block; padding:30px; font-size:11px; color:#888; line-height:1.6;}


/*** 키즈홈  디자인 ***/
.design {position:relative; background:url(../images/include/support_bg.png) #20ace1;}
.design .obj {position:relative;}
.design .view {position:absolute; left:270px; top:0;}

.design .popup {z-index:1000; display:none; position:fixed; width:100%; height:100%; left:0; top:0; background:url(../images/main/bg_black.png) 0 0;}
.design .popup .bg {z-index:0; position:absolute; width:100%; height:100%; left:0; top:0; cursor:pointer;}
.design .popup .wrap {position:relative; overflow:hidden; width:1100px; margin:0 auto; border-radius:10px; background:#20ace1;}
.design .popup .wrap > div {position:relative; float:left;}
.design .popup .wrap .container {position:relative;}
.design .popup .wrap .container .title>span {position:absolute; right:0; bottom:15px;}
.design .popup .menu {overflow:hidden; width:220px; height:100%; color:#fff;}
.design .popup .menu > img {overflow:hidden; padding:30px 0 30px 40px;}
.design .popup .menu > ul {overflow-y:auto; height:calc(100% - 129px);}
.design .popup .menu li {width:100%; border-bottom:1px solid #4dbde7;}
.design .popup .menu li a {display:block; width:100%; padding:10px 0 10px 30px; color:#fff; font-size:16px; text-decoration:none; text-align:left;}
.design .popup .menu li a.on {background:#fff; color:#000;}
.design .popup .menu li a span {display:inline-block; margin-right:10px; font-size:11px; font-family:"Tahoma";}
.design .popup .container {position:relative; margin:10px 0 10px 10px; width:870px; overflow-y:auto; overflow-x:hiddne; padding:40px; border-radius:10px; background:#fff;}
.design .popup .container ul {display:none;}
.design .popup .container .title {position:relative; padding:0 0 10px 90px; text-align:left; background:url(../images/main/popup_obj_01.png) no-repeat 0 100%; border-bottom:1px solid #f0f0f0; margin-bottom:30px;}
.design .popup .close {z-index:10; position:absolute; display:block; right:20px; top:20px;}
.design .popup .container .list {position:relative; overflow:hidden; width:100%; background:#fff;}

#temp_list {}
#temp_list li {margin-bottom:20px;}


/*** 포트폴리오 ***/
.portfolio {background:url(../images/include/support_bg.png) #f97979;}
.portfolio .wrap {position:relative; min-width:1200px; max-width:70%; margin:0 auto; color:#fff; text-align:center;}
.portfolio .wrap>ul>li {display:inline-block; width:33%; overflow:hidden;}
.portfolio .wrap .item {position:relative; width:300px; overflow:hidden; margin:0 auto;}
.portfolio .wrap .item a {display:block; overflow:hidden; width:300px; height:220px; border-radius:10px; border:3px solid #fff; background:#fff;}
.portfolio .wrap .item span {display:block; font-size:12px; padding-right:20px;}
.portfolio .wrap .item span.sitename {margin-top:10px; font-size:18px;}

/*** 제작가격 ***/
.price {background:url(../images/include/support_bg.png) #ffba00;}
.price .obj {position:relative; height:margin:0 auto; text-align:center;}
.price .obj span[class *= 'p'] {position:absolute; display:block; top:0;}
/* .price .obj span.p1 {left:75px;} */
.price .obj span.p2 {left:285px;}
.price .obj span.p3 {left:675px;}
.price .kindview {display:inline-block; margin-top:10px; padding:20px 40px; background:#ec5dae; font-size:18px; color:#fff; line-height:1; border-radius:5px; letter-spacing:0 !important; box-shadow:none !important;}
.vs {z-index:3000; position:fixed; width:100%; height:100%; top:0; left:9000px; vertical-align:middle; background-color:rgba(0,0,0,.5)}
.vs.on {left:0;}
.vs .inner {position:relative; width:800px; overflow:hidden; margin:50px auto 0 auto; background:#fff; padding:20px; border-radius:10px; box-shadow:5px 5px 10px rgba(0,0,0,.5)}
.vs .inner .tit {padding:30px 0; width:760px; background:#ffba00; border-radius:10px 10px 0 0;}
.vs .inner table {width:100%; text-align:left; border-spacing:1px; border-collapse: collapse; border:1px solid #ddd; border-top:0;}
.vs .inner table th,
.vs .inner table td {padding:10px; font-size:12px; border-bottom:1px solid #ddd; border-left:1px solid #ddd;}
.vs .inner table th {text-align:center; background-color:#f9f9f9; }
.vs .inner table th.k1 {color:#fff; background-color:#ffba00;}
.vs .inner table th.k2 {color:#fff; background-color:#4175cc;}
.vs .inner table th.k3 {color:#fff; background-color:#ec5dae;}
.vs .inner table thead th {color:#fff; background-color:#666;}
.vs .inner table td p {line-height:1.4;}
.vs .inner table span {color:red; font-weight:bold; font-size:14px;}
.vs .inner table thead tr * {border-bottom:0;}
.vs .inner p {text-align:left; color:#888; font-size:12px; letter-spacing:-1px;}
.vs ul li {list-style-type:square !important; padding:3px 0; margin-left:15px !important; line-height:1.2;}
.vs .popclose {position:absolute; display:block; right:20px; bottom:20px; display:block; padding:5px 10px; font-size:12px; color:#fff; background:#000; border-color:#000; border-radius:3px;}

/*** 고객센터 ***/
.support {background:url(../images/include/support_bg.png) #0eb4a3;}
.support .wrap {position:relative; min-width:900px; max-width:1200px; margin:0 auto; color:#fff; text-align:center;}
.support .wrap p {font-size:14px; color:#fff;}
.support .wrap p span.title_01 {display:block; font-size:24px; line-height:20px; letter-spacing:0;}
.support .wrap p span.title_02 {display:block; font-size:80px; line-height:130px; color:yellow;}
.support .wrap > ul {position:relatvie; margin:50px 0; font-size:0;}
.support .wrap > ul li {position:relatvie; display:inline-block; width:18%; text-align:center;}
.support .wrap > ul li a {position:relative; display:block; width:141px; height:165px; margin:0 auto; color:#fff; font-size:18px;}
.support .wrap > ul li a span {position:absolute; display:block; width:100%; bottom:0; text-align:center;}
.support .wrap .obj_01 {background:url(../images/main/support_obj2.png) no-repeat 0 0;}
.support .wrap .obj_02 {background:url(../images/main/support_obj2.png) no-repeat -150px 0;}
.support .wrap .obj_03 {background:url(../images/main/support_obj2.png) no-repeat -300px 0;}
.support .wrap .obj_04 {background:url(../images/main/support_obj2.png) no-repeat -450px 0;}
.support .wrap .obj_05 {background:url(../images/main/support_obj2.png) no-repeat -600px 0;}


/* 모바일 */
.mobile > div {
	position:relative; width:100%; padding:250px 80px; font-size:32px; color:#fff; font-weight:bold; line-height:1.6; letter-spacing:-1px;
	background-image:url(../images/mobile/bg.png);	
}
.mobile img {max-width:100%;}
.mobile * {text-align:center;}
.mobile li {position:relative;}
.mobile .tit {margin-bottom:80px; text-shadow:10px 10px 10px rgba(0,0,0,.1);}
.mobile .tit p {margin-bottom:30px; font-size:90px; line-height:1.2;}
.mobile .tit span {display:block; font-weight:bold; line-height:1.6; margin-bottom:50px;}
.mobile .msg {padding:10px 0;}

.mobile .m_front {background-image:none; background-color:#4175cc;}
.mobile .m_front .ani {position:absolute; width:100%; left:0; bottom:0; text-align:center}
.mobile .m_front .ani img {width:70%;}

.mobile .m_design {background-color:#20ace1;}
.mobile .m_design li img {border-radius:20px; border:10px solid #fff; background:#fff;}

.mobile .m_intro1 {background-color:#54b34f;}
.mobile .m_intro1 .tit {margin-bottom:80px;}
.mobile .m_intro1 .msg {margin-top:80px;}

.mobile .m_intro2 {background-color:#f97979;}
.mobile .m_intro2 .tit {margin-bottom:80px;}
.mobile .m_intro2 .tip {width:100%; background:#fff; color:#666; border-radius:20px; text-align:left;}
.mobile .m_intro2 .tip>span {display:block; width:100%; padding:30px 60px; border-top:1px solid #ddd; text-align:left; line-height:1.4;}
.mobile .m_intro2 .tip>span:first-child {border:0;}
.mobile .m_intro2 .tip>span span {display:block; color:#fe6565; padding-bottom:10px; text-align:left;}
.mobile .m_intro2 .tip>span:last-child {text-align:center; font-size:24px; color:#aaa;}

.mobile .m_price {background-color:#ffba00;}
.mobile .m_price .tit {margin-bottom:80px;}
.mobile .m_price .msg {margin-top:80px;}
.mobile .m_price .price li {margin:80px 0;}

.mobile .m_support {background-color:#0eb4a3; padding-bottom:0;}
.mobile .m_support a:link {color:yellow;}
.mobile .m_support .tit {margin-bottom:80px;}
.mobile .m_support .tit p {font-size:120px;}
.mobile .m_support .tit a span {font-size:36px;}
.mobile .m_support .msg {margin-bottom:200px; font-size:24px;}

.mobile .bottom {padding:50px; background:#fff;}
.mobile .bottom span {display:inline-block; margin:0 10px; color:#888; font-size:26px !important; font-weight:normal;}