@charset "utf-8";
/* wv.v.1.0 2019-07 */



/*header*/
		header {position: fixed; top:0; border-bottom: 1px solid #E9E9E9; height :60px; width: 100%;z-index: 1100;}
		.topLayoutTop { text-align:center; line-height: 60px; height :60px; overflow:hidden; background-color: #fff;}
		   .logo {display: inline-block; margin: 0; color: #000; font-size: 18px; line-height: 60px;    float: left; margin-left: 15px;}
		   .logo img { display: inline-block;    width: 120px; margin: 0; vertical-align: middle;}
			  .searchArea {position: absolute;  top:0; width:64px; overflow:hidden; height:60px; transition:all 0.3s ease;}
				 .searchAreaIn {position:relative;}
					.searchInputBox {margin:0px 70px 0px 16px; overflow:hidden;}
					.searchInputBox input {width:100%;font-size: 13px;  border: none; border-bottom: 1px solid #ddd;} 
					.searchBtn {position: absolute; top:15px; right:20px; display:block; width:30px; text-align:center;  line-height: 30px;}
					.closeBtn {position: absolute; top:15px; right:-60px; display:block; width:30px; text-align:center;  line-height: 30px;}
			  .mbMenu {position: absolute;top: 5px; right: 5px; transition:all 0.3s ease;}
			  .mbMenu a {display:block; width:50px; line-height: 50px;}
		   .topLayoutTop.on .searchArea {width:100%;}
		   .topLayoutTop.on .searchArea .searchBtn {right:35px;}
		   .topLayoutTop.on .searchArea .closeBtn {top: 15px; right:10px;}
		   .topLayoutTop.on .mbMenu  {right:-50px;}

 
/*모바일 메뉴*/
.mbMenuContBox {position: fixed;top: 0;right: -100%;width: 100%;     height: 100%;    overflow-y: scroll;line-height: 1.4; background-color: #fff;    transition: 0.3s all ease-in;}
	 
	.mbMenuCont {}
	.mbMenuCont .menuTop { height: 45px;line-height: 45px;   padding: 0 16px; text-align: left;  background-color: #D0021B; color: #fff;}
	.mbMenuCont .menuTop h2 {margin: 0;font-size: 16px; font-weight: 500; }

	.mbcloseBtn {    position: absolute;top: 0px;right: 0px;display: block;width: 45px; height: 45px; text-align: center;line-height: 50px;    color: #fff;font-size: 20px;}
		.logoBoxCont { position: relative; height: 60px; line-height: 60px;  overflow: hidden;padding: 0 16px; }
		/* .logoBox:after { position: absolute;content: "";left: 0;bottom: 0px;width: 100%;height: 1px;background-color: #D1D1D1;} */
		.logoBoxCont img {    float: left;margin-top: 20px;}
		.logoBoxCont .logText {    float: right;}

		.loginBox {position: relative; }
		/* .loginBox:after { position: absolute;content: "";left: 0;bottom: 0px;width: 100%;height: 1px;background-color: #D1D1D1;} */
		.loginBox ul {overflow: hidden;}
		.loginBox ul li {float: left; width: 33.3%;     line-height: 30px;
			box-sizing: border-box;}
		.loginBox ul li a {display: block; padding: 10px 0; font-size: 16px;    border-left: 2px dotted #ddd;}
		.loginBox ul li:first-child a { border-left: none;}

		/*로그인 전*/
		.logOut {display: none;}

		/*로그인 후*/
		/* .logIn {display: none;} */
		
.mbMenuCate {   }
		.mbMenuCate .menuCate {  }
		.mbMenuCate .menuCate>li {    /*height: 50px;*/line-height: 50px;text-align: left;border-top: 1px solid #D7D7D7;}
		.mbMenuCate .menuCate>li:first-child {border-top: none;}
		.mbMenuCate .menuCate>li>a {display:block;  color: #000; font-weight: 600; font-size: 16px;}
		.mbMenuCate .menuCate>li>a span {padding-left: 16px;}
		.mbMenuCate .menuCate>li .icon {  display: inline-block;  float: right;padding-top: 17px;
			padding-right: 16px;font-weight: 600;color: #000;font-size: 13px;}
.subMenuWrap {overflow-x: scroll;}

			.mbMenuCate .menuCate>li .icon.up {display: none;}
			.mbMenuCate .menuCate>li.on .icon.up {display: inline-block;}
			.mbMenuCate .menuCate>li.on .icon.down {display: none;}

			.menuCate .subMenu {  overflow: hidden;background-color: rgb(240, 240, 240);}

			.menuCate .subMenu>li {float: none;    padding: 0 16px;    overflow: hidden;     overflow-x: scroll;  border-top: 1px dotted #ddd;}
			.menuCate .subMenu>li .subDepthWrap {    width: 1500px;}
			.menuCate .subMenu>li strong {float: left;    margin-right: 10px;}
			.menuCate .subMenu>li:first-child {border-top: none;}
			.menuCate .subMenu>li>a { display: block;  font-size: 14px; }

 				.subDepth {float: left;}
 				.subDepth li {float:left; margin: 0 17px;}
 				.subDepth li a { display: block;    font-size: 13px;}



 

/*******index*********/	

		   
/*contect*/
p { margin: 0; line-height: 26px;font-size:16px;}

.topNavIn {position: relative;margin: 0 auto}
.topNavR {    position: absolute;left: 12px;    top: 0px; height:50px;}
.topNavR > ul > li {    display: table; float: left;position: relative; padding: 0 5px; }
.topNavR > ul > li:first-child a { padding: 0 10px;    padding-left: 0;  padding-right: 0;}
.topNavR > ul > li a {display: block;padding: 0px 10px;color: #fff;}
.topNavR > ul > li:first-child a span {font-size: 19px;line-height: 50px;}
.topNavR > ul > li dl {    vertical-align: middle;height: 50px;}
.topNavR > ul > li dt {
    cursor: pointer;
    color: #fff;
    position: relative;
    padding: 0 16px;
    opacity: 0.6;
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    font-size: 12px;
}
.topNavR > ul > li dt:before {
    position: absolute;
    left: 4px;
    top: 16px;
    content: '/';
    display: block;
    color: #fff;
    opacity: 0.3;
    transform: rotate(8deg);
}
.topNavR > ul > li dt>span {position: absolute;top: 21px;    right: 0;font-size: 10px;margin-left: 5px;}
.topNavR > ul > li dd { display: none;z-index: 1; position: absolute; left: -2px; top: 50px;}
.topNavR > ul > li dd a {    width: 122px; text-align: center; padding: 8px 12px; background-color: rgba(211,31,33,0.95); position: relative;font-size:13px;}
.topNavR > ul > li dd a:hover {}
.topNavR > ul > li dd a .underline {  display: none; transition: all .3s;background-color: rgba(255,255,255, 0.8); width: 0; height: 1px;margin-top: 2px;}
.topNavR > ul > li dd a:hover .underline{width:100%;}

.contWrap { position: relative;width: 1080px;margin: 0 auto;overflow: hidden;}

.pageTitle { margin-top:0;  margin-bottom: 0; padding-bottom: 20px;  font-size:22px; font-weight: 600;color:#000;}
.subTitle {font-size:22px;color:#666666;}
p.contTitleB {margin-top: 10px;font-size:30px; color:#000;font-weight:600;}
p.contTitle {   margin-bottom: 20px;font-size:21px; color:#000;}
p.contSubTitle {  font-size:22px; color:#000;}
.contentBoxIn .fontB {  margin-bottom: 30px; line-height: 1.4;font-size: 24px;color: #666666;}
.fontB strong {  color: #000;}
.subText { margin: 20px 0 30px;font-size:15px; color:#000; text-align:center;}
.subTextS {font-size:14px; color:#666;}
.subText strong {color:#D31F21; }
.subListT {font-size:18px; color:#000; font-weight:600;}
.titleTag {font-size:20px; font-weight:600;color:#000;}
.subText strong {color:#D31F21;}

.contInWrap {padding: 30px 0px; overflow: hidden;}
.borderT {border-top: 1px solid #E1E1E1;}
.borderB {border-bottom: 1px solid #E1E1E1;}
.borderDotT {    border-top: 1px dotted #E1E1E1;}
.borderDotB {    border-bottom: 1px dotted #E1E1E1;}

.subDescript { margin-top: 20px;}

.textCont strong {color:#D31F21;}
.textCont strong.bold  { font-size:20px; font-weight:600; color:#000;}
.floatImgBox.imgCont {overflow: hidden;}
.floatImgBox.imgCont .floatL {float:left;}
.floatImgBox.imgCont .floatR {float:right;}
.downWrap {      position: relative;  margin-top: 20px; background-color: #888888; padding: 5px; width: 207px;}
.downWrap a {    display: block;    color: #fff; font-size: 12px;}
.downWrap .icon {    position: absolute; top: 8px; left: 11px;    font-size: 36px;}
.downWrap p {    margin-left: 50px;  line-height: 20px; font-size: 13px;}


/******index*****/

.visualBox {    position: relative; background-color: #F9F9F9;}

.mainBnr {   position: relative;   width: 100% ;  height: 100%; overflow: hidden;;margin: 0 auto;}
.mainBnr img { width: 100%;}
.mainBnr:before {display:none; content:''; width: 1200px;height: 100%; position: absolute;left: 0; right: 0; margin-left: auto;margin-right: auto;}
.wvNumBoxIn {display:none;}
.wvNumBox {    position: absolute;  bottom: 30px; right: 0px;  left: 0; margin-left: auto; margin-right: auto;   width: 320px; z-index: 100; }
.wvNumBox a {position: relative; float: left; text-align: right; color:#666;     font-size: 10px; padding: 0 10px; transition: 0.3s all ease;}
.wvNumBox a:after {content:''; position:absolute; width:5px; height:5px; border-radius: 15px; top: 5px;background-color:#666;}
.wvNumBox a.on { font-weight:600;color:#000; }
.wvNumBox a span {    padding-right: 10px;}
.bnrSideWrap {    position: absolute;  width: 300px; height: 100%;  background-color: #D31F21; z-index: 10;  right: 0; top: 0;    left: 50%; margin-left: 300px;}
.bnrSide:after { position: absolute; right: 100px; content:''; width:2px; height:200px; background-color:rgba(225,225,225,0.3);}


/*****About PAGODA*****/


/*Message from the CEO*/
.ceoPage { }
.ceoPage .textCont { float: none; width: 100%;}
.ceoPage .imgCont {margin-top: 50px;}

.ceoName { position: relative; overflow: hidden; margin-top: 35px;}
.ceoName .ceoIn {  margin-right: 25px;    color: #000;font-weight: 500;}
.ceoName .ceoIn span {display: block;}
.ceoName .ceo { margin-top: 20px;color: #000; font-size: 32px;font-weight: 600;}
.ceoName .ceo span {margin-right: 27px;}
.ceoPage .imgCont img {width:100%;}



/*Our Mission and Principles*/

.principlesPage .borderT {padding-top:30px;}
.principlesPage .imgTextBox { padding-top:0px;  overflow: hidden;}
.principlesPage .imgTextBox .imgCont {    float:none;margin-top: 0px; margin-bottom: 50px;text-align: center;}
.principlesPage .imgTextBox .imgCont img { width:257px;   box-shadow: 17px 19px 0px -2px rgba(0,0,0,0.1);}
.principlesPage .imgCont img {width:100%;}
.principlesPage .textList {      float: none;  margin-top: 0px;}
.principlesPage .textList>li {    margin-bottom: 30px;}
.principlesPage .textList>li p {     position: relative;    padding-left: 8px; color: #000;font-weight: 600;margin-bottom: 10px;}
.principlesPage .textList>li p:before {position:absolute; content:""; top:9px; left:0; width:3px; height: 3px;     border-radius: 50px;background-color:#000;}
.principlesPage .textList>li span {    font-size: 15px;}

.principlesPage .textInList>li { position: relative;  margin-bottom: 5px;     padding-left: 10px;font-size: 15px;}
.principlesPage .textInList>li:before {position:absolute; content:""; top:9px; left:0; width:5px; height: 1px;     border-radius: 50px;background-color:#666666;}
.principlesPage .contBox.firstCont { padding-bottom: 20px;}
.principlesPage .borderDotT { padding-top:30px;}


/*History & Awards*/

.historyPage.contInWrap {position: relative;} 
.historyPage .tabSwipe .tabLayout {width:335px;}
.historyCont {}
.historyCont .historyIn {display:none;}
.historyCont .historyIn:first-child {display:block;}

.historyIn>li {    position: relative;overflow: hidden;padding: 0;  background-color: #F6F6F6;}
.historyIn>li .year {  margin-top:30px;   margin-left: 20px; margin-bottom: 15px; font-weight: 600; color: #666; z-index: 100; font-size: 15px;}
.historyIn>li .year:first-child {margin-top:0;}
.historyCont .historyWrap {    margin-bottom: 0px; border: 0px; margin-left: 15px;  border-left: 1px solid #ddd; padding: 30px 0;padding-bottom: 0;}
.historyCont .history {    margin: 0 10px; border-bottom: 1px dotted #E1E1E1;}
.history .month {    position: absolute;top: 0px;left: 16px; font-weight: 600;color: #000;}
.historyPage .contBox {position: relative;}

.historyPage .subText {font-size:30px;}
.historyCont .history li { clear: both;    margin: 30px 0;   overflow: hidden;}
.historyCont .history li:first-child {margin-top:0;}
.historyCont .history li p {  float:left; width: 53px;text-align: left; padding-left: 10px;margin: 0 0 10px; margin-top: -3px;   font-size: 18px;color: #000;font-weight: 600;}
.historyCont .history li span { display: block;  margin-left: 72px;     margin-bottom: 7px; font-size: 16px;}
.historyCont .history li p.yearT { font-size: 15px; color: #666;}


.awardsPage .tabSwipe .tabLayout {width: 250px;}


/*  .yearList {    position: fixed;left: 50%;margin-left: -500px;}*/

.yearList ul {}
.yearList ul li {    margin-bottom: 15px;    text-align: center;}
.yearList ul li a {    display: block;    font-size: 16px;}
.yearList ul li.on a {color:#D31F21;}



/*****Business Area*******/

/*Institution Operations*/
.institutionPage .textCont {    float: none;width: 100%;}
.textList {    margin-top: 30px;}
.textList li {    margin-bottom: 30px;}
.textList li p {     position: relative;    padding-left: 8px; color: #000;font-weight: 600;margin-bottom: 10px;}
.textList li p:before {position:absolute; content:""; top:9px; left:0; width:3px; height: 3px;     border-radius: 50px;background-color:#000;}
.textList li span {    font-size: 15px;}
.institutionPage .contSubTitle { margin-top: 30px;padding-top: 30px;}


/******franchising******/

/*franchising*/
.grayContBox { padding: 20px;background-color:#F6F6F6;}
.franchisingPage .grayContBox {margin-top:15px;}
.franchisingPage .grayContBox li {    position: relative;margin: 5px 0;padding-left: 10px; color: #000;font-weight: 600;}
.franchisingPage .grayContBox li:before {    position: absolute;content: "";top: 9px;left: 0;width: 3px; height: 3px;border-radius: 50px;background-color: #000;}
.franchisingPage .borderDotT {margin-top: 30px;padding-top: 30px;}
.franchisingPage .borderDotT img {width:100%;}
.franchisingPage .imgCont img {width:100%;}


/*pagodaonePage*/
.pagodaonePage .borderDotT {margin-top: 30px;padding-top: 30px;}


/******contact******/

/*contactUs*/

.contactPage .contactT {    position: relative;padding-left: 8px; color: #000;font-weight: 600; margin-bottom: 10px;}
.contactPage .contBox {margin-top:30px;}
.contactPage .contBox:first-child {margin-top:0;}
.contactPage .floatL {float:left;}
.contactPage .floatL {float:right;}
.contactList {    margin-top: 0px;    overflow: hidden;}
.contactList>li {    float: none;    padding-left: 10px; color: #000;}
.contactList>li p {  position: relative;    padding-left: 8px; color: #000;font-weight: 600;margin-bottom: 10px;}
.contactList>li p:before {position:absolute; content:""; top:9px; left:0; width:3px; height: 3px;     border-radius: 50px;background-color:#000;}
.contactList>li span {  float: left;  font-size: 15px;    color: #888;}
.contactListIn>li {position: relative;    padding-left: 15px; text-align: right;    border-bottom: 1px solid #ddd;  height: 45px; line-height: 45px;}
.contactListIn>li:before {position:absolute; content:""; top:20px; left:0; width:8px; height: 2px;  background-color:#D31F21;}


/******sitemap******/

.sitemapPage {}
.sitemapList {    overflow: hidden;}
.sitemapList>li {float:left;width: 100%;    margin-bottom: 30px; }
.sitemapList>li:first-child {    padding-left: 0; margin-left: 0;border-left:none;}
.sitemapPage .siteT {position: relative; font-weight: 600;font-size: 18px;color: #d31f21;}
.sitemapPage .siteT:before {    position: absolute; content: ""; bottom: -2px;left: 0; width: 20px; height: 1px; border-radius: 50px;background-color: #d31f21;}
.sitemapListIn {    margin-top: 10px;}
.sitemapListIn>li { position: relative;   padding: 10px 0;   border-bottom: 1px dotted #ddd;}
.sitemapListIn>li>a { display:block; font-size: 15px;font-weight: 600;color: #000;}
.sitemapListIn>li>a .icon {position: absolute; right: 0; top: 22px;font-size: 13px;font-weight: 600;}
.sitemapSub {     margin-top: 5px; padding: 5px 10px; background-color: #F6F6F6;}
.sitemapSub li { position: relative;   margin: 5px 0;    padding-left: 10px;}
.sitemapSub li:before {position:absolute; content:"";     top: 9px;  left: 0; font-size: 11px; width: 2px;height: 2px;    border-radius: 15px;background-color:#666;}
.sitemapSub li a {display:block;}