
/* 공통 ================================== */
.gu_kv .kv_img_area{background-image: url("../../img/media/kv_media.jpg")}
.gu_sub_wrapper .gu_sub_contents .contents_inner{padding-top:0;}
.gu_sub_wrapper .gu_sub_contents .contents_inner .contents_title{margin: 0; padding: 160px 0 0;}
.img_box{padding-top:60px;}
.section:last-child{padding-bottom:160px;}


/* news ================================== */
#NEWS_LIST .ellipsis_line {-webkit-line-clamp: 3;max-height:90px;}
#NEWS_LIST .img_area {position:relative; border: 1px solid #e5e5e5; }
#NEWS_LIST .img_area .thumb {position:absolute;width:100%; height:100%;background-repeat:no-repeat; background-position:center center; background-size:cover;top:0;left:0;}
#NEWS_LIST .text_area .date {font-size:16px; color:#999999;}

/* news_main */
#NEWS_LIST .news_main {position:relative;}
#NEWS_LIST .news_main .text_area .main_title {margin:40px 0 20px; font-size:24px; line-height:40px; max-height: 80px; font-weight:700;}
#NEWS_LIST .news_main .text_area .main_title.ellipsis_line{-webkit-line-clamp: 2; }
#NEWS_LIST .news_list .text_area .box_title.ellipsis_line{-webkit-line-clamp: 2;}
#NEWS_LIST .news_main a:hover .text_area .main_title span {border-bottom:1px solid #222}
#NEWS_LIST .news_main .text_area .main_text {font-size:18px; line-height:30px; margin-bottom:30px; color:#555555;}

/* news_list */
#NEWS_LIST .news_list {margin-top:60px; padding:60px 0; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
#NEWS_LIST .news_list ul {font-size:0;}
#NEWS_LIST .news_list ul li {margin-bottom:40px;}
#NEWS_LIST .news_list ul li:last-child {margin-bottom:0;}
#NEWS_LIST .news_list ul li>a{font-size: 0;position: relative;display: block}
#NEWS_LIST .news_list ul li a > div {display:inline-block; vertical-align:top;}
#NEWS_LIST .news_list .text_area {padding-left:35px; width:calc(100% - 470px);-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#NEWS_LIST .news_list .text_area .box_title {margin:0 0 16px; font-size:20px; line-height:34px; color:#222; font-weight:700;}
#NEWS_LIST .news_list a:hover .text_area .box_title span {border-bottom:1px solid #222}
#NEWS_LIST .news_list .text_area .text {margin:0 0 25px; font-size:16px; line-height:30px; color:#555555;}
#NEWS_LIST .news_list .text_area .date {font-size:16px;}


/* news-view ================================== */
#NEWS_DETAIL{position:relative; word-break:keep-all;}
#NEWS_DETAIL .detail_top {border-bottom:1px solid #e5e5e5;padding-bottom:60px;}
#NEWS_DETAIL .detail_top .title {padding-bottom:30px; font-size:32px; line-height:46px; word-break:break-word;}
#NEWS_DETAIL .detail_top .short_content {font-size:18px; line-height:30px;color:#555;font-weight:400;padding-bottom:30px;}
#NEWS_DETAIL .detail_top .short_content_cn {font-size:18px; line-height:30px;color:#555;font-weight:500;padding-bottom:30px;}
#NEWS_DETAIL .detail_top .date {color:#222; display:inline-block; vertical-align:bottom; font-size:16px; line-height:30px;}
#NEWS_DETAIL .detail_top .new {color:#e35b0a;vertical-align:bottom; margin-left:15px;display: none}
#NEWS_DETAIL .detail_top .title{padding-bottom:30px;}
#NEWS_DETAIL .detail_middle {padding:60px 0 110px;}
#NEWS_DETAIL .detail_middle .text {font-size:16px; line-height:30px; color:#555;}
#NEWS_DETAIL .detail_middle .text > div{text-align:center;}
#NEWS_DETAIL .detail_middle .text > div.img_top{margin-bottom:60px;}
#NEWS_DETAIL .detail_middle .text > div.img_bottom{margin-top:60px;}
#NEWS_DETAIL .detail_middle .text > div img {max-width:100%;}
#NEWS_DETAIL .detail_middle .text p{font-family: "Plain",sans-serif; font-weight: 300; font-size:16px; margin-bottom:30px; color:#555;line-height:30px;}
#NEWS_DETAIL .detail_middle .text_cn p{font-family: "SDGothic",sans-serif; font-weight: 400; font-size:16px; margin-bottom:30px; color:#555; line-height:30px;}
#NEWS_DETAIL .detail_middle .text .box_copy{background-color:#F5F5F5; padding:30px 25px; font-size:16px; margin: 0 auto;min-width: 100%; width: 100% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#NEWS_DETAIL .detail_middle .text .title{font-size: 20px; padding-bottom: 30px; font-family: "Plain",sans-serif;  font-weight: 700;}
#NEWS_DETAIL .detail_middle .text .text_con{font-size:16px; line-height:30px;}
#NEWS_DETAIL .detail_bottom {font-size:16px; font-weight:300;}
#NEWS_DETAIL .detail_bottom .detail_btn_area {border-top:1px solid #444; border-bottom:1px solid #444;}
#NEWS_DETAIL .detail_bottom .detail_btn_area>div {color:#222;}
#NEWS_DETAIL .detail_bottom .detail_btn_area>div.no_data {padding:25px 38px;}
#NEWS_DETAIL .detail_bottom .detail_btn_area>div:first-child {border-bottom:1px solid #e1e1e1;}
#NEWS_DETAIL .detail_bottom .detail_btn_area>div a {display:inline-block; padding:25px 38px; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#NEWS_DETAIL .detail_bottom .detail_btn_area>div img {vertical-align:middle; width:16px; height:16px; padding-right:38px;}
#NEWS_DETAIL .detail_bottom .detail_btn_area>div span {vertical-align:middle;max-width:calc(100% - 54px); display:inline-block;}
#NEWS_DETAIL .detail_bottom .detail_btn_area>div.no_data span {color:#999;}
#NEWS_DETAIL .detail_bottom .btn_area {text-align:right; margin-top:40px;}
#NEWS_DETAIL .detail_bottom .btn_area a{background: #fff; border-color: #bcbcbc; height:56px; padding: 0 14px; min-width:96px;}
#NEWS_DETAIL .detail_bottom .btn_area .gu_btn:hover{background: #e35b0a;border-color:#e35b0a;color:#fff; height:56px; padding : 0 14px; min-width:96px;}
#NEWS_DETAIL .detail_bottom .btn_area span {top : 33%;}

#NEWS_DETAIL .gu_detail_file{padding: 25px 40px;}
#NEWS_DETAIL .gu_detail_file .gu_btn_down{padding: 16px 0px;}
#NEWS_DETAIL .gu_detail_file .gu_btn_down:hover {color: #e35b0a; background:none;}
#NEWS_DETAIL .gu_detail_file .gu_btn_down:hover span:before{background-image:url(../../img/common/icon/ico_down_orange_box.png);}

/* stories ================================== */
#MEDIA_STORIES .gu_tab_depth4 ul li{padding-bottom:0;}
#STORIES_LIST {margin-top: -60px; }
#MEDIA_STORIES ul li {border-bottom:1px solid #e5e5e5; padding-bottom:60px;}
#MEDIA_STORIES ul li:last-child {border-bottom:0;}
#MEDIA_STORIES .text_area .box_title {font-size:28px; line-height:36px; margin-top:30px;}
#MEDIA_STORIES .text_area .text {font-size:18px; line-height:28px;margin:15px 0 25px;}
#MEDIA_STORIES .bottom .date {float:left; font-size:16px;}
#MEDIA_STORIES .bottom .btn_area {float:right;}
#MEDIA_STORIES .text_area .more_btn{display:none;}
#MEDIA_STORIES .gu_video_box video{width:100%;}

/* hd story */
#STORIES_LIST ul li:first-child .gu_video_box{margin-top:120px;}
#STORIES_LIST .text_area {min-height: 130px;}

/* customer story */
#MEDIA_STORIES .gu_tab_depth4 ul li{width:50%;}
#MEDIA_STORIES .section .sec_inner .btn_area{clear:none;}


/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) {
    .contents_inner .section, .contents_inner .section_top {margin: 0;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_title{padding:120px 0 0}
    .section:last-child{padding-bottom:160px;}
    #NEWS_DETAIL .detail_middle .text > div img{width:100%;}
}


/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {

    .contents_inner .section, .contents_inner .section_top {margin: 0 50px;}
    #NEWS_LIST br{display: block;}
    #NEWS_DETAIL br{display:block;}
    .gu_sub_wrapper .gu_sub_contents .contents_inner{max-width: 960px;}
    .section:last-child{padding-bottom:100px;}

    #SEARCH_BOX .fclear .sort_area{margin-bottom:0;}
    #SEARCH_BOX .sort_area .sort_name a{font-size:16px; padding: 6px 25px 14px 0;}
    #SEARCH_BOX .sort_area .sort_name:before{bottom:16px;}
    #SEARCH_BOX .sort_area .inputbox .inputbox_inner{width:165px; height:44px;}
    #SEARCH_BOX .sort_area .inputbox .inputbox_inner input{font-size:14px;}
    #SEARCH_BOX .sort_area .inputbox a.btn_search{width:44px; height:44px; margin-left:0;}
    #SEARCH_BOX .sort_area .inputbox a.btn_search img{width:18px; height:18px; padding:14px;}

    #NEWS_LIST .img_area>img{width: 100%}
    #NEWS_LIST .news_list ul li a > div.img_area{width: 45%}
    #NEWS_LIST .news_list .text_area{width: 55%;padding-left: 16px}
    #NEWS_LIST .news_main .text_area .main_title{font-size:20px; line-height:30px; margin-top:25px; margin-bottom:30px; max-height: 60px;}
    #NEWS_LIST .news_main .text_area .main_text{font-size:16px; line-height:24px;}
    #NEWS_LIST .news_list .text_area .box_title{font-size:18px; line-height:24px; margin: 0 0 18px;}
    #NEWS_LIST .news_list .text_area .text{font-size:14px; line-height:24px;margin: 0 0 20px;}
    #NEWS_LIST .news_list{margin-top:60px; padding:60px 0;}
    #NEWS_LIST .news_list .text_area .date{font-size:14px; line-height:24px;}
    #NEWS_LIST .gu_paging{margin-top:35px;}
    #NEWS_LIST .text_area .date {font-size:14px; line-height:24px;}

    #MEDIA_STORIES .text_area .box_title{font-size:22px;}
    #MEDIA_STORIES .text_area .text{font-size:15px; line-height:22px; margin-top:18px;}
    #MEDIA_STORIES .bottom .date,#STORIES_LIST .btn_area .btn_more{font-size: 13px;}
    #MEDIA_STORIES .btn_area .btn_more div{width:10px; height:10px; margin-left:12px;}
    #MEDIA_STORIES .btn_area .btn_more div span:first-child{top:5px;}
    #MEDIA_STORIES .btn_area .btn_more div span:last-child{left:5px;}
    #MEDIA_STORIES ul li{padding-bottom:45px;}
    #NEWS_DETAIL .detail_top .title{font-size:24px; line-height:32px; padding-bottom:15px;}
    #NEWS_DETAIL .detail_top .short_content, 
    #NEWS_DETAIL .detail_top .short_content_cn{font-size:18px; line-height:24px;}
    #NEWS_DETAIL .detail_top .date,#NEWS_DETAIL .detail_top .new{font-size:14px; line-height:24px;}
    #NEWS_DETAIL .detail_top{padding-bottom:50px;}
    #NEWS_DETAIL .detail_middle{padding:50px 0 75px;}
    #NEWS_DETAIL .detail_middle img{width:100%;}
    #NEWS_DETAIL .detail_middle .text > div.img_top{margin-bottom:40px;}
    #NEWS_DETAIL .detail_middle .text > div.img_bottom{margin-top:40px;}
    #NEWS_DETAIL .detail_middle .text .box_copy{padding:25px 20px; font-size:13px;}
    #NEWS_DETAIL .detail_middle .text .title{font-size:16px; padding-bottom:20px;}
    #NEWS_DETAIL .detail_middle .text .text_con, #NEWS_DETAIL .detail_middle .text p{font-size:14px; line-height:24px;}
    #NEWS_DETAIL .detail_middle .text p{margin-bottom:25px;}
    #NEWS_DETAIL .detail_bottom{font-size:14px;}
    #NEWS_DETAIL .detail_bottom .detail_btn_area>div.no_data,#NEWS_DETAIL .detail_bottom .detail_btn_area>div a{padding:20px 0;}
    #NEWS_DETAIL .detail_bottom .btn_area{margin-top:28px;}
    #NEWS_DETAIL .detail_bottom .btn_area a {min-width:80px; height:42px;}
    #NEWS_DETAIL .detail_bottom .btn_area span{top:23%}
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    .contents_inner .section, .contents_inner .section_top {margin: 0 20px;}

    /* news ================================== */
    .gu_sub_wrapper .gu_sub_contents .contents_inner .contents_title {padding: 36px 0; }
    .section:last-child {padding-bottom:100px;}
    #NEWS_LIST .news_main .text_area .main_title {font-size: 20px; margin: 25px 0 18px; line-height: 30px;}
    #NEWS_LIST .news_list .text_area .box_title{margin: 0 0 18px;}
    #NEWS_LIST .news_main .text_area .main_text {font-size:16px; line-height:24px; margin-bottom:25px;}
    #NEWS_LIST .news_main .text_area .date {font-size:14px; line-height:24px;}
    #NEWS_LIST .news_list {margin-top: 36px; padding: 36px 0;}
    #NEWS_LIST .news_list ul li a > div {display:block; width: 100%; }
    #NEWS_LIST .news_list .text_area {padding-left:0; margin-top:15px;}
    #NEWS_LIST .news_list ul li a > div.img_area{width: 100%}
    #NEWS_LIST .news_list .text_area{width: 100%;}

    /* news-view ================================== */
    #NEWS_DETAIL .detail_top .title { font-size: 24px; line-height:30px;padding-bottom:25px}
    #NEWS_DETAIL .detail_top .short_content, 
    #NEWS_DETAIL .detail_top .short_content_cn{font-size:18px; line-height:24px;}
    #NEWS_DETAIL .detail_top {padding-bottom: 60px;}
    #NEWS_DETAIL .detail_middle {padding: 40px 0 60px;}
    #NEWS_DETAIL .detail_middle .text .box_copy {padding: 23px 17px; font-size: 14px; line-height:24px;}
    #NEWS_DETAIL .detail_middle .text .title {font-size: 14px; padding-bottom:17px;}
    #NEWS_DETAIL .detail_middle .text .text_con, #NEWS_DETAIL .detail_middle .text p {font-size: 14px; line-height: 24px;}
    
    #NEWS_DETAIL .gu_detail_file{padding:25px 0;}

    /* stories ================================== */
    #MEDIA_STORIES .text_area .box_title {font-size:18px; line-height:30px; margin-top:24px;}
    #MEDIA_STORIES .text_area .text {font-size: 15px; line-height: 22px; margin: 15px 0 0;}
    #MEDIA_STORIES .text_area .text p{ overflow: hidden; margin-bottom:15px;}
    #MEDIA_STORIES .text_area .more_btn{display:block; }
    #MEDIA_STORIES .text_area .more_btn a{font-size:12px; color:#999}
    #MEDIA_STORIES .text_area .bottom{margin-top:21px;}
    #MEDIA_STORIES .bottom .date, #STORIES_LIST .btn_area .btn_more {font-size: 12px;}
    #MEDIA_STORIES .gu_paging{margin-top:0;}
    #NEWS_DETAIL .detail_bottom .btn_area span{top:23%}
    
}
