html, body { font-size: 14px; }

.wrap {
    position: relative;
    overflow: hidden;
}

/************* layout-header *************/


#header {
    position: absolute;
    top: 0;
    z-index: 999999999;
    width: 100%;
    transition: all 0.5s ease;
}


#header .logo {
    padding: 8px 0;
    margin-left: 20px;
}

#header .logo img {
    max-width: 100%;
    /* max-height: 100%; */
    max-height: 32px;
    vertical-align: middle;
}

#header .logo a {
    width: 100px;
}


#header.on .logo a {
    /* background: url(/images/common/logo_on.png) 0 0 no-repeat; */
    background-size: contain;
}
.contents>.no_pad {
    padding-top: 0 !important;
}
/************* Header - gnb slide menu *************/
#header .float_wrapper>nav {
    display: none !important;
    margin-left: 39px;
}

#header nav #gnb {
    width: 100%;
    height: 72px;
}

#header nav #gnb li {
    float: left;
    width: 150px;
    text-align: center;
    line-height: 96px;
    cursor: pointer;
}

#header nav #gnb li .nav_dep1 {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
}

#header.active nav {
    display: block;
}

#header nav .depth_toggle {
    position: absolute;
    top: 97px;
    left: 0;
    width: 100%;
    transition: .5s height, .2s background;
    display: none;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

#header nav .depth_toggle.active {
    display: block;
    background: #fff;
}

#header nav .depth_toggle .wrapper {
    width: 1300px;
    /* margin: 0 auto; */
    /* margin-left: 352px; */
    margin: 0 auto;
    padding-left: 296px;
}

#header nav .depth_toggle .sub_nav {
    width: 150px;
    height: 200px;
    float: left;
    background: rgba(255, 255, 255, 0.5);
    border-right: 1px solid #ddd;
    padding: 20px 0;
    transition: .5s height, .2s background;
}

#header nav .depth_toggle .sub_nav li {
    height: 31px;
    line-height: 31px;
    /* padding-left: 12px; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

#header nav .depth_toggle .sub_nav li a {
    display: block;
    overflow: hidden;
    /*text-overflow: ellipsis;
	white-space: nowrap;*/
    font-size: 16px;
    letter-spacing: -0.6px;
}


#header nav .depth_toggle .sub_nav.on {
    background: #17357c;
    color: #fff;
    transition: .5s height, .2s background;
}

#header nav .depth_toggle .sub_nav.on li a {
    color: #f1f1f1;
}

#header nav .depth_toggle .sub_nav.on li a:hover {
    color: #fff !important;
    font-weight: 400;
}

#header.speedup {
    transition: all 0.1s ease !important;
}


/************* header *************/

#header nav .depth_toggle .sub_nav li.over {
    height: 58px;
    /* overflow: auto; */
    line-height: 18px;
    text-overflow: clip;
    white-space: pre-line;
}

#header nav .depth_toggle .sub_nav li.over a {
    overflow: visible;
    text-overflow: clip;
    white-space: initial;
}

/* Header - right menu icon */


#header .menu_area ul li img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}



#header .sub_nav.on .link:after {
    content: url(/images/common/ic_external_sm_on.png);
    font-weight: 600;
    margin-left: 8px;
    font-size: 13px;
}

#header .sub_nav .link:after {
    content: url(/images/common/ic_external_sm.png);
    font-weight: 600;
    margin-left: 8px;
    font-size: 13px;
}


.float_wrapper {
    width: 100% !important;
    justify-content: space-between;
    /* overflow: hidden; */
    /* margin: 0 auto; */
    /* padding: 0 20px; */
}

.offcanvas .h_tabcontent {
    margin-top: 70px;
}

.offcanvas .h_tablinks {
    height: 64px;
    line-height: 64px;
}

.offcanvas .h_tabcontent .sub_nav > li > a {
    height: 64px;
    line-height: 64px;
    padding: 0 25px;
}

.offcanvas .h_tabcontent .depth3 {
    padding: 20px 32px;
}

.offcanvas .tab {
    padding-top: 70px;
}

.offcanvas .h_tabcontent .menu2_link.active:after {
    top: 36px;
}

.offcanvas .h_tabcontent .menu2_link:after {
    top: 28px;
}

/* Clear floats after the tab */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
/* table {
table-layout: fixed;
} */

/************* layout-sub *************/

.sub_visual {
    padding: 0 20px;
    border-bottom: 1px solid #ddd;
}


.sub_visual > div {
    background-size: cover;
    background-position-x: center;
}

.sub_visual h1 {
    line-height: 80px;
    margin-bottom: 40px;
}
.path_container {
    display: block;
}


.path_container .path {
    height: 48px;
}

.path_container .caption {
    text-align: center;
    /* padding-top: 240px; */
    font-size: 32px;
    /* color: #fff; */
    /* letter-spacing: -2px; */
    line-height: 320px;
}

.path .home {
    width: 48px;
    height: 48px;
    padding: 0 16px;
}

.path .home img {
    padding: 14px 0;
}

.path .depth_btn {
    line-height: 48px;
    font-size: 14px;

}

.path .depth_btn i {
    top: 14px;
}
.path .depth_btn:before {
    height: 48px;
}
.path [class^="depth"] ul {
    top: 47px;
}
.sub_container {
    min-height: 500px;
}

.sub_container .wrapper {
    padding-top: 60px;
}
.sub_container .wrapper .max {
    padding: 40px 20px;
}
.sub_container .wrapper .max_wrap_nm {
    margin-top: -60px;
}
.sub_container h1.tit {
    font-size: 1.875rem;
    line-height: 24px;
    margin-bottom: 50px;
    /* text-align: center; */
}



/************* layout-footer *************/
.footer {
    /* background: #111111; */
    height: auto;
}
.footer .wrapper {
    width: 100%;
    padding: 30px 20px;
    flex-wrap: wrap;
    /* overflow: hidden; */
}
.footer .wrapper .logo {
    width: 160px;
    float: none;
}
.footer .wrapper .logo img {
    width: 100px;
}
.footer .wrapper .txt {
    /* float: left; */
    width: 100%;
    padding: 0;
    /* color: #fff; */
    /* font-weight: 100; */
    font-size: 13px;
    letter-spacing: -0.3px;
    float: none;
    margin-top: 10px;
}
.footer .wrapper .site {
    float: none;
    width: 240px;
    /* position: relative; */
    margin-top: 20px;
}
.footer .wrapper .txt span {
    /* display: block; */
    font-size: 13px;
    /* letter-spacing: 0.5px; */
}
/*아이덴티티*/
/*탭페이지*/
/*오시는길*/
.root_daum_roughmap {
    width: 100% !important;
}
/*질문답변*/

/*서브타이틀*/
.tit_quo {
    font-size: 1.5rem;
    margin-bottom: 4rem;
}
/*서브타이틀-세로선*/

/*slick-slide*/
/*ei-slider*/

/*헤더언어및로그인영역*/
/* .lang .btn_lang, #header .open .login a {
    line-height: 60px;
}
#header .open {
    margin-right: 20px;
} */
.menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(10px) rotate(-45deg);
    transform: translateY(10px) rotate(-45deg);
}
.menu-trigger {
    margin: 20px;
    width: 33px;
    height: 23px;
}
.menu-trigger span {
    height: 3px;
}
.menu-trigger span:nth-of-type(2) {
    top: 10px;
}


.ani {
    opacity: 0;
}
.sub_visual .ani {
    opacity: 1;
}
.w_pb_100 {
    padding-bottom: 40px !important;
}
.w_pb_100_2 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.w_mt_260 {
    margin-top: 160px !important;
}
.w_pt_200 {
    padding-top: 40px !important;
}
.w_pt_260 {
    padding-top: 40px !important;
}
.w_pb_260 {
    padding-bottom: 0 !important;
}
/*----------------------------------------1024--------------------------------*/

@media screen and (max-width:1024px) {
    .sub_visual h2 {
        font-size: 0.925rem;
    }
    .sub_visual h1 {
        font-size: 2.5rem;
    }
    .intro_wrap_l .r .txt h5 {
        font-size: 1.5rem;
    }
    .spacetit, .stan_web .tit, .online_ask p {
        font-size: 1.75rem;
    }
    .sub_container h2.subtit {
        font-size: 1.45rem;
    }
    .program .subtit, .tab_link .tablinks {
        font-size: 1.125rem;
    }
    .sub_container h2.subtit_sm {
        font-size: 1.325rem;
    }
    .res_web .tit {
        font-size: 1.5rem;
    }
    .res_web .subtit {
        font-weight: normal;
    }
    .res_web p br {
        display: none;
    }

    .capture_layout .website02, .capture_layout .website03 {
        display: block;
        margin: 0 auto;
        margin-top: 20px;
        position: inherit;
        top: inherit;
        left: inherit;
        right: inherit;
        bottom: inherit;
    }

    .txt_flow_arrow {
        flex-wrap: wrap;
    }
    .txt_flow_arrow .box {
        width: 100%;
    }
    .txt_flow_arrow .box p {
        font-size: 1rem;
    }
    .txt_flow_arrow .arrow {
        margin: 20px auto;
        transform: rotate(90deg) !important;
    }
    .reverse>.arrow {
        margin: 20px auto;
    }

	
	
}
/*----------------------------------------980--------------------------------*/
@media screen and (max-width:980px) {
    .sub_port {
        width: 33%;
    }
    /*아이덴티티*/
    
    /*서브타이틀-따옴표*/
    .tit_quo::before {
        left: 20%;
    }
    .tit_quo::after {
        right: 20%;
    }

    .txt_flow_6 .box, .txt_flow_3 .box {
        width: 100%;
    }



    .icons_03, .icons_04, .icons_04_2 {
        flex-wrap: wrap;
    }
    .icons_03 .ic, .icons_04 .ic, .icons_04_2 .ic {
        width: 100%;
    }
    .icons_04_2 .ic:first-child {
        padding: 0;
        margin-bottom: 40px;
    }
    .icons_04_2 .ic:nth-child(2), .icons_04_2 .ic:nth-child(3) {
        padding: 0;
        margin-bottom: 40px;
    }
    .icons_04_2 .ic:last-child {
        padding: 0;
        margin-bottom: 0;
    }
    .icons_04 .ic:first-child {
        padding: 0;
        margin-bottom: 40px;
    }
    .icons_04 .ic:nth-child(2), .icons_04 .ic:nth-child(3) {
        padding: 0;
        margin-bottom: 40px;
    }
    .icons_04 .ic:last-child {
        padding: 0;
        margin-bottom: 0;
    }
    .icons_03 .ic h5.engtit {
        font-size: 1.5rem;
    }
    .icons_03 .ic:first-child {
        padding: 0;
        margin-bottom: 40px;
    }
    .icons_03 .ic:nth-child(2) {
        padding: 0;
        margin-bottom: 40px;
    }
    .icons_03 .ic:last-child {
        padding: 0;
    }
    .icons_03_sm .ic:first-child {
        padding: 0;
        margin-bottom: 40px;
    }
    .icons_03_sm .ic:nth-child(2) {
        padding: 0;
        margin-bottom: 40px;
    }
    .icons_03_sm .ic:last-child {
        padding: 0;
    }
    .icons_03 .ic::after, .icons_04 .ic::after, .icons_04_2 .ic::after {
        display: none;
    }
    .icons_03 {
        padding-bottom: 0;
    }
    .float_banner {
        position: inherit;
        width: 100%;
        display: flex;
        justify-content: center;
        background: url(../images/sub/ban01.png) center no-repeat;
        align-items: center;
        margin-top: -90px;
    }
    .float_banner p {
        font-size: 1.35rem;
    }
    .float_banner p span {
        font-size: 1.5rem;
    }
    .float_banner p br {
        display: none;
    }
    .cert_img .cont:first-child {
        padding: 0 40px 0 0;
    }
    .cert_img .cont:nth-child(2) {
        padding: 0 40px 0 40px;
    }
    .cert_img .cont:last-child {
        padding: 0 0 0 40px;
    }
    .img_n_img {
        flex-wrap: wrap;
    }
    .img_n_img .more_img_self {
        width: 100%;
    }
    .img_n_img .more_img_self:first-child {
        margin-bottom: 20px;
    }
    .img_n_img a:first-child .btn_img {
        margin-right: 0;
    }
    .img_n_img a:last-child .btn_img {
        margin-left: 0;
    }
    .img_n_img .more_img_self:hover .opacity, .img_n_img .more_img_self:last-child:hover .opacity {
        left: 42%;
    }
    .img_flow_4 {
        flex-wrap: wrap;
    }
    .img_flow_4 .img {
        width: 100%;
        height: 100px;
    }
    .img_flow_4 img {
        margin: 20px auto;
        transform: rotate(90deg);
    }
}








/*--------------------------------------800----------------------------------*/
@media screen and (max-width:800px) {
    .partner_wrap .partner {
        width: calc((100% - 40px) / 3);
    }
    .partner_wrap .partner:nth-child(5n) {
        margin-right: 20px;
    }
    .partner_wrap .partner:nth-child(3n) {
        margin-right: 0;
    }


    .intro_wrap .r .txt h5 {
        font-size: 1.325rem;
    }
    .intro_wrap .r .txt h5 br {
        display: none;
    }
    .float_banner02 {
        display: none;
    }
    .intro_wrap .r {
        width: 100%;
        float: inherit;
    }
    .icons_03 .call {
        font-size: 1.5rem;
    }
    .box_company>div {
        width: 100%;
        padding-bottom: 10px;
    }
    .box_welfare div{width: 45%;}
    .box_welfare div:nth-child(4){margin-bottom: 50px;}
    .company_wrap{
        grid-template-columns: repeat(3, 1fr);
    }
    .company_wrap .company_box{
        gap: 16px;
    }

    /*modal conts*/
    .modal_conts .tb {
        max-width: inherit;
        min-width: inherit;
    }
    .modal_conts {
        width: 80%;
        max-height: 450px;
        min-width: auto;
        overflow: auto;
    }

    /*서브타이틀-따옴표*/
    .tit_quo::before {
        left: 15%;
    }
    .tit_quo::after {
        right: 15%;
    }

    /*오시는길2*/

    /*클릭다운및모달*/

    
    /*그래프*/


    /*사이트맵*/

    .txt_flow_4 .box {
        margin-right: 0;
        width: 100%;
    }
    .txt_flow_4 .box h6 {
        font-size: 1.125rem;
    }
    .txt_flow_4 .box h6 br {
        display: none;
    }


}








/*--------------------------------------700----------------------------------*/
@media screen and (max-width:700px) {
    .float_banner04 .box {
        padding: 20px;
    }
    .float_banner04 .box .cont h6 {
        font-size: 0.975rem;
    }
    .float_banner04 {
        position: inherit;
        flex-wrap: wrap;
        padding: 0 20px;
        bottom: -80px;
    }
    .float_banner04>div h5 {
        font-size: 1.325rem;
    }
    .float_banner04>div {
        width: 100%;
    }
    .float_banner04 .l {
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    /*협력사*/

    .box_hosting, .box_hosting_2 {
        flex-wrap: wrap;
    }
    .box_hosting>div, .box_hosting_2>div {
        width: 100%;
        flex-basis: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
    .box_hosting>div:last-child, .box_hosting_2>div:last-child {
        margin-bottom: 0;
    }

    .float_banner_l {
        position: inherit;
        width: 100%;
        height: auto;
        padding: 30px 20px;
        background-attachment: inherit;
        bottom: 0;
    }
    .float_banner_l p br {
        display: none;
    }
}






/*----------------------------------------640--------------------------------*/

@media screen and (max-width:640px) {
    
    #offcanvas {
        width: 100%;
        border-radius: 0;
    }
    .sub_port {
        width: 50%;
    }
    .ul_grid {
        padding-left: 0;
    }
    /*commonsetting*/
    .path .depth_btn {
        line-height: 48px;
        width: 100%;
        font-size: 14px;
        padding: 0 18px;
        height: 48px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: pre;
        min-width: auto;
    }
    .path .home {
        width: 48px;
        line-height: 48px;
    }
    .path .home img {
        padding: 18px 0;
    }

    .path_container .path {
        height: auto;
    }
    .path .depth1,
    .path .depth2 {
        width: calc(50% - 24px);
    }
	.path .depth3 {
	    border-top: 1px solid rgba(255, 255, 255, 0.2);
	    width: 100%;
	}
    .offcanvas {
        width: 100%;
        border-radius: 0;
        margin-right: -100%;
    }
    .offcanvas .tab {
        width: 120px;
        padding-top: 60px;
    }
    .offcanvas .h_tablinks {
        height: 54px;
        line-height: 54px;
        padding: 0 12px;
    }
    .offcanvas .menu_wrapper {
        width: calc(100% - 150px);
    }
    .offcanvas .h_tabcontent {
        margin-top: 60px;
    }
    .offcanvas .h_tabcontent .sub_nav > li > a {
        height: 54px;
        line-height: 54px;
        font-size: 15px;
        padding: 0 20px;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: pre;
    }
    .offcanvas .h_tabcontent .menu2_link:after {
        top: 24px;
        right: 12px;
    }
    .offcanvas .h_tabcontent .menu2_link.active:after {
        top: 30px;
        right: 12px;
    }
    .offcanvas .h_tabcontent .depth3 {
        padding: 18px;
    }
    .offcanvas .h_tabcontent .depth3 .menu3 {
        font-size: 14px;
        line-height: 24px;
    }



    /*헤더언어및로그인영역*/
    /* #header .open .map a {
        width: 80px;
    }
    #header .open {
        margin-right: 10px;
    } */


    /*서브타이틀-따옴표*/
    .tit_quo::before {
        left: 5%;
    }
    .tit_quo::after {
        right: 5%;
    }
    /*서브타이틀-좌측 불렛*/

	/*탭페이지*/

    /* 연혁디자인1 */
    .history_wrap {
        position: relative;
    }
    .history_wrap::before {
        position: absolute;
        left: 4%;
        top: 0px;
        width: 1px;
        height: 100%;
        background: #ddd;
        content: "";
    }
    .history {
        position: relative;
    }
    .history_wrap .left_wrap {
        position: relative;
        width: 100%;
        text-align: left;
        margin-left: 0;
        margin-bottom: 30px;
        padding-left: 70px;
        padding-right: 0;
        background: url(../images/sub/year_bg_r.png) 0 0 no-repeat;
        z-index: 9;
    }
    .history_wrap .right_wrap {
        position: relative;
        width: 100%;
        text-align: left;
        margin-left: 0;
        margin-bottom: 30px;
        padding-left: 70px;
        background: url(../images/sub/year_bg_r.png) 0 0 no-repeat;
        z-index: 9;
    }
    .history_wrap .year {
        font-size: 1.5rem;
        line-height: 34px;
        padding-top: 8px;
        background-color: #fff;
    }
    .history_wrap dl {
        margin-top: 10px;
        overflow: hidden;
        padding-left: 7px;
        width: 100%;
    }
    .history_wrap dt {
        word-break: keep-all;
        font-size: 14px;
        margin-bottom: 2px;
        clear: both;
    }
    .history_wrap dd {
        word-break: keep-all;
        margin-bottom: 8px;
    }
    .history_wrap .left_wrap dd,
    .history_wrap .left_wrap dt,
    .history_wrap .right_wrap dd,
    .history_wrap .right_wrap dt {
        width: 100%;
        text-align: left;
    }

    /*연혁디자인2*/

    /*연혁디자인3*/

    /*오시는길1*/


    /*다운로드*/


    /*질문답변*/



    /*폼*/

    .float_banner03 {
        background-attachment: inherit;
        padding: 40px 20px;
        height: auto;
    }
    .float_banner03 p {
        font-size: 1.325rem;
    }


    .intro_wrap .r .txt h5 {
        padding-left: 18px;
    }
.intro_wrap .r .txt h5::before {
    right: inherit;
    top: -4px;
    left: 0;
}
.intro_wrap .r .txt:nth-child(2) h5::before {
    right: inherit;
    top: -4px;
    left: 0;
}
.intro_wrap .r .txt:last-child h5::before {
    right: inherit;
    top: -4px;
    left: 0;
}

.policy h6 {
    font-size: 1.325rem;
}
}






/*----------------------------------------580--------------------------------*/

@media screen and (max-width:580px) {
    .company_wrap{
        grid-template-columns: repeat(2, 1fr);
    }
    .cert_img .cont:first-child {
        padding: 0 10px 0 0;
    }
    .cert_img .cont:nth-child(2) {
        padding: 0 10px 0 10px;
    }
    .cert_img .cont:last-child {
        padding: 0 0 0 10px;
    }
    .float_banner {
        padding: 90px 20px;
    }
    .spacetit, .stan_web .tit, .online_ask p {
        letter-spacing: normal;
        font-size: 1.5rem;
    }
    .btn_img {
        max-height: 200px;
    }
    .more_img:hover .opacity, .more_img:hover .opacity {
        width: 60px;
        height: 60px;
        font-size: 0.95rem;
        font-weight: normal;
        left: 44%;
    }
    .sub_container h2.subtit {
        margin-bottom: 20px;
    }
    .img_n_txt {
        flex-direction: column-reverse;
    }
    .img_n_txt .txt h2.subtit {
        text-align: left;
        display: inline-block;
    }
    .txt_n_img, .img_n_txt {
        flex-wrap: wrap;
        justify-content: inherit;
        align-items: unset;
    }
    .txt_n_img .txt, .img_n_txt .txt {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .txt_n_img .txt p br, .img_n_txt .txt p br {
        display: none;
    }
    .txt_n_img .img, .img_n_txt .img {
        width: 100%;
        margin-right: 0;
    }
    .program .subtit br, .program p br {
        display: none;
    }
    .up_wrap {
        bottom: 32px;
        top: inherit;
    }
    .quick_wrap {
        display: none;
    }
    .stan_web .tit, .online_ask p {
        margin-bottom: 20px;
    }
    .online_ask .btn_link {
        width: auto;
        height: 60px;
        line-height: 60px;
        font-size: 1.325rem;
    }
    .float_banner03 p span br {
        display: none;
    }
    .res_web .subtit br {
        display: none;
    }
    /*아이덴티티*/
    
    /*백그라운드 원*/

    /*탭페이지*/


    /*클릭다운및모달*/

    

}
	
	
	
	
	
/*----------------------------------------480--------------------------------*/

@media screen and (max-width:480px) {
    
    .partner_wrap .partner {
        width: calc((100% - 10px) / 2);
        margin-right: 10px;
    }
    .partner_wrap .partner:nth-child(5n) {
        margin-right: 10px;
    }
    .partner_wrap .partner:nth-child(3n) {
        margin-right: 10px;
    }
    .partner_wrap .partner:nth-child(2n) {
        margin-right: 0;
    }

    /*commonsetting*/
    .sub_visual h1 {
        font-size: 2.25rem;
    }
    #header .logo a, #header.on .logo a { width: 120px !important; background-position-y: center; }
	#header .logo { padding: 9px 0; }
    .footer .wrapper .logo img {
        width: 60%;
    }
    table th {
        font-size: 1rem;
    }

    /*헤더언어및로그인영역*/
    /* .lang .btn_lang, #header .open .login a {
        width: 54px;
    }
    #header .open {
        margin-right: 4px;
    } */

    /*서브타이틀-따옴표*/
    .tit_quo::before {
        left: 0;
        top: -35px;
    }
    .tit_quo::after {
        right: 0;
        bottom: -35px;
    }

    /*연혁디자인2*/

    /*협력사*/


    /*다운로드*/

    /* 로그인 */
    /*회원가입*/
    .txt_ex {
        display: block;
    }

    
    /*사이트맵*/

    /* 질문답변 board bottom 버튼 */

    /* 복리후생*/
    .box_welfare div{width: 100%;}
    .box_welfare div:nth-child(5){margin-bottom:50px;}
    .box_welfare div span{margin: 12px 0;}


}	
	
	
	
	
/*----------------------------------------380--------------------------------*/

@media screen and (max-width:380px) {
    .company_wrap{
       grid-template-columns: repeat(1, 1fr);
    }
}