@charset "utf-8";


/*피자닷이야기*/
.comTitle {color:#fff; font-size:2.55em; font-weight:bold; border-bottom:2px solid #fff; display:inline-block; line-height:1.12em; margin-bottom:5%}
.company {background:url("/images/sub/companyBG2.png")no-repeat center center;}
.company .com-bBox {background:rgba(0,0,0,0.7); padding:3%; text-align:center}
.company .com-wBox {border:3px solid rgba(255,255,255,0.7); background:rgba(255,255,255,0.15); box-sizing:border-box; padding:6% 12%}
.company ul li {color:#fff; font-size:1.25em; margin-bottom:3%; line-height:1.35em; letter-spacing:-0.025em}
.company ul li:last-child {margin-bottom:0; font-size:1.55em;}

.slogan .com-bBox {background:#3e3a39; padding:3%; text-align:center}
.slogan .com-wBox {border:3px solid rgba(255,255,255,0.7); background:rgba(255,255,255,0.1); box-sizing:border-box; padding:6% 12%}
.slogan ul {width:100%; display:table; text-align:left; }
.slogan ul li {width:50%; display:table-cell;  vertical-align:middle;}
.slogan ul li img {width:75%;}
.slogan p {color:#fff; line-height:1.25em;  }
.slogan p.slo-t1 {font-size:2.55em; letter-spacing:-0.05em;text-transform: uppercase; font-weight:300;}
.slogan p.slo-t1 span {display:inline-block; border-bottom:2px solid #fff; line-height:1.1em;}
.slogan p.slo-t2 {font-size:1.55em;letter-spacing:-0.05em;  margin:2.5% 0;  }
.slogan p.slo-t2 span {color:#ffce62}
.slogan p.slo-t3 {font-size:2.75em; letter-spacing:-0.05em; color:#ffce62; font-weight:600;}
.slogan p.line {border-bottom:1px dotted #fff; margin:3% 0}
.slogan p.slo-t4 {font-size:1.05em; line-height:1.85em;}



@media screen and (max-width:976px) {

.comTitle {font-size:2.05em; margin-bottom:5%; border-bottom:1px solid #fff;}
.company .com-wBox {border:1px solid rgba(255,255,255,0.7);padding:8% 4%}

.slogan .com-wBox {border:1px solid rgba(255,255,255,0.7); padding:8% 4%}
.slogan ul li:first-child {text-align:center}

.slogan p.slo-t1 {font-size:2.05em;}
.slogan p.slo-t2 {font-size:1.25em;}
.slogan p.slo-t3 {font-size:2.25em;}
.slogan p.slo-t4 {line-height:1.55em;}
}

@media screen and (max-width:676px) {
.slogan ul {text-align:center; }
.slogan ul li {width:100%; display:block;}
.slogan ul li img {width:60%; margin-left:4%}
.slogan ul li:first-child {margin-bottom:8%}
}


/*성공전략,개설절차*/

.sucess {overflow:hidden; width:100%; margin:0 auto; height:530px; display:table;}
.sucess > div {display:table-cell; vertical-align:middle; width:50%;}
.sucess > div.brandstory03 { background-image: url("/images/sub/brandstory03_img1_1.png"); background-size:100% auto;}
.sucess > div.br03-cont {height: 100%; padding: 3% 5% 3% 5%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; align-items: center; background:#3e3a39}

.imgBox {overflow:hidden; width:100%;}
.imgBox li {float:left; width:33.3323333%}
.imgBox li img {width:100%;}

.orderList { overflow: hidden;  background:#3e3a39; padding:2% 4%}
.orderList > li { position: relative; counter-increment: number; width: 100%; float: left; line-height: 1.8em; margin: 12px 0;color:#fff; font-size:1.30em; font-weight:500; border-bottom:1px dotted rgba(255,255,255,0.5); padding-bottom:32px;}
.orderList > li:before { content: counter(number, decimal); background:#ffce62; text-align:center; color:#3e3a39; font-weight:900; font-size: 20px;
						width:30px; height:30px; line-height:30px; float: left; margin-right: 15px; box-shadow:3px 3px 1px rgba(255,255,255,.8) ; }
.orderList > li p { float: right; width: calc(100% - 50px); line-height: 1.5em; }
.orderList > li p span {color:#ffce62; font-weight:600; font-size:1.15em}

.franchise3 {width:100%; margin:0 auto; text-align:center}
.franchise3 img {width:85%}

@media screen and (max-width:1399px) {

.sucess { height: 36vw; }

.sucess > div.br03-cont {height: 100%; padding: 3% 3% 3% 3%;}
.orderList > li {line-height: 1.8em; margin: 10px 0;color:#fff; font-size:1.00em; padding-bottom:30px;}
.orderList > li:before { width: 25px; height: 25px; line-height: 25px; margin-right: 10px; font-size: 16px; box-shadow:2px 2px 1px rgba(255,255,255,.8);}
.orderList > li p { float: right; width: calc(100% - 40px); }

}

@media screen and (max-width:976px) {

.sucess { height: auto; }
.sucess > div.brandstory03 {height:65vw}
.sucess > div {width:100%; display:block;}
.sucess > div.br03-cont {height: 100%; padding: 3% 5% 3% 5%;}

.orderList > li {line-height: 2em; margin: 10px 0;color:#fff; font-size:1.15em; padding-bottom:20px;}
.orderList > li:before { width: 20px; height: 20px; line-height: 20px; margin-right: 10px; font-size: 14px; box-shadow:2px 2px 1px rgba(255,255,255,.8);}
.orderList > li p { float: right; width: calc(100% - 30px); }

.franchise3 img {width:100%}

}


/*메뉴*/

#Menu { position: relative; width: 100%; clear:both; overflow: hidden; text-align: center; }
#Menu ul li {float: left; width: calc(33.3333% - 16.66px); margin-left: 25px; margin-bottom: 80px;}
#Menu ul li:nth-child(3n+1) { margin-left:0; clear:both;}
#Menu ul li img { width: 95%; max-width: 500px; margin-bottom: 10px; }
#Menu ul li dl { padding: 0 10%; }
#Menu ul li dl dt { color:#212121; font-size: 1.88em; font-weight:500; line-height: 1.0em;letter-spacing:-0.02em; padding-bottom:3%; border-bottom:1px dotted #ccc}
#Menu ul li dl dd.cost { font-size: 1.05em;letter-spacing: 0;font-weight:500; /*color:#aaa*/ }
#Menu ul li dl dd.cost span {display:inline-block; background:#ffce62; color:#fff;width:20px; border-radius:3px;  margin:3% 2.5px 4%;}
#Menu ul li dl dd { font-size:1.15em; color:#484848; font-weight:400; line-height:1.45em; padding:0 8%}


@media screen and (max-width:976px){

#Menu ul li { float: left; width: calc(50% - 10px); margin-left: 20px; margin-bottom:8% }
#Menu ul li:nth-child(3n+1) { margin-left:20px; clear: none; }
#Menu ul li:nth-child(odd) { margin-left:0; clear: both; }

#Menu ul li dl dt { color:#212121; font-size: 1.45em;}
#Menu ul li dl dd { padding:0 4%}
}


@media screen and (max-width:480px) {

#Menu ul li { width: 49%; margin-left: 2%; margin-bottom: 5%; }
#Menu ul li:nth-child(3n+1) { margin-left:2%; }
#Menu ul li:nth-child(odd) { margin-left:0; }

#Menu ul li dl dd br { display: none; }

}




/*프렌차이즈*/

.tb-style1 {width:100%; border-top:2px solid #3e3a39;/* border-bottom:2px solid #3e3a39*/margin:0 auto 1%;/* background:#f4f4f4;*/}
.tb-style1 th {background:#ffce62; color:#3e3a39; padding:1% 2%; font-size:1.15em;border-bottom:1px solid #fff;}
.tb-style1 td {border-bottom:1px solid #ddd; padding:2%;/* background:#f9f9f9*/text-align:center; font-size:1.10em; line-height:1.45em;}
.tb-style1 td.bo-right {border-right:1px solid #ddd}
.tb-style1 td:first-child {font-weight:500; color:#3e3a39}

.tb-style2 {width:100%; border-top:2px solid #3e3a39;/* border-bottom:2px solid #3e3a39*/margin:0 auto 1%;/* background:#f4f4f4;*/}
.tb-style2 th {background:#ffce62; color:#3e3a39; padding:1.5% 2%; font-size:1.25em;}
.tb-style2 td {border-bottom:1px solid #ddd; padding:2%;/* background:#f9f9f9*/text-align:center; font-size:1.10em; line-height:1.45em;}
.tb-style2 td.bo-right {border-right:1px solid #ddd}
.tb-style2 td:first-child {font-weight:500; color:#3e3a39}


/*맞춤창업*/

/********process********/
.process { overflow: hidden; text-align: center; }
.process li { float: left; counter-increment: number; position: relative;  color:#fff; width: calc(33.333% - 10px); margin-left: 15px; margin-bottom: 15px; }
.process li:before { content: counter(number, decimal-leading-zero); font-family: 'Oswald', sans-serif; font-size: 5.33em; font-weight: 600; color:rgba(255,255,255,0.1);
					 letter-spacing: -0.08em; position: absolute; right:0; bottom:0; line-height: 1.0em; }
.process li:nth-child(3n+1) { margin-left:0; }

.process li:nth-child(odd):before {color:rgba(62,58,57,0.1);}

.process li img { width: 100%; }
.process li dl { height: 160px; padding: 8% 10%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.process li dl dt { font-size: 1.35em; font-weight: 700; margin-bottom: 4%;  }
.process li dl dd { font-size: 1.05em; }
.process li:nth-child(odd) dl { /*background: linear-gradient(to bottom right, #ffce62, #ffdf9a, #ffecc3);*/ background: linear-gradient(to bottom right, #ffce62, #ffdf9a); color:#3e3a39}
.process li:nth-child(even) dl { background: linear-gradient(to bottom right, #3e3a39, #848484); }

@media screen and (max-width:976px) {
.process li { float: left; counter-increment: number; position: relative;  color:#fff; width: calc(33.333% - 4px); margin-left: 5px;}
}

@media screen and (max-width:580px) {
.process li {width: 100%; margin-left:0}
.process li dl { height: 32vw;}
.process li dl dd {line-height:1.35em }
}

/*
@media screen and (max-width:976px) {
.process li { width: 49%; margin-left: 2%; margin-bottom: 2%; }
.process li.pro3 { width: calc(33% - 10px);  margin-left: 0; margin-bottom: 0;}
.process li.pro3:nth-child(odd) { margin-left:10px; }
.process li.pro3:nth-child(even) { margin-left: 10px; }

.process li:nth-child(odd) { margin-left:0; }
.process li:nth-child(even) { margin-left: 2%; }

.process li dl { height: 17vw; padding: 4vw 3vw; }
}

@media screen and (max-width:767px) {
.process li dl { height: 20vw; }
}

@media screen and (max-width:676px) {
.process li dl dt { font-size: 1.05em;}
.process li dl dd { font-size: 0.80em; }
.process li.pro3 dl { height: 24vw}
}


@media screen and (max-width:580px) {
.process li dl { height: 22vw; padding: 3vw 3vw; }
.process li.pro3 dl { height: 25vw; padding: 3vw 3vw; }
}

@media screen and (max-width:480px) {
.process li dl { height: 25vw; }
.process li.pro3 dl { height: 30vw; }
.process li.pro3 dl dd {line-height:1.2em}

.process li dl dt { font-size: 0.90em;}
.process li dl dd { font-size: 0.70em; }
}
*/
.bgBox {background:url(/images/sub/infobox_G.gif); padding:1%; margin-top:3%}
.w-box {background:#fff; padding:3% 3%; text-align:center;}
.fr-tit {display:inline-block; font-size:1.75em; line-height:1.25em;  font-weight:600; color:#3e3a39; border-bottom:2px solid #3e3a39;  margin:0 auto 3%}

.condition li {display:inline-block; margin:0 1% 1%; font-size:1.35em; color:#3e3a39;}
.condition li span {display:inline-block; background:#ffce62;color:#3e3a39; width:25px; height:25px; line-height:25px; font-weight:600}

@media screen and (max-width:580px) {
.condition li {display:block; text-align:left;  letter-spacing:-0.05em; margin:0 1% 2%;}
.condition li span {display:inline-block;text-align:center; width:20px; height:20px; line-height:20px;}
}



/***** 찾아오시는 길 2019.05.31 수정
.sMap { position: relative; width: 100%; height: 650px; overflow: hidden; } 
.locaBox { position: absolute; right: 5%; bottom: 5%; background:#3e3a39; padding: 4% 3%; color:#fff;  }
.locaBox .add { font-size: 1.41em; line-height: 1.10em; margin: 30px 0 20px; overflow: hidden;  }
.locaBox .tel { font-size: 2.35em; font-weight:600 }
@media screen and (max-width:976px) {
.sMap { height: 500px; }
}
@media screen and (max-width:767px) {
.sMap { height: 100vw; }
}

@media screen and (max-width:640px) {
.sMap { height: 100vw; }
.locaBox { max-width: 45%; }
.locaBox img { width: 80px; }
.locaBox .add { font-size: 1.15em; margin: 5% 0 4%; }
.locaBox .tel { font-size: 2.0em;}
.locaBox .add br { display: none; }

}

@media screen and (max-width:480px) {

.locaBox img { width: 60px; }
.locaBox .add { font-size: 1.0em; margin: 5% 0 2%;}
.locaBox .tel { font-size: 1.55em;}

}
*******/

/*찾아오시는길*/
.sMap { position: relative; width: 100%; height: 550px; overflow: hidden; }
.addWrap { border-top:3px solid #ffce62;  border-bottom:3px solid #ffce62}
.addWrap .address {font-size:2.0em; text-align:center;  letter-spacing:-0.05em;  margin:2% 0}
.addWrap .address br {display:none}
.addWrap .address .number {font-size:1.25em; margin-left:2%; color:#3e3a39;}
.addWrap .address .number span { color:#ffce62}

@media screen and (max-width:976px) {
.sMap { height: 400px; }
.addWrap .address {font-size:1.75em}
}
@media screen and (max-width:767px) {
.sMap { height: 80vw; }
.addWrap .address {line-height:1.55em}
.addWrap .address br {display:block;}

.addWrap .address {font-size:1.75em}
}

@media screen and (max-width:640px) {
.sMap { height: 80vw; }
.addWrap .address {font-size:1.55em}

}

@media screen and (max-width:480px) {
.addWrap .address {font-size:1.25em}
}

/*메뉴*/
.menuIn {width:1200px; margin:0 auto}

@media screen and (max-width:1199px) {
.menuIn {width:100%; margin:0 auto}
}