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

@import url('//static.heraldcorp.com/wbazic/basic/css/fonts.css');

/* ====== common ======================================================================================================= */
.trans{-webkit-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; transition:all .2s ease-in-out}
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;  word-wrap:break-word}
.ellipsis2, .ellipsis3, .ellipsis4, .ellipsis5{display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-box-orient:vertical; word-wrap:break-word}
.ellipsis2{-webkit-line-clamp:2}
.ellipsis3{-webkit-line-clamp:3}
.ellipsis4{-webkit-line-clamp:4}
.ellipsis5{-webkit-line-clamp:5}
.mr0 {margin-right:0 !important; }
.brb0 {border-bottom:0 !important}

.mt30{margin-top: 30px;}
.mt50{margin-top: 50px;}
.mt100{margin-top: 100px;}
.mb30{margin-bottom: 30px;}
.mb50{margin-bottom: 50px;}
.mb100{margin-bottom: 100px;}


/* ====== header ======================================================================================================= */
.wrap{position:relative; overflow:hidden;}
.header{position:relative; overflow:hidden; height:120px; background:#fff; width:1100px; margin:0 auto}
.header_ad{position:relative;overflow:hidden;height:90px;background:#fff;width:1100px;margin:0 auto; text-align: center; margin-top:3px;}
.logo{position:relative; overflow:hidden; display:block; float:left; padding-top:55px}
.logo img{width:100%}
.util_wrap{float:right; overflow:hidden; position:relative; width:65px; padding-top:62px}
.search_box{ display: inline-block;}
.menu_wrap{position: absolute; top: 10px; right: 10px; }
.gnb_open{position: absolute; top: 63px; right: 10px; width:19px; height:17px; background:url(../image/ico_menu.png);}
.gnb{margin-left:15px; display: inline-block; position: relative;    top: -6px;}

/*search*/
.search {display: -webkit-box;  display: flex;  -webkit-box-align: center;  align-items: center;		  position: absolute;    top: 60px;    right: 32px; }
.search .icon {  width: 20px;  cursor: pointer;  height: 20px;  margin: 2px 12px 10px 0;  position: relative;  -webkit-transform: rotate(-360deg) translate(-10%, -10%);
  transform: rotate(-360deg) translate(-10%, -10%);  -webkit-transition: all .3s ease .6s;  transition: all .3s ease .6s;}
.search .icon:before {  content: '';  position: absolute;  border-radius: 50%;  border: 1px solid #111;  left: 0;  top: 0;  right: 0;  bottom: 0;  display: block;  -webkit-transition: all .3s ease 0s;  transition: all .3s ease 0s;}
.search .icon span {  display: block;  top: 50%;  left: 50%;  width: 2px;  height: 2px;  border-radius: 1px;  margin: -1px 0 0 -1px;  position: absolute;  -webkit-transition: background 0s ease 0s;  transition: background 0s ease 0s;}
.search .icon span:before, .search .icon span:after {  content: '';  top: 0;  width: 2px;  height: 2px;  opacity: 0;  border-radius: 1px;  position: absolute;  background: #212533;  -webkit-transition: all .3s ease 0s;  transition: all .3s ease 0s;}
.search .icon span:before {  right: 0;}
.search .icon span:after {  left: 0;}
.search .icon span svg {  display: block;  fill: none;  stroke-linecap: round;  stroke-width: 3px;  stroke: #323333;  width: 14px;  height: 15px;  position: absolute;  left: 0;  top: 0;  stroke-dasharray: 47;  stroke-dashoffset: 67;  -webkit-transition: all .4s ease .31s, opacity .1s ease .4s, stroke .4s ease .0s;  transition: all .4s ease .31s, opacity .1s ease .4s, stroke .4s ease .0s;
}
.search .field {  position: relative;  width: 0;  -webkit-transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15) 0.5s;  transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15) 0.5s;}
.search .field input {  font-size: inherit;  line-height: inherit;  padding: 0 24px 0 0;  border: 0;  display: block;  font-family: inherit;  position: absolute;  background: #fff;  -webkit-appearance: none;  top: 0;  width: 100%;  opacity: 0;  z-index: 1;  visibility: hidden;  -webkit-transition: all 0s ease 0s;  transition: all 0s ease 0s;  margin: 0;  line-height: 22px;  vertical-align: middle;  text-transform: none;}
.search .field input:focus {  outline: none;}
.search .field input::-webkit-input-placeholder {  color: #212533;}
.search .field input:-moz-placeholder {  color: #212533;}
.search .field input::-moz-placeholder {  color: #212533;}
.search .field input:-ms-input-placeholder {  color: #212533;}
.search .field > div {  white-space: nowrap;  color: #212533;  display: -webkit-box;  display: flex;}
.search .field > div span {  opacity: 0;  line-height: 22px;  display: block;  visibility: hidden;  -webkit-transform: translate(0, 12px);  transform: translate(0, 12px);  -webkit-transition: all .4s ease;  transition: all .4s ease;}
.search .field > div span:nth-child(1) {  -webkit-transition-delay: .4s;  transition-delay: .4s;}
.search .field > div span:nth-child(2) {  -webkit-transition-delay: .2s;  transition-delay: .2s;}
.search .field > div span:nth-child(3) {  -webkit-transition-delay: 0s;  transition-delay: 0s;}
.search.open {margin-right:17px; border-bottom: 1px solid #111; transition-delay: 0s;}
.search.open .icon {  -webkit-transform: rotate(0deg) translate(0, 0);  transform: rotate(0deg) translate(0, 0);  -webkit-transition-delay: 0s;  transition-delay: 0s;}
.search.open .icon:before {  border-color: #212533;}
.search.open .icon span svg {  stroke: #212533;  -webkit-transition-delay: 0s;  transition-delay: 0s;}
.search.open .field {margin-right:20px;  -webkit-transition-delay: 0s;  transition-delay: 0s;  width: 200px;}
.search.open .field > div span {  opacity: 1;  visibility: visible;  -webkit-transform: translate(0, 0);  transform: translate(0, 0);}
.search.open .field > div span:nth-child(1) {  -webkit-transition-delay: .4s;  transition-delay: .4s;}
.search.open .field > div span:nth-child(2) {  -webkit-transition-delay: .45s;  transition-delay: .45s;}
.search.open .field > div span:nth-child(3) {  -webkit-transition-delay: .50s;  transition-delay: .50s;}
.search.open .field input {  opacity: 1;  visibility: visible;  -webkit-transition-delay: .75s;  transition-delay: .75s;}
.search.loading .icon span {  background: #212533;  -webkit-animation: rotate 1s infinite ease .8s;  animation: rotate 1s infinite ease .8s;  -webkit-transition-delay: .4s;  transition-delay: .4s;}
.search.loading .icon span svg {  -webkit-transition-delay: 0s;  transition-delay: 0s;  stroke-dasharray: 48;  stroke-dashoffset: 139;  opacity: 0;  -webkit-transition: all .4s ease 0s, opacity 0s ease .4s;  transition: all .4s ease 0s, opacity 0s ease .4s;}
.search.loading .icon span:before, .search.loading .icon span:after {  opacity: 1;  -webkit-transition-delay: .4s;  transition-delay: .4s;}
.search.loading .icon span:before {  -webkit-transform: translate(-4px, 0);  transform: translate(-4px, 0);}
.search.loading .icon span:after {  -webkit-transform: translate(4px, 0);  transform: translate(4px, 0);}

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

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


/*menu*/
.overlay-content h1{font-size:30px; font-weight:600 ;width:310px; text-align:center; border-bottom:4px solid #111; padding-bottom:14px; margin:0 auto; color: #111;}
.overlay-content .overlay-content_h1_1{margin-bottom:20px}
.overlay-content .overlay-content_h1_2{margin-bottom:20px; margin-top:40px}

.overlay-content li{line-height:24px; font-size:18px; font-weight:400; color: #111;}
.overlay-content .localnews{font-size:15px; color:#6c6c6c !important; font-weight:200; padding:6px 0 0}
.overlay-content li a {color: #111; letter-spacing: 0.15em; display: inline-block; padding:8px 0; position: relative;}
.overlay-content li a:after {color: #33b8ff; background: none repeat scroll 0 0 transparent; bottom:5px; content: ""; display: block;
  height: 2px; left: 50%; position: absolute; background: #33b8ff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0;  }
.overlay-content li a:hover:after {  width: 100%;   left: 0;}

.overlay {height: 0%; width: 100%; position:fixed; z-index: 999; top: 0; left: 0; background-color: rgb(255,255,255);  background-color: rgba(255,255,255, 0.99); overflow-y: hidden; transition: 0.5s;}
.overlay-content {  position: relative;  top:85px;  width: 100%;  text-align: center; }
.closebtn a:hover, .closebtn a:focus {color: #000; font-weight:300;}
.overlay .closebtn {position: absolute; top: 0; right: 100px; font-size: 60px; font-weight:100; color: #111;}

.topbar_wrap{position:relative; overflow:hidden; width:100%; line-height:42px; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;  }
.topbar{width:1100px; margin:0 auto;}
.latest{float:left}
.topbar_menu{float:right}
.topbar_menu li {float:left; margin-left:23px; font-size:15px; color:#010101;  }
.latest_dot{font-size:xx-small; color:#ff576d; position:relative; top:-2px}
.news_ani{font-weight:200; margin-left:18px; font-size:14px}
.news_ani_tit{font-size:15px; margin-left:8px;}
.blinking{ animation:blinkingText 1.5s infinite;}
	@keyframes blinkingText{
		0%{     color: #fff8f9;    }
		49%{    color: #ff94a2; }
		60%{    color: #ff6b7f; }
		99%{    color:#ff687c;  }
		100%{   color: #ff576d;    }
	}
/*newsticker*/
.newsticker {display:inline-block; position:relative;overflow:hidden; top:5px; width:430px;height:21px;text-align:left;}
.newsticker ul {padding:0;margin:0}
.newsticker ul li {float:left;width:430px;;padding:0;font-size:15px;letter-spacing:1px;height:21px;line-height:21px;list-style:none;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}


/* ====== main ======================================================================================================= */
.main_bg_bg{position:relative; overflow:hidden; margin:170px auto 0; -webkit-transition:.2s ease-in-out; transition:.2s ease-in-out}


/* ====== news_headline ======================================================================================================= */
.news_headline{position:relative; overflow:hidden; width:1100px; height:409px; margin:30px auto; }
.headline_tab1 .txt_area{position: absolute; top: 0; float:left; width:382px; padding-right:33px}
.headline_tab1 .headimg_area{position: absolute; bottom: 0; right: 0; float:left; width:685px; height:409px }
.headline_tab1 .headimg_area img{width:100%; height:100%; display: block; object-fit:cover;}
.head_cate{color:#33b8ff; font-size:13px; font-weight: 300;   border-radius: 15px;
  border: 1px solid #33b8ff; padding: 7px 15px; display:inline-block; }
.head_title{margin-top:25px; font-size:38px; color:#222; font-weight: 400; line-height:48px; letter-spacing: 0; display:block; max-height:143px }
.head_txt{margin-top:15px; color:#666; font-size:16px; line-height:26px; font-weight: 300; display:block; max-height:73px; }
.head_related{margin-top:20px; color:#333; font-size:16px; line-height:25px;}
.head_related li {background:url(../image/ico_related.png) left 4px no-repeat; padding-left:17px; }
.headline_tabutton{position:relative; display:inline-block;top:382px;  overflow:hidden; font-size:13px; color:#33b8ff;  font-weight: 400;  }
.headline_tabutton li{float:left; margin-right:25px;  margin-top:5px; }
.headline_tabutton .active{position: relative; top: -5px; font-weight: 500; color:#fff ; width:25px; max-height:25px; line-height: 24px;border-radius:50%; background:#33b8ff; text-align:center; cursor:pointer }

.swiper-container {position:relative; overflow:hidden; width:1100px; height:409px; margin:30px auto;}

.headline_tab .txt_area{position: absolute; top: 0; float:left; width:382px; padding-right:33px}
.headline_tab .headimg_area{position: absolute; bottom: 0; right: 0; float:left; width:685px; height:409px }
.headline_tab .headimg_area img{width:100%; height:100%; display: block; object-fit:cover;}
.headline_tab .head_cate{color:#33b8ff; font-size:13px; font-weight: 300;   border-radius: 15px;
  border: 1px solid #33b8ff; padding: 7px 15px; display:inline-block; }
.headline_tab .head_title{margin-top:25px; font-size:38px; color:#222; font-weight: 400; line-height:48px; letter-spacing: 0; display:block; }
.headline_tab .head_txt{margin-top:15px; color:#666; font-size:16px; line-height:26px; font-weight: 300; display:block; max-height:160px; }
.headline_tab .head_related{margin-top:20px; color:#333; font-size:16px; line-height:25px;}
.headline_tab .head_related li {background:url(../image/ico_related.png) left 4px no-repeat; padding-left:17px; }

.swiper-pagination{height: 25px !important; position:relative !important; top:-35px !important; text-align:left !important;;}
.swiper-pagination-bullet {top:0px !important;    width: 25px !important;    height: 25px !important;    line-height: 24px !important;
    font-size: 12px !important;    color: #33b8ff !important;	background:none !important;	opacity:1 !important;
	 text-align:center !important ;	margin-right:10px !important ; 	 }
.swiper-pagination-bullet-active{color:#fff !important;   width: 25px !important;
    height: 25px !important; border-radius:50% !important; background:#33b8ff !important;  text-align:center !important ;   margin-right:10px !important;}

/* ====== latest wrap======================================================================================================= */
.latest_wrap{position:relative; overflow:hidden; width:1100px; margin:0 auto;  }
.latest_wrap li{width:550px; float:left; margin-bottom:30px}
.latest_wrap .image_area{position: relative; bottom: 0; right: 0; float:left; width:265px; height:159px; margin-right:18px; }
.latest_wrap .image_area img{width:100%; height:100%; display: block; object-fit:cover;object-position:top}
.latest_wrap .txt_area{width:247px; float:left;  }
.latest_wrap .txt_area .title{font-size:18px; color:#111; font-weight: 400; line-height:26px; letter-spacing: 0 ; margin-bottom:15px; display:block; max-height:50px}
.latest_wrap .txt_area .txt{font-size:14px; color:#666; font-weight: 300; line-height:22px; letter-spacing: 0 ;     display: block;    max-height: 88px;}
.latest_wrap .mr_r20{margin-left:20px;}
.label_txt_pink{font-size:13px; color:#fff; background:#ff576d; line-height:22px; padding:3px 8px; font-weight:300; margin-right:10px}
.label_txt_black{font-size:13px; color:#fff; background:#125bff; line-height:22px; padding:3px 8px; font-weight:300; margin-right:10px}

/* ====== latest_wrap2 ======================================================================================================= */
.latest_wrap2 {position:relative; overflow:hidden; width:1100px; margin:0 auto; border-top:1px solid #dbdbdb; padding-top:30px}
.latest_wrap2 li{float:left; width:255px; margin-right:25px; margin-bottom:30px; height:70px;}
/*.latest_wrap2 .mrr0 {margin-right:0}*/
.latest_wrap2 li:nth-child(4n) {margin-right:0}
.latest2_title{height: 24px;float: left;font-size: 17px;color: #111;font-weight: 400;text-align: left;line-height: 24px;width: 258px;margin-bottom:3px}
.latest2_title2 {height: 62px;float: left;font-size: 16px;color: #111;font-weight: 400;text-align: left;line-height: 22px;width: 157px;margin-right: 5px;}
.latest2_img {width:88px; height:62px; float:left; }
.latest2_img img {width:100%; height:100%}
.latest2_txt {font-size:14px; color:#666; font-weight: 300; line-height:20px; letter-spacing: 0 ; display: inline-block; max-height:40px; ;width: 258px}


/* ====== herald special ======================================================================================================= */
.hd_special{width:100%; background:#f6f6f6; height:395px; margin-top:20px }
.hd_special_wrap{position:relative; overflow:hidden; width:1100px; margin:0 auto; }
.hd_special_sectit{float:left; padding-top:68px; }
.hd_special_sectit .t1{font-size:18px; color:#111; font-weight: 400; letter-spacing: 1px ; padding-bottom:10px; padding-left:2px}
.hd_special_sectit .t2{font-size:46px; color:#111; font-weight: 100; letter-spacing: 2px ;}
.hd_special_sectit .t3{font-size:44px; color:#111; font-weight: 600; letter-spacing: 2px ; }
.hd_special_conarea{float:right; position:relative; overflow:hidden;padding-top:45px}
.hd_special_conarea li{ float:left; margin-left:20px}
.hd_special_con .img_area {width:275px; height:257px; position:relative;  overflow:hidden}
.hd_special_con .img_area img{width:100%; height:100%}
.hd_special_con .img_area:hover img{transform:scale(1.1); -webkit-transform:scale(1.1);  -moz-transform:scale(1.1);  -o-transform:scale(1.1); transition: all .5s ease-in-out;   }
.hd_special_conarea .cate_area{font-size:16px; color:#666; font-weight: 400; letter-spacing: 1px; text-align:center; margin-top:15px}
.hd_special_conarea .tit_area{font-size:18px; color:#111; font-weight: 400; letter-spacing: 1px;  text-align:center ; margin-top:6px}
.hd_tabutton_wrap{position:relative; overflow:hidden; width:1100px; margin:0 auto;height:100px; top:50px}
.hd_tabutton{position:absolute; display:inline-block;left:0; bottom:50px;  overflow:hidden; font-size:13px; color:#33b8ff;  font-weight: 400;  }
.hd_tabutton li{float:left; margin-right:25px;  margin-top:5px; }
.hd_tabutton .active{position: relative; top: -5px; font-weight: 500; color:#fff ; width:25px; max-height:25px; line-height: 24px;border-radius:50%; background:#33b8ff; text-align:center; cursor:pointer }
.go_special{height:15px; line-height:15px; background-color:#fff; position:absolute;left:0; bottom:90px; color:#111; font-size:12px; font-weight:300; border: 1px solid #dbdbdb; padding: 9px 18px;  display:inline-block; float:left;letter-spacing:1px; text-align:center;}/* border-radius: 20px;*/
.go_special a{display:block}
.btn_moreb span {display:inline-block;position:relative;padding-right:17px; cursor:pointer }
.btn_moreb span:after {position:absolute;right:0;top:50%;width:14px;height:14px;margin-top:-7px;border:solid #111;border-width:2px 2px 0 0;box-sizing:border-box;transform:rotate(45deg) scale(0.5);content:"";transition:all 0.3s;}
.btn_moreb:hover, .btn_moreb:focus {background-color:#33b8ff; color:#fff;   }
.btn_moreb:hover span:after, .btn_moreb:focus span:after {right:-5px;background-color:#33b8ff; color:#fff;border:solid #fff; border-width:2px 2px 0 0;box-sizing:border-box;transform:rotate(45deg) scale(0.5);content:"";transition:all 0.3s;}
/* storytelling_bg */
.storytelling_bg{background:#f6f6f6; margin-top:20px}
.storytelling{max-width:1120px; margin:0 auto; text-align:center; font-size:0; padding-bottom:40px}
.storytelling li{display:inline-block; vertical-align:middle; width:calc(50% - 10px)}
.storytelling li:first-child{margin-right:10px}
.storytelling li:last-child{margin-left:10px}
.storytelling_li_title{font-size:28px; font-weight:400; color:#111; text-align:left; padding:50px 10px 30px; display:block}
.storytelling_li_content{display:inline-block; vertical-align:middle; width:calc(50% - 20px); margin:0 10px}
.storytelling_li_img{padding-bottom:60%; position:relative; overflow:hidden; margin-bottom:15px}
.storytelling_li_img img{position:absolute; top:0; left:0; width:100%; height:100%; transition:.3s}
.storytelling_li_img:after{position:absolute; content:""; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.15)}
.storytelling_li_t{font-size:16px; line-height:22px; font-weight:400; color:#111}
.storytelling_li_content:hover .storytelling_li_img img{transform:scale(1.1);}
.storytelling_section_main_swiper{position:relative}
.storytelling_section_main_swiper .swiper-slide{display:table; height:260px;}
.storytelling_swiper_tc_bg{position:relative; overflow:hidden; width:100%; height:100%}
.storytelling_swiper_tc{display:table; vertical-align:middle; width:100%; height:100%}
.storytelling_swiper_tc_img, .storytelling_swiper_tc_black{position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1}
.storytelling_swiper_tc_black{background:rgba(0,0,0,.7)}
.storytelling_swiper_tc_t_bg{z-index:1; text-align:center; padding:25px 40px 0; word-break:keep-all; display:table-cell; vertical-align:middle; width:calc(100% - 80px); height:100%}
.storytelling_swiper_tc_t1{color:rgba(255,255,255,1); font-size:22px; line-height:30px; font-weight:400; letter-spacing:-1px}
.storytelling_swiper_tc_t2{color:rgba(255,255,255,.5); font-size:14px; line-height:22px; font-weight:300; letter-spacing:0; margin:10px 0 20px}
.storytelling_swiper_tc_btn{color:rgba(255,255,255,1); font-size:12px; line-height:30px; font-weight:200; letter-spacing:-0.5px; padding:0 30px; border-radius:4px; border:1px solid rgba(255,255,255,.4); display:inline-block; background:rgba(0,0,0,.5); transition:.2s}
.storytelling_swiper_tc_btn:hover{background:#33b8ff; border-color:#33b8ff}
.storytelling_section_main_swiper .swiper-pagination{position:relative !important; top:inherit !important; bottom:inherit !important; text-align:center !important; font-size:6px; height:auto !important; color:#ccc; font-weight:200; padding:15px 0; font-size:0}
.storytelling_section_main_swiper .swiper-pagination-bullet{top:inherit !important; display:inline-block; vertical-align:middle; width:8px !important; height:8px !important; border-radius:50%; background:#ccc !important; margin:0 4px !important}
.storytelling_section_main_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#33b8ff !important}
.storytelling_section_main_swiper .swiper-button-next:after, .storytelling_section_main_swiper .swiper-button-prev:after{font-size:0}
.storytelling_section_main_swiper .swiper-button-next, .storytelling_section_main_swiper .swiper-button-prev{width:40px; height:40px; margin-top:0; top:120px; transition:.2s}
.storytelling_section_main_swiper .swiper-button-next{right:0}
.storytelling_section_main_swiper .swiper-button-prev{left:0}
.storytelling_section_main_swiper .swiper-button-next svg, .storytelling_section_main_swiper .swiper-button-prev svg{position:absolute; top:50%; left:50%; width:20px; height:20px; fill:#fff; transition:.2s}
.storytelling_section_main_swiper .swiper-button-next svg{transform:translate(-50%,-50%) rotate(90deg)}
.storytelling_section_main_swiper .swiper-button-prev svg{transform:translate(-50%,-50%) rotate(-90deg)}
.storytelling_section_main_swiper .swiper-button-next:hover, .storytelling_section_main_swiper .swiper-button-prev:hover{background:rgba(0,0,0,.5)}
.storytelling_section_main_swiper .swiper-button-next:hover svg{transform:translate(-50%,-50%) rotate(90deg) scale(1.2)}
.storytelling_section_main_swiper .swiper-button-prev:hover svg{transform:translate(-50%,-50%) rotate(-90deg) scale(1.2)}
.storytelling_section_main_latest_title{position:relative; font-size:24px; font-weight:400; line-height:27px; color:#111; padding:50px 0 20px; letter-spacing:-1px}
.storytelling_section_main_latest_title a{position:absolute; right:0; bottom:20px; font-size:11px; font-weight:400; color:#aaa; line-height:20px; border:1px solid #ddd; padding:0 13px; border-radius:4px; transition:.2s}
.storytelling_section_main_latest_title a:hover{border-color:#666; color:#666}
.storytelling_section_main_latest{font-size:0}
.storytelling_section_main_latest li{display:inline-block; vertical-align:top; margin:0 20px 25px 0; width:calc(25% - 15px); position:relative}
.storytelling_section_main_latest li a:after{position:absolute; content:""; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.15)}
.storytelling_section_main_latest li:nth-child(4n){margin-right:0}
.storytelling_section_main_latest li a{display:block; overflow:hidden}
.storytelling_section_main_latest_img{position:relative; overflow:hidden; padding-bottom:66%}
.storytelling_section_main_latest_img img{position:absolute; top:0; left:0; width:100%; height:100%; transition:.2s}
.storytelling_section_main_latest_t{margin:15px; font-size:13px; line-height:20px; height:40px; font-weight:300; letter-spacing:-0.5px; color:#111}
.storytelling_section_main_latest li:hover img{transform:scale(1.1)}
.storytelling_noimg{display:none; height:150px; line-height:150px; background:url(../image/storytelling_noimg_bg.jpg) center no-repeat; background-size:cover; text-align:center}
.storytelling_noimg_t{display:inline-block; vertical-align:middle; font-size:30px; line-height:40px; font-weight:400; padding:0 100px; word-break:keep-all; letter-spacing:-2px; color:#fff}
#series_top.series_top_noimg img{display:none}
#series_top.series_top_noimg .storytelling_noimg{display:block}


/* ====== photo_wrap ======================================================================================================= */
.photo_wrap{position:relative; overflow:hidden; width:1100px; margin:50px auto; }
/*photo box*/
.photo_news_tit{font-size:28px;  font-weight: 400; color:#000; padding: 50px 0 30px; position:relative;}
.photo_box{width:1115px; margin-left:-15px; }
.photo_box ul{width:1115px;font-size:0}
.photo_box li{box-sizing:border-box; display: inline-block; width:25%; padding:0 0 15px 15px;}
.photo_box li a{overflow:hidden;position:relative; display:block; padding-bottom:153px}
.photo_tit {z-index:2; position: absolute; left:20px; max-height:40px; line-height:20px; font-size: 15px; color: #fff; font-weight: 300; bottom:15px; right:20px; text-align: left; word-break: keep-all; letter-spacing: 0.5px;}
.photo_bg {z-index:1; top:0; left:0; right:0; bottom:0; position:absolute;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+46,0.65+100 */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 46%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 46%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

}
.photo_box li img{width:100%; height:100%; position:absolute; object-fit: cover; object-position: top;}
.photo_box li:hover img{ background-color: rgba( 0, 0, 0, 0.5 ); transform:scale(1.1); -webkit-transform:scale(1.1);  -moz-transform:scale(1.1);  -o-transform:scale(1.1); transition: all .5s ease-in-out;  }
.photo_line {z-index: 3; position: absolute;margin-top: 64px; margin-left: 54px; width: 254px; height: 87px; border: 2px solid #fff; opacity: 0.8;}

/*Photo box상단*/
.photo_box_top{border-top:solid 2px #111; padding-top:30px}
.photo_box_top .cate_name{color: #33b8ff; font-size: 13px; font-weight: 300; border-radius: 15px; border: 2px solid #33b8ff; padding: 7px 20px; display: inline-block;}
.photo_box_top .title{font-size:18px; color:#111; font-weight: 400; line-height:24px; letter-spacing: 0 ; margin:30px 0 15px;display:block; max-height:46px}
.photo_box_top .txt{font-size:14px; color:#666; font-weight: 300; line-height:22px; letter-spacing: 0 ;     display: block;    max-height: 44px;}

/*military_wrap*/
.military_wrap{position:relative; width:300px; float:right; background:url(../image/bg_main_military.jpg); }
.main_sec_title{font-size:26px;  font-weight: 400; color:#fff; margin-top:10px; margin-left:15px}
.main_sec_subtitle {color:#b3be0a; font-size:16px; font-weight:400; margin-top:28px; margin-left:15px}
.military_box{margin-top:15px}
.military_box li{ background:#2d3035; width:270px; margin:0 15px 15px; padding-bottom:15px; }
.military_img {width:270px; height:160px}
.military_img img{width:100%; height:100%}
.military_sec_tit{font-size:16px; font-weight:400; margin-top:20px; color:#b3be0a; padding:0 10px}
.military_sec_txt{font-size:17px; font-weight:300; line-height:25px; color:#fff;  margin-top:5px; height:50px; padding:0 10px}
.go_hemil {position:relative; top:9px; right:17px; display:inline-block;font-size:13px; color:#a9a9a9; font-weight:300; float:right;  letter-spacing:0px; transition:all 0.4s;outline:none;cursor:pointer;padding-right:17px; }
.go_hemil span:after {position:absolute;right:0;top:50%;width:16px;height:16px;margin-top:-8px;border:solid #a9a9a9;border-width:3px 3px 0 0;box-sizing:border-box;transform:rotate(45deg) scale(0.5);content:"";transition:all 0.4s;}
.go_hemil:hover, .go_hemil :focus {color:#b3be0a;}
.go_hemil:hover span:after, .go_hemil:focus span:after {right:-3px;border-color:#b3be0a;}


/* ====== section news ======================================================================================================= */
.sectionnews_wrap{position:relative; overflow:hidden; width:1100px; margin:30px auto; }
/*sectionnews_box*/
.sectionnews_box{width:800px; float:left; }
.section_cate_bar{overflow:hidden; height:83px; padding-top:10px; margin-bottom:25px }
/*.section_news_tit{font-size:28px;  font-weight: 400; color:#000; float:left; padding-top:20px; padding-right:20px; }*/
.section_news_tit{font-size:28px;  font-weight: 400; color:#000; padding: 50px 10px 30px;}
.section_catebtn{float:left;}
.section_catebtn li{float:left; width:67px; max-height:67px; line-height: 70px;border-radius:50%; background-color:#fff;border:2px solid #33b8ff; text-align:center; cursor:pointer; margin-left:13px; color:#33b8ff; font-size:13px; font-weight:300; }
.section_catebtn .active{ background-color:#33b8ff; color:#fff;  transform:scale(1.1); -webkit-transform:scale(1.1);  -moz-transform:scale(1.1);  -o-transform:scale(1.1);  }
.section_catebtn li:hover{background-color:#33b8ff; color:#fff;  transform:scale(1.1); -webkit-transform:scale(1.1);  -moz-transform:scale(1.1);  -o-transform:scale(1.1); transition: all .3s ease-in-out; }
.section_imgnews{padding-right:50px }
.section_imgnews .img_area{width:416px; height:382px; position: relative; bottom: 0; left: 0; float:left;}
.section_imgnews img{width:100%; height:100%}
.section_imgnews .img_area .tit{position: absolute;bottom: 0;color: #fff; background: rgb(0, 0, 0);background: rgba(0, 0, 0, 0.8); width: 100%; padding: 25px; box-sizing: border-box; font-size:18px}

.section_imgnews .list_area {padding-left:17px; width:310px; float:right}
.section_imgnews .list_area li{border-top:1px solid #dbdbdb; margin-bottom:17px ; padding-top:17px; line-height:24px; max-height:45px}
.sectionnews_txt{line-height:25px; max-height:25px}
.go_section{width:350px; max-height:20px; line-height:20px; background-color:#fff; position:absolute; bottom:37px; color:#111; font-size:12px; font-weight:300;
  border: 1px solid #dbdbdb; padding: 9px 0;  display:inline-block; float:left;  letter-spacing:1px; text-align:center;}
 .go_section a{display:block}
 .go_section:hover{background-color:#33b8ff; color:#fff; transition: all .2s ease-in-out;  border: 1px solid #33b8ff;}
/*banner_box*/
.banner_box{width:300px;   float:right;}
.banner_box img{margin-bottom:25px}
/*섹션뉴스*/
.section_n{width:750px}
.section_n_left{float:left; width:360px; margin-right:30px; margin-bottom: 12px; overflow:hidden;}
.section_n_left .go_section{bottom:25px}
.article1 {width:360px; margin-bottom:30px; }
.article1 .imgarea{float:left; width:182px; height:134px; margin-right:15px }
.article1 .imgarea img{width:100%; height:100%}
.article1 .txtarea{float:left; width:163px; height:161px; }
.article1 .txtarea .title{font-size: 18px; color: #111; font-weight: 400; line-height: 24px; letter-spacing: 0; margin-bottom: 15px; display: block; max-height: 68px;}
.article1 .txtarea .txt{font-size: 14px; color: #666; font-weight: 300; line-height: 22px; letter-spacing: 0; display: block; max-height: 44px;}
.article2{width:360px;display:block; overflow:hidden;}
.article2 li{float:left; display:block; margin-bottom:25px}
.article2 .imgarea{float:left; width:53px; height:45px; margin-right:15px }
.article2 .imgarea img{width:100%; height:100%}
.article2 .txtarea{float:left; width:292px; height:45px; }
.article2 .txtarea .title{font-size: 17px; color: #111; font-weight: 400; line-height: 24px; letter-spacing: 0;  display: block; max-height: 48px;}
.article2 .txtarea .txt{font-size: 14px; color: #666; font-weight: 300; line-height: 22px; letter-spacing: 0; display: block; max-height: 22px;}
.section_n_right{float:right; width:355px; padding-right:5px   }
.section_n_right .txt_area{width:350px; margin-right:10px; float:left; border-bottom:1px solid #dbdbdb; padding-bottom:20px; margin-bottom:25px }
.section_n_right .txt_area .title{font-size:18px; color:#111; font-weight: 400; line-height:22px; letter-spacing: 0 ; margin-bottom:15px; display:block; max-height:22px}
.section_n_right .txt_area .txt{font-size:14px; color:#666; font-weight: 300; line-height:22px; letter-spacing: 0 ;     display: block;    max-height: 44px;}
.lst0 { margin-bottom:20px}

.sectionnews_wrap .banner_box{margin-bottom:9px}
.sectionnews_wrap .banner_box:last-child{margin-bottom:0}

/*추가201214*/
.article1_noimg {float:left; width:360px; border-bottom:1px solid #dbdbdb; padding-bottom:20px ; margin-bottom:20px }
.article1_noimg .title{font-size: 18px; color: #111; font-weight: 400; line-height: 24px; letter-spacing: 0; margin-bottom: 15px; display: block; max-height: 68px;}
.article1_noimg .txt{font-size: 14px; color: #666; font-weight: 300; line-height: 22px; letter-spacing: 0; display: block; max-height: 44px; }
.article2 .txtarea_noimg{width:360px; }
.article2 .txtarea_noimg .title{font-size: 17px; color: #111; font-weight: 400; line-height:17px; max-height:17px; margin-bottom:10px }
.article2 .txtarea_noimg .txt{font-size: 14px; color: #666; font-weight: 300;  line-height:22px; max-height:22px; }

/* ====== series article ======================================================================================================= */
.series_section{position:relative; overflow:hidden; width:100%;height:490px; background:#f6f6f6;margin-bottom:50px}
.series_section .title{position:relative; width:1100px; margin:50px auto 30px; font-size:28px;  font-weight: 400; color:#111; }
.title_more{position:absolute; right:0; font-size:13px; top:60px; color:#777}
.title_more svg{display:inline-block; vertical-align:middle; width:14px; height:14px; margin-top:-1px; fill:#777}
.series_section_wrap{width:1100px;margin:0 auto;  }
.swiper-button-prev{float:left;}
.swiper-button-next{float:right;}
.series_section .con_wrap{width:1122px; margin:0 auto; float:left;}
.series_box{width:350px; height:440px; background:#fff; float:left; margin:0 12px }
.series_box .secbar{height:14px; color:#fff; background:#000; padding:7px 13px; font-size:13px; font-weight:300; display:inline-block; position:absolute; z-index:1  }
.series_box .bg_top{height:130px; position:relative;top:0;}
.series_box .series_writer{text-align:center; position:relative; top:-40px;  }
.series_box .series_writer .name{font-size:15px; font-weight:400; color:#111; padding:10px 0 8px 0 }
.series_box .series_writer .division{font-size:13px; font-weight:300; color:#666; }
.series_box .series_name{color:#33b8ff; font-size:15px; font-weight:400;   border-radius: 15px;  border: 1.5px solid #33b8ff; padding: 7px 15px; display:inline-block;position:relative; top: 4%; left: 50%; transform: translate(-50%, -50%); text-align:center; display:inline-block; margin:41px 0}
.series_box .series_con{ padding:0 15px; position:relative; display:block; overflow:hidden}
.series_box .se_imgwrap {width:102px; height:89px; float:left; margin-right:10px; }
.series_box .se_imgwrap img{width:100%; height:100%}
.series_box .series_con ul {padding: 0 !important; ; margin:0 !important}
.series_box .series_con .line{border-bottom:1px solid #dbdbdb; padding-bottom:17px; margin-bottom:22px }
.series_box .series_con .se_title{font-size:16px; font-weight:400; color:#111; margin-bottom:13px}
.series_box .series_con .se_title2{font-size:16px; font-weight:400; color:#111; margin-bottom:15px}
.series_box .series_con .num{margin-right:15px}
.series_box .series_con .se_txt{font-size:14px; font-weight:300; color:#666; line-height:19px; max-height:59px; }

/*슬라이드*/
.swiper1 .swiper_bg{position:relative; overflow:hidden;}
.swiper1 .swiper-wrapper{width:1100px !important; margin:0 auto; }
.swiper1 {width: 100%;  height: 100%;     overflow: hidden}
.swiper1 .swiper-slide { background: #fff;  width: 350px !important; height:320px !important; }
.swiper1 .swiper-button_wrap{position: absolute; top: 51%; left: 50%; width: 1224px; transform: translate(-50%, -50%);}
.swiper1 .swiper-button-prev, .swiper1 .swiper-button-next{width:50px !important; height:50px !important; top:0 !important; margin-top:0 !important}
.swiper1 .swiper-button-prev:after, .swiper1 .swiper-button-next:after{display:none}
.swiper1 .swiper-button-prev svg, .swiper1 .swiper-button-next svg{width:50%; height:50%; fill:#000}
.swiper1 .swiper-button-prev svg{transform:rotate(-90deg)}
.swiper1 .swiper-button-next svg{transform:rotate(90deg)}


/* ====== hd_story_wrap ======================================================================================================= */
.hd_story_wrap{position:relative; overflow:hidden; width:1100px; margin:30px auto;}
.hd_stoty_box{width:800px; float:left; }
.hd_stoty_title { font-size:28px;  font-weight: 400; color:#111; margin-bottom:15px}
.btn_more {position:relative; top:10px; display:inline-block;font-size:15px; color:#999; font-weight:300; float:right;  padding-right:66px ; letter-spacing:-1px; transition:all 0.4s;outline:none;cursor:pointer;}
.btn_more span {display:inline-block;position:relative;padding-right:17px;}
.btn_more span:after {position:absolute;right:0;top:50%;width:16px;height:16px;margin-top:-8px;border:solid #999;border-width:3px 3px 0 0;box-sizing:border-box;transform:rotate(45deg) scale(0.5);content:"";transition:all 0.4s;}
.btn_more:hover, .btn_more:focus {color:#33b8ff;}
.btn_more:hover span:after, .btn_more:focus span:after {right:-5px;border-color:#33b8ff;}
.hd_stoty_boximg{position:relative; margin-top:30px; }
.hd_stoty_boximg li{width:360px; height: 270px; float:left; margin-bottom:30px; margin-right:30px; position:relative;}
.video_img .btn_movie{position:absolute; left:145px; top:70px; width:64px; height:64px; background:url(../image/play.png); z-index:5; transition: all 0.4s;opacity:0.8 }
.video_img .btn_movie:hover{background:url(../image/play_o.png);}
.video_img{margin-bottom:15px;width:360px; height:215px; float:left;}
.video_img img{width:100%; height:100%}
.video_txt{text-align:center}
.video_txt .cate_area{font-size:16px; color:#666; font-weight: 400; letter-spacing: 1px; text-align:center; margin-top:15px}
.video_txt .tit_area{font-size:16px;line-height:20px; max-height:20px; color:#111; font-weight: 400; text-align:center ; margin-top:6px; padding:0 10px}
/*leaders_club*/
.leaders_club_box{width:300px; float:right; margin-top:50px}
.lerders_main{position:relative;  }
.lerders_main li{ float:left; width:145px; height:60px; margin-bottom:15px; }



/* ====== global_wrap ======================================================================================================= */
.global_wrap{width:1100px;margin:0 auto;}
.swiper2_bg {position:relative; overflow:hidden; width:100%; background:#f6f6f6; margin:50px 0; padding:50px 0 }
.swiper2 {width:100%; height:100%; overflow: hidden}
.swiper2 .swiper-wrapper{width:1100px !important; margin:0 auto;}
.swiper2 .swiper-slide {background: #f6f6f6;  width:265px !important; height:238px !important; }
.swiper2 .swiper-button_wrap{position: absolute; top:42%; left: 50%; width: 1224px; transform: translate(-50%, -50%);}
.swiper2 .swiper-button-prev, .swiper2 .swiper-button-next{width:50px !important; height:50px !important; top:0 !important; margin-top:0 !important}
.swiper2 .swiper-button-prev:after, .swiper2 .swiper-button-next:after{display:none}
.swiper2 .swiper-button-prev svg, .swiper2 .swiper-button-next svg{width:50%; height:50%; fill:#000}
.swiper2 .swiper-button-prev svg{transform:rotate(-90deg)}
.swiper2 .swiper-button-next svg{transform:rotate(90deg)}

.global_title{font-size:28px;  font-weight: 400; color:#111;  width:1100px;margin:0 auto; padding-bottom:30px }
.global-box{float:left; width:265px;height:238px;  margin-right:10px}

.globalvideo{position: relative;margin-bottom:15px;width:268px; height:162px; float:left; overflow:hidden;}
.globalvideo .photo_bg{z-index: 1; width:268px; height:162px; position:absolute;background-color: rgba( 0, 0, 0, 0.5 ); }
.globalvideo .btn_movie{position:absolute; top:55px; left:110px;  width:45px; height:45px; background:url(../image/play.png); background-size:45px 45px; z-index:5; transition: all 0.4s; }
.globalvideo .btn_movie:hover{background:url(../image/play_o.png); background-size:45px 45px;  }
.global_txt{width:268px; margin-top:15px; text-align:center; position:relative; display:block}
.global_txt .cate_area{font-size:15px; color:#666; font-weight: 400; letter-spacing: 1px; text-align:center; margin-top:15px}
.global_txt .tit_area{font-size:16px;line-height:20px; max-height:40px; color:#111; font-weight: 400; text-align:center ; margin-top:6px; padding:0 10px}


/* ====== notice_wrap ======================================================================================================= */
.notice_wrap{width:1100px; margin:0 auto; height:150px;   }
.notice_wrap_title{float:left; width:153px;   font-size:28px;  font-weight: 400; color:#111;}
.notice_box{float:left; width:947px; }
.notice_box li{float:left; width:280px; margin-left:35px }
.n_num{float:left; font-size:16px; font-weight:400; margin-right:12px; display:block; position: relative; top: 4px; }
.n_title{float:left; display:block; font-weight:300; width:245px; line-height:24px; }
.n_date{ font-size:13px; font-weight:200; color:#666}
/*more button*/
.btn_moreb span {display:inline-block;position:relative;padding-right:17px; cursor:pointer }
.btn_moreb span:after {position:absolute;right:0;top:50%;width:14px;height:14px;margin-top:-7px;border:solid #111;border-width:2px 2px 0 0;box-sizing:border-box;transform:rotate(45deg) scale(0.5);content:"";transition:all 0.4s;}
.btn_moreb:hover span:after, .btn_moreb:focus span:after {right:-5px;background-color:#33b8ff; color:#fff;border:solid #fff; border-width:2px 2px 0 0;box-sizing:border-box;transform:rotate(45deg) scale(0.5);content:"";transition:all 0.4s;}
.btn_more_r {position:relative; top:10px; display:inline-block;font-size:15px; color:#999; font-weight:300; float:right;   ; letter-spacing:-1px; transition:all 0.4s;outline:none;cursor:pointer;padding-right:17px; right:-5px}
.btn_more_r span {display:inline-block;position:relative;padding-right:17px;}
.btn_more_r span:after {position:absolute;right:0;top:50%;width:16px;height:16px;margin-top:-8px;border:solid #999;border-width:3px 3px 0 0;box-sizing:border-box;transform:rotate(45deg) scale(0.5);content:"";transition:all 0.4s;}
.btn_more_r:hover, .btn_more_r:focus {color:#33b8ff;}
.btn_more_r:hover span:after, .btn_morer:focus span:after {right:-5px;border-color:#33b8ff;}
.btn_more_notice {position:relative; top:5px; right:0; display:inline-block;font-size:15px; color:#999; font-weight:300; float:right;  letter-spacing:-1px; transition:all 0.4s;outline:none;cursor:pointer;padding-right:17px; }
.btn_more_notice span {display:inline-block;position:relative;padding-right:17px;}
.btn_more_notice span:after {position:absolute;right:0;top:50%;width:16px;height:16px;margin-top:-8px;border:solid #999;border-width:3px 3px 0 0;box-sizing:border-box;transform:rotate(45deg) scale(0.5);content:"";transition:all 0.4s;}
.btn_more_notice:hover, .btn_more_notice:focus {color:#33b8ff;}
.btn_more_notice:hover span:after, .btn_more_notice:focus span:after {right:-5px;border-color:#33b8ff;}


/* ====== footer ======================================================================================================= */
.footer{position:relative; overflow:hidden; width:100%; background:#000; clear:both; padding:36px 0 15px; height:150px}
.footer_box{width:1100px; margin:0 auto;}
.footer_menu{font-size:13px; color:#fff; font-weight:300;  display:block; overflow:hidden; }
.footer_menu li{float:left; margin-right:23px}
.footer_menu .blue{color:#51c7f8}
.family_link {float:right; letter-spacing:2px}
.footer_sel, .footer_sel label, .footer_sel select{height:16px; line-height:16px}
.footer_sel{position:relative;width:130px; background:url(../image/footer_sel.png) center right 0 no-repeat; background-size:7px; float:right}
.footer_sel label{position:absolute; top:0; left:0; color:#fff; font-size:12px; font-weight:300}
.footer_sel select{width:100%; border:0; opacity:0; filter:alpha(opacity=0); -webkit-appearance:none; -moz-appearance:none; appearance:none; font-size:14px; cursor:pointer}
.footer_bottom{position:relative;display:block; margin-top:43px; color:#fff; letter-spacing:2px }
.footer_bottom .b_logo {float:left; margin-right:30px;  }
.footer_bottom .address {float:left; font-size:12px; opacity:0.7; font-weight:100; line-height:20px }


/* ====== dcon ======================================================================================================= */
.dcon_bg {background:#F3F3F3; width:100%;  overflow: hidden}
.dcon_top {width:100%; height:607px; position:relative;display:block;}
.dcon_link {font-size:15px;  color:#606060; font-weight:200; width:1100px; margin:0 auto;line-height:45px }
.dcon_link li {float:left; margin-right:15px; }
.dcon_top_tit{width:1100px; margin:0 auto; text-align:left; position:relative; top:200px; left:-175px}
.dcon_top_txt{font-size:22px; font-weight:200; color:#fff; line-height:24px; width:470px; height:72px;  text-align:left; position:relative; top:15px; left:176px }
.dcon_down_btn {text-align: right; position: relative; top: 25px; right: -175px;}
.dcon_menu{color:#fff; font-size:20px; width:1100px; margin:0 auto; height:67px;line-height:67px;  border-top:1px solid rgba(255, 255, 255, 0.6 ); position:relative; bottom:-399px; text-align:center; letter-spacing:2px; font-weight:700}
.dcon_menu li {width:33.333%; float:left;  height:67px;  display:block}
.dcon_menu li:hover{background-color:rgba(51, 183, 255, 0.7 ); cursor: pointer;}
.dcon_tit {text-align:center; margin:80px 0 40px 0}
.dcon_tit h1{font-size:30px; font-weight:700; color:#262D3D}

/*video*/
.dcon_video{margin:0 auto; width:1100px; position:relative; display:block; overflow:hidden; }
.dcon_video li{float:left; margin-right:25px; margin-bottom:40px; }
.dcon_video_box {position:relative; display:block; overflow:hidden;  width:350px; height:294px}
.ico_movie {position:absolute; left:0; bottom:83px; z-index:5; background-color: transparent; }
.dcon_video_img {position:relative; width:350px; height:197px}
.dcon_video_img img{width:100%; height:100%}
.dcon_txt_bg {background:#fff; text-align:left; padding:15px 15px 20px 15px; }
.dcon_video_cate {font-size:14px; color:#666; font-weight: 400; letter-spacing: 1px; margin-bottom:10px; }
.dcon_video_tit{font-size:19px;line-height:22px; max-height:44px; color:#111; font-weight: 400; }
.dcon_more_btn{margin: 0 auto; width: 170px; text-align: center;     border-radius: 24px;  border: 2px solid black; background-color: white; padding: 14px 28px; font-size: 16px; cursor: pointer; border-color: #33b8ff;  color: #33b8ff; transition:all 0.4s}
.dcon_more_btn:hover { background: #33b8ff; color: white;}

/*special*/
.dcon_speaial{width:100%}
.dcon_speaial .container {position: relative;}
.dcon_speaial .mySlides {display: none;}
.sp_img  {height:520px; }
.sp_img img {width:100%; height:520px; }
.dcon_speaial .cursor {position:relative; cursor: pointer;}
.dcon_speaial .row {position: absolute; overflow:hidden; bottom: 30px; left: 0; right: 0; text-align: center; z-index: 5; font-size: 0}
.dcon_speaial .row:after {z-index: 999;  background-color:rgba(127, 193, 234, 0.6 ); }
.dcon_speaial .column {position:relative; display: inline-block; vertical-align:middle;	margin:0 5px; width: 180px; }
.dcon_speaial .column img{z-index:0}
.num01 {color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; background-color:rgba(0,0,0,.7 ); font-size: 11px; display:table; transition:.2s; cursor: pointer;}
.num01:hover{background-color:rgba(127, 193, 234, 0.6 )}
.column .active{background-color:rgba(127, 193, 234, 0.6 )}
.num01_t{display:table-cell; vertical-align:middle; font-size:16px;line-height:20px;  padding:0 10px; letter-spacing:1px; font-weight:300}

/*
.dcon_speaial .column :hover .num01{background-color:rgba(127, 193, 234, 0.6 )}
.dcon_speaial .demo.cursor.active .num01{background-color:rgba(127, 193, 234, 0.6 );}
*/


/* ====== article ======================================================================================================= */
.view_bg{width:1138px; margin:0 auto; position: relative; /*overflow:hidden; 있으면 기사면 sns 공유 영역이 보이지 않음.. 고쳐야함 */ }

.view_sns{margin-bottom:113px}
.view_sns li{text-align:right}
.view_sns li a{display:inline-block;}
#view_wing_left, #view_wing_right{position:absolute; width:120px; height:600px; margin-top:220px; z-index:99}
#view_wing_left{left:-150px}
#view_wing_right{right:-150px}

.view_sns li{height:38px;margin-bottom:8px}
.view_area{position:relative}
.article_wrap {position:relative; overflow:hidden; width:1100px; margin:0 auto;}
.article_top {position:relative; overflow:hidden;border-bottom:1px solid #dbdbdb; padding:35px 0; box-sizing:border-box }
.article_category {font-size:17px; color:#00b8e9; font-weight:400; margin-bottom:10px;  }
.article_title{padding-right:70px; font-size:32px; color:#2e2e2e; font-weight:400; margin-bottom:27px; line-height:42px; letter-spacing:-1px; }
.article_date{font-size:15px; color:#7b7b7b; font-weight:200;}
.right_link {float:right; position:relative; top:-10px }
.right_link li {float:left; margin-left:8px }
.article_area {position:relative; overflow:hidden; width:1100px; margin:0 auto;}
.article_left {position:relative; overflow:hidden; float:left; width:700px; padding-right:50px;  padding-top:50px; padding-bottom:130px } /*border-right:1px solid #dbdbdb;*/
.article_right {position:relative; overflow:hidden;float:right; width:300px; padding-top:50px; padding-bottom:130px}
.article_img_box{position:relative; vertical-align:top; width:700px; font-size:13px; color:#666; font-weight:200; line-height:18px; margin-bottom:60px}
.article_img {margin-bottom:18px; max-width: 100%; height: auto !important;}
.article_img img {position:relative; display:block; max-width:100%; }
.article_img_caption{display:block; position:relative; overflow:hidden; padding:0 10px}
.article_view{font-size:18px; color:#333333; font-weight:300; line-height:30px; text-align:justify; }
.article_view p{margin: 1em 0;}
.article_view img{padding:5px 14px 5px 14px}
.summary_area {margin-bottom:35px; font-weight:400; border-left:2px solid #00b8e9; padding-left:15px; line-height:30px;  }
.byline{font-weight:200; font-size:15px; letter-spacing: 1px; margin-bottom:50px; }
.byline .name{font-weight:400; font-size:15px; }
.byline .email{ margin-left:10px; }
.article_img_l{float:left; margin:10px 20px 10px 0;}
.article_img_r{float:right; margin:10px 0 10px 20px;}



#articleText .group-slide .swiper-container-css-mode>.swiper-wrapper>.swiper-slide .slide-img img{padding:0; max-width:630px !important}
.group-slide .swiper-pagination {  bottom: inherit;  top: inherit !important;  height: auto !important;  text-align:center !important;}
.group-slide .swiper-pagination-bullet{background:#ccc !important;}
.group-slide .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{width:10px !important; height:10px !important; }
.group-slide .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#006bff !important}
.group-slide .caption{margin:5px 30px !important;}
.group-slide .swiper-button-prev, .group-slide .swiper-button-next{top:42% !important}
.group-slide .swiper-button-next:after, .group-slide .swiper-button-prev:after{font-size:30px !important}

/*right*/
.ad_area{margin-bottom:30px}
.right_t1{font-size:21px; color:#262526; font-weight:500; margin-bottom:20px}
/*많이본기사*/
.read_best {position:relative; overflow:hidden; margin-bottom:30px }
.read_best li{display:inline-block; padding-bottom:10px;  }
.read_best_img { width:104px; height:64px; float:right;  }
.read_best_img img{ width:100%; height:100%;object-fit: cover;object-position: top;}
.read_best_con {float:left; margin-right:15px; width:181px }
.read_best_cate {font-size:13px; color:#00b8e9; font-weight:300;  font-family: 'Montserrat'; line-height:24px;}
.read_best_tit {font-size:15px; color:#111; font-weight:300; line-height:20px ; max-height:40px;}
.line0 {border-bottom:none !important}
/*연재기사*/
.right_series {position:relative; overflow:hidden; margin-bottom:30px}
.right_series li{border-bottom:1px solid #dbdbdb; padding-bottom:15px; margin-bottom:15px; display:inline-block }
.right_series_tit{display: inline-block; width: 300px; position:relative;  font-size:15px; color:#111; font-weight:400; line-height:20px ; max-height:20px;margin-bottom:5px}
.right_series_con{position:relative;float:left; width:186px; margin-right:10px }
.right_series_txt {position:relative;float:left; font-size:14px; color:#666; font-weight:300; line-height:20px ; max-height:40px; letter-spacing:1px }
.right_series_name{color:#33b8ff; font-size:13px; font-weight:400;   border-radius: 15px;  border: 1.5px solid #33b8ff; padding: 5px 13px; margin-top: 10px; display:inline-block }
.right_series_thumb {position:relative; width:104px; height:64px; float:left;}
.right_series_thumb img{width:100%; height:100%; object-fit: cover;object-position: top;}
/*헤럴드밀리터리*/
.article_military {margin-bottom:30px; vertical-align:top;}
.article_military .military_img {width:300px; height:180px}
.article_military .military_img img{width:100%; height:100%}
.article_military .military_sec_tit{font-size:15px; font-weight:400; margin-top:15px; color:#b3be0a}
.article_military .military_sec_txt{font-size:15px; font-weight:400; line-height:20px; margin-top:5px; max-height:40px; }
/*헤럴드스토리*/
.article_story{position:relative;}
.article_story_thum {width:300px; height:180px}
.article_story_thum img {width:100%; height:100%}
.article_story_t_box {position:relative; overflow: hidden; display: inline-block; margin-top:15px}
.story_youtube_thum {margin-right: 10px; width: 48px; height: 48px; border-radius: 50%; background-color: transparent; overflow: hidden; float:left;}
.story_youtube_thum img{width:100%; height:100%; display:block;}
.story_txt {float:left; display:inline-block; max-height:40px; line-height:20px; width:235px; position: relative; top:5px ; font-size:15px; font-weight:400}


/* ====== 리스트 ======================================================================================================= */
.section_tit{font-size:38px; font-weight:500; color:#111; margin-bottom:30px}
.list_wrap {position:relative; overflow:hidden; width:1100px; margin:0 auto; padding :30px 0}
.list_l {position:relative;float:left;width:750px; margin-right:50px}
.list_r {position:relative;float:right;width:300px}
.list_head{position:relative; display: inline-block;}
.list_head_img {width:436px; height:260px; float:left;  margin-right:30px}
.list_head_img img {width:100%; height:100%;object-fit: cover;object-position: top;}
.list_head_con {float:left; width:284px }
.list_head_con2 {float:left;}
.list_head_title{ font-size:32px; color:#222; font-weight: 400; line-height:42px; letter-spacing: 0; display:block; max-height:125px; }
.list_head_txt{margin-top:15px; color:#666; font-size:16px; line-height:26px; font-weight: 300; display:block; max-height:73px; }
.list_date {position:relative; font-size: 13px; color: #999; font-weight: 200; padding-top:30px; display:table-cell}
.list_nav {position:relative; display:inline-block; margin-top:50px; padding-bottom:20px; border-bottom:1px solid #111; width:750px; }
.list_nav li{float:left; display:inline-block; margin-right:24px; color:#666; font-size:16px; font-weight:200}
.list_nav li.on{color:#000; font-weight:400}
.list{position: relative; overflow: hidden;}
.list li{width:750px;     border-bottom: 1px solid #dbdbdb; padding: 20px 0;}
.list_img {width:184px; height:110px; float:left;  margin-right:18px}
.list_img img {width:100%; height:100%;object-fit: cover;object-position: top;}
.list_con {float:left; width:548px }
.list_title{ font-size:18px; color:#111; font-weight: 400; line-height:23px; letter-spacing: 0; display:block; max-height:23px; }
.list_txt{margin-top:14px; color:#777; font-size:14px; line-height:20px; font-weight: 300; display:block; max-height:40px; }
.l_date {position:relative; font-size: 13px; color: #999; font-weight: 200; padding-top:20px; display:table-cell}
/*페이징*/
.page_wrap {margin:50px 0; text-align:center;font-size:0;}
.page_nation {display:inline-block;}
.page_nation .none {display:none;}
.page_nation a {display:block;margin:0 4px;float:left;font-weight:300;width:42px;height:30px;line-height:30px;text-align:center;font-size:16px;color:#7d7d7d;text-decoration:none;}
.page_nation .arrow {border:1px solid #ebebeb;}
.page_nation .pprev {background:url(../image/page_pprev.png) no-repeat center center;margin-left:0;}
.page_nation .prev {background:url(../image/page_prev.png) no-repeat center center;margin-right:10px;}
.page_nation .next {background:url(../image/page_next.png) no-repeat center center;margin-left:10px;}
.page_nation .nnext {background:url(../image/page_nnext.png) no-repeat center center;margin-right:0;}
.page_nation a.active {color:#000;font-weight:bold}
.page_nation .arrow:hover {border-color:#42454c; transition:.4s}


/* ====== 검색결과 ======================================================================================================= */
.search_result {position:relative; }
.search_bar {background:url(../image/ico_searchb.png) no-repeat 25px center; width:633px; text-align:left; padding:15px 25px 15px 80px; border:3px solid #33b8ff; border-radius:30px;  }
.search_bar input{font-size:20px; font-weight:300; color:#111; width:630px; }
.search_x{float:right; display:inline-block; background: transparent;position:relative; top:-22px }
.result_area{margin:50px; text-align:center; font-size:18px; letter-spacing: 1px}
.result_area strong {color:#33b8ff; font-weight:300}


/* ====== ad ======================================================================================================= */
/*ad1,2*/
.ad1wrap{width:1060px; margin:0 0 0; position:relative; overflow:hidden; background-color:#ffffff; padding: 15px 20px; }
/*.ad1wrap{width:1060px; margin:20px 0 0; position:relative; overflow:hidden; background-color:#f6f6f6; padding: 15px 20px; }*/

.ad1{ position:relative; width:635px; height:155px; font-family: '맑은 고딕', 'Malgun Gothic', sans-serif; float:left}
.ad2{ position:relative; width:300px; float:right}
.ad1box {position:relative; height:100%; width:635px}
.ad1box .thumb{position: absolute;left:0;top:0;}
.ad1box .thumb img{width:230px; height:155px;}
.ad1box .title{overflow: hidden; position:absolute; left:245px; top:0; width:380px; height:80px; padding: 5px 0 0;    font-size: 25px; font-weight: 700; line-height: 35px; font-weight:500;}
.ad1box .title a {letter-spacing:-0.03em; color:#000; text-decoration:none; display:-webkit-box; -webkit-line-clamp: 2;   -webkit-box-orient: vertical;}
.ad1box .summary{overflow: hidden; position:absolute; left:245px; top:85px; width:380px; height: 60px;padding: 5px 0 0;    font-size: 15px; line-height: 21px; font-weight:200;}
.ad1box .summary a {color: #888; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.ad1box .more {position: absolute; right: 10px; bottom: 3px; font-size: 14px; font-weight: 400; color: #e21919; text-decoration: none;}
/*.ad1box .more a:hover{text-decoration:underline}*/

/*ad5*/
.ad5{position:relative; overflow:hidden; width: 650px; font-size:15px; color:#777; font-weight:200;  margin-bottom:40px}
.ad5 li{position:relative; float: left; padding-left:19px; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; letter-spacing: 0; height: 33px; font-size: 18px; color: #000; font-weight: 300; line-height: 33px; text-align: justify;}
.ad5 li a:before {content: 'ㆍ'; color: #777; font-size: 24px; text-align: center; top: -3px; left: -6px; position: absolute}


/*ad6*/
.ad6{width:700px; position:relative; overflow:hidden;  margin-bottom:40px}
.ad6 li:nth-child(4n){margin-right:0}
.ad6 .item{overflow:hidden; display:inline-block; width:160px; height:auto; margin-right:15px}
.ad6 .subject{color:#11; font-size: 17px; margin-bottom:15px;  }
.ad6 .item .thumb {width:160px; height:110px;  margin-bottom:10px; }
.ad6 .item .thumb img{width:100%; height:100%; }
.ad6 .item .title {color:#111; font-size:15px;font-weight:200; line-height:20px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  word-wrap: break-word; white-space: normal; max-height:40px; }

/*ad7*/
.ad7{width:700px; position:relative; overflow:hidden; margin-bottom:20px }
.ad7 li:nth-child(3n) {margin-right:0}
.ad7 .item{overflow:hidden; display:inline-block; width:220px; height:auto; margin-right:15px; margin-bottom:20px}
.ad7 .subject{color:#11; font-size: 17px; margin-bottom:15px;  }
.ad7 .item .thumb {width:220px; height:160px;  margin-bottom:10px; }
.ad7 .item .thumb img{width:100%; height:100%; }
.ad7 .item .title {color:#111; font-size:15px;font-weight:200; line-height:20px;overflow:hidden;  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  word-wrap: break-word; white-space: normal; max-height:40px; }


/*ad12*/
.ad12{position:relative; overflow:hidden; margin-bottom: 30px; }
.ad12 .title {position:relative; overflow:hidden;}
.ad12 .title a {width:280px; font-size: 15px; color: #111; font-weight: 300; line-height: 20px;overflow:hidden;  text-overflow: ellipsis; white-space: nowrap; max-height: 20px; text-align: left; display: block; overflow: hidden;}
.ad12 li {padding-left:20px; margin-bottom:10px}
.ad12 .title a:before {content: '▶︎'; color: #00b8e9; font-size: 10px; text-align: center; top: 0px; left: 0px; position: absolute}

/*ad14*/
.ad14 {position:relative; overflow:hidden; margin-bottom:30px }
.ad14 li{display:inline-block; padding-bottom:10px;  }
.ad14_img { width:100px; height:60px; float:right;  }
.ad14_img img{ width:100%; height:100%; }
.ad14_con {float:left; margin-right:15px; width:181px; position:relative; top:10px }
.ad14_tit {width:181px; font-size:15px; color:#111; font-weight:300; line-height:20px ;overflow:hidden; max-height:40px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  word-wrap: break-word; white-space: normal;}

/*ad15*/
.ad15{background:#f3f3f3; padding:20px 15px 20px 25px; font-size:0; margin:20px 0}
.ad15 li{position:relative; width:calc(50% - 20px); display:inline-block; vertical-align:middle; padding:3px 10px}
.ad15 li a{display:block; font-size:16px; line-height:24px; font-weight:300; overflow: hidden; text-overflow: ellipsis;}
.ad15 li a:before{position:absolute; content:''; width:2px; height:2px; left:0; top:13px; text-align:left; background:#bbb}

/*ad15*/
.ad16{font-size:0}
.ad16 li{border-bottom:1px solid #f3f3f3}
.ad16 li a{display:block; padding:10px 0;}
.ad16_img, .ad16_t{display:inline-block; vertical-align:middle;}
.ad16_img{position:relative; width:32%; padding-bottom:20%; margin-right:15px; background:#f3f3f3}
.ad16_img img{position:absolute; top:0; left:0; width:100%; height:100%}
.ad16_t{font-size:14px; line-height:22px; max-height:44px; font-weight:300; width:calc(68% - 15px); word-break:keep-all}


/* ======글로벌인사이트======================================================================================================= */
/*국제리스트 하단*/
.listglobal_container{width:750px; position:relative; overflow:hidden; margin-bottom:15px }
.listglobal_container li{width:236px; margin-right:18px; float:left; }
.listglobal_container li:last-child{margin-right:0}
.listglobal_img {position:relative;overflow:hidden; width: 236px; height: 145px; cursor: pointer; }
.listglobal_img:hover img{  transform:scale(1.1); -webkit-transform:scale(1.1);  -moz-transform:scale(1.1);  -o-transform:scale(1.1); transition: all .5s ease-in-out;  }
.listglobal_img img{width:100%; height:100%}
.wrapper_g {opacity:0.9; transition: all .4s; border:2px solid #fff;
  width: 35px; height: 25px; border-radius: 100%; padding-top: 10px; position: relative; margin: 0 auto; top:-53px; right:10px; float:right; }
.listglobal_img:hover .wrapper_g {background: #33b8ff;}
.listglobal_img .btn_tri {width: 0; height: 0; border-style: solid;
  border-width: 7px 0 7px 14px; border-color: transparent transparent transparent #ffffff; margin: 0 auto; position: absolute; left: 13px;top: 10px;}
.listglobal_tit_area {max-width:100%; font-size:16px;line-height:20px; max-height:40px; color:#111; font-weight: 400; margin-top:15px;}
.listglobal_date_area {position:relative; font-size: 13px; color: #999; font-weight: 200; padding-top:10px; display:table-cell}



/*글로벌인사이트 리스트*/
.global_container{width:1100px; position:relative; display: block; overflow:hidden; margin-bottom:15px }
.global_container li{width:258px; margin-right:22px; margin-bottom:40px; float:left; overflow:hidden; }
.global_container li:nth-child(4n){margin-right:0}
.global_container .global_img {position:relative;overflow:hidden; width: 258px; height: 165px; cursor: pointer; }
.global_container .global_img:hover img{  transform:scale(1.1); -webkit-transform:scale(1.1);  -moz-transform:scale(1.1);  -o-transform:scale(1.1); transition: all .5s ease-in-out;  }
.global_container .global_img img{width:100%; height:100%}
.wrapper_g2 {opacity:0.9; transition: all .4s; border:2px solid #fff; width: 35px; height: 25px; border-radius: 100%; padding-top: 10px; position: relative; margin: 0 auto; top:-53px; right:10px; float:right; }
.global_img:hover .wrapper_g2 {background: #33b8ff;}
.global_img .btn_tri2 {width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 14px; border-color: transparent transparent transparent #ffffff; margin: 0 auto; position: absolute; left: 13px;top: 10px;}
.global_tit_area {max-width:100%; font-size:16px;line-height:20px; max-height:40px; color:#111; font-weight: 400; margin-top:15px;}
.global_date_area {position:relative; font-size: 13px; color: #999; font-weight: 200; padding-top:10px; display:table-cell}
.global_cate_area {font-size:15px; color:#666; font-weight: 400; letter-spacing: 1px; margin-top:15px}
.globalmore_btn {display:block; width:300px;  border:1px solid #dbdbdb; margin:0 auto 30px;}
.globalmore_btn a{display:block;padding:15px 0 16px;  font-family:'Montserrat',sans-serif; font-size:12px; text-align:center;  color:#111; font-weight:300}
.globalmore_btn a:hover, .globalmore_btn:focus {background-color: #33b8ff; color:#fff; transition: all .5s;}

/*미디어 타이틀*/
.global_media_title{position:relative; margin-bottom:30px;  }
.global_media_cate { display:inline-block; font-size:16px; font-weight:400}
.global_media_cate li{float:left;}
.global_media_cate li a{color:#a4a4a4; padding-right:26px}
.global_media_cate .on {color:#33b8ff; font-weight:400}
.global_media_cate li a:hover{color:#33b8ff; font-weight:400; }
.global_media_cate li:after {content: '|'; display: block; float:right; font-weight: 100; font-size: 12px; margin-top: 2px;
 margin-right:26px; color: #a4a4a4;}
.global_media_cate li:last-child:after{display:none}

/* loading class 추가 */
.loading_area{display:none; text-align: center; overflow: hidden; padding-top: 10px; padding-bottom: 10px;}

/* 210923 hmeil */

.logo{padding-top:39px}
.forces_main{max-width:1100px; margin:30px auto 0; font-size:0}
.forces_main_l, .forces_main_r{display:inline-block; vertical-align:top}
.forces_main_l{position:relative; overflow:hidden; width:calc(100% - 350px); margin-right:20px; background:url(//res.heraldm.com/heraldbiz/version01/www/military/images/military_top.jpg) center no-repeat; background-size:cover; height:364px}
.forces_main_l_title{padding:25px 30px 20px}
.forces_main_l_title svg{fill:#fff}
.forces_main_l_title_svg1{width:34px; height:26px; margin:10px 20px 0 0}
.forces_main_l_title_svg2{width:144px; height:24px; margin-right:10px}
.forces_main_l_title_svg3{width:172px; height:24px}
.forces_main_l_title_svg_col1{fill:#BCC44D}
.forces_main_swiper .swiper-slide{width:424px !important; height:260px; margin:0 10px; opacity:.5}
.forces_main_swiper .swiper-slide img{width:100%; height:100%;}
.forces_main_swiper_t_bg{position:absolute; top:0; left:0; width:100%; height:100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+53,0.8+89 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 53%, rgba(0,0,0,0.8) 89%, rgba(0,0,0,0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 53%,rgba(0,0,0,0.8) 89%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 53%,rgba(0,0,0,0.8) 89%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-9 */
}
.forces_main_swiper_t_bg span{position:absolute; bottom:15px; left:20px; right:20px; color:#fff; font-size:20px; font-weight:400; line-height:29px; letter-spacing:-0.5px; word-break:keep-all}
.forces_main_swiper .swiper-slide.swiper-slide-active{opacity:1}
.forces_main_swiper .swiper-controlbox{position:absolute; z-index:1; top:50%; width:100%; margin-top:-25px}
.forces_main_swiper .swiper-button-prev, .forces_main_swiper .swiper-button-next{width:50px; height:50px; top:0; margin:0; background:rgba(0,0,0,.6); border-radius:50%; transition:.2s}
.forces_main_swiper .swiper-button-prev{left:20px}
.forces_main_swiper .swiper-button-next{right:20px}
.forces_main_swiper .swiper-button-prev:after, .forces_main_swiper .swiper-button-next:after{display:none}
.forces_main_swiper .swiper-button-prev svg, .forces_main_swiper .swiper-button-next svg{width:50%; height:50%; fill:#fff}
.forces_main_swiper .swiper-button-prev svg{transform:rotate(-90deg)}
.forces_main_swiper .swiper-button-next svg{transform:rotate(90deg)}
.forces_main_swiper .swiper-slide.swiper-slide-active a{border:1px solid #bcc44d; display:block; position:absolute; top:0; left:0; right:0; bottom:0}
.forces_main_swiper .swiper-button-prev:hover, .forces_main_swiper .swiper-button-next:hover{background:#bcc44d}
.forces_main_r{width:330px}
.forces_main_r li{border-bottom:1px solid #f3f3f3}
.forces_main_r li a{display:block; padding:15px 0; transition:.2s}
.forces_main_r_li_t, .forces_main_r_li_img{display:inline-block; vertical-align:middle;}
.forces_main_r_li_t{width:calc(100% - 140px); padding:0 20px; font-size:15px; line-height:24px; max-height:48px; font-weight:300; letter-spacing:-0.5px; word-break:keep-all}
.forces_main_r_li_img{width:100px; height:60px}
.mil_vod{width:100%; height:380px; background:#f6f6f6; margin-bottom:60px;}
.mil_vod_box{width:1100px; margin:0 auto; padding:30px 0; font-size:500;border-top:1px solid #dbdbdb }
.mil_vod_box_tit{font-size:20px; font-weight:500; }
.mil_vod_container{width:1100px; position:relative; display: block; overflow:hidden; margin-top:25px}
.mil_vod_container .fst{ margin-left:0 }
.mil_vod_container li {width:247px;float:left; margin-left:32px  }
.milvod_img {width:247px; height:152px; position:relative;overflow:hidden; cursor: pointer;}
.milvod_img img{width:100%; height:100%}
.milvod_tit {position:relative; margin-top:15px; font-size:15px; line-height: 20px; max-height:40px; }
.mil_photo_bg{width:247px; height:152px; position: absolute; background-color: rgba( 0, 0, 0, 0.4 );}
.milvod_img .wrapper_g2 {opacity:0.9; transition: all .4s; border:2px solid #fff; width: 35px; height: 25px; border-radius: 100%; padding-top: 10px; position: relative; margin: 0 auto; top:-53px; right:12px; float:right; }
.milvod_img:hover .wrapper_g2 {background: #bcc44d;}
.milvod_img .btn_tri2 {width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 14px; border-color: transparent transparent transparent #ffffff; margin: 0 auto; position: absolute; left: 13px;top: 10px;}
.ch_ico{border-top:1px solid #dfdfdf; padding-top:15px; margin-top:15px}
.ch_ico span{font-size:15px;  position:relative; top:13px; left:13px}
.ch_ico img{border-radius:50%}

/* error page */
.error_page{padding-top:80px;padding-bottom:150px;text-align:center}
.error_page .errer_area{width:1100px;margin:0 auto}
.error_page .ico_error{display:inline-block;width:63px;height:63px}
.error_page .ico_error svg{fill:#23a5db}
.error_page .info_box{padding-top:58px}
.error_page .info_box .error_title{color:#000;font-size:38px;font-weight:300}
.error_page .info_box .error_text{margin-top:55px;color:#555;font-size:18px;line-height:28px;font-weight:300}
.error_page .info_box .error_text + .error_text{margin-top:20px}
.error_page .info_box .error_text a{color:#23a5db;text-decoration:underline}
.error_page .btn_box{margin-top:70px;text-align:center;font-size:0}
.error_page .btn_box .btn_before{display:inline-block;padding:0 25px;color:#333;font-size:16px;line-height:46px;border:1px solid #bbb;border-radius:5px;background:#fff}
.error_page .btn_box .btn_home{display:inline-block;margin-left:10px;padding:0 25px;color:#fff;font-size:16px;line-height:46px;border-radius:5px;background:#23a5db}
.error_page .recommend_area{margin-top:80px;padding:80px 0;background:#fafafa}
.error_page .recommend_area .recommend_list{width:1100px;margin:0 auto;font-size:0}
.error_page .recommend_area .recommend_item{position:relative;display:inline-block;width: calc(25% - 17px);vertical-align:top;border:1px solid #d9d9d9}
.error_page .recommend_area .recommend_item + .recommend_item{margin-left:20px}
.error_page .recommend_area .recommend_item a{display:block}
.error_page .recommend_area .recommend_item .img_thumb{overflow:hidden;display:block}
.error_page .recommend_area .recommend_item .img_thumb img{width:100%;height:100%}
.error_page .recommend_area .recommend_item .recommend_title{box-sizing:border-box;display:block;height:70px;padding:15px 20px}
.error_page .recommend_area .recommend_item .recommend_title em{overflow:hidden;font-style:normal;color:#333;font-size:14px;text-align:left;line-height:20px;display:-webkit-box; text-overflow:ellipsis;-webkit-box-orient:vertical;word-wrap:break-word;-webkit-line-clamp:2}
.error_page .recommend_area .recommend_item a:hover .img_thumb img{transition:.3s;transform:scale(1.1,1.1)}
.error_page .recommend_area .recommend_item a:hover .recommend_title{text-decoration:underline}

.btn_twitter{box-sizing:border-box;display:inline-block;width:38px;height:38px;padding:4px 5px;border-radius:100%;background:#000}
.btn_twitter svg{display:block;width:28px;fill:#e7e9ea}


.ethicwrap {width:90%; margin:50px auto 60px;}
.ethicwrap h3{margin-bottom:25px; font-size: 22px; font-weight:600; color:#333}
.ethicwrap .pretxt {color: #888; font-size: 14px;line-height:150%;font-weight: normal; background-color:#f0f0f0; border:1px solid #cccccc;padding:20px}
.ethictcon {color: #888; font-size: 14px;line-height:150%;font-weight: normal; margin-top:30px}
.ethictcon p {color:#1ba1da; font-size: 15px; font-weight:600; margin-bottom:5px; }
.ethictcon li {margin-bottom:20px; color: #666;}