@charset "utf-8";
/*web font*/
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,600,700|Montserrat:400,700');

/*basic*/
*{padding:0; margin:0; list-style:none; border:none}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { font-family: 'Crimson Text', serif; color:#333333; background:#fff;}
img { max-width: 100%; height: auto; }
video, embed, object, .videocontent, iframe {width:100% !important;}
article, footer, header, section {display:block; clear:both; vertical-align:baseline;}
a {color:#000; text-decoration:none;}
a:hover {color:#0044b6; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}

::-moz-selection { background:#032d73; color:#ffffff}
::selection { background:#032d73;  color:#ffffff}

.innerwrap {width:1130px; margin:0 auto; position:relative; clear:both;}
.container {width:1368px; margin:0 auto; position:relative; clear:both;}
.footer, .video, .comment, .element {clear:both; margin-top:25px; float:left; width:100%;}
.element2  {clear:both; margin-top:10px; float:left; width:100%;}
.contents {float:left; width:100%; margin-top: 56px;}
.main { float:left; width:705px;}
.side { float:right; width:400px; margin-top: 20px;}
.side2 { float:right; border:#dfdfdf 1px solid; margin-top: 20px; padding:15px;}

.fl { float:left}
.fr { float:right}
.clr { clear:both; line-height:0; height:0; display:block;}
.blue_label { background:#032d73; font-size:11px; color:#ffffff; font-family:'Montserrat', sans-serif; line-height:27px; display:inline-block; padding:0 10px;}

.art-ttl { font-weight:normal}
.item {line-height: 0; background: #000;}
.item:hover .art-img,
a:hover .item .art-img { opacity: 0.9; box-shadow:2px 2px 2px #888888; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}
.art-img img {width: 100%; height:auto;}
.f-blue { color:#0a53cd;}
.art-smr { font-family: 'Montserrat', sans-serif; font-size:14px; font-size: 0.875rem; color:#6e6e6e; line-height:1.3; }
.category {font-family: 'Montserrat', sans-serif; font-size: 13px; font-size: 0.813rem; color: #1b6aee; text-transform: uppercase; }
.art-by { font-family: 'Montserrat', sans-serif; font-size: 12px; font-size: 0.750rem; color: #999; }
.art-by i {vertical-align: middle;}
.shadow { width: 100%; height: 100%; display: block; position: absolute; bottom: 0; left: 0; z-index: 1;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.6+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */}

/*ad unit reset*/
.adunit_leaderboard { padding:10px 0 !important;}
#adunit_article_center_middle1_computer { margin-top:10px}
.article_share_rail { float:left;}
.double-rectangles { text-align:center; background:#ececec; padding:10px 0 5px 0;}

.ad-side { width: 100%; float: left; clear: both; text-align: center; background: #eeeeee; padding: 1.0em 0; margin-bottom: 1.250em; }

/*header*/
.header { background:#032d73; height:56px; float:left; width:100%; position: fixed; top: 0; left: 0; z-index: 9999;}
.header .innerwrap { position:relative}
.header .logo-hngn { position:absolute; top:0; left:0; z-index:101; text-align:center; padding:13px 20px 0;}
.nav { position:absolute; top:0; left:190px; z-index:100; }
.nav a { display:inline-block; margin-left:12px; padding:0 5px; line-height:56px; font-family:'Montserrat', sans-serif; font-size:13px; text-transform:uppercase; color:#e8e8e8;}
.nav a:hover { color:#ffffff}
.header .ic_menu, .header .ic_search { position:absolute; cursor:pointer; display:inline-block}
.header .ic_menu.icon-x { width:20px; height:20px; /*background:url(../images/icon2016.png) -79px 0 no-repeat;*/}
.header .ic_menu.icon-align-justify {width:20px; height:20px; color: #fff; /*background:url(../images/icon2016.png) 0 0 no-repeat;*/}
.header .ic_menu:hover, .header .ic_search:hover { color:#ffffff}
.header .ic_menu { top:12px; right:90px; z-index:101; font-size:25px;}
.header .ic_search { top:12px; right:50px; z-index:101; font-size:22px;width:20px; height:20px; color: #fff; /*background:url(../images/icon2016.png) -44px 0 no-repeat;*/}
.header .form_search { position:absolute; right:80px; top:10px; background:#ffffff; line-height:26px; width:300px; z-index:200; font-size:15px; padding:4px 8px; color:#a9a9a9}

/*menu icon opened*/
.menu_box { position:fixed; top:50px; background:#020918; width:100%; float:left;    z-index: 1000;    padding: 2% 0;}
.menu_box .bt_socials { float:left; width:20%; margin:20px 0 0 0;}
.menu_box .bt_socials .button { display:inline-block; width:38px; height:38px; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%; border:#8a8d94 1px solid; text-align:center; line-height:40px; margin-right:7px; font-size: 18px; color: #fff;}
/*.menu_box .bt_socials .button .icon-facebook {background:url(../images/icon2016.png) 0 -25px no-repeat; width:11px; height:30px;display: inline-block;}
.menu_box .bt_socials .button .icon-twitter {background:url(../images/icon2016.png) -30px -35px no-repeat; width:19px; height:16px;display: inline-block;}
.menu_box .bt_socials .button .icon-gplus {background:url(../images/icon2016.png) -71px -25px no-repeat; width:21px; height:28px;display: inline-block;}*/
.menu_box .bt_socials .button.fb:hover {background:#3b5998;border:#3b5998 1px solid;}
.menu_box .bt_socials .button.tw:hover {background:#4099FF;border:#4099FF 1px solid;}
.menu_box .bt_socials .button.gg:hover {background:#d34836;border:#d34836 1px solid;}
.menu_box .li_categories { float:right; width:80%;}
.menu_box .li_categories ul { float:left; width:25%;}
.menu_box .li_categories ul li { padding: 0 0 7px 10px; background:url(../images/dot_wh.gif) 0 7px no-repeat; padding: 0 0 7px 10px; font-size:12px; text-transform:uppercase; font-family:'Montserrat', sans-serif; }
.menu_box .li_categories ul li a { color:#bfbfbf;} .menu_box .li_categories ul li a:hover { color:#ffffff}

/*new main*/
.wp-msec-ttl {width: 100%; float: left; clear: both;}
.wp-msec-ttl .msec-ttl {display: inline-block;}
.wp-msec-ttl span {font-family:'Montserrat', sans-serif; font-size: 22px; font-size: 1.375rem; text-transform: uppercase; color: #888;}
.msec-ttl { font-family:'Montserrat', sans-serif; font-size: 22px; font-size: 1.375rem; text-transform: uppercase; margin-bottom: 0.8em; }
.mart-ttl {font-size: 24px; font-size: 1.500rem; line-height: 1.2; font-weight: normal;}
.mart-ttl2 {font-size: 18px; font-size: 1.125rem; line-height: 1.3; font-weight: normal;}
.mart-ttl3 {font-size: 30px; font-size: 1.875rem; line-height: 1.1; font-weight: normal;}
.main-hdline { width: 100%; float: left; clear: both; padding: 1.563em 0; color: #fff; }
.main-hdline a { color: #fff; }
.main-hdline .category { color: #fff;}
.main-hdline .ttl { position: absolute; bottom: 0; left: 0; z-index: 2; padding: 1.5em 1.5em; }
.main-hdline h1 {color: #fff; font-size: 40px; font-size: 2.500rem; line-height: 1.1; font-weight: normal;}
.main-hdline h2 {font-size: 28px; font-size: 1.750rem; line-height: 1.1; font-weight: normal;}
.main-hdline h3 {font-size: 24px; font-size: 1.500rem; line-height: 1.1; font-weight: normal;}
.main-hdline a:hover .item .art-img { opacity: 0.8; }
.main-hdline .grid-1 { width: 45.6%; float: left; position: relative;}
.main-hdline .grid-2 { width: 52.92%; float: right;}
.main-hdline .grid-2 .list { width: 100%; float: left; clear: both; position: relative; margin-bottom: 1.250em;}
.main-hdline .grid-2 .list2 { width: 41.43%; float: left; position: relative;}
.main-hdline .grid-2 .list3 { width: 55.24%; float: right; position: relative;}
.main-hdline .grid-2 .category { margin-bottom: 0.8em; }
.main-row { width: 100%; float: left; clear: both; }
.main-row .grid-1 { width: 69%; float: left; }
.main-row .grid-2 { width: 29.23%; float: right; padding-top: 2.7em; }
.main-row2 { width: 100%; float: left; clear: both; border-top: #efefef 1px solid; padding: 1.5em 0 0.5em; }
.main-row2 .grid-1 { width: 45.6%; float: left;}
.main-row2 .grid-1 .item { position: relative; }
.main-row2 .grid-1 .item .play { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/ic-video.png) no-repeat center center; z-index: 2; }
.main-row2 .grid-1 .art-by { margin-top: 1.0em; }
.main-row2 .grid-2 { width: 52.92%; float: right;}
.main-row2 .grid-2 .box { width: 41.43%; float: left;}
.main-row2 .grid-2 .box2 { width: 55.24%; float: right;}
.main-row2 .grid-2 .box .list { width: 100%; float: left; clear: both; margin-bottom: 0.938em;}
.main-row2 .grid-2 .box .item {margin-bottom: 1.0em;}
.main-row2 .grid-2 .box .art-by {margin-top: 1.0em;}
.main-row3 { width: 100%; float: left; clear: both; border-top: #efefef 1px solid; padding:1.5em 0; }
.main-row3 .grid-1 { width: 69%; float: left; }
.main-row3 .grid-2 { width: 29.23%; float: right; }
.m-art-list { width: 100%; float: left; clear: both; }
.m-art-list .list { width: 31.7%; float: left; margin-right: 2.3%; margin-bottom: 1.250em;}
.m-art-list .list:nth-of-type(3n) { margin-right: 0; float: right;}
.m-art-list .list:nth-of-type(3n+1) { clear: left; }
.m-art-list .category {margin: 1.0em 0 0.5em;}
.m-art-list .art-smr { margin: 0.8em 0 1.0em;}
.side-art-list { width: 100%; float: left; clear: both; }
.side-art-list .list { width: 100%; float: left; clear: both; margin-bottom: 1.563em; }
.side-art-list .list .item { float: right; margin-left: 1.250em; }
.side-art-list .list .art-by { margin-top: 1.0em; }
.section-wp { width: 100%; float: left; clear: both; }
.section-wp .hdline { width: 100%; float: left; clear: both; border-bottom: #efefef 1px solid; margin-bottom: 1.563em; }
.section-wp .hdline .box { width: 65.9%; float: left; margin-bottom: 1.250em;}
.section-wp .hdline .box2 { width: 31.7%; float: right;}
.section-wp .hdline .item {margin-bottom: 0.625em;}
.section-wp .hdline .art-by { margin-top: 1.0em; }
.section-wp .hdline .box2 .list { width: 100%; float: left; clear: both; margin-bottom: 0.625em; }
.section-wp .grid-1 { width: 69%; float: left; }
.section-wp .grid-2 { width: 29.23%; float: right; }

/*new footer*/
.bk-footer { width: 100%; float: left; clear: both; background: #000; color: #fff; font-family:'Montserrat', sans-serif; }
.bk-footer a {color: #fff;}
.bk-footer .grid-1 { width: 100%; float: left; clear: both; padding: 2.0em 0; text-align: center; font-size: 14px; font-size: 0.875rem; line-height: 1.2; }
.bk-footer .grid-1 a {margin: 0 1.5em;}
.bk-footer .grid-2 { width: 100%; float: left; clear: both; padding: 0 0 3.0em; font-size: 12px; font-size: 0.750rem; line-height: 1.2; }
.bk-footer .grid-2 .fl em {font-style: normal; color: #0084ff; }
.bk-footer .grid-2 .fr {font-size: 20px; font-size: 1.250rem;}
.bk-footer .grid-2 .fr a {opacity: 0.7; margin: 0 0.3em;}
.bk-footer .grid-2 .fr a:hover {opacity: 1.0;}

/*article*/
h1 {font-size:50px; line-height:48px; color:#000000; clear:both; padding-top:15px;}
article p { font-size:20px; line-height:28px; color:#141414; margin-bottom:25px;}
article p, article p span { font-family: 'Crimson Text', serif !important;}
article p a { color:#1b6aee}
article p a:hover { background:#1b6aee; color:#ffffff}
article figure {width:100%; float:left; text-align:center; margin-bottom:22px; color:#818181; font-family:'Montserrat', sans-serif; text-align:center; font-size:10px; line-height:15px;}
article figure .art-img { width:100%; margin:0 auto; display:inline-block;}article .info { float:left; width:100%; border-bottom:#e4e4e4 1px solid; padding:15px 0 10px 0; margin-bottom:10px;font-family:'Montserrat', sans-serif; position:relative }
article figure .art-img img { width:auto}

article .info .reporter-name {font-size:14px; display:inline-block; padding-right:10px; letter-spacing:1px}
article .info .posted-date {font-size:11px; color:#828282; display:inline-block; letter-spacing:1px}
article .copyright { font-size:11px; font-family:Arial, Helvetica, sans-serif;}

article ul { padding:0 0 15px 0; margin:0 0 0 50px; clear:both;}
article ul li { padding:0 0 10px 0; list-style-type:square; font-size:20px; line-height:28px;}
#bxslider {margin:0 !important;}
.bx-viewport {bx-viewport !important;}

/*comment*/
.bt_comment { float:right; background:#032d73; color:#ffffff; height:43px; font-size:16px; font-family:'Montserrat', sans-serif; cursor:pointer; line-height:43px; display:inline-block; margin-top:25px; padding:0 45px 0 20px; position:relative;}
.bt_comment .arrow { font-size:20px; position:absolute; top:15px; right:13px; z-index:100; width:18px; height:12px; display:inline-block;}
.bt_comment:hover { background:#333333;}
.bt_comment .icon-chevron-down {background:url(../images/icon2016.png) -31px -69px no-repeat;}
.bt_comment .icon-chevron-up {background:url(../images/icon2016.png) 0 -69px no-repeat;}

/*newsletter*/
.newsletter { clear:both; float:left; width:99.7%; padding:4% 0; vertical-align:top; border:#000000 1px solid; background:#ffffff; text-align:center; font-family:'Montserrat', sans-serif; font-size:20px; color:#000000; margin:25px 0 15px 0}
.newsletter input { display:inline-block; height:42px;}
.newsletter .form { width:283px; background:url(../images/newsletter.gif) 0 0 no-repeat; margin:10px 10px 0 0; text-indent:53px; color:#a3a3a3; font-size:15px}
.newsletter .bt { line-height:42px; width:205px; background:#333333; color:#e5e5e5; font-size:14px; margin:10px 0 0 0; cursor:pointer; letter-spacing:0.5px}
.newsletter .description {display:block; font-size:11px; color:#888888; padding:10px 0 0 0}

/*editor's picks*/
.r-con-01 { clear:both; width:100%; float:left;}
.r-con-01 .sec-ttl {font-family:'Montserrat', sans-serif; font-size:20px; color:#000000; letter-spacing:2px; text-transform:uppercase; border-top:#000000 3px solid; line-height:50px; text-indent:15px;}
.r-con-01 .item { width:100%; background: none;}
.r-con-01 .item:hover .art-img {box-shadow:2px 2px 2px #888888;}
.r-con-01 .item .hd { padding:10px 0 20px 2px}
.r-con-01 .item .hd .category { font-family:'Montserrat', sans-serif; font-size:11px; color:#1b6aee; text-transform:uppercase}
.r-con-01 .item .hd .art-ttl { font-size:18px; line-height:22px; margin-top: 0.8em;}

/*latest*/
.latest { margin-top:25px; float:left; width:100%;}
.latest .list { float:left; width:366px; height:295px;}
.latest .list .photo { padding:13px 13px 10px 13px; position:relative}
.latest .list .photo.bg_slideshow { background:url(../images/bg_slideshows.gif) right top no-repeat}
.latest .list .photo.bg_video { background:url(../images/bg_video.gif) center 11px no-repeat}
.latest .list .category { color:#1b6aee; font-size:11px; margin:0 0 0 14px; text-transform:uppercase; font-family:'Montserrat', sans-serif;}
.latest .list .art-ttl { font-size:18px; margin:0 0 0 14px}
.latest .list .date { font-size:11px; color:#ababab; margin:10px 0 0 14px; font-family:'Montserrat', sans-serif;}
.latest .list .photo .icon_slideshow { position:absolute; left:13px; top:135px; background:#020918 url(../images/ic_slideshows.png) 9px 13px no-repeat; z-index:100; width:48px; height:48px;}
.latest .list a:hover .photo .icon_slideshow {background:#032d73 url(../images/ic_slideshows.png) 9px 13px no-repeat;}
.latest .list .photo .icon_video { position:absolute; left:13px; top:135px; background:#020918 url(../images/ic_video.png) 9px 15px no-repeat; z-index:100; width:48px; height:48px;}
.latest .list a:hover .photo .icon_video {background:#032d73 url(../images/ic_video.png) 9px 15px no-repeat;}
.loading { width:100%; float:left; text-align:center; margin:10px 0}

.at-photo {width: 320px; float: left; margin-right: 1.250em; margin-bottom: 1.250em; position: relative;}
.at-photo .photo{position:relative;}
.photo{line-height: 0;}
.at-photo.atp { width: 570px; }
.photo .enlarge { position:absolute; bottom:0px; right:0; z-index:1000; width:49px; height:49px; background:url(../images/enlarge-img.png) 0 0 no-repeat; cursor:pointer}

.latest {clear:both;}
.latest .list {width:30.07%; height:295px; display: inline-block; vertical-align: top; margin-right:2.56%; margin-bottom:20px;}

.latestlist {margin-top:25px; float:left; width:100%;}
.latestlist ul {float:left; width:100%;}
.latestlist ul li {float:left; width:340px; margin:0 18px 20px 18px; height:320px;}
.latestlist ul li .category { color:#1b6aee; font-size:11px; margin:13px 0 0 2px; text-transform:uppercase; font-family:'Montserrat', sans-serif;}
.latestlist ul li .art-ttl { font-size:18px; margin:5px 0 5px 2px}
.latestlist ul li .date { font-size:11px; color:#ababab; margin:0 0 0 2px; font-family:'Montserrat', sans-serif;}

/*art_social*/
.art_social_v {width:125px; position:absolute; left:-60px; top:200px;}
.art_social_v li { display:block; width:21px; height:22px; padding:7px 7px 7px 7px;}
.art_social_v li:hover, .art_social_h li:hover { background:#e0ebfe;}
.art_social_v li a i, .art_social_h li a i { display:inline-block; width:21px; text-align: center;}
/*.art_social_v li a i.icon-facebook, .art_social_h li a i.icon-facebook {background:url(../images/social-ic-blc.png) 0 0 no-repeat; height:22px;}
.art_social_v li a i.icon-twitter, .art_social_h li a i.icon-twitter {background:url(../images/social-ic-blc.png) 0 -40px no-repeat; height:22px;}
.art_social_v li a i.icon-gplus, .art_social_h li a i.icon-gplus {background:url(../images/social-ic-blc.png) 0 -78px no-repeat; height:22px;}
.art_social_v li a i.icon-linkedin, .art_social_h li a i.icon-linkedin {background:url(../images/social-ic-blc.png) 0 -118px no-repeat; height:22px;}
.art_social_v li a i.icon-social-reddit, .art_social_h li a i.icon-social-reddit {background:url(../images/social-ic-blc.png) 0 -157px no-repeat; height:22px;}
.art_social_v li a i.icon-mail, .art_social_h li a i.icon-mail {background:url(../images/social-ic-blc.png) 0 -194px no-repeat; height:22px;}*/
.art_social_h {width:auto; position:absolute; right:0px; top:10px}
.art_social_h li { display:inline-block; width:21px; height:22px; padding:7px 7px 7px 7px;}

/*sponsor*/
.sp_rightrail { float:left; width:100%; margin-bottom:20px;}
.sp_rightrail img { float:left; margin-right:13px;}
.sp_rightrail .art-ttl { font-size:18px; line-height:22px; padding-top:10px;}
.sp_rightrail .art-smr { padding-top:5px;}

/*footer*/
.footer {background:#0c0c0c; height:40px; float:left; width:100%; text-align:center; font-family:'Montserrat', sans-serif; font-size:11px; text-transform:uppercase; color:#bfbfbf; line-height:40px; margin-top:25px;}

/*affiliate*/
.affi_box {margin:0 0 20px 0}
.affi_click {background:#032d73; width:150px; height:35px; line-height:35px; font-family:'Montserrat', sans-serif !important; text-align:center; font-weight:bold; display:inline-block; text-transform:uppercase; font-size:15px;}
.affi_click a {color:#ffffff !important; width:150px; height:35px; display:inline-block; text-decoration:none !important;}
.affi_click:hover {background:#0c0c0c;}

/*slideshow*/
.slide-bg { background:#ececec; padding:10px 0 5px 0; position:relative}
.slide-bt-start { background:url(http://assets.hngn.com/static/common/_v0.0.0/images/bt-slide-start.png) 0 0 no-repeat; width:154px; height:154px; position:absolute; top:50%; left:50%; margin-left:-76px; margin-top:-76px; cursor:pointer}
.slide-bt-start:hover { opacity:.9; -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.58);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.58);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.58);}
.slide-bt-red { background:#b30302; height:70px; line-height:73px; cursor:pointer; cursor:pointer; text-align:center; font-family:'Montserrat', sans-serif; font-size:33px; color:#ffffff;}
.slide-bt-red.bt-full { width:100%;}
.slide-bt-red.bt-side { width:150px}
.slide-number { width:120px; margin:0 auto; height:70px; line-height:73px; font-family:'Montserrat', sans-serif; font-size:33px; text-align:center}

/*share facebook*/
.share-facebook { background:#3b5998; height:50px; line-height:48px; cursor:pointer; text-align:center; font-family:'Montserrat', sans-serif; font-size:20px}
.share-facebook * { vertical-align:middle; color:#ffffff;}
.logo-facebook { width:12px; height:24px; margin-right:8px; display:inline-block; background:url(http://assets.hngn.com/static/common/_v0.0.0/images/icon2016.png) -65px -69px no-repeat;}

@media screen and (max-width: 1368px) {
.container {width:1050px;}
.side-art-list .list .item { width: 35%; }
}