@charset "utf-8";

/*********************** 청년13통장사업 ***************************/
.about-con1, .about-con2, .about-con3{margin-bottom:40px; overflow:hidden;}
.talk-box{background:url(../../images/thema/sub/intro-bg.jpg)repeat-y; width:100%; max-width:1200px; padding:20px 15px; box-sizing:border-box; overflow:hidden;}
.talk1{background:#faf5ad; display:inline-block; padding:5px 20px; box-sizing:border-box; border-radius:5px; position:relative; margin:0 40% 10px 20px;}
.talk2{background:#fff; display:inline-block; padding:5px 20px; box-sizing:border-box; border-radius:5px; position:relative; margin:0 20px 10px 40%; float:right;}
.talk3{margin-bottom:0;}
.talk-box p{color:#333;}
.talk1:before{content:''; width:0; height:0; border-top:10px solid #faf5ad; border-left:20px solid transparent; position:absolute; left:-15px; top:10px;}
.talk2:before{content:''; width:0; height:0; border-top:10px solid #fff; border-right:20px solid transparent; position:absolute; right:-15px; top:10px;}
.about-con1 h4{font-size:18px; font-weight:400; color:#555; padding:10px; box-sizing:border-box; text-align:center; line-height:30px;}

.about-con2{background:#f8f8f8; padding:40px 0; box-sizing:border-box; overflow:hidden;}
.passbook-stage{width:100%; padding:30px 0; overflow:hidden; text-align:center;}
.p-stage-box{width:288px; height:280px; padding:70px 40px; box-sizing:border-box; text-align:center; display:inline-table;}
.p-stage-box h1{font-size:32px; font-family: 'S-CoreDream-1Thin'; font-weight:300; color:#404040;}
.p-stage-box h3{font-size:22px; color:#404040; margin:5px 0; font-weight:500;}
.p-stage1{background:url(../../images/thema/sub/passbook01.png)no-repeat;}
.p-stage2{background:url(../../images/thema/sub/passbook02.png)no-repeat; margin-left:-16.09px;}
.p-stage3{background:url(../../images/thema/sub/passbook03.png)no-repeat; margin-left:-10.09px;}

.p-stage-detail{margin:20px auto 40px; overflow:hidden; width:96%; max-width:1000px;}
.p-detail-box{width:33.33%; border:1px dotted #ccc; box-sizing:border-box; margin-left:-1px; background:#fff; overflow:hidden; min-height:205px; float:left;}
.p-detail1{border-radius:10px 0 0 10px;}
.p-detail3{border-radius:0 10px 10px 0;}
.p-detail1 .p-detail-title{background:rgba(163,241,227,0.5);}
.p-detail2 .p-detail-title{background:rgba(189,232,249,0.5);}
.p-detail3 .p-detail-title{background:rgba(209,176,243,0.5);}
.p-detail-title h4{font-size:16px; font-weight:400; color:#333; text-align:right; padding:10px 15px; box-sizing:border-box;}
.p-detail-box ul{padding:5px 20px;}
.p-detail-box ul li{line-height:30px; font-size:18px; color:#555; font-weight:400; padding-left:16px; position:relative; margin:10px 0;}
.p-detail-box ul li:before{content:''; width:5px; height:5px; background:#57799d; position:absolute; left:0; border-radius:5px; top:13px;}
.p-detail-box ul li p{font-size:16px; color:#888; line-height:26px;}

.etc-program ul{text-align:center;}
.etc-program ul li{display:inline-table; width:32%; margin:0 0.2%; padding:15px; box-sizing:border-box; border-radius:10px;}
.etc-program ul li:first-child{background:#6da59c;}
.etc-program ul li:nth-child(2){background:#6e89a0;}
.etc-program ul li:last-child{background:#95759e;}
.etc-program ul li img{display:block; max-width:100%; margin:0 auto 10px;}
.etc-program ul li h4{font-size:18px; color:#fff; letter-spacing:0.2em; font-weight:500;}

.exception-list{border:1px solid #ccc; box-sizing:border-box; border-radius:5px; padding:15px 20px; overflow:hidden;}
.exception-list ul li{font-size:16px; color:#555; line-height:26px; position:relative; padding:5px 0 5px 16px;}
.exception-list ul li:before{content:''; width:5px; height:5px; background:#57799d; position:absolute; left:0; border-radius:5px; top:16px;}
.list-caution{/* color:#ff0000; */ font-size:16px; line-height:30px; font-weight:500; color:#555;}
.exception-list ul li p{padding:5px 0;}

.aaa{border:1px solid #ccc; box-sizing:border-box; border-radius:5px; padding:15px 20px; overflow:hidden;}
.notice-list ul li{font-size:16px; color:#555; line-height:26px; position:relative; padding:5px 0 5px 16px;}
.notice-list ul li:before{content:''; width:5px; height:5px; background:#57799d; position:absolute; left:0; border-radius:5px; top:16px;}
.list-caution{/* color:#ff0000; */ font-size:16px; line-height:30px; font-weight:500; color:#555;}
.notice-list ul li p{padding:5px 0;}

/*********************** 오시는길 ***************************/
.map{width:100%; min-height:360px; box-sizing:border-box;}
.root_daum_roughmap{width:100% !important; border:0 !important; padding:0 !important; border-radius:0 !important;}
.addr-title{text-align:center;}
.addr-title2{text-align:left; padding:20px 0;}
.addr-title h2{color:#576079; font-size:22px; font-weight:500; padding:35px 0;}
.addr-title2 h2{padding:0 !important;}
.addr-title2 p{font-size:18px; color:#576079; font-weight:300;}
.addr-list{padding:20px; box-sizing:border-box; overflow:hidden;}
.addr-list h3{font-size:22px; font-weight:300; color:#576079; margin-bottom:5px;}
.addr-list h3 span{font-size:18px; margin-right:5px; opacity:0.8;}
.addr-list ul li{display:inline-table; margin-right:20px;}
.addr-list ul li:last-child{margin-right:0;}


@media all and (max-width:1199px){

}

@media all and (max-width:767px){	
	.addr-title h2{padding:20px; font-size:22px;}
	.addr-list{padding:0 10px;}
	.addr-list h3{font-size:18px;}
	
	.about-con1 h4{font-size:16px; line-height:26px;}
	.about-con2 p{font-size:14px;}
	.exception-list ul li{font-size:14px;}
	.exception-list ul li::before{top:17px;}
	
	.passbook-stage{padding:60px 0 20px;}
	.p-stage-box{transform:rotate(90deg); display:block; margin:0 auto; display:table; padding:40px;}
	.p-s-txt{transform:rotate(-90deg); display:table-cell; padding-top:40px;}
	.p-stage2{margin-top:-5px;}
	.p-stage3{margin-top:1px;}
	
	.p-detail-box{width:100%; margin-top:-1px; margin-left:0; min-height:auto;}
	.p-detail1{border-radius:10px 10px 0 0;}
	.p-detail3{border-radius:0 0 10px 10px;}
	.p-detail-box ul li{font-size:16px; line-height:26px;}
	.etc-program ul li{width:100%; margin:5px 0;}
	.etc-program ul li h4{font-size:16px;}
	.list-caution{font-size:16px;}
}

@media all and (max-width:525px){
	.stage-box{min-height:420px;}
}

@media all and (max-width:360px){

}