/* p1 */
.p1{position:relative; width:100%; background-color:#000;}
.p1 video {width:100%; vertical-align:top; opacity:1}
.p1 .visual {position:absolute; top:0; left:0; width:100%; background-image:url(../images/main/p1_bg02.png); background-repeat:no-repeat; background-position:center bottom; background-size:contain}
.p1 .sLogo{position:absolute; left:30px; bottom:160px; font-size:18px; font-weight:600; color:#009cd1; transform:rotate(-90deg); z-index:100;}
.p1 .titWrap{position:absolute; top:34%; left:20%; width:1200px; margin:0 auto; text-align:left; z-index:10}
.p1 .titWrap h2{margin-bottom:30px; font-size:54px; font-weight:bold; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,5)}
.p1 .titWrap h3{margin-bottom:80px; font-size:20px; font-weight:200; line-height:1.6; color:#fff;}
.p1 ul li{float:left; width:240px; height:70px; margin-right:10px;}
.p1 ul li a{display:inline-block; width:100%; height:100%; padding:0 30px; font-size:18px; line-height:62px; color:#fff; border:1px solid #009cd1; background:url(../images/main/p1_arrow.png) no-repeat; background-size:20px; background-position:180px 22px; transition:0.3s;}
.p1 ul li a:hover{color:#fff; background-color:#009cd1; background-position:190px 22px;}
 
.p1 .swiper-slide{position:relative; padding-top:56.25%;}
.p1 .swiper-slide .v-bg{position:absolute; right:0; top:10%; width:54%;}
.p1 .swiper-slide .v-bg img{width:100%;}
.p1 .swiper-pagination-clickable{position:absolute; bottom:120px; right:60px; width:5px;}
.p1 .swiper-pagination-bullet{width:100%; height:40px; border-radius:0; background-color:#fff;}
.p1 .swiper-pagination-bullet-active{background-color:#009cd1;}
.swiper-slide {opacity:0 !important; transition:0.3s}
.swiper-slide.swiper-slide-active {opacity:1 !important; transition:0.3s}



/* p2 */
.p2{width:100%; min-width:1200px; padding:120px 0; background-color:#10101f;}
.p2 .con{width:1200px; height:480px; margin:0 auto;}
.p2 .con li{float:left; width:285px; height:100%; margin-right:20px; padding:360px 30px 0; border:1px solid rgba(255,255,255,0.3); cursor:pointer; transition:ease .3s; overflow:hidden;}
.p2 .con li:last-child{margin-right:0}
.p2 .con .title{position:absolute; z-index:10;}
.p2 .con .title h3{margin-bottom:10px; font-size:16px; color:#fff; opacity:0.8;}
.p2 .con .title h2{font-size:20px; font-weight:bold; color:#fff;}
.p2 .con .title:after{display:none; content:''; position:relative; top:30px; width:40px; height:1px; background-color:#fff;}
.p2 .hCon{position:absolute; z-index:10; padding-top:100px; display:none;}
.p2 .hCon > p{font-size:15px; line-height:22px; color:#fff;}
.p2 li .hBg{position:absolute; top:0; left:0; width:100%; opacity:.3; transition:ease .2s}
.p2 li .hBg img{width:100%;}



/* p3-addClass */
.p2 .con li.on{
	padding:280px 30px 0; border:2px solid #009cd1;
	background: #1a0962; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #1a0962 0%, #009cd1 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  #1a0962 0%,#009cd1 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  #1a0962 0%,#009cd1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.p2 .con li.on .title:after{display:block;}
.p2 .con li.on .hCon{display:block;}
.p2 .con li.on .hBg{position:absolute; top:0; left:0; width:110%; opacity:.6; transition:ease .3s}


/* p3 */
.p3 {width:100%; min-width:1200px; padding:120px 0 0; background-color:#10101f;}
.p3 .con:after {content:''; display:block; height:120px; margin-top:-120px; background:#009bd1}
.p3 .product {position:relative; width:1200px; height:600px; margin:0 auto}
.p3 .product .pc {position:absolute; bottom:0; left:0;}
.p3 .product .pc li {width:1100px; max-height:600px; margin-left:100px; overflow:hidden}
.p3 .product .m {position:absolute; bottom:0; left:0; width:260px; height:460px; padding:29px 0 0 10px; background-image:url(../images/main/phone_bg.png); background-repeat:no-repeat; z-index:100}
.p3 .product .m li {width:233px; height:414px; overflow:hidden; border:none; border-radius:10px }
.p3 .product .guide {position:absolute; bottom:0; left:0; width:820px; height:120px; padding:25px 0 0 300px; color:#fff; background-color:#009bd1; z-index:10}
.p3 .product .guide a{width:100%; height:100%;}
.p3 .product .guide h2 {font-size:24px; margin-bottom:10px; font-weight:600;}
.p3 .product .guide h2 span{position:relative; left:14px; top:-2px; padding:6px 18px; font-size:16px; color:#0098d1; background-color:#fff; border-radius:30px;}
.p3 .product img {width:100%; height:auto}
.p3 .swiper-pagination {display:none}


/* p4 */
.p4 {width:100%; min-width:1200px; padding:120px 0; background-color:#009bd1;}
.p4 .con {width:1200px; height:350px; margin:0 auto}
.p4 .con ul {float:left; width:50%; padding:0 10px}
.p4 .con ul:first-child li{width:100%; line-height:50px; color:#fff; margin-bottom:20px; border-bottom:1px solid #4dbbe0}
.p4 .con ul:first-child li:last-child {border-bottom:none}
.p4 .con ul:first-child li label {float:left; display:inline-block; width:30%; color:#fff}
.p4 .con ul:first-child li input[type=text] {width:70%; background-color:transparent} 
.p4 .con ul:first-child li input::placeholder {color:#d5e0e4;}/* 파이어폭스 51+, 크롬 57+ */
.p4 .con ul:first-child li select {width:70%; background-color:transparent}
.p4 .con ul:first-child li option{color:#111;}
.p4 .con ul textarea {width:100%; height:260px; padding:20px;}
.p4 .con ul input[type=button] {width:100%; height:80px; color:#fff; font-size:22px; font-weight:bold; background-color:#111020;}


/* mob */
@media only screen and (max-width:640px){
	.none{display:none;}
	.mdp {display:block}
	
    /* p1 */
    .p1 {overflow:hidden}
	.p1 video {width:275%; margin-left:-50%}
	.p1 .swiper-slide{padding-top:155%;}
	.p1 .swiper-slide img{display:none;}
    .p1 .swiper-pagination-clickable{top:auto; right:auto; bottom:30px; width:100%}
	.p1 .swiper-pagination-bullet {width:10px; height:4px}
	.p1 .swiper-pagination-bullet-active {width:80px}
    .p1 .sLogo{display:none;}
    .p1 .titWrap{top:20%; left:0; width:100%; padding:0 15px;}
    .p1 .titWrap h2{margin-bottom:20px; font-size:30px;}
    .p1 .titWrap h3{margin-bottom:40px; font-size:15px; font-weight:200;  color:#fff;}
    .p1 ul {width:100%;}
	.p1 ul li{width:100%; height:54px; margin:0 0 10px;}
    .p1 ul li a{text-align:center; font-size:16px; line-height:50px; background-position:90%;}
    .p1 ul li a:hover{background-position:92%;}
    
	
	
	/* p2 */
    .p2{min-width:0; padding:60px 15px 100px; overflow:hidden;}
    .p2 .con{width:100%; margin:0 auto}
    .p2 .con li{width:100%; height:60%; margin-right:0; margin-bottom:30px; padding:160px 30px 0}
	.p2 .con li.on {padding:90px 30px 0}
	.p2 li .hBg img{margin-top:-20%;}
	
	
	
	/* p3 */
	.p3 {min-width:100%; padding:20px 0 0;}
	.p3 .product {width:100%; height:420px}
	.p3 .product .pc {bottom:120px; left:10px}
	.p3 .product .pc li {width:95%; margin-left:5%}
	.p3 .product .m {bottom:70px; width:45%; height:auto; background-size:100%; padding:5% 0 8% 2%}
	.p3 .product .m li {width:92%; height:auto}
	.p3 .product .guide {width:100%; padding:40px 40px 20px 20px}
	.p3 .product .guide a{right:0;}
	.p3 .product .guide p {font-size:.95em}
	
	/* p4 */
    .p4 {min-width:0; padding:100px 15px 80px;}
    .p4 .titBox{width:100%;}
    .p4 .con{width:100%; height:auto; overflow:hidden;}
    .p4 .con ul {width:100%; padding:0;}
	.p4 .con ul textarea{height:200px;}
	.p4 .con ul input[type=button]{height:60px; font-size:18px;}
}