/* ---------- 공통 ---------- */
html, body {
	width:100%;
	height:100%;
}

/*-----버튼-----*/
#btn {
	display: none;
	position: fixed;
	z-index: 20;
	width:100px;
	height:50px;
	line-height: 50px;
	text-align: center;
	cursor: pointer;
	left:3%;
	top: 7%;
	color: #FFF;
	background-image: url("../images/menuBtn2.png");
	background-repeat: no-repeat;
	opacity: 0.8;
	transition: 0.15s;
}
#btn:hover {
	background-image: url("../images/menuBtn_hover.png");
	opacity: 1;
}
#btn:active {
	background-image: url("../images/menuBtn_clicked.png");
	opacity: 1;
}


#closeBtn {
	display: none;
	color: white;
	width:30px;
	height:30px;
	cursor: pointer;
	float: right;
	font-size: 24px;
	font-weight: bold;
	opacity: 0.6;
	text-align: center;
	line-height: 30px;
}
#closeBtn:hover {
	opacity: 1;
}
#closeBtn:active {
	color:#CCC;
	opacity: 1;
}

/*-------------*/

/* ---------- 메뉴 ---------- */
#menu {
	position:fixed;
	z-index: 10;
	width:200px;
	height: 100%;
	float: left;
	/*background-color:rgb(0, 175, 255);*/
	background-color:rgb(0, 175, 255);  
	box-shadow: 1px 0px 10px #444;
}

/* 로고 */
#menu h1:nth-of-type(1) {
	width:200px;
	margin-top: 55px;
}
#menu h1:nth-of-type(1) a {
	display: block;
	width:126px;
	height:43px;
	margin: 0 auto;
}

#menu h1:nth-of-type(2) {
	width:200px;
	text-align: center;
	margin-top: -5px;
}
#menu h1:nth-of-type(2) a {
	font-size: 25px;
	display: block;
	height:35px;
	margin: 0 auto;
	color:#FFF;
	text-decoration: none;
}

/* 메뉴바 */
#menu #menuBar {
	margin-top: 50px;
	list-style: none;
	width:100%;
}
#menu #menuBar li {
	width:100%;
	height:42px;
	/*background-color:rgba(0, 255, 255, 0.3);*/
	background-color:rgba(80, 200, 225, 0.3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	transition: 0.5s;
}
#menu #menuBar li a {
	display: block;
	font-size: 14px;
	font-family: sans-serif;
	box-sizing:content-box;
	margin-left: 20px;
	line-height: 42px;
	color:#FFF;
	text-decoration: none;
}
#menu #menuBar li:hover {
	transform: scale(1.05);
	/*background-color:rgba(0, 175, 255, 1);*/
	background-color:rgba(0, 175, 255, 1);
	box-shadow: 1px 1px 5px #555;
}

/* 가입센터 */
#menu #sub_center {
	position: relative;
	margin-top: 41px;
}
#menu #sub_center ul {
	border-radius: 4px;
	width:178px;
	height:185px;
	margin: 0 auto;
	background-color: #FFF;
	overflow: hidden;
}
#menu #sub_center li {
	width:158px;
	margin: 0 auto;
}

#menu #sub_center li:nth-of-type(1) {
	height: 59px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#menu #sub_center li h2 {
	line-height: 50px;
	font-size: 20px;
	color: #000;
}

#menu #sub_center li:nth-of-type(2) {
	height: 49px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#menu #sub_center li:nth-of-type(2) p {
	font-size: 12px;
	padding-top: 8px;
}

#menu #sub_center li:nth-of-type(3) {
	text-align: center;
	font-family: 'Baloo Bhaina', cursive;
	font-size: 28px;
	margin-top: 15px;
}
#menu #sub_center li:nth-of-type(3) i {
	position:relative;
	color: rgb(0, 175, 255);
	/*color: rgb(35,164,25);*/
	font-size: 240px;
	left:-22px;
	top: -152px;
	opacity: 0;
	animation-duration: 2s;
	animation-name: rainbowLink;
	animation-iteration-count: infinite;
}
#menu #sub_center li:nth-of-type(3) a {
	position: relative;
	font-size: 33px;
	top:-240px;
	color: rgb(40, 40, 40);
}

@keyframes rainbowLink {
	0%{opacity:0.1;}
 	50%{opacity:0.3;}
	100%{opacity:0.1;}
}



/* ---------- 섹션 ---------- */
#contents {
	padding-left: 200px;
}

/* 페이지 방문시 이벤트 요소 나오게 */
#contents #event {
 width:100%;
 height:0px;
 line-height: 70px;
 text-align: center;
 font-size: 18px;
 color: rgb(255, 60, 120);
 overflow: hidden;
 animation: event 0.5s ease-in 0.5s;
 animation-fill-mode:forwards;
}
@keyframes event {
	0% {
		opacity: 1;
		height:0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		height:70px;
	}
}
/* 이벤트 문구 반짝 */
#contents #event h2 {
	animation: fadeInOut 1s ease 0s infinite alternate;
}
#contents #event h2 span {
	color: #333;
	font-size: 18px;
}
@keyframes fadeInOut {
 	0%{opacity:0;}
 	100%{opacity:1;}
 }

#contents #sectionWrap {
	padding: 0 10px;
}

/* ------------------------------------------ sub 페이지 고유 코드 ------------------------------------------ */

/* 요금안내표 */
#contents #sectionWrap h3 {
	font-size: 16px;
	color: #333;
	text-align: center;
	border-top: 2px solid #888;
	height: 50px;
	background-color: #EEE;
	line-height: 50px;
}
#contents #sectionWrap h4 {
	font-size: 18px;
	color: #AAA;
	margin-bottom: 10px;
	text-align: left;
}

#contents #sectionWrap #guide {
	margin-top: 50px;
}
#contents #sectionWrap #guide #info{
	margin: 100px 0;
	border: 1px solid #CCC;
	background-color: rgb(240, 240, 240);
	width:100%;
}
#contents #sectionWrap #guide #info h5 {
	font-size: 16px;
	margin-left: 16px;
	margin-top: 6px;
}
#contents #sectionWrap #guide #info div {
	border: 1px solid #BBB;
	background-color: #fff;
	margin:16px;
}

#contents #sectionWrap .tableWrap1 {
	margin-top: 30px;
	text-align: center;
}
#contents #sectionWrap .tableWrap1 table {
	border-radius: 18px;
	box-sizing: border-box;
	border-collapse: collapse;
	width:100%;
	box-shadow: 5px 5px 10px #EEE;
}
#contents #sectionWrap .tableWrap1 table tbody {
}
#contents #sectionWrap .tableWrap1 table thead tr th {
	font-size: 18px;
	background-color: rgba(238, 238, 238, 0.8);
	width:10%;
	max-width: 1000px;
	height:50px;
	border-bottom: 2px solid rgba(208, 208, 208, 0.8);
}
#contents #sectionWrap .tableWrap1 table tbody tr td {
	font-size: 14px;
	width:10%;
	max-width: 1000px;
	height:40px;
	border-bottom: 1px solid rgba(238, 238, 238, 0.8);
}
#contents #sectionWrap .tableWrap1 table thead tr th:nth-of-type(7) {
	width:30%;
}
#contents #sectionWrap .tableWrapott table thead tr th:nth-of-type(7) {
	width:10%;
}
#contents #sectionWrap .tableWrapott table thead tr th:nth-of-type(8) {
	width:30%;
}
#contents #sectionWrap .tableWrap1 table thead tr th:nth-of-type(4) {
	font-size: 16.5px;
}

.redColor {
	color:rgb(255, 70, 70);
	font-family: 'Nanum Gothic', sans-serif;
	font-weight: bold;
}





/* 편성표 */
#contents #sectionWrap{
	margin-top: 300px;
}
#contents > #sectionWrap{
	margin-top: 50px;
}
#guide2{ margin-top: 150px; }

#contents #sectionWrap .tableWrap2 {
	margin-top: 30px;
}
#contents #sectionWrap .tableWrap2 table {
	text-align: center;
	border-collapse: collapse;
	width:100%;
}
#contents #sectionWrap .tableWrap2 table tbody {
}
#contents #sectionWrap .tableWrap2 table thead tr th {
	font-size: 16px;
	/*background-color:rgba(0, 175, 255, 0.2);*/
	background-color:rgba(80, 200, 225, 0.2);
	height:50px;
	/*border-bottom: 2px solid rgba(0, 175, 255, 0.4);*/
	border-bottom: 2px solid rgba(80, 200, 225, 0.4);
}
#contents #sectionWrap .tableWrap2 table thead tr th:nth-of-type(odd) {
	width:5%;
}
#contents #sectionWrap .tableWrap2 table thead tr th:nth-of-type(even) {
	width:15%;
}

#contents #sectionWrap .tableWrap2 table tbody tr td:nth-of-type(odd) {
	/*border: 1px solid rgba(0, 175, 255, 0.2);*/
	border: 1px solid rgba(80, 200, 225, 0.2);
}
#contents #sectionWrap .tableWrap2 table tbody tr td:nth-of-type(even) {
	/*border: 1px solid rgba(0, 175, 255, 0.2);*/
	border: 1px solid rgba(80, 200, 225, 0.2);
}
#contents #sectionWrap .tableWrap2 table tbody tr td {
	font-size: 14px;
	max-width: 1000px;
	height:40px;
	border-bottom: 1px solid rgba(0, 175, 255, 0.2);
}





/* 카드제휴 */
#card {
	width:100%;
	margin: 100px auto;
}
#card #cardDis h3{
	font-size: 16px;
	color: #333;
	text-align: center;
	border-top: 2px solid #888;
	height: 50px;
	background-color: #EEE;
	line-height: 50px;
}
#card div {
	width:100%;
	float: left;
	margin-bottom: 20px;
}
#card div div { /* 이미지 박스 */
	width: 30%;
	height: 300px;
	float: left;
	max-width: 400px;
}
#card div div img {
	width: 100%;
}
#card h5 {
	font-size: 22px;
}
#card span {
	font-size: 16px;
}
/* ------------------------------------------------------------------------------------------------------ */


/* ---------- 푸터 ---------- */
#footer {
	width:100%;
	height:150px;
	float:left;
	text-align: center;
	border-top: 1px solid #DDD;
}
#footer #address {
	margin-top: 30px;
}
#footer #address a{
	color: blue;
}

/*추가*/
#sub_input{
	position: fixed;
    bottom: 0px;
	left: 201px;
	z-index: 10;
	width: 100%;
	height: 40px;
	/*background-color:rgb(0, 175, 255);*/
	background-color:rgba(96,102,94,1.0);
	box-shadow: 1px 0px 10px #444;
}
#sub_input ul > li{
	width: 85%;
	height: 35px;
	position:relative;
    font-size:16px;
    color:#666;
	padding-top: 4px;
    margin-left: 9px;
    margin-bottom:4px;
	vertical-align: middle;
	text-align: center;
	color: white;
}
#sub_input ul > li input{
	text-align: center;
}
#callOk{
	text-align: center;
	border: 0px;
	width: 79px;
	height: 30px;
}
#callNum1, #callNum2, #callNum3{
	width: 20%;
	height:22px;
}
#callOk{
	background:url("/images/callsbtn.png") no-repeat;
}
#callOk:hover{
	background:url("/images/callsbtnHover.png") no-repeat;
}

#laypop {
	width: 390px;
	height: 170px;
	background-color:rgba(0, 175, 255, 0.9);
	z-index: 12;
	position: fixed;
	left: 40%;
	top: 20%;
	padding: 10px;
	padding-top: 5px;
}
#laypop div h2{
	margin: 0 0;
	display:inline-block;
	position: fixed;
	top: 21.5%;
}
#laypop p{
	background: white;
}
#laypop p b{
	font-size: 13px;
}
#laypop p:nth-of-type(5){
	text-align: center;
}
#laypop p > input{
	background:url("../images/btn_24go.png") no-repeat;
	width: 192px;
	height: 37px;
}
.laypopClose{
	float: right;
	z-index: 13;
}

/*---cnmBig---*/
.bigBox {
    display:none; 
    z-index:997;
    position:fixed;
    left:50%; margin-left:-347px;
    top:50%; margin-top:-341px;
    width:694px;
    height:663px;
    background:#3298E1;
    border-radius:4px;
    cursor:move;
    behavior: url("/resources/css/home/PIE.htc");
}

div.personal_cnmBig {
    width:686px;
    height:635px;
    background:#fff;  
    z-index:998;
    position:absolute;
    left:4px;
    top:24px;
    overflow-y:scroll;
    border-radius:4px;   
    behavior: url("/resources/css/home/PIE.htc");
    color: #888;
}
.bigBoxClose {
    position:relative;
    left:640px;
    cursor:pointer;
}

.privacyImgBig {
    margin-top:20px;
    position:relative;
    left:15px;
}
.privacyCloseBig {
    position:relative;
    left:435px;
    top:-12px;
    cursor:pointer;
}

.topA {
	position:relative;
    left:10px;
    color:#777;
    text-decoration:none;
}

/* �����̺� ��������ó����ħ ���� */
.content h3 {font-size: 14px; margin-bottom: 3px;}
.content pre {font-family: "NanumGothic", sans-serif; font-size: 13px; color:#444; margin:0; padding-left: 15px;}
.content {color: #444; font-size: 14px;}
.clr:before, .clr:after {content:""; display:block;}
.clr:after {clear:both; visibility: hidden;}
#topA {margin:0; padding: 10px; font-size: 24px; color: #2EB8DF; font-weight: 700;}
.content { padding: 4px 10px; font-size: 13px; line-height: 1.5em;}
.content p {margin:0; font-size: 13px; padding-left: 14px;}
/* .content > div > table {border: 1px solid #888;} */
.toc {border-top: 4px double #888; border-bottom: 4px double #888; margin: 10px auto; padding: 20px 0;}
.toc h2 {margin: 0 auto; margin-bottom: 10px; width: 100px;}
.toc ol li {list-style-type: decimal;}
.toc ol {padding-left: 0px; float: left; width: 310px;}
.toc ol.first {padding-left: 20px;}
.inTable { display: table; border-collapse: collapse; border-color: #888; line-height: 1.5em; margin-top: 3px; }
/* .inTable tr.cs3 { text-align: left; } */
.inTable th, .inTable td { padding: 10px; }
.inTable th {background: #D6EBFE; color:#205DB0;}
.inTable.ta_c {text-align: center;}
.inTable.ta_c th {width: 330px;}
table.tw2 th.first { width: 28px; }



@media screen and (max-width: 992px) {
	#menu {
		display: none;
	}
	#menu h1:nth-of-type(2) a {
		height: 50px;
	}
	#btn {
		display: block;
	}
	#closeBtn {
		display: block;
	}
	#contents {
		padding-left: 0px;
	}
	#contents #event h2,	#contents #event h2 span {
		font-size: 22px;
	}
	#contents #sectionWrap #tableWrap1 table thead tr th {
		font-size: 17px;
	}
	#contents #sectionWrap #tableWrap1 table tbody tr td {
		font-size: 14px;
	}
	#contents #sectionWrap #tableWrap1 table thead tr th:nth-of-type(4) {
		font-size: 15.5px;
	}
	#sub_input{
		left: 0px;	
	}
	#sub_input ul > li{
		width: 100%;
	}
	#callNum1, #callNum2, #callNum3{
		width: 15%;
	}
	#laypop {
		left: 30%
	}

}

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

	#contents #event h2,	#contents #event h2 span {
		font-size: 18px;
	}
	#contents #sectionWrap .tableWrap1 table thead tr th {
		font-size: 15px;
	}
	#contents #sectionWrap .tableWrap1 table tbody tr td {
		font-size: 12px;
	}
	#contents #sectionWrap .tableWrap1 table thead tr th:nth-of-type(4) {
		font-size: 12.5px;
	}
	#contents #sectionWrap .tableWrap2 table thead tr th {
		font-size: 14px;
	}
	#contents #sectionWrap .tableWrap2 table tbody tr td {
		font-size: 12px;
	}
	
	
}

@media screen and (max-width: 600px) {
	#contents #event h2,	#contents #event h2 span {
		font-size: 14px;
	}
	#contents #sectionWrap .tableWrap1 table thead tr th {
		font-size: 13px;
	}
	#contents #sectionWrap .tableWrap1 table tbody tr td {
		font-size: 10px;
	}
	#contents #sectionWrap .tableWrap1 table thead tr th:nth-of-type(4) {
		font-size: 11.5px;
	}
	#contents #sectionWrap .tableWrap2 table thead tr th {
		font-size: 12px;
	}
	#contents #sectionWrap .tableWrap2 table tbody tr td {
		font-size: 10px;
	}
	#laypop {
		left: 20%
	}
	
}

@media screen and (max-width: 540px) {
	#contents #event h2,	#contents #event h2 span {
		font-size: 12px;
	}
	#contents #sectionWrap .tableWrap1 table thead tr th {
		font-size: 12px;
	}
	#contents #sectionWrap .tableWrap1 table tbody tr td {
		font-size: 8px;
	}
	#contents #sectionWrap .tableWrap1 table thead tr th:nth-of-type(4) {
		font-size: 10.5px;
	}
	#contents #sectionWrap .tableWrap1 h3{

		font-size: 13px;
	}
	#contents #sectionWrap .tableWrap2 table thead tr th {
		font-size: 8px;
	}
	#contents #sectionWrap .tableWrap2 table tbody tr td {
		font-size: 8px;
	}
	#sub_input ul > li{
		width: 100%;
	}
	#callNum1, #callNum2, #callNum3{
		width: 10%;
		height:22px;
	}

	/* 레이아웃 안짤리게 작게 만들기 */
	#laypop {
		width: 290px;
		left: 10%;
	}
	#laypopHead h2 {
		font-size: 14px;
		line-height: 8px;
	}
	#laypopHead img:nth-of-type(1) {
		width:20%;
	}
	#laypopHead img:nth-of-type(2) {
		width:15px;
	}
	#laypop p{
		background: white;
	}
	#laypopContent p b{
		font-size: 9px;
	}
	#laypop p:nth-of-type(5){
		text-align: center;
	}
	#laypop p > input{
		background:url("../images/btn_24go.png") no-repeat;
		width: 192px;
		height: 37px;
	}

}

@media screen and (max-width: 440px) {
	#contents #event h2,	#contents #event h2 span {
		font-size: 8px;
	}
	
	#callNum1, #callNum2, #callNum3{
		width:10%;
		height:22px;
	}
	
}
@media screen and (max-width: 400px) {
	#laypop {
		left: 5%
	}
}