/* Common **********************************************************************/
*{margin: 0;padding: 0; text-decoration: none; list-style: none; box-sizing: border-box; -webkit-text-size-adjust: none; font-family: 'Noto Sans KR', 'Nanum Gothic', 'NanumGothic', sans-serif; box-sizing: border-box;}
a{color: #333; }
h1, h2, h3, h4, h5, h6{border: none;}
button{background: none; border: none;}
img{border: none;}
body{font-size: 15px;}
select{padding-left: 10px; border: 1px solid #a8a8a8;}
input{border: 1px solid #a8a8a8; }
input, select option, textarea{font-size: 12px; color: #333;}
input[type=password] {font-size: 12px; color: #333; font-family: 'dotum';}
.clear::after{content: " "; display: block; clear: both;}
input::-webkit-input-placeholder {color:#ccc;}
input:-moz-placeholder {color:#ccc; opacity:1;}
input::-moz-placeholder {color:#ccc; opacity:1;}
input:-ms-input-placeholder {color:#ccc;}
input:placeholder-shown {color:#ccc;}
table{border-collapse: collapse;}
input{border:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; vertical-align:middle;}
input[type=email], input[type=text], input[type=password], input[type=tel], input[type=file], select, textarea {margin:0; padding:0; border: 1px solid #ddd; font-family:'Nanum Gothic'; font-size:inherit; resize:none; vertical-align:middle; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; height:26px; padding:0 4px; line-height:24px;}
select{height:26px; line-height:24px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
input, img{vertical-align:middle;}
input[type=file]{border:0; padding:0;}
input[type=button], input[type=submit], button{padding:0; color:inherit; font-family:'Nanum Gothic'; border:0; background:none; vertical-align:middle; cursor:pointer; font-weight:inherit; font-size:inherit; line-height:1.1;}
label{font-family:'Nanum Gothic';}
textarea{width:100%; height:100px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:4px; line-height:1.3;}
.hidden, .hide{display:none;}


/* 컨텐츠 스타일 *************************************************************/
body{background: #000;}
#wrap{width: 100%; }
.inner{width: 90%; margin: 0 auto;}

.subContainer{padding-bottom: 50px;}

/* showAni */
.scrollAni .sObj,
.showAni .sObj{opacity: 0; position: relative; top: 50px;}

/*
 *  레이아웃
 */
#fullPageMenu{position: fixed; z-index: 9; left: 0; top: 50%; transform: translateY(-50%);}
#fullPageMenu li{padding-left: 42px;}
#fullPageMenu li a{display: block; width: 5px; height: 5px; border-radius: 50%; background: #fff; overflow: hidden; color: #fff; font-size: 0; margin: 10px 0; opacity: .2; transition: all .3s;}
#fullPageMenu li:hover a,
#fullPageMenu li.active a{ opacity: 1;}

/*header*/
#header{width: 100%; position: fixed;  z-index: 999; padding: 60px 0;}
#header .inner{display: flex; align-items: center; justify-content: space-between;}
#header .logo img{height: 58px;}
#header .gnb{display: inline-block;}
#header .gnb li{display: inline-block; vertical-align: middle;}
#header .gnb li + li{margin-left: 30px;}
#header .gnb li a{color: #fff; font-size: 18px; font-weight: 300;}

.sideTxt{color: #fff; font-size: 12px;}
.sideTxt .txt{transform: rotate(90deg);  position: fixed; z-index: 9; right: 30px; top: 20%; z-index: 9;  text-transform: uppercase; letter-spacing: 1px;}
.sideTxt .scrollBtn{transform: rotate(90deg); text-transform: uppercase; position: fixed;  z-index: 9; right: 30px; bottom: 10%; color: #fff;}
.sideTxt .scrollBtn::after{content: ""; display: inline-block; width: 15px; height: 18px; background: no-repeat center center/contain; background-image: url("data:image/svg+xml,%3Csvg width='24' fill='%23fff' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M11 21.883l-6.235-7.527-.765.644 7.521 9 7.479-9-.764-.645-6.236 7.529v-21.884h-1v21.883z'/%3E%3C/svg%3E"); transform: rotate(-90deg); vertical-align: middle; margin-left: 10px;}

#navBtn{position: fixed; z-index: 9999; right: 58px; top: 58px; display: inline-block; width: 50px; height: 30px; cursor: pointer; display: none;}
#navBtn .line{width: 100%; height: 1px; background: #fff; position: absolute; left: 0; transition: all .3s;}
#navBtn .line.line01{top: 0;}
#navBtn .line.line02{top: 50%;}
#navBtn .line.line03{top: 100%;}
#navBtn.on{height: 36px; z-index: 999;}
#navBtn.on .line{background: #000;}
#navBtn.on .line01{transform-origin: left top; transform: rotate(45deg);}
#navBtn.on .line02{display: none;}
#navBtn.on .line03{transform-origin: left bottom; transform: rotate(-45deg);}

/*hide_gnb*/
#gnb{display: none; position: fixed; top: 0; right: -100%; z-index: 99; width: 100%; height: 100%; background: #fff; transition: all .3s;}
#gnb .list_nav{font-size: 60px; font-weight: 800; position: absolute; width: 100%; top: 50%; transform: translateY(-50%); left: 0; text-align: center;}
#gnb .list_nav li + li{margin-top: 20px;}
#gnb .list_nav li a{color: #000; position: relative;}
#gnb .list_nav li a::after{content: ""; display: block; height: 20px; width: 0%; background: #ffe057; position: absolute; bottom: 10px; left: 0; z-index: -1; transition: all .5s;}
#gnb .list_nav li a:hover::after{width: 100%;}

#gnb.on{right: 0;}

/*footer*/
#footer{width: 100%; min-height: 100px; padding: 16px 0;  background: #131314;}
#footer.sub{margin-top: 200px;}
#footer .footer_logo{display: inline-block; width: 174px; float: left; padding-top: 5px;}
#footer .footer_logo img{width: 100%;} 
#footer .footer_txt{float: left; font-size: 13px; line-height: 22px; margin-left: 30px;}
#footer .footer_txt p span{white-space: pre-line; word-break: keep-all; color: #eaeaea; font-weight: 400; line-height: 20px;}
#footer .footer_txt p span::after{content: "|"; margin: 0 5px;}
#footer .footer_txt p span:last-child::after{display: none;}
#footer .footer_txt .copyright{color: #7b7a7a;}
#footer .footer_txt .admin{margin-left: 20px; margin-top: 5px; display: inline-block; color: #ccc; background: #333; font-weight: 400; padding: 1px 10px;}

/*
 * video bg
 */
.video-bg-use{position: relative; height: 100%; width: 100%; overflow: hidden;}
.video-bg-use .video-bg{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; width: 100%; 
/* height: 100%; */
padding-top: 56.5%; overflow: hidden;
}
.video-bg-use .video-bg iframe{width: 100% !important; height: 100%; position: absolute; top: 0; left: 0;}
.video-bg-use .video-bg::before{content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.2);}
.video-bg-use .video-con{position: absolute; top: 0; left: 0;  height: 100%; width: 100%;}



/* 
 * main 
 */
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{opacity: 0}

.mainBox{height: 100vh; position: relative;}
.mainBox .bg{min-height: 100vh; background: no-repeat center center/cover;}
.mainBox .mainVisualLogo{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9;}
.mainBox h2{color: #fff; text-align: center; font-size: 40px; font-weight: 500; position: relative; margin-bottom: 10px;}
.mainBox h2::after{content: ""; display: block; width: 100%; height: 1px; background: #fff; position: absolute; top: 50%; left: 0;}

.title1{font-size: 60px; font-weight: 700; line-height: 1;}
.title2{font-size: 30px; font-weight: 700; line-height: 1;}

.mainBox .titleArea{height: 100vh; float: left; color: #fff; position: relative;}
.mainBox .titleArea .txt{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

/* mainVisual */
#mainVisual{width: 100%; height: 100%;}
#mainVisual .controller{position: absolute; bottom: 10%; left: 0%; width: 100%; color: #fff}
#mainVisual .controller .inner{position: relative;}
#mainVisual .controller .btn{display: inline-block; position: relative; width: 130px;}
#mainVisual .controller .btn .swiper-button-prev,
#mainVisual .controller .btn .swiper-button-next{height: 16px;}
#mainVisual .controller .btn .swiper-button-prev{background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E");}
#mainVisual .controller .btn .swiper-button-next{background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E");}
#mainVisual .controller .btn .swiper-pagination{color: #666; bottom: 0;}
#mainVisual .controller .btn .swiper-pagination-current{font-size: 27px; font-weight: 300; color: #fff}
#mainVisual .controller .btn .swiper-pagination-total{font-size: 14px; font-weight: 300; color: #666}
#mainVisual .controller .bar{background: #fff; height: 1px; width: 0%; margin-top: 10px; position: absolute; z-index: 1;}

/* work */
.mainBox.work .titleArea{width: 30%;}
.mainBox.work .titleArea .txt{top: 20%; transform: translate(-50%, 0%);}
.mainBox.work .titleArea .txt .title1{margin-bottom: 65px;}
.mainBox.work .titleArea .txt .boardCate li a{color: #fff; font-size: 30px; font-weight: 500;}
.mainBox.work .titleArea .txt .boardCate li.on a,
.mainBox.work .titleArea .txt .boardCate li a:hover{border-bottom: 3px solid #fff;}
.mainBox.work .titleArea .txt .boardCate li + li{margin-top: 10px;}
.mainBox.work .boardArea{height: 82vh; width: 60%; float: left; margin-top: 150px; overflow: hidden;}
.mainBox.work .boardArea .tabBox{display: none; position: relative;}
.mainBox.work .boardArea .tabBox.on{display: block;}
.mainBox.work .boardArea .nothing{color: #fff; text-align: center; line-height: 50vh; font-size: 20px; font-weight: 300;}

.mainBox.work .boardArea .openTab{display: block; position: absolute; z-index: 9; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: no-repeat center center/cover; transition: all .3s;}
.mainBox.work .boardArea .openTab:hover{transform: translate(-50%, -50%) scale(1.05);}

.videoList li{ position: relative; overflow: hidden;}
.videoList li .link{display: block;width: 100%; }
.videoList li i{display: block; width: 100%; padding-top: 51%; background: no-repeat center center/cover; transition: all .3s;}
.videoList li:hover i{transform: scale(1.05); opacity: .9;}
.videoList li iframe{width: 100%; }

.videoList.board{display: flex; flex-wrap: wrap; align-items: center;}
.videoList.board li{width: 33.33%;}

#reels-list{margin-top: 150px; padding-bottom: 20px;}
#reels-list li .link{height: 360px;}
#reels-list li i{background-size: contain;}
#reels-list li:hover i{transform: none; opacity: 1;}
#reels-list .swiper-button-white{display: none;}
#reels-list .swiper-pagination{top: auto; left: auto; max-width: 480px; position: relative; margin: 0 auto; margin-top: 50px; background: rgba(255, 255, 255, 0.5);}
#reels-list .swiper-pagination-progressbar-fill{background: none; overflow: visible;}
#reels-list .swiper-pagination-progressbar-fill::after{content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #fff; position: absolute; right: 0; top: 50%; transform: translateY(-55%);}

#projects-list{max-width: 1400px;}
.mainBox.projects{padding-top: 50px;}

.contact-map .mapArea{margin-top: 50px; overflow: hidden; height: 600px; max-height: 60vh; width: 100%; position: relative; display: flex; align-items: center; justify-content: center;}
.contact-map .mapArea img{display: block; max-width: 1920px; }
.contact-map .root_daum_roughmap{width: 100% !important;}

.mainBox.work .boardArea .tabBox .videoList li:nth-child(1){transform: translate(100%, 100%);}
.mainBox.work .boardArea .tabBox .videoList li:nth-child(4){transform: translate(0, 100%);}
.mainBox.work .boardArea .tabBox .videoList li:nth-child(7){transform: translate(-100%, 100%);}
.mainBox.work .boardArea .tabBox .videoList li:nth-child(2){transform: translate(100%, 0);}
.mainBox.work .boardArea .tabBox .videoList li:nth-child(5){transform: translate(0);}
.mainBox.work .boardArea .tabBox .videoList li:nth-child(8){transform: translate(-100%, 0);}
.mainBox.work .boardArea .tabBox .videoList li:nth-child(3){transform: translate(100%, -100%);}
.mainBox.work .boardArea .tabBox .videoList li:nth-child(6){transform: translate(0, -100%);}
.mainBox.work .boardArea .tabBox .videoList li:nth-child(9){transform: translate(-100%, -100%);}

.mainBox.work .boardArea .tabBox.open .videoList li:nth-child(1),
.mainBox.work .boardArea .tabBox.open .videoList li:nth-child(2),
.mainBox.work .boardArea .tabBox.open .videoList li:nth-child(3),
.mainBox.work .boardArea .tabBox.open .videoList li:nth-child(4),
.mainBox.work .boardArea .tabBox.open .videoList li:nth-child(5),
.mainBox.work .boardArea .tabBox.open .videoList li:nth-child(6),
.mainBox.work .boardArea .tabBox.open .videoList li:nth-child(7),
.mainBox.work .boardArea .tabBox.open .videoList li:nth-child(8),
.mainBox.work .boardArea .tabBox.open .videoList li:nth-child(9){transform: translate(0);}


.admin-btns{position: fixed; z-index: 9; bottom: 0; left: 0; padding: 20px;}
.admin-btns a{color: #fff; display: inline-block; vertical-align: middle;  margin: 0 5px; background: rgba(255, 255, 255, 0.1); font-size: 12px; border-radius: 100px; padding: 5px 15px; font-weight: 100; opacity: .6;}
.admin-btns a:hover{opacity: 1;}

.sns-link{position: fixed; z-index: 9; bottom: 0; right: 0; padding: 35px 60px;}
.sns-link li{display: inline-block; vertical-align: middle;}
.sns-link li + li{margin-left: 15px;}
.sns-link li a{display: block; width: 22px; height: 22px; background: no-repeat center center/contain; font-size: 0; overflow: hidden; list-style: 9px;}
.sns-link li.sns1 a{background-image: url('/Skin/images/sns1.svg');}
.sns-link li.sns2 a{background-image: url('/Skin/images/sns2.svg');}
.sns-link li.sns3 a{background-image: url('/Skin/images/sns3.svg');}
.sns-link li.sns4 a{background-image: url('/Skin/images/sns4.svg');}

/* company */
#companySlide{width: 100%; height: 100vh; position: absolute; left: 0; top: 0;}

.mainBox.company .inner{height: 100%;}
.mainBox.company .titleArea{width: 20%;}
.mainBox.company #companySlide .swiper-slide{background: no-repeat center center/cover;}
.mainBox.company #companySlide .swiper-pagination{font-size: 25px; font-weight: 300; bottom: auto; width: auto; top: 50%; transform: translateY(-50%); text-align: left; left: 8%;}
.mainBox.company #companySlide .swiper-pagination span{color: #fff; display: block;}
.mainBox.company #companySlide .swiper-pagination span + span{margin-top: 10px;}
.mainBox.company #companySlide .swiper-pagination span.swiper-pagination-bullet{width: auto; height: auto; opacity: 1; background: none; }
.mainBox.company #companySlide .swiper-pagination span.swiper-pagination-bullet-active{background: none; font-weight: 700;}
.mainBox.company .conArea{width: 80%; height: 100%; float: right; position: relative;}
.mainBox.company .conArea .txtBox{width: 35%; color: #fff; position: absolute; z-index: 5; left: 0; top: 50%; transform: translateY(-50%);}
.mainBox.company .conArea .txtBox .title1{margin-bottom: 50px;}
.mainBox.company .conArea .txtBox .t3{font-size: 14px; line-height: 1.6;}
.mainBox.company .conArea .imgBox{position: absolute; right: 0%; top: 50%; transform: translateY(-50%); width: 1000px; opacity: 0;}
.mainBox.company .conArea .imgBox img{width: 100%;}

.mainBox.company.active .conArea .imgBox{opacity: 0;  right: -30%;}
.mainBox.company.active .conArea .txtBox .title1,
.mainBox.company.active .conArea .txtBox .title2,
.mainBox.company.active .conArea .txtBox .t3{transform: translateY(-50px); opacity: 0;}

.mainBox.company.active .conArea .txtBox .title1{animation: txtShow .3s cubic-bezier(.17,.67,.57,1.13) .6s forwards;}
.mainBox.company.active .conArea .txtBox .title2{animation: txtShow .3s cubic-bezier(.17,.67,.57,1.13) .4s forwards;}
.mainBox.company.active .conArea .txtBox .t3{animation: txtShow .3s cubic-bezier(.17,.67,.57,1.13) .8s forwards;}
.mainBox.company.active .conArea .imgBox{animation: imgShow .3s cubic-bezier(.17,.67,.57,1.13) .4s forwards;}




/* contact */
.contactArea{height: 100vh;}
.contactArea::after{content: ""; display: block; clear: both;}
.contactArea .titleArea{width: 35%;}
.contactArea .titleArea .txt .info{font-size: 18px; margin: 25px 0;}
.contactArea .titleArea .txt .info li + li{margin-top: 10px;}
.contactArea .titleArea .txt .info b{margin-right: 10px; min-width: 80px; display: inline-block;}
.contactArea .titleArea .txt .copyright{font-size: 12px; margin-top: 25px; color: #999}
.contactArea .infoArea{float: right; width: 65%; background: #fff; height: 100%; padding: 130px 295px 130px 120px;}
.contactArea .infoArea article{padding-bottom: 30px;}
.contactArea .infoArea article + article{border-top: 1px solid #ddd; padding-top: 30px;}
.contactArea .infoArea article h3{font-size: 32px; margin-bottom: 20px; line-height: 1;}
.contactArea .infoArea article .con{font-size: 18px; line-height: 1.6;}
.contactArea .infoArea article .con p + p{margin-top: 5px;}
.contactArea .infoArea article .con .mapArea{margin-top: 20px;}
.contactArea .infoArea article .con .mapArea .root_daum_roughmap{width: 100% !important;}

.contact-board{display: flex; align-items: flex-end; flex-wrap: wrap;}
.contact-board .footer-info{width: 50%; color: #fff; font-weight: 100;}
.contact-board .footer-info li{margin: 5px 0;}
.contact-board .board-form{width: 50%; display: flex; align-items: center; justify-content: end;}
.contact-board .board-form iframe{height: 600px; width: 100%;}
.contact-board .board-form .form-area{max-width: 680px;}
.contact-board .board-form .form-area textarea:focus,
.contact-board .board-form .form-area select:focus,
.contact-board .board-form .form-area input:focus{outline: none;}
.contact-board .board-form .form-area textarea,
.contact-board .board-form .form-area select,
.contact-board .board-form .form-area input{background: none; border: none; appearance: none; -webkit-appearance: none; border-bottom: 1px solid #fff; height: 55px; font-size: 18px; margin: 5px 0; color: #fff; border-radius: 0;}
.contact-board .board-form .form-area select{background: no-repeat center right/5px; background-image: url('/Skin/images/');}
.contact-board .board-form .form-area ::placeholder{color: #fff}
.contact-board .board-form .form-area .short{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.contact-board .board-form .form-area .short > *{width: 49%; }
.contact-board .board-form .form-area .long > *{width: 100%; }
.contact-board .board-form .form-area .long textarea{height: 150px;}
.contact-board .board-form .form-area .btn-area{text-align: right; margin-top: 30px;}
.contact-board .board-form .form-area .btn-area button{border: 1px solid #fff; height: 47px; width: 150px; text-align: center; font-size: 20px; color: #fff}

.mainBox.contact article{transform: translateY(-50px); opacity: 0;}
.mainBox.contact.active article{animation: txtShow .3s cubic-bezier(.17,.67,.57,1.13) .6s forwards;}


@keyframes txtShow {
    from {transform: translateY(-50px); opacity: 0;}
    to{transform: translateY(0); opacity: 1;}
}

@keyframes imgShow {
    from {right: -30%; opacity: 0;}
    to{right: 0%; opacity: 1;}
}



/* 기존스타일 *************************************************************/
/*paging*/
.paging_wrap{text-align: center; width: 100%;}
.paging{display: inline-block; margin-top: 54px;}
.paging a{font-size: 13px; color: #7c7a7a; display: block; border: 1px solid #b5b4b4; width: 26px; height: 25px; line-height: 24px; border-radius: 2px; float: left; margin: 0 4px;}
.paging a.prev{margin-right: 19px;}
.paging a.next{margin-left: 19px;}
.paging a.on{background: #005fb7; color: #fff; border: none; font-size: 16px;}

.paging{clear:both; margin-top: 54px; text-align:center;}
.paging span,.paging a,.paging strong{display:inline-block; color:#fff; line-height: 26px; min-width: 25px; height: 26px; overflow:hidden; border-radius: 2px; font-size: 13px;}
.paging a{color:inherit; opacity: .5;}
.paging strong{opacity: 1;}
.paging .first, .paging .last{display:none;}
.paging .first,.paging .prev,.paging .prevp,.paging .nextp,.paging .next,.paging .last{width: 25px; height: 26px;}
.paging .prevp{margin-right: 20px;}
.paging .nextp{margin-left: 20px;}
.paging .prev:before{content:'<<'; display:block; height:100%;}
.paging .prevp:before{content:'<'; display:block; height:100%;}
.paging .nextp:before{content:'>'; display:block; height:100%;}
.paging .next:before{content:'>>'; display:block; height:100%;}

/* modal */
.modal-container{display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100vh; overflow-y: auto; background: rgba(0, 0, 0, 0.15);}
.modal-container .modal-wrapper{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; padding: 0 60px;}
.modal-container .modal-wrapper .close{position: absolute; display: block; width: 40px; height: 40px; background: no-repeat center center/contain; background-image: url('/Skin/images/close.svg'); position: absolute; top: 0; right: -10px;}
.modal-container .modal-wrapper iframe{width: 100%; height: 70vh;}
.modal-container .modal-wrapper .modal-btn{display: inline-block; width: 60px; height: 60px; background: no-repeat center center/contain; position: absolute; top: 50%; transform: translateY(-50%); display: none;}
.modal-container .modal-wrapper .modal-btn.show{display: block;}
.modal-container .modal-wrapper .next-project{background-image: url('/Skin/images/modal-arr-next.svg'); right: 0;}
.modal-container .modal-wrapper .prev-project{background-image: url('/Skin/images/modal-arr-prev.svg'); left: 0;}

/* 모달창 */
.modal_layer{position:fixed; top:0; left:0; z-index:5000; display:none; width:100%; height:100%; background:rgba(0,0,0,0.3);}
.modal_layer .modal_wrap{position:fixed; top:50%; left:50%; z-index:2; width:400px; height:300px; padding-top:50px; max-width:90%; max-height:90%; background:#F7F7F7; -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.modal_layer .modal_header{position:absolute; top:0; left:0; width:100%; height:50px; background:#2C3E50;}
.modal_layer .modal_header h1{padding:0 80px 0 20px; height:100%; font-size:16px; color:white; overflow:hidden; line-height:50px;}
.modal_layer .modal_header .close{position:absolute; top:16px; left:100%; margin-left:-38px; line-height:16px; font-size:18px; color:white; cursor:pointer; text-align:center;}
.modal_layer .modal_header .close{margin-left:-35px; font-size:24px;}
.modal_layer .modal_header .close i{font-size:16px;}
.modal_layer .modal_header .close i:before,.modal_layer .modal_header .close i:after{background:#fff;}
.modal_layer .submit_btn button{height:40px; font-size:14px; width:100px;}
.modal_layer .modal_contents{height:100%; overflow-y:auto;}
.modal_layer .modal_contents .modal_inner{padding:20px;}

p.alert{padding-bottom:20px; color:#c10;}

.modalConfirm{position:fixed; top:0; left:0; z-index:100; width:100%; height:100%; background:#999; background:rgba(0,0,0,0.1);}
.modalConfirm form{position:absolute; top:50%; left:50%; width:300px; padding:20px; margin:-80px 0 0 -150px; border:2px solid #333; background:#fff; text-align:center;}
.modalConfirm p{font-weight:700; padding-bottom:15px;}
.modalConfirm .sPopBtns{padding-top:10px;}
.modalConfirm .sPopBtns button + *{margin-left:5px;}
.modalConfirm .sPopBtns a + *{margin-left:5px;}

.nothing{text-align:center; color:#888; padding:20px 0;}

.fileUploadArea2{padding:10px 0;}
.fileUploadArea2 + .fileUploadArea2{padding-top:0;}
.fileUploadArea2 p{display:inline-block;}

.reply-area{max-width: 1400px; margin: 0 auto;}

#Reply{padding-top:50px; max-width: 100%; margin:0 auto;}
#Reply h3{font-weight:700; padding-bottom:5px;}
#Reply h3 span{font-weight:400; color:#888; font-size:12px;}
#Reply fieldset{border:0;}
#Reply textarea{width:100%; resize:none;}
.repAttachImg{display:inline-block; padding-bottom:10px;}
.repAttachImg img{max-width:200px; max-height:200px;}

.replyWrite{margin-bottom:20px; padding-bottom:5px;}
.replyWrite fieldset{padding:5px 0;border-top:1px solid #b8c2cc;}
.replyWrite fieldset.user{display:table; width:100%; table-layout:fixed; background:#e6ecf2; padding: 5px 10px;}
.replyWrite fieldset.user dl{display:table-cell;}
.replyWrite fieldset.user dt{display:inline-block; width:100px; text-align:center; font-size:12px; font-weight:700; color:#828b99;}
.replyWrite fieldset.user dd{display:inline-block; padding-right: 10px; width: 100%;}
.replyWrite fieldset.user dd input{width: 100%;}
.replyWrite fieldset.text{position:relative; padding-right:150px;}
.replyWrite fieldset.text textarea{height:100px; margin:0;}
.replyWrite fieldset.text .btn{position:absolute; top:5px; right:0; width:140px; height:100px;}
.replyWrite fieldset.text .btn button{width:100%; height:100%; background:#828b99; font-size: 16px; color:#fff; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; text-align:center;}
.replyWrite div.option{padding:0;}
.replyWrite div.option:after{content:' '; display:block; clear:both}
.replyWrite div.option > span{float:left; width:80px;}
.replyWrite div.option .fileUploadArea2{padding:0; float:left;}

.replyAnswer fieldset.text{padding-right:0;}

.replyDelete{position:absolute; top:50%; left:50%; padding:10px 20px; margin-bottom:0; border:1px solid #e6ecf2; background:rgba(255, 255, 255, 0.8); -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); text-align:center;}
.replyDelete fieldset{border:0;}
.replyDelete fieldset.pwd p{font-size:11px; margin-right:5px; color:#828b99; line-height:15px; vertical-align:middle; font-weight:700;}
.replyDelete fieldset.pwd span.pwdinp{display:block; padding-top:10px; vertical-align:middle;}
.replyDelete .btn{padding-top:10px;}

#replyListContents{font-size:0.90em;}
#replyListContents article{position:relative; border-bottom:1px solid #b8c2cc;}
#replyListContents article:first-child{border-top:1px solid #b8c2cc;}
#replyListContents header{padding:7px; background:#222;}
#replyListContents header:after{content:' '; display:block; clear:both}
#replyListContents header b{display:inline-block; font-weight:700; margin-right:5px;}
#replyListContents .btns{float:right;}
#replyListContents .btns a{float:left; display:block; padding:2px 5px; background:#3c4155; color:#fff; font-size:0.9em; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px;}
#replyListContents .btns a + a{margin-left:5px;}
#replyListContents .btns a.replyActionBtn{font-weight:400; border:1px solid #3c4155; line-height:11px; background:#828b99; color:#fff;}
#replyListContents .btns a.replyActionBtn .num,
#replyListContents .btns a.replyActionBtn b{color:#fff;}
#replyListContents .btns a.replyActionBtn.already{font-weight:700; background:#3c4155;}
#replyListContents .btns a.replyReportActionBtn{background:#713f73; border-color:#341133; color:#fff;}
#replyListContents .btns a.replyReportActionBtn.already{background:#341133;}
#replyListContents form .btn{text-align:right;}
#replyListContents form .btn button + button{margin-left:5px;}
#replyListContents .comment{padding:10px; line-height:1.5em;}
#replyListContents .comment b{color:#999; margin-right:10px;}
#replyListContents a.pwdView{color:#713f73; display:inline-block; margin-left:5px; font-weight:700;}
#replyListContents .fileUploadArea2{padding:0; line-height:30px;}

#replyPaging{text-align: center;}

.repLayer{position:fixed; top:0; left:0; z-index:100; width:100%; height:100%; background:#999; background:rgba(0,0,0,0.1);}
.repLayer form{position:absolute; top:50%; left:50%; width:400px; padding:20px; margin:-80px 0 0 -150px; border:2px solid #333; background:#fff; text-align:center;}
.repLayer div.btn{padding-top:10px;}
.repLayer div.btn button + button{margin-left:5px;}
.repLayer .targetContent{text-align:left; font-size:0.9em;}
.repLayer textarea{height:80px;}
.repLayer fieldset.user{text-align:left;}
.repLayer fieldset.user dl,.repLayer .repLayer fieldset.user dt,.repLayer .repLayer fieldset.user dd{display:inline-block;}
.repLayer fieldset.user dd input{width:100px;}
.repLayer fieldset.pwd{text-align:center;}
.repLayer fieldset.pwd p{font-weight:700; padding:15px 0 5px;}

.categoryTab{margin-bottom: 20px;}
.categoryTab li{display: inline-block; vertical-align: middle; padding: 0 5px;}
.categoryTab li a{color: #fff; opacity: .5;}
.categoryTab li.active a{opacity: 1; border-bottom: 1px solid #fff;}

table.write{width:100%; table-layout:fixed; border-collapse:collapse; color: #fff}
table.write th{width:200px; padding:10px; border:1px solid #666; border-width:1px 0; text-align:left; background:#222; height:40px; font-weight:400;}
table.write td{padding:10px; border:1px solid #666; border-width:1px 0; text-align:left;}
table.write label + label{margin-left:10px;}
table.write select + select{margin-left:10px;}
table.write p + p{margin-top:5px;}
table.write textarea{height:250px; width:100%; resize:none;}
table.write input[type=text], table.write input[type=tel], table.write input[type=email], table.write input[type=password]{appearance: none; -webkit-appearance: none; border: 1px solid #ccc; height:30px; font-size:16px;}
table.write span.guide{display:inline-block; vertical-align:middle; padding-left:10px; color:#777;}

.bottomBtnWrap{text-align: center;}
.bottomBtn{padding-top:20px; display: inline-block;}
.bottomBtn > * + *{margin-left:10px;}

.set-state{color: #fff}
.set-state label{display: inline-block; vertical-align: middle; margin: 5px;}
.set-state label input{display: none;}
.set-state label span{border: 1px solid #fff; color: #fff; display: inline-block; padding: 5px 10px; opacity: .5;}
.set-state label input:checked ~ span{opacity: 1;}

.se2_addi_btns{padding:2px 5px; border:1px solid #ddd; border-bottom:0; background:#f4f4f4; font-size:12px; font-weight:700; color:#666; text-align:right;}
.se2_addi_btns > div{display:inline-block;}
.se2_addi_btns > div + div{margin-left:5px;}
.se2_addi_btns button{height:18px; padding:0 5px; border:1px solid #aaa; background:-webkit-linear-gradient(#fff, #fff, #fff, #eee); background:-moz-linear-gradient(#fff, #fff, #fff, #eee); background:-o-linear-gradient(#fff, #fff, #fff, #eee); background:linear-gradient(#fff, #fff, #fff, #eee); border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; vertical-align:middle;}
.se2_addi_btns .se2_add_img button i{position:relative; display:inline-block; width:12px; height:12px; border:1px solid #b18d82; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; background:#fff; margin-right:5px; overflow:hidden; vertical-align:middle;}
.se2_addi_btns .se2_add_img button i:after{content:''; position:absolute; top:100%; left:50%; width:30px; height:30px; margin:-4px 0 0 -15px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; background:#0db01c;}
.se2_addi_btns .se2_add_img button i:before{content:''; position:absolute; top:10%; right:10%; width:4px; height:4px; display:block; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; background:#ff8d46;}
.se2_addi_btns .se2_add_youtube button i{position:relative; display:inline-block; width:12px; height:8px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; background:#c11; margin-right:5px; overflow:hidden;}
.se2_addi_btns .se2_add_youtube button i:before{content:''; display:block; width:1px; height:150%;}
.se2_addi_btns .se2_add_youtube button i:after{content:''; position:absolute; top:50%; left:50%; display:block; border-top:2px solid transparent; border-left:4px solid #fff; border-bottom:2px solid transparent; margin:-2px 0 0 -2px;}
.se2_addi_btns .se2_add_link button i{position:relative; display:inline-block; width:14px; height:14px; margin-right:5px; overflow:hidden;}
.se2_addi_btns .se2_add_link button i:before{content:''; display:block; width:4px; height:2px; border:2px solid #666; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -moz-transform:translate(0, 5px) rotate(-45deg); -webkit-transform:translate(0, 5px) rotate(-45deg); -ms-transform:translate(0, 5px) rotate(-45deg); -o-transform:translate(0, 5px) rotate(-45deg); transform:translate(0, 5px) rotate(-45deg);}
.se2_addi_btns .se2_add_link button i:after{content:''; position:absolute; top:0; left:0; display:block; width:4px; height:2px; border:2px solid #888; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -moz-transform:translate(5px, 3px) rotate(-45deg); -webkit-transform:translate(5px, 3px) rotate(-45deg); -ms-transform:translate(5px, 3px) rotate(-45deg); -o-transform:translate(5px, 3px) rotate(-45deg); transform:translate(5px, 3px) rotate(-45deg);}

#youtubeLinkModal .modal_wrap{width:500px; height:350px;}
#youtubeLinkModal .modal_contents{padding:20px;}
#youtubeLinkModal textarea{height:150px; border:1px solid #ccc;}
#youtubeLinkModal input[type=text]{width:60px; margin-right:5px; border:1px solid #ccc; height:24px;}
#youtubeLinkModal textarea{width:100%; height:150px; border:1px solid #ccc;}
#youtubeLinkModal dl{display:table; width:100%; table-layout:fixed;}
#youtubeLinkModal dt{display:table-cell; width:80px; padding:2px;}
#youtubeLinkModal dd{display:table-cell; padding:2px;}
#youtubeLinkModal footer{margin-top:10px; text-align:center;}

#urlLinkModal .modal_wrap{width:500px; height:170px;}
#urlLinkModal .modal_contents{padding:20px;}
#urlLinkModal textarea{height:150px; border:1px solid #ccc;}
#urlLinkModal input[type=text]{width:100%; border:1px solid #ccc; height:24px;}
#urlLinkModal textarea{height:150px; border:1px solid #ccc;}
#urlLinkModal dl{display:table; width:100%; table-layout:fixed;}
#urlLinkModal dt{display:table-cell; width:80px; padding:2px;}
#urlLinkModal dd{display:table-cell; padding:2px;}
#urlLinkModal footer{margin-top:10px; text-align:center;}

dl.links{display:table; width:100%; table-layout:fixed;}
dl.links dt{display:table-cell; width:100px; padding-left:20px;}
dl.links dd{display:table-cell;}
dl.links a{text-decoration:underline; font-weight:700;}

.w10p{width:10%;}
.w20p{width:20%;}
.w30p{width:30%;}
.w40p{width:40%;}
.w50p{width:50%;}
.w60p{width:60%;}
.w70p{width:70%;}
.w80p{width:80%;}
.w90p{width:90%;}
.w100p{width:100%;}

.w5p{width:5%;}
.w15p{width:15%;}
.w25p{width:25%;}
.w35p{width:35%;}
.w45p{width:45%;}
.w55p{width:55%;}
.w65p{width:65%;}
.w75p{width:75%;}
.w85p{width:85%;}
.w95p{width:95%;}



/*board ********************************************************/

/*common*/
.guide{color:#999; font-size:11px;}
ul.guide, p.guide{padding-top:5px;}
i.requiredBullet{font-weight:700; color:#c10; float:left; margin-right:5px; -moz-transform:translate(0, -5px); -webkit-transform:translate(0, -5px); -ms-transform:translate(0, -5px); -o-transform:translate(0, -5px); transform:translate(0, -5px);}

span.secretDoc{ display:inline-block; width: 14px; height: 16px; margin-right: 5px; vertical-align:middle; overflow:hidden;}
span.secretDoc:before{content:''; display: block; width:100%; height:100%; margin-bottom:10px; background: url('/Skin/images/pc/sub_img/lock.png') no-repeat center/cover;}
span.answerDoc{ display:inline-block; width: 20px; height: 12px; margin-right: 5px; vertical-align:middle; overflow:hidden;}
span.answerDoc:before{content:''; display: block; width:100%; height:100%; margin-bottom:10px; background: url('/Skin/images/pc/sub_img/reply.png') no-repeat center/cover;}
.newDoc{display:inline-block; width:16px; height:16px; vertical-align:middle; overflow:hidden; text-align:center; background:#c10; border-radius:3px; margin-left:5px;}
.newDoc:before{content:'N'; display:block; width:100%; height:100%; margin-bottom:10px; color:#fff; font-weight:800; line-height:16px; font-size:11px;}

.sBtn{display:inline-block; padding:3px 10px; background:#929599; color:#fff; vertical-align:middle; font-size:12px; line-height:16px;}
.mBtn{display:inline-block; min-width:62px; height:30px; padding:0 10px; text-align:center; background:#929599; color:#fff; vertical-align:middle; font-size:14px; line-height:18px;}
.bBtn{display:inline-block; min-width:200px; text-align:center; padding:0 20px; background:#929599; color:#fff; vertical-align:middle; font-size:16px; line-height: 55px;}
a.sBtn:before, a.mBtn:before, a.bBtn:before{content:''; display:inline-block; width:0; height:100%; vertical-align:middle;}

.bColorf{background: none; border: 1px solid #fff; color: #fff; border-radius: 50px;}
.bColorf:hover{background: #fff; color: #000}

.sColorG{background: #999; color: #fff; border-radius: 50px;}
.sColorG:hover{background: #ccc;}

.sColorf{background: #fff; color: #000; border-radius: 50px;}
.sColorf:hover{background: none; color: #fff; border: 1px solid #fff;}

.leftSysBtn{padding-top:10px;}
.leftSysBtn:after{content:' '; display:block; clear:both}
.leftSysBtn > *{margin:0 2px;}
a.btn1, button.btn1{background:#fff; color:#333; border:1px solid #ccc;}
a.btn2, button.btn2{background:#3c4155; color:#fff;}
a.btn3, button.btn3{background:#c10; color:#fff;}
.right_btn::after{content: ""; display: block; clear: both;}
.right_btn .boardWriteBtn{float: right;}

#bbsSchForm{display: flex; justify-content: flex-end; margin-bottom: 20px;}
#bbsSchForm .search_wrap{display: flex; align-items: center; justify-content: flex-end;}
#bbsSchForm .search_wrap select{height: 45px; border: 1px solid #fff; background: none; border-radius: 0; color: #fff; margin-right: 5px;}
#bbsSchForm .search_wrap input{height: 45px; border: 1px solid #fff; background: none; border-radius: 0; color: #fff}
#bbsSchForm .search_wrap button{height: 45px; width: 45px; border: 1px solid #fff; background: none; border-radius: 0; color: #fff; font-size: 20px; padding: 0; min-width: inherit; border-left: none;}

.board-view{max-width: 1400px; margin: 0 auto;}

.board-table{width: 100%; border-top: 1px solid #fff; color: #fff; text-align: center;}
.board-table a{color: #fff}
.board-table tr th{font-weight: 400;}
.board-table tr > *{border-bottom: 1px solid #fff; height: 55px;}
.board-table td.subject{text-align: left;}

.boardList header ul{border-top: 1px solid #dbdbdb;  border-bottom: 1px solid #dbdbdb; background: #f9f9f9;}
.boardList header ul::after{content: ""; display: block; clear: both;}
.boardList header ul li{float: left; text-align: center;  font-weight: 600;  height: 58px; line-height: 58px; color: #000;}
.boardList header ul li.check{width: 30px;}
.boardList header ul li.num{width: 70px;}
.boardList header ul li.subject{width: 610px;}
.boardList header ul li.name{width: 150px;}
.boardList header ul li.date{width: 200px;}
.boardList header ul li.hit{width: 140px;}

.boardList article ul{border-bottom: 1px solid #dbdbdb;}
.boardList article ul::after{content: ""; display: block; clear: both;}
.boardList article ul li{float: left; height: 72px;  font-size: 15px; font-weight: 400; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; float: left; line-height: 72px;}
.boardList article ul li.check{width: 30px;}
.boardList article ul li.num{width: 70px;}
.boardList article ul li.subject{width: 610px; text-align: left;}
.boardList article ul li.name{width: 150px;}
.boardList article ul li.date{width: 200px;}
.boardList article ul li.hit{width: 140px;}

.boardList ~ .right_btn::after{content: ""; display: block; clear: both;}
.boardList ~ .right_btn{margin-top: 50px;}

#contents.board > h2{color: #fff; font-weight: 500; text-align: center;}


.BoardContainer{padding-top: 150px;}
.BoardView{width: 100%; margin: 0 auto; color: #fff}
.BoardView header{width: 100%; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6;  padding: 20px; text-align: left;}
.BoardView .title{font-size: 17px; font-weight: 600; width: 57%; display: inline-block;  word-break: keep-all;}
.BoardView .h_info li{display: inline-block; vertical-align: middle; font-size: 12px; color: #ccc}
.BoardView .h_info li + li::before{content: "/"; margin: 0 5px;}

.BoardView .contents{min-height: 150px; text-align: left;  border-bottom: 1px solid #d6d6d6; padding: 30px; margin: 0 5px; white-space: pre-line; line-height: 1.6; font-size: 15px; font-weight: 400;}
.BoardView .contents p{text-align: left;  margin: 0 5px; white-space: pre-line; line-height: 33px; font-size: 15px; font-weight: 400;}
.BoardView .contents img{max-width:100%;}
.BoardView .contents .image{text-align: center;}
.BoardView .contents .image img{max-width: 100%;}

#Reply{color: #fff}

.youtubeFrameWrap{height: 600px;}

.BoardView .bottomBtn{float: right;}
.BoardView .bottomBtn .mBtn {display: block; width: 92px; height: 40px; line-height: 40px; text-align: center; border-radius: 3px; border: 1px solid #d6d6d6; font-size: 17px; color: #fff; float: left; margin-top: 40px; background: none;}

.bottomBtnIn{float: right;}
.bottomBtnIn a{display: block; width: 92px; height: 40px; line-height: 40px; text-align: center; border-radius: 3px; border: 1px solid #d6d6d6; font-size: 17px; color: #444; float: left; margin-top: 40px; background: none;}

.workView{padding-bottom: 100px;}
.workView h3{color: #fff; font-size: 30px; font-weight: 700; text-align: center; margin-bottom: 30px;}
.workView .youtubeFrameWrap{margin: 50px 0;}
.workView .boardViewNav{text-align: center;}

.BoardModifyContainer .content{background: #fff; padding: 20px; margin: 30px auto; width: 60%; border-radius: 20px;}
    

    
.cross{position:relative; display:inline-block; font-size:12px; width:1em; height:1em; vertical-align:middle; overflow:hidden;}
.cross:before{content:''; position:absolute; top:0.5em; left:0.5em; display:block; width:1px; height:1.4142em; transform:translate(-50%, -50%) rotate(45deg); background:#000;}
.cross:after{content:''; position:absolute; top:0.5em; left:0.5em; display:block; width:1px; height:1.4142em; transform:translate(-50%, -50%) rotate(-45deg); background:#000;}

.BH_Popup{position:absolute; top:0; left:0; z-index:1000; border:1px solid #888;}
.BH_Popup iframe{display:block;}
.BH_PopupContent{overflow-y:auto; overflow-x:hidden;}
.BH_PopupContent img{max-width:100%; width:auto; height:auto;}
.BH_PopupBtns{line-height:21px; background:#333; color:white; font-size:12px;}
.BH_PopupBtns a{cursor:pointer; color:#fff;}
.BH_PopupBtns:after{content:' '; display:block; clear:both;}
.BH_PopupTodayClose{float:left; display:block; padding:5px 10px;}
.BH_PopupClose{float:right; display:block; padding:5px 10px;}

.boardViewNav{padding:2em 0 0;}
.boardViewNav * + *{margin-left:10px;}
.BoardView .contents .image + .image{margin-top:3em; text-align:center;}

@media all and (max-width: 800px){
.BH_Popup{position:fixed; left:50% !important; top:50% !important; width:90% !important; height:90% !important; -webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%); padding-bottom:21px;}
.BH_PopupContent{width:100% !important; height:100% !important;}
.BH_PopupBtns{position:absolute; bottom:0; left:0; width:100%;}
}