html {-webkit-text-size-adjust: none; font-size: 9px;}
/* 반응형 규칙 */
.pc {display: none !important;}
.mo {display: block;}
img{width: 100%; height: auto;}

/* HEADER : start */
#wrap {position: relative; min-width: 320px; margin: 0 auto; padding: 0;}
header .topbar{position: fixed; display: block; width: 100%; height: 50px; background-color: transparent; transition: background-color 0.3s ease; z-index: 9999;}
header .topbar .progress-indicator{position:absolute; top:0; left:0; height:1px; background:#000; width:0%;}
header .topbar.fixed {position:fixed; top:0px; width: 100%; background: #fff; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); z-index:100;} 
header h1{position: absolute; top: 12px; left: 47px; width: 93px; height: 27px;}
header .grass{position: absolute; top: 18px; right: 70px; width: 17px; height: 17px; background: url(../../images/com/icon_grass.png) no-repeat; z-index: 9999; background-size: 100%;}
header .instagram-t{position: absolute; top: 18px; right: 40px; width: 17px; height: 17px; background: url(../../images/com/instagram_t.svg) no-repeat; z-index: 9999;}
header .share{position: absolute; top: 18px; right: 10px; width: 17px; height: 17px; background: url(../../images/com/share.svg) no-repeat; z-index: 9999;}
header .sns-layer{display: none; position: absolute; top: 50px; right: 10px; width: 240px; height: 85px; background:#fff; border: 1px solid #ddd; box-sizing: border-box; text-align: center; z-index: 9999;
/* 애니메이션 이름 */
animation-name: snsbox;
animation-duration:.2s;
animation-duration: leaner;
animation-iteration-count:1;
animation-direction:alternate;
animation-timing-function:all;}
@-webkit-keyframes snsbox {
    0% {right:0px;}
    100% {right:10px;}
}
header .sns-layer p{font-size: 1.5rem; font-weight: 400; color: #3e3e3e; padding: 9px 0 8px;}
header .sns-layer ul{display: inline-block;}
header .sns-layer ul li{float: left;}
header .sns-layer ul li + li{margin-left: 20px;}
header .sns-layer img{display: inline-block; width: 36px; height: 36px;}
header .grass-in{position: absolute; top: 10px; right: 10px; width: 17px; height: 17px; background: url(../../images/com/icon_grass.png) no-repeat; background-size: 100%; z-index: 9999;}
header .srarea{display: none; position: absolute; top: 8px; right: 60px; z-index: 9999;
/* 애니메이션 이름 */
animation-name: jaehee;
animation-duration:.2s;
animation-duration: leaner;
animation-iteration-count:1;
animation-direction:alternate;
animation-timing-function:all;}
@-webkit-keyframes jaehee {
    0% {right:0px;}
    100% {right:60px;}
}
header .searchbox{width: 175px; height: 34px; border-radius: 5px; padding: 0 50px 0 10px; box-sizing: border-box; font-size: 2rem; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}

/* 햄버거 열기 버튼 : START */
.ham-button{position: absolute; top: 17px; left: 12px; width: 18px; height: 17.5px; cursor: pointer; z-index: 9999;} 
.ham-button span{display: block; position: absolute; top: 50%; width: 20px; height: 2.5px; background: rgba(0,0,0,1); color: transparent; transform: translate(0,-50%); transition: all 0.2s;}
.ham-button span:before,
.ham-button span:after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2.5px; background: rgba(0,0,0,1); transition: all 0.2s;}
.ham-button span:before {top: -5px;}
.ham-button span:after {top: 5px;}
.ham-button:hover span:before {top: 0px; width : 10px; height: 1.5px; background: rgba(0,0,0,1); 
-webkit-transform: translateX(11px)translateY(3px)rotate(-45deg);
-moz-transform: translateX(11px)translateY(3px)rotate(-45deg);
-o-transform: translateX(11px)translateY(3px)rotate(-45deg);
transform: translateX(11px)translateY(3px)rotate(-45deg);
}
.ham-button:hover span:after {top: 0px; width : 10px; height: 1.5px; background: rgba(0,0,0,1);
-webkit-transform: translateX(11px)translateY(-3px)rotate(45deg);
-moz-transform: translateX(11px)translateY(-3px)rotate(45deg);
-o-transform: translateX(11px)translateY(-3px)rotate(45deg);
transform: translateX(11px)translateY(-3px)rotate(45deg);
;}
/* 햄버거 열기 버튼 : START */

/* 햄버거 닫기 버튼 : START */
.close{position: absolute; top: 30px; left: 30px; width: 25px; height: 25px; z-index: 10010; } 
.close span{display: block; position: absolute; top: 50%; width: 20px; height: 2.5px; background: rgba(255,255,255,1); color: transparent; transform: translate(0,-50%); transition: all 0.12s;}
.close span {background: transparent; transition: all 0.12s;}
.close span:before{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: rgba(255,255,255,1); transition: all 0.3s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);}
.close span:after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: rgba(255,255,255,1); transition: all 0.3s;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);}

.close:hover span {background: rgba(255,255,255,1);}
.close:hover span:before {top: 0px; width : 13px; height: 2px; background: rgba(255,255,255,1); 
-webkit-transform: translateX(-4px)translateY(4px)rotate(-135deg);
-moz-transform: translateX(-4px)translateY(4px)rotate(-135deg);
-o-transform: translateX(-4px)translateY(4px)rotate(-135deg);
transform: translateX(-4px)translateY(4px)rotate(-135deg);
}
.close:hover span:after {top: 0px; width : 13px; height: 2px; background: rgba(255,255,255,1);
-webkit-transform: translateX(-4px)translateY(-4px)rotate(135deg);
-moz-transform: translateX(-4px)translateY(-4px)rotate(135deg);
-o-transform: translateX(-4px)translateY(-4px)rotate(135deg);
transform: translateX(-4px)translateY(-4px)rotate(135deg);
;}
/* 햄버거 닫기 버튼 : END */
/* HEADER : END */

/* 사이드 메뉴 네비게이션 NAV - start */
#menu-bar{width: 50%; height: 100%; position: fixed; top: 0px; left: -50%; padding: 20px 20px 20px 30px; box-sizing: border-box; z-index: 10000; color: #fff; font-size: 2rem; background-color: #000; text-align: left; transition: All 0.2s ease; 
-webkit-transition: All 0.2s ease; 
-moz-transition: All 0.2s ease; 
-o-transition: All 0.2s ease;}
#menu-bar.open{left: 0px; overflow:scroll}
.page_cover.open{display: block;}
.page_cover{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; display: none;}
#menu-bar ul{margin-top: 60px;}
#menu-bar ul li{line-height: 50px}
#menu-bar ul li p{font-size: 1.7rem; line-height: 28px; color: rgba(255,255,255,0.7);}
#menu-bar ul li p:last-child{margin-bottom: 15px;}
#menu-bar ul li > a:hover{display: inline-block; color: #ffda00; font-weight: 600;}
/* 사이드 메뉴 네비게이션 NAV : END */

/* MAIN : START */

/* 상단 visual 영역 : START */
.visual{position: relative; background: url(../../images/m_visual.jpg) no-repeat 50%; max-width: 100%; height: auto; background-size: cover;}
.visual .screen{position: absolute; background-color: rgba(0,0,0,0.3); width: 100%; height: 900px;}
.visual .mvtop{padding: 70px 3% 35px; box-sizing: border-box;}
.visual .mvtop .leftarea{float: none; width: 100%;}
.visual .mvtop .titimg{position: relative; width: 100%; height: 0px; padding-top: calc(55%); overflow: hidden;}
.visual .mvtop .titimg img{position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.visual .mvtop .tbox{position: relative; bottom: 0; left: 0; width: 100%; height: 107px; background: rgba(0,0,0,.8); padding: 14px; box-sizing: border-box;}
.visual .mvtop .tbox .tt{font-size: 2.6rem; font-weight: 600; color: #fff; padding-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.visual .mvtop .tbox .st{font-size: 1.6rem; font-weight: 200; color: #fff; padding: 0 10px 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 2.4rem; height: 42px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.visual .mvtop .tbox .tt:before {content: ''; display: inline-block; /*margin-right: 13px;*/ margin-bottom: -3px; width: 8px; height: 22px; /*background-color: #ffda00;*/}

.banner-area{position: relative; min-height: 95px;}
.line-banner{position: absolute; bottom: 0; width: 100%; min-height: 95px; background: #fed90d; text-align: center;}
.line-banner .ctbox{position: relative; display: inline-block; height: 100%; margin: 0 auto; text-align: center; font-size: 1.5rem; padding-left: 0; box-sizing: border-box;}
/*.visual .line-banner .ctbox:before{display: none;}*/
.line-banner .ctbox:before{content: ''; display: inline-block; position: absolute; left: -38px; top: 21%; width: 30px; height: 30px; background: url(../../images/com/instagram_c.svg) no-repeat;}
.line-banner .ctbox em{display: block; line-height: 23px; font-family: 'GmarketSans'; font-size: 2.4rem; font-weight: 700; vertical-align: baseline; padding: 24px 0 0;}
.line-banner .ctbox span{display: block; vertical-align: baseline;}
.line-banner .ctbox a{display: inline-block; border: 1px solid #000; padding: 4px 20px; margin: 3px 0 8px;}
.banner-area.addbn{position: relative; min-height: 96px; border-top: 1px solid #000;}
.banner-area.addbn .line-banner .ctbox:before{content: ''; display: inline-block; transform: translateY(30%); width: 40px; height: 40px; background: none; margin-right: 10px;}
.banner-area.addbn .ctbox em{font-size: 2rem;}
/*

.banner-area_{position: relative; min-height: 95px;}
.line-banner .ctbox_{position: relative; display: inline-block; height: 100%; margin: 0 auto; text-align: center; font-size: 1.5rem; padding-left: 0; box-sizing: border-box;}
.line-banner .ctbox_ em{display: block; line-height: 23px; font-family: 'GmarketSans'; font-size: 2.4rem; font-weight: 700; vertical-align: baseline; padding: 17px 0 0;}
.line-banner .ctbox_ span{display: block; vertical-align: baseline;}
.line-banner .ctbox_ a{display: inline-block; border: 1px solid #000; padding: 1px 20px; margin: 3px 0 8px;}
*/



.visual .scroll{display: none;}
.visual .scroll img{display: none;}

/* 이달의 키워드 : START */
.mvtop .tagbox{position: relative;}
.mvtop .wordtit{position: relative; margin-top: 30px; padding-bottom: 15px;}
.mvtop .wordtit .tit{display: inline-block; color: #fff; font-size: 2.5rem;}
.mvtop .wordtit .tit em{color: #f2c41d; font-weight: 600; text-shadow: 2px 2px 2px rgba(0,0,0,0.8);}
.mvtop .wordtit span{position: absolute; right: 0; top: 10px; font-size: 1.4rem; color: rgba(255,255,255,0.7); text-shadow: 2px 2px 2px rgba(0,0,0,0.8);}
.mvtop .keyword{height: 65px; overflow: hidden;}
.mvtop .keyword li{float: left; background: #000; font-size: 1.6rem; color: #fff; text-align: center; margin: 0 5px 5px 0;}
.mvtop .keyword li:last-child{margin-right: 0;}
.mvtop .keyword li a{display: block; line-height: 30px; padding: 0 10px; box-sizing: border-box;}
/* 이달의 키워드 : END */

/* 포토 갤러리 : START */
.mvtop .m-gallery{position: relative; float: none; width: 100%; font-size: 0;}
.mvtop .pgtit{position: relative; font-size: 2.4rem; font-weight: 600; color: #fff; padding: 35px 0 13px;}
.mvtop .pgtit:before {content: ''; display: inline-block; margin-right: 15px; margin-bottom: -4px; width: 8px; height: 22px; background-color: #ffda00;}
.mvtop .m-gallery .ptarea{display: block; width: 100%;}
.mvtop .m-gallery .cont{position: relative; display: inline-block; width: 31%; overflow: hidden;}
.mvtop .m-gallery .ptarea a + a{margin-top: 0; margin-left: 3.5%;}
.mvtop .m-gallery .photo-frame{position: relative; width: 96%; height: 110px; border: 2px solid #f2c41d; box-sizing: border-box; overflow: hidden;}
.mvtop .m-gallery .cont .photo-frame img{position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.mvtop .m-gallery .photo-frame .screen{position: absolute; top: 0px; left: 0px; width: 100%; height: 110px; background: rgba(0,0,0,0.45); opacity: 0; transition: all 0.2s; z-index: 10;}
.mvtop .m-gallery .cont:hover .screen{opacity: 1;}

.mvtop .m-gallery .cont .cross{position: absolute; width: 40px; height: 40px; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; opacity: 0;}
.mvtop .m-gallery .cont .cross .cr-w{display: inline-block; position: absolute; top: 50%; left: 25%; width: 20px; height: 1px; background: #ffda00;}
.mvtop .m-gallery .cont .cross .cr-h{display: inline-block; position: absolute; top: 25%; left: 50%; width: 1px; height: 20px; background: #ffda00;}
.mvtop .m-gallery .cont:hover .cross{transition: all 0.3s; transform: rotate(180deg) translate(19px, 19px); opacity: 1; z-index: 99;}

.mvtop .m-gallery .cont .tbox{position: relative; width: 100%; min-height: 90px; overflow: hidden; background: #fff; padding: 13px 12px; box-sizing: border-box;}
.mvtop .m-gallery .cont .tbox span{display: block;}
.mvtop .m-gallery .cont .tbox .tt{font-size: 2.3rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mvtop .m-gallery .cont .tbox .st{display: inline-block; width: 90%; font-size: 1.6rem; font-weight: 500; color: rgba(46,46,46,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mvtop .m-gallery .cont .tbox .txticon{position: absolute; bottom: 20px; right: 20px; width: 23px; height: 25px; background: url(../../images/com/icon_note.png) no-repeat;}

.mvtop .m-gallery .num-list{position:relative; display: block; width: 100%; text-align: center;}
.mvtop .m-gallery .num-list .btnbox{display: inline-block; margin-top: 13px;}
.mvtop .m-gallery .num-list button + button{margin-top: 0; margin-left: 10px;}
.mvtop .m-gallery .num-list button{display: inline-block; width: 35px; height: 35px; line-height: 32px; text-align: center; font-family: 'Scoredream'; font-size: 1.3rem; font-weight: 600; color: #fff;}
.mvtop .m-gallery .num-list .check{border: 2px solid #ffda00; border-radius: 50%; color: #ffda00;}
.mvtop .m-gallery .photo-frame span{position: absolute; background: #f2c41d; transition: all 0.35s;}
.mvtop .m-gallery .photo-frame span:nth-child(1){left: -1px; top: -1px; width: 0%; height: 5px;}
.mvtop .m-gallery .cont:hover .photo-frame span:nth-child(1){width: 100%; padding-left: 2px;-webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; z-index: 99;}
.mvtop .m-gallery .photo-frame span:nth-child(2){right: -1px; top: -1px; height: 0%; width: 5px;}
.mvtop .m-gallery .cont:hover .photo-frame span:nth-child(2){height: 100%; padding-top: 2px;-webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; z-index: 99;}
.mvtop .m-gallery .photo-frame span:nth-child(3){right: -1px; bottom: -1px; width: 0%; height: 5px;}
.mvtop .m-gallery .cont:hover .photo-frame span:nth-child(3){width: 100%; padding-right: 2px;-webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; z-index: 99;}
.mvtop .m-gallery .photo-frame span:nth-child(4){left: -1px; bottom: -1px; height: 0%; width: 5px;}
.mvtop .m-gallery .cont:hover .photo-frame span:nth-child(4){height: 100%; padding-bottom: 2px;-webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; z-index: 99;}
/* photo frame : END */
/* 포토 갤러리 : END */
/* 상단 visual 영역 : END */


/* 기사 콘텐츠 : START */
.cont-area{font-size: 1.6rem; padding: 20px 0 25px; background: #f8f8f8; box-sizing: border-box;}
.cont-area .tit{width: 100%; font-size: 2.6rem; font-weight: 700; text-align: center; margin: 20px auto 0; text-align: left; padding-left: 15px;}
.cont-area .tit:before{content: ""; display: inline-block; width: 8px; height: 23px; background: #fed90d; margin-bottom:-3px; margin-right: 10px;}
.cont-area ul .card{float: left; margin: 4%; background: #fff; width: 92%;}
.cont-area ul .card:hover{transition: all 0.3s;
-webkit-box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.15);
box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.15);
}
.card{position: relative}
.card .imgbox{position: relative; width: 100%; height: 260px; overflow: hidden;}
.card .imgbox > img{position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.card .imgbox .screen{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.35); opacity: 0; transition: all 0.2s; z-index: 10;}
.card a:hover .screen{opacity: 1;}
.card .imgbox .newsbox{position: absolute; top: 20px; left: 20px;}
.card .imgbox .texticon{display: inline-block; border-radius: 0.3rem; border: 0.2rem solid #fff; padding: 0.3rem 0.4rem 0.4rem; text-align: center; font-size: 1.4rem; line-height: 1.4rem; font-weight: 500; color: #fff;}
.card .textbox{padding: 2.5rem; box-sizing: border-box;}
.card .textbox .subject{font-size: 3.2rem; font-weight: 700;}
.card .textbox .writer{padding: 2rem 0 1.7rem; font-size: 1.8rem; font-weight: 500; line-height: 23px;}
.card .textbox span{color: rgba(0,0,0,.6); font-size: 1.6rem; font-weight: 500; margin-right: 5px;}
/* 기사 콘텐츠 : END */


/* ad banner : START */
.ad-area .bannerzone{position: relative; width:100%; margin: 0 auto;}
.ad-area .bannerzone .btnbox{position: absolute; top: 10px; right: 15px;}
.ad-area .bannerzone .btnbox button{width: 13px; height: 13px; background: #ccc; border-radius: 50%;}
.ad-area .bannerzone .btnbox button + button{margin-left: 8px;}
.ad-area .bannerzone .btnbox button.on{background: #fed90d;}
/* ad banner 영역 : END */


/* 공지사항 : START */
.notice-area .area-c{padding: 50px 3% 40px; box-sizing: border-box;}
.notice-area > ul > li{float: none;}
.notice-area > ul > li + li{margin-left: 0;}
.notice-area .notice{position: relative; width: 100%; margin-bottom: 3rem;}
.notice-area .next{width: 100%;}
.notice-area .notice .tit{font-size: 2.6rem; font-weight: 700; padding-bottom: 1rem; border-bottom: 1px solid #ccc; margin-bottom: 5px;}
.notice-area .notice .tit:before{content: ""; display: inline-block; width: 8px; height: 23px; background: #fed90d; margin-bottom:-3px; margin-right: 10px;}
.notice-area .notice .allview{display: inline-block; position: absolute; top: 15px; right: 0; font-size: 1.6rem; font-weight: 500;}
.notice-area .notice > ul > li{font-size: 1.8rem; line-height: 32px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notice-area .notice .btnbox{text-align: center; margin: 10px 0 20px;}
.notice-area .notice button{width: 10px; height: 10px; border-radius: 50%; background: #ccc;}
.notice-area .notice button + button{margin-left: 8px;}
.notice-area .notice button.on{background: #fed90d;}

.notice-area .next{position: relative;}
.notice-area .next .screen{position: absolute; background-color: rgba(0,0,0,0.3); width: 100%; height: 251px;}
.notice-area .txtbox{position: absolute; bottom: 0px; left: 0px; color: #fff;background: rgba(0,0,0,0.5); right:0; height:100px;padding:30px 0 0 30px;}
.notice-area .txtbox p:first-child{font-size: 2.8rem;}
.notice-area .txtbox p:first-child span{font-weight: 700;}
.notice-area .txtbox p:last-child{font-size: 1.6rem; line-height: 21px; padding-top: 4px; margin-left: 20px;}
.notice-area .txtbox p:first-child:before{content: ""; display: inline-block; width: 8px; height: 22px; background: #fed90d; margin-bottom:-3px; margin-right: 13px;}
/* 공지사항 : END */

/* 나도 사진작가 : START */
.imphoto-area{background: #fafafa;}
.imphoto-area .impt{position: relative; padding: 55px 33px 60px; box-sizing: border-box;}
.imphoto-area .impt > .box {position: relative; overflow: hidden;}
.imphoto-area .impt .ptbox {position: relative; width: 9000px;}
.imphoto-area .impt .tit{display: inline-block; font-size: 2.6rem; font-weight: 700; text-align: center; margin-bottom: 15px;}
.imphoto-area .impt .tit:before{content: ""; display: inline-block; width: 8px; height: 23px; background: #fed90d; margin-bottom:-3px; margin-right: 10px;}
.imphoto-area .impt .allview{position: absolute; display: inline-block; top: 65px; right: 33px; font-size: 1.6rem; font-weight: 500;}
.imphoto-area .impt .prev{position: absolute; top: 280px; left: 2%;}
.imphoto-area .impt .next{position: absolute; top: 280px; right: 2%;}
.imphoto-area .impt .arbtn img{width: 70%;}
.imphoto-area .impt .ptbox li{float: left;}
.imphoto-area .impt .ptbox li + li{margin-left: 15px;}

.imphoto-area .impt .photo-frame{position: relative; width: 272px; height: 342px; overflow: hidden;}
.imphoto-area .impt .photo-frame img{position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.imphoto-area .impt .photo-frame .screen{position: absolute; top: 0px; left: 0px; width: 272px; height: 342px; background: rgba(0,0,0,0.6); opacity: 0; transition: all 0.2s; z-index: 10;}
.imphoto-area .impt .photo-frame:hover .screen{opacity: 1;}

.imphoto-area .impt .photo-frame .cross{position: absolute; width: 40px; height: 40px; top: 50%; left: 50%; transform: translate(-20px, -20px); transition: all 0.3s; opacity: 0;}
.imphoto-area .impt .photo-frame .cross .cr-w{display: inline-block; position: absolute; top: 20px; width: 40px; height: 1px; background: #ffda00;}
.imphoto-area .impt .photo-frame .cross .cr-h{display: inline-block; position: absolute; left: 20px; width: 1px; height: 40px; background: #ffda00;}
.imphoto-area .impt .photo-frame:hover .cross{transition: all 0.3s; transform: rotate(180deg) translate(19px, 19px); opacity: 1; z-index: 99;}
/* photo frame - start */
.imphoto-area .impt .photo-frame span{position: absolute; background: #f2c41d; transition: all 0.35s;}
.imphoto-area .impt .photo-frame span:nth-child(1){left: -1px; top: -1px; width: 0%; height: 8px;}
.imphoto-area .impt .photo-frame:hover span:nth-child(1){width: 100%; padding-left: 2px;-webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; z-index: 99;}
.imphoto-area .impt .photo-frame span:nth-child(2){right: -1px; top: -1px; height: 0%; width: 8px;}
.imphoto-area .impt .photo-frame:hover span:nth-child(2){height: 100%; padding-top: 2px;-webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; z-index: 99;}
.imphoto-area .impt .photo-frame span:nth-child(3){right: -1px; bottom: -1px; width: 0%; height: 8px;}
.imphoto-area .impt .photo-frame:hover span:nth-child(3){width: 100%; padding-right: 2px;-webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; z-index: 99;}
.imphoto-area .impt .photo-frame span:nth-child(4){left: -1px; bottom: -1px; height: 0%; width: 8px;}
.imphoto-area .impt .photo-frame:hover span:nth-child(4){height: 100%; padding-bottom: 2px;-webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; z-index: 99;}
/* photo frame - end */
/* 나도 사진작가 - END */

/* 과월호 보기 - START */
.afterm-area .mbook{position: relative; padding: 55px 33px 0; box-sizing: border-box;}
.afterm-area .mbook .tit{display: inline-block; font-size: 2.6rem; font-weight: 700; text-align: center; margin: 0 0 20px 0;}
.afterm-area .mbook .tit:before{content: ""; display: inline-block; width: 8px; height: 23px; background: #fed90d; margin-bottom:-3px; margin-right: 10px;}
.afterm-area .mbook .allview{position: absolute; display: inline-block; top: 65px; right: 33px; font-size: 1.6rem; font-weight: 500;}

.afterm-area .swiper-container {width: 100%; padding-top: 50px; padding-bottom: 50px;}
.afterm-area .swiper-slide {background-color: #000; text-align: center; height: 240px;}
/* 과월호 보기 - END */
/* main end */


/* -----------------  서브페이지  ------------------ */

/* 월호 보기 : START */

/* 상단 sub-visual 영역 - START */
.sub-visual{position: relative; background: url(../../images/sub_visual.jpg) no-repeat; height: 250px; background-size: cover;}
.sub-visual .screen{ position: absolute; background-color: rgba(0,0,0,0.3); width: 100%; height: 250px;}
.sub-visual .mtxt{text-align: center; padding: 10rem 0 0; box-sizing: border-box; color: #fff;}
.sub-visual .mtxt .date{position: relative; display: inline-block; font-size: 1.9rem; font-weight: 300;}
.sub-visual .mtxt .date button{position: absolute; top: 0; right: -30px; width: 25px; height: 25px;}
.sub-visual .mtxt .date button img{width: 17px; height: 11px; transform: translateY(-20%);}
.sub-visual .mtxt .mcopy{position: relative; font-size: 3.5rem; font-weight: 500; padding: 1.8rem 4% 0; line-height: 4.2rem;}
.sub-visual .mtxt .scopy{position: relative; font-size: 1.6rem; font-weight: 400; padding-top: 1.8rem;}
.sub-visual .booklist{position: absolute; top: 120px; left: 50%; width: 100%; height: 106px; transform: translateX(-50%); text-align: center;}
.sub-visual .booklist .listlayer{position: absolute; left: 50%; transform: translateX(-50%); width: 90%; height: 100%; overflow: hidden;}
.sub-visual .booklist .listlayer > ul{position: absolute; display: block; width: 2000px;}
.sub-visual .booklist .listlayer > ul li{position: relative; float: left;}
.sub-visual .booklist .listlayer > ul li img{ width: 73px; height: 106px;}
.sub-visual .booklist .listlayer > ul li + li{margin-left: 10px;}
.sub-visual .booklist .listlayer > ul .tbox{opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 2; text-align: center; transition: all 0.2s;}
.sub-visual .booklist .listlayer > ul .tbox span{display: block; font-size: 1.6rem;}
.sub-visual .booklist .listlayer > ul .screen{opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); border: 6px solid #f2c41d; box-sizing: border-box; transition: all 0.2s;}
.sub-visual .booklist .listlayer > ul li:hover .tbox{opacity: 1;}
.sub-visual .booklist .listlayer > ul li:hover .screen{opacity: 1;}
.sub-visual .booklist .btn-prev{display: none;}
.sub-visual .booklist .btn-next{display: none;}
/* 상단 sub-visual 영역 - END */

/* 기사검색 결과 영역 : START */
.sub-visual .search{text-align: center; padding: 10rem 6% 0; box-sizing: border-box; color: #fff; font-size: 2.8rem;}
.sub-visual .search .srbox{display: block; position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -35%); z-index: 3; padding: 0 6%; box-sizing: border-box;}
.sub-visual .search .mcopy{display: inline-block; max-width: 100%; padding-bottom: 12px;}
.sub-visual .search .mcopy em{color: #ffda00; font-weight: 500;}
.sub-visual .search .wcopy{font-size: 2.8rem; font-weight: 500; padding-bottom: 10px;}
.sub-visual .search .result{position: relative; display: inline-block; max-width: 100%; width: 100%; max-height: 55px; padding-bottom: 8px; border-bottom: 2px solid #fff; text-align: center; font-size: 2.5rem;}
.sub-visual .search .result span{display: inline-block; width: 100%; white-space: nowrap; overflow: hidden;}
.sub-visual .search .result input{display: inline-block; width: 100%; height: 45px; white-space: nowrap; overflow: hidden; background: transparent; border: none; color: #fff; font-size: 2.5rem; text-align: center; margin-right: 10px; box-shadow: none;}
.sub-visual .search .result input:focus {outline: none;}
.sub-visual .search .result button{position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 30px; height: 30px;}
.sub-visual .search .result img{width: 25px; height: 25px;}
.sub-visual .search .rs{font-size: 1.7rem; margin-top: 5px;}
/* 기사검색 결과 영역 : END */

/* 기사 콘텐츠(서브페이지) : START */
.sub-magazine{width: 100%; margin: 0 auto 0; padding: 10px 0 10px; background: #fff;}
.sub-magazine li{float: none;}
.sub-magazine > li:first-child{width: 92%; height: auto; margin: 0 auto;}
.sub-magazine > li:last-child{position:relative;width: 100%; height: auto; margin-left: 0; padding: 20px 6% 5px; box-sizing: border-box;}
.sub-magazine li .titimg{position: relative; width: 100%; height: 280px; overflow: hidden;}
.sub-magazine li .titimg img{position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.sub-magazine li .tbox{position: relative; width: 100%; min-height: 95px; background: rgba(0,0,0,.8); padding: 15px 17px; box-sizing: border-box; color: #fff;}
.sub-magazine li .tbox .tt{font-size: 3.4rem; font-weight: 600; padding-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sub-magazine li .tbox .tt:before {content: ''; display: inline-block; margin-right: 15px; margin-bottom: -3px; width: 8px; height: 28px; background-color: #ffda00;}
.sub-magazine li .tbox .writer span{max-width: 40%; display: inline-block; font-size: 1.8rem; margin: 0 0 0 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sub-magazine .photozone{position: relative;}
.sub-magazine .photozone .fullnews{position: absolute; top: 20px; left: 20px; border-radius: 0.3rem; border: 0.2rem solid #fff; padding: 0.3rem 0.4rem 0.4rem; text-align: center; font-size: 1.4rem; line-height: 1.4rem; font-weight: 500; color: #fff;}

.sub-magazine .textzone p{font-size: 1.8rem; font-weight: 400; line-height: 2.8rem;}
.sub-magazine .textzone p em{display: block; margin-bottom: 25px; font-family: 'Scoredream'; font-weight: 600; text-overflow: ellipsis; white-space: normal; line-height: 2.7rem; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;}
.sub-magazine .textzone p > span{display: block;  margin-bottom: 20px; text-overflow: ellipsis; white-space: normal; line-height: 2.7rem; min-height: 63px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.sub-magazine .textzone .keyword{max-height: 75px; overflow: hidden; margin-top: 15px; color: #111; font-weight: 400;}
.sub-magazine .textzone .keyword li{float: left; display: inline-block; font-size: 1.6rem; text-align: center; border: 1px solid #ccc;}
.sub-magazine .textzone .keyword li + li{margin-right: 15px; margin-bottom: 10px;}
.sub-magazine .textzone .keyword li:first-child{display: inline-block; margin-right: 15px;}
.sub-magazine .textzone .keyword li{display: inline-block; line-height: 28px; padding: 0 6px; box-sizing: border-box;}
.sub-magazine .textzone .deepview{position: relative; display: block; width: 100%; margin-top: 20px; padding: 10px 0; text-align: center; color: #000; background: #fede2a; font-size: 2.2rem; font-weight: 400; box-sizing: border-box;}
/* 기사 콘텐츠(서브페이지) : END */

/* 포토 갤러리 : START */
.s-gallery{position: relative; padding: 10px 14px 60px; box-sizing: border-box; text-align: center; background: #f8f8f8;}
.s-gallery .menu-area{position: relative;}
.s-gallery .menu-area .prevar{position: absolute; top: 36%; left: 0px; transform: translateY(-50%); width: 30px; height: 30px;}
.s-gallery .menu-area .nextar{position: absolute; top: 36%; right: 0px; transform: translateY(-50%); width: 30px; height: 30px;}
.s-gallery .menu-area button img{width: 12px; height: 22px; opacity: 40%;}
.s-gallery .tit{font-size: 3rem; font-weight: 700; text-align: center; margin-bottom: 15px;}
.s-gallery ul{display: inline-block;}
.s-gallery .menu-area{position: relative; margin-bottom: 15px;}
.s-gallery .menu-bar{position: relative; display: inline-block; width: 80%; height: 50px; overflow: hidden;}
.s-gallery .menu-bar .subject{position: absolute; left: -20px; width: 3000px;}

.s-gallery .subject li{float: left; color: rgba(0,0,0,0.6);}
.s-gallery .subject li button{display: inline-block; font-size: 1.8rem; padding: 7px 5px; border-bottom: 3px solid transparent;}
.s-gallery .subject li:hover button{border-bottom: 3px solid #ffda00; font-weight: 500; box-sizing: border-box;}
.s-gallery .subject li button.on{border-bottom: 3px solid #ffda00; font-weight: 500; box-sizing: border-box;}
.s-gallery .subject li + li{margin-left: 10px;}
.s-gallery .pt-area{width: 100%;}
.s-gallery .pt-area li{position: relative; float: left; width: 48%; background: #eee; overflow: hidden; margin-bottom: 4%;}
.s-gallery .pt-area li:nth-child(2n){margin-left: 4%;}
.s-gallery .pt-area li button{width: 100%; height: 0; padding-top: calc(100%);}
.s-gallery .pt-area li img{position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.s-gallery .pt-area .screen{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.35); opacity: 0; transition: all 0.2s; z-index: 10;}
.s-gallery .pt-area li:hover .screen{opacity: 1;}
/* 포토 갤러리 : END */

/* 지난주요기사들 보기 : START */
.after-news{background: #f8f8f8;}
.after-news .mbook{position: relative; padding: 5px 33px 0; box-sizing: border-box;}
.after-news .mbook .tit{font-size: 3rem; font-weight: 700; text-align: center; margin-bottom: 35px;}

.after-news .swiper-container {padding-top: 50px; padding-bottom: 50px;}
.after-news .swiper-slide {position: relative; background: #000; width: 50%; height: 200px;}
/* 지난주요기사들 보기 : END */

/* 월호 보기 : END */

/* NEWS 기사 페이지 : START */
.news-visual{position: relative; background: url(../../images/newpage_topimg.jpg) no-repeat center; background-size: cover; height: 0px; padding-bottom: calc(100%);}
.news-visual .screen{position: absolute; background-color: rgba(0,0,0,0.3); width: 100%; height: 0; padding-top: calc(100%); z-index: 2;}
.news-visual .news-top{position: relative; width: 100%; height: 100%; margin: 0 auto;}
.news-visual .news-top .title{position: absolute; top: 180px; left: 10%; color: #fff; z-index: 3;}
.news-visual .news-top .subject{position: relative; font-size: 3.4rem; font-weight: 500; padding: 0 25px 10px 0;}
.news-visual .news-top .subject:before {content: ''; display: inline-block; position: absolute; top: -12px; left: 0; width: 29px; height: 4px; background: #fede2a; }
.news-visual .news-top .scopy{position: relative; font-size: 1.8rem; padding-right: 25px;}
.news-visual .news-top .scopy span{display: block;}

.news-cont{width: 100%; margin: 0 auto; padding: 40px 4% 50px; box-sizing: border-box; text-align: center;}
.news-cont .news{position: relative; display: inline-block; width: 100%; text-align: left; font-size: 1.8rem; line-height: 3rem;}
.news-cont .news > img{max-width: 100%; height: auto;}
.news-cont .news .mc{font-family: 'Scoredream'; font-size: 1.9rem; line-height: 3rem; padding-bottom: 23px; font-weight: 600;}
.news-cont .news .mc:before{content:'';	display:inline-block; position:absolute; top:-15px; left:0; width:28px;	height:3px;	background:#fede2a;}
.news-cont .news .sc{padding-bottom: 23px; font-weight: 400;}

.news-cont .news .sell-01{position: relative; width: 100%;}
.news-cont .news .sell-01 figure{width: 100%; overflow: hidden;}
.news-cont .news .sell-02{position: relative; width: 100%;}
.news-cont .news .sell-02 figure{width: 100%; height: 100%; overflow: hidden;}
.news-cont .news .sell-02 figure:first-child{float: left;}
.news-cont .news .sell-02 figure:last-child{float: right;}
/*.news-cont .news .sell-02 figure + figure{margin-left: 3%;}*/
.news-cont .news .imgbox{padding-bottom: 40px;}
.news-cont .news .imgbox figcaption{position: relative; font-size: 1.4rem; line-height: 2.5rem; padding-top: 10px; font-weight: 500;}
.news-cont .news .imgbox figcaption:before{content: ''; display: inline-block; position: absolute; bottom: -15px; left: 0; width:28px; height: 3px; background: #ffda00;}
.news-cont .news .image{position: relative; padding-bottom: 30px;}
.news-cont .news .image figcaption{position: relative; font-size: 1.4rem; line-height: 2.5rem; padding-top: 10px; font-weight: 500; text-align: left;}
.news-cont .news .image figcaption:before{content: ''; display: inline-block; position: absolute; bottom: -15px; left: 0; width: 28px; height: 3px; background: #ffda00;}

.news-cont .news .sell-01{position: relative; width: 1028px; overflow: hidden;}
.news-cont .news .keyword{margin-top: 10px; padding-bottom: 20px;}
.news-cont .news .keyword li{float: left; display: inline-block; font-size: 1.6rem; text-align: center; border: 1px solid #ccc;}
.news-cont .news .keyword li + li{margin-right: 10px; margin-bottom: 7px;}
.news-cont .news .keyword li:first-child{margin-right: 10px;}
.news-cont .news .keyword li{display: inline-block; line-height: 28px; padding: 0 10px; box-sizing: border-box;}

/* 뉴스기사 포토 갤러리 - START */
.news-cont .pt-area{width: 100%; margin-top: 20px;}
.news-cont .pt-area li{position: relative; float: left; width: 48%; background: #eee; overflow: hidden; margin-bottom: 4%;}
.news-cont .pt-area li:nth-child(2n){margin-left: 4%;}
.news-cont .pt-area li button{width: 100%; height: 0; padding-top: calc(100%);}
.news-cont .pt-area li img{position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.news-cont .pt-area .screen{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.35); opacity: 0; transition: all 0.2s; z-index: 10;}
.news-cont .pt-area li:hover .screen{opacity: 1;}
.news-cont .photoGallary{font-size:2.5rem; font-weight:700; padding-bottom:5px; position:relative; margin-top:40px;}
.news-cont .photoGallary:before{content:'';	display:inline-block; position:absolute; top:-13px; left:0; width:28px; height:3px; background:#fede2a;}
/* 뉴스기사 포토 갤러리 : END */

/* 다른기사보기 네비게이션 : START */
.nav-btm{position: fixed; bottom: 0; width: 100%; z-index: 99;}
.nav-btm .view-area{display: none;}
.nav-btm .view-area.on{top: 0px;}
.nav-btm .news-nav{position: absolute; bottom: 0; width: 100%; height: 50px; border-top: 1px solid #ccc; background: #fff; text-align: center;}
.nav-btm .news-nav button{display: inline-block; font-size: 1.6rem; font-weight: 400; padding: 3px 5px;}
.nav-btm .news-nav button span{display: inline-block; font-size: 1.4rem; font-weight: 300; /*vertical-align: baseline;*/}
.nav-btm .news-nav .prev-news{position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.nav-btm .news-nav .prev-news:before{content: ''; display: inline-block; width: 8px; height: 12px; background: url(../../images/com/arrow_prev_g.svg) no-repeat; margin-right: 7px; opacity:50%;}
.nav-btm .news-nav .prev-news span{padding: 0 15px 0 0;}
.nav-btm .news-nav .prev-news .arrow_txt{color:#898989;}
.nav-btm .news-nav .other-news{display: none;}
.nav-btm .news-nav .other-news:before {display: none;}
.nav-btm .news-nav .next-news{position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.nav-btm .news-nav .next-news:after{content: ''; display: inline-block; width: 8px; height: 12px; background: url(../../images/com/arrow_next_g.svg) no-repeat; margin-left: 8px; opacity:50%;}
.nav-btm .news-nav .next-news span{padding: 0 0 0 15px;}
.nav-btm .news-nav .next-news .arrow_txt{color:#898989;}

.nav-btm .view-area .more-news{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1060px; overflow: hidden; text-align: center;}
.nav-btm .view-area .more-news ul{display: inline-block;}
.nav-btm .more-news li{position: relative; float: left; overflow: hidden;}
.nav-btm .more-news li button{width: 235px; height: 140px;}
.nav-btm .more-news li img{position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.nav-btm .more-news li + li{margin-left: 30px;}
.nav-btm .more-news .screen{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.4); opacity: 1; transition: all 0.2s; z-index: 10;}
.nav-btm .more-news li:hover .screen{background: rgba(0,0,0,0.1);}
.nav-btm .more-news li span{position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); font-size: 2.2rem; font-family: 'Scoredream'; font-weight: 500; color: #fff; z-index: 10;}
/* 다른기사보기 네비게이션 : END */

/* NEWS 기사 페이지 : END */

/* 상단 sub-visual 영역 : START */
.sub-title{position: relative; height: 230px;}
.sub-title .top .title{position: absolute; top: 45%; left: 50%; width: 100%; transform: translateX(-50%); color: #fff; text-align: center;}
.sub-title .top .scopy{font-size: 1.6rem; padding-bottom: 3px; letter-spacing: 1px;}
.sub-title .top .subject{font-size: 3.6rem; font-weight: 500;}

.sub-title.pastmgz{background: url(../../images/sub_pastmgz.jpg) no-repeat 50%; background-size: cover;}
.sub-title.notice{background: url(../../images/sub_notice.jpg) no-repeat 50%; background-size: cover;}
.sub-title.int{background: url(../../images/sub_int.jpg) no-repeat 50%; background-size: cover;}
/* 상단 sub-visual 영역 : END */

/* 과월호 보기 : START */
.mgz-area{width: 100%; margin: 0 auto;}
.mgz-area .mgz{position: relative; padding: 30px 4% 50px; box-sizing: border-box; text-align: center;}
.mgz-area .mgz .yearall{position: relative; width: 100%;}
.mgz-area .year-list{position: relative; display: inline-block; width: 85%; height: 60px; overflow: hidden;}
.mgz-area .year-list ul{position: absolute; width: 3000px;}
.mgz-area .year-list li + li{margin-left: 3px;}
.mgz-area .year-list li{float: left; width: 56px;}
.mgz-area .year-list li button{display: block; width: 100%; height: 54px; text-align: center; font-family: 'Scoredream'; font-size: 1.9rem; font-weight: 500; color: rgba(0,0,0,.5); border-bottom: 2px solid transparent; box-sizing: border-box;}
.mgz-area .year-list li button:hover{color: #000; font-weight: 600; border-bottom: 3px solid #fed90d; box-sizing: border-box;}
.mgz-area .year-list li button.on{color: #000; font-weight: 600; border-bottom: 3px solid #fed90d; box-sizing: border-box;}
.mgz-area .yearall .prevar{position: absolute; top: 44%; left: 0px; transform: translateY(-50%); width: 30px; height: 30px;}
.mgz-area .yearall .nextar{position: absolute; top: 44%; right: 0px; transform: translateY(-50%); width: 30px; height: 30px;}
.mgz-area .yearall button img{width: 12px; height: 22px;}

.mgz-area .mgzlist{margin-top: 30px;}
.mgz-area .mgzlist li{float: left; width: 48%; padding-bottom: 30px; overflow: hidden;}
.mgz-area .mgzlist li .month{position: relative;}
.mgz-area .mgzlist li:nth-of-type(odd){margin-right: 4%;}
.mgz-area .mgzlist .screen{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.7); transition: all 0.2s; z-index: 10; opacity: 0;}
.mgz-area .mgzlist .screen .tbox{height: 100%; border: 10px solid #f2c41d; text-align: center; padding: 15% 5%; box-sizing: border-box; overflow: hidden;}
.mgz-area .mgzlist .screen .tbox dt{font-size: 2.2rem; line-height: 2.6rem; font-weight: 500; color: #fed90d; padding-bottom: 7px;}
.mgz-area .mgzlist .screen .tbox dd{font-size: 1.5rem; line-height: 2.9rem; font-weight: 300;  color: #fff; text-align: left; padding-left: 7%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mgz-area .mgzlist li:hover .screen{opacity: 1;}
.mgz-area .mgzlist .subject{font-size: 2rem; font-weight: 400; text-align: left; padding-top: 10px;}
/* 과월호 보기 : END */

/* 단체 소개 : START */
.introduce{width: 100%; margin: 15px auto 0;}
.introduce .inner{padding: 60px 4% 0px; box-sizing: border-box;}
.introduce .inner .ngs, .ngp{position: relative; width: 100%; text-align: center;}
.introduce .inner .ngs .tit, .ngp .tit{font-size: 2.7rem; font-weight: 600; font-family: 'Scoredream';}
.introduce .inner .ngs .tit:before, .ngp .tit:before{content: ''; display: inline-block; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: #fed90d;}
.introduce .inner .ngs p{text-align: left; font-size: 1.9rem; line-height: 2.9rem; padding: 15px 0 10px; margin-bottom: 50px;}
.introduce .inner .ngp p{text-align: left; font-size: 1.9rem; line-height: 2.9rem; padding: 15px 0 40px;}
.introduce .inner .ngs p span, .ngp p span{display: block;}

.bear-bg{background: url(../../images/bearbg.jpg) no-repeat 67% 100%; width: 100%; height: 0; padding-top: calc(100%); background-size: cover;}
.bear-bg .magazine-kr{position: relative; width: 100%; margin: 0 auto;}
.bear-bg .magazine-kr .tbox{position: absolute; bottom: 29px; left: 50%; width: 92%; transform: translateX(-50%); height: auto; background: #000; color: #fff; padding: 30px 20px 30px 40px; box-sizing: border-box;}
.bear-bg .magazine-kr .tbox .tit{position: relative; font-size: 2.4rem; font-weight: 500; font-family: 'Scoredream'; padding-bottom: 10px;}
.bear-bg .magazine-kr .tbox .tit:before{content: ''; display: inline-block; position: absolute; top: 3px; left: -20px; width: 8px; height: 20px; background: #fed90d;}
.bear-bg .magazine-kr .tbox .copy{font-size: 1.6rem; color: #ddd;}
.bear-bg .magazine-kr .tbox .copy span{display: block;}

.deduction{width: 100%; margin: 0 auto;}
.deduction .inner{padding: 40px 4% 20px; box-sizing: border-box; text-align: center;}
.deduction .inner .tit{font-size: 3rem; font-weight: 700;}
.deduction .tab-menu > ul{position: relative; width: 100%;}
.deduction .tab-menu > ul > li{width: 100%;}
.deduction .tab-menu > ul > li > button{display: block; text-align: center; width: 100%; font-size: 1.9rem; font-weight: 500; font-family: 'Scoredream'; color: rgba(0,0,0,1); line-height: 5rem; margin: 10px 0 20px; border-bottom: 3px solid #ffda00;}
.deduction .tab-menu .contbox{position: relative; left: 0; width: 100%; text-align: left;}
.deduction .tab-menu .contbox ul{margin-top: 20px; width: 100%; border: 1px solid #ddd; box-sizing: border-box;}
.deduction .tab-menu .contbox ul li{float: left;}
.deduction .tab-menu .contbox ul li:first-child{display: none;}
.deduction .tab-menu .contbox ul li:last-child{display: block; width: 100%; padding: 10px 10px 10px 20px; box-sizing: border-box}
.deduction .tab-menu .contbox ul li.tbox{position: relative; height: 100px; background-color: #fff;}
.deduction .tab-menu .contbox ul li div{position: absolute; top: 50%; transform: translateY(-50%); padding: 0 20px; box-sizing: border-box;}
.deduction .tab-menu .contbox ul li span{position: relative; display: block; text-align: left; font-size: 2.5rem; font-weight: 600; font-family: 'Scoredream';}
.deduction .tab-menu .contbox ul li span:before{content: ''; display: inline-block; position: absolute; top: 4px; left: -15px; width: 4px; height: 21px; background: #ffda00;}
.deduction .tab-menu .contbox ul li p{display: block; text-align: left; font-size: 1.9rem;}

.introduce{width: 100%; margin: 0 auto;}
.introduce .inner{padding: 40px 4% 50px; box-sizing: border-box; text-align: center;}
.introduce .inner .tit{font-size: 3rem; font-weight: 700;}
.introduce .book .contbox{position: relative; left: 0; width: 100%; text-align: left;}
.introduce .book .contbox ul{margin-top: 20px; width: 100%; border: 1px solid #ddd; box-sizing: border-box;}
.introduce .book .contbox ul li{float: left;}
.introduce .book .contbox ul li:first-child{display: none;}
.introduce .book .contbox ul li:last-child{display: block; width: 100%; padding: 10px 10px 10px 20px; box-sizing: border-box}
.introduce .book .contbox ul li.tbox{position: relative; height: 260px; background-color: #fff;}
.introduce .book .contbox ul li div{position: absolute; /*top: 50%;*/ transform: translateY(7%); padding: 0 20px; box-sizing: border-box;}
.introduce .book .contbox ul li span{position: relative; display: block; text-align: left; font-size: 2.5rem; font-weight: 600; font-family: 'Scoredream';}
.introduce .book .contbox ul li span:before{content: ''; display: inline-block; position: absolute; top: 4px; left: -15px; width: 4px; height: 21px; background: #ffda00;}
.introduce .book .contbox ul li p{display: block; text-align: left; font-size: 1.9rem;}


.wroldmap{padding: 0px 4% 50px;}
.wroldmap .tit{font-size: 3.6rem; text-align: center; padding: 0 0 30px; line-height: 32px; letter-spacing: -1px;}
.wroldmap .tit span{display: block; font-weight: 600;}
.wroldmap .w-pic li{float: left; width: 49%; padding-bottom: 2%;}
.wroldmap .w-pic li:nth-of-type(even){margin-left: 2%;}
/* 단체 소개 : END */

/* 공지사항 LIST : START */
.cont-wrap .wrapper{width: 100%; margin: 30px auto 0; padding: 0 4%; box-sizing: border-box;}
.cont-wrap .tab-menu{height: 40px; line-height: 38px; font-size: 1.9rem; font-weight: 500; text-align: center; margin-bottom: 30px;}
.cont-wrap .tab-menu li{float: left; width: 50%; border: 1px solid #ccc; box-sizing: border-box;}
.cont-wrap .tab-menu li.on{background: #fede2a; border: 1px solid #fede2a;}
.cont-wrap .tab-menu li a{display: block;}

.bbs_wrap .bbs {margin-bottom: 30px; text-align: right;}
.bbs_wrap .fildbox{width: 100%;}
.bbs_wrap select{width: 30%; line-height: 27px; padding: 0 40px 2px 12px; cursor: pointer; font-size: 1.6rem; background: url(../../images/com/arrow_down_bk.jpg) no-repeat 90% 50%; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
.bbs_wrap .p-input{display: inline-block; width: 54%; vertical-align: middle; box-sizing: border-box; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; padding: 0 12px 2px; font-size: 1.6rem;}
.bbs_wrap .p-button {display: inline-block; width: 14%; height: 40px; margin: 2px 0; border: 1px solid #aaa; background: #000; color: #fff; text-align: center; font-size: 1.6rem; font-weight: 400; cursor: pointer;}

.bbs_wrap .p-table {position: relative; width: 100%; border-collapse: collapse; margin-top: 30px; margin-bottom: 25px; font-family: 'NotoSansKR'; font-size: 1.6rem; border-top: 1px solid #000; border-bottom: 2px solid #000; text-align: center;}
.bbs_wrap .listview .p-table thead tr th{display: none;}
.bbs_wrap .p-table tbody tr td{padding: 20px 2% 10px; box-sizing: border-box; vertical-align: middle; border-top: 1px solid #ccc;}
.bbs_wrap .listview .p-table tbody tr td:nth-child(1){display: none;}
.bbs_wrap .p-table tbody tr td:nth-child(2){display: block; text-align: left; padding-left: 0;}
.bbs_wrap .p-table tbody tr td:nth-child(3){display: block; border-top: 0; padding: 0px;}
.bbs_wrap .p-table tbody tr td:nth-child(2) span{display: inline-block; border-radius: 3px; padding: 1px 18px 2px; font-size: 1.8rem; font-weight: 500; border-top: 0;}
.bbs_wrap .p-table tbody tr td:nth-child(2) .noti{border: 1px solid #000;}
.bbs_wrap .p-table tbody tr td:nth-child(2) .news{border: 1px solid #e25656; color: #e25656;}
.bbs_wrap .p-table tbody tr td:nth-child(3){text-align: left; padding-left: 0%; box-sizing: border-box;}
.bbs_wrap .p-table tbody tr td:nth-child(3) p{display: inline-block; width: 79%; height: 100%; padding-right: 3%; box-sizing: border-box; font-size: 2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.bbs_wrap .p-table tbody tr td:nth-child(3) .date{display: inline-block; width: 20%; height: 100%; vertical-align: bottom; font-size: 1.6rem; color: #767676;}
.bbs_wrap .p-table tbody tr td.p-subject{height: 100%; padding-bottom: 20px;}

.page-list{text-align: center; font-size: 1.6rem; font-weight: 400; padding: 15px 0 35px;}
.pagination {display: inline-block;}
.pagination span{display: inline-block; width: 30px; height: 30px;}
.pagination > a {display: inline-block; color: black; width: 30px; height: 30px; line-height: 28px; box-sizing: border-box;  text-decoration: none; transition: background-color .3s; border: 1px solid #e5e5e5; margin: 0 4px; color: #999;}
.pagination > a.active {background-color: #fede2a; color: #000; border: 1px solid #fede2a;}
.pagination > a:hover {background-color: #fede2a; color: #000; border: 1px solid #fede2a;}
.pagination span a{display: inline-block; width: 30px; height: 30px; border: 1px solid #000; box-sizing: border-box;}
.pagination span a.prev {background: #000 url(../../images/com/argr_left.svg) no-repeat 50%; background-size: 21%;}
.pagination span a.next {background: #000 url(../../images/com/argr_right.svg) no-repeat 50%; background-size: 21%;}
/* 공지사항 LIST : END */

/* 공지사항 page view : START */
.bbs_wrap .pageview .p-table thead tr th{padding: 8px 5px 10px 10px; vertical-align: middle; background: #fbfbfb; font-size: 1.8rem; font-weight: 500;}
.bbs_wrap .pageview span.noti, span.news{display: inline-block; border-radius: 3px; padding: 2px 10px 3px; font-weight: 400; font-size: 1.6rem; box-sizing: border-box;}
.bbs_wrap .pageview .noti{border: 1px solid #000;}
.bbs_wrap .pageview .news{border: 1px solid #e25656; color: #e25656;}
.bbs_wrap .pageview thead tr th:nth-child(1){width: 15%;}
.bbs_wrap .pageview thead tr th:nth-child(2){width: 85%; text-align: left;}
.bbs_wrap .pageview thead tr th .sjtit{width: 100%; display: block; text-align: left; font-weight: 300; font-size: 2rem;}
.bbs_wrap .pageview thead tr th .date{width: 100%; display: block; text-align: left; color: #767676; font-weight: 300; font-size: 1.6rem;}
.bbs_wrap .pageview tbody tr td{line-height: 28px; padding: 20px 25px; box-sizing: border-box; vertical-align: middle; border-top: 1px solid #ccc;}
.bbs_wrap .pageview tbody tr td{padding: 25px 0 40px; text-align: center;}
.bbs_wrap .pageview tbody tr td p{text-align: left; padding: 25px 0; font-size: 1.8rem; line-height: 3.2rem; color: #000;}
.bbs_wrap .pageview tbody img{max-width: 100%;}
/* 공지사항 page view : END */

/* EVENT ZONE : START */
.eventzone{margin: 30px 0 25px; text-align: left; font-family: 'Scoredream';}
.eventzone li{float: left; width: 48%; padding-bottom: 20px;}
.eventzone li:nth-of-type(odd){margin-right: 4%;}
.eventzone li a{position: relative; display: inline-block; width: 100%; height: 100%; background: #eee;}
.eventzone li a .screen{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.35); opacity: 0; transition: all 0.2s; z-index: 10;}
.eventzone li a:hover .screen{opacity: 1;}
.eventzone li p{padding: 15px 8px 5px; font-size: 2rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.eventzone li span{display: inline-block; padding: 0 8px; font-size: 1.4rem;}
/* EVENT ZONE : END */

/* 나도 사진작가 : START */
.imphoto .pho-visual{position: relative;  background: url(../../images/apply_bg.jpg) no-repeat 50% 50%; background-size: cover; margin: 0 auto;}
.imphoto .pho-visual .top{position: relative; width: 100%; height: 0; padding-top: 60%;}
.imphoto .pho-visual .top .title{position: absolute; top: 28%; left: 5%; color: #fff;}
.imphoto .pho-visual .top .scopy{font-size: 2.4rem; padding-bottom: 3px; letter-spacing: 1px;}
.imphoto .pho-visual .top .subject{font-size: 5.5rem; font-weight: 600; font-family: 'Scoredream'; padding-bottom: 0px; text-shadow: 2px 2px 2px rgba(0,0,0,.3)}
.imphoto .pho-visual .top .date{font-size: 2rem; font-weight: 400;}

.imphoto .im.pho-info{background: #000;}
.imphoto .im.pho-info .inner{padding: 55px 4% 35px; box-sizing: border-box; text-align: center; color: #fff;}
.imphoto .im .inner .tit{position: relative; font-size: 3.3rem; font-weight: 500; padding-bottom: 1.5rem; font-family: 'Scoredream';}
.imphoto .im .inner .tit:before{content: ''; display: inline-block; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 30px; height: 5px; background: #ffda00;}
.imphoto .im.pho-info .inner .copy{font-size: 2rem; font-weight: 300; line-height: 3.2rem; padding-bottom: 3.5rem;}
.imphoto .im.pho-info .inner .copy span{display: block;}
.imphoto .im.pho-info .inner .tag{font-size: 1.7rem; font-weight: 200;}

.imphoto .im.pho-award{background: #f8f8f8;}
.imphoto .im.pho-award .inner{padding: 55px 4% 35px; box-sizing: border-box; text-align: center;}
.imphoto .im.pho-award .product div + div{margin-left: 4%;}
.imphoto .im.pho-award .product div{position: relative; display: inline-block; width: 47%; height: 0; padding-top: calc(30%); background: #fff; border-radius: 20px; font-size: 1.8rem; margin-top: 10px;}
.imphoto .im.pho-award .product div:first-child{background: #fff url(../../images/com/gift_card.svg) no-repeat 50% 40%; background-size: 43%}
.imphoto .im.pho-award .product div:last-child{background: #fff url(../../images/com/book_illust.svg) no-repeat 50% 40%; background-size: 40%}
.imphoto .im.pho-award .product div span{position: absolute; top: 70%; left: 50%; transform: translateX(-50%); width: 100%; font-weight: 500;}

.imphoto .im.pho-matter{background: #000;}
.imphoto .im.pho-matter .inner{padding: 55px 4% 30px; box-sizing: border-box; text-align: center; color: #fff;}
.imphoto .im.pho-matter ul{display: inline-block;}
.imphoto .im.pho-matter ul li{font-size: 1.9rem; line-height: 2.8rem; padding-bottom: 10px; text-align: left; text-indent: -10px; margin-left: 10px;}
.imphoto .im.pho-matter ul li .scopy{display: block; font-size: 1.4rem; margin: 0 0 0 1rem;}
.imphoto .im.pho-matter ul li .yc{color: #ffda00;}

.imphoto .im.pho-question{background: #f8f8f8}
.imphoto .im.pho-question .inner{padding: 55px 4% 30px; box-sizing: border-box; text-align: center;}
.imphoto .im.pho-question dl{width: 100%; text-align: left; margin: 0 auto 30px;}
.imphoto .im.pho-question dl dt{font-size: 2rem; font-weight: 500; padding-bottom: 10px;}
.imphoto .im.pho-question dl dd{font-size: 1.8rem; text-indent: -8px; margin-left: 15px;}
.imphoto .im.pho-question dl dd.space{margin-left: 22px;}

.imphoto .im.pho-list .inner{position: relative; padding: 55px 4% 30px; box-sizing: border-box; text-align: center;}
.imphoto .im.pho-list .inner .term{font-size: 1.8rem; font-weight: 400; padding-bottom: 50px; text-align: left;}
.imphoto .im.pho-list .inner .term span{display: block; text-align:center;}

.imphoto .im.pho-list .pt-area{text-align: center;}
.imphoto .im.pho-list .pt-area ul{display: inline-block; width: 100%;}
.imphoto .im.pho-list .pt-area li{position: relative; float: left; background: #eee; overflow: hidden; width: 48%; margin-top: 4%;}
.imphoto .im.pho-list .pt-area li button{display: block; width: 100%; height: 0; padding-top: calc(100%);}
.imphoto .im.pho-list .pt-area li img{position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.imphoto .im.pho-list .pt-area li:nth-child(2n){margin-left: 4%;}
.imphoto .im.pho-list .pt-area .screen{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.35); opacity: 0; transition: all 0.2s; z-index: 10;}
.imphoto .im.pho-list .pt-area li:hover .screen{opacity: 1;}
.imphoto .im.pho-list form{position: absolute; top: 160px; left: 50%; transform: translateX(-50%);}
.imphoto .im.pho-list select{width: 160px; height: 35px; line-height: 27px; padding: 0 40px 2px 12px; cursor: pointer; font-size: 1.6rem; background: url(../../images/com/arrow_down_bk.jpg) no-repeat 90% 50%; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;} 
/* 나도 사진작가 : END */

/* 독자들의 선택 : START */
.sv-visual{background: url(../../images/sub_survey.jpg) no-repeat 50%; background-size: cover;}
.sv-visual .top{position: relative; height: 0; padding-bottom: 80%;}
.sv-visual .top .title{position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 100%; text-align: center;}
.sv-visual .top .subject{font-size: 5.5rem; font-weight: 600; font-family: 'Scoredream'; padding-bottom: 0px;}
.sv-visual .top .scopy{font-size: 2.4rem; letter-spacing: 1px; text-align: center;}

.sv.quiz{background: #f8f8f8;}
.sv.quiz.bcover{background: #fff;}
.sv.quiz .inner{padding: 65px 4% 10px; box-sizing: border-box; text-align: center;}
.sv .inner .tit{position: relative; font-size: 2.8rem; font-weight: 600; padding-bottom: 3.5rem;}
.sv .inner .tit:before{content: ''; display: inline-block; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 30px; height: 5px; background: #ffda00;}
.sv .inner .scopy{font-size: 2rem; padding-bottom: 5rem;}
.sv .inner .scopy span{display: block;}
.sv.quiz .inner .survey{display: inline-block; text-align: center;}
.sv.quiz .inner .survey li{float: left; position: relative; width: 49%; height: auto; background: #fff; border-radius: 20px; text-align: center; margin-bottom: 30px; border: 2px solid transparent; box-sizing: border-box;}
.sv.quiz .inner .survey li.chked{border: 2px solid #ffda00;}
.sv.quiz.bcover .inner .survey li{background: #f8f8f8;}
.sv.quiz .inner .survey li:nth-of-type(2n-1){margin-right: 2%}
.sv.quiz .inner .survey li .box{display: inline-block; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; margin-top: 50px;}
.sv.quiz .inner .survey li .cover{display: inline-block; width: 120px; height: 180px; overflow: hidden; margin-top: 30px;}
.sv.quiz .inner .survey li em{display: block; font-size: 2.4rem; font-weight: 500; padding: 10px 0 30px;}

.quiz .checks {position: relative;}
.quiz .checks label{position: relative; top:auto; left:0; width:auto; height:auto; overflow:inherit;}
.quiz .checks input[type="radio"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;} 
.quiz .checks input[type="radio"] + label {display: inline-block; position: relative; padding-left: 40px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;} 
.quiz .checks input[type="radio"] + label:before {content: ''; position: absolute; left: 0; top: -34px; width: 40px; height: 40px; text-align: center; background: #fff; border: 2px solid #eee; border-radius: 100%;} 
.quiz .checks input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);} 
.quiz .checks input[type="radio"].on:checked + label:before {background: #fff; border-color: #ffda00;} 
.quiz .checks input[type="radio"].on:checked + label:after {content: ''; position: absolute; top: -27px; left: 7px; width: 26px; height: 26px; background: #ffda00; border-radius: 100%;}

/* 다음호 표지는? 서베이 신청 선택버튼 */
.quiz.bcover .checks input[type="radio"] + label:before {content: ''; position: absolute; left: 0; top: -35px; width: 40px; height: 40px; text-align: center; background: #fff; border: 2px solid #eee; border-radius: 100%; transition: all 0.5s;} 
.quiz.bcover .checks input[type="radio"].on:checked + label:after {content: ''; position: absolute; top: -28px; left: 7px; width: 26px; height: 26px; background: #ffda00; border-radius: 100%;}
.quiz.bcover .checks input[type="radio"].on:checked + label:before {background: #fff; border-color: #ffda00;} 

/* 다음호 표지는? 서베이 결과 선택버튼 */
.quiz.bcover .survey-rs .checks input[type="radio"] + label:before {content: ''; position: absolute; left: 0; top: -48px; width: 40px; height: 40px; text-align: center; background: #fff; border: 2px solid #eee; border-radius: 100%; transition: all 0.5s;} 
.quiz.bcover .survey-rs .checks input[type="radio"].on:checked + label:after {content: ''; position: absolute; top: -41px; left: 7px; width: 26px; height: 26px; background: #ffda00; border-radius: 100%;}
.quiz.bcover .survey-rs .checks input[type="radio"].on:checked + label:before {background: #fff; border-color: #ffda00;} 


.sv.quiz .textbox{width: 100%; margin: 0 auto; padding: 0 4% 50px; box-sizing: border-box; text-align: center; font-size: 2.2rem; font-weight: 500;}

.sv.quiz .inner .survey-rs{display: inline-block; width: 100%;}
.sv.quiz .inner .survey-rs > li{position: relative; height: auto; background: #fff; border-radius: 20px; text-align: left; padding: 15px 3% 30px 3%; box-sizing: border-box; text-align: center;}
.sv.quiz .inner .survey-rs > li + li{margin: 27px 0;}
.sv.quiz .inner .survey-rs > li.chked{border: 2px solid #ffda00; transition: all 0.3s;}
.sv.quiz.bcover .inner .survey-rs li{background: #f8f8f8;}
.sv.quiz .inner .survey-rs > li .box{display: inline-block; width: 185px; height: 185px; border-radius: 50%; overflow: hidden; margin-top: 50px;}
.sv.quiz .inner .survey-rs > li .cover{display: inline-block; width: 165px; /*height: 240px;*/ overflow: hidden; padding: 10px 0 80px;}
.sv.quiz .inner .survey-rs > li .graph{position: absolute; bottom: 15px; left: 0; width: 100%; padding: 0 5%; box-sizing: border-box;}
.sv.quiz .inner .survey-rs > li .graph li:first-child{font-size: 2rem; padding-bottom: 15px; font-weight: 400;}
.sv.quiz .inner .survey-rs > li .graph .bname{float: left;}
.sv.quiz .inner .survey-rs > li .graph .member{float: right;}
.sv.quiz .inner .survey-rs > li .graph .member span{color: #bdbdbd;}
.sv.quiz .inner .survey-rs > li .graph .member:before{content: ''; display: inline-block; background: url(../../images/com/member.svg) no-repeat 50%; width: 15px; height: 17px; margin-right: 10px;}
.sv.quiz .inner .survey-rs > li .graph .bg{position: relative; width: 100%; height: 35px; background: #bdbdbd; border-radius: 10px; overflow: hidden;}
.sv.quiz .inner .survey-rs > li .graph .bar{position: absolute; top: 0; left: 0; height: 35px; background: #ffda00;}
.sv.quiz .inner .survey-rs > li .graph .bg span{position: absolute; top: 0; left: 0; font-size: 2rem; line-height: 32px; padding-left: 10px;}

/* 독자 설문조사-질문 */
.quiz .inner .tsurvey{display: inline-block; text-align: center; width: 100%;}
.quiz .inner .tsurvey > li{position: relative; width: 95%; margin-left: 5%; margin-bottom: 14px; min-height: 50px; background: #fff; border-radius: 20px; text-align: left;}
.quiz .inner .tsurvey.rs > li{position: relative; width: 95%; margin-left: 5%; margin-bottom: 20px; min-height: 170px; background: #fff; border-radius: 20px; text-align: left;}
.quiz .inner .tsurvey.rs > li.chked{border: 2px solid #ffda00; transition: all 0.3s;}
.quiz .inner .tsurvey li .txt{display: block; font-size: 2.4rem; font-weight: 500; padding: 14px 26px; box-sizing: border-box;}
.quiz .inner .tsurvey.rs li .txt{display: block; font-size: 2.4rem; font-weight: 500; padding: 20px 30px 10px; box-sizing: border-box;}
.quiz .tsurvey .checks {position: absolute; left: -20px; top: 40%; transform: translateY(-50%); display: inline-block;}
.quiz .tsurvey.rs .checks {position: absolute; left: -20px; top: 48%; transform: translateY(-50%);}
.quiz .tsurvey label{position: relative; top:auto; left:0; width:auto; height:auto; overflow:inherit;}
.quiz .tsurvey input[type="radio"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;} 
.quiz .tsurvey input[type="radio"] + label {display: inline-block; position: relative; padding-left: 40px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;} 
.quiz .tsurvey input[type="radio"] + label:before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; text-align: center; background: #fff; border: 2px solid #eee; border-radius: 100%; transition: all 0.5s;}
.quiz .tsurvey input[type="radio"] + label:active:before, .quiz .tsurvey input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);} 
.quiz .tsurvey input[type="radio"].on:checked + label:before {background: #fff; border-color: #ffda00;} 
.quiz .tsurvey input[type="radio"].on:checked + label:after {content: ''; position: absolute; top: -13px; left: 7px; width: 26px; height: 26px; background: #ffda00; border-radius: 100%;}
.sv.quiz .tsurvey .textbox{width: 1200px; margin: 0 auto; padding: 0 100px 80px; box-sizing: border-box; text-align: center; font-size: 2.2rem; font-weight: 500;}

/* 독자 설문조사-결과 */
.quiz .tsurvey li .graph{text-align: right;}
.quiz .tsurvey li .graph ul{display: inline-block; width: 40%;padding: 0 20px 20px 0; box-sizing: border-box;}
.quiz .tsurvey li .graph li:first-child{font-size: 2rem; padding-bottom: 15px; font-weight: 400; box-sizing: border-box;}
.quiz .tsurvey li .graph .bname{float: left;}
.quiz .tsurvey li .graph .member{float: right;}
.quiz .tsurvey li .graph .member span{color: #bdbdbd;}
.quiz .tsurvey li .graph .member:before{content: ''; display: inline-block; background: url(../../images/com/member.svg) no-repeat 50%; width: 15px; height: 17px; margin-right: 10px;}
.quiz .tsurvey li .graph .bg{position: relative; width: 100%; height: 45px; background: #bdbdbd; border-radius: 10px; overflow: hidden;}
.quiz .tsurvey li .graph .bar{position: absolute; top: 0; left: 0; height: 45px; background: #ffda00;}
.quiz .tsurvey li .graph .bg span{position: absolute; top: 0; left: 0; font-size: 2rem; line-height: 42px; padding-left: 10px;}
/* 독자들의 선택 : END */

/* 지난 공모전 : START */
.ex-visual{background: url(../../images/sub_exhibit.jpg) no-repeat 50%; background-size: cover;}
.ex-visual .top{position: relative; height: 0; padding-bottom: 80%;}
.ex-visual .top .title{position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 100%; text-align: center;}
.ex-visual .top .subject{font-size: 5.5rem; font-weight: 600; font-family: 'Scoredream'; padding-bottom: 0px;}
.ex-visual .top .scopy{font-size: 2.1rem; letter-spacing: 1px; text-align: center; padding: 0 4%;}

.ex .inner{width: 100%; padding: 65px 4% 0px; box-sizing: border-box; text-align: center;}
.ex .inner .tit{position: relative; font-size: 2.8rem; font-weight: 600; padding-bottom: 3.5rem;}
.ex .inner .tit:before{content: ''; display: inline-block; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 30px; height: 5px; background: #ffda00;}

.ex .selec{position: relative; text-align: right; padding-bottom: 10px;}
.ex .selec select{display: block; width: 100%; line-height: 27px; padding: 0 40px 2px 12px; cursor: pointer; font-size: 1.8rem; background: url(../../images/com/arrow_down_bk.jpg) no-repeat; background-position: right 15px bottom 50%; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
.ex .selec select{margin-bottom: 5px;}
.ex .inner .prizelist{position: relative;}
.ex .inner .prizelist li{width: 100%;}
.ex .inner .prizelist .imgbox{position: relative; width: 100%; height: 0; padding-bottom: calc(55%);}
.ex .inner .prizelist .imgbox > img{position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.ex .inner .prizelist .imgbox .screen{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.35); opacity: 0; transition: all 0.2s; z-index: 10;}
.ex .inner .prizelist button:hover .screen{opacity: 1;}
.ex .inner .prizelist .tbox{padding: 1rem 0 3.5rem; box-sizing: border-box;}
.ex .inner .prizelist .tbox p{font-size: 2rem; font-weight: 400;}
.ex .inner .prizelist .tbox span{font-size: 1.6rem;}
/* 지난 공모전 : END */

/* 인재채용 : START */
.recruit{width: 100%; margin: 65px auto 0;}
.recruit .inner{padding: 60px 14px 0px; box-sizing: border-box;}
.recruit .inner .ngs, .ngp{position: relative; width: 100%; text-align: center;}
.recruit .inner .ngs .tit, .ngp .tit{font-size: 3.2rem; font-weight: 500; font-family: 'Scoredream';}
.recruit .inner .ngs .tit:before, .ngp .tit:before{content: ''; display: inline-block; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 50px; height: 8px; background: #fed90d;}
.recruit .inner .ngs p{text-align: center; font-size: 2.1rem; line-height: 3.4rem; padding: 25px 0 50px; margin-bottom: 50px;}
.recruit .inner .ngp p{text-align: center; font-size: 2.1rem; line-height: 3.4rem; padding: 25px 0 50px;}
.recruit .inner .ngs p span, .ngp p span{display: block;}

.recruit .inner .ngs.proces{font-size: 0; margin-bottom: 50px;}
.recruit .inner .ngs .recruit_proces {/*padding: 55px 4% 35px;*/ box-sizing: border-box; text-align: center;}
.recruit .inner .ngs .recruit_proces .text{text-align: center; font-weight: 400; padding: 25px 0px ;margin-bottom: 0px;}
.recruit .inner .ngs .recruit_proces div + div{margin-left: 4%;}
.recruit .inner .ngs .recruit_proces div{position: relative; display: inline-block; width: 45%; height: 0; padding-top: calc(30%); background: #f8f8f8; font-size: 1.8rem; margin-bottom: 25px;}
.recruit .inner .ngs .recruit_proces .first{background: #f8f8f8 url(../../images/com/recruit_document.svg?!2) no-repeat 50% 40%; background-size: 28%}
.recruit .inner .ngs .recruit_proces .last{background: #f8f8f8 url(../../images/com/recruit_test.svg) no-repeat 50% 40%; background-size: 32%}
.recruit .inner .ngs .recruit_proces .arrow{background:url(../../images/com/arbk_right.png) no-repeat 60%; background-size: 10px 17px; display:inline-block;width:25px; height:25px;margin-top:45px;}
.recruit .inner .ngs .recruit_proces div span{position: absolute; top: 70%; left: 50%; transform: translateX(-50%); width: 100%;}

.recruit .inner .ngs.proces{font-size: 0; margin-bottom: 50px;}
.recruit .inner .ngs .recruit_proces_photo {/*padding: 55px 4% 35px;*/ box-sizing: border-box; text-align: center;}
.recruit .inner .ngs .recruit_proces_photo .text{text-align: center; font-weight: 400; padding: 25px 0px ;margin-bottom: 0px;}
.recruit .inner .ngs .recruit_proces_photo div + div{margin-left: 4%;}
.recruit .inner .ngs .recruit_proces_photo div{position: relative; display: inline-block; width: 45%; height: 0; padding-top: calc(30%); background: #f8f8f8; font-size: 1.8rem; margin-top: 10px;}
.recruit .inner .ngs .recruit_proces_photo .first{background: #f8f8f8 url(../../images/com/recruit_document.svg?!2) no-repeat 50% 40%; background-size: 28%}
.recruit .inner .ngs .recruit_proces_photo .last{background: #f8f8f8 url(../../images/com/recruit_interview.svg) no-repeat 50% 40%; background-size: 32%; margin-bottom: 50px;}
.recruit .inner .ngs .recruit_proces_photo .arrow{background:url(../../images/com/arbk_right.png) no-repeat 60%; background-size: 10px 17px; display:inline-block;width:25px; height:25px;margin-top:45px;}
.recruit .inner .ngs .recruit_proces_photo div span{position: absolute; top: 70%; left: 50%; transform: translateX(-50%); width: 100%;}

/* 인재채용 : END */

/* 상단 sub-visual 영역 : END */
/* .news-cont .pt-area{width: 100%; margin-top: 20px;}
.news-cont .pt-area li{position: relative; float: left; background: #eee; overflow: hidden;}
.news-cont .pt-area li:nth-last-of-type(odd){margin-left: 4%;}
.news-cont .pt-area li button{width: 100%; height: 0; padding-top: calc(100%);}
.news-cont .pt-area li img{position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.news-cont .pt-area .screen{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.35); opacity: 0; transition: all 0.2s; z-index: 10;}
.news-cont .pt-area li:hover .screen{opacity: 1;} */





/* FOOTER */
footer{background: #000;}
.footer-info{position: relative; width: 100%; padding: 140px 7% 70px; font-size: 1.4rem; text-align: center; color: rgba(255,255,255,0.6); line-height: 22px; font-weight: 400; box-sizing: border-box;}
.footer-info .linedown{display: block;}
.footer-info .contact span:nth-child(3){display: block; margin-left: 0;}
.footer-info adress{display: inline-block;}
.footer-info .tel{display: inline-block;}
.footer-info .tel +.tel{margin-left: 15px;}
.footer-info .footer_nav{margin-top: 20px;}
.footer-info .footer_nav ul{display: block; text-align: center;}
.footer-info .footer_nav ul li{display: inline-block;}
.footer-info .footer_nav ul li + li{margin-left: 20px;}
.footer-info .footer_nav .point{color: #ffda00;}
.footer-info .foot-ng{position: absolute; top: 5px; left: 50%; transform: translateX(-50%);}
.footer-info .foot-ng .tbox{float: left; width: 100%; text-align: center; margin-right: 30px;}
.footer-info .foot-ng .copy{color: #f2c41d; font-size: 1.8rem; font-weight: 400; padding-top: 15px}
.footer-info .foot-ng .telnum{font-size: 1.6rem; color: #ddd; font-weight: 400; padding: 5px 0 12px;}
.footer-info .foot-ng button{width: 200px; line-height: 45px; background: #f2c41d; border-radius: 3px; color: #282828; font-weight: 500; text-align: center; font-size: 1.8rem;}
.footer-info .foot-ng img{display: none;}
.footer-info .foot-ng .footer_logo{display:inline-block;width:175px; margin:10px;}

/* 공통 */
.area-c{width: 100%; margin: 0 auto;}
.ff-score{font-family: 'Scoredream'; letter-spacing: -0.5px;}
.btnTop{position: fixed; right: 40px; bottom: 40px; width: 50px; height: 50px; background: #1b1b1b url(../../images/com/arrow_up.png) no-repeat 50%;}

.more{width: 100%; margin: 0 auto; text-align: center; padding: 20px 0 80px;}
.btn-more{display: inline-block; width: 90%; height: 40px; line-height: 38px;  border-radius: 3px; text-align: center; background: #fede2a; font-size: 2rem; font-weight: 500;}

.confirm{width: 100%; margin: 0 auto; text-align: center; padding: 0 0 50px;}
.btn-confirm{display: inline-block; width: 90%; height: 40px; line-height: 38px;  border-radius: 3px; text-align: center; background: #fede2a; font-size: 2rem; font-weight: 500;}

/* 사진크게보기 : START */
.modal-wrapper{display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.9); z-index: 11000;}
/* .modal-wrapper .img-pop{width: 90%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff;} */
.modal-wrapper .img-pop{width: 90%; position: fixed; left: 50%; transform: translateX(-50%); color: #fff; margin-top: 60px}
.modal-wrapper ul{max-width: 1000px; margin: 0 auto;}
.modal-wrapper ul li{float: left; font-size: 1.8rem; line-height: 3.2rem;}
.modal-wrapper figcaption{position: absolute; bottom:0; background: rgba(0,0,0,0.6); color:white; font-size:15px; display:block; padding:25px}
.modal-wrapper ul li p{font-size: 2.4rem; line-height: 3.2rem; padding-bottom: 10px; font-weight: 500;}
.modal-wrapper .btn-prev{display: none;}
.modal-wrapper .btn-prev img{width: 20px; height: 35px;}
.modal-wrapper .btn-next{display: none;}
.modal-wrapper .btn-next img{width: 20px; height: 35px;}
.modal-wrapper .btn-close{position: fixed; top: -40px; right: 0px; width: 25px; height: 25px;}
.modal-wrapper.open{display: block; opacity: 1; visibility: visible;}
/* 사진크게보기 : END */

/* 화면 전체 검정 : START */
.black-wrapper{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 2;}
/* 화면 전체 검정 : END */


/* 메인 상단 비주얼 영역 */
@media screen and (max-width: 320px) { 
    .visual{position: relative; background: url(../../images/m_visual.jpg) no-repeat 50%; width: 100%; height: 0; padding-bottom: calc(259%); background-size: cover;}
}


@media (max-width: 767px) {
    
/* swiper1(지난호보기, 지난주요기사) CSS : START */
    
[class^="swiper-button-"] {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.swiper-container.swiper1 {
  width: 100%;
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
}
.swiper-container.swiper-container-coverflow {
  padding-top: 0%;
}
.swiper-container.loading {
  opacity: 0;
  visibility: hidden;
}
.swiper-container.swiper1:hover .swiper-button-prev,
.swiper-container.swiper1:hover .swiper-button-next {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.swiper-container.swiper1 .swiper-slide {
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  background-size: 40%;
}

.swiper-container.swiper1 .swiper-slide .entity-img {
    position: absolute;
    top: 32%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 90px;
    display: block;
  }

.swiper-container.swiper1 .swiper-slide .content {
  position: absolute;
  bottom: 8%;
  left: 0;
  width: 80%;
  padding-left: 15%;
  box-sizing: border-box;
  color: #fff;
}
.swiper-container.swiper1 .swiper-slide .content .title {
  font-size: 1.9rem;
  font-weight: bold;
  margin-bottom: .6rem;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}
.swiper-container.swiper1 .swiper-slide .content .caption {
  display: block;
  font-size: 1.4rem;
  line-height: 1.9rem;
}
.swiper-container.swiper1 .swiper-slide .content .caption .line{
    display: block;
    width: 100%;
  line-height: 1.9rem;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}
    
[class^="swiper-button-"] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
}

.swiper-container.swiper1 .swiper-button-prev {
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
}

.swiper-container.swiper1 .swiper-button-next {
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
}

/* 메인페이지 지난호보기 영역 다른 부분 */
.swiper-container.swiper1.past .swiper-slide .entity-img {
  top: 53%;
}
.swiper-container.swiper1.past .month-date{
    position: absolute;
    top: 9%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 500; 
    font-family: 'Scoredream';
}
/* swiper1(지난호보기, 지난주요기사) CSS : END */
    
}