@charset "UTF-8";

/* company 공통 =================================== */
.company .main_title .page_link_lg {display:inline-block; vertical-align:baseline; width:27px; height:27px; margin-bottom:-3px; margin-left:12px; background:url('../img/common/icon_window_lg.png') no-repeat center center; }
@media all and (max-width:767px){
    .company .main_title .page_link_lg {width:16px; height:16px; margin-bottom:-2px; background-size:cover; }
    .company .content_area {padding:80px 0 120px; }
}

/* COMMUNITY =================================== */
/* COMMUNITY > 수상내역 */
.awards .content_area {height:180vh;padding:180px 0 0px; background-image:url("../img/05.community/awards_bg.jpg");background-size:cover;}
.awards .keyvisual_area {background-image: url("../img/05.community/visual_bg_01.jpg"); }
.awards .keyvisual_area::after {background-image: url("../img/05.community/visual_bg_01.jpg"); }

.awards_con01 ul {float:left;width:33.33%;padding:0;margin:15px 0 15px 0;text-align:center;display:inline-block;}
.awards_con01 ul.scroll_motion {opacity:0; transform:translateY(50px); transition:all 0.5s; }
.awards_con01 ul.scroll_motion.on {opacity:1; transform:translateY(0);}
.awards_con01 .img_box {float:left;width:100%;padding:0;margin:0 0 0px 0; text-align:center;display:block;}
.awards_con01 .img_box img {max-width:70%;margin:0 auto;}
.awards_con01 .title_box {float:left;width:100%;padding:0;margin:0 0 15px 0;font-size:1.2rem;line-height:1.3em;font-weight:600;color:#000;display:block;}
.awards_con01 .stext_box {float:left;width:100%;padding:0;margin:0;font-size:0.95rem;line-height:1.4em;display:block;}

/* COMMUNITY > 고객응대
.ccm .content_area {padding:180px 0 160px;}
.ccm .keyvisual_area {background-image: url("../img/05.community/visual_bg_02.jpg"); }
.ccm .keyvisual_area::after {background-image: url("../img/05.community/visual_bg_02.jpg"); }

.ccm_con01 .step_box {float:left;width:100%;padding:0px 0; margin:75px 0 0px 0; text-align:center;display:block; }
.ccm_con01 .step_box ul {float:left;width:20%;padding:0;margin:0 0 0 0;display:inline-block;}
.ccm_con01 .step_box ul:first-child {margin:0 0 0 2.5%;}
.ccm_con01 .step_box ul:last-child {margin:0 2.5% 0 0;}
.ccm_con01 .step_box .title {float:left;width:100%;padding:20px 0;margin:0;font-size:1.5em;font-weight:600;color:#000;background-color:#fef8f0;display:block;}
.ccm_con01 .step_box .stext {float:left;width:100%;padding:20px 25px;margin:0;font-size:0.95rem;line-height:1.5em;background-color:#fff;display:block;}
.ccm_con01 .step_box .arrow {float:left;width:5%;padding:0;margin:5% 0 0 0;font-size:1.5em;color:#414141;display:inline-block;}
.ccm_con01 .step_box.scroll_motion {opacity:0; transform:translateY(50px); transition:all 0.5s; }
.ccm_con01 .step_box.scroll_motion.on {opacity:1; transform:translateY(0);}

.ccm_con01 .info_box {float:left;width:100%;padding:0px 80px; margin:50px 0 100px 0; background-color:#fafafa;display:block; }
.ccm_con01 .info_box .cs_center {float:left;width:100%;padding:70px 0 20px 0;line-height:1.5em;margin:0;display:block;}
.ccm_con01 .info_box .cs_center .tel {font-size:1.3em;font-weight:600;color:#000;margin:0px 0 30px 0;}
.ccm_con01 .info_box .cs_center .tel a {font-size:1.8em;font-weight:800;color:#000;display:inline-block;}
.ccm_con01 .info_box .cs_center .time {margin:0 0 20px 0;font-size:0.95rem;}
.ccm_con01 .info_box .cs_center .time .title {background:#000;color:#fff;border-radius:8px;padding:5px 12px;margin:0 15px 0 0;}
.ccm_con01 .info_box .cs_center .time a {font-weight:600;display:inline-block;}
.ccm_con01 .info_box.scroll_motion {opacity:0; transform:translateY(50px); transition:all 0.5s; }
.ccm_con01 .info_box.scroll_motion.on {opacity:1; transform:translateY(0);} */



/************ layout ************/
body.hidden {overflow:hidden; }
.w1360 {width:100%; max-width:1360px; margin:0 auto; }
.w1400 {width:100%; max-width:1400px; margin:0 auto; }
@media all and (max-width:1400px){
    .w1360,.w1400 {max-width:96%; }
}
@media all and (max-width:767px){
    .w1360,.w1400 {max-width:100%; padding:0 20px; box-sizing:Border-box; }
}

/************ common ************/
main {overflow: hidden;}
.en_mont {font-family: 'SUIT','Noto Sans KR', sans-serif;}
.mix_font {font-family: 'SUIT','Noto Sans KR', sans-serif;}
.content_area {padding:120px 0 220px;}
.clrfix::after{content: ""; display: block; clear: both;}

@media all and (max-width:767px){
    .content_area {padding:50px 0 160px; }
}



/************ text style ************/
.black {color:#000;}
.main_title {font-size:55px; font-weight: 600;}
.sub_title {font-size:45px; font-weight: 600;}
.sub_title_01 {font-size:46px; font-weight: 600;}
.sub_title_02 {font-size:30px; font-weight: 600;}
.sub_title_03 {font-size:24px; font-weight: 600;}
.sub_title_04 {font-size:22px; font-weight: 600;}

.sub_title_01:lang(en){line-height: 1.2;}


/************ company_title style ************/
.company_title {text-align:center; }
.company_title .eng {display:block; font-size:18px; font-weight:400; color:#666; font-family: 'SUIT','Noto Sans KR', sans-serif;}
.company_title .main_title {margin:30px 0 50px; line-height:1.4; word-break:keep-all; }
.company_title .main_title br.mo_ver {display:none;}
.company_title p.desc {font-size:18px; font-weight:400; color:#666; line-height:1.6; word-break:keep-all; }
.company_title .main_title:lang(en){margin-bottom:30px; font-family: 'SUIT','Noto Sans KR', sans-serif; font-size:56px; }
.company_title p.desc:lang(en){line-height: 1.5;}

.company_title.scroll_motion .main_title,
.company_title.scroll_motion .eng,
.company_title.scroll_motion p.desc {opacity:0; transform:translateY(50px); transition:all 0.5s; }
.company_title.scroll_motion.on .main_title,
.company_title.scroll_motion.on .eng,
.company_title.scroll_motion.on p.desc {opacity:1; transform:translateY(0);}
.company_title.scroll_motion.on .main_title {transition-delay:0.2s; }
.company_title.scroll_motion.on p.desc {transition-delay:0.4s; }

.company_title.scroll_motion.on .main_title:lang(en) {transition-delay:0s; }
.company_title.scroll_motion.on p.desc:lang(en) {transition-delay:0.2s; }


/************ keyvisual ************/
.keyvisual_area {position: relative; display:table; width:100%; height: 100vh; text-align: center; background-repeat:no-repeat; background-position:center center; background-attachment:fixed; background-size:cover; }

@media all and (max-width:767px){
    .keyvisual_area {background-attachment:unset}
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .keyvisual_area {background-attachment:scroll; }
}

.keyvisual_area:after {content: ""; position: absolute; top:0; left:0; bottom:0; right: 0; width:100%; height: 100%; background-repeat:no-repeat; background-position:center center; background-size:cover;
    -webkit-animation:bgMove 2s ease-in-out both;
    -moz-animation:bgMove 2s ease-in-out both;
    -ms-animation:bgMove 2s ease-in-out both;
    -o-animation:bgMove 2s ease-in-out both;
    animation:bgMove 2s ease-in-out both;}
.keyvisual_txt h1 {font-family: 'SUIT','Noto Sans KR', sans-serif;}
.keyvisual_area.fixed .keyvisual_navi, .keyvisual_area.fixed .keyvisual_scroll_down {opacity: 0; transition: all 0.5s; visibility: hidden;}
.keyvisual_area.fixed:after{display: none;}
.keyvisual_area.fixed .keyvisual_txt h1, .keyvisual_area.fixed .keyvisual_txt h2, .keyvisual_area.fixed .keyvisual_txt h3 {
    -webkit-animation:textDown 1.5s ease-in-out both;
    -moz-animation:textDown 1.5s ease-in-out both;
    -ms-animation:textDown 1.5s ease-in-out both;
    -o-animation:textDown 1.5s ease-in-out both;
    animation: textDown 1.5s ease-in-out both;}



@keyframes textDown {
    from {
            visibility: visible;
            opacity: 1;
            transform:translateY(0);
        }

    to {
        visibility: visible;
        opacity: 0;
        transform:translateY(-150px);
    }
}

/* bgmove */
@-webkit-keyframes bgMove {
    from {
        transform:scale(1.08) rotate(.001deg);

    }

    to {
        transform:scale(1);
    }
}
@-moz-keyframes bgMove {
    from {
        transform:scale(1.08) rotate(.001deg);
    }

    to {
        transform:scale(1);
    }
}
@-ms-keyframes bgMove {
    from {
        transform:scale(1.08) rotate(.001deg);
    }

    to {
        transform:scale(1);
    }
}
@-o-keyframes bgMove {
    from {
        transform:scale(1.08) rotate(.001deg);
    }

    to {
        transform:scale(1);
    }
}
@keyframes bgMove {
    from {
        transform:scale(1.08) rotate(.001deg);
    }

    to {
        transform:scale(1);
    }
}


.keyvisual_txt {position:relative; display:table-cell; vertical-align:middle; max-width:95%; z-index: 10;}
.keyvisual_txt > * {color: #fff;}
.keyvisual_txt h1 {font-size:5.5rem; font-weight: 700; animation:textUp 1s ease-in-out both; transition: 0.5s; transform: translateY(0); line-height:1.2; }
.keyvisual_txt h2 {font-size:1.5rem; font-weight: 300; margin-top:0px; line-height:1.8; animation:textUp 2s ease-in-out both; transition: 0.5s; transform: translateY(0);}
.keyvisual_txt h3 {font-size:1.2rem; font-weight: 300; margin-top:30px; line-height:1.5; animation:textUp 2s ease-in-out both; transition: 0.5s; transform: translateY(0);}
.keyvisual_txt h3 span {font-size:1.3rem; margin:0 0 30px 0;color:#fff;font-weight:500;display:block;}
.keyvisual_txt .mo_ver {display:none; }
@keyframes textUp {
    from {
        visibility: hidden;
        opacity: 0;
        transform:translateY(50px);
    }

    to {
        visibility: visible;
        opacity: 1;
        transform:translateY(0);
    }
}
.keyvisual_navi {position: absolute; left:0; bottom:0px; width:100vw; max-width:100%; height:6.8vh; transform: translateY(0%); text-align: left; z-index: 10;}
.keyvisual_navi span {float:left;width:50%; color: #fff; font-weight:600;text-align:center;padding:0;margin:0;background-color: rgba(0, 0, 0, .7);display:inline-block;}
.keyvisual_navi span::after {content: ""; position: absolute; right: -3px; top:50%; width:4px; height:7px; transform: translateY(-50%); background: url("../../img/common/icon_navi.png") no-repeat;}
/*.keyvisual_navi span:first-child {padding:0 15px 0 0; font-weight: 300;}
.keyvisual_navi span:nth-child(2) {font-weight: 300;}*/
.keyvisual_navi span:last-child::after {display: none;}
.keyvisual_navi a {font-family: 'SUIT','Noto Sans KR', sans-serif;}
.keyvisual_navi a:link {color:#fff;padding:20px 0 25px 0;font-size:0.95rem;font-weight:400;}
.keyvisual_navi a:hover {background-color:rgba(255, 255, 255, 1.0);color:#00BBD3;}
.keyvisual_navi .active {background-color:rgba(255, 255, 255, 1.0);color:#00BBD3;font-size:1.1rem !important;}

@media all and (max-width:767px){
.keyvisual_navi {display:none;}
}

.R_navi {float:left;width:100%;padding:50px 50px;margin:0;font-size:0.85rem;display:block;}
.R_navi span {color:#4ed0e0;font-weight:600;}
.R_navi.scroll_motion {opacity:0; transform:translateY(50px); transition:all 0.5s; }
.R_navi.scroll_motion.on {opacity:1; transform:translateY(0);}

@media all and (max-width:767px){
.R_navi {padding:30px 30px 0px 30px;font-size:0.75rem;}
}

.keyvisual_scroll_down {position: absolute; bottom:63px; left:50%; transform: translateX(-50%); z-index: 10;}
.keyvisual_scroll_down span {position: relative; display: block; padding-bottom: 60px; color:#fff; font-family: 'SUIT','Noto Sans KR', sans-serif;font-size:1.0rem;}
.keyvisual_scroll_down span::after {content: ""; position: absolute; left:50%; bottom:0; transform: translateX(-50%); width:2px; height: 50px; background: #ccc; animation: fullbar 5s infinite;}

@keyframes fullbar {
    0% {
        height: 50px;
        background: #ccc;
    }

    100% {
        height:0;
        background: #fff;
    }
}



.keyvisual_txt h2:lang(en) {font-size: 20px; font-weight: 300; line-height: 1.5;}
.keyvisual_navi span:first-child:lang(en), .keyvisual_navi span:nth-child(2):lang(en) {font-weight: 300;}

@media all and (max-width:767px){
    .keyvisual_txt h1 {font-size:2.5rem;margin-top:0px;}
    .keyvisual_txt h1:lang(en) {font-size:2.5rem;}
    .keyvisual_txt h2, .keyvisual_txt h2:lang(en) {width: 85%; margin:15px auto 0; font-size:1.2rem;line-height: 1.5;}
	.keyvisual_txt h3, .keyvisual_txt h3:lang(en) {width: 85%; margin:20px auto 0; font-size:1.3rem;line-height: 1.7;}
    .keyvisual_txt .mo_ver {display:block; }
   /* .keyvisual_navi {display:none; }*/
   .keyvisual_scroll_down {bottom:0px;}
    .keyvisual_scroll_down span {font-size:0.90rem;}
}