@charset "utf-8";

html { width: 100%; height: 100%; margin: 0; padding: 0; }
body { color: #222; background-color: #ffffff; height: 100%; padding: 0; margin: 0; }
body,div,span,button,a,td,th,select,textarea,input { font-family: 'Malgun Gothic','맑은 고딕', sans-serif; font-size: 14px; line-height: 1.5; } /* font-family: HelveticaNeue-Light,AppleSDGothicNeo-Light,'Malgun Gothic','맑은 고딕',sans-serif;  */
h1,h2,h3,h4 { margin: 0; padding: 0; }
h1,h2,h3,h4,.ttl { font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.num { font-family: Century Gothic; }

a { text-decoration: none; color: #2a2829; box-sizing: border-box; }
a:hover { text-decoration: underline; }

button { box-sizing: border-box; margin: 0; padding: 3px 5px; border: 0; background:#f7f1f8; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
dl, dt, dd { margin: 0; padding: 0; }
img { border: 0; }

/* 공통 */
.wrapper { min-height: 100%; }
.topFrame { background: url(/images/intro/bg-intro-01.jpg) 50% 50% no-repeat; background-size: cover;  }
.snc .topFrame { background: url(/images/intro/bg-intro-02.jpg) 50% 50% no-repeat; background-size: cover;  }
.mdirect .topFrame { background: url(/images/intro/bg-intro-03.jpg) 50% 50% no-repeat; background-size: cover;  }
.subFrame { background: #222; }

.header .logo { background: rgba(0,0,0,0.2); padding: 10px 0;}
.snc .header .logo { background: rgba(255,255,255,0.2); padding: 10px 0;}
.mdirect .header .logo { background: rgba(255,255,255,0.2); padding: 10px 0;}
.header .logo a { display: bolck; margin: 0 auto; max-width: 600px;}
.header .logo h1 {   font-size:0px; line-height:0; text-indent:-9999px; height: 50px; margin: 0 15px; }
.header .logo h1 { background: url(/images/intro/logo-carpan-01.png) 50% 50% no-repeat; background-size: contain; }
.snc .header .logo h1 { background: url(/images/intro/logo-snc-01.png) 50% 50% no-repeat; background-size: contain; }
.mdirect .header .logo h1 { background: url(/images/intro/logo-mdirect-01.png) 50% 50% no-repeat; background-size: contain; }

.footer { margin: 0 auto; max-width: 1000px; color: #999; padding: 10px 0; }
.footer a { color: #999; font-weight: bold; }
.footer .copyright { float: left; padding: 5px 15px; }
.footer .counsel { float: right; padding: 5px 15px; }
.footer .frame:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}


/* 소개 */
.introBox { margin: 0 auto; padding: 30px 0; max-width: 600px; text-align: center; color: #fff; }
.introBox .title { margin: 0 15px; }
.introBox .title span { font-size: 24px; position: relative; margin: 0 5px; display: inline-block; line-height: 180%; }
.introBox .title span:before { content:"•"; font-size: 20px; position: absolute; top: -18px; left: 5px; color: #ff7a00;  }
.introBox .intro { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding-top: 30px; margin: 0 15px; font-size: 16px;  word-break: keep-all; font-size: 20px; }
.introBox .intro .box { display: flex; flex-direction: column;}
.introBox .intro .box span { font-size:20px; display: flex;  width: 100%; flex-direction: row; flex-wrap: nowrap; justify-content: center;}
.introBox .intro .box b { font-size: 20px; color: #ff7a00; }
.introBox .intro a { margin-top: 20px; background-color: #ff7a00; color: #fff; padding: 5px 10px; text-align: center; border-radius: 20px; }
/* 로그인 */
.loginBox { padding: 20px; background: rgba(255,255,255,0.2)}

.loginBox .sns { padding-top: 20px;}
.loginBox .sns div { text-align: center; padding-bottom: 20px; font-size: 16px; color: #fff; }
.loginBox .sns div.guide { text-align: center; padding-top: 20px; font-size: 14px; color: #ff7a00; }
.loginBox .sns ul { text-align: center; border: 2px dashed #ccc; border-radius: 20px; margin: 0 auto; padding: 15px 0; max-width: 400px; background: rgba(0,0,0,0.2) }
.loginBox .sns li { display: inline-block; width: 50px; margin: 5px; }
.loginBox .sns li button { display: block; width: 50px; height: 50px; text-align: center; border-radius: 25px; border: 0; font-size:0px; line-height:0; text-indent:-9999px; }
.loginBox .sns li button.naver { color: #fff; border-color: #2ea300; background: url(/images/sns-16.png) -3px -1px no-repeat; background-size: 350px 350px; }
.loginBox .sns li button.kakao { color: #3C1E1E; border-color: #e7d004; background: url(/images/sns-16.png) -58px -1px no-repeat; background-size: 350px 350px; }
.loginBox .sns li button.facebook { color: #fff; border-color: #30589a; background: url(/images/sns-16.png) -118px -1px no-repeat; background-size: 350px 350px; }
.loginBox .sns li button.google { border-color: #c5c5c5; background: url(/images/sns-16.png) -171px -1px no-repeat; background-size: 350px 350px; }
.loginBox .sns li button.phone { border-color: #c5c5c5; background: url(/images/sns-16.png) -117px -299px no-repeat; background-size: 350px 350px; }
.loginBox .sns li button.apple { border-color: #c5c5c5; background: #fff url(/images/apple.svg) 50% 50% no-repeat; background-size: 30px 37px; }
.loginBox .sns ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.loginBox .sns li button:hover {box-shadow: 1px 1px 5px 3px #666; }

.loginBox .notice { text-align: center; border: 2px dashed #ff7a00; border-radius: 20px; margin: 0 auto; padding: 15px 0; max-width: 400px; background: rgba(0,0,0,0.2); color: #fff; margin-top: 30px;  }

.buttonBox { text-align: center; margin: 20px 0;}
.buttonBox a, .buttonBox button { display: inline-block; padding: 5px 15px; border: 1px solid #ff7a00; border-radius: 30px; font-size: 16px; font-weight: bold; color: #ff7a00; }
.buttonBox a:hover, .buttonBox button:hover { text-decoration: none; background: rgba(0,0,0,0.5) }
.buttonBox a.off, .buttonBox button.off {display: none;}



/* 안내 */
.descBox { padding: 15px; margin: 0 auto; max-width: 600px; }
.descBox .list > li { margin-top: 15px; position: relative; background-color: #F3F4F6;}
.descBox .list > li:nth-child(1) { border-radius: 20px 20px 0px 0px; }
.descBox .list > li:nth-child(2) { border-radius: 0px 0px 0px 0px; }
.descBox .list > li:nth-child(3) { border-radius: 0px 0px 20px 20px; }
.descBox .list > li:first-child { margin-top: 0; }
.descBox .list > li:nth-child(1) .img { border-radius: 20px 20px 0px 0px;  }
.descBox .list > li:nth-child(1) .title { border-radius: 17px 17px 0px 0px; }
.descBox .list .img { height: 150px;  }
.descBox .list .introA { background: url(/images/intro/intro-A-02.jpg) 50% 50% no-repeat; background-size: cover; }
.descBox .list .introB { background: url(/images/intro/intro-B-02.jpg) 50% 50% no-repeat; background-size: cover; }
.descBox .list .introC { background: url(/images/intro/intro-C-02.jpg) 50% 50% no-repeat; background-size: cover; }
.descBox .list .title { text-align: center; font-size: 17px; padding: 15px 15px; background-color: #213B48; color: #fff; }
.descBox .list .subtitle { background-color: #fff; font-weight: bold; text-align: center; font-size: 16px; padding: 5px; color: #ff7a00; border: 1px solid #ff7a00; }
.descBox .list .desc { margin: 15px 15px; padding-bottom: 15px;}
.descBox .list .sub { margin: 15px 15px; padding-bottom: 15px;}

@media screen and (min-width:900px){
	.wrapper { background: url(/images/intro/bg-intro-01.jpg) 50% 50% no-repeat; background-size: cover;  }
	.snc .wrapper{ background: url(/images/intro/bg-intro-02.jpg) 50% 50% no-repeat; background-size: cover;  }
	.mdirect .wrapper{ background: url(/images/intro/bg-intro-03.jpg) 50% 50% no-repeat; background-size: cover;  }
	
    .topFrame { background: transparent; }
    .snc .topFrame { background: transparent; }
    .mdirect .topFrame { background: transparent; }
	.subFrame { background: transparent; }
	
	.topBox .frame { margin: 0 auto; padding: 100px 15px; max-width: 980px; }
	.topBox .frame .introBox { float: left; width: 60%; }
	.topBox .frame .loginBox { float: right; width: 38%; }
	.topBox .frame:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
	
	.loginBox { padding: 0; background: transparent; }
	
	.descBox { margin: 0 auto; max-width: 980px; padding-bottom: 30px;  }
	.snc .descBox .list > li {  background: rgba(0,0,0,0.7)}
	.mdirect .descBox .list > li {  background: rgba(0,0,0,0.7)}
	.descBox .list > li { float: left; width: 31.3%; margin: 0 1%;  }
	.descBox .list:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
	.introBox .intro .box { flex-direction: column; align-items: flex-start; }
	.introBox .intro .box span {  font-size: 24px;}
	.introBox .intro .box b {  font-size: 24px; }
	.introBox .intro a { padding: 5px 15px; font-size: 18px; }
	.descBox .frame .list { display: flex; }
	.descBox .list > li:nth-child(1) { border-radius: 20px 0px 0px 20px; }
	.descBox .list > li:nth-child(1) .title { border-radius: 17px 0px 0px 0px; }
	.descBox .list > li:nth-child(2) { border-radius: 0px 0px 0px 0px; }
	.descBox .list > li:nth-child(3) { border-radius: 0px 20px 20px 0px; }
	.descBox .list > li:nth-child(3) .title { border-radius: 0px 17px 0px 0px; }
}