@charset "utf-8";

/* 커스텀 */


.con-max {
    max-width: 1680px;
}

.con-middle {
    max-width: 1600px;
}

.con-min-width {
    min-width: 320px;
}

html,
body {
    font-family: 'Noto Sans KR', sans-serif;
    overflow-x: hidden;
}

.line {
    width: 2rem;
    height: 0.25rem;
    background-color: #44d3e4;
    margin: 1rem 0 1.5rem 0;
}


.bold {
    font-weight: bold;
}


/***************** section 영역 **********************/


.content {padding-bottom: 6rem;}

.content .content01 {
    margin-top: 8.25rem;
    height: 30.35rem;
}

.content .content01 .main_box {
    position: relative;
    width: 100%;
    height: 100%;
}

.content .content01 .main_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    background: url(/eng/ht/ei/main/en_main_02.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.content .content01 .section01 {
    width: 100%;
    height: 100%;
}

.content .content01 .section01 > div {
    display: inline-block;
    height: 100%;
}

.content .content01 .section01 .left {
    position: relative;
    width: 55%;
    height: 100%;
    /*padding: 4.5rem 7rem 4rem 0;*/
    padding: 5% 12% 0 0;
}

.content .content01 .section01 .left .main_bg_txt {
    text-align: right;
}

.content .content01 .section01 .left .main_bg_txt {
    font-size: 3rem;
    color: #fff;
    letter-spacing: 0.15rem;
    position: relative;
    z-index: 10;
    font-weight: bold;
    z-index: 1;
}

.content .content01 .section01 .left .main_bg_txt span {
    content: "1997";
    font-size: 2.5rem;
    position: absolute;
    left: 95%;
    bottom: 40%;
    font-family: 'Seogo Script';
    color: #57c8e1;
    font-weight: 400;
    letter-spacing: -0.6rem;
    z-index: -1;
}

.content .content01 .section01 .left .main_bg_sub {
    padding-top: 20%;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 300;
}


.content .content01 .section01 .right {
    padding: 5% 0 3% 4%;
    width: 45%;
    height: 100%;
}


.title {
    font-size: 2rem;
    color: #999;
    font-weight: 200;
    position: relative;
    z-index: 1;
}

.title span {
    font-size: 2.5rem;
    color: #5eedf5;
    font-weight: bold;
    position: absolute;
    font-family: 'Seogo Script';
    letter-spacing: -0.15rem;
    left: 18%;
    bottom: 10%;
    z-index: -1;
}

a.xi-plus-thin {
    font-family: 'xeicon';
    font-size: 1.5rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.line_mid {
    width: 4rem;
    height: 0.25rem;
    background-color: #5eedf5;
    margin-top: 0.5rem;
}


/* KRIVET Issue Brief */


.list_box {
    width: 100%;
    padding-top: 1.2rem;

}

.list_box.border_bottom {
    border-bottom: 1px solid #ddd;
}

.list_box ul li {
    height: 100%;
    line-height: 2rem;
}

.list_box ul li:last-child {
    padding-bottom: 2.2rem;
}

.list_box ul li .list_tit {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    color: #333;
}

.list_box ul li .list_right {
    width: calc(100% - 80% - 0.5rem);
    font-size: 0.8rem;
    color: #666;
    text-align: right;
}


/* KRIVET News */


.news_box {
    padding-top: 3rem;
}




/* content02 */

.content02 {
    padding-top: 3.5rem;
}

.content02 .section {
    height: 44.15rem;
}

.content02 .title {
    position: relative;
    margin-bottom: 2.5rem;
}

.content02 .title::before {
    content: "";
    display: block;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    right: 0.75rem;
    height: .01rem;
    background-color: #ddd;
    z-index: 1;
}

.content02 .section02 .title::before {
    width: calc(100% - 21.45rem);
}

.content02 .section03 .title::before {
    width: calc(100% - 19.65rem);
}

.content02 .title::after {
    content: "";
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    background-color: transparent;
    box-shadow: 0 0 0 2px #ddd;
    right: 0;
    border-radius: 50%;
    top: 55%;
    transform: translateY(-50%);
    left: auto;
    z-index: 2;
}

.title strong {
    color: #454d57;
}


/* section02 =  KRIVET Publications */


.section02 {
    width: 34.375%;
    margin-right: 3%;
}

.section02 .Pub_list_box {
    width: 100%;
}

.section02 .Pub_list_box ul li {
    height: 12.65rem;
    margin-bottom: 1rem;
    padding: 1.5rem 4.5rem 1.5rem 1.5rem;
    box-sizing: border-box;
    border: 2px solid #ddd;
    position: relative;
}

.section02 .Pub_list_box ul li a.xi-plus-thin {
    font-family: 'xeicon';
    font-size: 1.5rem;
    color: #999;
    top: 19%;
    right: 6%;
}

.section02 .Pub_list_box ul li:last-child {
    margin-bottom: 0;
}

.section02 .Pub_list_box ul li .pub_txt {
    width: 60%;
}

.section02 .Pub_list_box ul li .pub_txt .pub_tit {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8rem;
    color: #333;
    height: 3.2rem;
    line-height: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
}

.section02 .Pub_list_box ul li .pub_txt .pub_date {
    font-size: 0.8rem;
    color: #666;
    padding: 1rem 0 2rem 0;
    font-weight: 500;
}

.section02 .Pub_list_box ul li .pub_txt .pub_date span {
    font-weight: 100;
    padding-left: 0.3rem;
}

.section02 .Pub_list_box ul li .border_line .pub_cover {
    width: 6rem;
    height: 8.7rem;
    position: relative;
    margin-top: 3%;
}

.section02 .Pub_list_box ul li .pub_cover .img_box {
    position: absolute;
    background: url(/eng/ht/ei/main/cover.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 2px 2px 10px #ddd;
}

.section02 .Pub_list_box ul li .pub_cover .img_box::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #dfdfdf 1%, transparent, transparent, transparent, transparent, transparent, transparent);
}


.section02 .Pub_list_box ul li .down_btn {
    width: 45%;
}

.section02 .Pub_list_box ul li .down_btn a {
    display: block;
    padding: 6% 0;
    background-color: #2d313a;
    color: #fff;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 100;
    vertical-align: middle;
    text-align: center;
}

.section02 .Pub_list_box ul li .down_btn i {
    padding-left: 1rem;
    color: #5eedf5;
    font-size: 1rem;
    font-weight: bold;
}


/* section03 = Newsletter */


.section03 {
    width: 62.5%;
}

.line_sm {
    width: 2rem;
    height: 0.25rem;
    background-color: #5eedf5;
}

.sub_title {
    font-size: 1.2rem;
    color: #333;
    padding-bottom: 0.6rem;
}

.col_cyan {
    color: #5eedf5;
}


/* Recent General Research & Project */



.pro_list_box {
    padding: 1.8rem 2rem;
    width: 100%;
    border: 2px solid #ddd;
    box-sizing: border-box;
    position: relative;
    height: 17.9rem;
}

.pro_list_box a.xi-plus-thin {
    top: 2.5rem;
    right: 2rem;
    color: #999;
}

.pro_list_box .pro_list {
    padding-top: 1rem
}

.pro_list_box .pro_list li {
    padding-bottom: 0.8rem;
}

.pro_list_box .pro_list li:last-child {
    padding-bottom: 0;
}

.pro_list_box .pro_list .pro_tit {
    font-size: 0.9rem;
    color: #333;
    letter-spacing: -0.03rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pro_list_box .pro_list .pro_date {
    font-size: 0.8rem;
    color: #666;
    padding-top: 0.3rem;
}


/* letter_bottom  */



.section03 .letter_bottom {
    margin-top: 2.5rem;
}

.section03 .letter_bottom ul {
    margin: 0 -0.5rem;
}

.section03 .letter_bottom ul li {
    width: 33.333%;
    padding: 0 0.5rem;
}

.section03 .letter_bottom ul li .bottom_item {
    border: 2px solid #ddd;
    height: 19.5rem;
    padding: 1.5rem 2rem 0 2rem;
    box-sizing: border-box;
    position: relative;
}

.section03 .letter_bottom ul li .bottom_item .img_wrap {
    position: relative;
    min-width: 100%;
    height: 8.2rem;
    margin-top: 1.2rem;
}

.section03 .letter_bottom ul li .bottom_item .img_wrap .img_item {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section03 .letter_bottom ul li .bottom_item .img_wrap .img_item.shadow_box {
    box-shadow: 2px 2px 10px #ddd;
}

.section03 .letter_bottom ul li .bottom_item .down_btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.section03 .letter_bottom ul li .bottom_item .down_btn a {
    display: block;
    background-color: #2d313a;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 100;
    vertical-align: middle;
    padding: 8% 2rem;
}

.section03 .letter_bottom ul li .bottom_item .down_btn i {
    padding-left: 1rem;
    color: #5eedf5;
    font-size: 1rem;
    font-weight: bold;
}

.section03 .letter_bottom ul li .bottom_item.q_link {
    height: 19rem;
}

.section03 .letter_bottom ul li .bottom_item.q_link::before,
.section03 .letter_bottom ul li .bottom_item.q_link::after {
    content: "";
    position: absolute;
    background-color: #2d313a;
    top: 100%;
    right: 0;
    width: 90%;
    height: 0.6rem
}

.section03 .letter_bottom ul li .bottom_item.q_link::after {
    left: 100%;
    width: 0.6rem;
    height: 70%;
    bottom: -0.6rem;
    top: auto;
}

.section03 .letter_bottom ul li .bottom_item.q_link {
    padding: 0;
}

.section03 .letter_bottom ul li .bottom_item.q_link .sub_title {
    padding: 1.5rem 2rem 0.6rem 2rem;
}

.section03 .letter_bottom ul li .bottom_item.q_link .line_sm {
    margin-left: 2rem;
}


.section03 .letter_bottom ul li .bottom_item.q_link .q_link_list {
    width: 100%;
    border-top: 1px solid #ddd;
    margin-top: 1rem;
}

.section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link {
    display: block;
    border-bottom: 1px solid #ddd;
    height: 5rem;
    line-height: 5rem;
    padding: 0 10%;
}

.section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link .border_line {width: 100%;height: 100%;}

.section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link .img-box {
    width: 25%;
    position: relative;
    height: 100%;
}

.section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link .img-box img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link span {
    font-size: 0.8rem;
    color: #333;
    padding-left: 8%;
    font-weight: 600;
    width: 65%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link i {
    color: #999;
    display: inline-block;
    line-height: 5rem;
    width: 10%;
}

.section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .bottom_logo {
    padding-top: 0.5rem;
    text-align: right;
}

.section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .bottom_logo img {
    width: 3.5rem;
    height: 100%;
}





/************************************* 반응형 작업  *******************************************/

@media(max-width:1150px) {

    .list_box {
        box-sizing: border-box;
    }

    .content .content01 .section01 .left .main_bg_sub {
        padding-left: 1.5rem;
    }


    .content02 .section02 {
        width: 47%;
    }

    .content02 .section02 .Pub_list_box ul li {
        padding: 1.5rem 3rem 1.5rem 1.5rem;
    }

    .content02 .section03 {
        width: 50%;
    }

    .section03 .letter_bottom {
        margin-top: 1rem;
    }

    .section03 .letter_bottom ul li {
        width: 50%;
    }

    .section03 .letter_bottom ul li.q_link_wrap {
        width: 100%;
    }

    .section03 .letter_bottom ul li .bottom_item {
        height: 14.5rem;
        padding: 1rem 1rem 0 1rem;
    }

    .section03 .letter_bottom ul li .bottom_item .img_wrap {
        height: 6.2rem;
    }

    .section03 .letter_bottom ul li .bottom_item .down_btn a {
        padding: 5% 2rem;
    }

    .section03 .letter_bottom ul li .bottom_item.q_link {
        border: none;
        margin-top: 1rem;
        height: auto;
    }

    .section03 .letter_bottom ul li .bottom_item.q_link::after,
    .section03 .letter_bottom ul li .bottom_item.q_link::before {
        display: none;
    }

    .section03 .letter_bottom ul li .bottom_item.q_link .sub_title {
        display: none;
    }

    .section03 .letter_bottom ul li .bottom_item.q_link .line_sm {
        display: none;
    }

    .section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link {
        height: 2.5rem;
        line-height: 2.5rem;
    }

    .section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link.global_link img {
        width: auto;
        height: 100%;
    }

    .section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link i {
        line-height: 2.5rem;
    }

    .section03 .letter_bottom ul li .bottom_item.q_link .bottom_logo {
        display: none;
    }
}



@media(max-width:750px) {

    html {
        font-size: 18px;
    }
    
    .content {padding-bottom: 2.5rem;}

    .line_mid {
        display: none;
    }

    .content .content01 .main_bg {
        width: 100%;
    }

    .content .content01 .section01 .left {
        width: 100%;
        float: none;
        display: block;
        padding: 10% 15% 0 12%;

    }

    .content .content01 .section01 .right {
        width: 100%;
        height: 33rem;
        display: block;
        padding: 2.5rem 1rem;
    }

    .content .content01 .section01 .right .news_box {
        padding-top: 2rem;
    }

    .content .content01 .section01 .right .title {
        padding-bottom: 0.5rem
    }

    .content .content01 .section01 .right .title span {
        left: 6rem;
    }

    .list_box {
        border: 2px solid #ddd;
        padding: 1rem
    }

    .list_box ul li:last-child {
        padding-bottom: 0;
    }

    .content02 {clear: both;}
    
    .content02 .section {
        height: auto;
    }

    .content02 .section02 {
        width: 100%;
        padding: 0 1rem;
        float: none;
        display: block;
    }

    .content02 .title {
        margin-bottom: 1rem;
    }

    .content02 .title::before,
    .content02 .title::after {
        display: none;
    }



    .content02 .section02 .Pub_list_box ul li {
        width: 33.333%;
        padding: 0.25rem;
        height: auto;
        border: none;
        float: left;
    }

    .content02 .section02 .Pub_list_box ul li .border_line {
        border: 2px solid #ddd;
        padding: 3rem 0.7rem 1.5rem 0.7rem;
        box-sizing: border-box;
    }

    .section02 .Pub_list_box ul li div {
        float: none;
        text-align: center;
        width: 100%;
    }

    .section02 .Pub_list_box ul li .pub_txt {
        width: 100%;
        float: none;
        text-align: center;
        width: 100%;
    }

    .section02 .Pub_list_box ul li .pub_txt .pub_date {
        display: none;
    }

    .section02 .Pub_list_box ul li .pub_cover {
        height: 8rem;
        margin: 0 auto;
    }

    .section02 .Pub_list_box ul li .down_btn {
        width: 95%;
        margin: 1rem auto 0 auto;
    }

    .section02 .Pub_list_box ul li a.xi-plus-thin {
        top: 10%;
    }


    .content02 .section03 {
        width: 100%;
        padding: 0 1rem;
    }

    .content02 .section03 .pro_list_box {
        height: auto;
    }

    .content02 .section03 .pro_list_box .pro_list .pro_tit {
        height: 2.7rem;
        line-height: 1.3rem;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: keep-all;
    }

    .section03 .letter_bottom ul li .bottom_item {height: 18.45rem;padding: 1.5rem 1.5rem 0 1.5rem;}
    .section03 .letter_bottom ul li .bottom_item .img_wrap {height: 8.15rem;}
    .section03 .letter_bottom ul li .bottom_item .down_btn a {padding: 7.5% 2rem;}
    
    .section03 .letter_bottom ul li .bottom_item.q_link {margin:0 -0.5rem;}
    .section03 .letter_bottom ul li .bottom_item.q_link .q_link_list {border-top: none;}
    
    .section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link {border-bottom: none;float: left;width: 50%;box-sizing: border-box;height: 5rem;padding: 0;padding:0 0.5rem; }
    .section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link .border_line {border: 2px solid #ddd;width: 100%;height: 100%;padding: 0 1rem;box-sizing: border-box;}
    
    
    .section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link span {line-height: 5rem;}
    .section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link i {line-height: 5rem;}
   
    .section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link.global_link img {width: 100%; height: auto;}

}


@media(max-width:900px) {

    .content .content01 {
        margin-top: 6rem;
        
    }

   
}

@media(max-width:500px) {
    
    html {font-size: 14px !important;}
    
    

    
    
    .content .content01 {
        margin-top: 4rem;
        height: 13.35rem;
    }
    
    .content .content01 .section01 .left .main_bg_txt {font-size: 2rem;}
    .content .content01 .section01 .left .main_bg_txt span {font-size: 2rem;left: 90%;}
    .content .content01 .section01 .left .main_bg_sub {font-size: 1rem;padding-top: 10%;padding-left: 0;}
    
    .content .content01 .section01 .right {
        width: 100%;
        height: 33rem;
        display: block;
        padding: 2.5rem 1rem;
    }
        
    .content .content01 .section01 .right .title { font-size: 1.5rem;}
    .content .content01 .section01 .right .title span {font-size: 1.8rem;bottom: 1rem;left: 4.5rem;}
    
    
    .list_box ul li .list_tit {width: 100%}
    .list_box ul li .list_right {width: 100%;text-align: left;}
    
    .content02 .title {font-size: 1.5rem;}
    .content02 .section02 .Pub_list_box ul li {width: 100%;}
    .section02 .Pub_list_box ul li .down_btn {width: 10rem;}
    
    .content02 .section03 {padding: 2rem 1rem 0 1rem;}
    .section03 .letter_bottom ul li {width: 100%;}
    .section03 .letter_bottom ul li:first-child {margin-bottom:1rem;}
    .section03 .pro_list_box {padding: 1.8rem 1rem;}
    .pro_list_box a.xi-plus-thin {top: 1.5rem;right: 1rem;}
    
    .section03 .letter_bottom ul li .bottom_item .down_btn a {padding: 1rem 2rem;}
    .section03 .letter_bottom ul li .bottom_item.q_link .q_link_list .link {width: 100%;margin-bottom: 1rem;}
       
  
}