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

html {font-size: 10px;}
body {font-size: 1rem;}
.pc {display: block;}
.mo {display: none !important;}

/* HEADER : START */
#wrap {position: relative; min-width: 1200px; margin: 0; padding: 0;}
header{position: fixed; width: 100%; height: 90px; z-index: 9999;}
header .topbar{position: fixed; display: block; width: 100%; height: 90px; background: rgba(255,255,255,0.35); transition: background-color 0.3s ease; z-index: 9999; text-align: center;}
header .topbar .progress-indicator{position:absolute; top:0; left:0; height:2px; background:#000; width:0%;}
header .topbar .news-tit{font-size: 2rem; line-height: 85px;}
header .topbar .news-tit em{font-weight: 400; padding-right: 10px;}
header .topbar .news-tit em:after{content: ''; display: inline-block; width: 1px; height: 17px; background: #ccc; margin-left: 15px;}
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: 24px; left: 120px; width: 140px; height: 40px;}
header .grass{position: absolute; top: 32px; right: 200px; width: 31px; height: 31px; background: url(../../images/com/icon_grass.png) no-repeat; z-index: 9990;}
header .instagram-t{position: absolute; top: 32px; right: 135px; width: 31px; height: 31px; background: url(../../images/com/instagram_t.svg) no-repeat; z-index: 9999;}
header .share{position: absolute; top: 32px; right: 70px; width: 31px; height: 31px; background: url(../../images/com/share.svg) no-repeat; z-index: 9999;}
header .sns-layer{display: none; position: absolute; top: 90px; right: 70px; width: 260px; height: 100px; background:#fff; border: 1px solid #ddd; box-sizing: border-box; text-align: center; z-index: 9999; 
/* 애니메이션 */
-webkit-animation: snsbox .2s linear 1 alternate;
-moz-animation: snsbox .2s linear 1 alternate;
-ms-animation: snsbox .2s linear 1 alternate;
-o-animation: snsbox .2s linear 1 alternate;
animation: snsbox .2s linear 1 alternate;
}
@keyframes snsbox {
    0% {right:0px;}
    100% {right:70px;}
}
header .sns-layer p{font-size: 1.5rem; font-weight: 400; color: #3e3e3e; padding: 13px 0 10px;}
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: 31px; height: 31px; background: url(../../images/com/icon_grass.png) no-repeat; z-index: 9999;}
header .srarea{display: none; position: absolute; top: 22px; right: 190px; z-index: 9999;
/* 애니메이션 */
-webkit-animation: searchbox .2s linear 1 alternate;
-moz-animation: searchbox .2s linear 1 alternate;
-ms-animation: searchbox .2s linear 1 alternate;
-o-animation: searchbox .2s linear 1 alternate;
animation: searchbox .2s linear 1 alternate;
}
@keyframes searchbox {
    0% {right:0px;}
    100% {right:190px;}
}
header .searchbox{width: 256px; height: 48px; 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: 28px; left: 60px; width: 40px; height: 40px; z-index: 10010; padding-left: 3px; box-sizing: border-box;} 
.ham-button span{display: block; position: absolute; top: 50%; width: 35px; height: 4.5px; background: rgba(0,0,0,1); color: transparent; transform: translate(0,-50%); transition: all 0.12s;}
.ham-button span:before,
.ham-button span:after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4.5px; background: rgba(0,0,0,1); transition: all 0.3s;}
.ham-button span:before {top: -10px;}
.ham-button span:after {top: 10px;}
.ham-button:hover span:before {top: 7px; width : 20px; height: 3.5px; background: rgba(0,0,0,1); 
-webkit-transform: translateX(18px) rotate(135deg);
-moz-transform: translateX(18px) rotate(135deg);
-o-transform: translateX(18px) rotate(135deg);
transform: translateX(19px) rotate(135deg);}
.ham-button:hover span:after {top: -5px; width : 20px; height: 3.5px; background: rgba(0,0,0,1);
-webkit-transform: translateX(18px) rotate(-135deg);
-moz-transform: translateX(18px) rotate(-135deg);
-o-transform: translateX(18px) rotate(-135deg);
transform: translateX(19px) rotate(-135deg);;}
/* 햄버거 열기 버튼 : END */

/* 햄버거 닫기 버튼 : START */
.close{position: absolute; top: 40px; left: 60px; width: 40px; height: 40px; z-index: 10010; padding-left: 3px; box-sizing: border-box;} 
.close span{display: block; position: absolute; top: 50%; width: 35px; height: 4.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: 3.5px; 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: 3.5px; 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 : 20px; height: 3.5px; background: rgba(255,255,255,1); 
-webkit-transform: translateX(-5px)translateY(7px)rotate(-135deg);
-moz-transform: translateX(-5px)translateY(7px)rotate(-135deg);
-o-transform: translateX(-5px)translateY(7px)rotate(-135deg);
transform: translateX(-5px)translateY(7px)rotate(-135deg);
}
.close:hover span:after {top: 0px; width : 20px; height: 3.5px; background: rgba(255,255,255,1);
-webkit-transform: translateX(-5px)translateY(-5px)rotate(135deg);
-moz-transform: translateX(-5px)translateY(-5px)rotate(135deg);
-o-transform: translateX(-5px)translateY(-5px)rotate(135deg);
transform: translateX(-5px)translateY(-5px)rotate(135deg);
;}
/* 햄버거 닫기 버튼 : END */

/* HEADER : END */

/* 사이드 메뉴 네비게이션 NAV : START */
#menu-bar{width: 430px; height: 100%; position: fixed; top: 0px; left: -430px; padding: 20px 20px 20px 60px; box-sizing: border-box; z-index: 10000; color: #fff; font-size: 2.4rem; background-color: #000; text-align: left; 
-webkit-transition: All 0.2s ease; 
-moz-transition: All 0.2s ease; 
-o-transition: All 0.2s ease;
transition: All 0.2s ease;
}
#menu-bar.open{left: 0px;}
.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: 90px;}
#menu-bar ul li{line-height: 65px}
#menu-bar ul li p{font-size: 1.8rem; line-height: 38px; color: rgba(255,255,255,0.5); margin-left: 10px;}
#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%; height: 865px;}
.visual .screen{background-color: rgba(0,0,0,0.3); width: 100%; height: 865px; position: absolute;}
.visual .mvtop{padding: 140px 14px 0; box-sizing: border-box;}
.visual .mvtop .leftarea{position: relative; width: 672px; float: left; /*padding-top: 55px;*/}
.mvtop .leftarea .pgtit{font-size: 2.4rem; font-weight: 600; color: #fff; padding-bottom: 20px;}
.mvtop .leftarea .pgtit:before {content: ''; display: inline-block; margin-right: 15px; margin-bottom: -4px; width: 8px; height: 25px; background-color: #ffda00;}
/*.visual .mvtop .leftarea a:hover .tt, .visual .mvtop .leftarea a:hover .st{text-decoration: underline;
text-decoration-color: rgba(255,255,255,0.5);}*/
.visual .mvtop .titimg{position: relative; width: 672px; height: 347px; 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: 672px; height: 130px; background: rgba(0,0,0,.8); padding: 15px 27px; box-sizing: border-box;}
.visual .mvtop .tbox .tt{font-size: 2.8rem; 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-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 2.4rem; height: 50px; 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: 15px;*/ margin-bottom: -3px; width: 8px; height: 28px; /*background-color: #ffda00;*/}

.banner-area{position: relative; min-height: 75px;}
.line-banner{position: absolute; bottom: 0; width: 100%; height: 75px; background: #fed90d;}
.line-banner .ctbox{position: relative; width: 1200px; height: 100%; line-height: 73px; margin: 0 auto; text-align: center; font-size: 1.8rem; padding-left: 60px; box-sizing: border-box}
.line-banner .ctbox:before{content: ''; display: inline-block; transform: translateY(30%); width: 40px; height: 40px; background: url(../../images/com/instagram_c.svg) no-repeat; margin-right: 10px;}
.line-banner .ctbox em{font-family: 'GmarketSans'; font-size: 2.4rem; font-weight: 700; margin-right: 25px; vertical-align: baseline;}
.line-banner .ctbox a{display: inline-block; line-height: 25px; margin-left: 30px; border: 1px solid #000; padding: 5px 25px;}

.banner-area.addbn{position: relative; min-height: 76px; 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_{position: relative; min-height: 95px; }
.line-banner .ctbox_{position: relative; width: 1200px; height: 100%; line-height: 73px; margin: 0 auto; text-align: center; font-size: 1.8rem; padding-left: 60px; box-sizing: border-box}
.line-banner .ctbox_ em{font-family: 'GmarketSans'; font-size: 2.4rem; font-weight: 700; margin-right: 25px; vertical-align: baseline;}
.line-banner .ctbox_ a{display: inline-block; line-height: 25px; margin-left: 30px; border: 1px solid #000; padding: 5px 25px;}
*/


.visual .scroll{position: fixed; bottom: 90px; left: 50%; width: 50px; height: 50px; transform: translateX(-50%); font-size: 1.2rem; letter-spacing: 1px; text-align: center; color: #fff; font-weight: 600; padding-top: 17px; box-sizing: border-box; background: rgba(255, 255, 255, .1); border-radius: 50%;}
.visual .scroll img{position: absolute; bottom: 0px; left: 50%; 
-webkit-transform: translateX(-50%); 
-moz-transform: translateX(-50%); 
-ms-transform: translateX(-50%); 
-o-transform: translateX(-50%); 
transform: translateX(-50%); 
-webkit-animation: updown .4s infinite linear alternate;
-moz-animation: updown .4s infinite linear alternate;
-ms-animation: updown .4s infinite linear alternate;
-o-animation: updown .4s infinite linear alternate;
animation: updown .4s infinite linear alternate;
}
/* 키프레임 이름 = 애니메이션 이름 */
@keyframes updown {
  0% {bottom:12px;}
  60% {bottom:20px;}
  100% {bottom:22px;}
}

/* 이달의 키워드 : START */
.mvtop .tagbox{position: relative; top: 23px; left: 0; width: 672px; height: 107px; padding: 20px 0px; box-sizing: border-box;}
.mvtop .wordtit{position: relative; margin-top: -11px; padding-bottom: 9px;}
.mvtop .wordtit .tit{display: inline-block; color: #fff; font-size: 2.5rem;}
.mvtop .wordtit .tit em{color: #f2c41d; font-weight: 600;}
.mvtop .wordtit span{position: absolute; right: 0; top: 10px; font-size: 1.4rem; color: rgba(255,255,255,0.7);}
.mvtop .keyword{height: 40px; overflow: hidden;}
.mvtop .keyword li{float: left; background: #000; font-size: 1.6rem; color: #fff; text-align: center;}
.mvtop .keyword li + li{margin-right: 15px; margin-bottom: 10px;}
.mvtop .keyword li:first-child{margin-right: 15px;}
.mvtop .keyword li a{display: block; line-height: 36px; padding: 0 18px; box-sizing: border-box;}
/* 이달의 키워드 : END */

/* 포토 갤러리 : START */
.mvtop .m-gallery{position: relative; float: right; width: 420px; font-size: 0;}
.mvtop .m-gallery .pgtit{font-size: 2.4rem; font-weight: 600; color: #fff; padding-bottom: 20px;}
.mvtop .m-gallery .pgtit:before {content: ''; display: inline-block; margin-right: 15px; margin-bottom: -4px; width: 8px; height: 25px; background-color: #ffda00;}
.mvtop .m-gallery .ptarea{display: inline-block; width: 326px; height: auto;}
.mvtop .m-gallery .ptarea a{display: block; width: 100%;}
.mvtop .m-gallery .cont{position: relative; overflow: hidden;}
.mvtop .m-gallery .ptarea a + a{display: inline-block; margin-top: 25px;}
.mvtop .m-gallery .cont .photo-frame{position: relative; display: block; width: 100%; height: 185px; border: 2px solid #f2c41d; box-sizing: border-box;}
.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: 330px; height: 100%; 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(-20px, -20px); transition: all 0.3s; opacity: 0;}
.mvtop .m-gallery .cont .cross .cr-w{display: inline-block; position: absolute; top: 20px; width: 40px; height: 1px; background: #ffda00;}
.mvtop .m-gallery .cont .cross .cr-h{display: inline-block; position: absolute; left: 20px; width: 1px; height: 40px; 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 .num-list{display: inline-block; width: 90px; text-align: center;}
.mvtop .m-gallery .num-list .btnbox{display: inline-block; margin-top: 138px;}
.mvtop .m-gallery .num-list button + button{margin-top: 23px;}
.mvtop .m-gallery .num-list button{display: block; width: 45px; height: 45px; line-height: 43px; text-align: center; font-family: 'Scoredream'; font-size: 1.6rem; font-weight: 600; color: #fff;}
.mvtop .m-gallery .num-list .check{border: 2px solid #ffda00; border-radius: 50%; color: #ffda00;}


/* photo frame : START */
.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: 8px;}
.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: 8px;}
.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: 8px;}
.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: 8px;}
.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: 105px 0; background: #f8f8f8;}
.cont-area .tit{width: 1200px; font-size: 3rem; font-weight: 700; text-align: center; margin: 0 auto 20px; text-align: left; padding-left: 15px;}
.cont-area .tit.tab2{margin-top: 35px;}
.cont-area .tit:before{content: ""; display: inline-block; width: 8px; height: 28px; background: #fed90d; margin-bottom:-5px; margin-right: 20px;}
.cont-area ul .card{float: left; margin: 14px; background: #fff; width: 372px;}
.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: 372px; height: 330px; 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.1rem solid #f0f0f0; padding: 0.3rem 0.4rem 0.4rem; text-align: center; font-size: 1.4rem; line-height: 1.4rem; font-weight: 400; color: #fff; background: rgba(0,0,0,.5)}
.card .textbox{padding: 2.5rem; box-sizing: border-box; min-height: 301px;}
.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: 26px;}
.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 .swiper-container.swiper2 .bannerzone{position: relative; width:1200px; height: 315px; margin: 0 auto;}*/
/* ad banner 영역 : END */


/* 공지사항 : START */
.notice-area .area-c{padding: 100px 14px 80px; box-sizing: border-box;}
.notice-area > ul > li{float: left;}
.notice-area > ul > li + li{margin-left: 30px;}
.notice-area .notice{position: relative; width: 572px;}
.notice-area .next{width: 570px;}
.notice-area .notice .tit{font-size: 3rem; font-weight: 700; padding-bottom: 1.8rem; border-bottom: 1px solid #ccc; margin-bottom: 10px;}
.notice-area .notice .tit:before{content: ""; display: inline-block; width: 8px; height: 28px; background: #fed90d; margin-bottom:-5px; margin-right: 20px;}
.notice-area .notice .allview{display: inline-block; position: absolute; top: 25px; right: 0; font-size: 1.6rem; font-weight: 500;}
.notice-area .notice > ul > li{font-size: 1.8rem; line-height: 53px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notice-area .notice .btnbox{text-align: center; margin-top: 15px;}
.notice-area .notice button{width: 15px; height: 15px; 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 .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: 24px; padding-top: 8px; margin-left: 30px;}
.notice-area .txtbox p:first-child:before{content: ""; display: inline-block; width: 8px; height: 28px; background: #fed90d; margin-bottom:-3px; margin-right: 20px;}
/* 공지사항 : 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: 3rem; font-weight: 700; text-align: center; margin: 0 0 20px 0;}
.imphoto-area .impt .tit:before{content: ""; display: inline-block; width: 8px; height: 28px; background: #fed90d; margin-bottom:-5px; margin-right: 20px;}
.imphoto-area .impt .allview{position: absolute; display: inline-block; top: 75px; right: 33px; font-size: 1.6rem; font-weight: 500;}
.imphoto-area .impt .prev{position: absolute; top: 280px; left: 0;}
.imphoto-area .impt .next{position: absolute; top: 280px; right: 0;}
.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 60px; box-sizing: border-box;}
.afterm-area .mbook .tit{display: inline-block; font-size: 3rem; font-weight: 700; text-align: center; margin: 0 0 20px 0;}
.afterm-area .mbook .tit:before{content: ""; display: inline-block; width: 8px; height: 28px; background: #fed90d; margin-bottom:-5px; margin-right: 20px;}
.afterm-area .mbook .allview{position: absolute; display: inline-block; top: 75px; right: 33px; font-size: 1.6rem; font-weight: 500;}

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


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

/* 월호 보기 : START */

/* 상단 sub-visual 영역 : START */
.sub-visual{position: relative; background: url(../../images/sub_visual.jpg) no-repeat 50%; height: 490px; background-size: cover;}
.sub-visual .screen{ position: absolute; background-color: rgba(0,0,0,0.3); width: 100%; height: 490px;}
.sub-visual .mtxt{text-align: center; padding: 16rem 0 0; box-sizing: border-box; color: #fff;}
.sub-visual .mtxt .date{position: relative; display: inline-block; font-size: 2.5rem; font-weight: 300;}
.sub-visual .mtxt .date button{position: absolute; top: 0; right: -45px; width: 40px; height: 40px;}
.sub-visual .mtxt .date button img{width: 28px; height: 18px; transform: translateY(-10%);}
.sub-visual .mtxt .mcopy{position: relative; font-size: 6.5rem; font-weight: 500; padding-top: 1rem;}
.sub-visual .mtxt .scopy{position: relative; font-size: 2.7rem; font-weight: 400; padding-top: 3rem;}
.sub-visual .booklist{position: absolute; top: 220px; left: 50%; width: 1200px; height: 210px; 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; left: 0; display: inline-block; width: 3000px;}
.sub-visual .booklist .listlayer > ul li{position: relative; float: left;}
.sub-visual .booklist .listlayer > ul li img{ width: 144px;}
.sub-visual .booklist .listlayer > ul li + li{margin-left: 40px;}
.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.9rem;}
.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: 10px 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{position: absolute; top: 50%; left: 0px; width: 45px; height: 65px; transform: translateY(-50%);}
.sub-visual .booklist .btn-prev img{width: 30px; height: 56px;}
.sub-visual .booklist .btn-next{position: absolute; top: 50%; right: 0px; width: 45px; height: 65px; transform: translateY(-50%);}
.sub-visual .booklist .btn-next img{width: 30px; height: 56px;}
/* 상단 sub-visual 영역 : END */

/* 기사검색 결과 영역 : START */
.sub-visual .search{text-align: center; padding: 18rem 0 0; box-sizing: border-box; color: #fff; font-size: 4rem;}
.sub-visual .search .srbox{display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;}
.sub-visual .search .mcopy{display: inline-block; max-width: 1100px; padding-bottom: 60px;}
.sub-visual .search .mcopy em{color: #ffda00; font-weight: 500;}
.sub-visual .search .wcopy{font-size: 4.4rem; font-weight: 500; padding-bottom: 60px;}
.sub-visual .search .result{position: relative; display: inline-block; max-width: 680px; width: 680px; max-height: 55px; padding-bottom: 8px; border-bottom: 2px solid #fff; text-align: center; font-size: 3rem;}
.sub-visual .search .result span{display: inline-block; width: 600px; white-space: nowrap; overflow: hidden;}
.sub-visual .search .result input{display: inline-block; width: 600px; height: 45px; white-space: nowrap; overflow: hidden; background: transparent; border: none; color: #fff; font-size: 3rem; 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: 0; right: 0; width: 40px; height: 40px;}
.sub-visual .search .result img{width: 32px; height: 32px;}
.sub-visual .search .rs{font-size: 2.2rem; margin-top: 30px;}
/* 기사검색 결과 영역 : END */

/* 기사 콘텐츠(서브페이지) : START */
.sub-magazine{width: 1172px; min-height: 450px; margin: 0 auto 30px; background: #fff;}
.sub-magazine li{float: left;}
.sub-magazine > li:first-child{width: 572px; height: 432px;}
.sub-magazine > li:last-child{position:relative;width: 554px; height: 432px; margin-left: 30px; padding: 35px 10px 15px 0; box-sizing: border-box;}
.sub-magazine li .titimg{position: relative; width: 572px; height: 312px; 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: 572px; min-height: 103px; background: rgba(0,0,0,.8); padding: 16px 27px 20px; 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: 5px 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; height: 85px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.sub-magazine .textzone .keyword{max-height: 90px; overflow: hidden; 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{margin-right: 15px;}
.sub-magazine .textzone .keyword li{display: inline-block; line-height: 36px; padding: 0 18px; box-sizing: border-box;}
.sub-magazine .textzone .deepview{position: absolute; bottom: 30px; right: 20px; color: #000; font-weight: 500;}
/* 기사 콘텐츠(서브페이지) : END */

/* 포토 갤러리 : START */
.s-gallery{padding: 55px 14px 90px; box-sizing: border-box; text-align: center;}
.s-gallery .menu-area{position: relative;}
.s-gallery .menu-area .prevar{position: absolute; top: 50%; left: 50px; transform: translateY(-50%); width: 40px; height: 40px;}
.s-gallery .menu-area .nextar{position: absolute; top: 50%; right: 50px; transform: translateY(-50%); width: 40px; height: 40px;}
.s-gallery .menu-area button img{width: 15px; height: 27px;}
.s-gallery .tit{font-size: 3rem; font-weight: 700; text-align: center; margin-bottom: 35px;}
.s-gallery ul{display: inline-block;}
.s-gallery .subject li{float: left; color: rgba(0,0,0,0.6);}
.s-gallery .subject li button{display: inline-block; font-size: 1.6rem; padding: 7px 20px; 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{margin-top: 30px;}
.s-gallery .pt-area li{position: relative; float: left; background: #eee; overflow: hidden;}
.s-gallery .pt-area li button{width: 290px; height: 290px;}
.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 li + li{margin-left: 4px; margin-top: 4px;}
.s-gallery .pt-area li:nth-of-type(4n-3){margin-left: 0; margin-top: 4px;}
.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: 55px 33px 60px; box-sizing: border-box;}
.after-news .mbook .tit{font-size: 3rem; font-weight: 700; text-align: center;}
.after-news .mbook .allview{position: absolute; display: inline-block; top: 75px; right: 33px; font-size: 1.6rem; font-weight: 500;}

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

/* 월호 보기 : END */

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

.news-visual{height: 847px; }
.news-visual .screen{background-color: rgba(0,0,0,0.3); width: 100%; height: 847px; position: absolute; z-index: 2;}
.news-visual .news-top{position: relative; width: 1200px; height: 100%; margin: 0 auto;}
.news-visual .news-top .title{position: absolute; top: 45%; left: 85px; color: #fff; z-index: 3;}
.news-visual .news-top .subject{position: relative; font-size: 6.5rem; font-weight: 500; padding-bottom: 20px;}
.news-visual .news-top .subject:before {content: ''; display: inline-block; position: absolute; top: -30px; left: 0; width: 58px; height: 8px; background: #fede2a; }
.news-visual .news-top .scopy{position: relative; font-size: 2.4rem;}
.news-visual .news-top .scopy span + span{margin-left: 40px;}

.news-cont{width: 1200px; margin: 0 auto; padding: 105px 0 100px; text-align: center;}
.news-cont .news{position: relative; display: inline-block; width: 1028px; text-align: left; font-size: 2rem; line-height: 3.4rem; font-weight: 400}
.news-cont .news .mc{font-family: 'Scoredream'; font-size: 2.4rem; line-height: 3.6rem; padding-bottom: 15px; font-weight: 600; position:relative}
.news-cont .news .mc:before{content:'';	display:inline-block;	position:absolute;	top: -20px;	left: 0;	width: 58px;	height:5px;	background:#fede2a;}
.news-cont .news .sc{padding-bottom: 43px; font-weight: 400;}
.news-cont .news .img{padding: 20px 0;}
.news-cont .news > img{max-width: 100%; height: auto;}

.news-cont .news .sell{position: relative; width: 1028px;}
.news-cont .news .sell figure{width: 100%; overflow: hidden;}
.news-cont .news .sell-02{position: relative; width: 1028px;}
.news-cont .news .sell-02 figure{width: 48%; 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 .image{padding-bottom: 70px; text-align:left}
.news-cont .news .image img{max-width: 100%; height: auto;}


.news-cont .news .image figcaption{position: relative; font-size: 1.4rem; line-height: 2.5rem; padding-top: 20px; font-weight: 500;}
.news-cont .news .image figcaption:before{content: ''; display: inline-block; position: absolute; bottom: -22px; left: 0; width: 33px; height: 4px; background: #ffda00;}
.news-cont .news .sell-01{position: relative; width: 1028px; overflow: hidden;}
.news-cont .news .keyword{margin-top: 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: 15px; margin-bottom: 10px;}
.news-cont .news .keyword li:first-child{margin-right: 15px;}
.news-cont .news .keyword li{display: inline-block; line-height: 36px; padding: 0 18px; box-sizing: border-box;}

/* 뉴스기사 포토 갤러리 : START */
.news-cont .pt-area{margin-top: 10px;}
.news-cont .pt-area li{position: relative; float: left; background: #eee; overflow: hidden;}
.news-cont .pt-area li button{width: 254px; height: 254px;}
.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 li + li{margin-left: 4px; margin-top: 4px;}
.news-cont .pt-area li:nth-of-type(4n-3){margin-left: 0; margin-top: 4px;}
.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: 8;}
.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:80px;}
.news-cont .photoGallary:before{content:'';	display:inline-block;	position:absolute;	top:-20px;	left:0;	width:58px;	height:5px;	background:#fede2a;}
/* 뉴스기사 포토 갤러리 : END */

/* 다른기사보기 네비게이션 : START */
.nav-btm{position: fixed; bottom: 0; width: 100%;z-index:99}
.nav-btm .view-area{position: absolute; bottom: -180px; left: 0; width: 100%; height: 180px; background: rgba(255,255,255,.8); opacity: 1; transition: all 0.3s;}
.nav-btm .view-area.on{bottom: 70px; z-index: 9;}
.nav-btm .news-nav{position: absolute; bottom: 0; width: 100%; height: 70px; border-top: 1px solid #ccc; background: #fff; text-align: center; z-index: 11}
.nav-btm .news-nav button{display: inline-block; font-size: 1.6rem; font-weight: 400; padding: 3px 5px; z-index: 10;}
.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: 50px; 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{position: absolute; left: 50%; top: 20%; transform: translateX(-50%);}
.nav-btm .news-nav .other-news:before {content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 12px; height: 8px; background: url(../../images/com/arrow_top_g.svg) no-repeat; margin-top: -5px;}
.nav-btm .news-nav .next-news{position: absolute; right: 50px; 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%; width: 1028px; transform: translate(-50%, -50%); overflow: hidden; text-align: center; box-sizing: border-box;}
.nav-btm .view-area .more-news ul{display: inline-block; width: 5000px; height: 147px;}
.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: 20px;} */
.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: 2;}
.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: 1.6rem; font-family: 'Scoredream'; font-weight: 500; color: #fff; z-index: 2; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.nav-btm .view-area .btnlayer{position: absolute; top: 50%; left: 50%; width: 1120px; height: 180px; transform: translate(-50%, -50%); overflow: hidden; text-align: center; padding: 0 60px; box-sizing: border-box;}
.nav-btm .view-area .btnlayer button img{width: 30px; height: 25px;}
.nav-btm .view-area .btnlayer .left{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; z-index: 9;}
.nav-btm .view-area .btnlayer .right{position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; z-index: 9;}
/* 다른기사보기 네비게이션 : END */

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

/* 상단 sub-visual 영역 : START */
.sub-title{position: relative; height: 390px;}
.sub-title .top .title{position: absolute; top: 40%; left: 50%; transform: translateX(-50%); color: #fff; text-align: center;}
.sub-title .top .scopy{font-size: 1.8rem; padding-bottom: 10px; letter-spacing: 1px;}
.sub-title .top .subject{font-size: 6.3rem; 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: 1200px; margin: 0 auto;}
.mgz-area .mgz{padding: 60px 14px 110px; box-sizing: border-box;}
.mgz-area .mgz .yearall{position: relative; width: 100%;}
.mgz-area .year-list{position: relative; width: 95%; height: 60px; overflow: hidden;}
.mgz-area .year-list ul{position: absolute; width: 100%; /*padding: 0 40px;*/ box-sizing: border-box;}
.mgz-area .year-list li{float: left; width: 110px;}
.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: 40px; height: 40px;}
.mgz-area .yearall .nextar{position: absolute; top: 44%; left: 1140px; transform: translateY(-50%); width: 40px; height: 40px;}
.mgz-area .yearall button img{width: 15px; height: 27px;}

.mgz-area .mgzlist li{float: left; overflow: hidden;}
.mgz-area .mgzlist li .month{position: relative; width: 272px; height: 402px;}
.mgz-area .mgzlist li .month img{width: 272px; height: 402px;}
.mgz-area .mgzlist li + li{margin-left: 28px; margin-top: 40px;}
.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: 17px solid #f2c41d; box-sizing: border-box; text-align: center; padding: 25% 5%; overflow: hidden;}
.mgz-area .mgzlist .screen .tbox dt{font-size: 3rem; font-weight: 500;  color: #fed90d;}
.mgz-area .mgzlist .screen .tbox dd{font-size: 1.8rem; line-height: 3.2rem; font-weight: 300;  color: #fff; text-align: left; padding-left: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mgz-area .mgzlist li:hover .screen{opacity: 1;}
.mgz-area .mgzlist li:nth-of-type(4n-3){margin-left: 0; margin-top: 40px;}
.mgz-area .mgzlist .subject{font-size: 2.6rem; padding-top: 20px;}
/* 과월호 보기 : END */

/* 단체 소개 : START */
.introduce{width: 1200px; margin: 65px auto 0;}
.introduce .inner{padding: 60px 14px 0px; box-sizing: border-box;}
.introduce .inner .ngs, .ngp{position: relative; width: 100%; text-align: center;}
.introduce .inner .ngs .tit, .ngp .tit{font-size: 3.2rem; font-weight: 500; font-family: 'Scoredream';}
.introduce .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;}
.introduce .inner .ngs p{text-align: left; font-size: 2.1rem; line-height: 3.4rem; padding: 25px 0 50px; margin-bottom: 50px;}
.introduce .inner .ngp p{text-align: left; font-size: 2.1rem; line-height: 3.4rem; padding: 25px 0 50px;}
.introduce .inner .ngs p span, .ngp p span{display: block;}

.bear-bg{background: url(../../images/bearbg.jpg) no-repeat 50%; height: 495px;}
.bear-bg .magazine-kr{position: relative; width: 1200px; margin: 0 auto;}
.bear-bg .magazine-kr .tbox{position: absolute; top: 65px; left: 14px; width: 725px; height: 360px; background: #000; color: #fff; padding: 65px; box-sizing: border-box;}
.bear-bg .magazine-kr .tbox .tit{position: relative; font-size: 3.2rem; font-weight: 500; font-family: 'Scoredream'; padding-bottom: 20px;}
.bear-bg .magazine-kr .tbox .tit:before{content: ''; display: inline-block; position: absolute; top: 8px; left: -24px; width: 8px; height: 29px; background: #fed90d;}
.bear-bg .magazine-kr .tbox .copy{font-size: 2.2rem;}
.bear-bg .magazine-kr .tbox .copy span{display: block;}

.deduction{width: 1200px; margin: 65px auto;}
.deduction .inner{padding: 60px 14px 110px; box-sizing: border-box; text-align: center;}
.deduction .inner .tit{font-size: 3rem; font-weight: 500;}
.deduction .tab-menu > ul{position: relative; width: 100%; height: 1000px;}
.deduction .tab-menu > ul > li{float: left; width: 50%;}
.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,0.5); line-height: 5rem; margin: 10px 0 20px; border-bottom: 3px solid transparent;}
.deduction .tab-menu > ul > li.active > button{color: rgba(0,0,0,1); border-bottom: 3px solid #ffda00;}
.deduction .tab-menu > ul > li button:hover{display: block; text-align: center; width: 100%;  color: rgba(0,0,0,1); border-bottom: 3px solid #ffda00;}
.deduction .tab-menu .contbox{position: absolute; top: 80px; left: 20px; width: 1124px; text-align: left; opacity: 0; transition: all 0.5s;}
.deduction .tab-menu .layer.active .contbox{display: block; opacity: 1;}
.deduction .tab-menu .contbox ul{margin-top: 40px; width: 100%; max-height: 222px; 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: block; width: 30%;}
.deduction .tab-menu .contbox ul li:last-child{display: block; width: 70%;}
.deduction .tab-menu .contbox ul li.tbox{position: relative; height: 220px; 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: 3.2rem; font-weight: 600; font-family: 'Scoredream';}
.deduction .tab-menu .contbox ul li span:before{content: ''; display: inline-block; position: absolute; top: 8px; left: -20px; width: 5px; height: 30px; background: #ffda00;}
.deduction .tab-menu .contbox ul li p{display: block; text-align: left; font-size: 2.1rem;}

.introduce{width: 1200px; margin: 65px auto;}
.introduce .inner{padding: 60px 14px 110px; box-sizing: border-box; text-align: center;}
.introduce .inner .tit{font-size: 3rem; font-weight: 500;}
.introduce .book .contbox{/*position: absolute; opacity: 0;*/ top: 80px; left: 20px; width: 1172px; text-align: left;  transition: all 0.5s;}
.introduce .book .contbox ul{margin-top: 40px; width: 100%; max-height: 383px; border: 1px solid #ddd; box-sizing: border-box;}
.introduce .book .contbox ul li{float: left;}
.introduce .book .contbox ul li:first-child{display: block; width: 30%;}
.introduce .book .contbox ul li:last-child{display: block; width: 70%;}
.introduce .book .contbox ul li.tbox{position: relative; height: 220px; background-color: #fff;}
.introduce .book .contbox ul li div{position: absolute; /*top: 50%;*/ transform: translateY(20%); padding: 0 20px; box-sizing: border-box;}
.introduce .book .contbox ul li span{position: relative; display: block; text-align: left; font-size: 3.0rem; font-weight: 600; font-family: 'Scoredream';}
.introduce .book .contbox ul li span:before{content: ''; display: inline-block; position: absolute; top: 8px; left: -20px; width: 5px; height: 30px; background: #ffda00;}
.introduce .book .contbox ul li p{display: block; text-align: left; font-size: 2.1rem;}

.wroldmap{padding: 0px 0 100px;}
.wroldmap .tit{font-size: 3.6rem; text-align: center; padding: 0 0 30px;}
.wroldmap .tit span{font-weight: 600;}
.wroldmap .w-map{position: relative; height: 580px; background: url(../../images/worldmap_200610.jpg?1212) no-repeat 50%;}
.wroldmap .w-map .point{position: absolute;}
.wroldmap .w-map .point .pointer{display: inline-block; width: 30px; height: 40px; cursor: pointer;}
.wroldmap .w-map .point.m01{top: 0px; left: 280px;}
.wroldmap .w-map .point.m02{top: 210px; left: 285px;}
.wroldmap .w-map .point.m03{top: 298px; left: 320px;}
.wroldmap .w-map .point.m04{top: 190px; left: 505px;}
.wroldmap .w-map .point.m05{top: 390px; left: 560px;}
.wroldmap .w-map .point.m06{top: 165px; left: 825px;}
.wroldmap .w-map .point.m07{top: 415px; left: 940px;}
.wroldmap .w-map .point .pointer .pic{position: absolute; top: 100%; left: 50%; display: block; border: 5px solid #fff; border-radius: 5px; box-shadow: 3px 3px 2px 2px rgba(0,0,0,0.2); transform: translate(-80% -80%); opacity: 0; transition: all 0.3s cubic-bezier(.39,0,.12,.99); z-index: 2;}
.wroldmap .w-map .point .pointer .pic img{width: 130px; height: 130px;}
.wroldmap .w-map .point .pointer:hover .pic{opacity: 1; transform: scale(1);}
/* 단체 소개 : END */

/* 공지사항 LIST : START */
.cont-wrap .wrapper{width: 1028px; margin: 80px auto 50px;}
.cont-wrap .tab-menu{height: 55px; line-height: 53px; font-size: 2.4rem; font-weight: 500; text-align: center; margin-bottom: 70px;}
.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: 120px; text-align: right;}
.bbs_wrap select{width: 130px; 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; vertical-align: middle; box-sizing: border-box; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; min-width: 75px; padding: 0 12px 2px; font-size: 1.6rem;}
.bbs_wrap .p-button {display: inline-block; width: 60px; 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: 60px; 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{padding: 23px 25px 25px; vertical-align: middle; background: #fbfbfb; font-size: 1.8rem; font-weight: 500;}
.bbs_wrap .listview .p-table tbody tr td{border-top: 1px solid #ddd; padding: 15px; vertical-align: middle;}
.bbs_wrap .listview .p-table tbody tr td:nth-child(1){font-size: 1.4rem; color: #767676;}
.bbs_wrap .pageview .p-table tbody tr td:nth-child(2){font-size: 1.4rem; color: #767676;}
.bbs_wrap .p-table tbody tr td:nth-child(2) span{display: inline-block; border-radius: 3px; padding: 3px 25px 5px; font-weight: 400;}
.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: 50px; box-sizing: border-box;}
.bbs_wrap .p-table tbody tr td:nth-child(3) p{font-size: 2rem;}
.bbs_wrap .p-table tbody tr td:nth-child(3) .date{display: inline-block; font-size: 1.6rem; color: #767676;}

.page-list{text-align: center; font-size: 1.6rem; font-weight: 400;}
.pagination {display: inline-block;}
.pagination span{display: inline-block;}
.pagination > a {display: inline-block; color: black; width: 40px; height: 40px; line-height: 37px; 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: 40px; height: 40px; 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: 15%;}
.pagination span a.next {background: #000 url(../../images/com/argr_right.svg) no-repeat 50%; background-size: 15%;}
/* 공지사항 LIST : END */

/* 공지사항 page view : START */
.bbs_wrap .pageview .p-table thead tr th{padding: 23px 5px 25px 25px; 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: 3px 25px 5px; 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{display: inline-block; width: 87%; text-align: left; font-weight: 300; font-size: 2rem;}
.bbs_wrap .pageview thead tr th .date{display: inline-block; width: 12%; text-align: right; 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: 40px 25px 60px; 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; padding-bottom: 20px;}
.eventzone li + li{margin-left: 28px; margin-bottom: 28px;}
.eventzone li:nth-of-type(3n-2){margin-left: 0;}
.eventzone li a{position: relative; display: inline-block; width: 324px; height: 319px; 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: 25px 8px 15px; font-size: 2.6rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.eventzone li span{display: inline-block; padding: 0 8px; font-size: 1.8rem;}
/* EVENT ZONE : END */

/* 나도 사진작가 : START */
.imphoto .pho-visual{position: relative; background: url(../../images/apply_bg.jpg) no-repeat 50%; margin: 0 auto; background-size: cover;}
.imphoto .pho-visual .top{position: relative; height: 698px;}
.imphoto .pho-visual .top .title{position: absolute; top: 36%; left: 5%; color: #fff;}
.imphoto .pho-visual .top .scopy{font-size: 3.4rem; padding-bottom: 20px; letter-spacing: 1px;}
.imphoto .pho-visual .top .subject{font-size: 9.5rem; font-weight: 600; font-family: 'Scoredream'; /*padding-bottom: 40px;*/}
.imphoto .pho-visual .top .date{font-size: 2.4rem; font-weight: 400;}

.imphoto .im.pho-info{background: #000;}
.imphoto .im.pho-info .inner{padding: 65px 0; text-align: center; color: #fff;}
.imphoto .im .inner .tit{position: relative; font-size: 2.8rem; font-weight: 600; padding-bottom: 3.5rem;}
.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 .tag{font-size: 1.8rem; font-weight: 200;}

.imphoto .im.pho-award{background: #f8f8f8;}
.imphoto .im.pho-award .inner{padding: 65px 0; text-align: center;}
.imphoto .im.pho-award .product div + div{margin-left: 25px;}
.imphoto .im.pho-award .product div{position: relative; display: inline-block; width: 372px; height: 244px; background: #fff; border-radius: 20px; font-size: 2.4rem;}
.imphoto .im.pho-award .product div:first-child{background: #fff url(../../images/com/gift_card.svg) no-repeat 50% 40%; background-size: 35%}
.imphoto .im.pho-award .product div:last-child{background: #fff url(../../images/com/book_illust.svg) no-repeat 50% 40%; background-size: 32%}
.imphoto .im.pho-award .product div span{position: absolute; top: 70%; left: 50%; transform: translateX(-50%); width: 100%; font-weight: 400;}

.imphoto .im.pho-matter{background: #000;}
.imphoto .im.pho-matter .inner{padding: 65px 0; text-align: center; color: #fff;}
.imphoto .im.pho-matter ul{display: inline-block;}
.imphoto .im.pho-matter ul li{font-size: 2rem; line-height: 4.2rem; text-align: left;}
.imphoto .im.pho-matter ul li .scopy{display: block; font-size: 1.6rem; margin: -1.5rem 0 0 1rem;}
.imphoto .im.pho-matter ul li .yc{color: #ffda00;}

.imphoto .im.pho-question{background: #f8f8f8}
.imphoto .im.pho-question .inner{padding: 65px 0; text-align: center;}
.imphoto .im.pho-question dl{width: 70%; text-align: left; margin: 0 auto 30px;}
.imphoto .im.pho-question dl dt{font-size: 2.2rem; font-weight: 500; padding-bottom: 10px;}
.imphoto .im.pho-question dl dd{font-size: 2rem;}
.imphoto .im.pho-question dl dd.space{margin-left: 12px;}

.imphoto .im.pho-list .inner{position: relative; padding: 65px 0; text-align: center;}
.imphoto .im.pho-list .inner .term{font-size: 1.6rem; font-weight: 400;}

.imphoto .im.pho-list .pt-area{text-align: center;}
.imphoto .im.pho-list .pt-area ul{display: inline-block; width: 1040px;}
.imphoto .im.pho-list .pt-area li{position: relative; float: left; background: #eee; overflow: hidden;}
.imphoto .im.pho-list .pt-area li button{width: 242px; height: 242px;}
.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 + li{margin-left: 24px; margin-top: 24px;}
.imphoto .im.pho-list .pt-area li:nth-of-type(4n-3){margin-left: 0; margin-top: 24px;}
.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: 67px; right: 80px;}
.imphoto .im.pho-list select{width: 160px; 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: 698px;}
.sv-visual .top .title{position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); color: #fff;}
.sv-visual .top .subject{font-size: 9.5rem; font-weight: 600; font-family: 'Scoredream'; padding-bottom: 10px;}
.sv-visual .top .scopy{font-size: 3.4rem; letter-spacing: 1px; text-align: center;}

.sv.quiz{background: #f8f8f8;}
.sv.quiz.bcover{background: #fff;}
.sv.quiz .inner{padding: 65px 0; 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: 236px; height: auto; background: #fff; border-radius: 20px; text-align: center;}
.sv.quiz .inner .survey li.chked{border: 3px solid #ffda00; transition: all 0.3s;}
.sv.quiz.bcover .inner .survey li{background: #f8f8f8;}
.sv.quiz .inner .survey li + li{margin-left: 28px;}
.sv.quiz .inner .survey li .box{display: inline-block; width: 185px; height: 185px; border-radius: 50%; overflow: hidden; margin-top: 50px;}
.sv.quiz .inner .survey li .cover{display: inline-block; width: 165px; height: 240px; 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 #d2d2d2; border-radius: 100%; transition: all 0.5s;}
.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%;}
.sv.quiz .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.bcover .checks input[type="radio"] + label:before {content: ''; position: absolute; left: 0; top: -33px; width: 40px; height: 40px; text-align: center; background: #fff; border: 2px solid #d2d2d2; border-radius: 100%; transition: all 0.5s;} 
.quiz.bcover .checks input[type="radio"].on:checked + label:after {content: ''; position: absolute; left: 7px; top: -26px; 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: -75px; top: 100px; 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: 107px; left: -68px; 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: 1200px; margin: 0 auto; padding: 0 100px 80px; box-sizing: border-box; text-align: center; font-size: 2.2rem; font-weight: 500;}

.sv.quiz .inner .survey-rs{display: inline-block; width: 860px;}
.sv.quiz .inner .survey-rs > li{position: relative; height: auto; background: #fff; border-radius: 20px; text-align: left; padding: 15px 35px 30px 120px; box-sizing: border-box;}
.sv.quiz .inner .survey-rs > li + li{margin-top: 27px;}
.sv.quiz .inner .survey-rs > li.chked{border: 3px 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;}
.sv.quiz .inner .survey-rs > li .graph{position: absolute; bottom: 30px; right: 35px; width: 500px;}
.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: 45px; background: #bdbdbd; border-radius: 10px; overflow: hidden;}
.sv.quiz .inner .survey-rs > li .graph .bar{position: absolute; top: 0; left: 0; height: 45px; background: #ffda00;}
.sv.quiz .inner .survey-rs > li .graph .bg span{position: absolute; top: 0; left: 0; font-size: 2rem; line-height: 42px; 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: 20px; min-height: 60px; background: #fff; border-radius: 20px; text-align: left;}
.quiz .inner .tsurvey.rs > li{position: relative; width: 100%; margin-left: 0; 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: 20px 30px; 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: 45%; transform: translateY(-50%); display: inline-block;}
.quiz .tsurvey.rs .checks {position: absolute; left: -20px; top: 48%; transform: translateY(-50%); display: inline-block;}
.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: 50%;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: 698px;}
.ex-visual .top .title{position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 100%;}
.ex-visual .top .subject{font-size: 9.5rem; font-weight: 600; font-family: 'Scoredream'; padding-bottom: 10px; text-align: center;}
.ex-visual .top .scopy{font-size: 3.4rem; letter-spacing: 1px; text-align: center;}

.ex .inner{padding: 95px 14px 20px; box-sizing: border-box; text-align: center;}
.ex .inner .tit{position: relative; font-size: 2.8rem; font-weight: 600; padding-bottom: 2.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: 20px;}
.ex .selec select{line-height: 27px; padding: 0 40px 2px 12px; cursor: pointer; font-size: 1.6rem; 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 .inner .prizelist{position: relative; display: inline-block;}
.ex .inner .prizelist li{float: left; width: 372px;}
.ex .inner .prizelist li + li{margin-left: 28px;}
.ex .inner .prizelist li:nth-of-type(3n+1){margin-left: 0;}
.ex .inner .prizelist .imgbox{position: relative; width: 372px; height: 372px;}
.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: 1200px; 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 {display: inline-block; width:50%;}
.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: 25px;}
.recruit .inner .ngs .recruit_proces div{position: relative; display: inline-block; width: 272px; height: 244px; background: #f8f8f8; border-radius: 20px; font-size: 2.4rem;}
.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:122px;}
.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 {display: inline-block; width:50%;}
.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: 25px;}
.recruit .inner .ngs .recruit_proces_photo div{position: relative; display: inline-block; width: 272px; height: 244px; background: #f8f8f8; border-radius: 20px; font-size: 2.4rem;}
.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:122px;}
.recruit .inner .ngs .recruit_proces_photo div span{position: absolute; top: 70%; left: 50%; transform: translateX(-50%); width: 100%;}

/* 인재채용 : END */



/* FOOTER */
footer{background: #000;}
.footer-info{position: relative; padding: 60px 0 100px; font-size: 1.4rem; color: rgba(255,255,255,0.6); line-height: 22px; font-weight: 400; box-sizing: border-box;}
.footer-info .inner{display: inline-block; margin-left: 45px;}
.footer-info .contact span + span{margin-left: 30px;}
.footer-info address{display: inline-block;}
.footer-info .tel{display: inline-block; margin-left: 30px;}
.footer-info .footer_nav ul{display: inline-block; margin-top: 20px;}
.footer-info .footer_nav ul + ul{margin-left: 20px;}
.footer-info .footer_nav ul li{display: inline-block;}
.footer-info .footer_nav ul li + li{margin-left:25px;}
.footer-info .footer_nav .point{color: rgba(255,218,0,0.6);}
.footer-info .foot-ng{position: absolute; top: 60px; right: 10px; width: 350px;}
.footer-info .foot-ng .tbox{float: left; width: 230px; 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 10px;}
.footer-info .foot-ng button{width: 240px; 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{/*max-width: 82px;*/ margin-bottom:16px; max-height: 121px;}
.footer-info .foot-ng .footer_logo{float:left; width:214px; margin-bottom:16px; max-height: 121px;}
/*
.footer-info .tne-ng{position: absolute; top: 10%; right: 0; display: inline-block; padding: 13px 40px 15px; border: 1px solid rgba(255,255,255,0.2); text-align: center; transition: all 0.3s;}
.footer-info .tne-ng:hover{border: 1px solid rgba(255,255,255,0.5);}
.footer-info .tne-ng em{display: block; font-size: 1.6rem; color: #a0a0a0; font-weight: 400;}
.footer-info .tne-ng span{font-size: 2rem; color: #f2c41d; font-weight: 500;}
*/


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

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

.confirm{width: 1200px; margin: 0 auto; text-align: center; padding: 0 0 80px;}
.btn-confirm{display: inline-block; width: 240px; height: 60px; line-height: 58px;  border-radius: 3px; text-align: center; background: #fede2a; font-size: 2.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: 1200px; position: fixed; top: 50%; left: 50%; color: #fff; 
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modal-wrapper ul{max-width: 1000px; margin: 0 auto;}
.modal-wrapper ul li{position: relative; float: left; font-size: 1.8rem; line-height: 3.2rem; width: 100%; text-align: center;}
.modal-wrapper ul li img{max-width: 1000px; max-height:650px;}
.modal-wrapper ul li .bicview{position: absolute; top: 20px; left: 20px; width: 45px; height: 45px;}
/* .modal-wrapper ul li figcaption{margin-top: 20px;} */
.modal-wrapper figcaption{position: absolute; /*bottom:0; background: rgba(0,0,0,0.6);*/ width:100%; max-height: 104px; text-align:center; color:white; font-size: 1.8rem; font-family: 'NotoSansKR'; display:block; padding:25px; overflow-y:auto;}
/* .modal-wrapper ul li figcaption pre{font-size: 1.4rem; font-family: 'NotoSansKR';} */
.modal-wrapper ul li p{font-size: 2.4rem; line-height: 3.2rem; padding-bottom: 10px; font-weight: 500;}
.modal-wrapper .btn-prev{position: absolute; top: 50%; left: 0; width: 45px; height: 65px; 
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.modal-wrapper .btn-prev img{width: 20px; height: 35px;}
.modal-wrapper .btn-next{position: absolute; top: 50%; right: 0; width: 45px; height: 65px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.modal-wrapper .btn-next img{width: 20px; height: 35px;}
.modal-wrapper .btn-close{position: absolute; top: 0px; right: 10px; width: 35px; height: 35px;}
.modal-wrapper.open{display: block; opacity: 1; visibility: visible; 
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
/* 사진크게보기 : END */

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


/* swiper1(지난호보기, 지난주요기사) CSS : START */
[class^="swiper-button-"] {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-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;
    -moz-transition: opacity .6s ease;
    -o-transition: opacity .6s ease;
    transition: opacity .6s ease;
}

.swiper-container.swiper-container-coverflow {
    padding-top: 40px;
}
.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);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.swiper-container.swiper1 .swiper-slide {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    background-size: 40%;
}
.swiper-container.swiper1 .swiper-slide .entity-img {
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 52%;
    display: block;
}
.swiper-container.swiper1 .swiper-slide .content {
    position: absolute;
    bottom: 7%;
    left: 0;
    width: 95%;
    padding-left: 18%;
    color: #fff;
}
.swiper-container.swiper1 .swiper-slide .content .title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-right: 20px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.swiper-container.swiper1 .swiper-slide .content .caption {
    display: block;
    font-size: 15px;
    line-height: 1.6;
}

[class^="swiper-button-"] {
    width: 44px;
    opacity: 0;
    visibility: hidden;
}

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

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

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

/* swiper2(메인 슬라이드 배너) CSS : START */

.swiper-container.swiper2 .swiper-slide {
    text-align: center;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    }
.swiper-container.swiper2 .swiper-slide img { width: 1200px; height: 315px; }
/* swiper2(메인 슬라이드 배너) CSS : END */

.menu-area .menu-bar{
	width:83%;
	height:68px;
	overflow:hidden;
}
.menu-area .menu-bar ul{
	width:3000px
}