@charset "utf-8";
/* CSS Document */

#boardSkin .best {overflow:hidden; position:absolute; top:0; right:0; z-index:1; width:54px; height:61px; text-indent:-200px; background:url('../images/icon_best.png');}

#categoryBox {margin-bottom:40px;}
.boardList {padding:40px 0 0; border-top:2px solid #161616; border-bottom:1px solid #cbcbcb;}
.boardList ul {overflow:hidden; margin:0 -27px; text-align:center;}
.boardList li {float:left; width:33.3%; padding:0 25px;}
.boardList .imgWrap {overflow:hidden; position:relative; padding-bottom:71.6%; border:1px solid #d3d3d3;}
.boardList .state_close .imgWrap:before {position:absolute; top:0; left:0; z-index:3; width:100%; height:100%; background:rgba(0,0,0,0.3);}
.boardList .state_close .imgWrap:after {position:absolute; top:50%; left:50%; z-index:5; width:100px; height:100px; margin:-50px; border-radius:100%; border:2px solid rgba(255,255,255,0.4); font-size:20px; color:#fff; line-height:96px; text-align:center; content:'비공개';}
.boardList .img_wrap img {position:absolute; top:0; left:0; width:100%; height:auto; min-height:100%;}
.boardList .info {margin:2px 0 40px; font-size:15px; color:#333333;}
.boardList .category {color:#7e0141;}
.btn_login {position:absolute; top:0; left:50%; width:50%; bottom:0; background:url('../images/login.png') no-repeat center rgba(51,51,51,0.75);}



.view_bottom_link {margin-top:20px; text-align:center;}
.view_bottom_link .btn {width:300px; background:#52bab9;}

#best {position:relative; padding-top:123px; margin-top:-27px; padding-bottom:80px; margin-bottom:80px;}
#best.admin {padding:0;}
#best:before {position:absolute; top:0; left:-1000px; right:-1000px; bottom:0; z-index:-1; background:#f8f8f8; content:'';}
#best .title {vertical-align:top; line-height:1;}
#best .title .tit {display:inline-block; margin-left:-14px; padding-top:33px; font-size:50px; font-weight:300; color:#000;}
#best .title span {display:inline-block; margin-left:22px; padding-top:58px; font-size:22px; color:#737373; font-weight:300;}
#best .inbox {margin-top:40px; padding:50px 112px; background:#fff;}

#dragstage_area {position:relative; width:1062px; height:540px; margin:auto;}
.dragstage {width:1062px; height:540px; background:#dddddd;}
.dragstage .img {position:relative; width:1062px; height:540px; background:#dddddd;}
.dragstage img {position: absolute; top:0; left:50%; height: 100%; width: auto !important;  max-width:none; transform:translateX(-50%);}
.dragstage .stageimage{position:absolute;top:0;left:0;z-index:1;}
.dragstage .stageimage img {opacity:1;}
.dragstage .coverimage {overflow:visible !important; position:absolute;top:0;left:0;z-index:3; width:100%; height:100%; max-width:none;}
.dragstage .coverimage .img {position:absolute; top:0; left:0; width:1062px !important; height:540px; clip: rect(0px, 328px, auto, 0px);}
.dragstage .coverimage img {}
.dragstage .coverimage:hover{cursor:e-resize;}
.dragstage .active .handle {position:absolute; top:0; right:0; width:10px; bottom:0; z-index:100; transition: opacity .4s; -webkit-transition: opacity .4s;}
.dragstage .active .handle:before {position:absolute; top:0; right:0; width:6px; height:100%; background:#30bbc3; content:'';}
.dragstage .active .handle:after {position:absolute; bottom:-28px; left:0px; width:56px; height:56px; margin-left:-21px; background:url('../images/icon_mouse.png') no-repeat; background-size:contain; content:''; transition: opacity .4s; -webkit-transition: opacity .4s;}
.dragstage .active .handle.on {opacity:1;}
.dragstage .active .handle > span{display:block;font-size:12px; color:#fff; margin-top:90px;text-align:Center}
.dragstage .active .handle.drag_start:after {opacity:1;}

#best_swiper {position:relative; width:1062px; margin:47px auto 0; text-align:left;}
#best_swiper .img_wrap {overflow:hidden; position:relative; padding-bottom:100%; background:#e6e6e6;}
#best_swiper .img_wrap::before {position:absolute; top:0; left:0; right:0; bottom:0; z-index:4; opacity:0; transition:opacity 0.4s; border:4px solid #2ab9c1; transition:all 0.4s; content:'';}
#best_swiper .on .img_wrap::before {opacity:1;}
#best_swiper .img_wrap img {position:absolute; top:50%; left:0; width:100%; height:auto; transform:translateY(-50%);}
#best_swiper .swiper-button-prev,
#best_swiper .swiper-button-next {width:30px; height:58px; margin:0; margin-top:-29px; background:no-repeat center;} 
#best_swiper .swiper-button-prev:before,
#best_swiper .swiper-button-next:before {display:none;}
#best_swiper .swiper-button-prev {left:-60px; background-image:url('../images/btn_prev.png');}
#best_swiper .swiper-button-next {right:-60px; background-image:url('../images/btn_next.png');}

.review_top {overflow:hidden;}
.review_top .title {float:left; font-size:30px; color:#0d0d0d; font-weight:300;}
.review_top .title strong {font-weight:700;}
.review_top a {float:right; margin-top:8px; padding:0 40px; border-radius:20px; font-size:20px; font-weight:400; line-height:40px; color:#fff; background:#2a3245;}


.board_list ul {overflow:hidden; margin:-15px;}
.board_list ul > li {float:left; width:33.33%; padding:15px;}
.board_list ul > li:nth-child(3n+1) {clear:both;}
.board_list .inbox {padding:10px 29px 10px; border-radius:8px; background:#f8f8f8;}
.board_list .top {overflow:hidden; padding:17px 0; border-bottom:1px solid #d9d9d9; line-height:28px;}
.board_list .top .name {float:left; width:50%; font-size:25px; color:#0d0d0d; font-weight:500;}
.board_list .top .atxt {float:right; width:50%; text-align:right; font-size:18px; color:#666666;}
.board_list .title {position:relative; overflow:hidden; height:50px; margin:16px 0; padding-right:65px; font-size:18px; color:#0d0d0d; line-height:25px; display: -webkit-box; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.board_list .title .more {position:absolute; right:20px; bottom:0px; font-size:18px; color:#30bbc3; font-weight:500;}
.board_list .img_wrap {overflow:hidden; position:relative; padding-bottom:100%; border-radius:8px; background:#e6e6e6;}
.board_list .img_wrap img {position:absolute; top:50%; left:0; width:100%; height:auto; transform:translateY(-50%);}

.board_list .state_close .img_wrap:before {position:absolute; top:0; left:0; z-index:3; width:100%; height:100%; pointer-events: none;  background:rgba(0,0,0,0.3); content:'';}
.board_list .state_close .img_wrap:after {position:absolute; top:50%; left:50%; z-index:5; width:100px; height:100px; margin:-50px; border-radius:100%; border:2px solid rgba(255,255,255,0.4); font-size:20px; color:#fff; line-height:96px; text-align:center; pointer-events: none; content:'비공개';}

.board_list .keyword {display:block; overflow:hidden; height:44px; margin:18px 0 17px; font-size:16px; color:#008089; line-height:22px; display: -webkit-box; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.board_list .bottom {border-top:1px solid #d9d9d9; padding-top:13px;}
.board_list .bottom span {display:inline-block; padding-left:30px; margin-right:27px; font-size:16px; color:#191919; line-height:28px;}
.board_list .bottom .like {background:url('../images/icon_heart.png') no-repeat 0 center;}
.board_list .bottom .hit {padding-left:38px; background:url('../images/icon_hit.png') no-repeat 0 center;}


#board_pop {display:none; position:fixed; top:20px; bottom:20px; left:50%; z-index:100001; width:830px; margin-left:-415px; padding:60px 20px 60px 60px; background:#fff;}
#board_pop .btn_pop_close {overflow:hidden; position:absolute; top:0; right:-150px; z-index:100; cursor:pointer; width:69px; height:68px; white-space:nowrap; text-indent:-999px; background:url('../images/btn_pop_close.png');}
#board_pop .btn_prev {display:block; overflow:hidden; position:absolute; top:50%; left:-120px; width:70px; height:70px; margin-top:-35px; text-indent:-999px; background:url('../images/btn_pop_prev.png');}
#board_pop .btn_prev span {position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; background:url('../images/btn_pop_prev_on.png'); opacity:0; transition:all 0.3s;}
#board_pop .btn_next {display:block; overflow:hidden; position:absolute; top:50%; right:-120px; width:70px; height:70px; margin-top:-35px; text-indent:-999px; background:url('../images/btn_pop_next.png');}
#board_pop .btn_next span {position:absolute; top:0; left:0; right:0; bottom:0; background:url('../images/btn_pop_next_on.png'); opacity:0; transition:all 0.3s;}
#board_pop .btn_prev:hover span,
#board_pop .btn_next:hover span {opacity:1;}
#board_pop .scroll {overflow:hidden; position:relative; height:100%; padding-right:40px;}
#board_pop .scroll > div {}
#board_pop .iScrollVerticalScrollbar {position:absolute; top:0; right:0px !important; width:9px !important; border-radius:2px !important; background:#e1e3e4 !important;}
#board_pop .iScrollIndicator {border:0 !important; background:#a8aeb3 !important;}
#board_pop .top {overflow:hidden; position:relative; margin-bottom:10px; padding-right:270px; padding-bottom:20px; border-bottom:1px solid #e6e6e6;}
#board_pop .top * {vertical-align:middle;}
#board_pop .top .name {display:inline-block; font-size:35px; color:#000000; font-weight:500;}
#board_pop .top .atxt {display:inline-block; margin-left:50px; font-size:24px; color:#8c8c8c; font-weight:400;}
#board_pop .top .rtxt {position:absolute; top:10px; right:0;}
#board_pop .top .rtxt span {display:inline-block; padding-left:33px; margin-right:37px; font-size:18px; color:#191919; line-height:27px; font-weight:500;}
#board_pop .top .rtxt .like {background:url('../images/icon_heart2.png') no-repeat 0 center;}
#board_pop .top .rtxt .hit {padding-left:38px; background:url('../images/icon_hit2.png') no-repeat 0 center;}
#board_pop .top .title {min-height:35px; margin-top:20px; font-size:25px; color:#191919; font-weight:500; line-height:1.4;}
#board_pop .bimg {overflow:hidden; position:relative; height:514px; background:#e6e6e6;}
#board_pop .bimg img {position:absolute; top:50%; left:0; width:100%; height:auto; transform:translateY(-50%);}

#detail_swiper {position:relative;}
#detail_swiper a {display:block; position:relative;}
#detail_swiper .img_wrap {overflow:hidden; position:relative; padding-bottom:68.57%; background:#e6e6e6;} 
#detail_swiper .img_wrap img {position:absolute; top:50%; left:0; width:100%; height:auto; transform:translateY(-50%);}
#detail_swiper span {display:block; font-size:16px; letter-spacing:0; line-height:25px; text-align:center; color:#fff; background:#8c8c8c;}
#detail_swiper span.after_txt {background:#2a3245;}
#detail_swiper .swiper-slide a:before {position:absolute; top:0; left:0; z-index:1; right:0; bottom:0; opacity:0; background:rgba(0,0,0,0.3); border:4px solid #30bbc3; content:''; transition:all 0.4s;}
#detail_swiper .swiper-slide.on a:before {opacity:1;}
#detail_swiper .swiper-button-prev,
#detail_swiper .swiper-button-next {left:0; right:0; z-index:10; width:100%; height:40px; margin:0; background:url('../images/swiper_bg.png') no-repeat; background-size:100% 100%;}
#detail_swiper .swiper-button-prev {top:0px; transform:rotate(180deg);}
#detail_swiper .swiper-button-next {top:auto; bottom:0px;}
#detail_swiper .swiper-button-prev::before,
#detail_swiper .swiper-button-next::before {position:absolute; bottom:2px; left:50%; z-index:5; width:41px; height:25px; margin:0; margin-left:-20px; background:url('../images/btn_next2.png') no-repeat center; content:'';}

/*
#detail_swiper .swiper-button-prev::before,
#detail_swiper .swiper-button-next::before {position:absolute; top:0; left:50%; z-index:5; width:41px; height:25px; margin:0; margin-left:-20px; background:url('../images/btn_next2.png') no-repeat center; content:'';}
#detail_swiper .swiper-button-prev::before {right:0;}
#detail_swiper .swiper-button-next::before {right:0;}
#detail_swiper .swiper-button-prev::after {position:absolute; top:0; left:0; right:0px; bottom:0; height:45px; z-index:6; event-pointer:none; background:url('../images/swiper_bg.png'); content:'';}
#detail_swiper .swiper-button-next::after {position:absolute; top:0; left:-30px; right:0px; bottom:0; z-index:6; event-pointer:none; background:linear-gradient(to left, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%); content:'';}
*/
#detail_swiper .swiper-button-disabled {opacity:0;}

#board_pop .keyword {margin:15px -5px; font-size:0;}
#board_pop .keyword span {display:inline-block; margin:5px; padding:0 20px; border-radius:17px; border:1px solid #2ab9c1; line-height:32px; font-size:18px; color:#2ab9c1; }
#board_pop .contents {padding:25px 30px; font-size:18px; color:#191919; line-height:25px; background:#f8f8f8;}
/*
#detail_swiper .swiper-button-prev:before {position:absolute; top:50%; right:0; z-index:2; width:60px; height:100%; background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); content:'';}
#detail_swiper .swiper-button-next:before {position:absolute; top:50%; right:0; z-index:2; width:60px; height:100%; background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); content:'';}
*/
/*
#detail_swiper .swiper-button-prev,
#detail_swiper .swiper-button-next {z-index:10; width:25px; height:41px; margin:0; margin-top:-30px; background:no-repeat center; transition:all 0.3s;} 
#detail_swiper .swiper-button-prev:before,
#detail_swiper .swiper-button-next:before {display:none;}
#detail_swiper .swiper-button-prev {left:0px; transform:rotate(180deg); background-image:url('../images/btn_next2.png');}
#detail_swiper .swiper-button-next {right:0px; background-image:url('../images/btn_next2.png');}

*/


#board_pop.admin {padding-bottom:130px;}
#board_pop.admin .scroll {position:relative; padding-bottom:30px;}
#board_pop.admin .scroll:after {position:absolute; left:0; right:40px; bottom:0; height:1px; background:#e6e6e6; content:'';}
#board_pop.admin .scroll > div {padding-bottom:30px;}
#board_pop .btn_wrap {position:absolute; right:60px; bottom:60px; text-align:right; font-size:0;}

.pop_dimmed_bg {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:100000; background:rgba(0,0,0,0.7);}

#pos {position:relative; top:-50px;}


.cbox {overflow:hidden;}
.cbox .bimg {float:left; width:550px;}
#detail_swiper {float:right; width:140px; height:514px;}
#detail_swiper .swiper-container {height:514px;}