@charset "utf-8";

@font-face { font-family: 'Chosunilbo_myungjo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Cafe24Simplehae'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Simplehae.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'S-CoreDream-1Thin'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'S-CoreDream-3Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'S-CoreDream-4Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'S-CoreDream-5Medium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: normal; font-style: normal; }

body{margin: 0;}

.font1{font-family: 'Chosunilbo_myungjo';}
.font2{font-family: 'S-CoreDream-4Regular';}
.font3{font-family: 'Cafe24Simplehae';}

/* .introDim {width:100%; height: 100%; margin:0; padding : 0; position: fixed; z-index: 999; background: #000; opacity: 1; display: none;} */
/* .introMsg {width: 100%; position: fixed; top: 30%; text-align: center; color: #fff; z-index: 1000; font-size: 4em;} */
/* .introMsg img{display: none;} */
/* .introMsg p{display: none;} */

.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;}

/* .introDim {width:100%; height: 100%; margin:0; padding : 0; position: fixed; z-index: 999; background: url('/static-root/common/css/new/sample/introBg.jpg') no-repeat center/cover; opacity: 1;} */
/* .introMsg {width: 100%; position: fixed; top: 30%; 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: 12px; font-family: 'Chosunilbo_myungjo';}


.header {color: #fff; width:100%; margin:0 auto; height: 800px; position: relative; z-index: 1;}
.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: 90px; margin: 0; position: fixed; z-index: 50; background: #fff; top: 0;}
.topLayerDim .top_logoArea{width: 170px; height: 100px; position: absolute; top: 28px; 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; font-family: 'Chosunilbo_myungjo'; 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; font-family: 'S-CoreDream-4Regular';}
.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: 60px; height: 100px; position: absolute; top: 30px; 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_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: 250px; margin: 0; position: fixed; z-index: 50; background: #fff; top: 90px; border-top: 1px solid #999999; border-bottom: 2px solid #999999;}/*display: none;*/
.topLayer .allMenu{ width: 1600px; margin: 0 auto; padding-top: 10px; 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;} */


.header .logoArea{width: 170px; height: 100px; position: absolute; top: 28px; left: 50px;}
.header .logoArea img{width: 100%; cursor: pointer;}
.header .searchArea{width: 200px; height: 100px; position: absolute; top: 26px; left: 300px;}
.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; font-family: 'Chosunilbo_myungjo'; 
	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; font-family: 'S-CoreDream-4Regular'; }
.header .menuArea .menu{font-size: 1.5em; 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;}
.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; }
/* 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: #000;  position: absolute; z-index: 4; right: 5px; bottom: 110px; width: 90px; text-align: right;}
.playStat #playBtn{width: 30px; height: 30px; cursor: pointer; margin-right: 5px;}
.playStat #prevBtn{width: 13px; height: 30px; cursor: pointer; margin-right: 5px;}
.playStat #nextBtn{width: 13px; height: 30px; cursor: pointer; margin-right: 10px;}

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

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

.section1 { width: 100%; position: relative; marginp: 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; font-family: 'S-CoreDream-4Regular';}
.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; font-family: 'S-CoreDream-4Regular';}
.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; font-family: 'Cafe24Simplehae';}
.section2 .introDesc .txt_m{ font-size: 2.5em; letter-spacing: 0; margin-top: 20px; line-height: 1.5em; font-family: 'S-CoreDream-4Regular';}
.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; font-family: 'Cafe24Simplehae';}
.section2 .introDesc .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; font-family: 'Cafe24Simplehae';}
.section3 .introDesc .txt_m{ font-size: 2.5em; letter-spacing: 0; margin-top: 20px; margin-bottom: 20px; line-height: 1.5em; font-family: 'S-CoreDream-1Thin';}
.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; font-family: 'Cafe24Simplehae';}
.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: 100px; clear: both;}
.section4 .swrap{ width: 1400px; margin: 0 auto; text-align: center;}
.section4 .swrap .txt_b{ font-size: 6em; font-weight: normal; font-family: 'Cafe24Simplehae';}
.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-family: 'S-CoreDream-4Regular'; font-weight: bold; transition-duration: 100ms;}
.section4 .card .fl .txt_m{ height: 20px; font-size: 1.25em; font-family: 'S-CoreDream-5Medium'; transition-duration: 100ms;}
.section4 .card .fl .txt_s{ height: 16px; font-size: 1.15em; font-family: 'Chosunilbo_myungjo'; 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; font-family: 'S-CoreDream-3Light';}
.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; font-family: 'Cafe24Simplehae';}
.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; font-family: 'Cafe24Simplehae';}
.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; font-family: 'S-CoreDream-4Regular'; padding: 0 20px; }
.section5 .card .txtArea .tit2{ font-size: 1.7em; line-height: 1.5em; font-family: 'S-CoreDream-4Regular'; padding: 0 20px; margin-top: 5px;}
.section5 .card .txtArea .cont{ font-size: 1.1em; line-height: 1.5em; font-family: 'Chosunilbo_myungjo'; 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-family: 'S-CoreDream-3Light'; 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; font-family: 'Cafe24Simplehae';}
.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: 700px; 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; font-family: 'S-CoreDream-4Regular';}
.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; font-family: 'S-CoreDream-1Thin';}
.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; font-family: 'S-CoreDream-3Light';}
.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; font-family: 'S-CoreDream-1Thin';}
.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: 15; font-family: 'S-CoreDream-3Light';}
.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;}


.htmlArea { width: 100%; position: relative; margin-top: 50px; clear: both; padding: 0; min-height: 800px; background: none; font-family: 'S-CoreDream-3Light';}
.htmlArea .sectionBg {width:100%; margin:0; height: 100%; position: absolute; z-index: -2;}
.htmlArea .htmlCont{ width: 1220px; margin: 10px auto; text-align: center; padding: 0;}

.htmlArea .memCont{ width: 1220px; margin: 10px auto; text-align: center; padding: 0;}
.htmlArea .memCont .memberForm{ width: 100%; }
.htmlArea .memCont .memberForm textarea{width: 1000px; height: 200px;}
.htmlArea .memCont .memberForm .tbl_02 {border-top:3px solid #c7c5bd; margin-bottom: 20px; padding: 0;}
.htmlArea .memCont .memberForm .tbl_02 table{width: 98%; border: 0; border-collapse: collapse; margin: 1%;}
.htmlArea .memCont .memberForm .tbl_02 th { background: #f4f4f4; padding:10px 5px; border-bottom:1px solid #ebebeb; border-right:1px solid #ebebeb;}
.htmlArea .memCont .memberForm .tbl_02 th:last-child { border-right:0; }
.htmlArea .memCont .memberForm .tbl_02 td:last-child { border-right:0; }
.htmlArea .memCont .memberForm .tbl_02 td { padding:8px 10px; border-bottom:1px solid #ebebeb; border-right:1px solid #ebebeb; text-align: left; line-height: 1.5em;}
.htmlArea .memCont .memberForm .tbl_02 tbody tr:hover { background:#f9f9f9; }
.htmlArea .memCont .memberForm .tbl_02 input { padding:4px; height:1.4em; border:1px solid #e6e6e6; font-size: 1.2em;}
.htmlArea .memCont .memberForm .tbl_02 select { height:30px; border:1px solid #e6e6e6; font-size: 1.2em;}
.htmlArea .memCont .memberForm .tbl_02 textarea { margin-left:10px; padding:4px; border:1px solid #e6e6e6; font-size: 1.2em;}
.htmlArea .memCont .memberForm .tbl_02 td input, select, img, button { vertical-align: middle; }
.htmlArea .memCont .memberForm .tbl_02 td input[type=text]{width: 120px; height: 20px;}
.htmlArea .memCont .memberForm .tbl_02 td input[type=password]{width: 120px; height: 20px;}

/* .htmlArea .sectionDim {width:100%; margin:0; height: 100%; position: absolute; z-index: -1; background: #000; opacity: 0.6;} */

/* 게시판 영역 */
.boardArea { width: 100%; position: relative; margin-top: 30px; clear: both; padding: 0; min-height: 800px; background: none; font-family: 'S-CoreDream-3Light';}
.boardArea .sectionBg {width:100%; margin:0; height: 100%; position: absolute; z-index: -2;}
.boardArea .boardCont{ width: 1220px; margin: 10px auto; text-align: center; padding: 0;}
.boardArea .boardCont ul {list-style: none;}
.boardArea .boardCont .pipe {margin-left: 10px;}


.boardArea .boardCont .total{text-align: left; border-bottom: 2px solid #c7c7c7; padding: 10px; font-size: 1.2em;}
.boardArea .boardCont .boardListTypeA { width:100%; overflow:hidden; margin-bottom:20px; border-top:3px solid #c7c5bd; border-bottom:3px solid #e6e6e6;  color: #595959;}
.boardArea .boardCont .boardListTypeA ul {width: 100%;}
.boardArea .boardCont .boardListTypeA li { width: 50%; border-bottom:1px solid #e6e6e6; float: left; padding:15px 0; cursor: pointer; position: relative;}
.boardArea .boardCont .boardListTypeA li:hover {background:#f4fffa; }
.boardArea .boardCont .boardListTypeA li .imgA {width:180px; height:130px; float: left;}
.boardArea .boardCont .boardListTypeA li .imgA > img{width:100%; height:100%; }
.boardArea .boardCont .boardListTypeA li .infoA {margin-left:20px; width:380px; height: 130px; overflow: hidden; float: left; text-align: left; padding-right: 20px;}
.boardArea .boardCont .boardListTypeA li .infoA p{margin: 0; padding: 0;}
.boardArea .boardCont .boardListTypeA li .infoA .etcA { font-size: 1em;  line-height: 1.8em; }
.boardArea .boardCont .boardListTypeA li .infoA .titA { font-size: 1.6em; font-weight: bold; line-height: 1.8em; }
.boardArea .boardCont .boardListTypeA li .infoA .descA { font-size: 1.1em; line-height: 1.6em; }
.boardArea .boardCont .boardListTypeA li .infoA .oc1 { display:inline-block; color:#8080ff; margin-right: 5px;}
.boardArea .boardCont .boardListTypeA li .infoA .oc2 { display:inline-block; color:#ff8000; margin-right: 5px;}
.boardArea .boardCont .boardListTypeA li .infoA .oc3 { display:inline-block; color:#1aacb0; margin-right: 5px;}
.boardArea .boardCont .boardListTypeA li .infoA .oc4 { display:inline-block; color:#ff80c0; margin-right: 5px;}
.boardArea .boardCont .boardListTypeA li .infoA .oc5 { display:inline-block; color:#20c191; margin-right: 5px;}
.boardArea .boardCont .boardListTypeA li .infoA .oc6 { display:inline-block; color:#256c13; margin-right: 5px;}
.boardArea .boardCont .boardListTypeA .noTxt{text-align: center; height: 150px; font-size: 2em; line-height: 4em;}


/*검색영역*/
.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 .boardDtl { margin-top: 10px; }
.boardArea .boardCont .boardDtl .title{ margin-bottom:10px; font-size:1.6em; color:#111; text-align: left; padding: 0 20px;}
.boardArea .boardCont .boardDtl .subject { padding:10px 20px 30px 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 .cont { position:relative; padding:20px; font-size:1em; line-height:2em; text-align: left;}
.boardArea .boardCont .boardDtl .cont a{ color: #47ade4; text-decoration: none;}
.boardArea .boardCont .boardDtl .cont a:hover { color: #1875a7; }

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

.boardArea .boardCont .boardDtl .cont .snsBox { text-align: right; margin-top: 20px;}
.boardArea .boardCont .boardDtl .cont .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 .idBox { line-height: 1.1em; margin: 0; padding: 0;}
.boardArea .boardCont .boardDtl .write .idBox .tit { float: left; }
.boardArea .boardCont .boardDtl .write .idBox .regBtn { float: right; }
.boardArea .boardCont .boardDtl .write .idBox .regBtn a{vertical-align: middle; margin-top: 10px; text-decoration: none; font-weight: normal;}
.boardArea .boardCont .boardDtl .write .txtBox {text-align: right; margin: 0; padding: 0;}
.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 }


/* 테이블 */
.tbl_01 {border-top:3px solid #c7c5bd; margin-bottom: 20px;}
.tbl_01 table{width: 98%; border: 0; border-collapse: collapse; margin: 1%;}
.tbl_01 table th { border-bottom: 1px solid #d4d4d4; padding:10px; background: #f4f4f4; }
.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: 100%; height: 30px;}
.tbl_01 table td textarea{width: 100%;}


/* paging */
.paging  { text-align:center; margin:0;}
.paging li { display:inline-block;}
.paging li a { display:inline-block; margin:0 3px 0 0; width:28px; height:28px; line-height:2em; font-size:1.1em; color:#747474; text-align:center; border:1px solid #ededed; background:#fff; text-decoration: none;}
.paging li:hover a{ font-weight:bold;  color:#4171a7;  background:#f5f5f5; }
.paging li.active a{ font-weight:bold;  color:#4171a7;  background:#f5f5f5; }
.paging li.first a { width:30px; height:30px; margin:0; border:0; background:url('/static-root/images/common/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('/static-root/images/common/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('/static-root/images/common/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('/static-root/images/common/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:#5fafaf; border-radius:5px; border:1px solid #5fafaf; cursor: pointer; font-size: 1.3em; font-weight : bold;}
.btn01:hover { text-transform:uppercase; background-color:#5fafaf; color:#fff; border:1px solid #5fafaf; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.btn01dk { display:inline-block; padding:5px 15px; background:#5fafaf; color:#fff; border-radius:5px; border:1px solid #5fafaf; cursor: pointer; font-size: 1.3em;}
.btn01dk:hover { text-transform:uppercase; background-color:transparent; color:#5fafaf; border:1px solid #5fafaf; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; font-weight : bold;}
.btn01s { display:inline-block; padding:5px 15px; background:#ffffff; color:#5fafaf; border-radius:5px; border:1px solid #5fafaf; cursor: pointer; font-size: 1em;}
.btn01s:hover { text-transform:uppercase; background-color:#5fafaf; color:#fff; border:1px solid #5fafaf; -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; }

.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:#5fafaf; color:#fff; border-radius:1px; border:1px solid #5fafaf; cursor: pointer; font-size: 1em;}
.btnReg:hover { text-transform:uppercase; background-color:transparent; color:#5fafaf; border:1px solid #5fafaf; -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; font-family: 'S-CoreDream-1Thin'; line-height: 0em;}
.footer p img{ margin-right: 15px; vertical-align: middle;}
.footer_cr2{background-color: #9C9E9D;}
.footer_cr2 p{ font-size: 1em;}


@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; }
	
}


@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;}
  
	.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;}
	
}

@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%;}
	
}

@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: 375px; float: none; margin: 0 auto; clear: both; }
}


@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; bottom: -5px; width: 100%;}
 	
	.slideBtnPrev{font-size: 3em;}
	.slideBtnNext{font-size: 3em;}

	.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;}
	
	.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: 420px;}
	.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: 1.1em; padding: 0 10px;}

	.mbHide01{display: none;}
	
	.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 .searchBox{display: none;}
	
	.boardArea .boardCont .boardDtl .subject { padding:10px 20px 70px 20px;}
	.boardArea .boardCont .boardDtl .subject p{width: 50%;}
	.boardArea .boardCont .boardDtl .attcFile img{width: 100%;}
	

	.footer { padding: 5px 10px 20px 10px;}
	.footer_cr2 { padding: 10px;}
	
	.popup_login{widows: auto !important;}
	.popup_find{widows: auto !important;}
	
}

@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;}
	
	.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;}
	
}


@media ( max-width: 360px ) {
	
	.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;}
}

#fileArea p{position: relative;}
.rotate{ display: inline-block; padding: 0; width: 20px; height: 20px; border: none; margin-left: 5px; cursor: pointer;
	background-image: url("../../../images/common/btn/rotate.png"); background-size: 100%; background-position: center; background-repeat: no-repeat;
}
.rotate0 {position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); transform-origin: center center;}
.rotate1 {position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center center;}
.rotate2 {position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); transform-origin: center center;}
.rotate3 {position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%) rotate(270deg); transform-origin: center center;}