/*
	Copyright 2020 Raonbnp
	http://raonbnp.com, http://raonwebstore.com
*/
@charset "UTF-8";
@import '/_css/common.css'; /* front, admin 공통*/
@import '/_css/member.css'; /* front member 공통*/
@import '/_css/board.css'; /* front member 공통*/
@import 'loading.css';
@import 'fontSet.css';
@import 'basic.css';
@import 'layout.css';




/*인사말*/
#intro_sec01{ position:relative;}
#intro_sec01 .img_area{ z-index:-1; position:absolute; top:0; left:0; width:50%; height:100%; }
#intro_sec01 .img_area > div{ position:relative; width:85%; height:100%; background:url('../_img/sub/intro_img01.jpg') no-repeat center / cover;  }
#intro_sec01 .img_area > div:after,
#intro_sec01 .img_area > div:before{ content:""; position:absolute; right:0;  transform:translateX(50%); -webkit-transform:translateX(50%); -moz-transform:translateX(50%);}
#intro_sec01 .img_area > div:after{ top:9.5rem; width:14.7rem; max-width:25%; height:1rem; background:#0069b4; }
#intro_sec01 .img_area > div:before{ z-index:-1; top:11.5rem; width:3.8rem; max-width:15%; height:.7rem; background:#afcb08;  }
#intro_sec01 .txt_area h3{ position:relative; width:50%; padding:6rem 0; margin-left:auto;  font-size:3rem; font-weight:300; line-height:1.4; }
#intro_sec01 .txt_area h3:after{ content:"HKWOOD"; z-index:-1; position:absolute; top:0; right:0; font-size:11rem; color:#fff; font-weight: 900; line-height:1; text-shadow: 0 0 1px rgba(0,0,0,0.7); }
#intro_sec01 .txt_area h3 b{ font-weight:700; }
#intro_sec01 .txt_area .content_area{ width:70%; margin-left:auto; padding:8rem; background:#fff;  }
#intro_sec01 .txt_area .content_area p span{ display:block; font-size:1.8rem; margin-bottom:5rem;}
#intro_sec01 .txt_area .content_area p strong{ display:block; margin-bottom:5rem; font-size:2.4rem; }
#intro_sec01 .txt_area .content_area .sign{ display:block; font-size:2.4rem; text-align:right;}

@media all and (max-width:1199.98px) {
    #intro_sec01 .txt_area h3{ font-size:2.5rem;}
    #intro_sec01 .txt_area h3:after{ font-size:9rem;}

    #intro_sec01 .txt_area .content_area{ padding:5rem;}
    #intro_sec01 .txt_area .content_area p span{ font-size:1.6rem; margin-bottom:3rem;}
    #intro_sec01 .txt_area .content_area p strong{ font-size:2rem; margin-bottom:3rem; }
    #intro_sec01 .txt_area .content_area .sign{ font-size:2rem;}
}
@media all and (max-width:767.98px) {
    #intro_sec01 .img_area{ z-index:1; position:relative; width:100%; padding-top:45%; }
    #intro_sec01 .img_area div{ position:absolute; top:0; left:0; width:90%; }
    #intro_sec01 .img_area > div:after{ top:15%;}
    #intro_sec01 .img_area > div:before{ top:25%;}
    #intro_sec01 .txt_area h3{ width:100%; padding:3rem 0; }
    #intro_sec01 .txt_area h3:after{ top:-20%; font-size:7rem;  }
    #intro_sec01 .txt_area .content_area{ width:100%; padding:0; }
}
    

/*오시는길*/
#location_sec01 .root_daum_roughmap_landing{ width:100%; height:50rem; border:1px solid #ddd; }
#location_sec01 .root_daum_roughmap .wrap_map{ height:100%; }
#location_sec01  .root_daum_roughmap .map_border{ display:none;}
#location_sec01 .info_area{ position:relative; padding:5rem 10%; text-align:center; border:1px solid #ddd; border-top:0;  }
#location_sec01 .info_area ul{ display:flex; flex-wrap:wrap; justify-content: center; text-align:left;}
#location_sec01 .info_area ul li{ position:relative; width:60%; flex-grow: 1;  padding:1.5rem 15px 1.5rem 19rem; margin:1.5rem 0; font-size:1.8rem; }
#location_sec01 .info_area ul li:nth-child(2n+2){ width:40%;}
#location_sec01 .info_area ul li b{ position:absolute; top:1.5rem; left:0; padding-left:7.5rem; font-size:2.2rem;}
#location_sec01 .info_area ul li i{ position:absolute; top:0; left:0; width:5rem; height:5rem; line-height:5rem; text-align:center; border-radius:100%; background:#0069b4; font-size:2.5rem; color:#fff; }

@media all and (max-width:1440px) {
    #location_sec01 .info_area{ padding:3rem;}
    #location_sec01 .info_area ul li{ width:50%; }
    #location_sec01 .info_area ul li:nth-child(2n+2){ width:50%;}

}
@media all and (max-width:1199.98px) {
    #location_sec01 .root_daum_roughmap_landing{ height:40rem;  }
}

@media all and (max-width:991.98px) {
    #location_sec01 .root_daum_roughmap_landing{ height:30rem;  }
    #location_sec01 .info_area ul li{ font-size:1.6rem; padding:.5rem 15px .5rem 13rem; margin:.5rem 0;}
    #location_sec01 .info_area ul li b{ top:.5rem; font-size:1.8rem; padding-left:4.5rem;}
    #location_sec01 .info_area ul li i{ width:3.5rem; height:3.5rem; line-height:3.5rem; font-size:2rem;}
}

@media all and (max-width:767.98px) {
    #location_sec01 .info_area ul li{ margin:1rem 0;}
}

@media all and (max-width:575.98px) {
    #location_sec01 .info_area ul li{ width:100%; padding-left:0; }
    #location_sec01 .info_area ul li b{ position:static; display:block; margin-bottom:1rem; }
}

/*사업분야*/
#business_sec p{ font-size:1.8rem; padding-left:2.5rem; }

#business_sec .tit_area{ text-align:center; margin-bottom:3rem; }
#business_sec .tit_area h3{ font-size:2.4rem; font-weight:700;  }
#business_sec .tit_area p{ padding:0; margin-top:1rem;}

#business_sec .circle_area{ padding:5rem 0; background:#f9f9f9;}
#business_sec .circle_list{ z-index:1; position:relative; display:flex; flex-wrap:wrap;}
#business_sec .circle_list:after{ z-index:-1; content:""; position:absolute; top:12rem; left:15%; right:15%; height:2rem; background:url('/html/_img/sub/business_circle_line.png') repeat-x center;}
#business_sec .circle_list li{ position:relative; width:33.33%; padding:0 1rem; text-align:center; }
#business_sec .circle_list li:after{ content:"\ea3e"; position:absolute; top:11.3rem; right:0; font-size:2rem; color:#afcb08;  font-family: xeicon;
    transform:translateX(50%); -webkit-transform:translateX(50%); -moz-transform:translateX(50%);
}
#business_sec .circle_list li:last-child:after{ content:none; }
#business_sec .circle_list .img_area{ display:block; width:25rem; height:25rem; margin:0 auto 2rem; border-radius:100%; border:1.2rem solid #fff; box-shadow:0 -1rem 1rem rgba(0,0,0,0.05); 
    background-position:center; background-repeat:no-repeat; background-size:cover; 
}
#business_sec .circle_list .img_area img{ width:100%; }
#business_sec .circle_list li strong{ display:inline-block; padding:.5rem 3rem; min-width:17.5rem; background:#afcb08; font-size:1.8rem; color:#fff; }

#business_sec .step_list{ display:flex; flex-wrap:wrap; max-width:120rem; margin:0 auto 3rem;}
#business_sec .step_list li{ position:relative; width:14.28571428571429%;}
#business_sec .step_list li:after{ content:"\ea3e"; position:absolute; top:50%; right:0; font-size:2rem; color:#0069b4;  font-family: xeicon;
    transform:translate(50%,-50%);  -webkit-transform:translate(50%,-50%);  -moz-transform:translate(50%,-50%); 
}
#business_sec .step_list li:last-child:after{ content:none; }
#business_sec .step_list li div{ position:relative; display:block; margin:0 auto; width:70%; padding-top:70%; background:#f2f2f2; border-radius:100%; }
#business_sec .step_list li.color div{ background:#0069b4; color:#fff;   }
#business_sec .step_list li div span{ position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items: center; justify-content: center; text-align:center;  font-size:1.4rem; font-weight:700; line-height:1.4;}

#business_sec .com_sub_tit01{ margin-top:5rem; }


@media all and (max-width:1199.98px) {
    #business_sec p{ font-size:1.6rem;}
    #business_sec .tit_area h3{ font-size:2rem;}

    #business_sec .circle_list:after{ top:9rem;}
    #business_sec .circle_list li:after{ top:8.3rem; }
    #business_sec .circle_list .img_area{ width:20rem; height:20rem;}
    #business_sec .circle_list li strong{ font-size:1.6rem; }

    #business_sec .step_list li div span{ font-size:1.4rem;}
} 

@media all and (max-width:991.98px) {
    #business_sec .step_list li{ width:20%; margin:.5rem 0; }
    #business_sec .step_list li:nth-child(5n+5):after{ display:none;}
}

@media all and (max-width:767.98px) {
    #business_sec .circle_list li{ width:50%; }
    #business_sec .circle_list li:nth-child(2n+2):after{ content:none; }
    #business_sec .circle_list li:last-child{ width:100%; margin-top:3rem; }
}

@media all and (max-width:575.98px) {
    #business_sec .circle_list:after,
    #business_sec .circle_list li:after{ content:none; }
    #business_sec .circle_list .img_area{ width:13rem; height:13rem; border-width:.8rem; }
    #business_sec .circle_list li strong{ min-width:10rem; }

    #business_sec .step_list li{ width:33.33%; }
    #business_sec .step_list li:nth-child(5n+5):after{ display:block;}
    #business_sec .step_list li:nth-child(3n+3):after{ display:none; }
}