@import url('https://fonts.googleapis.com/css?family=Montserrat');

body, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, select, input, button{
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Montserrat','Noto Sans KR',"Apple SD Gothic Neo",Helvetica,arial,Dotum,Tahoma,Geneva,sans-serif!important;
	font-size: 16px;
}

select,input,button{border-radius: 0; border: 0;}
.text-right{text-align: right;}
.sm-text{font-size: 0.8em;}
.underline{text-decoration: underline;}
.italic{font-style: italic;}
button{cursor: pointer; border: 0; background: transparent;}
.mobile-show{display: none;}
.mobile-show-in{display: none;}
.last-div{padding-bottom: 150px!important;}
.patop-80{padding-top: 80px;}

/* nav */
.nav{position: fixed; z-index: 100; background: #fff; width: 100%; top: 0; padding-left: 50px; box-sizing: border-box; height: 80px; line-height: 80px; vertical-align: middle; border-bottom: 1px solid #eaeaea; transition: 0.2s all; opacity: 1; display: none;}
.nav ul li{float: left; margin: 0 30px; font-size: 16px; color: #222; }
.nav ul li.on{font-weight: bold;}
.nav ul li:first-child{margin-left: 0; margin-right: 0;}
.nav ul li a{display: inline-block; font-size: inherit; color: inherit;}
.nav ul li a img{margin-top: 23px;}
.nav ul li.btn-li{float: right;}
.nav .subscribe-btn{display: block; width: 10%; position: absolute; top: 0; right: 0; background: #222; height: 80px; line-height: 80px; color: #fff; text-align: center; border: 0; font-size: 18px; width: 162px;}
.nav .subscribe-btn span{font-size: inherit;color: inherit; font-weight: inherit;}
.nav-up {opacity: 0; top: -80px;}


/* main */
.bg-area{position: fixed; top: 80px;right: 50%; width: 50%; height: 100%; text-align: right; background: url(/sl/img/bg02.jpg) 50% 0 no-repeat; background-size: cover; z-index: -1;}
.section{text-align:center;}
#section0,
#section1,
#section2,
#section3{background-size: cover;background-attachment: fixed;}

#section0{background-image: url(../img/bg01.jpg); background-position: 50% 50%; z-index: 200; transition: 0.5s all; background-color: #333;}
#section0 h1{top: 30%; position: relative;}
#section0 h1 img{width: 100%; max-width: 250px;}
#section0 h2{top: 41%; transform: translateY(-50%); position: relative; width: 100%; height: 160px; margin: 0 auto; display: none; text-shadow: 0 0 15px rgba(0,0,0,0.85);}
#section0 h2 .issue{font-weight: 300; font-size: 24px; color: #fff; border-bottom: 1px solid #fff; line-height: 1.2em; display: inline-block; padding-bottom: 5px; margin-bottom: 8px; margin-top: 24px;}
#section0 h2 .title{font-weight: 400; font-size: 46px; color: #fff; line-height: 1.2em; letter-spacing: -1px;}
#section0 .arrow{position: absolute; bottom: 50px; width: 100%;}


#section1 .issue-content{width: 50%; margin-top: 20%;}
#section1 .issue-content .title{font-size: 24px; font-weight: bold; line-height: 1.5em;}
#section1 .issue-content .line{border-right: 1px solid #707070; display: block; height: 150px; width: 1px; margin: 60px auto;}
#section1 .issue-content .content{padding: 0 10% 120px; line-height: 1.95em; font-size: 18px; color: #222;  text-align: left;}
#section1 .issue-content .content p{text-indent: 15px; font-size: inherit; color: inherit; font-weight: inherit; word-break: keep-all;}
#section1 .issue-content .content p.bible{color: #888; text-align: center; line-height: 1.6em; padding: 30px 10px; font-size: 0.95em; text-align: center;}


#section2{padding: 80px 0 0;  box-sizing: border-box; background: #fff;}
#section2 .prologue-wrap{width: 100%; margin: 0 auto; background: url(../img/prologue.jpg) no-repeat 50% 50%; height: 200px; background-size: cover; position: relative;}
#section2 .prologue-wrap:after{content: ""; display:block; width: 100%; height: 200px; background: rgba(0,0,0,0.2); position: absolute;top: 0; left: 0;}
#section2 h2.prologue{color: #fff; font-size: 14px; padding-top: 70px; font-weight: 400; position: relative; z-index: 2;}
#section2 .title a{display: inline-block; color: #fff; font-size: 18px; font-weight: bold; line-height: 1.2em; padding-top: 15px; position: relative;z-index: 2;}


#section3{background: #fff; padding-top: 80px;}
h2.eng-st{font-weight: 400; color: #222; font-size: 24px; }

#section3 .movie{max-width: 1080px; width: 100%; margin: 30px auto 20px; padding: 0 15px; box-sizing: border-box;}
#section3 .movie .inner{width: 100%;  height: 100%; padding-bottom: 56.25%; margin: 0 auto 20px; position: relative;}
#section3 .movie .inner iframe{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#section3 .movie .title{font-size: 16px; font-weight: bold; color: #222; display: block; margin-bottom: 8px; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#section3 .movie .sub{font-size: 14px; color: #222; display: block;}


#section3 ul{text-align: center; padding: 50px 0 0; width: 100%; max-width: 1080px; margin: 0 auto;}
#section3 ul:after{content: ""; display: block; clear: both;}
#section3 ul li{display: block; width: 31.3333%; margin-right: 3%; float: left; box-sizing: border-box; vertical-align: top;}
#section3 ul li:nth-child(3n){margin-right: 0;}
#section3 ul li p{display: block; margin: 0 auto; width: 100%; transform: scale(1); transition: 0.2s all; overflow: hidden; max-width: 430px; margin-bottom: 20px; height: 200px; background-size: cover; background-position: 50% 50%; text-indent: -9999em; box-shadow: inset 0px 0px 60px rgba(0,0,0,0.05)}
#section3 ul li:hover p{transform: scale(1.05);}
#section3 ul li .title{font-size: 16px; font-weight: bold; color: #222; display: block; margin-bottom: 8px; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#section3 ul li .sub{font-size: 14px; color: #222; display: block; margin-bottom: 50px;}

#section4{padding: 50px 50px; box-sizing: border-box; background: #fff; border:1px solid #eaeaea;}
#section4 .subscribe span{font-size: 16px; margin-right: 5px; font-weight: 400;}
#section4 .subscribe button{background: #222; color: #fff; font-size: 18px; padding: 15px 37px; line-height: 1;}

#section5{background: #fff; padding-top: 80px;}
#section5 ul{padding: 50px 0 0; text-align: center; width: 100%; max-width: 1080px; margin: 0 auto;}
#section5 ul:after{content: ""; display: block; clear: both;}
#section5 ul li{width: 22.75%; box-sizing: border-box; display: block; margin-right: 3%; float: left;}
#section5 ul li.noimg{cursor: default;}
#section5 ul li.noimg a{cursor: default;}
#section5 ul li.noimg:hover img{transform: scale(1);}

#section5 ul li:nth-child(4n){margin-right: 0;}
#section5 ul li img{width:100%; max-width: 300px; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); transform: scale(1); transition: 0.2s all}
#section5 ul li:hover img{transform: scale(1.05);}
#section5 ul li em{background: #EAF0F4; padding: 50px; display: inline-block; margin-bottom: 15px;box-sizing: border-box; }
#section5 ul li .title{font-size: 16px; font-weight: bold; color: #222; display: block; margin-bottom: 8px;}
#section5 ul li .sub{font-size: 14px; color: #222; display: block; margin-bottom: 50px;}

#section6{box-sizing: border-box; background: #fff; padding: 0 0; }
#section6 .prologue-wrap{width:100%; margin: 0 auto; background: url(../img/about.jpg) no-repeat 50% 50%; height: 200px; background-size: cover;}
#section6 h2.prologue{color: #222; font-size: 24px; padding-top: 70px; font-weight: bold;}
#section6 .title a{display: inline-block; color: #222; font-size: 24px; font-weight: 400; line-height: 1.2em; padding-top: 15px;}

#footer{background: #222222; width: 100%; padding: 50px; box-sizing: border-box;}
#footer .left{width: 50%; text-align: left;}
#footer .left img{padding-bottom: 15px;}
#footer .left p{color: #ddd; font-size: 12px; line-height: 1.2em; padding-top: 15px;}
#footer .right{width: 50%; text-align: right;}
#footer .right ul li{display: inline-block; padding: 0 25px; border-right: 1px solid rgba(255,255,255,0.5); margin-bottom: 15px;}
#footer .right ul li a{color: #ddd;}
#footer .right ul li:last-child{border-right: 0; padding-right: 0;}
#footer .right select{border: 1px solid #ddd; color: #ddd; font-size: 14px; margin-top: 15px; height: 35px; line-height: 35px; text-align: left; padding-left: 15px; padding-right: 30px; box-sizing: border-box; width: 170px; background-position: 93% 50%}
#footer .right select option{color: #333;}
.btn-area{text-align: center; padding-bottom: 80px; }
.btn-area.absolute{position: absolute; bottom: 0; left: 0; text-align: center; width: 100%;}
.btn-area .btn-more{background: transparent; border: 0; border-bottom: 1px solid #222;}
.btn-area .btn-more span{vertical-align: middle; font-size: 18px; font-weight: 400;}
.btn-area .btn-more .icon.more{display:inline-block; background: url(/sl/img/more-btn.svg) 0 0 no-repeat; width: 10px; height: 10px; margin-right: 5px;}

.article .btn-area{padding-bottom: 0; padding-top: 50px;}

/* sub-issue */
.subpage h2.eng-st{font-weight: bold; padding-top: 80px;}
.subpage #section3 ul{padding-top: 50px; padding-left: 37.5px; padding-right: 37.5px;}

/* sub-library */
select.years{display: inline-block; width: 100px; height: 35px; line-height: 35px; margin: 0 auto; font-weight: bold; border: 1px solid #ddd; padding: 0 15px; box-sizing: border-box; background-position: 88% 50%; margin-top: 20px;}
select.years.month{display: inline-block;}
.subpage #section5 ul{padding-top: 20px; display: flex; flex-wrap:wrap;}
.subpage #section5 ul.one-month li{margin: 0 auto; float: none; cursor: default;}
.subpage #section5 ul.one-month li:hover img{transform: scale(1);}
.subpage #section5 ul.one-month li a{cursor: default;}

.library.detail #section5 ul li .sub{margin-bottom: 40px;}
.library.detail #section3{padding-top: 0;}
.library.detail #section3 ul{padding-top: 0;}

.library.detail #section5.more{border-top: 1px solid #eaeaea; padding-top: 30px;}
.library.detail h3{padding-bottom: 10px;}
.subpage h3 span{font-size: 16px; vertical-align: middle; font-weight: 400;}
.subpage h3 span.bold{font-size: 18px; font-weight: bold; padding-right: 3px; }
.library.detail .last-div{padding-bottom: 120px!important;}

/* article */
.article{padding-top: 80px;}
.article-wrap{width: 100%; max-width: 840px; margin: 0 auto;}
.article .main-img{width: 100%; padding: 30px 0;}
.article .main-img img{width: 100%}
/*.article .context{white-space: pre-line;}*/
.article h2{border-bottom: 1px solid #eaeaea; padding-bottom: 25px; margin-bottom: 30px;}
.article h2 .sec-name{cursor:pointer; display: inline-block; font-size: 14px; color: #222; font-weight: 400; padding: 5px 12px; background: #EAEAEA; line-height: 1; margin-bottom: 20px; box-sizing: border-box;border: 1px solid #eaeaea;}
.article h2 .sec-date{cursor:pointer; display: inline-block; font-size: 14px; color: #222; font-weight: 400; padding: 5px 12px; background: transparent; line-height: 1; margin-bottom: 20px;  border: 1px solid #eaeaea; box-sizing: border-box;}
.article h2 .title{display: block; font-size: 28px; font-weight: 400; color: #222; margin-bottom: 15px; line-height: 1.5em; letter-spacing: -1px;}
.article h2 .sub-title{display: block; font-size: 18px; font-weight: 400; color: #222;}

/* 유투브 UI 반응형 20201027 HYB */
.article .movie .inner{position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}
.article .movie .inner iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/* 유투브 UI 반응형 */

.article .context{font-size: 18px; line-height: 1.95em; letter-spacing: -0.5px;}
.article .context p,
.article .context span,
.article .context em,
.article .context u,
.article .context strong{font-weight: normal!important; font-size: inherit!important; line-height: inherit!important; letter-spacing: inherit; opacity: 0.95;}
.article .context .sub-title{font-size: inherit; font-weight: bold; text-decoration: underline;}
.article .context .bold{font-weight: bold!important; font-size: inherit;}
.article .table{display: table; padding-bottom: 5px; font-size: inherit;}
.article .table span{display: table-cell; padding-right: 10px; width: 50px; font-size: inherit;}
.article .table em{display: table-cell; font-size: inherit;}
.article .about-img{width: 100%; max-width: 452px;}

.article .flying{position: fixed; left: 0; width: 100%; top: 50%; margin-top: -38.5px; z-index: 1;}
.article .flying .inner{width: 100%; max-width: 860px; margin: 0 auto; position: relative;}
.article .flying .inner p{position: absolute;  right: -50px; top: 0; text-align: center;}
.article .flying button,
.article .flying span{display: block; text-align: center; width: 46px;}
.article .flying .icon.like{width: 46px; height: 46px; line-height: 46px; vertical-align: middle; background: url(/sl/img/sns-icons.svg) 0 0 no-repeat; display: inline-block;}
.article .flying .on .icon.like{background-position: 0 -46px;}
.article .flying .like-count{font-weight: bold; display: inline-block; font-size: 14px; padding: 5px 0 10px}
.article .flying .icon.link{width: 43px; height: 43px; line-height: 43px; vertical-align: middle; background: url(/sl/img/sns-icons.svg) 0 -224px; display: inline-block;}

.article .share-wrap{width:100%; padding-top: 100px; padding-bottom: 50px; background: #fff; position: relative; z-index: 2; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%);}
.article .share{width: 100%; max-width: 860px; margin: 0 auto;}
.article .share .icon.like{width: 46px; height: 46px; line-height: 46px; vertical-align: middle; background: url(/sl/img/sns-icons.svg) 0 0 no-repeat; display: inline-block; }
.article .share .on .icon.like{background-position: 0 -46px;}
.article .share .like-count{font-weight: bold; display: inline-block; padding: 0 15px; font-size: 14px;}
.article .share .sns{margin-top:0; display:flex;}
.article .share .sns button{width: 43px; height: 43px; line-height: 43px; background: url(/sl/img/sns-icons.svg) 0 0 no-repeat; margin-left: 11px;}
.article .share .sns button.link{background-position: 0px -224px;}
.article .share .sns button.tw{background-position: 0px -92px;}
.article .share .sns button.fb{background-position: 0px -136px;}
.article .share .sns button.kt{background-position: 0px -180px;}

.article .more-article{border-top: 1px solid #eaeaea; background: #fff; position: relative; z-index: 2;}
.article .more-article h3{text-align: center; padding: 30px 20px;}
.article .more-article ul{width: 100%; max-width: 1080px; margin: 0 auto;}
.article .more-article ul li{display: block; float: left; width: 22.75%; text-align: center;  box-sizing: border-box; margin-right: 3%; cursor: pointer;}
.article .more-article ul li:nth-child(4n){margin-right: 0;}
.article .more-article ul li p{width: 100%; max-width: 320px; height: 150px; margin: 0 auto; display: block; background-position: 50% 50%; background-size: cover; text-indent: -9999em; box-shadow: inset 0px 0px 60px rgba(0,0,0,0.05); transform: scale(1); transition: 0.2s all;}
.article .more-article ul li:hover p{transform: scale(1.05);}
.article .more-article ul li span{display: block;}
.article .more-article ul li span.title{font-size: 16px; font-weight: bold; padding-top: 20px; word-break: keep-all;}
.article .more-article ul li span.sub-title{font-size: 14px; font-weight: 400; padding-top: 8px;}

.gotop{position: fixed; bottom: 30px; right: 0px; z-index: 100;}
.gotop .inner p{transition:0.2s background;}
.gotop .inner .go-top{display: block; width: 61px; height: 53.8px; background: url(/sl/img/gotop.svg) 0 -45px;}



@media screen and (max-width: 1024px){
	.nav{padding-left: 30px;}
	.nav ul li{margin: 0 15px;}
	.nav ul li:first-child{margin-right: 15px;}
	.nav .subscribe-btn{width: 110px;}
	.bg-area{height: 100%; top: 0;}
	.bg-area img{width: 100%; height: 100%;}
	#section6,#section2{padding: 30px 15px;}
	.subpage #section3 ul,
	#section3 ul{padding-left: 15px; padding-right: 15px; box-sizing: border-box;}
	#section4{padding-left: 30px; padding-right: 30px;}
	#section5 ul{padding-left: 15px; padding-right: 15px; box-sizing: border-box;}
	#section5 ul li em{padding: 0; margin-bottom: 20px;}
	#footer{padding: 50px 30px;}
	#footer .left,#footer .right{width: 100%; float: none; text-align: center;}
	#footer .right ul{padding-top: 30px;}
	#footer .right ul li:first-child{padding-left: 0;}
	.article .flying{display: none;}
	.article-wrap{padding: 0 15px; box-sizing: border-box; margin-bottom: 50px;}
	.article .share-wrap{padding: 5px 15px; box-sizing: border-box; position: fixed; bottom: 0; z-index: 10; background: #fff; border-top: 1px solid #eaeaea;}
	.article .share .sns button{margin-left: 4px; position: relative; bottom: -1.5px; vertical-align: top; display: inline-block;}
	.article .share .like-count{padding: 0 0 0 5px;}
	.article .more-article ul{padding: 0 15px; box-sizing: border-box;}
	.article .more-article ul li{float: none; width: 100%;}
	.article .more-article ul li p{height: 200px; max-width: 400px;}
	.article .more-article ul li span.sub-title{padding-bottom: 50px;}
	.article .more-article ul li:last-child span.sub-title{padding-bottom: 0;}
	.article #footer{padding-bottom: 110px;} 

}

@media screen and (max-width: 768px){
	.patop-80{padding-top: 20px;}
	.mobile-hidden{display: none;}
	.mobile-show{display: block;}
	.mobile-show-in{display: inline-block;}
	.gotop .inner .go-top{display: block; width: 51px; height: 45px; background: url(/sl/img/gotop.svg) 0 0;}
	.article .gotop{bottom: 87px;}

	.nav{height: 60px; line-height: 60px; padding-left: 20px;}
	.nav ul{display: inline-block;}
	.nav ul li{display: none;}
	.nav ul li:first-child{display: inline-block;}
	.nav ul li:nth-child(2){display: inline-block; margin-left: 5px; font-size: 11px;}
	.nav ul li a img{height: 25px; width: auto; margin-top: 17px;}
	.nav .menu{height: 60px; vertical-align: top; margin-right: 20px;}
	.nav .menu .line{width: 20px; height: 12.7px; border: 2px solid #222; text-indent: -9999em; border-right: 0; border-left: 0; display: inline-block; box-sizing: border-box; vertical-align: middle;}
	.nav .subscribe-btn{width: 72px; height: 60px; line-height: 60px;}


	.m-nav{display:none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 300; background: #222;}
	.m-nav ul li{color: #fff; padding: 40px 0 0 60px; font-size: 24px;}
	.m-nav ul li a{color: inherit; font-size: inherit;}

	.m-nav ul li:nth-child(1){padding: 17px 24px; vertical-align: middle;}
	.m-nav ul li .close{vertical-align: middle;}
	.m-nav ul li .close img{vertical-align: middle;}
	.m-nav ul li .logo-wt{height: 25px; width: auto; padding-left: 22px;}
	.m-nav ul li .monthly{font-size: 11px; padding-left: 20px;}

	.bg-area{width: 100%; opacity: 0.2; right: 0;}
	#section0{background-image: url(/sl/img/bg01-m.jpg);}
	#section0 h1{top: 33%;}
	#section0 h1 img{width: 138px;}
	#section0 h2{width: 100%; height: 110px;}
	#section0 h2 .issue{font-size: 16px; margin-top: 18px;}
	#section0 h2 .title{font-size: 31px;}
	#section1 .issue-content{width: 100%; margin-top: 120px;}
	#section1 .issue-content .content{padding-left: 15px; padding-right: 15px;}
	#section1 .issue-content .content p{font-size: 16px; word-break: normal;}

	#fp-nav{top: auto; bottom: 30px; right: 0!important; margin-top: 0!important;}
	#fp-nav ul li, .fp-slidesNav ul li{display: none;}
	#fp-nav ul li{width: auto; height: auto; margin: 0;}
	#fp-nav ul li:first-child{display: block;}
	#fp-nav ul li:first-child a{display: block; width: 51px; height: 45px; background: url(/sl/img/gotop.svg) 0 0;}
	#fp-nav ul li a span, .fp-slidesNav ul li a span{display: none;}
	#section2{padding: 60px 15px 0}
	#section2 .prologue-wrap:after,
	#section2 .prologue-wrap{height: 150px;}
	#section2 h2.prologue{padding-top: 50px;}
	.patop-80{padding-top: 50px;}
	#section3{padding-top: 50px;}
	#section3 .movie{max-width: 430px;}
	.subpage #section3 ul{padding-left: 0; padding-right: 0;}
	#section3 ul{padding-top: 30px; padding-left: 0; padding-right: 0;}
	#section3 ul li{width: 100%; padding-left: 15px; padding-right: 15px;}
	#section3 ul li .sub{margin-bottom: 50px;}
	.btn-area{padding-bottom: 50px; padding-top: 0;}
	#section4{padding-left: 20px; padding-right: 20px; padding-top: 35px; padding-bottom: 35px;}
	#section4 .subscribe span{margin-bottom: 10px; display: block;}
	#section5{padding-top: 50px;}
	#section5 ul{padding-top: 30px; padding-left: 5px; padding-right: 5px; box-sizing: border-box;}
	#section5 ul li{padding-left: 10px; padding-right: 10px; width: 48.5%;}
	#section5 ul li:nth-child(2n){margin-right: 0;}
	#section5 ul li .sub{margin-bottom: 30px}
	#section5 ul li:last-child .sub{margin-bottom: 50px;}
	#section6{padding: 0 15px}
	#section6 .prologue-wrap{height: 150px;}
	#section6 h2.prologue{font-size: 18px; padding-top: 35px; }
	#section6 .title{padding: 0 30px; word-break: keep-all;}
	#section6 .title a{font-size: 18px;}
	.btn-area.absolute{position: static;}
	.btn-area .btn-more span{font-size: 16px;}

	.article .context{font-size: 16px; }

}