/*reset*/
html{font-size: 16px; color: #333;}
body{background: #f2f4f7; font-size: 1rem;}

/* IR 효과 */
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_so {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

/* clearfix */
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: '';line-height: 0;}
.clearfix:after {clear: both;}

a:hover{color: #2abcb8;}
h1, h2, h3, h4, h5{font-size: 1rem; font-weight: 700; color: #333;}

.main-container a:hover{color: #26bcb7;}


.site-head{ background: #fff;}
.util{background: #f2f4f7}
.section1{}

/* news */
.newsbox1{width: 43.5rem; background: #fff; border: 1px solid #dee3eb; height: 33.625rem; float: left;}
.newsbox1 .tit{height: 3.0625rem; line-height:3.0625rem;  border-bottom: 1px solid #ebeef3;}
.newsbox1 .tit h3{font-size: 1rem; font-weight: 700; padding-left: 1.25rem; letter-spacing: -0.06rem;}
.p_num{ position: absolute; right: 6.75rem; top: 0; font-size: 0.8125rem; ‬}

.arrobox{position: absolute; right: 0; top: 0;}
.arrobox li{float: left; border-left: 1px solid #ebeef3; height: 3.0625rem;}
.arrobox li a{color: #6b6c6e; display: block; transition: all .3s; width: 2.75rem; height: 3.0625rem;}
.arrobox li a:hover{background: #f2f4f7;}
.l_arr a:before{content: ''; display: block; background:url(../images/l_arrimg.png) no-repeat center / 12px 20px;  width: 2.75rem; height: 3.0625rem;}
.r_arr a:before{content: ''; display: block; background:url(../images/r_arrimg.png) no-repeat center / 12px 20px;  width: 2.75rem; height: 3.0625rem;}
.newsbox1 .group_news{ padding: 1.25rem; padding-bottom: 0; }

.newsbox1 .group_news .container2{border-bottom: 1px solid #ebeef3; }
.newsbox1 .group_news .bn{border-bottom: 0 none;}
.newsbox1 .group_news .box_sector{width: 13.25rem; float: left; padding-top: 0.25rem; }
.newsbox1 .group_news .box_sector a{display: block;}
.newsbox1 .group_news .box_sector a .thumb{display: block; width: 13.25rem; height:7.8125rem ;  box-sizing: border-box;  margin-bottom:1rem; background: #f2f4f7; border: 1px solid #dee3eb  }
.newsbox1 .group_news .box_sector a .thumb img{width: 100%; height: 100%;  }
.newsbox1 .group_news .box_sector a:hover .thumb img{width: 100%;  opacity: 0.8; }
.newsbox1 .group_news .box_sector a strong{ display: block; font-size:0.9375rem; font-weight: 400; line-height: 1.4rem; letter-spacing:-0.08rem; word-break: keep-all; padding-left:0.3125rem; }
.newsbox1 .group_news .news_list{ float: left; padding-left: 40px;}
.newsbox1 .group_news .news_list ul{}
.newsbox1 .group_news .news_list li{ 
    margin-bottom: 1.4375rem; 
    text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.newsbox1 .group_news .news_list li a{ font-weight: 700; color: #333; letter-spacing: -0.06rem; }
.newsbox1 .group_news .news_list li a:hover{color: #27c9c3}

.right_box1{float: right; width: 28.375rem; } 
.right_box1 .dailyqtbox{ border: 1px solid #dee3eb; background: #fff; height:19.6875rem; box-sizing: border-box; margin-bottom: 0.625rem;}
.right_box1 .dailyqtbox .tit{
    
    position: relative;
    height: 3.0625rem;
    line-height: 3.0625rem;
    border-bottom: 1px solid #ebeef3;
}

.more_btn_new a{display: block; position: absolute; right: 0; top: 0; width: 2.75rem; height:3.0625rem; border-left: 1px solid #ebeef3; transition: all .3s; }
.more_btn_new a:before{content: '';  display: block; background:url(../images/more_btn.png) no-repeat center / 18px 18px;   width: 2.75rem; height:3.0625rem; }
.more_btn_new a:hover{ background: #f2f4f7}

.dailyqtboxin{ padding: 1.25rem;}
.dailyqtboxin .imgbox{}
.dailyqtboxin .imgbox a{display: block; background: #f2f4f7; position: relative; height: 14.1875rem; box-sizing: border-box; border: 1px solid #dee3eb;}
.dailyqtboxin .imgbox a:after{content: ''; position:absolute; background:linear-gradient(360deg, rgba(0,0,0,.8), rgba(0,0,0,0)); width: 100%; height: 65px; left: 0; bottom: 0;}
.dailyqtboxin .imgbox a img{opacity: 1; transition: all .3s; width: 100%; height: 100%;}
.dailyqtboxin .imgbox a:hover img{opacity: 0.8;}
.dailyqtboxin .imgbox a strong{ position: absolute; left: 50%; bottom: 1.25rem; color: #fff; transform: translateX(-50%); z-index: 3;}


.right_box1 .dailyqtbox .tit h3{font-size: 1rem; font-weight: 700; padding-left: 1.25rem; letter-spacing: -0.06rem;}
.right_box1 .Wordbox{ border: 1px solid #dee3eb; background: #fff; height: 13.1875rem;}
.right_box1 .Wordbox .tit{
     position: relative;
    height: 3.0625rem;
    line-height: 3.0625rem;
    border-bottom: 1px solid #ebeef3;
}
.right_box1 .Wordbox .tit h3{font-size: 1rem; font-weight: 700; padding-left: 1.25rem; letter-spacing: -0.06rem;}
.right_box1 .Wordbox .tit span{font-size: 0.8125rem; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); color: #666;}
.right_box1 .Wordbox p{
    text-align: center; font-size: 0.9375rem; letter-spacing: -0.08rem; line-height: 1.5625rem; word-break: keep-all; 
    padding: 1.5625rem 1.5625rem 0 1.5625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    word-break: keep-all;
}
.right_box1 .Wordbox .verse{font-size: 0.875rem; margin-top: 0.625rem;}


.section2{ margin-top: 0.625rem;}
.storybox{position: relative; width:43.5rem; height: 32rem; float: left; box-sizing: border-box; background: #fff; border: 1px solid #dee3eb;}
.storybox .tit{position: relative;
    height: 3.0625rem;
    line-height: 3.0625rem;
    border-bottom: 1px solid #ebeef3;}
.menu_tab{float: left; padding-left: 1.25rem;}
.menu_tab li{float: left; font-size: 1rem; font-weight: 700;  letter-spacing: -0.06rem;}
.menu_tab li a{position: relative; padding-left: 0.5rem;  padding-right: 0.5rem; display: block;  font-weight: 400;}
.menu_tab li.selected a{ color: #2abcb8; font-weight: 700;}
.menu_tab li.selected a:after{content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #2abcb8}
.storybox .listbox{margin: 13px; overflow: hidden;}
.storybox .listbox ul li{float: left; margin: 5px; width: 212px;}
.storybox .listbox ul li .img{ background: #f2f4f7; height:125px; border: 1px solid #dee3eb; box-sizing: border-box; margin-bottom: 15px }
.storybox .listbox ul li .img img{width: 100%; height: 100%;}
.storybox .listbox ul li p{ 
    margin-bottom: 20px; padding: 0 5px; line-height: 1.4rem; letter-spacing: -0.06rem; font-size: 0.9375rem;
        overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: keep-all;    
}

.right_box2{float: right; width: 28.375rem; } 

.ccmchart{float: left; width: ; box-sizing: border-box;  background: #fff; border: 1px solid #dee3eb; height: 32rem; width: 15.875rem;}
.ccmchart .tit{position: relative;
    height: 3.0625rem;
    line-height: 3.0625rem;
    border-bottom: 1px solid #ebeef3;}
.ccmchart .tit h3{font-size: 1rem; font-weight: 700; padding-left: 1.25rem;}
.ccmchart span{ font-size: 0.8125rem; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); color: #666;}
.ccmchart .chart_list li{border-bottom: 1px solid #ebeef3; }
.ccmchart .chart_list li a{display: block; position: relative; padding: 20px 0; transition: all 0.3s;}
.ccmchart .chart_list li a:hover{background: #f2f4f7;}
.ccmchart .chart_list li a .num{display: block; position: absolute; left: 17px; top: 25px; color: #333; font-weight: 700; font-size: 0.875rem;}
.ccmchart .chart_list li a .img{margin-left: 40px;  width: 42px; height: 42px; float: left; }
.ccmchart .chart_list li a .img img{width: 100%; height: 100%; display: block;}
.ccmchart .chart_list li a dl{ margin-left: 18px; float: left; width: 130px;}
.ccmchart .chart_list li a dt{font-size:0.8125rem; letter-spacing: -0.06rem; font-weight: 700; display: block; text-overflow: ellipsis;white-space: nowrap; overflow: hidden; padding-bottom: 5px; }
.ccmchart .chart_list li a dd{font-size:0.8125rem; color: #888888; letter-spacing: -0.06rem; }
.ccmchart .ccm_tab{}
.ccmchart .ccm_tab li{float: left; width: 50%; box-sizing: border-box; text-align: center;}
.ccmchart .ccm_tab li.selected a{ background: #f2f4f7}
.ccmchart .ccm_tab li a{display: block;   height: 46px; line-height: 46px; font-size: 0.875rem; }

.right_box2 .banner{width: 11.9375rem; float: right;}

.section3{margin-top: 0.625rem;}
.tvbox{ box-sizing: border-box;  background: #fff; border: 1px solid #dee3eb; position: relative;  }
.tvbox .tit{position: relative;
    height: 3.0625rem;
    line-height: 3.0625rem;
    border-bottom: 1px solid #ebeef3;}
.tvbox .tit h3{float: left; font-size: 1rem; font-weight: 700; padding-left: 1.25rem; letter-spacing: -0.06rem;}
.tvbox_in{ margin: 20px; overflow: hidden;}
.tvbox .l_img{ width:443px; float: left; position: relative; margin-right: 5px; }
.tvbox .l_img a{display:block; height: 246px; border: 1px solid #dee3eb; background:#000; box-sizing: border-box;  }
.tvbox .l_img a strong{ 
    position: absolute; left: 20px; bottom:45px; width: 340px; color: #fff;  font-weight: 700;
overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: keep-all;
    font-size: 18px;
    z-index: 100;
}
.tvbox .l_img a span{ position: absolute; left: 20px; bottom: 20px; color: #fff; font-size:0.8125rem; z-index: 101; }
.tvbox .l_img a:after{content: ''; width: 100%; height: 180px; position: absolute; left: 0; bottom: 0; background: linear-gradient(360deg, rgba(0,0,0,.8), rgba(0,0,0,0));}
.tvbox .l_img a img{width: 100%; height: 100%; display: block;}

.tv_list{float: left;}
.tv_list li{float: left; margin: 0 5px; width: 213px;}
.tv_list li a{display: block;  position: relative;}
.tv_list li a:hover span{color: #666;}
.tv_list li .img{ height: 130px; border: 1px solid #dee3eb ; box-sizing: border-box; background: #f2f4f7; margin-bottom: 12px;   }
.tv_list li .img img{width: 100%; height: 100%;}
.tv_list li strong{
    height: 38px;
    padding-left: 5px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: keep-all;
    font-size: 0.9375rem;
    
}
.tv_list li ul.info{ padding-top: 10px; padding-left: 5px;} 

.tv_list li ul.info li {float: none; font-size: 0.8125rem; color: #666; letter-spacing: -0.06rem; margin: 0; padding-bottom: 5px;} 




.newsbox1 .swiper-button-prev1 {
    color: #888;
    font-family: 'FontAwesome';
    background: none;
    font-size: 35px;
    position: absolute;
    
    right: 44px;
    top: 0px;
    width: 44px;
    height: 49px;
    line-height: 49px;
    text-align: center;
    border: 1px solid #ebeef3;
    border-bottom: 0 none;
    border-top: 0 none;
    border-right: 0 none;
    z-index: 100;
}

.newsbox1 .swiper-button-next1 {
       color: #888;
    font-family: 'FontAwesome';
    background: none;
    font-size: 35px;
    position: absolute;
    
    right: 0px;
    top: 0px;
    width: 44px;
    height: 49px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #ebeef3;
     z-index: 100;
    border-bottom: 0 none;
    border-top: 0 none;
    border-right: 0 none;
}



.swiper-button-prev1.swiper-button-disabled , .swiper-button-next1.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;    
}

.storybox .swiper-button-prev2{
    color: #888;
    font-family: 'FontAwesome';
    background: none;
    font-size: 35px;
    position: absolute;
    
    right: 44px;
    top: 0px;
    width: 44px;
    height: 49px;
    line-height: 49px;
    text-align: center;
    border: 1px solid #ebeef3;
    border-bottom: 0 none;
    border-top: 0 none;
    border-right: 0 none;
    z-index: 100;
}

.storybox .swiper-button-next2 {
       color: #888;
    font-family: 'FontAwesome';
    background: none;
    font-size: 35px;
    position: absolute;
    
    right: 0px;
    top: 0px;
    width: 44px;
    height: 49px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #ebeef3;
     z-index: 100;
    border-bottom: 0 none;
    border-top: 0 none;
    border-right: 0 none;
}

.tvbox .swiper-button-prev3{
    color: #888;
    font-family: 'FontAwesome';
    background: none;
    font-size: 35px;
    position: absolute;
    
    right: 44px;
    top: 0px;
    width: 44px;
    height: 49px;
    line-height: 49px;
    text-align: center;
    border: 1px solid #ebeef3;
    border-bottom: 0 none;
    border-top: 0 none;
    border-right: 0 none;
    z-index: 100;
}

.tvbox .swiper-button-next3 {
       color: #888;
    font-family: 'FontAwesome';
    background: none;
    font-size: 35px;
    position: absolute;
    
    right: 0px;
    top: 0px;
    width: 44px;
    height: 49px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #ebeef3;
     z-index: 100;
    border-bottom: 0 none;
    border-top: 0 none;
    border-right: 0 none;
}

@media (max-width:1290px){
    .newsbox1,.storybox{width: 60%;}
    .right_box1,.right_box2{width: 39%;}
    .storybox .listbox ul li{width: 30%; margin: 1.6%;}
    .ccmchart{width: 100%;}
    .newsbox1 .group_news .news_list{padding-left: 20px; width: 55%;}
    .newsbox1 .group_news .news_list li a{font-size: 15px;}
    .right_box2 .banner{display: none;}
    .ccmchart .chart_list li a dl{width: 70%}
    .newsbox1, .storybox{overflow: hidden;}
    
}
@media (max-width:1200px){
    .tvbox .l_img{width: 100%; float: none; clear: both;}
    .tvbox .l_img a{width: 100%; height: 400px;}
    .tv_list{float: none; clear: both; margin-top: 0.5%;}
    .tv_list li{width: 33%; margin: 0; margin-right:0.5%;}
    .tv_list li:nth-child(3){ margin: 0;}
    
}



@media (max-width:900px){
    .newsbox1{float: none;  width: 100%;}
    .right_box1{clear: both;  float: none; width: 100%; margin-top: 10px;}
    .newsbox1 .group_news .news_list li a{font-size: 16px;}
    .newsbox1 .group_news .news_list{padding-left: 40px;}
    .dailyqtboxin .imgbox a{
        height: 24.1875rem;    
    }
    .right_box1 .dailyqtbox{height: auto;}
    .right_box1 .Wordbox{height: auto; padding-bottom: 30px;}
    .right_box2{width: 100%; clear: both; float: none; margin-top: 10px;}
    .storybox{width: 100%; float: none; clear: both;}
}

@media (max-width:768px){
    .newsbox1 .group_news{padding: 15px; padding-bottom: 0;}
    .newsbox1 .group_news .box_sector{width: 100%;}
    .newsbox1 .group_news .box_sector a .thumb{height: 170px; width: 100%;}
    .newsbox1 .group_news .news_list{padding-left: 0; width: 100%}
    .newsbox1{height: 34.5rem;}
    .newsbox1 .tit h3{font-size: 1.125rem; padding-left: 15px;}
    .newsbox1 .group_news .box_sector a strong{padding-left: 0;  padding-bottom: 24px; border-bottom: 1px solid #ddd; margin-bottom: 24px; font-size: 16px;}
    .newsbox1 .group_news .news_list li{ margin-bottom: 1.1rem;}
    .newsbox1 .group_news .container2{border-bottom: 0 none;}
    .dailyqtboxin{padding: 15px;}
    .dailyqtboxin .imgbox a{height: 200px}
    .right_box1 .dailyqtbox .tit h3{font-size: 1.125rem; padding-left: 15px;}
    .right_box1 .Wordbox .tit h3{font-size: 1.125rem; padding-left: 15px;}
    .storybox .listbox ul li{width: 46.8%}
    .storybox .listbox ul li .img{height: 110px; margin-bottom: 10px;}
    .storybox{height: 40rem;}
    .r_arr a:before{background:url(../images/r_arrimg.png) no-repeat center / 8px}
    .l_arr a:before{background:url(../images/l_arrimg.png) no-repeat center / 8px}
    .more_btn_new a:before{background:url(../images/more_btn.png) no-repeat center / 12px}
    .menu_tab{ padding-left: 15px;}
    .ccmchart .tit h3{font-size: 18px; padding-left: 15px;}
    .storybox .listbox ul li p{margin-bottom: 15px;}
    .ccmchart .chart_list li a dt{font-size: 16px; font-weight: 400;}
    .tvbox .tit h3{display: none;}
    .tvbox_in{margin: 15px;}
    .tvbox .l_img{ margin-right: 0; float: none; clear: both;}
    
    .tvbox .l_img a strong{width: 280px;}
    .tvbox .l_img a{width: 100%; height: 200px;}
    .tvbox .l_img a strong{bottom: 35px;}
    .tvbox .l_img a span{bottom: 15px;}
    .menu_tab li a{font-size: 18px;}
    .tv_list li{ margin: 0; margin-right: 1%; width: 49.5%; margin-top: 1%;}
    .tv_list li a{width: 100%;}
    .tv_list li:nth-child(2){margin-right: 0;}
    .tv_list li:nth-child(3){display: none;}
    .tv_list li .img{height: 100px;}
    .tv_list li ul.info{top: 160px;}
    .tv_list li ul.info li{padding-bottom: 3%; width: 100%;}
}