@charset "utf-8";


/*apply*/
.program_wrap .range{margin-top: 50px; position: relative;}
.program_wrap .range .box{float:left;width:35.8%;min-height:180px;border: 1px solid #ddd;margin-left: -4%;}
.program_wrap .range .box:nth-child(1){background: url("../images/sub/sub_img01.jpg")no-repeat center center;background-size: cover;margin-left: 0;}
.program_wrap .range .box:nth-child(2),
.program_wrap .range .box:nth-child(3){background-color: #f7f7f7; padding: 30px 30px 20px; border: 1px solid #ddd;}
.program_wrap .range .box:nth-child(2){margin-top: 100px; left: 380px;}
.program_wrap .range .box:nth-child(3){margin-top: 20px; left: 760px;}
.program_wrap .range .box h3{color: #04a6ec; font-weight: 500;}
.program_wrap .range .box p{font-size: 15px; margin-top: 20px; color: #666; font-weight: 300;}
.program_wrap .range .box:before, .sub10 .range .box:after{ z-index: -1;  position: absolute;  content: "";  bottom: 15px;  left: 10px;  width: 50%;  top: 80%;  max-width:300px;  background: #777; -webkit-box-shadow: 0 15px 10px #777;  -moz-box-shadow: 0 15px 10px #777;  box-shadow: 0 15px 10px #777;  -webkit-transform: rotate(-3deg);  -moz-transform: rotate(-3deg);  -o-transform: rotate(-3deg);  -ms-transform: rotate(-3deg);  transform: rotate(-3deg);}
.program_wrap .range  .box:after{  -webkit-transform: rotate(3deg);  -moz-transform: rotate(3deg);  -o-transform: rotate(3deg);  -ms-transform: rotate(3deg);  transform: rotate(3deg);  right: 10px;  left: auto;}

/*가격 맞춤성 홈페이*/
.process2 {background-color:#fafafa;}
.process2 li {position:relative; float:left; width:20%; text-align:center; margin:20px 0;}
.process2 li:after {content:""; display:block; position:absolute; width:16px; height:16px; top:40px; right:-5px; border:2px solid #04a6ec; border-left:none; border-bottom:none; transform:rotate(45deg);}
.process2 .process2_circle {width:100px; height:100px; background-color:#eee; border-radius:100px; margin:0 auto;}
.process2 .process2_circle img {width:40px; margin-top:30px;}
.process2 p {margin-top:10px;}
.process2 li:nth-child(6), 
.process2 li:nth-child(7), 
.process2 li:nth-child(8), 
.process2 li:nth-child(9), 
.process2 li:nth-child(10) {float:right; padding-top:30px;}
.process2 li:nth-child(7):after, 
.process2 li:nth-child(8):after, 
.process2 li:nth-child(9):after, 
.process2 li:nth-child(10):after {border:2px solid #04a6ec; border-right:none; border-top:none; top:70px; right:-15px;}
.process2 li:nth-child(6):after {border:2px solid #04a6ec; border-top:none; border-left:none; top:-20px; right:auto; left:50%; margin-left:-8px;}
.process2 li:nth-child(5):after {display:none;}


.hcont4 .subcont1 h3 {padding:10px 20px; width:320px; border-radius:30px; background-color:#071c46; color:#fff; font-weight:400;text-align:center; margin:0 auto;}
.hcont4 .subcont1 ul {width:70%; margin:30px auto 0;}
.hcont4 .subcont1 ul:after {content:''; display:block; clear:both;}
.hcont4 .subcont1 ul li {width: 33.33%; float: left; padding:20px; text-align:center;}
.hcont4 .subcont1 ul li .icon {position:relative; width:100px; height:100px; border-radius: 100%; background-color:#fff; margin: 0 auto; border:5px solid #ddd;}
.hcont4 .subcont1 ul li:hover .icon {border-color:#04a6ec;}
.hcont4 .subcont1 ul li p {margin-top:20px; color:#666; font-weight:500;}
.hcont4 .subcont1 ul li:hover p {color:#04a6ec;}
.hcont4 .subcont2 {margin:20px 0 50px; width:100%; background-color:#071c46; text-align:center; padding:30px 2%; color:#fff; font-size:21px; font-weight:300;}
.hcont4 .subcont2 span {font-weight:400;}
.hcont4 .subcont1 ul li .icon:after {content:""; display:block; position:absolute; width:20px; height:40px; border:5px solid #ddd; left:50%; top:50%; margin-left:-10px; margin-top:-30px; border-top:none; border-left:none; transform:rotate(45deg);}
.hcont4 .subcont1 ul li:hover .icon:after {border-color:#04a6ec;}

.hcont5 .bottom {margin-top:50px;}
.hcont5 .bottom .bg {background-color:#f7f7f7;}
.hcont5 .bottom .left,
.hcont5 .bottom .right {width:50%; height:auto; padding:50px 20px;}
.hcont5 .bottom .left img,
.hcont5 .bottom .right img {max-width:100%;}
.hcont5 .bottom .left h2,
.hcont5 .bottom .right h2 {font-size:20px; font-weight:400;color:#444;}
.hcont5 .bottom .left p,
.hcont5 .bottom .right p {font-size:14px; margin-top:20px; font-weight:300;}


/*homepage*/
.program_wrap .hcont1{width: 100%;height: 300px; background: url("../images/homepage/homepage_img01.jpg") no-repeat center top; background-size:contain; }
.program_wrap .hcont1 .tit{position: relative; width: 650px; padding: 50px; background: rgba(249,249,249,.7); text-align: center; top: 250px; float: right;}
.program_wrap .hcont1 .tit:before{content: '';width: 60px; height: 60px; position: absolute; top: 0; left: 0; border-top: 1px solid #04a6ec; border-left: 1px solid #04a6ec; }
.program_wrap .hcont1 .tit:after{content: '';width: 60px; height: 60px; position: absolute; bottom: 0; right: 0; border-right: 1px solid #04a6ec; border-bottom: 1px solid #04a6ec; }
.program_wrap .hcont1 .tit p{text-align: left; color: #566;}
.program_wrap .hcont1 .tit h2{font-size: 1.82em; text-align: left; color: #04a6ec; text-shadow: 2px 2px #caedfc; margin-top: 5px;}

.program_wrap .hcont2{margin-top: 200px; background: url("../images/homepage/homepage_img02.jpg")no-repeat right 20px top; height: 500px; background-size: contain;}
.program_wrap .hcont2 .tit,
.program_wrap .hcont3 .tit{position: relative; padding-top: 5px;}
.program_wrap .hcont2 .tit:after,
.program_wrap .hcont3 .tit:after{content: ''; position: absolute; width: 50px;border-top: 3px solid #666; top: 0;}
.program_wrap .hcont2 .tit h2,
.program_wrap .hcont3 .tit h2{font-size: 1.75em; color: #333}
.program_wrap .hcont2 .tit h2 span,
.program_wrap .hcont3 .tit h2 span{ font-size:21px;font-weight: 400;}
.program_wrap .hcont2 .txt{margin-top: 30px; font-size: ; line-height: 1.7; width: 50%;}

.program_wrap .hcont3{width: 100%;position: relative; margin-top: 120px; }
.program_wrap .hcont3 .step{ margin-top: 50px; }
.program_wrap .hcont3 .step ul li{width: 20%; height: 200px; position: relative; text-align: center; padding-right: 40px}
.program_wrap .hcont3 .step ul li:nth-child(-n+5){float: left; margin-bottom: 40px;}
.program_wrap .hcont3 .step ul li:nth-child(n+6){float: right; }
.program_wrap .hcont3 .step ul li.next:after{background: url("../images/homepage/homepage_icon11.gif")no-repeat right center; content: ""; width: 25px; height: 25px; position: absolute; right:15px; top: 50%; margin-top: -15px;}
.program_wrap .hcont3 .step ul li.bottom:after{background: url("../images/homepage/homepage_icon11.gif")no-repeat right; content: ""; width: 25px; height: 25px; position: absolute; bottom:-30px; right: 50%;margin-left: -25px; -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ transform: rotate(90deg); }
.program_wrap .hcont3 .step ul li.next2:after{background: url("../images/homepage/homepage_icon11.gif")no-repeat right; content: ""; width: 25px; height: 25px; position: absolute; left:-30px; -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); top: 50%; margin-top: -15px;}
.program_wrap .hcont3 .step ul li:nth-child(1){background: url("../images/homepage/homepage_bg01.gif")no-repeat left center; background-size: 200px;}
.program_wrap .hcont3 .step ul li:nth-child(2){background: url("../images/homepage/homepage_bg02.gif")no-repeat left center; background-size: 200px;}
.program_wrap .hcont3 .step ul li:nth-child(3){background: url("../images/homepage/homepage_bg03.gif")no-repeat left center; background-size: 200px;}
.program_wrap .hcont3 .step ul li:nth-child(4){background: url("../images/homepage/homepage_bg04.gif")no-repeat left center; background-size: 200px;}
.program_wrap .hcont3 .step ul li:nth-child(5){background: url("../images/homepage/homepage_bg05.gif")no-repeat left center; background-size: 200px;}
.program_wrap .hcont3 .step ul li:nth-child(6){background: url("../images/homepage/homepage_bg06.gif")no-repeat left center; background-size: 200px;}
.program_wrap .hcont3 .step ul li:nth-child(7){background: url("../images/homepage/homepage_bg07.gif")no-repeat left center; background-size: 200px;}
.program_wrap .hcont3 .step ul li:nth-child(8){background: url("../images/homepage/homepage_bg08.gif")no-repeat left center; background-size: 200px;}
.program_wrap .hcont3 .step ul li:nth-child(9){background: url("../images/homepage/homepage_bg09.gif")no-repeat left center; background-size: 200px;}
.program_wrap .hcont3 .step ul li:nth-child(10){background: url("../images/homepage/homepage_bg10.gif")no-repeat left center; background-size: 200px;}
.program_wrap .hcont3 .step ul li img{width: 61px; max-width: 100%; padding-top: 50px}
.program_wrap .hcont3 .step ul li p{margin-top: 10px; font-size: 1.125em; color: #04a6ec; font-weight: 500}


/*app*/
.program_wrap .app_cont{margin-top: 80px;}
.program_wrap .app_cont .cont1{background: url("../images/app/app_img01.jpg")no-repeat center top; width: 100%; height: 380px; background-attachment: fixed; position: relative;}
.program_wrap .app_cont .cont1 .tit{position: absolute; left:50%; margin-left:-600px; text-align:right; padding-top:100px;}
.program_wrap .app_cont .cont1 .tit h2{font-size: 36px; color: #04a6ec; margin-top:40px; font-weight:600;}
.program_wrap .app_cont .cont1 .tit p{margin-top: 10px; font-weight: 500; color: #666}
.program_wrap .app_cont .cont1 .tit button{margin-top: 20px; width: 250px; background-color: transparent; border: 3px solid #04a6ec;}

.program_wrap .app_cont .cont2 .txt ul {margin:50px 0;}
.program_wrap .app_cont .cont2 .txt ul li{float:left; width: 33.3%; height:500px; text-indent: -99999px;overflow: hidden; background-repeat:no-repeat; background-position:center center; background-size:contain;}
.program_wrap .app_cont .cont2 .txt ul li:nth-child(1){background-image: url("../images/sub/background_app_device1.png"); -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s; }
.program_wrap .app_cont .cont2 .txt ul li:nth-child(2){background-image: url("../images/sub/background_app_device2.png"); -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s; }
.program_wrap .app_cont .cont2 .txt ul li:nth-child(3){background-image:url("../images/sub/background_app_device3.png"); -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 6s; /* Firefox < 16 */
        -ms-animation: fadein 6s; /* Internet Explorer */
         -o-animation: fadein 6s; /* Opera < 12.1 */
            animation: fadein 6s; }

@keyframes fadein {
    from { opacity: 0; margin-left: -500px;}
    to   { opacity: 1; margin-left: 0;}
}


.program_wrap .app_cont .cont2.hybrid{padding: 80px 0;background: url("../images/shop/anigen_bg1.png") no-repeat center 250px #f7f7f7;width: 100%; background-size: 360px;}  
.program_wrap .app_cont .cont2.hybrid .txt_box{position: relative; width: 200px;}
.program_wrap .app_cont .cont2.hybrid .txt_box h4{font-weight: 500;}
.program_wrap .app_cont .cont2.hybrid .txt_box p{font-size: 0.813em; margin-top: 10px; color: #666;}
.program_wrap .app_cont .cont2.hybrid .hybrid_cont {width:100%; max-width:1000px; margin:0 auto;}
.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(1){margin:110px 0 0 2%;}
.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(1):before{content: ''; position: absolute; width: 150px; border-top: 1px solid #000;  left: 50%; margin-left: 100px; top: 14px}
.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(2){margin:-50px 0 0 2%; float:right;}
.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(2):before{content: ''; position: absolute; width: 100px; border-top: 1px solid #000;  right: 50%; margin-right: 130px; top: 12px}
.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(3){margin:70px 0 0 18%;}
.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(3):before{content: ''; position: absolute; width: 160px; border-top: 1px solid #000;  left: 50%; margin-left: 10px;top: 9px;}
.program_wrap .app_cont .feature {overflow:hidden;}
.program_wrap .app_cont .feature h3{font-size: 34px; color: #333; font-weight: 400;margin-top: 200px;}
.program_wrap .app_cont .feature ul li{width: 33.3%; float: left; text-align: center; margin-top: 50px; height:160px;}
.program_wrap .app_cont .feature ul li .circle{width: 70px; height: 70px; border-radius: 50%; border: 5px solid #ddd; margin: 0 auto;}
.program_wrap .app_cont .feature ul li:nth-child(1) .circle{background: url("../images/app/app_gray_icon01.png")no-repeat center center;}
.program_wrap .app_cont .feature ul li:nth-child(2) .circle{background: url("../images/app/app_gray_icon02.png")no-repeat center center;}
.program_wrap .app_cont .feature ul li:nth-child(3) .circle{background: url("../images/app/app_gray_icon03.png")no-repeat center center;}
.program_wrap .app_cont .feature ul li:nth-child(4) .circle{background: url("../images/app/app_gray_icon04.png")no-repeat center center;}
.program_wrap .app_cont .feature ul li:nth-child(5) .circle{background: url("../images/app/app_gray_icon05.png")no-repeat center center;}
.program_wrap .app_cont .feature ul li:nth-child(6) .circle{background: url("../images/app/app_gray_icon06.png")no-repeat center center;}

.program_wrap .app_cont .feature ul li:nth-child(1) .circle:hover{background: url("../images/app/app_icon01.png")no-repeat center center; border-color:#04a6ec;}
.program_wrap .app_cont .feature ul li:nth-child(2) .circle:hover{background: url("../images/app/app_icon02.png")no-repeat center center; border-color:#04a6ec;}
.program_wrap .app_cont .feature ul li:nth-child(3) .circle:hover{background: url("../images/app/app_icon03.png")no-repeat center center; border-color:#04a6ec;}
.program_wrap .app_cont .feature ul li:nth-child(4) .circle:hover{background: url("../images/app/app_icon04.png")no-repeat center center; border-color:#04a6ec;}
.program_wrap .app_cont .feature ul li:nth-child(5) .circle:hover{background: url("../images/app/app_icon05.png")no-repeat center center; border-color:#04a6ec;}
.program_wrap .app_cont .feature ul li:nth-child(6) .circle:hover{background: url("../images/app/app_icon06.png")no-repeat center center; border-color:#04a6ec;}
.program_wrap .app_cont .feature ul li h4{color: #666; margin-top: 10px;}
.program_wrap .app_cont .feature ul li .circle:hover + h4{color:#04a6ec;}
.program_wrap .app_cont .feature ul li p{font-size: 0.813em; color: #666; margin-top: 5px;}

.program_wrap .app_cont .skills .inner{margin-top: 50px;}
.program_wrap .app_cont .skills .box{width: 48%; float: left; height: 300px; margin: 1%; padding: 50px; text-align: center;}
.program_wrap .app_cont .skills .box .note{background: rgba(0,0,0,0.3); width: 100%; height: 100%; position: relative; position: relative; padding: 30px 55px;}
.program_wrap .app_cont .skills .box .note:before{content: "";position: absolute; width: 90%; height: 70%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; left: 0; margin-left: 5%;}
.program_wrap .app_cont .skills .box .note:after{content: "";position: absolute; width: 80%; height: 90%; border-left: 1px solid #ccc; border-right: 1px solid #ccc; top: 0; margin-top: 2.5%; left: 50%; margin-left: -40%;}
.program_wrap .app_cont .skills .box h3{color: #fff; font-size: 1.5em; margin-top: 16px}
.program_wrap .app_cont .skills .box p{font-size: 0.813em; margin-top: 10px; color: #eaeaea;}
.program_wrap .app_cont .skills .box.box1{background: url("../images/app/app_img06.jpg")no-repeat center center;}
.program_wrap .app_cont .skills .box.box2{background: url("../images/app/app_img06.jpg")no-repeat center center;}
.program_wrap .app_cont .skills .box.box3{background: url("../images/app/app_img06.jpg")no-repeat center center;}
.program_wrap .app_cont .skills .box.box4{background: url("../images/app/app_img06.jpg")no-repeat center center;}



@media only screen and (max-width:1200px) {

	.program_wrap .app_cont .cont1 .tit {margin:0; left:0; padding-top:50px;}
	.program_wrap .app_cont .cont1 .tit h2 {font-size:26px;}
	.program_wrap .app_cont .cont1 .tit p {font-size:12px; padding-left:50%;}
	.program_wrap .app_cont .cont2 .txt ul li {height:400px;}
	
	.program_wrap .app_cont .feature ul li {padding:0 2%;}
	.program_wrap .app_cont .feature ul li p br {display:none;}

}


@media only screen and (max-width:768px) {
	
	/*가격 맞춤성 홈페이 */
	.process2 {padding-bottom:20px;}
	.process2 li {width:33.3%; padding-top:10px !important;}
    .process2 .process2_circle {width:80px; height:80px;}
    .process2 .process2_circle img {width:30px; margin-top:24px;}
	.process2 li:nth-child(1),
	.process2 li:nth-child(2),
	.process2 li:nth-child(3) {padding-top:0;}
	.process2 li:nth-child(3):after {display:none;}
	.process2 li:nth-child(4),
	.process2 li:nth-child(5) {float:right;}
	.process2 li:nth-child(7),
	.process2 li:nth-child(8) {float:left;}
	.process2 li:nth-child(4):after,
	.process2 li:nth-child(7):after {border:2px solid #04a6ec; border-top:none; border-left:none; top:-30px; right:auto; left:50%; margin-left:-8px;}
	.process2 li:nth-child(5):after,
	.process2 li:nth-child(6):after {display:block; border:2px solid #04a6ec; border-right:none; border-top:none; top:40px; left:auto; right:-15px;}
	.process2 li:nth-child(8):after,
	.process2 li:nth-child(9):after {border:2px solid #04a6ec; border-left:none; border-bottom:none; right:auto;left:-15px; top:40px;}
	.process2 li:nth-child(10) {float:none; clear:both; width:100%; border-top:1px solid #ccc; padding-top:60px !important;}
	.process2 li:nth-child(10):after {top:15px; transform:rotate(-45deg); left:0; right:0; margin:auto;}
	
	.hcont4 .subcont1 ul {width:100%;}
	.hcont4 .subcont1 h3 {width:280px; font-size:13px;}
	.hcont4 .subcont1 ul li {padding:5px;}
	.hcont4 .subcont1 ul li .icon {width:80px; height:80px;}
	.hcont4 .subcont1 ul li .icon:after {width:15px; height:30px; margin-top:-25px;}
	.hcont4 .subcont1 ul li p {font-size:14px; margin-top:10px;}
	.hcont4 .subcont2 {font-size:16px;}
	
	.hcont5 .bottom .left,
	.hcont5 .bottom .right {float:none; width:100%;}
	
	.program_wrap .range .box:nth-child(1),
	.program_wrap .range .box:nth-child(2),
	.program_wrap .range .box:nth-child(3) {float:none; width:100%; margin:0 0 10px 0;}

	.program_wrap .app_cont {margin-top: 40px;}
	.program_wrap .app_cont .cont2 .txt ul li {height:300px;}
	.program_wrap .app_cont .cont2.hybrid {background-position:left 260px; background-size:50%;}
	.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(1),
	.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(2),
	.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(3) {float:none; margin:0;padding: 0 2% 0 55%; width:100%; margin-top:40px;} 
	.program_wrap .app_cont .cont2.hybrid .txt_box:before {display:none;}
	
	
}

@media only screen and (max-width:480px){
		
	.hcont4 .subcont1 ul li p {font-size:12px;}
    .hcont4 .subcont2 {font-size:14px;}
    .hcont4 .subcont2 br {display:none;]}
		
	.program_wrap .app_cont .cont1 .tit p {padding-left:20%;}
	
	.program_wrap .app_cont .cont2 .txt ul {margin:30px 0;}
	.program_wrap .app_cont .cont2 .txt ul li {height:320px;}
	.program_wrap .app_cont .cont2.hybrid {background-position:center 250px; background-size:200px;}
	.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(1),
	.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(2),
	.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(3) {width:100%; padding:0 4%; margin-top:20px; text-align:center;} 
	.program_wrap .app_cont .cont2.hybrid .txt_box:nth-child(1) {margin-top:260px;}
	.program_wrap .app_cont .cont2.hybrid .txt_box p {margin-top:2px;}
	
	.program_wrap .app_cont .feature ul li {width:100%; margin-top:30px}
	.program_wrap .app_cont .feature ul li p {font-size:12px;}

	
}