@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@100;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@100;400;700&family=Rock+3D&display=swap');

/*reset*/
html, body{height:100%!important; width:100%; padding:0;  font-family: 'Noto Sans KR', sans-serif; box-sizing: border-box; color: #000; background: #fff; word-break:keep-all;}
body{font-weight:300; margin: auto; letter-spacing: -0.5px; list-style: none; background: #fff;}
html{margin:0;}
ul,li{padding:0; margin:0; list-style:none;}
h1,h2,h3,h4,h5,h6{font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.5px; font-weight:700;}
input, button{ font-family: 'Noto Sans KR', sans-serif;}
.logo_tit{margin: auto; margin-bottom: 10px; width: 173px;}
.logo_tit img{width: 100%;}
.pc{display: block;}
.mo{display: none;}
.show{display: none;}
.img-responsive{width:100% !important;}
.clearfix:before, .clearfix:after{display: block; content: ""; clear: both;}
#container{width:100%; max-width:2000px; float:inherit; margin: 0 auto; min-height:inherit;}
.bo_wrap{width:100%; max-width:1300px; margin:0 auto;}
#hd, #wrapper, #ft{min-width:inherit;}
.container{margin:0 auto;}
#wrapper{margin-top:0px;}
.fontmj{font-family:'Noto Serif KR' !important;}
.tc{text-align:center !important;}
.mbr{display: none;}
#hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr{width:100%;}
.sub_page{width: 100%; overflow: hidden;}


.sub_page .sub_container{width: 100%; display: inline-block; padding:150px 0 110px 0;}
.sub_page .sub_title{width: 100%; text-align: center;}
.sub_page .sub_title h1{width: 100%; font-size: 52px; line-height: 70px; font-weight: 700; letter-spacing: -2px;}
.sub_page .sub_title p{width: 100%; font-size: 16px; line-height: 28px; font-weight: 400;}

.sub_intro .intro_wrap{width: 100%; display: inline-block; margin-top: 50px;;}
.intro_wrap .big_inner{width: 1400px; margin: 0 auto;}
.sub_intro .intro_wrap .left_intro{width: 50%; float: left;}
.sub_intro .intro_wrap .right_intro{width: 50%; float: left;}
.sub_intro .big_inner .left_intro .left_tbox{width: 100%;padding: 20px 50px;}
.sub_intro .big_inner .left_intro .bt1{width: 100%; font-size: 24px; font-weight: 700; line-height: 35px;}
.sub_intro .big_inner .left_intro .t3{width: 100%; font-size: 16px; font-weight: 400; line-height: 28px; margin-top: 20px;}
.sub_intro .big_inner .right_intro{padding-left: 120px; position: relative;}
.sub_intro .big_inner .right_intro::after{content: ""; background: url('/img/220110_6.png') no-repeat center center; width: 421px; height: 423px; position: absolute; bottom: -250px; right: -230px;}
.sub_intro .intro_wrap .left_intro img{width: 100%;}
.sub_intro .intro_wrap .right_intro .right_tbox{width: 100%;padding: 20px 50px;}
.sub_intro .intro_wrap .right_intro .bt1{width: 100%; font-size: 24px; font-weight: 700; line-height: 35px;}
.sub_intro .intro_wrap .right_intro .t3{width: 100%; font-size: 16px; font-weight: 400; line-height: 28px; margin-top: 20px;}
.sub_intro .intro_pc{display: block;}
.sub_intro .intro_mo{display: none;}
.sub_intro .intro_wrap .right_intro .right_tbox_pc{display: block;}
.sub_intro .intro_wrap .right_intro .right_tbox_mo{display: none;}

.sub_research .rech_wrap{width: 100%; display: inline-block; position: relative;}
.sub_research .rech_wrap_bg{z-index: 3;}
.sub_research .rech_wrap_bg::after{content: ""; position: absolute; top: -86px; left: 0; width: 1920px; height: 1080px; background: url(/img/research_bg.png) center center no-repeat; z-index: -1;}
.rech_wrap .reimg_wrap{width: 100%; max-width: 1174px; float: right;}
.rech_wrap .reimg_wrap_op{width: 100%; max-width: 1174px; float: left;}
.rech_wrap .reimg_wrap_op img{float: right;}
.rech_wrap .txt_box{position: absolute; top: 50%; left: 250px; transform: translateY(-50%); z-index: 50;}
.rech_wrap_add .txt_box{position: absolute; top: 40%; left: 250px; transform: translateY(-50%); z-index: 50;}
.rech_wrap .txt_box_op{position: absolute; top: 50%; right: 250px; transform: translateY(-50%); z-index: 50;}
.rech_wrap .re_tit{width: 100%; font-size: 40px; font-weight: 700; line-height: 50px;}
.rech_wrap .re_tit .fct{color: #ff7253;}
.rech_wrap .re_tit .fcw{color: #fff;}
.rech_wrap .re_txt{font-size: 16px; line-height: 28px; font-weight: 400; margin-top: 20px;}
.rech_wrap #moveimg{animation: moveimg 3s ease-in-out alternate infinite;}
.rech_wrap .re_txt_pc{display: block;}
.rech_wrap .re_txt_mo{display: none;}

.rech_wrap .reimg_wrap_op #pencil{float: inherit; position: absolute; top: 0; left: 100px; animation: pec_move 2.5s linear infinite alternate;}
.rech_wrap .reimg_wrap_op_pc{display: block;}
.rech_wrap .reimg_wrap_op_mo{display: none;}
.rech_wrap .mini_tit{font-size: 16px; font-weight: bold; margin-bottom: 150px; position: relative; z-index: 3;display: inline-block; padding: 0 5px; }
.rech_wrap .mini_tit::after{width: 100%; height: 10px; position: absolute; bottom: 0; left: 0; background: #ff7253; z-index: -1; content:"";}

@keyframes pec_move {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(3deg);
    }
}


@keyframes moveimg {
    0%{
        transform: skew(1deg, 1deg);
    }
    100%{
        transform: skew(2deg, 3deg);
    }
}




@media screen and (max-width: 1795px){
    .rech_wrap .reimg_wrap{width: 70%;}
    .rech_wrap .reimg_wrap_op{width: 70%;}
    .rech_wrap .txt_box{left: 100px;}
    .rech_wrap .txt_box_op{right: 100px;}
}
@media screen and (max-width: 1400px){
    .rech_wrap .reimg_wrap{width: 60%;}
    .rech_wrap .reimg_wrap_op{width: 60%;}
    .rech_wrap .reimg_wrap img{width: 100%;}
    .rech_wrap .reimg_wrap_op img{width: 100%;}
    .sub_research .rech_wrap_bg::after{width: 100%; top: -4%; background-size: cover; height: auto; height: 650px;}
    .sub_research .rech_wrap{height: 550px;}
    .sub_research .rech_wrap_op{height: 550px;}
    .rech_wrap .txt_box{left: 50px;}
    .rech_wrap .txt_box_op{right: 50px;}
    .intro_wrap .big_inner{width: 1050px;}
    .sub_intro .big_inner .right_intro{padding-left: 0;}
    .sub_intro .big_inner .left_intro .left_tbox{padding: 20px 40px;}
    .sub_intro .big_inner .left_intro .bt1{font-size: 20px; line-height: 30px;}
    .sub_intro .intro_wrap .right_intro .right_tbox{padding: 15px 30px;}
    .sub_intro .intro_wrap .right_intro .bt1{font-size: 20px; line-height: 30px;}
    .rech_wrap .reimg_wrap_op #pencil{width: 200px; left: 3%;}
    .rech_wrap .mini_tit{margin-bottom: 50px;}
}

@media screen and (max-width: 1100px){
    .rech_wrap .reimg_wrap_op{width: 100%; height: 550px; position: relative;}
    .rech_wrap .reimg_wrap{width: 100%; height: 550px; position: relative;}
    .rech_wrap .reimg_wrap_op img{width: 50%; position: absolute; bottom: 0; left: 0;}
    .rech_wrap .reimg_wrap img{width: 50%; position: absolute; bottom: 0; right: 0;}
    .rech_wrap .reimg_wrap #moveimg{top: 0; bottom: inherit;}
    .sub_research .rech_wrap_bg::after{top: 6%; padding-top: 0; height: 550px;}
    .intro_wrap .big_inner{width: 750px;}
    .sub_intro .big_inner .left_intro .left_tbox{padding: 20px;}
    .sub_intro .intro_wrap .right_intro .right_tbox{padding: 20px;}
    .sub_intro .big_inner .left_intro .bt1 br{display: none;}
    .sub_intro .intro_wrap .right_intro .bt1 br{display: none;}
    .sub_intro .big_inner .right_intro img{width: 100%;}
    .sub_intro .big_inner .left_intro .t3 br{display: none;}
    .sub_intro .intro_wrap .right_intro .t3 br{display: none;}
    .rech_wrap .reimg_wrap_op img{width: 42%;}
    .rech_wrap .reimg_wrap_op_pc{display: none;}
    .rech_wrap .reimg_wrap_op_mo{display: block;}


}

@media screen and (max-width: 800px){
.sub_page .sub_container{padding: 120px 0 50px 0;}
.sub_page .sub_title h1{font-size: 36px; line-height: 50px;}

.sub_intro .intro_pc{display: none;}
.sub_intro .intro_mo{display: block;}
.sub_intro .big_inner{width:90%;}
.sub_intro .intro_wrap .left_intro{width: 100%;}
.sub_intro .intro_wrap .right_intro{width: 100%;}
.sub_intro .intro_wrap .right_intro .bt1{font-size: 17px; line-height: 27px;}
.sub_intro .intro_wrap .right_intro .t3{font-size: 14px; line-height: 22px;}
.sub_intro .intro_wrap .intro_mo .right_intro .right_tbox{padding: 0; margin-top: 20px;}
.sub_intro .intro_wrap .right_intro .right_tbox{padding: 0 5%; margin-top: 20px;}
.sub_intro .big_inner .right_intro::after{bottom: 40px;}


.rech_wrap .re_tit{font-size: 28px; line-height: 38px;}
.rech_wrap .re_txt{font-size: 14px; line-height: 24px;}
.rech_wrap .txt_box{width: 85%; left: 50%; transform: translate(-50%, -50%);}
.rech_wrap .txt_box_op{width: 85%; left: 50%; transform: translate(-50%, -50%);}
.rech_wrap .re_txt_pc{display: none;}
.rech_wrap .re_txt_mo{display: block;}
.rech_wrap .reimg_wrap_op img{left: inherit; right: 0;}
.sub_intro .intro_wrap .right_intro .right_tbox_pc{display: none;}
.sub_intro .intro_wrap .right_intro .right_tbox_mo{display: block;}
.sub_intro .big_inner .left_intro .bt1 br{display: block;}
.sub_intro .intro_wrap .right_intro .bt1 br{display: block;}
.sub_intro .big_inner .left_intro .t3 br{display: block;}
.sub_intro .intro_wrap .right_intro .t3 br{display: block;}

}

















