@charset "utf-8";
@import url('http://fonts.googleapis.com/css?family=Nanum+Gothic:400,700&subset=korean');
@import url('http://fonts.googleapis.com/css?family=Nanum+Myeongjo&subset=korean');
@import url('http://fonts.googleapis.com/css?family=Black+Han+Sans&subset=korean');
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

body,th,td,input,select,textarea,button {font-family:AppleSDGothicNeo-Light, HelveticaNeue-Light,'Malgun Gothic','맑은 고딕',sans-serif;} 
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,summary,time,mark,audio,video,input,select,textarea,button{margin:0;padding:0}
fieldset,img{border:0 none}
dl,li,menu,ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
button,input,select,textarea,a{vertical-align:middle;outline: none}
button{border:0 none;background-color:transparent;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
input:checked[type=checkbox]{background-color:#666;-webkit-appearance:checkbox}
html input[type=button], input[type=email], input[type=password], input[type=reset], input[type=search], input[type=submit], input[type=tel], input[type=text], input[type=url], textarea, select{-webkit-appearance:none;border-radius:0}
input:focus,textarea:focus{outline:none}
input[type=text]::-ms-clear {display:none}
header,footer,aside,nav,main,article,figure{display:block}
html{height: 100%;min-width: 320px}
a{text-decoration:none;color: #333}
a:active,a:hover{text-decoration:none}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:600}
button::-moz-focus-inner{border:0;padding:0}
html, body{font-size: 10px;line-height: 1.42857143;color: #333;background-color: #fff;-webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
body{-webkit-overflow-scrolling: touch;height: 100%}

/* 맨위로 버튼 */
.btn_top{position: fixed;right: 11px;bottom: 15px;width: 40px;height: 40px;color: transparent;background-color: #fff;border: 1px solid #ddd;border-radius: 2px;z-index: 2200;background-image: url(http://ojsimg.ohmynews.com/images/special/base2017/top.svg);background-size: 22px}
/* Navigation */
.navbar-header{position: relative;width: 100%}
.cover-bg{width: 100%;height: inherit;position: absolute;top: 0;z-index: 0;background-color: rgba(0,0,0,0.8);}
.cover-bg p.img{height: inherit;background-size: cover;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;background-position: center center}
#menu {padding: 15px 10px;transition: all 0.8s}
#menu a{display: inline-block;color: transparent}
.navbar-header > a.navbar-brand {color: transparent;font-weight: 700;letter-spacing: 1px;background: url(http://ojsimg.ohmynews.com/images/mobile_2017/ohmynews_w.svg);opacity: 1;padding: 0;background-repeat: no-repeat;background-position: 50%;margin-left: 0}
#menu a.omn{width: 90px;height: 23px;margin: 12px 0;color: transparent;background-image: url(http://ojsimg.ohmynews.com/images/mobile_2017/ohmynews_w.svg)}
.navbar-header > a.share, .navbar-header > a.family{width: 35px;height: 35px;color: transparent;position: absolute;background-size: 22px;display: inline-block;top: 0}
.navbar-header > a.share{background-image: url(http://ojsimg.ohmynews.com/images/special/base2017/b_share.svg);background-size: 66%;right: 30px}
.navbar-header > a.family{background-image: url(http://ojsimg.ohmynews.com/images/special/base2017/family.svg);background-size: 60%;right: -7px}
#menu .container a.serially_titl{font-size: 13px;font-weight: 600;margin: 0 0 0 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 36px;letter-spacing: -.2px;display: none}
#menu .container a.serially_titl .tt01{color: #5eb8ff;padding-right: 5px}
#menu .container a.serially_titl .tt02{color: #fff;display: inline-block;}
#menu.on {background-color: rgba(0,0,0,0.8)!important;padding: 8px 0 !important;height: 52px}
#menu.on .container a.serially_titl{display: inline-block}
#menu.on .container a.navbar-brand{display: none}

#menu.navbar-default {background-color: rgba(248, 248, 248, 0);border-color: rgba(231, 231, 231, 0);
background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 20%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 20%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */}
#menu.navbar-default .navbar-nav > li > a {text-transform: uppercase;color: #ddd;font-weight: 500;font-size: 15px;padding: 5px 0;border: 2px solid transparent;letter-spacing: 0.5px;margin: 10px 15px 0 15px}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color: #8eb640 !important;background-color: transparent}
.navbar-toggle {border-radius: 0}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color: #8eb640;border-color: #8eb640}
.navbar-default .navbar-toggle:hover>.icon-bar {background-color: #FFF}

.section-title {max-width: 780px;margin: 0 auto}
.section-title h2{position: relative;margin: 0 auto 40px;font-weight: 500;font-size: 26px;letter-spacing: -0.05em;color: #333;font-family: 'Nanum Myeongjo','나눔명조', Georgia, serif;text-transform: uppercase;}

.section-title .overlay {padding: 80px 0;background: rgba(0, 0, 0, 0.7)}
.section-title p {max-width: 640px;margin: 0 auto;font-size: 16px;line-height: 1.6em;padding: 50px 40px 40px 40px;color: #333;letter-spacing: -.05em;border: solid 4px #000;border-radius: 8px; margin-bottom: 20px; position: relative;}
.section-title p .data{font-size: 18px; word-break: keep-all;}
.btn-custom {text-transform: uppercase;color: #fff;background-color: #FFC107;border: 0;margin: 0;padding: 10px 50px 10px 25px;font-size: 16px;line-height: 20px;font-weight: 600;letter-spacing: 0.5px;transition: all 0.5s;background-image: url(http://ojsimg.ohmynews.com/images/ohmynews/serially/kangwonguk/give.svg);background-repeat: no-repeat;background-size: 25px 25px;-webkit-background-size:25px 25px;-moz-background-size:25px;-ms-background-size:25px;-o-background-size:25px;background-position: right 18px top 8px;border-radius: 25px}
.btn-custom:hover, .btn-custom:focus, .btn-custom.focus, .btn-custom:active, .btn-custom.active {color: #fff;background-color: #FFC107;text-decoration: none;background-image: url(http://ojsimg.ohmynews.com/images/ohmynews/serially/kangwonguk/give_c.svg)}


/* Header Section */
#header .intro{background:#eee;background-image: url(top_bg.png);background-size: cover;background-color: #000;background-position: center;}
#header .intro .overlay {/* background: #5a8fd6; */}
#header .intro .overlay .container {display: flex;height: 320px;}
#header .intro .overlay .container a.title-img{color: transparent;background-size: contain;background-position: 50% 70%; background-repeat: no-repeat;height: 300px;min-width: 300px; display: block;}
#header .intro-text {align-self: center;text-align: center;margin: 0 auto;}
#header .intro-text > .title-img{color: transparent;background-size: contain;background-position: 50%;background-repeat: no-repeat;height: 300px;min-width: 300px;background-image: url(top-img-h.png);/* background-image: url(http://ojsimg.ohmynews.com/design/2020/ohmynews/ohmynews_20st/top-img-m.png); */}

/* List Section */
.article-photo{margin: 10px auto;max-width: 750px;position: relative;background-color: #fff;}
.wrap{width: 100%;overflow: hidden;background: #f6f6f6;}
.wrap > .title{padding: 30px 20px; font-size: 15px;text-align: justify;}
.up-btn{/* height: 30px; *//* line-height: 30px; */border-radius: 50px;bottom: -39px;position: absolute;z-index: 99;left: calc(50% - 55px);width: 110px;transition: background 0.3s ease 0s;display: block;}
.up-btn > a{text-align: center;margin: auto;color: rgb(255, 255, 255);font-size: 12px;display: block;width: 110px;height: 36px;line-height: 38px;background-color: #4a90dc;border-radius: 30px;padding-right: 8px;background-image: url(http://ojsimg.ohmynews.com/css/special/ohlive/images/arrow_top.svg);background-repeat: no-repeat;background-size: 10px 10px;background-position: calc(100% - 15px) 50%;transition: background 0.3s ease 0s;}

.article_header-2020 .article_tit {font-size: 30px;font-weight: 500;line-height: 30px;letter-spacing: -0.05em;}
.article_header-2020 .article_subtit {font-size: 17px;font-weight: 500;line-height: 17px;margin: 14px 0px;}

.article_body .special_photo_box{position: relative;margin: 0 -18px;text-align: center;margin-bottom: 20px;margin-top: 5px;}
.article_body .special_photo_box img{display: inline-block;max-width: 100%;vertical-align: middle;/*width: 970px;*//* padding: 10px; */}
.article_body .special_photo_box .btn_zoomin{position: absolute;right: 10px;top: 10px;width: 32px;height: 32px;border: 1px solid #d9d9d9;background-color: #fff;text-indent:0;font-size:15px;color:transparent;background-size: 56%}
.article_body .special_photo_box .desc {text-align: left;padding: 8px 12px;font-size: 12px;color: #a0a0a0;line-height: 1.4em;margin-bottom: 10px}
.article_body .special_photo_box .desc > strong{color: #000;}
.article_body .special_photo_box .link_thumb {position: relative;display: block}
.article_body .special_photo_box .link_thumb .play {position: absolute;top: 50%;left: 50%;margin-left: -35px;margin-top: -35px;display: inline-block;width: 70px;height: 70px;text-indent:0;font-size:15px;color:transparent;background-color: rgba(0,0,0,0.50);border-radius: 50%}
.view-more{margin: 8px 0;background-size: 60%;right: -7px;width: 35px;height: 35px;color: transparent;position: absolute;display: inline-block;top: 0;}
.top-txt00{ padding: 20px 30px;font-size: 14px;color: #606c74;border: 1px solid #e1e6e6;margin: 20px 10px;text-align: justify;}
.m-head-title{display: block;margin-bottom: 20px;color: #333;text-align: center;font-size: 24px;}
.head-title{display: block;margin-bottom: 5px;color: #555;text-align: center;}
.article_name{margin: 0 auto;line-height: 34px;color: #fff;text-align: center;max-width: 50%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.article_name > .stitle{font-size: 15px;display: inline-block;color: #fff;line-height: 60px;height: 22px;font-weight: 700;}
.date-box{margin: 0px 0px 30px 0px;font-size: 11px;color: #999;display: block;}
.date-box .date{color: #999;display: inline-block;/* margin-right: 8px; */font-size: 11px;letter-spacing: -0.2px;}
.date-box .bar{color: #e5e5e5;margin: 0 5px 0 4px;font-size: 12px;}
.date-box .name{color: #999;display: inline-block;margin-right: 8px;font-size: 11px;letter-spacing: -0.2px;}
.date-box .name:hover{color:#000;}
.date-box > a{vertical-align: top;}
.article_body .view-txt{  max-width: 600px;margin: 0 auto;}

.pad {margin-top: 40px;}
.clearfx:after {content:'';display:block;clear:both}
.screen_out {display: block;overflow: hidden;position: absolute;left: -9999px;width: 1px;height: 1px;font-size: 0;line-height: 0;color: transparent}
.none{display: none}
main .content{word-break: keep-all;word-wrap: break-word;overflow: hidden}
.link_thumb img{display: block;width: 100%;border: 0;margin: 0;padding: 0}



@media only screen and (min-width: 320px) and (max-width: 480px){
	#header .intro-text > h1 > img.air{width: 40px;vertical-align: top}
	.hundred-box > .box > .first > ul > li > .ranking02{}
	.hundred-box > .box > .first > ul > li{width: 100%;display: inline-block;}
	.hundred-box > .box > ul > li{height: 165px;}
	.title .m-head-title{font-size: 18px;letter-spacing: -0.4px;}
	
}
@media (min-width: 375px){
	#header .intro-text > h1{font-size: 4em}
	.intro p{font-size: 15px}
	#header .intro-text > .title-img{min-width: 330px;}
	.hundred-box > .box > ul > li{width: 50%;}
	.hundred-box > .box > ul.five > li {width: 50%;}
	
	
}
@media (min-width: 425px){
	#header .intro-text > h1{font-size: 4.3em}
	#header .intro-text > .title-img{height: 300px;min-width: 390px}
	.hundred-box > .box > .first > ul > li .top{/* margin: 0px; */}
	.hundred-box > .box > ul > li{width: 33.33%;}
	.hundred-box > .box > ul.five > li {width: 33.33%;height: 200px;}
	.pad{margin-top: 50px;}
}
@media (min-width: 768px){
	nav .container, .sticky_bar .atc_container{min-width: 700px;max-width: 980px}
	#menu a.navbar-brand{width: 92px}
	.section-title h2, .section-reward h2{font-size: 4em;margin: 30px auto}
	.support-wrap h2 {font-size: 4em}
	#header .intro-text > h1{font-size: 8em}
	.intro p{font-size: 18px}
	.intro .container {height: 400px}
	#header .intro-text > .title-img{min-width: 580px;height: 310px;background-size: 80%;}
	.hundred-box{max-width: 1128px;margin: 0 auto;}
	.hundred-box > .box > ul > li{width: 25%;}
	.hundred-box > .box > ul.five > li {width: 20%;}
	.hundred-box > .box > .first{max-width: 100%;}
	.hundred-box > .box > h1{font-size: 28px;font-weight: 600;}
	.article-photo{margin: 50px auto 10px auto;}
	#Repoter .swiper-wrapper {justify-content: center;}
	.list-row .col{width: 25%;}
	
}

@media only screen and (min-width: 426px) and (max-width: 767px){
	.list-row .col .thumb .thumb-img{border: 1px solid #444;height: 180px;}
	.list-row .col {
    width: 33%;
}
}

@media only screen and (min-width: 1024px){
	.intro .container {height: 450px}
	nav .container {width: 920px}
	#header .intro-text > .title-img{min-width: 670px;height: 320px;background-size: 70%;}
	.section-title p, #about .about-text > p{max-width: 700px}
	#menu.navbar-default .navbar-nav > li > a:hover,
	#menu.navbar-default .navbar-nav > li > a:focus {color: #8eb640}
	.hundred-box > .box > ul > li > a > .thumb{height: 150px;}
	.hundred-box > .box > ul.five > li > a > .thumb{height: 140px;}
	.hundred-box > .box > ul.five > li > .top > .top-thumb{height: 196px;}
	.pad{margin: 50px 0px;text-align: center;}
	.article-photo{max-width: 1002px;border: 1px solid #f1f1f1;border-radius: 8px 8px;background-color: #fff;-webkit-box-shadow: 0px 5px 10px -10px rgba(0,0,0,0.3);-moz-box-shadow: 0px 5px 10px -10px rgba(0,0,0,0.3);box-shadow: 0px 5px 10px -10px rgba(0,0,0,0.3);}
	.article_header-2020 .article_tit {font-size: 38px;font-weight: 500;line-height: 40px;letter-spacing: -0.08em;}
	.article_header-2020 .article_subtit {font-size: 17px;font-weight: 500;line-height: 1.2em;margin: 14px 0px;}
	.list-row .col .thumb .thumb-img{border: 1px solid #444;height: 240px;}
	
}
@media only screen and (min-width: 1200px){
	.hover-bg{height: 200px}
	nav .container {width: 1120px}
	#header .intro-text > .title-img{min-width: 750px;height: 320px;/* background-size: 50%; */background-image: url(top-img-h.png);/*background-image: url(http://ojsimg.ohmynews.com/design/2020/ohmynews/ohmynews_20st/top-img-h.png);*/}
	.wrap > .title{  max-width: 900px;margin: 0 auto;}
	.list-row .col{width: 25%;}
	.list-row .col .thumb .thumb-img{border: 1px solid #444;height: 290px;}
	.list-row .col .thumb .caption-tit{font-size: 15px;padding: 5px;height: 70px;color: #f1f1f1;}
}
/* About Section */
#Goodfee{padding: 50px 0}
#about {/*padding: 20px 0;*/background: #222;}
#about .container{width: 100%}
#about .about-text {overflow: hidden;letter-spacing: -.05em;margin: 0 -15px}
#about .about-text > p{max-width: 640px;line-height: 24px;margin: 0 auto 60px;text-align: left;padding: 15px 15px 0;font-size: 13px;color: #666}
#Repoter {margin: 10px -15px 0;position: relative;padding: 0 0 20px}
#Repoter .swiper-slide{display: inline-block;text-align: center;width: 90px;margin: 0 12px}
#Repoter .swiper-slide:first-child{margin-left: 30px}
#Repoter .swiper-slide:only-child{margin:0 auto}
.ie #Repoter .swiper-slide:only-child{margin:0}
#Repoter a{display: block;margin: 0 auto}
#Repoter .face{width: 88px;height: 88px;border: 1px solid #ccc;border-radius: 50%;overflow: hidden;background-color: #e0e0e0;background-size: cover;background-repeat: no-repeat;background-position: 0% 0%;background-image: url(http://ojsimg.ohmynews.com/images/mobile_2017/reporter-bg.svg)}
#Repoter .face img {width: inherit;height: inherit;object-fit: cover}
#Repoter .name {font-size: 17px;margin-top: 8px;color: #f1f1f1;}
#Repoter .id {font-size: 11px;color: #b9b9b9;line-height: 1em;margin-top: 2px}

#Repoter .repoter-box {max-width: 670px;padding: 0 30px;margin: 0 auto;text-align: left;}
#Repoter .repoter-card {position: relative;padding-left: 102px}
#Repoter .repoter-card .face{position: absolute;left: 0;top: 0;}
#Repoter .repoter-card .name{font-size: 20px}
#Repoter .repoter-card .id{padding-left: 3px}
#Repoter .repoter-card .btn_jjim{margin-top: 12px}

/*구독버튼*/
#about .btn_jjim{margin-top: 8px;color: #fff;background-color: #4488dd;padding: 5px 10px;font-size: 12px;letter-spacing: 0.5px;transition: all 0.5s;display: inline-block;-webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);}
#about .btn_jjim.on{background-color: transparent;border: 1px solid #4488dd;color: #4488dd;margin: 8px 0 -1px 0}
#about .btn_jjim > .icon{background-image: url(http://ojsimg.ohmynews.com/images/mobile_2017/zzim_off_w.svg);width: 13px;height: 13px;vertical-align: text-top;margin-right: 3px;}
#about .btn_jjim.on > .icon{background-image: url(http://ojsimg.ohmynews.com/images/mobile_2017/zzim_on_b.svg)}
.pc #about .btn_jjim > .icon{vertical-align: middle}

/*확인&취소버튼*/

#about .layer_jjim{z-index: 1;position: absolute;left: 50%;top: 14px;margin-left: -150px;width: 300px;padding: 30px;background-color: rgba(0, 0, 0, 0.8);color: #fff;font-size: 13px;text-align: center}
#about .layer_jjim > .btn {margin: 0 5px;padding: 5px 20px;background-color: #999;color: #fff;display: inline-block}
#about .layer_jjim > .btn.on {background-color: #4488dd}

@keyframes popUp { 
	from {opacity : 0;transform: scale(.75)}
	to {opacity : 1}
}
@keyframes popOut { 
	from {opacity : 1}
	to {opacity : 0;transform: scale(.75)}
}
#about .layer_jjim.pop { animation: popUp .5s ease forwards} 
#about .layer_jjim.pop.out {animation: popOut .5s ease forwards} 

/*리스트*/
.list-row{
    max-width: 1200px;
    margin: 20px auto;
    overflow: hidden;
}
.col{width: 50%;float: left;}
.list-row .col .thumb{background: transparent;padding: 5px;text-align: left;-webkit-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;display: block;}
.col .thumb .thumb-img{border: 1px solid #444;height: 160px;background-repeat: no-repeat;background-size: cover;display: block;color: transparent;overflow: hidden;background-position: center;}
.col .thumb .caption-tit{font-size: 13px;padding: 5px;height: 70px;color: #f1f1f1;}
.article-photo .article_body{/* background-color: transparent; *//* color: #fff; */padding: 0 15px;}
.article_tit > a {/* color: #f1f1f1; */}
.article_subtit > a {/* color: #a0a0a0 */}
.article_body .copyright > p {color: #a0a0a0;}
.article-photo .copyright > p {color: #a0a0a0;}
.article-photo .arc-bottom-wrap .support-box > .sup-left > .sup-left-l > span:first-child{/* color: #a0a0a0; */}
.article-photo .arc-bottom-wrap .support-box > .sup-left > .sup-left-l > span:last-child{/* color: #f1f1f1; */}
.article-photo .reporter-wrap {/* background-color: #f9f9f9; */}
.article-photo .reporter-wrap .profile-box{/* border: none; */}
.layer .layer_share .copyurl .url{line-height: 0px;}

.article_body .special_photo_box > .btn{position: absolute;right: 18px;top: 18px;}
.article_body .special_photo_box > .btn > .zoom{display: block;font-size: 15px;color: transparent;overflow: hidden;width: 50px;height: 50px;opacity: 0.7;background-color: #2469bd;background-image: url(http://ojsimg.ohmynews.com/images/star/2016/icon_zoom.svg);background-repeat: no-repeat;background-size: 22px 22px;background-position: 50% 50%;-webkit-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);-ms-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);z-index: 100;}
.article_body .special_photo_box > .btn > .zoom:hover{opacity: 1}

/*=====푸터==================================================*/
footer{background-color: #444;text-align: center; padding: 10px 0 20px 0; /*position: fixed; bottom: 0;*/ width: 100%; }
footer .copyright{margin-top: 8px;font-size: 10px;color: #a5a5a5; text-align: center;}