:root { --color1: #D10000; } /* Common **********************************************************************/ *{margin: 0;padding: 0; text-decoration: none; color: #333; list-style: none; box-sizing: border-box; -webkit-text-size-adjust: none; font-family: 'Pretendard', 'NanumGothic', sans-serif; box-sizing: border-box;} 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;} /* 기본 스타일 */ section.galleryBoardList{font-size:13px;} section.galleryBoardList > header{padding:5px 10px; text-align:right;} section.galleryBoardList .noticeArticles{margin-top:10px;} section.galleryBoardList .noticeArticles > header{background:#828b99; color:#fff;} section.galleryBoardList .noticeArticles > header li{padding:5px;} section.galleryBoardList .noticeArticles ul{display:table; width:100%; table-layout:fixed;} section.galleryBoardList .noticeArticles li{display:table-cell; text-align:center; padding:10px 5px; border-bottom:1px solid #ccc;} section.galleryBoardList .noticeArticles li.check{width:40px;} section.galleryBoardList .noticeArticles li.subject{text-align:left; font-weight:700;} section.galleryBoardList .noticeArticles li.num{width:60px;} section.galleryBoardList .noticeArticles li.name{width:120px;} section.galleryBoardList .noticeArticles li.date{width:140px;} section.galleryBoardList .articles{padding-top:20px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;} section.galleryBoardList .articles article{border:1px solid #ccc; border-radius: 15px; overflow: hidden;} section.galleryBoardList .articles article:nth-child(4n+1){clear:left; margin-left:0;} section.galleryBoardList .articles article:nth-child(n+5){margin-top:10px;} section.galleryBoardList .articles ul{position:relative;} section.galleryBoardList .articles ul:after{content:' '; display:block; clear:both} section.galleryBoardList .articles li.check{position:absolute; top: 15px; left: 15px;} section.galleryBoardList .articles li.thumb img{width:100%;} section.galleryBoardList .articles li.thumb i{display:block; height:0; padding-bottom:75%; background:no-repeat center center; -webkit-background-size:cover; background-size:cover;} section.galleryBoardList .articles li.subject{text-align:left; font-weight: 700; margin-top:5px; line-height:16px; max-height:32px; overflow:hidden; padding: 8px;} section.galleryBoardList .articles li.name{padding-top:5px;} section.galleryBoardList .articles li.hit{padding-top:5px; font-size:12px;} section.galleryBoardList .articles li.hit:before{content:'조회수 : ';} section.galleryBoardList .articles li.recommend{float:left; width:50%; padding-top:5px; font-size:12px; font-weight:700;} section.galleryBoardList .articles li.recommend:before{content:'추천 : ';} section.galleryBoardList .articles li.date{ color:#888; padding: 8px;} .leftSysBtn{padding-top:10px;} .leftSysBtn:after{content:' '; display:block; clear:both} .leftSysBtn > *{margin:0 2px;} @media all and (max-width: 900px){ section.galleryBoardList .articles{grid-template-columns: 1fr 1fr;} } #checkActionModal .modal_wrap{width:400px; height:auto !important;} #checkActionModal .modal_contents{padding:10px;} #checkActionModal .selected{padding:5px; border:1px solid #666;} #checkActionModal .selected b{font-weight:700;} #checkActionModal div.group{padding:10px; margin-top:10px; height:250px; border:1px solid #ccc; overflow-y:scroll;} #checkActionModal button.boardActionGroupBtn{position:relative; margin-bottom:5px; height:24px; width:100%; padding:0 10px; background:#999; color:#fff; text-align:left;} #checkActionModal ul{display:none;} #checkActionModal li{border-bottom:1px solid #ddd;} #checkActionModal li button{display:block; width:100%; text-align:left; padding:5px;} #checkActionModal li button:hover{background:#eee;} #checkActionModal li.active button{background:#555; color:#fff; font-weight:700;} #checkActionModal .bottomBtn{margin-top:0; padding:10px 0;} #checkActionModal .selectedCategory select{margin-top:5px; width:100%;} .youtubeFrameWrap{position:relative; width:100%; height:0; padding-bottom:56.25%;} .youtubeFrameWrap iframe{position:absolute; top:0; left:0; width:100%; height:100%;} /* 컨텐츠 스타일 *************************************************************/ #wrap{width: 100%; padding-top: 100px;} .inner{width: 100%; max-width: 1200px; margin: 0 auto;} .inner::after{content: ""; display: block; clear: both;} .inner-box{width: 100%; max-width: 1200px; margin: 50px auto;} /*header*/ #header{width: 100%; height: 100px; position: fixed; text-align: center; background: #fff; z-index: 999; } #header.on{border-bottom:1px solid #ccc; box-shadow : rgba(0, 0, 0, .1) -8px 4px 13px} #header .inner{position: relative;} #header .logo{float: left; padding-top: 18px; width: 200px;} #header .logo img{width: 100%;} #header .gnb{float: right; background: #fff; padding-bottom: 0; margin:0 auto;} #header .gnb::after{content: ""; display: block; clear: both;} #header .gnb.on{padding-bottom: 50px;} #header .gnb > li{float: left; margin: 0 40px; position: relative;} #header .gnb > li > a{font-size: 18px; color: #333; line-height: 100px; display: block; width: 100%; height: 100%; transition: all .2s; -webkit-transition: all .2s;} #header .gnb > li > ul{position: absolute; top: 80px; left: 50%; transform: translateX(-50%); width: 120px; background-color: #fff; border: 1px solid #eee; padding: 10px; display: none;} #header .gnb > li > ul li a{display: block; padding: 8px 0;} #header .gnb > li > ul li a:hover{text-decoration: underline;} #header .gnb a:hover{color: var(--color1);} #header .gnb > li:hover ul{display: block;} #header .csNumber{position: absolute;right: 0;bottom: 0;background: #f4f4f4;} #header .csNumber::after{content:""; display: block; clear: both; } #header .csNumber .txt01{float: left;} #header .csNumber .txt02{float: left;} #header #menu_btn{width: 31px; height: 26px; position: absolute; right: 0; z-index: 999; transition: all .4s; top: 29px; display: none;} #header #menu_btn .bar{height: 4px; width: 100%; background: #333; transition: all .3s; position: absolute;} #header #menu_btn .bar01{top: 0;} #header #menu_btn .bar02{top: 50%; margin-top: -2px;} #header #menu_btn .bar03{bottom: 0;} #header #menu_btn.on {position: fixed; right: 30px; z-index: 999;} #header #menu_btn.on .bar{background: #fff;} #header #menu_btn.on .bar01{transform: rotate(45deg); -ms-transform: rotate(45deg); top: 11px;} #header #menu_btn.on .bar03{transform: rotate(-45deg); -ms-transform: rotate(-45deg); bottom: 11px;} #header #menu_btn.on .bar02{opacity: 0; bottom: 0;} /*hide_gnb*/ #media_menu{position: fixed; top: 0; right: 0; z-index: 99; width: 0%; height: 100%; background: rgba(26, 26, 26, 0.9); display: none; overflow: auto;} .hide_gnb{width: 90%; margin: 200px auto 0 auto;} .hide_gnb > li{margin-bottom: 50px;} .hide_gnb > li a{color: #fff;} .hide_gnb > li > a{font-size: 28px;} .hide_gnb .depth2{margin-top: 20px;} .hide_gnb .depth2 a{font-size: 20px; line-height: 35px;} /*footer*/ #footer{width: 100%; min-height: 100px; padding: 16px 0; background: #808080;} #footer.sub{margin-top: 200px;} #footer .inner{display: flex; align-items: flex-start; justify-content: space-between} #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: #fff;} #footer .footer_txt .admin{margin-left: 20px; margin-top: 5px; display: inline-block; color: #ccc; background: #333; font-weight: 400; padding: 1px 10px;} #footer .footer_banner{display: flex; flex-direction: column; gap: 5px} @media all and (max-width: 1200px){ #footer .inner{flex-direction: column; align-items: center; gap: 30px} #footer .footer_banner{flex-direction: row; flex-wrap: wrap} } /* main */ #mainVisual{display: block; width: 100%; height: 350px; position: relative; overflow: hidden; background: #f4f4f4;} /*#mainVisual::before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4);}*/ #mainVisualSlide{width: 100%; height: 100%; background: no-repeat center center/cover;} #mainVisualSlide .swiper-slide{position: relative;} #mainVisual .txt{max-width: 1200px; width: 100%; margin: 0 auto; text-align: center; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; font-size: 30px;} #mainVisual img{display: block; height: 100%; width: 100%; object-fit: cover;} #mainVisual .txt p{color: #fff; } #mainVisual .txt .t1{font-size: 1.2em; font-weight: 700;} #mainVisual.mobile #mainVisualSlide .swiper-slide{background-position: center top; } #mainVisual.mobile #mainVisualSlide .swiper-slide img{width: 100%;} @media all and (max-width: 1200px){ #mainVisual .txt{padding: 0 20px;} } @media all and (max-width: 970px){ #mainVisual{height: 250px;} #mainVisual .txt{font-size: 20px;} } @media all and (max-width: 570px){ #mainVisual{height: 200px;} #mainVisual .txt{font-size: 16px;} } .mainNotice{margin: 50px 0; line-height: 1.6;} .mainNotice h3{font-size: 16px; color: var(--color1); margin-bottom: 30px;} .mainNotice .con{display: flex; align-items: flex-start; gap: 20px;} .mainNotice .con .left{flex: 2; font-size: 18px;} .mainNotice .con .right{flex: 3; text-align: center; font-size: 18px; padding: 20px; background: #EBF5F9 no-repeat center right 20px/auto 50%; background-image: url('/Skin/images/clock.svg'); border-radius: 20px; box-shadow: 0 0 8px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 15px; } .mainNotice .con .right .title{font-size: 1.2em; font-weight: 700;} .mainNotice .con .right .info{font-weight: 500;} @media all and (max-width: 970px){ .mainNotice .con{flex-direction: column; align-items: center;} .mainNotice .con .left{text-align: center;} .mainNotice .con .right{font-size: 16px;} } .mainMenu{margin: 50px 0;} .mainMenu .inner{display: grid; grid-template-columns: 1fr 1fr; gap: 15px;} .mainMenu a{display: flex; flex-direction: column; gap: 30px; background: #fff no-repeat center right 20px/auto 70%; border-radius: 15px; padding: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, .25);} .mainMenu a h5{font-size: 20px; font-weight: 700;} .mainMenu a img{width: 15px;} @media all and (max-width: 720px){ .mainMenu .inner{grid-template-columns: 1fr;} } .mainBoard .inner{display: grid; grid-template-columns: 1fr 1fr; gap: 30px;} .mainBoard .gbox header{display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #ddd; margin-bottom: 10px;} .mainBoard .gbox header .t1{display: inline-block; color: var(--color1); border-radius: 100px; border: 1px solid var(--color1); padding: 5px 10px;; font-size: 12px;} .mainBoard .gbox header a img{width: 24px;} .mainBoard .gbox ul li{padding: 10px 5px; border-bottom: 1px solid #ddd; display: flex; width: 100%; align-items: center; justify-content: space-between;} .mainBoard .gbox ul li a{font-size: 12px;} .mainBoard .gbox ul li span{color: #999} @media all and (max-width: 970px){ .mainBoard .inner{grid-template-columns: 1fr;} } /* sub 공통 */ #sub_header{width: 100%;} #sub_header .sub_figure{width: 100%; height: 175px; position: relative; text-align: center; padding-top: 74px; background: no-repeat center center/cover;} #sub_header .sub_figure .bg{position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} #sub_header .sub_figure .sub_figure_txt{position: absolute; z-index: 2; width: 100%;} #sub_header .sub_figure .sub_figure_txt .t1{color: #fff; font-size: 35px; } #sub_header .sub_figure01{background-image: url('/Skin/images/other/subvisual01.jpg');} .lnbArea{width: 100%; height: 55px; line-height: 55px; background: #f4f4f4;} .lnbArea .lnb{display: flex; align-items: center;} .lnbArea .lnb li{flex: 1; text-align: center;} .lnbArea .lnb li a{display: block; width: 100%; height: 100%;} .lnbArea .lnb li a:hover{color: var(--color1);} .lnbArea .lnb li a.active{color: var(--color1); text-decoration: underline;} .lnbArea .title{text-align: center; background: var(--color1); color: #fff;} .lnbArea.active{position: fixed; top: 100px; left: 0; z-index: 99;} .subContainer{padding-top: 50px;} .subContainer h2{text-align: center; font-size: 30px; margin-bottom: 120px;} .subContainer h2::after{content: ""; display: block; margin: 20px auto; width: 45px; height: 1px; background: #aaa;} /* sub01 회사소개 */ .company{margin-bottom: 200px;} .company01 .imgBox{margin: 0 auto 50px auto; width: 800px; text-align: center;} .company01 .imgBox img{width: 100%;} .company01 .txtBox{margin: 0 auto; width: 800px;} .company01 .txtBox .t1{font-size: 30px; color: var(--color1); font-weight: 700; margin-bottom: 20px;} .company01 .txtBox .t2{font-size: 17px; font-weight: 700; margin-bottom: 70px;} .company01 .txtBox .t3{font-size: 15px; font-weight: 400; margin-bottom: 35px; line-height: 25px;} .company01 .txtBox .ceo{text-align: right; font-size: 20px; font-weight: 700; height: 30px; margin-top: 180px;} .company01 .txtBox .ceo img{height: 100%; position: relative; top: -3px; margin-left: 10px;} .company02{text-align: center;} .company02 .imgBox{float: left; width: 50%;} .company02 .txtBox{float: right; width: 50%; font-size: 27px; line-height: 35px; margin-top: 150px; padding: 50px 0; background: url('/Skin/images/other/company02b.jpg') no-repeat top left, url('/Skin/images/other/company02c.jpg') no-repeat bottom right;} .company02 .txtBox span{color: var(--color1);} .company03{text-align: center;} .company04{} .planList{display: table; width: 100%;} .planList > li{ width: 100%; min-height: 162px; background: #ededed; border-radius: 100px 30px 30px 100px; padding-left: 207px; position: relative; margin-bottom: 30px; display: table;} .planList > li > img{position: absolute; left: 10px; top: 5px; } .planList > li > .txtBox{display: table-cell; vertical-align: middle; width: 100%; height: 100%;} .planList > li .t1{color: #20528e; font-size: 20px;} .planList > li ul{margin-top: 20px;} .planList > li ul::after{content: ""; display: block; clear: both;} .planList > li ul li{position: relative; color: #666; font-size: 17px; font-weight: 400; padding-left: 10px; float: left; width: 50%; margin-bottom: 10px;} .planList > li ul li::before{content: ""; display: block; width: 4px; height: 4px; background: #666; position: absolute; left: 0; top: 50%; margin-top: -2px; } .company05{} .company05::after{content: ""; display: block; clear: both;} .b-Box{position: relative; margin: 0 auto; border: 2px solid var(--color1); border-radius: 20px; padding: 60px 0 37px 0; height: 100%; width: 92%;} .b-Box .txtArea{font-size: 17px; line-height: 30px;} .b-Box h4{position: absolute; left: 50%; width: 250px; margin-left: -125px; height: 60px; line-height: 50px; top: -30px; background: var(--color1); color: #fff; border-radius: 60px; text-align: center; border: 5px solid #c1d7f7; font-size: 20px; box-shadow: 10px 10px 10px rgba(0, 0, 0, .35)} .company05 .leftBox{float: left; text-align: center; width: 50%; height: 500px; position: relative;} .company05 .rightBox{float: right; width: 50%; height: 500px; } .company05 .leftBox .b-Box{height: 45%; width: 76%; left: 12%; padding: 60px 0 37px 0;} .company05 .leftBox .b-Box .txtArea{font-size: 19px; line-height: 40px;} .company05 .leftBox .b-Box.b01{position: absolute; top: 0;} .company05 .leftBox .b-Box.b02{position: absolute; bottom: 0;} .company05 .leftBox .b-Box.b02 p{width: 220px; text-align: left; margin: 0 auto;} .company05 .leftBox .b-Box.b02 p .col1{display: inline-block; width: 160px;} .company05 .leftBox .b-Box.b02 p .col1::after{content: "/"; margin: 0 5px; float: right;} .company05 .rightBox .b-Box{padding: 60px 30px 37px 30px; } .company05 .rightBox .b-Box .t1{position: relative; padding-left: 50px;} .company05 .rightBox .b-Box .t1 span{position: absolute; left: 0;} .company05 .rightBox .b-Box .t2{padding-left: 45px; margin-bottom: 30px;} .lts01{letter-spacing: 2px;} /* sub02 건물의특장점 */ #galleryView{width: 100%; height: 800px;} #galleryThumb{width: 100%; height: 130px; margin-top: 10px;} #galleryThumb .swiper-slide-thumb-active{border: 1px solid #000;} .galleryArea{text-align: center;} .galleryArea .swiper-slide{background: #fff;} .galleryArea img{width: 100%;} .galleryArea i.imgw img{height: 100%; width: auto;} .galleryArea i.imgh img{height: auto; width: 100%;} .galleryArea .imgBox{display: table; width: 100%; height: 100%;} .galleryArea .imgBox i{display: table-cell; width: 100%; height: 100%; vertical-align: middle;} .galleryArea #galleryView .imgBox{height: 800px;} .galleryArea #galleryView .imgBox i{height: 800px;} .galleryArea #galleryThumb .imgBox{height: 130px;} .galleryArea #galleryThumb .imgBox i{height: 130px;} .buildingInfo{margin-top: 50px;} .buildingInfo dt{font-size: 17px; margin-bottom: 10px; margin-top: 20px;} .buildingInfo dd{font-size: 15px; line-height: 25px; font-weight: 400; margin-left: 20px; position: relative; padding-left: 20px;} .buildingInfo dd .num{position: absolute; left: 0; font-weight: 400;} /* sub03 입주업체 */ .galleryList::after{content: ""; display: block; clear: both;} .galleryList article{float: left; width: 23.5%; margin-right: 2%; border: 1px solid #ccc; height: 300px; position: relative; margin-bottom: 50px;} .galleryList article:nth-child(4n){margin-right: 0; } .boardList article ul li.check{position: absolute; top: -20px; right: 0;} .galleryList article .checkItem{ width: 15px; height: 15px;} .galleryList article .thumb{width: 100%; height: 300px; background: #ddd url('/Skin/images/other/logo_footer.png') no-repeat center center/50%;} .galleryList article .thumb i{display: block; width: 100%; height: 100%; background: no-repeat center center/cover;} .galleryList article .subject{text-align: center; font-size: 18px; word-break: break-all; display: table; width: 100%; height: 100%;} .galleryList article .subject p{display: table-cell; table-layout: fixed; width: 100%;vertical-align: middle; height: 80px; padding: 0 20px;} .boardSearch.gallery{display: none;} .boardSearch{text-align: center; margin-top: 100px;} .boardSearch select, .boardSearch input[type="text"], .boardSearch button{display: inline-block; margin: 0 2px;} .categoryTab{display: none;} .subContainer .cate{font-size: 30px; margin-bottom: 50px;} .subContainer .leftSysBtn{margin-top: 50px;} .galleryBoardList > header{margin-bottom: 20px;} .zoomBox{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 999; text-align: center;} .zoomBox .imgBox{text-align: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; padding-top: 10%;} .zoomBox .imgBox img{height: 80%; } .zoomBox.t02{display: none; background: rgba(0, 0, 0, 0.2);} .zoomBox.t02 .imgBox{ padding-top: 10%;} .zoomBox.t02 img{height: 80%; } /* sub04 상담 문의 */ .askBox{background: #f7f7f7; margin-bottom: 20px; padding: 15px;} .askBox .t1{font-size: 20px; margin-bottom: 15px; color: var(--color1)} .askBox .t2{margin-right: 30px; display: inline-block; line-height: 1.6;} .askBox .t2 .gray{margin-right: 10px; font-weight: 400; color: #555;} /* sub05 오시는길 */ .locationInfo h3{font-size: 30px; padding-bottom: 20px; margin: 50px 0 20px 0; border-bottom: 2px solid var(--color1); font-weight: 800;} .locationInfo .infoList::after{content: ""; display: block; clear: both;} .locationInfo .infoList li{float: left; width: 33.33%; height: 80px; padding-left: 100px; margin-bottom: 50px; background: no-repeat center left/contain;} .locationInfo .infoList li.if01{background-image: url('/Skin/images/other/location01.png');} .locationInfo .infoList li.if02{background-image: url('/Skin/images/other/location02.png');} .locationInfo .infoList li.if03{background-image: url('/Skin/images/other/location03.png');} .locationInfo .infoList li.if04{background-image: url('/Skin/images/other/location04.png');} .locationInfo .infoList li.if05{background-image: url('/Skin/images/other/location05.png');} .locationInfo .infoList li .t1{font-size: 18px; margin-top: 15px;} .locationInfo .infoList li .t2{font-size: 15px; color: #666; margin-top: 10px;} /* 기존스타일 *************************************************************/ /*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; border:1px solid #b5b4b4; color:#7c7a7a; line-height: 26px; min-width: 25px; height: 26px; overflow:hidden; border-radius: 2px; font-size: 13px;} .paging a{color:inherit;} .paging strong{background:#005fb7; color:white; border:0;} .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_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{padding-top:50px; width:1200px; 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:#e6ecf2;} #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;} table.write{width:100%; table-layout:fixed; border-collapse:collapse;} table.write th{width:200px; padding:10px; border:1px solid #eee; border-width:1px 0; text-align:left; background:#f7f7f7; height:40px; font-weight:400;} table.write td{padding:10px; border:1px solid #eee; 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;} .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;} a.sBtn, button.sBtn{display:inline-block; padding:3px 10px; background:#929599; color:#fff; vertical-align:middle; font-size:12px; line-height:16px;} a.mBtn, button.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;} a.bBtn, button.bBtn{display:inline-block; min-width:200px; height:40px; text-align:center; padding:0 20px; background:#929599; color:#fff; vertical-align:middle; font-size:16px; line-height:24px;} a.sBtn:before, a.mBtn:before, a.bBtn:before{content:''; display:inline-block; width:0; height:100%; vertical-align:middle;} .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;} .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;} .BoardView{width: 100%; margin: 0 auto; margin-bottom: 200px;} .BoardView header{width: 100%; min-height: 60px; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; padding: 20px 30px; text-align: left;} .BoardView header::after{content: ""; display: block; clear: both;} .BoardView .title{font-size: 17px; font-weight: 600; width: 57%; display: inline-block; word-break: keep-all; float: left;} .BoardView .h_info{float: right; width: 43%;} .BoardView .h_info::after{content: ""; display: block; clear: both;} .BoardView .h_info b{font-size: 15px; color: #999;} .BoardView .h_info li{font-size: 15px; color: #999; float: left; line-height: 25px;} .BoardView .mname{font-size: 15px; color: #999; float: left; } .BoardView .date{font-size: 15px; color: #999; float: left; } .BoardView .date::before, .BoardView .date::after{content: "|"; display: inline-block; margin: 0 10px; } .BoardView .count{font-size: 15px; color: #999; float: left; } .BoardView .contents{min-height: 400px; text-align: left; border-bottom: 1px solid #d6d6d6; padding: 40px 30px; margin: 0 5px; white-space: pre-line; line-height: 33px; color: #666; font-size: 15px; font-weight: 400;} .BoardView .contents p{min-height: 400px; text-align: left; margin: 0 5px; white-space: pre-line; line-height: 33px; color: #666; 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%;} .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: #444; 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;} .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%;} }