@charset "utf-8";

@font-face {font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal;}/*title*/
@font-face {font-family: 'GowunDodum-Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff'); font-weight: normal; font-style: normal;}/*body*/

caption{display: none;}
table,th,td{border: 0;}
/* a{text-decoration: none; color: #005279;} */
div{margin: 0; padding: 0;}
p{margin: 0; padding: 0;}

.PC{display: block;}
.PC2{display: block;}
.MB{display: none;}
.MB2{display: none;}

body{margin: 0; font-family: 'Pretendard-Regular';}

.font1{font-family: 'Pretendard-Regular';}
.font2{font-family: 'GowunDodum-Regular';}

.introDim {width:100%; height: 100%; margin:0; padding : 0; position: fixed; z-index: 999; background: #FDFDFD; opacity: 1;}
.introMsg {width: 100%; position: fixed; top: 25%; text-align: center; color: #000; z-index: 1000; font-size: 4em;}

#scrollUpBtn{position: fixed; bottom: 50px; right: 20px; width: 30px; height: 40px; font-size: 2.5em; z-index: 99; display: none; cursor: pointer;}

.container {  width: 100%;  margin: 0;  padding: 0;  border: 0; font-size: 13px; font-family: 'Pretendard-Regular';}


.header {color: #fff; width:100%; margin:0 auto; height: 800px; position: relative; z-index: 5;}
.headerBg {color: #fff; width:100%; margin:0 auto; height: 800px; position: absolute; z-index: -2; overflow: hidden;}
.headerDim {color: #fff; width:100%; margin:0 auto; height: 800px; position: absolute; z-index: -1; background: #000; opacity: 0.2;}
.topDim {color: #fff; width:100%; margin:0 auto; height: 110px; position: fixed; z-index: 1; background: #000; opacity: 0.8; display: none;}


.topLayerDim {color: #565656; width:100%; height: 40px; margin: 0; position: fixed; z-index: 50; background: #fff; top: 0;
        background-image: url('/web/images/bg/06t.jpg');
        background-repeat : no-repeat;
        background-size : cover;
}
.topLayerDim .top_logoArea{width: 250px; height: 100px; position: absolute; top: 10px; left: 50px;}
.topLayerDim .top_logoArea img{width: 100%; cursor: pointer;}
.topLayerDim .top_searchArea{width: 200px; height: 100px; position: absolute; top: 26px; left: 300px;}
.topLayerDim .top_searchArea input{margin-top: 5px; width: 80%; height: 34px; background: none; border: 1px solid #565656; color: #3e3e3e; padding: 0 50px 0 30px; 
	font-size: 1.2em; line-height: 34px; box-shadow: #acacac 2px 2px 2px; font-weight: bold;
}
.topLayerDim .top_searchArea input::placeholder { color: #3e3e3e; }
.topLayerDim .top_searchArea input:focus {outline:1px solid #8d8d8d;}
.topLayerDim .top_searchArea input:hover {outline:1px solid #8d8d8d;}
.topLayerDim .top_searchArea .searchIcon{margin-top: 5px; height: 28px; position: absolute; top: 5px; left: 210px; cursor: pointer;}
.topLayerDim .top_menuArea{width: 60%; height: 100px; position: absolute; top: 32px; right: 60px; text-align: right; }
.topLayerDim .top_menuArea .menu{font-size: 1.5em; margin-right: 20px; color: #565656;}
.topLayerDim .top_menuArea .menu:hover{cursor: pointer;}
.topLayerDim .top_menuArea .menu:hover img{ transform:rotate(180deg); transition-duration: 300ms;}
.topLayerDim .top_menuArea .menu.on img{ transform:rotate(180deg); transition-duration: 300ms;}
.topLayerDim .top_menuArea .menu img{width: 10px; margin-left: 5px; vertical-align: inherit; transition: transform 300ms;}

.topLayerDim .top_hdBtnArea{width: 500px; height: 100px; position: absolute; top: 10px; right: 15px; text-align: right;}
.topLayerDim .top_hdBtnArea .userBtn{font-size: 1em;}
.topLayerDim .top_hdBtnArea .userIcon{width: 30px; cursor: pointer;}
.topLayerDim .top_hdBtnArea .menuBtn{font-size: 1em; display: none;}
.topLayerDim .top_hdBtnArea .menuIcon{width: 25px; cursor: pointer;}
.topLayerDim .top_hdBtnArea span{color: #000;}
.topLayerDim .top_hdBtnArea span a{color: #000; text-decoration:  none; font-size: 1.2em;}


.topLayerDim .top_userBtnBox{width: 96px; position: fixed; top: 65px; right: 5px; background: none; text-align: center; display: none;}
.topLayerDim .top_userBtnBox button{vertical-align: middle; width: 95px !important;}

.topLayer {color: #565656; width:100%; min-height: 190px; margin: 0; position: fixed; z-index: 50; background: #fff; top: 40px; border-bottom: 1px solid #999999;
/* 		border-top: 1px solid #999999;  */
        background-image: url('/web/images/bg/06.jpg');
        background-repeat : no-repeat;
        background-size : cover;
}/*display: none;*/

.topLayer .allMenu{ width: 1200px; margin: 0 auto; padding-top: 0; padding-left: 200px;}
/* .topLayer div a{text-decoration: none; color: #565656;} */
/* .topLayer div ul{list-style: none; text-align: center; margin-top: 30px;} */
/* .topLayer div ul li{float: left; margin: 0 20px;} */
/* .topLayer div ul li a{font-size: 2em;} */


.topLayer .fixLayerBtn{position: absolute; width: 70px; right: 15px; bottom: 20px; font-size: 1.1em; text-align: center;}
.topLayer .fixLayerBtn .switch-button{ position: relative; display: inline-block; width: 55px; height: 30px; }
.topLayer .fixLayerBtn .switch-button input { opacity: 0; width: 0; height: 0; }
.topLayer .fixLayerBtn .onoff-switch { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius:20px; background-color: #ccc; box-shadow: inset 1px 5px 1px #999; -webkit-transition: .4s; transition: .4s; }
.topLayer .fixLayerBtn .onoff-switch:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: #fff; -webkit-transition: .5s; transition: .4s; border-radius:20px; }
.topLayer .fixLayerBtn .switch-button input:checked + .onoff-switch { background-color: #F2D522; box-shadow: inset 1px 5px 1px #E3AE56; }
.topLayer .fixLayerBtn .switch-button input:checked + .onoff-switch:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }


.header .logoArea{width: 250px; height: 100px; position: absolute; top: 28px; left: 50px; z-index: 2;}
.header .logoArea img{width: 100%; cursor: pointer;}
.header .searchArea{width: 200px; height: 100px; position: absolute; top: 26px; left: 300px; z-index: 2;}
.header .searchArea input{margin-top: 5px; width: 80%; height: 34px; background: none; border: 1px solid #fff; color: #fff; padding: 0 50px 0 30px; 
	font-size: 1.2em; line-height: 34px; 
	text-shadow: #000 1px 1px 5px; box-shadow: #acacac 2px 2px 2px;
}
.header .searchArea input::placeholder { color: #fff; }
.header .searchArea input:focus {outline:2px solid #fff;}
.header .searchArea input:hover {outline:2px solid #fff;}
.header .searchArea .searchIcon{margin-top: 5px; height: 28px; position: absolute; top: 5px; left: 210px; cursor: pointer;}
.header .menuArea{width: 60%; height: 100px; position: absolute; top: 0; right: 60px; padding-top: 32px; text-align: right; z-index: 2;}
.header .menuArea .menu{font-size: 1.7em; margin-right: 20px; text-shadow: #000 3px 3px 7px; color: #fff;}
.header .menuArea .menu:hover{cursor: pointer;}
.header .menuArea .menu:hover img{ transform:rotate(180deg); transition-duration: 300ms;}
.header .menuArea .menu img{width: 10px; margin-left: 5px; vertical-align: inherit; transition: transform 300ms;}

.header .hdBtnArea{width: 60px; height: 100px; position: absolute; top: 30px; right: 15px; text-align: right; z-index: 2;}
.header .hdBtnArea .userBtn{font-size: 1em;}
.header .hdBtnArea .userIcon{width: 30px; cursor: pointer;}
.header .hdBtnArea .menuBtn{font-size: 1em; display: none;}
.header .hdBtnArea .menuIcon{width: 25px; cursor: pointer;}

.header .userBtnBox{width: 96px; position: fixed; top: 65px; right: 5px; background: none; text-align: center; display: none;}
.header .userBtnBox button{vertical-align: middle; width: 95px !important;}

.header .hdBtnArea img:hover { transform:rotate(0deg);
   -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); transition-duration: 800ms;
}
.header .hdBtnArea img{transition: transform 800ms;}
.btnB:hover {transition-duration: 500ms; color: #fff; background-color: #000; font-weight: bold; font-size: 2em; cursor: pointer; padding: 12px;}
.btnW:hover {transition-duration: 500ms; color: #000; background-color: #fff; font-weight: bold; font-size: 2em; cursor: pointer; padding: 12px;}

.header .mainTitle{width: 800px; position: absolute; top: 30%; left: 15%; text-align: left; animation-name: ani_mainTitle; animation-duration: 5s;}
.header .mainTitle2{width: 800px; position: absolute; top: 30%; left: 15%; text-align: left;}
/* .header .mainTitle p{font-size: 4em; text-shadow: 1px 1px 2px #fff, 0 0 1em #000, 0 0 0.2em #000;} */
.header .mainTitle p{font-size: 5em; color: #fff; margin: 0; padding: 0; line-height: 1.3em;  text-shadow: #000 3px 3px 7px; }
.header .mainTitle p span{font-weight: bold;}
/* text-shadow: 0px 0px 25px #000000 !important;  */
/* text-shadow: #000 3px 3px 7px; */

/* 
@keyframes ani_mainTitle {
  0%   {top: 30%; left: -50%;}
  60%   {top: 30%; left: -50%;}
  70%   {top: 30%; left: 15%;}
  80%  {top: 30%; left: 15%;}
  90% {top: 25%; left: 15%;}
  95% {top: 30%; left: 15%;}
  100% {top: 30%; left: 15%;}
}
 */

/* 
@keyframes ani_mainTitle2 {
  0%   {top: 30%; left: -50%;}
  10%   {top: 30%; left: -50%;}
  20%   {top: 30%; left: 15%;}
  30%  {top: 30%; left: 15%;}
  40% {top: 25%; left: 15%;}
  45% {top: 30%; left: 15%;}
  100% {top: 30%; left: 15%;}
}
 */


@keyframes ani {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.circle {position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 1;  margin: auto;  width: 500px;  height: 500px;  border-radius: 50%;  background: #fff000;  animation: ani 3s alternate infinite;}
.text {  mix-blend-mode: difference;  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 2;  margin: auto;  height: 30px;  font-size: 30px;  font-weight: bold;  text-align: center;  color: #fff000;}


.playStat {color: #fff;  position: absolute; z-index: 4; right: 5px; top: 10px; width: 90px; text-align: right;}
.playStat #playBtn{cursor: pointer;}
.playStat #prevBtn{cursor: pointer;}
.playStat #nextBtn{cursor: pointer;}
.playStat span i{font-size: 1.5em;}

.slideBtnPrev{position: absolute; top: 50%; left: 2%; cursor: pointer; font-size: 4em; display: none;}
.slideBtnNext{position: absolute; top: 50%; right: 2%; cursor: pointer; font-size: 4em; display: none;}

.content { padding: 0; margin: 0; position: relative; z-index: 4;}

.section1 { width: 100%; position: relative; margin: 0; text-align: center;}
.section1 .swrap{ width: 1400px; margin: 0 auto; text-align: center;}
/* .section1 .card{ width: 380px; height: 170px; border: 1px solid #373737; box-shadow: 0 0 5px 2px #696969; float: left; margin: 0 20px 50px 20px; padding: 20px; text-align: left; background: #fff;} */
.section1 .cardWrap{ width: auto; height: 240px; border: none; float: left; padding-top: 20px; position: relative; z-index: 1;}
.section1 .card{ width: 380px; height: 170px; border: none; box-shadow: 0 3px 12px 2px rgba(199, 199, 199, 0.5); float: left; margin: 0 20px 50px 20px; padding: 20px; text-align: left; background: #fff; 
	transition-duration: 500ms; transition-timing-function: ease-out;
}
.section1 .cardWrap:hover .card{cursor: pointer; transition-duration: 300ms; margin-top: -15px;}
/* .section1 .card:hover{cursor: pointer; transition-duration: 300ms; margin-top: -30px;} */
.section1 p{ line-height: 1.3em;}
.section1 .card .tit{ font-size: 1.6em; font-weight: bold; }
.section1 .card .cont{ font-size: 1.1em; margin-top: 10px; font-weight: bold; line-height: 1.5em;}
.section1 .card .cont .bibleTit{ font-size: 1.2em; margin: -5px 0 10px 0;}
.section1 .card .info{ margin: 10px 0; border-top: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; padding: 0 2px 10px 10px; height: 80px; text-align: center; }
.section1 .card .info .fl1{ float: left; width: 100px; font-size: 1.4em; font-weight: bold; letter-spacing: 0;   margin: 20px 0;}
.section1 .card .info .fl2{ float: left; width: 64px;}
.section1 .card .info .fl2 .time{ font-size: 3.5em; padding: 0; margin: auto 0; letter-spacing: 0;  }
.section1 .card .info .fl2 .p2{ font-size: 1.2em; padding: 0; margin: auto 0;}
.section1 .card .imgAr{ float: left; width: 170px; height: 170px;}
.section1 .card .imgAr img{ width: 170px; height: 170px; overflow: hidden;}
.section1 .card .txtAr{ float: left; width: 190px; height: 170px; margin-left: 20px; overflow: hidden; }
.section1 .card .cardDim {position: absolute; z-index: 0; background: #000; opacity: 0.6; display: none;}

/* .section1 .card .imgAr:hover .card{ cursor: pointer; transition-duration: 300ms; margin-top: -30px; } */
/* .section1 .card .txtAr:hover .card{ cursor: pointer; transition-duration: 300ms; margin-top: -30px; } */

	
.section2 { width: 100%; position: relative; margin-top: 100px; clear: both;}
.section2 .introDesc{ width: 900px; margin: 0 auto; text-align: center;}
.section2 .introDesc span{ font-weight: bold; }
.section2 .introDesc p{ margin:5px 0; padding: 5px 0; }
.section2 .introDesc .txt_b{ font-size: 9em; }
.section2 .introDesc .txt_m{ font-size: 2.5em; letter-spacing: 0; margin-top: 20px; line-height: 1.5em; }
.section2 .introDesc .txt_s{ font-size: 1.4em; letter-spacing: 0; font-weight: bold;}
.section2 .introDesc .txt_s p{line-height: 2em;}
.section2 .introDesc .btnArea{ margin-top: 50px; }
.section2 .introDesc .btnArea .btn{ border: 2px solid #373737; padding: 10px; font-size: 1.8em; font-weight: normal;}

.section2 .swrap{ width: 1400px; margin: auto; text-align: center;}
.section2 .card{ width: 50%; float: left; height: 450px; padding: 0; text-align: center; margin: auto;}
.section2 .card img{ margin: 10px auto;}
.section2 .card span{ font-weight: bold; }
.section2 .card p{ margin:5px 0; padding: 5px 0; }
.section2 .card .txt_b{ font-size: 9em; }
.section2 .card .txt_m{ font-size: 2.5em; letter-spacing: 0; margin-top: 20px; line-height: 1.5em; }
.section2 .card .txt_s{ font-size: 1.4em; letter-spacing: 0; font-weight: bold;}
.section2 .card .txt_s p{line-height: 2em;}
.section2 .card .btnArea{ margin-top: 50px; }
.section2 .card .btnArea .btn{ border: 2px solid #373737; padding: 10px; font-size: 1.8em; font-weight: normal;}


.section3 {color: #fff; width:100%; margin:0 auto; height: 800px; margin-top: 200px; position: relative;}
.section3 .sectionBg {width:100%; margin:0; height: 100%; position: absolute; z-index: -2;}
.section3 .sectionDim {width:100%; margin:0; height: 100%; position: absolute; z-index: -1; background: #000; opacity: 0.6;}
.section3 .introDesc{ width: 900px; margin: 0 auto; text-align: center; z-index: 1; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.section3 .introDesc span{ font-weight: bold; }
.section3 .introDesc p{ margin:5px 0; padding: 5px 0; }
.section3 .introDesc .txt_b{ font-size: 9em; }
.section3 .introDesc .txt_m{ font-size: 2.5em; letter-spacing: 0; margin-top: 20px; margin-bottom: 20px; line-height: 1.5em; }
.section3 .introDesc .txt_s{ font-size: 1.4em; letter-spacing: 0;}
.section3 .introDesc .txt_s p{line-height: 2em;}
.section3 .introDesc .btnArea{ margin-top: 50px; }
.section3 .introDesc .btnArea .btn{ border: 2px solid #fff; padding: 10px 20px; font-size: 1.8em; font-weight: normal;}


.section4 { width: 100%; position: relative; margin-top: 200px; clear: both;}
.section4 .swrap{ width: 1400px; margin: 0 auto; text-align: center;}
.section4 .swrap .txt_b{ font-size: 6em; font-weight: normal; }
.section4 .swrap .txt_b .tit{ margin: 0; padding: 0; line-height: 1em;}
.section4 .card{ width: 420px; border: 1px solid #9f9f9f; float: left; margin: 50px 20px 50px 20px; padding: 0;}
.section4 .card p{margin: 0; padding: 0;}
.section4 .card img{ width: 100%;}
.section4 .card .fl{ float: left; width: 50%; text-align: center; padding-top: 20px; padding-bottom: 20px; height: 340px; cursor: pointer;}
.section4 .card .fl div{ padding-top: 20px 0;}
.section4 .card .fl img{ width: 50px; transition: transform 300ms; transform:rotate(0deg);}
.section4 .card .fl img:hover { transform:rotate(20deg); transition-duration: 300ms;}
.section4 .card .fl .txt_b{ height: 30px; font-size: 1.6em;  font-weight: bold; transition-duration: 100ms;}
.section4 .card .fl .txt_m{ height: 20px; font-size: 1.25em; transition-duration: 100ms;}
.section4 .card .fl .txt_s{ height: 16px; font-size: 1.15em; font-weight: bold; margin-bottom: 10px; line-height: 1.3em; transition-duration: 100ms;}
.section4 .card .fl .txt_b:hover{font-size: 1.8em; transition-duration: 100ms;}
.section4 .card .fl .txt_m:hover{ font-size: 1.35em; transition-duration: 100ms;}
/* .section4 .card .fl .txt_s:hover{ font-size: 1.3em; transition-duration: 300ms;} */
.section4 .card .fl .day:hover{ font-size: 1.4em; transition-duration: 300ms;}
.section4 .card .fl .day{ height: 25px; font-size: 1.1em; }
.section4 .card .fl .day span{ border-top: 1px solid #929292; border-bottom: 2px solid #bcbcbc; padding: 5px 20px; color: #929292; letter-spacing: 3px;}
.section4 .card .fl .mgt10{ margin-top: 10px}
.section4 .card .fl .mgt20{ margin-top: 20px}
.section4 .card .fl .mgb10{ margin-bottom: 10px;}
.section4 .card .fl .mgb20{ margin-bottom: 20px;}
.section4 .card .fl .mgb25{ margin-bottom: 25px;}

/* .section4 .card .fl .mgb28{ margin-bottom: 28px;} */
/* .section4 .card .fl:hover {transition-duration: 500ms; color: #fff; background-color: #000; cursor: pointer;} */
/* .section4 .card .fl:hover .bdr{ border-right: 0;} */
/* .section4 .card .bdr:hover{ border-right: 1px solid #000;} */
/* .section5 .card .fl:hover p{font-weight: bold; border-top: 1px solid #fff;} */

.section4 .card .bdr{ border-right: 1px solid #9f9f9f;}
.section4 .btnAr{ clear: both; margin-top: 50px; }
.section4 .btnAr .btn{ border: 2px solid #373737; padding: 10px 30px; font-size: 1.8em; font-weight: normal;}


.section5 { width: 100%; position: relative; margin-top: 100px; clear: both; background-color: #555555; color: #fff; padding: 80px 0 30px 0;}
.section5 .swrap{ width: 1400px; margin: 60px auto; text-align: center;}
.section5 .swrap .txt_b{ font-size: 6em; font-weight: normal; }
.section5 .swrap .txt_b .tit{ margin: 0; padding: 0; line-height: 1em;}
.section5 .card{ width: 420px; float: left; margin: 50px 20px 50px 20px; padding: 0;
	border-top: 2px solid #9f9f9f; border-bottom: 2px solid #9f9f9f; border-left: 1px solid #9f9f9f; border-right: 1px solid #9f9f9f;
}
.section5 .card p{margin: 0; padding: 0;}
.section5 .card img{ width: 100%;}
.section5 .card .txtArea{ width: 100%; color: #fff; text-align: left; padding: 20px 0;}
.section5 .card .txtArea .tit1{ font-size: 1.3em; line-height: 1.5em; padding: 0 20px; }
.section5 .card .txtArea .tit2{ font-size: 1.7em; line-height: 1.5em; padding: 0 20px; margin-top: 5px;}
.section5 .card .txtArea .cont{ font-size: 1.1em; line-height: 1.5em; padding: 0 20px; margin-top: 5px; font-weight: normal; height: 60px;}
.section5 .card .detailBtn { margin-top: 5px; padding: 0 20px 15px 20px;}
.section5 .card .detailBtn p{ padding: 15px 0 0 0; font-size: 1.3em; font-weight: normal; border-top: 1px solid #9f9f9f;}
.section5 .card .detailBtn:hover {transition-duration: 1000ms; color: #000; background-color: #fff; cursor: pointer;}
.section5 .card .detailBtn:hover p{font-weight: bold; border-top: 1px solid #fff;}

.section5 .btnAr{ clear: both; margin-top: 50px; clear: both; }
.section5 .btnAr .btn{ border: 2px solid #fff; padding: 10px 20px; font-size: 1.8em; font-weight: normal;}


.section6 { width: 100%; position: relative; margin-top: 100px; clear: both; padding: 0;}
.section6 .swrap{ width: 1400px; margin: auto; text-align: center;}
.section6 .card{ width: 50%; float: left; height: 450px; padding: 0; text-align: center; margin: auto;}
.section6 .card img{ margin: 10px auto;}
.section6 .card span{ font-weight: bold;}
.section6 .card .txt_m{ font-size: 2.5em; letter-spacing: 0;   line-height: 1.2em; margin-top: 100px; }
.section6 .card .txt_m p{ margin: 5px 0; line-height: 1.5em;}
.section6 .card .txt_s{ font-size: 1.4em; letter-spacing: 0;   line-height: 1.3em; margin-top: 50px; font-weight: bold;}
.section6 .card .txt_s img{ width: 180px;}


.section7 { width: 100%; height: 500px; position: relative; margin: 100px auto 0 auto; clear: both; background-color: #555555; color: #fff; padding: 30px 0;}
.section7 .swrap{ width: 1400px; margin: auto; text-align: center; position: relative;}
.section7 .card{ width: 50%; float: left; padding: 0; text-align: center; margin: 70px auto;}
.section7 .card img{ margin: 10px auto; border: 2px solid #444444;}
.section7 .card span{ font-weight: bold;}
.section7 .card p{ margin: 5px 0; line-height: 1.5em;}
.section7 .card .txt_m{ font-size: 2.4em; letter-spacing: 0;   line-height: 1.2em; margin-top: 40px; }
.section7 .card .txt_s{ font-size: 1.4em; letter-spacing: 0;   line-height: 1.1em; margin-top: 50px; font-weight: normal;}
.section7 .card .txt_s img{ width: 180px; border: none;}


.section8 { width: 100%; height: 450px; position: relative; margin: 0 auto; clear: both; background-color: #363636; color: #fff; padding: 50px 0; }
.section8 .swrap{ width: 1650px; margin: 0 auto; text-align: center; position: relative;}
.section8 .menuAr{ width: 1150px; float: left; margin: 10px auto 0 auto;}
.section8 .menuAr ul{ width: 160px; float: left; padding: 0; list-style: none; text-align: left; margin-bottom: 50px;}
.section8 .menuAr ul li{ font-size: 1.4em; letter-spacing: 0;   line-height: 2.4em; cursor: pointer;}
.section8 .menuAr ul li:hover{text-decoration: underline;}
.section8 .menuAr ul .m1{ font-size: 1.4em;}
.section8 .menuAr ul .m2{ font-size: 1.4em; color: #9FC2E0;}
.section8 .menuAr ul .m3{ font-size: 1.2em; padding-left: 10px;}
.section8 .mapAr { width: 400px; float: right; margin: 50px auto; }
.section8 .mapAr div{ text-align: center;}
.section8 .mapAr .txt_s{ font-size: 1em; letter-spacing: 0; line-height: 1.3em; margin-top: 10px; text-align: left;}
.section8 .mapAr .txt_s span{ font-weight: bold;}
.section8 .mapAr .txt_s a{ color: #fff; text-decoration: none;}



.headerSub {height: 500px !important;}
.headerBgSub {height: 500px !important;}
.headerDimSub {height: 500px !important;}


.naviArea {color: #fff; width:100%; margin:-35px auto 0 auto; height: 35px; position: relative; z-index: 5; }
.naviArea .naviDim {color: #fff; width:100%; margin:0 auto; height: 35px; position: absolute; z-index: -1; background: #000; opacity: 0.2;}
/* .naviArea .naviDim {color: #fff; width:100%; margin:0 auto; height: 35px; position: absolute; z-index: -1; background: #fff; opacity: 1;} */
.naviArea .naviCont {color: #fff; width:1220px; margin:0 auto; height: 25px; z-index: 0; vertical-align: middle; text-align: right; padding: 5px 0 0 0 ;}
.naviArea .naviCont span{vertical-align: middle; font-size: 1.2em; margin-right: 10px;}
.naviArea .naviCont img{vertical-align: middle;}
.naviArea .naviCont a{color: #fff; text-decoration: none;}







/*탭*/
.mypageTab {width: 850px; height: 40px; border-bottom:1px solid rgb(54, 54, 54); margin: 0 auto 50px auto;}
.mypageTab div {width: 160px; height: 29px;  float: left; margin-left: 10px; text-align: center;
	border-left:1px solid rgb(54, 54, 54); border-top:1px solid rgb(54, 54, 54); border-right:1px solid rgb(54, 54, 54);
	font-size: 1.3em; padding-top: 10px;
}
.mypageTab div:hover {background: rgb(54, 54, 54); color: #fff; font-weight: bold; cursor: pointer;}
.mypageTab div.on {background: rgb(54, 54, 54); color: #fff; font-weight: bold;}
.mypageTab div:first-child {margin-left: 50px;}

/* color: #fff; background: rgb(54, 54, 54); */


.htmlArea { width: 100%; position: relative; margin-top: 50px; clear: both; padding: 0; min-height: 800px; background: none;}
.htmlArea .htmlCont{ width: 1200px; margin: 10px auto 50px auto; padding: 0;}
.htmlArea .htmlCont .introBox {width: 650px; margin: 20px auto; padding: 20px;}
.htmlArea .sectionBg {width:100%; margin:0; height: 100%; position: absolute; z-index: -2;}

.title {font-size: 1.5em; margin: 0; padding: 20px; color: rgb(211, 233, 233); background: rgb(54, 54, 54);}
.subtitle {font-size: 1.3em; padding: 10px 0;}
.subtxt {font-size: 1.2em; padding: 5px 20px;}
.cmt {font-size: 0.9em; color: rgb(255, 128, 64); padding: 0 20px;}

.cmmBox {width: 500px; margin: 20px auto; padding: 20px; border: 1px solid rgb(182, 182, 182);}
.cmmBox .agreeBox{height: 220px; padding: 10px; background:rgb(240, 240, 240); overflow-x: hidden; overflow-y: auto; word-break: keep-all;}
.cmmBox .agreeBox pre{word-break: break-all; white-space: pre-wrap;}
/* .cmmBox .agreeBox textarea{height: 200px; word-break: break-all; font-size: 1.1em; width: 460px; padding: 10px; color: rgb(82, 82, 82); border: 0; background:rgb(240, 240, 240);} */
.cmmBox input[type=checkbox] {width: 20px; height: 20px; vertical-align: middle;}
.cmmBox .inp {margin: 10px 0; width: 100%;}
.cmmBox .inp input[type=text] {width: 88%; font-size: 1.2em; height: 25px; padding: 5px 20px;}
.cmmBox .inp input[type=password] {width: 88%; font-size: 1.2em; height: 25px; padding: 5px 20px;}
.cmmBox .inp input[type=tel] {width: 88%; font-size: 1.2em; height: 25px; padding: 5px 20px;}
.cmmBox .inp select { width: 97%; padding:10px; height:auto; border:1px solid #d4d4d4; font-size: 1.2em;}

.cmmBox .tbl{font-size: 1.2em; padding: 0; margin: 0 auto; border-top:2px solid #dddddd;}
.cmmBox .tbl table{width: 100%; border: 0; border-collapse: collapse;}
.cmmBox .tbl table .colWd{width: 120px;}
.cmmBox .tbl table .colWd1{width: 30%;}
.cmmBox .tbl table .colWd2{width: auto;}

.cmmBox .tbl table th { border-bottom: 1px solid #dddddd; padding:10px; background: #f4f4f4; font-size: 0.6em; }
.cmmBox .tbl table td { border-bottom: 1px solid #dddddd; padding:10px; vertical-align: top; font-size: 0.6em; position: relative;}
.cmmBox .tbl table td .icon-check{ position: absolute; left: -12px;}

.cmmBox .tbl table td.dec {padding: 15px 30px; font-size: 0.6em; text-align: left;} 
.cmmBox .tbl table tbody tr:hover { background:#f9f9f9; }
.cmmBox .tbl table tbody .openBtn {margin: 0; transition: all ease 0.5s;}
/* .cmmBox .tbl table tbody .openBtn:hover {transform: rotate( 180deg ); cursor: pointer;} */
.cmmBox .tbl table tbody .open {transform: rotate( 180deg );}
.cmmBox .tbl table tbody .star{font-size: 0.8em; color: #ff8000; margin: 10px 0;}
.cmmBox .tbl table tbody .user{font-size: 0.8em; margin: 10px 0;}
.cmmBox .tbl table tbody .dec{font-size: 0.9em; margin: 10px 0; line-height: 1.5em;}
.cmmBox .tbl table tbody .cnt{font-size: 0.8em; padding-right: 10px;}
.cmmBox .tbl table tbody input[type=text]{width: 100%; height: 40px; padding: 0 20px; box-sizing: border-box;}
.cmmBox .tbl table tbody textarea{width: 100%; padding: 20px; box-sizing: border-box;}
.cmmBox .tblbdr {border: none !important; width: 100% !important;}
.cmmBox .tblbdr td{border: none !important;}


.fnArea { width: 100%; position: relative; margin-top: 50px; clear: both; padding: 0; min-height: 800px; background: none; }
.fnArea .fnCont{ width: 100%; max-width: 1200px; margin: 10px auto; text-align: center; padding: 0;}
.fnArea .fnCont iframe{ border: none;}

.functionArea { width: 95%; position: relative; margin: 10px auto; padding: 10px 0; min-height: 500px; background: none; }

/* .functionArea .cmmBox {width: 500px; margin: 20px auto; padding: 20px; border: 1px solid rgb(128, 128, 128);} */

.functionArea .liveOnTxt {font-size: 2em; margin: 0; padding: 20px; color: rgb(211, 233, 233); background: rgb(54, 54, 54);}
.functionArea .liveOffTxt {font-size: 2.5em; margin: 50px; padding: 50px; border: 1px solid rgb(0, 0, 0);}
.functionArea .title {font-size: 2em; margin: 0; padding: 20px; color: #fff; background: rgb(54, 54, 54);}


/* 게시판 영역 */
.boardArea { width: 100%; position: relative; margin-top: 30px; clear: both; padding: 0; min-height: 800px; background: none; }
.boardArea .boardCont{ width: 1220px; margin: 10px auto; text-align: center; padding: 0;}
.boardArea .boardCont ul {list-style: none; margin: 0; padding: 0;}
.boardArea .boardCont .pipe {margin-left: 10px;}

.boardArea .boardCont .boardList {width: 100%;}

.boardArea .boardCont .total{text-align: left; border-bottom: 0 solid #c7c7c7; padding: 10px; font-size: 1.2em; text-align: right;}
.boardArea .boardCont .boardListTypeA { width:100%; overflow:hidden; margin-bottom:20px; border-top:2px solid #c7c5bd; border-bottom:1px solid #e6e6e6;  color: #595959;}
.boardArea .boardCont .boardListTypeA .noTxt{text-align: center; height: 150px; font-size: 2em; line-height: 4em;}

.boardArea .boardCont .boardListTypeA .imgtype {padding: 0; margin: 10px auto; list-style: none; width: 1200px;}
.boardArea .boardCont .boardListTypeA .imgtype  li{padding: 0; margin: 0; float: left; width: auto;}
.boardArea .boardCont .boardListTypeA .imgtype  li .imgListArea{border:0; padding: 0; cursor: pointer; width: 280px; height: 420px; margin: 0 9px;}
.boardArea .boardCont .boardListTypeA .imgtype  li .imgListArea .imgListImgBdr{width: 100%; height: 280px; padding: 0; margin: 0; border:1px solid #949494;}
.boardArea .boardCont .boardListTypeA .imgtype  li .imgListArea .imgListImgBdr .imgListImg{width: 100%; height: 100%; padding: 0; margin: 0;}
.boardArea .boardCont .boardListTypeA .imgtype  li .imgListArea .imgListTxt{width: 100%; height: 100px; padding: 0; margin: -1px 9px 0 0; border:1px solid #949494;}
.boardArea .boardCont .boardListTypeA .imgtype  li .imgListArea .imgListTxt .imgListTitle{width: auto; height: 40px; padding: 10px; margin: 0; font-size: 1.4em; text-align: left;}
.boardArea .boardCont .boardListTypeA .imgtype  li .imgListArea .imgListTxt .regDate{width: auto; height: 20px; padding: 10px; margin: 0; font-size: 1.2em; text-align: right; }


/*검색영역*/
.boardArea .boardCont .searchBox { border:1px solid #80caca; padding: 20px; margin-bottom: 20px; background: #f3fafa;}
.boardArea .boardCont .searchBox table{width: 100%; border: 0; border-collapse: collapse;}
.boardArea .boardCont .searchBox th{border:0px; padding:10px;}
.boardArea .boardCont .searchBox td {border:0px; padding:10px;}
.boardArea .boardCont .searchBox table select { padding:4px; height:30px; border:1px solid #d4d4d4; font-size: 1.2em;}
.boardArea .boardCont .searchBox table input { padding:4px; height:20px; border:1px solid #d4d4d4; font-size: 1.2em;}
.boardArea .boardCont .searchBox input, select, img { vertical-align: middle; }
.boardArea .boardCont .searchBox .cal1{ width: 100px; }
.boardArea .boardCont .searchBox .cal2{ width: 100px; }
.boardArea .boardCont .searchBox .searchSel{ width: 120px; margin-left: 20px;}
.boardArea .boardCont .searchBox .searchWord{ width: 100px; margin-left: 20px;}


.boardArea .boardCont .searchBox2 { border: 1px solid #c9c9c9; border-radius: 5px; padding: 20px; margin-bottom: 20px; }/*background: #fbfeff;*/
.boardArea .boardCont .searchBox2 table{width: 100%; border: 0; border-collapse: collapse;}
.boardArea .boardCont .searchBox2 th{border:0px; padding:10px;}
.boardArea .boardCont .searchBox2 td {border:0px; padding:10px;}
.boardArea .boardCont .searchBox2 table select { padding:4px; height:30px; border:1px solid #d4d4d4; font-size: 1.2em;}
.boardArea .boardCont .searchBox2 table input { padding:4px; height:20px; border:1px solid #d4d4d4; font-size: 1.2em;}
.boardArea .boardCont .searchBox2 input, select, img { vertical-align: middle; }
.boardArea .boardCont .searchBox2 .cal1{ width: 100px; }
.boardArea .boardCont .searchBox2 .cal2{ width: 100px; }
.boardArea .boardCont .searchBox2 .searchSel{ width: 120px; margin-left: 20px;}
.boardArea .boardCont .searchBox2 .searchWord{ width: 100px; margin-left: 20px;}



/* 게시판 상세 영역 */
.boardArea .boardCont .boardDtl { margin-top: 10px; }
.boardArea .boardCont .boardDtl .tit{ margin-bottom:10px; font-size:1.6em; color:#111; text-align: left; padding: 0 20px;}
.boardArea .boardCont .boardDtl .subject { padding:10px 10px 50px 20px; font-size:1.1em; background:#fbfaf8; border-top:3px solid #c7c5bd; border-bottom:1px solid #e6e6e6; text-align: left;}
.boardArea .boardCont .boardDtl .subject p{float: left; padding: 0; margin: 0; width: auto; line-height: 1.5em;}
.boardArea .boardCont .boardDtl .subject span { display:inline-block; margin-right:30px; color:#333; font-size:1em; }
.boardArea .boardCont .boardDtl .subject .oc1 { display:inline-block; color:#8080ff; margin-left: 5px;}
.boardArea .boardCont .boardDtl .subject .oc2 { display:inline-block; color:#ff8000; margin-left: 5px;}
.boardArea .boardCont .boardDtl .subject .oc3 { display:inline-block; color:#1aacb0; margin-left: 5px;}
.boardArea .boardCont .boardDtl .subject .oc4 { display:inline-block; color:#ff80c0; margin-left: 5px;}
.boardArea .boardCont .boardDtl .subject .oc5 { display:inline-block; color:#24A6BD; margin-left: 5px;}
.boardArea .boardCont .boardDtl .subject .oc6 { display:inline-block; color:#256c13; margin-left: 5px;}
.boardArea .boardCont .boardDtl .boardDesc { text-align: left; font-size:1.1em;}
.boardArea .boardCont .boardDtl .dtlcont { position:relative; padding:20px; font-size:1em; line-height:2em; text-align: left;}
.boardArea .boardCont .boardDtl .dtlcont a{ color: #47ade4; text-decoration: none;}
.boardArea .boardCont .boardDtl .dtlcont a:hover { color: #1875a7; }

.boardArea .boardCont .boardDtl .attcFile { text-align: left; }

.boardArea .boardCont .boardDtl .dtlcont .snsBox { text-align: right; margin-top: 20px;}
.boardArea .boardCont .boardDtl .dtlcont .snsBox ul li { float:right; margin-left:4px; }

.boardArea .boardCont .boardDtl .write { margin-top:30px; padding: 0 20px; background:#fbfaf8; border-bottom:1px solid #c2cfcf; border-top: 1px solid #c2cfcf; text-align: left;}
.boardArea .boardCont .boardDtl .write .txtBox {text-align: right; margin: 0; padding: 10px;}
.boardArea .boardCont .boardDtl .write .txtBox textarea { border:1px solid #e6e6e6; width: 100%;}
.boardArea .boardCont .boardDtl .write .warning {padding: 10px; color: #b55922;}
 
.boardArea .boardCont .boardDtl .reply {padding:5px 20px 20px 10px; background:#fbfaf8;}/* border-top: 1px solid #c2cfcf; */
.boardArea .boardCont .boardDtl .reply table{width: 100%;}
.boardArea .boardCont .boardDtl .reply tr:hover{background:#ffffea;}
.boardArea .boardCont .boardDtl .reply td {padding:8px 5px; border-bottom:1px solid #d2d8cf; vertical-align: top; line-height: 1.5em;}
.boardArea .boardCont .boardDtl .reply td.tal {text-align: left;}
.boardArea .boardCont .boardDtl .reply p {line-height: 1.6em; font-size:1em; padding: 0; margin: 0;}
.boardArea .boardCont .boardDtl .reply img {cursor: pointer;}

.boardArea .boardCont .boardDtl .btnBox a { display:inline-block; padding:7px 10px; background:#49505a; color:#fff; border-radius:3px }

.ifrmSizeBoardDtl{ height: 660px; }


/* 테이블 */
.tbl_01 {border-top:2px solid #c7c5bd; margin-bottom: 20px; font-size: 1.1em;}
.tbl_01 table{width: 98%; border: 0; border-collapse: collapse; margin: 0 1%;}
.tbl_01 table th { border-bottom: 1px solid #d4d4d4; padding:10px; background: #f4f4f4; font-weight: normal;}
.tbl_01 table td { border-bottom: 1px solid #d4d4d4; padding:10px; text-align: left;}
.tbl_01 table tbody tr:hover { background:#f9f9f9; }
.tbl_01 table td p{padding: 0; margin: 0;}
.tbl_01 table td a{text-decoration: none; font-weight: normal; color: #1875a7;}
.tbl_01 table td a:hover { color: #135e86; }
.tbl_01 table td input[type=text]{width: 99%; height: 30px;}
.tbl_01 table td input[type=checkbox] {width: 20px; height: 20px; vertical-align: sub;}
.tbl_01 table td textarea{width: 98%;}

/* 테이블 일반*/
.tbl_02 {border-top:2px solid #c7c5bd; margin-bottom: 20px;}
.tbl_02 table{width: 100%; border: 0; border-collapse: collapse;}
.tbl_02 table th { border-bottom: 1px solid #d4d4d4; padding:10px; background: #f4f4f4; font-weight: normal;}
.tbl_02 table th.tit{padding-left: 10% !important; text-align: left; font-weight: normal;}
.tbl_02 table td { border-bottom: 1px solid #d4d4d4; padding:10px; text-align: center; font-size: 1.1em;}
.tbl_02 table tbody tr:hover { background:#f9f9f9; }
.tbl_02 table td p{padding: 0; margin: 0;}
.tbl_02 table td a{text-decoration: none; font-weight: normal; color: #1875a7;}
.tbl_02 table td a:hover { color: #135e86; }
.tbl_02 table td.tit{padding-left: 15px; text-align: left;}


/* 테이블 FAQ*/
.tbl_03 {border-top:2px solid #c7c5bd; margin-bottom: 20px;}
.tbl_03 table{width: 100%; border: 0; border-collapse: collapse;}
.tbl_03 table th { border-bottom: 1px solid #d4d4d4; padding:10px; background: #f4f4f4; }
.tbl_03 table th.tit{padding-left: 15px; text-align: left;}
.tbl_03 table td { border-bottom: 1px solid #d4d4d4; padding:10px; text-align: center; font-size: 1.1em;}
.tbl_03 table tbody tr:hover { background:#f9f9f9; }
.tbl_03 table td p{padding: 0; margin: 0;}
.tbl_03 table td a{text-decoration: none; font-weight: normal; color: #1875a7;}
.tbl_03 table td a:hover { color: #135e86; }
.tbl_03 table td.tit{padding-left: 15px; text-align: left;}
.tbl_03 table td.faqCont{background-color: #fbfffb; padding: 20px; text-align: left; line-height: 2em;}
.tbl_03 table td.faqCont img{max-width: 100%; height: auto !important;}
.tbl_03 table td .openBtn {margin: 0; transition: all ease 0.5s;}
.tbl_03 table td .open {transform: rotate( 180deg );}


/* paging */
.paging  { text-align:center; margin:0;}
.paging li { display:inline-block; vertical-align: middle;}
.paging li a { display:inline-block; margin:0 3px 0 0; width:28px; height:28px; line-height:27px; font-size:13px; color:#747474; text-align:center; border:1px solid #ededed; background:#fff; vertical-align: middle;}
.paging li:hover a{ font-weight:bold;  color:#4171a7;  background:#f5f5f5; }
.paging li.on a{ font-weight:bold;  color:#4171a7;  background:#f5f5f5; }
.paging li.first a { width:30px; height:30px; margin:0; border:0; background:url('/web/images/paging/icon_paging_first.gif') no-repeat 0 0; text-indent:-999999px; }
.paging li.prev a { width:30px; height:30px; margin:0 20px 0 3px; border:0; background:url('/web/images/paging/icon_paging_prev.gif') no-repeat 0 0; text-indent:-999999px; }
.paging li.next a { width:30px; height:30px; margin:0 3px 0 17px; border:0;background:url('/web/images/paging/icon_paging_next.gif') no-repeat 0 0; text-indent:-999999px; }
.paging li.last a { width:30px; height:30px; margin:0; border:0;background:url('/web/images/paging/icon_paging_last.gif') no-repeat 0 0; text-indent:-999999px; }



/* 버튼 */
.btnArea_l{padding: 10px 0; margin: 0; text-align: left;}
.btnArea_c{padding: 10px 0; margin: 0; text-align: center;}
.btnArea_r{padding: 10px 0; margin: 0; text-align: right;}

.btn01 { display:inline-block; padding:5px 15px; background:#ffffff; color:#ff8000; border-radius:5px; border:1px solid #ff8000; cursor: pointer; font-size: 1.3em; font-weight : bold;}
.btn01:hover { text-transform:uppercase; background-color:#ff8000; color:#fff; border:1px solid #ff8000; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.btn01dk { display:inline-block; padding:5px 15px; background:#ff8000; color:#fff; border-radius:5px; border:1px solid #ff8000; cursor: pointer; font-size: 1.3em;}
.btn01dk:hover { text-transform:uppercase; background-color:transparent; color:#ff8000; border:1px solid #ff8000; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; font-weight : bold;}
.btn01s { display:inline-block; padding:5px 10px; background:#ffffff; color:#ff8000; border-radius:5px; border:1px solid #ff8000; cursor: pointer; font-size: 1em;}
.btn01s:hover { text-transform:uppercase; background-color:#ff8000; color:#fff; border:1px solid #ff8000; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

.btn02 { display:inline-block; padding:0 10px 2px 10px; background:#49505a; color:#fff; border-radius:3px; cursor: pointer; height: 30px; margin-left: 10px;}
.btn02:hover { text-transform:uppercase; background-color:transparent; background-color:#1aacb0; color:#fff; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}

.btn03 { display:inline-block; padding:5px 15px; background:#ffffff; color:#ff8000; border-radius:5px; border:1px solid #ff8000; cursor: pointer; font-size: 1.3em; font-weight : bold;}
.btn03:hover { text-transform:uppercase; background-color:#ff8000; color:#fff; border:1px solid #ff8000; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

.btn04 { display:inline-block; padding:5px 15px; background:#ffffff; color:#ff8000; border-radius:3px; border:2px solid #ff8000; cursor: pointer; height: 44px; font-size: 20px; font-weight: bold;}
.btn04:hover { text-transform:uppercase; background-color:transparent; color:#ff8000; border:2px solid #ff8000; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.btn05 { display:inline-block; padding:5px 15px; background:#ffffff; color:#ff8000; border-radius:3px; border:2px solid #ff8000; cursor: pointer; height: 44px; font-size: 20px; font-weight: bold;}
.btn05:hover { text-transform:uppercase; background-color:#ff8000; color:#ffffff; border:2px solid #ffffff; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.btn06 { display:inline-block; padding:5px 15px; background:#000000; color:#ffffff; border-radius:3px; border:2px solid #ffffff; cursor: pointer; height: 44px; font-size: 20px; font-weight: bold;}
.btn06:hover { text-transform:uppercase; background-color:#ffffff; color:#000000; border:2px solid #000000; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.btn07 { display:inline-block; padding:5px 15px; background:#ffffff; color:#000000; border-radius:3px; border:2px solid #000000; cursor: pointer; height: 44px; font-size: 20px; font-weight: bold;}
.btn07:hover { text-transform:uppercase; background-color:#000000; color:#ffffff; border:2px solid #ffffff; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.btn08 { padding:4px 10px; background:#49505a; color:#fff; border-radius:3px; cursor: pointer; height: 30px;}
.btn08:hover { text-transform:uppercase; background-color:transparent; background-color:#ff8000; color:#fff; border:1px solid #ff8000; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.btn_btm { display:inline-block; padding:1px 10px; background:#ffffff; color:#808080; border-radius:2px; border:1px solid #ff8000; cursor: pointer; width: 100px; font-size: 1em; font-weight: bold;}

.btnDel { display:inline-block; padding:5px 15px; background:#aa0000; color:#fff; border-radius:5px; border:1px solid #aa0000; cursor: pointer; font-size: 1.3em;}
.btnDel:hover { text-transform:uppercase; background-color:transparent; color:#aa0000; border:1px solid #aa0000; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; font-weight : bold;}
.btnImp { display:inline-block; padding:5px 15px; background:#d26900; color:#fff; border-radius:5px; border:1px solid #d26900; cursor: pointer; font-size: 1.3em;}
.btnImp:hover { text-transform:uppercase; background-color:transparent; color:#d26900; border:1px solid #d26900; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; font-weight : bold;}

.btnSel { display:inline-block; padding:5px 15px; background:#804040; color:#fff; border-radius:5px; border:1px solid #ab5858; cursor: pointer; font-size: 1.3em;}

/* .btnReg { display:inline-block; padding:5px 15px; background:#d26900; color:#fff; border-radius:1px; border:1px solid #d26900; cursor: pointer; font-size: 1em;} */
/* .btnReg:hover { text-transform:uppercase; background-color:transparent; color:#d26900; border:1px solid #d26900; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; font-weight : bold;} */

.btnReg { display:inline-block; padding:5px 15px; background:#ff8000; color:#fff; border-radius:1px; border:1px solid #ff8000; cursor: pointer; font-size: 1em; text-decoration: none;}
.btnReg:hover { text-transform:uppercase; background-color:transparent; color:#ff8000; border:1px solid #ff8000; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; font-weight : bold;}

		
.footer { clear: both;  padding: 10px; margin: 0 auto; border-top: 1px solid #959595; background-color: #555555; color: #fff; margin-top: -1px; position: relative; text-align: center;}
.footer p{ font-size: 1.1em; margin: 5px 0;}
.footer p a{ font-size: 1.2em; cursor: pointer; font-style: normal; color: #fff; text-decoration: none;}
.footer p img{ margin-right: 15px; vertical-align: middle;}
.footer p .cl1{ color: #b6cffe; font-size: 1.2em;}
.footer_cr2{background-color: #9C9E9D;}
.footer_cr2 p{ font-size: 1em;}


.loading {width:100%; height: 100%; margin:0; padding: 0; position: fixed; top: 0; background: none; z-index: 999; display: none;}
.loading .loadingDim {position: absolute; width: 100%; height: 100%; opacity: 0.7; background: rgb(0, 0, 0); z-index: 0;}
.loading .loadingBox {position: relative; width: 200px; padding: 0; margin: 300px auto;
	z-index: 1; color: #fff; text-align: center;
}

@media ( max-width: 1920px ) {
	.topLayerDim {background-size : auto;}
	.topLayer {background-size : auto;}
}


@media ( max-width: 1780px ) {
	
	.section8 { height: auto; margin: 0 auto;}
	.section8 .swrap{ width: 1200px; margin: 50px auto;}
	.section8 .menuAr{ width: 1200px; float: none; margin: 0 auto; clear: both; padding-left: 50px;}
	.section8 .mapAr { width: 400px; float: none; margin: 0 auto; clear: both; }
	
	.playStat {top: 0;}
	
}


@media ( max-width: 1440px ) {
/* 	.header {padding-bottom:40%; height: auto;} */
/* 	.headerBg {padding-bottom:40%; height: auto;} */
/* 	.headerDim {padding-bottom:40%; height: auto;} */
	.header .menuArea{display: none;}
	
	.header .hdBtnArea .userBtn{display: none;}
	.header .hdBtnArea .menuBtn{display: block;}
	
	.header .mainTitle{width: 500px; top: 250px;}
	.header .mainTitle p{font-size: 2.8em;}
	
	.topLayerDim{display: none;}
	.topLayer{display: none;}
	
	/* 
	@keyframes ani_mainTitle {
	  0%   {top: 250px; left: -50%;}
	  60%   {top: 250px; left: -50%;}
	  70%   {top: 250px; left: 15%;}
	  80%  {top: 250px; left: 15%;}
	  90% {top: 220px; left: 15%;}
	  95% {top: 250px; left: 15%;}
	  100% {top: 250px; left: 15%;}
	}
	 */
/* 
	@keyframes ani_mainTitle2 {
	  0%   {top: 250px; left: -50%;} 
	  10%   {top: 250px; left: -50%;}
	  20%   {top: 250px; left: 15%;} 
	  30%  {top: 250px; left: 15%;}  
	  40% {top: 220px; left: 15%;}   
	  45% {top: 250px; left: 15%;}   
	  100% {top: 250px; left: 15%;}  
	}
 */
	
	.slideBtnPrev{display: block;}
	.slideBtnNext{display: block;}
	
	.section1 .swrap{ width: 420px; margin: 0 auto; text-align: center;}
	.section1 .card{ margin: 15px 20px 30px 20px; padding: 20px; text-align: left; background: #fff;}
  
	.section2 { margin-top: 0; padding-top: 100px;}
	.section2 .swrap{ width: 500px; margin: auto; text-align: center;}
	.section2 .card{ width: 100%; float: none; height: auto; padding: 0;}
	.section2 .card img{ width: 100%;}
  
	.section3 {height: 600px; margin-top: 150px;}
	
	.section4 .swrap{ width: 422px;}
	.section4 .swrap .txt_b{ font-size: 4em;}
	.section4 .card{ margin: 10px auto; padding: 0; float: none; clear: both; height: auto;}
	.section4 .card .fl{padding-bottom: 50px;}
	.section4 .btnAr{ padding: 50px;}
	
	.section5 .swrap{ width: 422px;}
	.section5 .swrap .txt_b{ font-size: 4em;}
	.section5 .card{ margin: 10px auto; padding: 0; float: none; clear: both; height: auto;}
	.section5 .btnAr{ padding: 50px;}

	.section6 .swrap{ width: 500px; margin: auto; text-align: center;}
	.section6 .card{ width: 100%; float: none; height: auto; padding: 0;}
	.section6 .card img{ width: 100%;}
	
	.section7 { height: auto;}
	.section7 .swrap{ width: 500px; margin: auto; text-align: center;}
	.section7 .card{ width: 100%; float: none; height: auto; padding: 0;}
	.section7 .card img{ width: 100%;}
	
	.section8 .swrap{ width: auto; margin: 50px auto; padding-left: 80px;}
	.section8 .menuAr{ width: 100%; padding-left: 0;}
	
	.boardAera ul{margin: 10px auto; width: 700px;}
	.boardAera .reviews{width: 1100px;} 
	.boardArea .boardCont .searchBox {display: none;}
	.boardArea .boardCont .searchBox2 {display: none;}
	
}

@media ( max-width: 1280px ) {
  
  	.naviArea .naviCont{ width: 100%;}
  	.htmlArea .htmlCont{ width: 100%;}
  	.htmlArea .htmlCont img{ width: 100% !important; height: auto !important;}
	
	.htmlArea .memCont{ width: 100%;}
	.htmlArea .memCont .memberForm textarea{width: 80%; height: 200px;}
	.htmlArea .memCont .memberForm .tbl_02{width: 90%; margin: 0 auto;}


  	.boardArea .boardCont{ width: 100%;}  	
	.boardArea .boardCont .boardListTypeA li { width: 50%;}
	.boardArea .boardCont .boardListTypeA li .imgA {width:30%;}
	.boardArea .boardCont .boardListTypeA li .infoA {width:59%;}
	
	.boardAera .reviews{width: 900px;}
	.boardArea .boardCont .boardListTypeA li .infoA { width:50%;}
	.boardArea .boardCont .boardListTypeA .imgtype {width: 900px;}
	
	.ifrmSizeBoardDtl{ height: 500px; }
	.mbNone {display: none;}	
}

@media ( max-width: 1080px ) {
	
	.introMsg {top: 30%; font-size: 1.5em;}
	
	.section2 .introDesc{ width: 500px;}
	.section3 {height: 550px; margin-top: 130px;}
	.section3 .introDesc{ width: 500px;}
	
	.section8 .swrap{ padding-left: 0;}
	.section8 .menuAr{ display: none;}
	.section8 .mapAr { width: 340px; float: none; margin: 0 auto; clear: both; }
	
	
	.boardArea { min-height: 400px; }
	.boardAera .best{width: 100%;}
	.boardAera .reviews{width: 90%;}
	.boardArea .boardCont .boardList {width: 90%; margin: 0 auto;}
	.boardArea .boardCont .boardDtl {width: 90%; margin: 0 auto;}
	.boardArea .boardCont .boardEdit {width: 90%; margin: 0 auto;}
	.boardArea .boardCont .boardListTypeA .imgtype {width: 600px;}
	
	.ifrmSizeBoardDtl{ height: 395px; }
	
	.mypageTab {width: 100%;}
	.mypageTab div {width: auto; height: 29px;  float: left; margin-left: 0; text-align: center;
		border-left:1px solid rgb(54, 54, 54); border-top:1px solid rgb(54, 54, 54); border-right:1px solid rgb(54, 54, 54);
		font-size: 1.3em; padding: 10px 10px 0 10px;
	}
	mypageTab div.on {font-weight: normal;}
	.mypageTab div:first-child {margin-left: 0;}
}


@media ( max-width: 768px ) {

	.content { padding: 10px 0; clear: both;}
	
	.header {height: 600px;}
	.headerBg {height: 600px;}
	.headerDim {height: 600px;}
		
	.header .logoArea{width: 100%; text-align: center; position: relative; top: 15px; left: auto;}
	.header .logoArea img{width: 170px;}
	.header .searchArea{display: none;}
	.header .hdBtnArea{top: 25px;}
	.header .hdBtnArea .menuIcon{width: 20px;}
	.header .mainTitle{width: 100%; top: 40%; margin: 0 auto; left: 0; text-align: center;}
	.header .mainTitle p{font-size: 3em;}
	
	/* 
	@keyframes ani_mainTitle {
	  0%   {top: 40%; left: -100%;}
	  60%   {top: 40%; left: -100%;}
	  70%   {top: 40%; left: 0;}
	  80%  {top: 40%; left: 0;}
	  90% {top: 30%; left: 0;}
	  95% {top: 40%; left: 0;}
	  100% {top: 40%; left: 0;}
	}
	 */
/* 
	@keyframes ani_mainTitle2 {
	  0%   {top: 40%; left: -100%;}
	  10%   {top: 40%; left: -100%;}
	  20%   {top: 40%; left: 0;}
	  30%  {top: 40%; left: 0;}
	  40% {top: 30%; left: 0;}
	  45% {top: 40%; left: 0;}
	  100% {top: 40%; left: 0;}
	}
 */
 
 	.playStat {position: relative; top: -50px; width: 100%;}
 	
	.slideBtnPrev{font-size: 2.5em;}
	.slideBtnNext{font-size: 2.5em;}

	.section1 .swrap{ margin: 0 auto; text-align: center;}
	.section1 .card{ margin: 30px auto; text-align: left; background: #fff; float: none;}
	.section1 .cardWrap:hover .card{cursor: pointer; transition-duration: 300ms; margin-top: 0px;}
	
	.section2 .introDesc{ width: 90%; margin: 0 auto; text-align: center; padding: 10px;}
	.section2 .introDesc .txt_b{ font-size: 3.5em; font-weight: bold;}
	.section2 .introDesc .txt_m{ font-size: 1.8em;}
	.section2 .introDesc .txt_s{ display: none;}
	
	.section2 .swrap{ width: 95%;}
	.section2 .card .txt_m{ font-size: 1.6em; margin-top: 50px;}
	.section2 .card .txt_s{ font-size: 1.1em;}	
	
	.section3 {height: 500px; margin-top: 100px;}
	.section3 .introDesc{ width: 90%; padding: 10px;}
	.section3 .introDesc .txt_b{ font-size: 3.3em;}
	.section3 .introDesc .txt_m{ font-size: 1.8em;}
	.section3 .introDesc .txt_s{ font-size: 1.2em; display: none;}
	
	.section4 .swrap{ width: 80%; margin: 0 auto;}
	.section4 .card{ width: 100%; float: none; margin: 0 auto; padding: 0;}
	.section4 .card .fl{padding-bottom: 30px;}
	
	.section5 .swrap{ width: 80%; margin: 0 auto;}
	.section5 .card{ width: 100%; float: none; margin: 0 auto; padding: 0;}
	
	.section6 .swrap{ width: 95%;}
	.section6 .card .txt_m{ font-size: 1.6em; margin-top: 50px;}
	.section6 .card .txt_s{ font-size: 1.1em;}
	
	.section7 .swrap{ width: 420px;}
	.section7 .card .txt_m{ font-size: 1.6em; margin-top: 50px;}
	.section7 .card .txt_s{ font-size: 1.1em;}
	
	
	.section8 { margin: -10px auto; padding: 10px 0;}
	.section8 .mapAr .txt_s{ font-size: 1em; padding: 0 10px;}

	.mbHide01{display: none;}
	
	.boardAera{margin-top: 50px;}
	.boardAera ul{margin: 10px auto; width: 350px;}
	.boardAera .notice{width: 90%; padding: 0; float: none; margin: 0 auto;}
	.boardAera .reviews{width: 90%; padding: 0; float: none; margin: 0 auto;}
	
	.boardArea .boardCont .boardListTypeA ul { width: 96%; padding: 0; margin: 10px auto;}
	.boardArea .boardCont .boardListTypeA li { width: 100%;}
	.boardArea .boardCont .boardListTypeA li .imgA {width:30%; }
	.boardArea .boardCont .boardListTypeA li .infoA {width:65%; padding: 0;}
	.boardArea .boardCont .boardListTypeA li .infoA p{padding: 0; margin: 0;}
	.boardArea .boardCont .boardListTypeA .imgtype {width: 300px;}
	
	.boardArea .boardCont .boardList {width: 95%;}
	.boardArea .boardCont .boardDtl {width: 95%;}
	.boardArea .boardCont .boardEdit {width: 95%;}
	
	.boardArea .boardCont .boardDtl .subject { padding:10px 20px 70px 20px;}
	.boardArea .boardCont .boardDtl .subject p{width: 50%;}
	.boardArea .boardCont .boardDtl .attcFile img{width: 100%;}
	
	.boardArea .boardCont .searchBox{display: none;}

	
	.ifrmSizeBoardDtl{ height: 300px; }

	
	.PC{display: none;}
	.MB{display: block;}
	.PC2{display: none;}
	.MB2{display: block;}
	

	.footer { padding: 5px 10px 20px 10px;}
	.footer_cr2 { padding: 10px;}
	
	.popup_login{width: auto !important;}
	.popup_find{width: auto !important;}
	.popup_noti{width: auto !important;}
	
	.notiBox {min-height: 300px;}
	
}

@media ( max-width: 480px ) {

	.header .logoArea img{width: 150px;}
/* 	.header .mainTitle{width: 150px; left: 25%;} */
	.header .mainTitle p{font-size: 1.8em;}
	
	.section1 .swrap{ width: 300px; margin: 0 auto; text-align: center; position: relative;}
	.section1 .cardWrap{float: none;}
	.section1 .card{ margin: 10px auto; padding: 5px; text-align: left; background: #fff; position: relative;}
	.section1 .cardWrap:hover .card{cursor: pointer; transition-duration: 0ms; margin-top: 10px;}
	
	.section1 .swrap .first{ height: 190px;}
	.section1 .card{ width: 270px; height: 230px; margin: 10px auto;}
	.section1 .card .tit{ font-size: 1.4em; padding: 10px 20px;}
	.section1 .card .cont{ font-size: 1em; padding: 0 20px; margin-top: 0;}
	.section1 .card .info{ padding: 3px; height: 115px;}
	.section1 .card .info .fl1{ width: 100%; font-size: 1.5em; letter-spacing: 10px; margin: 3px auto; padding-left: 7px;}
	.section1 .card .info .fl2{ width: 25%;}
	.section1 .card .info .fl2 .time{ font-size: 2.5em;}
	.section1 .card .info .fl2 .p2{ font-size: 1em;}
	.section1 .card .imgAr{ position: absolute; width: 270px; height: 230px; z-index: 1;}
	.section1 .card .imgAr img{ width: 270px; height: 230px; overflow: hidden;}
	.section1 .card .txtAr{ position: absolute; width: 250px; height: 210px; z-index: 3; margin: 0; padding: 10px; color: #fff; overflow: hidden;}
	.section1 .card .cardDim {position: absolute; z-index: 2; width: 270px; height: 230px; background: #000; opacity: 0.3; display: block;}
	
	.section2 .introDesc .btnArea .btn{ font-size: 1.4em;}
	.section2 .card .txt_s img{ width: 150px;}
	
	.section3 .introDesc .txt_b{ font-size: 3.1em;}
	.section3 .introDesc .txt_m{ font-size: 1.8em;}
	.section3 .introDesc .btnArea .btn{ font-size: 1.4em;}

	.section4 .card{margin: 50px auto 0 auto;}
	
	.section5 .card{margin: 50px auto 0 auto;}
	.section5 .btnAr .btn{ font-size: 1.4em;}
	
/* 	.section4 .swrap{ width: 320px; margin: 0 auto;} */
/* 	.section4 .swrap .txt_b{ font-size: 2.8em;} */
/* 	.section4 .card{ width: 300px; height: 464px;} */
	
/* 	.section5 .swrap{ width: 320px; margin: 0 auto;} */
/* 	.section5 .swrap .txt_b{ font-size: 2.8em;} */
/* 	.section5 .card{ width: 300px; height: 464px;} */
	
/* 	.section6 .swrap{ width: 300px;} */
	.section6 .card .txt_s img{ width: 150px;}
	
	.section7 .swrap{ width: 300px;}
	.section7 .card .txt_s img{ width: 150px;}
	.section7 .card img{ border: none;}
	
	.boardArea .boardCont .boardListTypeA li .imgA {height: 100px; }
	.boardArea .boardCont .boardListTypeA li .infoA {width:63%; height: 100px;}
	.boardArea .boardCont .boardListTypeA li .infoA .etcA { font-size: 1em;}
	.boardArea .boardCont .boardListTypeA li .infoA .titA { font-size: 1.2em;}
	.boardArea .boardCont .boardListTypeA li .infoA .descA { font-size: 1em;}
	.boardArea .boardCont .boardListTypeA li .infoA .mbdpn { display: none;}
	
	
	.ifrmSizeBoardDtl{ height: 200px; }
	
	.cmmBox {width: 80%;}
	.cmmBox .inp input[type=text] {width: 80%;}
	.cmmBox .inp input[type=password] {width: 80%;}
	.cmmBox .inp input[type=tel] {width: 80%;}
	.cmmBox .inp select { width: 94%;}
	
	.PC3{display: none;}
	
	.mypageTab div {font-size: 1.2em; padding: 10px 8px 0 8px;}
	
}


@media ( max-width: 360px ) {
	
	.playStat {top: -80px;}
	
	.section8 { height: 0; margin: -15px 0; background: none;}
	.section8 .mapAr{ display: none;}
	
	.boardArea .boardCont .boardListTypeA li .imgA {height: 90px; }
	.boardArea .boardCont .boardListTypeA li .infoA {width:62%; height: 90px;}
	
	.boardAera ul{margin: 10px auto; width: 300px;}
	.boardAera ul li .bestArea{border:0; padding: 0; cursor: pointer; width: 300px; height: auto; margin: 10px auto;}
	.boardAera ul li .bestArea .bestImgBdr{width: 280px; height: auto; padding: 0; margin: 0 9px; border:1px solid #949494;}
	.boardAera ul li .bestArea .bestImgBdr .bestImg{width: 100%; height: auto; padding: 0; margin: 0;}
	.boardAera ul li .bestArea .bestTxt{width: 280px; height: 100px; padding: 0; margin: 0 9px; border:1px solid #949494;}
	.boardAera ul li .bestArea .bestTxt .bestTitle{width: 260px; height: 60px; padding: 10px; margin: 0; font-size: 1.2em;}
	.boardAera ul li .bestArea .bestTxt .regDate{width: 260px; height: 20px; padding: 0 10px; margin: 0; font-size: 1.1em; text-align: right; }
}