@charset "utf-8";

body{word-break:keep-all;}

/* 서브페이지 키비쥬얼 */
#INTRO_TI #SUB_KEYVISUAL .gu_sub_top .kv_img_area{background:url('../../images/intro/technology-innovation/KV-intro-technology-innovation.jpg') no-repeat center/cover;}


/* #TI_RND */
#TI_RND .gu_contents_wrap .gu_grid_sm .block{margin-bottom:144px;}
#TI_RND .gu_contents_wrap .gu_grid_sm .block:last-child{margin-bottom:161px;}
#TI_RND .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .first, #TI_RND .gu_contents_wrap .gu_grid_sm .block1 .gu_right_grid .second{
    width:100%; overflow:hidden;
}
#TI_RND .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .first:after, #TI_RND .gu_contents_wrap .gu_grid_sm .block1 .gu_right_grid .second:after{
    content:''; display:block; clear:both;
}

#TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .desc .title{font-size:24px; line-height:40px; margin-bottom:8px;}
#TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .desc .text{font-size:18px; line-height:32px; color:#444;}
#TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .area{width:47%; float:left; margin-right:6%; box-sizing:border-box;}
#TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .right{margin-right:0;}
#TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .area .media{margin-bottom:32px;
    position:relative; overflow:hidden; }
#TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .media img{width:100%;}
#TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .media .play_btn{width:40px; height:40px;
    position:absolute; right:14px; bottom:14px; }
#TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .media .play_btn .mobile{display:none;}

#TI_RND .gu_contents_wrap .gu_grid_sm .block1 .gu_right_grid .first{margin-bottom:82px;}
#TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .media.video_area .play_btn {bottom: 65px;right: 4px;display: none !important;}

.swiper-container{width: 100%; height: 100%;}
.swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:0}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:not(first-child){margin:0}
#TI_RND .swiper-pagination-bullet {
    width:28px; height:3px; background-color:rgba(255,255,255,.5); opacity:1;
    border-radius:0; text-indent:-9999px; margin-right:4px;
    bottom:0;
}

#TI_RND .swiper-pagination-bullet-active{background-color:#F4F4F4;}

#TI_RND .swiper-pagination-bullet:before {
    content: '';
    display: inline-block;
    position: absolute;
    height: 20px;
    top: -300%;
    left: 0;
    width: 100%;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {position: relative;}




/* 팝업 */
.popup{ position:fixed; width:calc(100% - 40px); height:100%;left:0;right:0;top:0;bottom:0;z-index:999; display:none; margin:0 20px;}
.popup .dim{position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1000; background-color:rgba(0,0,0,.9);}
.popup .pop_inner{position: absolute; left: 50%; top:50%; z-index: 1001;
    -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    width:100%; max-width:1116px;}
.popup a.btn_close_pop{ position:absolute;top:-49px;right:0;}
.popup a.btn_close_pop:before{content:''; position:absolute;top:0;right:0;background:url("../../images/common/ico_close_white.png") no-repeat 0 0 / contain;width:24px;height:24px;}
.popup a.btn_close_pop:hover:before{background:url("../../images/common/ico_close_blue.png") no-repeat 0 0 / contain;}

.popup .pop_inner .video_box .video_player {
    width: 100%;
    background: #000;
}

.popup .pop_inner .subtitle_box{color:#fff; padding-top:50px; position:relative; overflow:hidden;}
.popup .pop_inner .subtitle_box>div{float:left;}
.popup .pop_inner .subtitle_box:after{content:''; display:block; clear:both;}
.popup .pop_inner .subtitle_box .video_name{width:24%; font-size:32px;}

.popup .pop_inner .subtitle_box .sub_area{width:76%; font-size:18px; line-height:32px;  position:relative; height:100%; display:block; overflow:hidden;}
.popup .pop_inner .subtitle_box .sub_area > .custom_scroll_content::-webkit-scrollbar{visibility: hidden; }
.has-scrollbar .custom_scroll_content::-webkit-scrollbar{visibility: visible;}
.popup .pop_inner .subtitle_box .sub_area > .custom_scroll_content{position:relative; bottom:0; top:0; left:0; right:0; height:100%; max-height:110px; overflow:scroll; overflow-x:hidden; }

.popup .pop_inner .subtitle_box .sub_area > .pane{position:absolute; width:5px; right:6px; top:0px; bottom:0; visibility:hidden\9; opacity:1;
    -webkit-transition: .2s; -moz-transition : .2s; -o-transition : .2s; transition: .2s; }
.popup .pop_inner .subtitle_box .sub_area .pane .slider{position: relative; margin: 0 1px; padding:5px 0;  box-sizing: border-box; min-height:48px;  }
.popup .pop_inner .subtitle_box .sub_area > .pane > .slider:after{content:""; display: block; width:100%; height:100%; background:rgba(255,255,255,0.6);}
.popup .pop_inner .subtitle_box .sub_area:hover > .pane, .pane.active, .pane.flashed{visibility : visible\9; opacity: 0.99;}








/* #TI_DIGITAL */
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block{margin-bottom:121px;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block:first-child{margin-bottom:159px;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block:last-child{margin-bottom:162px;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .text{font-size:22px; line-height:36px; margin-bottom:64px;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .text span{display:block; position:relative; padding-left:20px;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .text span:before{content:'·'; display:inline-block; position:absolute; left:0; top:0%;
font-size:26px;}

/* block0 */
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0{width:100%;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0 .gu_right_grid .text{font-size:22px; line-height:36px; margin-bottom:102px;word-break:break-all}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0 .gu_right_grid .img .desktop{display:block; max-width:840px; width:100%;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0 .gu_right_grid .img .tablet,
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0 .gu_right_grid .img .mobile{display:none;}


/* block1 */
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box{width:100%; overflow:hidden;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left .title{font-size:22px; line-height:40px;
    margin-bottom:16px; color:#1634db;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left .desc{font-size:18px; line-height:32px; color:#444;
    margin-bottom:40px;}

#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left, #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .right{float:left}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left:after, #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .right:after{
    content:''; display:block; clear:both;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left{width:65%; padding-right:55px; box-sizing:border-box;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .right{width:294px; max-width:294px;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .right .mobile{display:none;}

/* 박스-작은박스-기본 */
.gu_btn_sm_box{margin: 0 auto; text-align:left;}

#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul{width:100%;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li div{float:left;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li:after{content:''; display:block;
    clear:both;}

#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .img{width:54px; padding-top:10px}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .img img{width:100%;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .text{padding-left:41px;
    width:80%; margin-bottom:0;}

#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .text .title{font-size:20px;
    margin-bottom:2px; color:#000; line-height:40px;}
#TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .text .desc{color:#666;}

html:not(:lang(ko)) .tag_area, html:not(:lang(ko)) .media_list.video_area {display:none}
.tag_area{margin:10px 0; font-size:0;}
.tag_area span{display:inline-block; vertical-align:top; margin-bottom:10px; margin-right:8px; padding:11px 20px ;border-radius:60px;border:1px solid #005eb8; font-size:16px;color:#005eb8;}
.media_list.video_area { display: block; font-size: 0; width: 100%; position: relative; clear: both; } 
.media_list.video_area .video {position:relative;width: calc(33.3333% - 10px);float: left;margin: 0 10px 10px 0;cursor: pointer;}  
.media_list.video_area .video:last-child {  margin-right: 0 } 
.media_list.video_area .video img {width: 100%;}
.media_list.video_area .video p { padding: 10px 10px 0 5px; font-size: 16px; color: #656565; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.3; text-align: left; word-wrap: break-word; /*display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; */} 

/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px){
    /**********************************************************************************************************************************************************************************************************
       기능
    */


    /* #TI_RND */
    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .area .media{max-width:392px; }


    /* #TI_DIGITAL */
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left{width:59%; padding-right:37px; box-sizing:border-box;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .right{float:right; width:41%;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .text{width:71%;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block:first-child{margin-bottom:79px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block:last-child{margin-bottom:81px;}

    .popup .pop_inner .subtitle_box .video_name{padding-left:10px; box-sizing:border-box;}

    .gu_btn_sm_box a:hover{color:#000; background-color: #fff; border-color: #000;}
    .gu_btn_sm_box.gu_btn_arrow a span:before{background-image:url('../../images/common/ico_arrow_black_right_s.png');}
    .gu_btn_sm_box.gu_btn_arrow  a:hover span:before{background-image:url('../../images/common/ico_arrow_black_right_s.png'); right:0}





}

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

    /* #TI_RND */
    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .desc .title{font-size:18px; line-height:28px; margin-bottom:10px;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .desc .text{font-size:14px; line-height:24px;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .block {margin-bottom:78px;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .block1 .gu_right_grid .first {margin-bottom:56px;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .area .media {margin-bottom: 22px; }


    /* #TI_DIGITAL */
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block {margin-bottom:80px; width:100%;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .text{font-size:16px; line-height:26px; margin-bottom:39px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left .title{font-size:16px; line-height:20px; margin-bottom:15px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left .desc{font-size:14px; line-height:24px; margin-bottom:24px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul{padding-top:4px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .text .title{font-size:15px; margin-bottom:9px; line-height: 20px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .text{width:62%;}

    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .text span{padding-left:15px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .text span:before{font-size:22px;}

    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0 .gu_right_grid .img .tablet{display:block; width:100%; max-width:497px; margin:0 auto;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0 .gu_right_grid .img .desktop,
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0 .gu_right_grid .img .mobile{display:none;}


}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px){
    /**********************************************************************************************************************************************************************************************************
        기능
    */

    /* #TI_RND */
    #TI_RND .gu_grid .gu_left_grid {margin-bottom: 19px;}
    .gu_grid .gu_title {line-height: 33px;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .area {width:100%; float:none; margin-right:0%; }
    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .area .media{margin: 0 auto 20px;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .desc .title {line-height:26px; margin-bottom: 19px;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .desc .text {font-size: 16px;line-height: 24px;margin-bottom: 15px;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .block, #TI_RND .gu_contents_wrap .gu_grid_sm .block:last-child {margin-bottom: 80px;width:100%;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .block1 .gu_right_grid .first {margin-bottom:0px;}

    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .media .play_btn{width:44px; height:44px;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .media .play_btn .mobile{display:block; width:100%;}
    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .media .play_btn .desktop{display:none;}

    #TI_RND .gu_contents_wrap .gu_grid_sm .gu_right_grid .area .media{max-width:100%; }



    /* popup */
    .popup .pop_inner .subtitle_box>div{float:none;}
    .popup .pop_inner .subtitle_box .video_name{width:94%; margin:0 3%; font-size:26px; margin-bottom:40px; padding-left:0;}
    .popup .pop_inner .subtitle_box .sub_area{width:94%; margin:0 3%; font-size:14px; line-height: 23px;}






    /* #TI_DIGITAL */
    #TI_DIGITAL .gu_grid .gu_left_grid{margin-bottom:24px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .text{margin-bottom:48px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block:first-child {margin-bottom:87px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left .title{margin-bottom:19px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left .desc{margin-bottom:35px;}

    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left, #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .right {
        float: none;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .left {width:100%; padding-right:0px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .right {float: none; width:100%; max-width:100%;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .right .desktop{display:none;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .right .mobile{display:block;}

    .gu_btn_sm_box {margin: 0 auto 30px;}

    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .text {width:calc(100% - 54px - 24px); padding-left:24px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul {padding-top:17px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .text .title{margin-bottom:16px; line-height:40px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block3 .gu_right_grid .content_box .left ul li .text .desc{font-size:13px; line-height:21px; margin-bottom:39px;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block .gu_right_grid .content_box .right {margin:9px auto 0;}

    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0 .gu_right_grid .img .mobile{display:block; width:100%; margin:0 auto;}
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0 .gu_right_grid .img .desktop,
    #TI_DIGITAL .gu_contents_wrap .gu_grid_sm .block0 .gu_right_grid .img .tablet{display:none;}


	.tag_area span {font-size: 15px;padding: 8px 14px;}
	.media_list.video_area .video p {font-size: 15px;}
	.media_list.video_area .video {width: calc(50% - 10px);}  




}