/* p1 */
.p1{position:relative; width:100%; }
.mainImg { width: 100%; }
.mainImg img { width: 100%; }
.p1 .visual {position:absolute; top:0; left:0; width:100%; height: 100%; }
.p1 .sLogo{position:absolute; left:30px; bottom:160px; font-size:18px; font-weight:600; color:#ff3737; transform:rotate(-90deg); z-index:100;}
.p1 .titWrap{position:absolute; top:35%; left:20%; width:1200px; margin:0 auto; text-align:left; z-index:10}
.p1 .titWrap h2{ position: relative; margin-bottom:30px; color:#2c2f4b; font-size:54px; font-weight: 700;  }
.p1 .titWrap h3{margin-bottom:80px; color:#2c2f4b; font-size:20px; font-weight:400; line-height:1.6; }
.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:70px; color:#fff; border-radius: 40px; background:url(../images/main/p1_arrow.png) no-repeat #cc121d; background-size:20px; background-position:180px 22px; transition:0.3s;}
.p1 ul li a:hover{color:#fff; background-color:#ff3737; background-position:190px 22px;}
 
.p1 .swiper-slide{position:relative; padding-top:56.25%;}
.p1 .swiper-slide .v-bg{position:absolute; width: 40%; right: 10%; top: 20%;}
.p1 .swiper-slide .v-bg img{width:90%;}

.p1 .swiper-pagination-clickable{position:absolute; bottom:160px; right:60px; width:5px;}
.p1 .swiper-pagination-bullet{width:100%; height:40px; border-radius:0; background-color:#000;}
.p1 .swiper-pagination-bullet-active{background-color:#ff3737;}
.swiper-slide {opacity:0 !important; transition:0.3s}
.swiper-slide.swiper-slide-active {opacity:1 !important; transition:0.3s}
.hCon br { display: none; }


/* p2 */
.p2{width:100%; min-width:1200px; padding:120px 0;}
.p2 .con{width:1200px; height:480px; margin:0 auto;}
.p2 .con li{ position: relative; float:left; width:380px; 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 li::after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.7); }
.p2 .con .title{position:absolute; padding: 20px; background: #fff; box-shadow: 0 0 5px #ccc; z-index:10;}
.p2 .con .title h3{margin-bottom:10px; font-size:16px; color:#252525; opacity:0.8; }
.p2 .con .title h2{font-size:20px; font-weight:bold; color:#252525;}
.p2 .con .title:after{display:none; content:''; position:relative; top:20px; 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%; transition:ease .2s}
.p2 li .hBg img{width:100%;}



/* p3-addClass */
.p2 .con li.on{ padding:300px 20px 0; }
.p2 .con li.on::after { top: 280px; width: 90%; height: 35%; background: rgba(255,255,255,255); }
.p2 .con li.on .title { padding: 0; box-shadow: none; background: none; }
.p2 .con li.on .title h3, 
.p2 .con li.on .title h2,
.p2 .con li.on .hCon > p { color: #252525; }
.p2 .con li.on .title:after{display:block; background-color: #000;}
.p2 .con li.on .hCon{display:block;}
.p2 .con li.on .hBg{position:absolute; top:0; left:0; width:110%; transition:ease .3s}

/* p3 */
.p3 {width:100%; min-width:1200px; padding:120px 0 0; }
.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; display: none}
.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:720px; height:120px; padding:25px 40px 0 120px; 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:#333;}
.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 #878787}
.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:#b1b1b1;}/* 파이어폭스 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:#cc121d;}
.p4 .titBox h2 { color: #fff; }
.p4 .titBox h3 { color: #cfcfcf; }
.p4 .titBox h2::before { background: #fff; }
#ch { margin-right: 5px; }


/* mob */
@media only screen and (max-width:640px){
	.none{display:none;}
	.mdp {display:block}
	
    /* p1 */
    .p1 {overflow:hidden}
	.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:400; }
    .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%;}
	div > .titBox h2::before { bottom: -8px; height: 3px; }
	.hCon br { display: block; }
	
	/* p2 */
    .p2{min-width:0; padding:60px 15px 60px; 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:110px 30px 0}
	.p2 li .hBg img{margin-top:-20%;}
	.p2 .con li.on::after { top: 95px; width: 90%; height: 60%; }
	
	
	/* 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}
	.p3 .swiper-slide{ flex-direction: column;}
	.p3 .swiper-slide img { width: 90%; }
	.p3 article > ul li.conBox { margin-left: 0!important; }
	.pro dl { width: 100%!important; padding-left: 10px!important; }
	.pro dl .subText { margin-bottom :20px!important; }
	.pro dl .subText:after { top: 11px!important; }
	.pro .titleBox > h2::before { left: 0!important; margin-left: 0!important; }
	.pro .btnArea { width: 100%!important; }
	.swiper-button-prev, .swiper-button-next { width: 20px; height: 33px; background-size: 20px auto; }
	
	/* p4 */
    .p4 {min-width:0; padding:50px 15px 80px;}
    .p4 .titBox{width:100%; margin-bottom: 50px!important;}
    .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;}
	
}