@charset "UTF-8";

.bg-white{
	background-color: #FFFFFF;
}
.bg-gray{
	background-color: #F8F8FA;
}

.text-primary{
	color:#043956;
}


.navbar-brand>img {
	display: block;
	float:left;
	margin-top:-10px;
	margin-right: 10px;
}
.nav>li>a{
	color:#043956;
	padding-left: 14px;
	padding-right: 14px;
}
.navbar-toggle{
	background:linear-gradient(#043956, #161D4A);
}
.navbar-toggle .icon-bar{
	background-color: white;
}




.navbar{
	padding:10px 0;
	border-bottom:1px solid #eeeeee;
}

.btn{
	display: inline-block;
	border-radius: 1em;
	color:white;
	font-size: 1em;
	background-color: #161D4A;
}

.btn-app
{
	border:none;
	border-radius: 100px;
}

.btn-app.btnm{
  border: 1px solid transparent;
}

.btn-app.btnw{
	border: 1px solid transparent;
}

.main_web{
	left: 0;
	transition: left 1s ease;
}

.main_web.move{
	left: 65px;
	transition: left 1s ease;
}

.btn-app.mlogout.move,.btn-app.wlogout.move{
	opacity : 0;
	transition: opacity 1s ease;
}

.btn-app.mlogout{
	border-right: 1px solid #161D4A;
	border-bottom: 1px solid #161D4A;
	border-top: 1px solid #161D4A;
	border-radius: 0px 100px 100px 0px ;
	opacity : 1;
	transition: opacity 1s ease;
	/* transition: border 1s ease; */
	padding-left: 29px;
}

.btn-app.wlogout{
	border-right: 1px solid #EF3829;
	border-bottom: 1px solid #EF3829;
	border-top: 1px solid #EF3829;
	border-radius: 0px 100px 100px 0px ;
	padding-left: 29px;
	opacity : 1;
	transition: opacity 1s ease;
	color: #EF3829;
}

.btn-app > span{
	display: inline-block;
    padding: 10px 20px;
	line-height: 25px;
}

.btn.btnw:link{
	color:white;
	background:linear-gradient(#F0693A, #EF3829);
}
.btn.btnw:hover, .btn.btnw:focus{
	background: linear-gradient(#f34407, #f51906);
}

/*.btn:hover, .btn:focus
{
	color:white;
	background:linear-gradient(#222222, #000000);
}*//*0217은경수정*/

/*hero*/
.hero{
	padding:50px 0;
	margin-top:80px;
}
.hero .img-responsive {
	margin-top: 50px;
	width: 100%;
}

.hero .btn-primary{
	margin: 30px;
}

.hero-headline{
	font-size: 80px;
	font-weight: 900;
	line-height: 80px;
}
.hero-headline span {
	font-weight: 200;
	color:gray;
}

.hero a,
.hero h1,
.hero p
{margin-top:30px;}


/*index*/

.main-section01{
	height: 800px;
	margin: 100px 0;

	background-image: url(../images/lc/img_section_01_bg@2x.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size:contain;
}

.main-section02{
	height: 800px;
	margin: 100px 0px 100px 150px;
	padding: 100px 0;
	background-image: url("../images/lc/img_section_02_bg@2x.png");
	background-position: center right;
	background-repeat: no-repeat;
	background-size:contain;
}
/*이미송주임 201109수정*/
.main-section02 img { margin-right: 15px;}
.main-section02 img,.main-section02 span{display: inline-block; vertical-align: middle;}
.main-section02 .section02_tit { margin-bottom: 60px;}
.main-section02 > div span {font-size:36px !important; font-weight: 600;}
.main-section02 p {margin-bottom: 80px;line-height: 25px;}
.main-section02 h4 {color:#161D4A; font-weight:600; }/**/

/* 201110 추가 이인호 */
@media screen and (max-width: 767px){
	.main-section02 p {margin-bottom: 20px;line-height: 25px;}
}

/*user-manual*/
.user-manual{
	height: 700px;
	background-image: url("../images/lc/pinpl_manual_here_background.jpg");
	background-position: center;
	background-repeat: no-repeat;
}

.user-manual .bg-image{
	height:600px;
	background-image: url("../images/lc/Mask Group 1528@2x.png");
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 70%;
}

/*marketing*/

.marketing {
	height: 900px;
	background-image: url("../images/lc/img_paper_lc_greybg@2x.png");
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size:contain;
	padding:20px 0;
}
.marketing h1{}

.marketing img{
	margin-top:20px;
	margin-bottom:20px;
}
/*information*/

.information {padding:80px 0}

.information .col-md-4{
	text-align: center;
	margin-bottom: 50px;
}
.information p {
	padding-top: 20px;
	font-size: 17px;
}

/*about-pinpl*/
.about-pinpl{
	padding:150px 0px;
}

/*function*/
.function{
	padding:80px 0;
}
.function-divider{
	margin:50px 0px;
}
.title-divider{
	border-color: black;
	border-style: solid;
	border-width: 2px;
	margin-right: 90%;

}


.function h1{
	margin-top:150px;
}


/*user-manual*/



.manual-box-title{
			     width: 170px;
                 height: 170px;
                 float: left;
                 margin: 20px 10px 0 10px;
				padding:20px;
                 display: table;
}
.manual-box{
			     width: 170px;
                 height: 170px;
                 float: left;
                 background-color: white;
                margin: 20px 10px 0 10px;
                 display: table;
                 border-radius: 15px;
                 box-shadow: 2px 2px 3px 1px rgb(220, 220, 220);
}

.manual-box > div {
	display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
}

.manual-box:focus,
.manual-box:hover{
	cursor: pointer;
	background:linear-gradient(#043956, #161D4A);
	color:white;
}

.modal-body{
	padding:0px;
}
.modal-img{
	width: 100%;
}
.modal_close{
    position: absolute;
    top:10px;
    right: 10px;
    width: 32pt;
    height: 32pt;
    background:url(images/pinplTest/pinplguide_images/pinplguide_close.png);
    background-size: cover;
    border: none;

}

.close-btn{
	position: absolute;
	left: 10.5%;
	bottom: 30px;
	width: 79.2%;
	height: auto;
	border:none;
	box-shadow: 2px 2px 6px 0px #00000080;
	border-radius: 10px;
	cursor: pointer;
}
/*footer*/
.footer {
	padding:50px 0;
	color:#ddd;
	font-weight: 400;
	background-color: #272727;
}



.footer ul li {

	float:left;
	padding: 5px 10px;
	margin-right: 20px;

}
.footer img {float:left; margin-right: 20px;}

.lead{
	font-size: 35px;
	min-width: 595px;
}

#autoAnnual{
	font-size: 80px;
}

#pinplTitle{
	font-size: 120px;
}

.description_text{
	font-weight: 400;
	text-align: left;
	font-size: 18px;
}

.title_text{
	font-size: 45px;
    font-weight: 400;
    letter-spacing: 0;
    color: #0F0F0F;
}

.magazine-banner{
	background-image: url('../pinpl-magazine/img/magazine-banner-back.png');
	background-position: center;
	background-repeat: repeat-x;
}
#pinpl_magazine{
	border:none;
}
button#pinpl_magazine:hover{
	background:linear-gradient(#eee, #000000);
}

.vertical-middle{
padding-top: 180px;
color: #fff;
}

.vertical-middle .btn{
	color:#333;
	background-color: #fff;
	border-radius: 2em;
	font-size: 14px;
}

/* 201109 추가 이인호 */
#footerLogo{
	/* max-height: 50px; margin: 10px 5px 0px 0px; */
	max-height: 40px; margin: 0px; float: none;
}
/* 201110 추가 이인호 */
#section01-text1{
	font-size: 29px;
}

/* 공용 팝업 css */
      .bg_customalert {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
}

.area_custompopup {
  width: 560px;
  min-height: 200px;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 1px 1px 8px 3px rgba(0, 0, 0, .2);
  font-size: 16px;
  line-height: 150%;
  text-align: center;
}

.text_customalerttitle {
  margin-bottom: 30px;
  font-family: NanumBarunGothicBold, sans-serif;
  font-size: 20px;
}

.area_customalertbutton {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 33px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.button_customalert {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 180px;
  height: 50px;
  padding: 0px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #204177;
  font-family: NanumBarunGothicBold, sans-serif;
  font-size: 18px;
  color: white;
}

.button_customalert.cancel {
  margin-left: 30px;
  border: 0.5px solid #e8e8e8;
  background-color: #dfdfdf;
  color: #666;
}

/* 공용 팝업 css 끝 */

@media (max-width: 1500px)
{
	.container.section02{
	    margin-left: -90px;
	}
}

@media (min-width:992px) and (max-width: 1199px)
{
	.magazine-banner{
		background-color: #333;
	}
	.vertical-middle{
		text-align: center;
		padding-top: 0px;
		padding-bottom:50px;
		color: #fff;
	}

	.manual-box-title{
		width: 17%;
		height: 170px;
		margin-top:10px;
	}
	.manual-box{
                     width: 17%;
                     height: 170px;
                     margin-top: 10px;

                 }
	.marketing{
		height: 700px;
				background-size: cover;
	}
}

@media (min-width:768px) and (max-width: 991px)
{
	.magazine-banner{
		background-color: #333;
	}
	.vertical-middle{
		text-align: center;
		padding-top: 0px;
		padding-bottom:50px;
		color: #fff;
	}

	.manual-box-title{
		width: 30%;
		height: 170px;
		margin-top:10px;
	}
	.manual-box{
                     width: 30%;
                     height: 170px;
                     margin-top: 10px;

                 }
	.marketing{
		height: 600px;
		background-size: cover;

	}

	.description_text{
		text-align: center;
	}

	.title_text{
		text-align: center;
	}

	.footer .text-center{
		text-align: left;
	}
}

/* 작은 기기들 (태블릿, 768px 이하) */
@media screen and (max-width: 767px)
{
	.magazine-banner{
		background-color: #333;
	}
	.vertical-middle{
		text-align: center;
		padding-top: 0px;
		padding-bottom:50px;
		color: #fff;
	}

	.manual-box-title{
		width: 100%;
	}
	.manual-box{
        width: 43%;
        height: 125px;
        margin-top: 10px;

    }

	.marketing img{
		margin-top: 30px;
				background-size: cover;
	}

	.hero{
		text-align: center;
	}
	h1{
		font-size: 25px;
		text-align: center;
		margin-bottom: 30px;
	}
	.main-section01{
		height: 400px;
		background-position: bottom;
	}

	#section01-text{
		text-align: right;
	}

	.main-section02{
		height: 400px;
		background: none;
		margin: 100px 0px;
	}

	.about-pinpl{text-align: center;}
	.about-pinpl .btn{margin-bottom: 30px;

	}

.main-section02 h4 {font-size:20px; color:#161D4A;}

	.marketing{
			background-position: center bottom;
	background-repeat: no-repeat;
	background-size:200%;
	}

	.marketing h1{
		margin-bottom: 500px;
		text-align:center;
	}

	.information p{
		font-size: 20px;
		padding:25px 40px 40px 50px;
	}
	.bg-image{background-image:  none !important;}
	.user-manual{height:500px;
		background-size: cover 50%;
	background-position: bottom;}

	.lead {
    	font-size: 16px;
    	min-width: 300px;
	}

	#autoAnnual{
		font-size: 35px;
	}

	#pinplTitle{
		font-size: 35px;
	}

	.container.section02{
	    margin-left: 0px;
	    padding: 0px 40px;
	}

	.description_text{
		text-align: center;
	}

	.title_text{
		text-align: center;
	}

	.footer .col-md-6{
		text-align: center;
	}

	.footer .text-center{
		text-align: center;
	}

	/* 201109 추가 이인호 */
	.navbar-brand{
		padding: 15px 10px 15px 14px;
	}
	/* 201109 추가 이인호 */
	#magazine-img{
		width: 100%;
	}
	/* 201109 추가 이인호 */
	#footerLogo{
		max-height: 40px; margin: 0px; float: none;
	}

	/* 201110 추가 이인호 */
	#section01-text1{
		font-size: 23px;
	}
	/* 201110 추가 이인호 */
	#section01-text2{
		font-size: 60px;
	}
	/* 201110 추가 이인호 */
	.title_text{
		font-size: 30px;
	}
	/* 201110 추가 이인호 */
	.description_text{
		font-size: 14px;
		letter-spacing: 0;
		word-spacing : 0;
	}
}