@charset "utf-8";

/* Chosun.com Main Stylesheet  2018
  작성자 : Min Young Jun
  작업시작일 : 2018.04
*/

/* Reset import */
@import url("//news.chosun.com/dhtm/css/css_reset_2018.css");
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Black+Han+Sans&subset=korean');

html, body{height:100%; overflow:inherit;}
html{-webkit-text-size-adjust:none;}
body{min-width:320px;word-break:keep-all;word-wrap:break-word;white-space:inherit;color:#000;}
body, input, button, textarea{font:16px/1.3 "Noto Sans KR",AppleSDGothicNeo-Regular, "맑은 고딕", "Malgun Gothic", 나눔고딕, 돋움, Dotum, 굴림, Gulim, "Apple SD Gothic Neo", sans-serif;  /*font-family:AppleSDGothicNeo-Regular,'맑은 고딕','Malgun Gothic',나눔고딕,돋움,Dotum,굴림,Gulim,'Apple SD Gothic Neo',sans-serif; letter-spacing:-0.05em*/}
a, a:visited{color:#000; text-decoration:none}
.txt_dot1{overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.txt_dot2{overflow:hidden; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; white-space:normal; text-overflow:inherit;}
.txt_dot3{overflow:hidden; display:-webkit-box !important; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-wrap:break-word; white-space:normal; text-overflow:inherit;}
.dis_table{display:table; width:100%;}
.dis_table_cell{display:table-cell;}
.hdTxt, .hide_txt {position:absolute; top:-9999px; left:-9999px; overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; text-indent:-9999em; z-index:-1;}
.ui-loader{display:none;}
.ui-page{background:#292e39; min-height:100% !important;}

#wrapper{max-width:1920px; position: relative; margin:0 auto;}
#content{width:100%;}

.sec03 .list_top{background:#467fff;}
.sec03 .list_top .inner{max-width:1200px; margin:0 auto;}
.sec03 .list_top .top_area{padding-top:20px; *zoom:1;}
.sec03 .list_top .top_area:after{display:block;content:"";clear:both;}
.sec03 .list_top .logo{text-align:center; padding-top:18px; font-size:60px; line-height:1.1; font-family: 'Black Han Sans', sans-serif; color:#000;}
.sec03 .list_top .logo span{color:#fff;}
.sec03 .list_top .map_img{float:right; display:none;}

.sec03 .list_top .bot_area{width:1071px; margin:0 auto; margin-top:0; padding-bottom:30px; *zoom:1; position: relative;}
.sec03 .list_top .bot_area:after{display:block;content:"";clear:both;}
.sec03 .list_top .bot_area .all_menu{float:left; margin-right:25px;}
.sec03 .list_top .bot_area .menu_list_wrap{float:left;}
.sec03 .list_top .bot_area .all_menu{display:block; width:30px; margin-top:42px; text-align: center; text-decoration:none;}
.sec03 .list_top .bot_area .all_menu span.bg{display:block; width:22px; height:22px; margin:0 auto; background:url("//news.chosun.com/international/future100/img/list/all_menu.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .bot_area .all_menu.active span.bg{background:url("//news.chosun.com/international/future100/img/list/all_menu_on.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .bot_area .all_menu span.txt{display:block; margin-top:8px; font-size:15px; color:#fff; letter-spacing:-0.05em; text-align:center;}
.sec03 .list_top .bot_area .all_menu.active span.txt{color:#000; font-weight:bold;}

.sec03 .list_top .bot_area .all_menu:hover span.bg{background:url("//news.chosun.com/international/future100/img/list/all_menu_on.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .bot_area .all_menu:hover span.txt{color:#000; font-weight:bold;}

.sec03 .list_top .menu_list{*zoom:1;}
.sec03 .list_top .menu_list:after{display:block;content:"";clear:both;}
.sec03 .list_top .menu_list li{float:left; width:120px; height:120px; margin-left:8px; /*margin-left:15px;*/ padding-top:10px; box-sizing:border-box; /* border:1px solid black;*/ position: relative;}
.sec03 .list_top .menu_list li:first-child{margin-left:0;}
.sec03 .list_top .menu_list li a{display:table; width:100px; height:100px; margin:0 auto; box-sizing:border-box; border:1px solid #fff; border-radius:100%; text-align:center; text-decoration:none; font-size:17px; color:#fff; transition:background 0.2s ease-out;}
.sec03 .list_top .menu_list li a span{display:table-cell; vertical-align:middle;}
.sec03 .list_top .menu_list li.active a,.sec03 .list_top .menu_list li a:hover{background:#ffd616; border:3px solid #000; color:#000; font-weight:bold;}

.sec03 .list_top .menu_list li:after{content:"";display:block; width:40px; height:40px; position: absolute; left:0; top:0; transition:all 0.5s ease-out; opacity:0; visibility:hidden;}
.sec03 .list_top .menu_list li.active:after{opacity:1; visibility:visible;}
.sec03 .list_top .menu_list li.active.bg1:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg1.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li.active.bg2:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg2.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li.active.bg3:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg3.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li.active.bg4:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg4.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li.active.bg5:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg5.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li.active.bg6:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg6.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li.active.bg7:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg7.png") 0 0 no-repeat; background-size:100%;}

.sec03 .list_top .menu_list li:hover:after{opacity:1; visibility:visible;}
.sec03 .list_top .menu_list li:hover.bg1:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg1.png") 0 0 no-repeat; background-size:100%; }
.sec03 .list_top .menu_list li:hover.bg2:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg2.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li:hover.bg3:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg3.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li:hover.bg4:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg4.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li:hover.bg5:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg5.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li:hover.bg6:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg6.png") 0 0 no-repeat; background-size:100%;}
.sec03 .list_top .menu_list li:hover.bg7:after{background:url("//news.chosun.com/international/future100/img/list/menu_bg7.png") 0 0 no-repeat; background-size:100%;}


.sec03 .none_item{text-align:center; width:670px; margin:0 auto;}
.sec03 .none_item img{max-width:60%;}

.sec03 .cont_wrap{max-width:1200px; margin:0 auto; overflow:hidden;}
.sec03 .cate_list{padding:40px 0 15px 0; margin-bottom:40px;}
.sec03 .cate_list ul{*zoom:1; text-align:center; margin-left:-6px;}
.sec03 .cate_list ul:after{display:block;content:"";clear:both;}
.sec03 .cate_list ul li{display:block; float:left; background:#f3f3f3; margin:0 6px 15px 6px; border-radius:21px; transition:0.2s background ease-out;}
.sec03 .cate_list ul li.active,.sec03 .cate_list ul li:hover{background:#ffd616; font-weight:bold;}
/* .sec03 .cate_list ul li:first-child{margin-left:0;} */
.sec03 .cate_list ul li a{display:block; font-size:15px; padding:13px 16px; text-decoration:none;}

/* .sec03 .cate_list_pop{background:#fff; position:fixed; left:0; bottom:-100%; width:100%; height:auto; max-height:60%; overflow-y:auto; z-index:99; transition:0.4s all ease-out;}
.sec03 .cate_list_pop.popOn{bottom:0;} */

.sec03 .cate_list_pop{ position:fixed; left:0; bottom:-100%; width:100%; z-index:99; transition:0.4s all ease-out; background:#fff;}
.sec03 .cate_list_pop .cate_list_in{background:#fff; max-height:350px; overflow-y:auto;}
.sec03 .cate_list_pop.popOn{bottom:0;}

.sec03 .cate_list_pop .pop_close{display:block; width:30px; height:30px; position: absolute; right:15px; top:-38px;}
.sec03 .cate_list_pop .pop_close img{width:100%;}
.sec03 .cate_list_m{padding:25px 0 20px 15px;}
.sec03 .cate_list_m.default a.active{background:#f3f3f3;}
.sec03 .cate_list_m li{margin-top:10px;}
.sec03 .cate_list_m li.bold{font-weight:bold;}
.sec03 .cate_list_m li:first-child{margin-top:0;}
.sec03 .cate_list_m a{display:inline-block; font-size:15px; color:#000; padding:12px 16px 12px 16px; background:#f3f3f3; border-radius:20px; position: relative;}
.sec03 .cate_list_m a.active{padding:12px 30px 12px 16px; background:#ffd616; position: relative; font-weight:bold;}
.sec03 .cate_list_m a.active:after{content:"";width:15px;height:15px; background:url("//news.chosun.com/international/future100/img/list/cate_list_m.png") 0 0 no-repeat; background-size:100%; position: absolute; right:10px; top:14px;}
.sec03 .cate_list_pop .cate_list_m li.active a{padding:12px 16px 12px 16px; background:#ffd616; position: relative; font-weight:bold;}

.sec03 .h_tag{margin:40px 0; text-align:center;}
.sec03 .h_tag a{font-size:40px; color:#000;}

#wrapper.popOn:after{position: absolute; left:0; top:0; content:""; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:80;}

.sec03 .item_list_wrap{margin-left:-20px; margin-top:-30px;}
.sec03 .grid_item{width:33.33%; padding-left:20px; margin-bottom:20px; box-sizing:border-box; }
.sec03 .grid_col_sizer{width:33.33%;}
.sec03 .grid_item .bot{box-sizing:border-box; min-height:143px; padding:15px; /*min-height:140px;*/ border:1px solid #eaeaea; border-top:none;}
.sec03 .grid_item .bot a{display:block;}
.sec03 .grid_item .bot a.txt1{margin-bottom:4px; font-size:14px; color:#467fff;}
.sec03 .grid_item .bot a.txt2{margin-bottom:14px; font-size:20px; color:#000; overflow:hidden; max-height:2.6em; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; white-space:normal; text-overflow:inherit;}
.sec03 .grid_item .bot .tag{*zoom:1;}
.sec03 .grid_item .bot .tag:after{display:block;content:"";clear:both;}
.sec03 .grid_item .bot .tag li{float:left; background:#f3f3f3; border-radius:20px; margin-left:10px;}
.sec03 .grid_item .bot .tag li:first-child{margin-left:0;}
.sec03 .grid_item .bot .tag li a{display:block; font-size:13px; color:#999; padding:4px 9px;}

/* img resize ver1 */
.sec03 .grid_item +.img{position:relative; box-sizing:border-box; border:1px solid #eaeaea; border-bottom:none;}
.sec03 .grid_item .img{border:1px solid #eaeaea; border-bottom:none; position:relative;}
.sec03 .grid_item .img>a{display:block; position: relative; height:0; overflow:hidden; padding-top:52%; background:#f3f3f3;}
.sec03 .grid_item .img>a>img{width:100%; height:auto; position:absolute; left:0; top:50%; bottom:0; right:0; transform:translateY(-50%)}
.sec03 .grid_item .img.no_img>a{background:url("//news.chosun.com/international/future100/img/list//default_img.jpg") 0 0 no-repeat; background-size:100% 100%;}

.sec03 .grid_item .item_icon{width:40px; height:40px; position:absolute; left:10px; bottom:10px;}
.sec03 .grid_item .item_icon.item_icon1{background:url("//news.chosun.com/international/future100/img/list/item_icon1.png") 0 100% no-repeat; background-size:100%;}
.sec03 .grid_item .item_icon.item_icon2{background:url("//news.chosun.com/international/future100/img/list/item_icon2.png") 0 100% no-repeat; background-size:36px 27px;}
.sec03 .grid_item .item_cate{position: absolute; left:10px; top:12px; display:inline-block; padding:3px 8px 3px 8px; font-size:15px; letter-spacing:-0.05em; color:#fff; background:#000; border-radius:13px;}
.sec03 .grid_item .item_cate a{color:#fff;}


.load_icon{display:block; text-align:center; margin:33px 0;}
.load_icon img{animation:lds-dual-ring 1.5s linear infinite; width:30px; height:30px;}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media all and (max-width:1000px) {

}

@media all and (min-width:769px) {
  .desktop{display:block !important;}
  .mobile{display:none !important;}
}

@media all and (max-width:768px) {
  body, input, button, textarea{font:16px/1.3 AppleSDGothicNeo-Regular, "맑은 고딕", "Malgun Gothic", 나눔고딕, 돋움, Dotum, 굴림, Gulim, "Apple SD Gothic Neo", sans-serif;  /*font-family:AppleSDGothicNeo-Regular,'맑은 고딕','Malgun Gothic',나눔고딕,돋움,Dotum,굴림,Gulim,'Apple SD Gothic Neo',sans-serif; letter-spacing:-0.05em*/}
  .desktop{display:none !important;}
  .mobile{display:block !important;}
  #wrapper{max-width:768px; overflow:hidden;}
  .sec03 .list_top .logo{float:none; font-size:25px; padding-left:16px; text-align:left;}
  .sec03 .list_top .map_img{display:none;}
  .sec03 .list_top .menu_list li:hover:after{opacity:0; visibility:hidden;}
  .sec03 .list_top .bot_area{margin:0; margin-top:15px; padding-bottom:10px; width:auto;}
  .sec03 .list_top .bot_area .all_menu{position: absolute; left:16px; bottom:35px; float:none; margin-top:0;}
  .sec03 .list_top .bot_area .menu_list_wrap{float:none;}
  .sec03 .list_top .menu_list{margin-left:60px;}
  .sec03 .list_top .menu_list li{margin-left:0; width:85px; height:85px; padding:0;}
  .sec03 .list_top .menu_list li a{width:75px;height:75px;}
  .sec03 .list_top .menu_list li.active:after{width:30px; height:30px;}
  .sec03 .list_top .menu_list li a span{font-size:16px;}

  .sec03 .item_list_wrap{margin:0}
  .sec03 .grid_item{width:100%; padding:0 15px; margin:0 0 17px 0; float:none; border-bottom:9px solid #f3f3f3;}
  .sec03 .grid_item .bot{padding:15px 0 17px 0; border:none; min-height:inherit;}
  .sec03 .grid_item .img{border:none; position:relative;}
  .sec03 .grid_item .bot a.txt2{font-size:17px;}

  .sec03 .h_tag{margin:25px 0 20px 0;}
  .sec03 .h_tag a{font-size:20px; color:#000;}

  .sec03 .none_item{text-align:center; width:100%;}
  .sec03 .none_item img{width:100%; max-width:inherit;}

  .sec03 .list_top .top_area{padding-top:10px;}

  .sec03 .grid_item .bot a.txt2{margin-bottom:12px;}
  .sec03 .grid_item .item_cate{left:10px; top:10px;}

  .sec03 .list_top .menu_list li a:hover{background:none; border: 1px solid #fff; color:#fff; font-weight:normal;}
}