@charset "utf-8";


/* CSS Document */

/*헤더*/

/*body*/
#body_wrap{}
.section { width: 100%; height: 100%; position: relative;}

/*main*/
#section1 {width: 100%; height: 100vh;  display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden;}
#section1 .bg_main {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url("../img/main.jpg");background-size: cover; overflow: hidden; animation-name: main ; animation-duration: 20s; animation-fill-mode: both;}
@keyframes main {
    from {
        scale: 1;
    }
    to {
        scale: 1.3;
    }
}
#section1 .s1_wrap {max-width: 540px; display: flex; flex-direction: column; justify-content: center;align-items: center;position: absolute; top: 40%; padding-left: 15px; padding-right: 15px;}
#section1 .s1_wrap h1 {font-family: "Noto Sans KR Regular"; font-size: 90px; color: #FFFFFF; margin-bottom: 24px;}
#section1 .s1_wrap p {font-family: "Noto Sans KR Regular"; font-size: 20px; color: #FFFFFF; text-align: center; line-height: 26px; word-break: keep-all;}
#section1 .scroll {position: absolute; top: 85%;}

@media screen and (max-width: 1200px){
    #section1 {min-height: 800px;}
}
@media screen and (max-width: 600px){
    #section1 .s1_wrap {top: 30%;}
    #section1 .s1_wrap p {font-size: 16px;}
}

/*about*/
#section2 {width: 100%; height: 100vh;}
#section2 ul {}
#section2 ul li{width: 25%; min-width: 350px; height: 100vh; float: left;}/*1200이하일시 세로형으로 변경...*/

#section2 ul .s2_wrap1 {background-color: #333333;}
#section2 ul .s2_wrap1 .s2_w1_inner{margin-left: 46px; position: relative;}
#section2 ul .s2_wrap1 .s2_w1_inner h1 {font-family: "Noto Sans KR Medium"; font-size: 48px; color: #FFFFFF; margin-top: 200px;}
#section2 ul .s2_wrap1 .s2_w1_inner h1 span {color: #ff5800;}
#section2 ul .s2_wrap1 .s2_w1_inner .line {color: #FFFFFF; width: 110px; height: 30px; border-bottom: solid 1px rgba(255,255,255,0.50); display: block; margin-bottom: 70px;}
#section2 ul .s2_wrap1 .s2_w1_inner p {color: #FFFFFF; font-family: "Noto Sans KR Regular"; font-size: 1.1rem; line-height: 30px; width: 420px; width: 90%; word-break: keep-all;}
#section2 ul .s2_wrap1 a{color: #FFFFFF; cursor: pointer; display: block; position:absolute; top: 90%; left: 20%;font-family: "Noto Sans KR Regular"; font-size: 20px;}

#section2 ul .s2_wrap2 {background-image: url("../img/about1.jpg"); background-size: cover; display: flex; justify-content: center; align-items: center;flex-wrap: wrap;}
#section2 ul .s2_wrap3 {background-image: url("../img/about2.jpg"); background-size: cover; display: flex; justify-content: center; align-items: center;flex-wrap: wrap;}
#section2 ul .s2_wrap4 {background-image: url("../img/about3.jpg"); background-size: cover; display: flex; justify-content: center; align-items: center;flex-wrap: wrap;}
#section2 ul .s2_w234_inner {display: flex; flex-direction: column; flex-wrap: wrap;}
#section2 ul .s2_w234_inner img {width: 156px; margin: 0 auto;}
#section2 ul .s2_w234_inner img:first-of-type {width: 140px;}
#section2 ul .s2_w234_inner dl {}
#section2 ul .s2_w234_inner dl dt {color: #FFFFFF;font-family: "Noto Sans KR Bold"; font-weight: 600;font-size: 48px; width: 320px; text-align: center; padding-top: 75px; padding-bottom: 68px;}
#section2 ul li:last-of-type dl dt {padding-top: 48px; padding-bottom: 32px;}
#section2 ul .s2_w234_inner dl dt span {color: #cca471}
#section2 ul .s2_w234_inner dl dd {color: #FFFFFF;font-family: "Noto Sans KR Regular"; font-size: 20px;text-align: center;}

@media screen and (max-width: 1400px){
	#section2 ul li {width: 100%; height: 50vh; min-height: 500px;}
	#section2 {height: 200vh;}
    #section2 ul .s2_wrap1 .s2_w1_inner h1 {margin-top: 100px;}
    #section2 ul .s2_wrap1 .s2_w1_inner p {max-width: 800px;}
}

/*product*/
#phantom_leafgreen_sec02_back { width:100%; display:inline-block; padding:55px 0px; background:url('../img/phantom/main_sec02.jpg') no-repeat top center; border-bottom:1px solid #e1e1e1; }
#phantom_leafgreen_sec02_back .wrap { width:100%; max-width:1200px; margin:0 auto; display:flex; align-items:center;}



#phantom_leafgreen_sec02 { width:100%; display:inline-block; position:relative; padding:150px 0px; }
#phantom_leafgreen_sec02 .wrap {position:relative; z-index:1 ;font-family:'Noto sans KR'; width:100%; max-width:1200px; text-align:center; margin:0 auto; }
#phantom_leafgreen_sec02 .wrap > h1 { font-size:40px; letter-spacing:-1px; color:#000; font-family: "Noto Sans KR Regular";}
#phantom_leafgreen_sec02 .wrap > h1 b { color:#ff5800;} 
#phantom_leafgreen_sec02 .wrap > h2 { font-size:16px; letter-spacing:-1px; color:#777; font-weight:500; margin-top:20px; }
#phantom_leafgreen_sec02 .wrap > ul { width:100%; display:flex; margin-top:50px; align-items: center; justify-content: space-around; align-content: center;}
#phantom_leafgreen_sec02 .wrap > ul > li { width:100%; border:5px solid #fff; transition:0.3s ease all; height:100%; min-height:500px; margin-left:30px; position:relative; z-index: 1;} 
#phantom_leafgreen_sec02 .wrap > ul > li:nth-child(1) { margin-left:0;}
#phantom_leafgreen_sec02 .wrap > ul > li.bg01 { background:url('/theme/leafgreen/img/main_pro_img_01.jpg') no-repeat center center; background-size:cover;}
#phantom_leafgreen_sec02 .wrap > ul > li.bg02 { background:url('/theme/leafgreen/img/main_pro_img_02.jpg') no-repeat center center; background-size:cover;}
#phantom_leafgreen_sec02 .wrap > ul > li.bg03 { background:url('/theme/leafgreen/img/main_pro_img_03.jpg') no-repeat center center; background-size:cover;}
#phantom_leafgreen_sec02 .wrap > ul > li > .title_position { position:absolute; bottom:0px; text-align:left; color:#fff; display: block; z-index: 3; width: 100%;height: 40%;background-color: rgba(0, 0, 0, 0.6); padding-left: 20px; padding-top: 40px;}
#phantom_leafgreen_sec02 .wrap > ul > li > .title_position > h1 { font-size:24px; letter-spacing:-1px; font-weight:600; margin:0; line-height:24px;}
#phantom_leafgreen_sec02 .wrap > ul > li > .title_position > p { font-size:16px; letter-spacing:-1px; font-weight:500; margin:15px 0;}
#phantom_leafgreen_sec02 .wrap > ul > li > .title_position > a > h2 { font-size:13px; transition:0.3s ease all; letter-spacing:0px; font-weight:600; border: solid 3px #fff; border-radius: 15px; padding:10px 30px; display:inline-block;}
#phantom_leafgreen_sec02 .wrap > ul > li > .title_position > a { color:#fff; cursor: pointer;}
#phantom_leafgreen_sec02 .wrap > ul > li > .bg_black {width: 100%; height: 100%; background-color: #000; z-index: 30;}

@media screen and (max-width: 1200px) {
    #phantom_leafgreen_sec02 .wrap > ul > li {margin-left: 0;}
}

/*contact*/
#section4 {width: 100%; height: 100vh; min-height: 1300px;}
#section4 .s4_wrap {margin-top: 100px;}
#section4 .s4_wrap .s4_title {}
#section4 .s4_wrap .s4_title h1 {font-family: "Noto Sans KR Regular"; font-size: 40px; text-align: center;}
#section4 .s4_wrap .s4_title h1 span{color: #ff5800;}
#section4 .s4_wrap .s4_title  .hline {color: #666666; width: 110px; height: 30px; display: block;text-align: center; margin: 0 auto; border-bottom: solid rgba(199,199,199,1.00) 1px;}
#section4 .s4_wrap .s4_title p {font-family: "Noto Sans KR Regular"; font-size: 16px; color: #666666;text-align: center; margin-top: 26px; margin-bottom: 100px;}

#section4 .content_wrap {display: flex; justify-content: center; flex-wrap: wrap; margin-top: 60px;}
#section4 .s4_wrap .s4_map {margin-right: 10%;}
#section4 .s4_wrap .s4_map iframe {width: 750px; height: 500px;}
#section4 .s4_wrap .s4_contact {}
#section4 .s4_wrap .s4_contact ul {margin-top: 26px;}
#section4 .s4_wrap .s4_contact ul li {position: relative; }
#section4 .s4_wrap .s4_contact ul li input {border: none; background-color: #eeeeee; width: 542px; height: 60px; font-family: "Noto Sans KR Regular"; font-size: 18px; padding-left: 90px; margin: 9px 0;}
#section4 .s4_wrap .s4_contact ul li textarea {border: none; background-color: #eeeeee; width: 542px; height: 60px; font-family: "Noto Sans KR Regular"; font-size: 18px; padding-left: 90px; margin: 9px 0;}
#section4 .s4_wrap .s4_contact ul li .c_content {height: 150px; padding: 20px; width: 542px; align-items: flex-start;}
#section4 .s4_wrap .s4_contact ul li:first-of-type img {position: absolute; margin: 20px 30px;}
#section4 .s4_wrap .s4_contact ul li:nth-of-type(2) img {position: absolute; margin: 20px 30px;}
#section4 .s4_wrap .s4_contact ul li:nth-of-type(3) {}
#section4 .s4_wrap .s4_contact ul li button {width: 542px; height: 60px; border: none; background-color: #ff5800; font-family: "Noto Sans KR Regular"; font-size: 18px; color: #FFFFFF; margin-top: 12px;}

@media screen and (max-width: 1200px){
    #section4 { min-height: 1200px;}
	#section4 .s4_wrap .s4_map iframe {width: 90vw; margin: 0 auto;}
	#section4 .s4_wrap .s4_map {margin: 0;}
	#section4 {height: 120vh;}
}
@media screen and (max-width: 1440px){
    #section4 {height: 120vh;}
    #section4 .content_wrap {flex-direction: column; align-items: center;}
    #section4 .s4_wrap .s4_map {margin: 0;}

}
@media screen and (max-width: 550px){
    #section4 .s4_wrap .s4_contact ul li input,
    #section4 .s4_wrap .s4_contact ul li .c_content,
    #section4 .s4_wrap .s4_contact ul li button {width: 90vw;}
}

/*SUB PAGE*/

/* 회사소개 */
.company_info_wrap {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; margin: 100px 0;}
.company_info_inner {}
.company_info_inner::after {content:""; clear:both; display: block;}
.company_info_inner .info_left {position:relative; float:left; padding:0 80px 50px 0}
.company_info_inner .info_left .img_big {position:relative; top:0; left:0;}
.company_info_inner .info_left .img_big img {border-radius:20px 0 20px 0}
.company_info_inner .info_left .img_small {position:absolute; top:70%; left:65%}
.company_info_inner .info_left .img_small img {border-radius:20px 0 20px 0}
.company_info_inner .info_left  .mush_img {position:absolute; top:58%; right:-10%;}
.company_info_inner .info_left  .mush_img img {width: 60%; }
.company_info_inner .info_right {float:left; width:51%; margin:0 0 0 70px; max-width: 800px;}
.company_info_inner .info_right h5 {font-size:24px; font-family: 'Noto Sans KR'; font-weight:bold; line-height: 30px;}
.company_info_inner .info_right p {font-size:16px; font-family:'Noto Sans KR'; margin:50px 0 0 0}
.company_info_inner .info_right .info_name {font-size:18px; font-family:'Noto Sans KR'; font-weight: 600; float: right;}
.company_info_inner .info_right .info_name img { margin-left: 20px;}


.btl-1 {
    animation: move_1 4s ease-in-out infinite;
  }
  
  @keyframes move_3 {
    0%,
    100% {
      transform: translate(0, -10px) rotate(6deg);
    }
    50% {
      transform: translate(-20px, 25px) rotate(-8deg);
    }
  }
  
  @keyframes move_2 {
    0%,
    100% {
      transform: translateY(6px) rotate(6deg);
    }
    50% {
      transform: translateY(-20px) rotate(-8deg);
    }
  }
  
  @keyframes move_1 {
    0%,
    100% {
      transform: translateY(0) rotate(-6deg);
    }
    50% {
      transform: translateY(-20px) rotate(8deg);
    }
  }
  
  @media (min-width:320px ) and (max-width:1083px) {
    .company_info_inner .info_right {float:left; width:100%; margin:15% 0 0 0;}
    .company_info_inner .info_right h5 {font-size:20px; font-family: 'Noto Sans KR'; font-weight:bold}
    
  }
  @media screen and (max-width:1100px) {
    .company_info_inner .info_left {margin-bottom: 50px;}
  }

  /*회사소개 끝*/


/*CI*/
.ci_wrap {width: 100%; height: 100%; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; margin-top: 50px;}

.ci_concept_wrap1 {display: flex; flex-wrap: wrap;}
.ci_concept_wrap1 .concept_title{float: left; display: block; width: 100px; height: 300px; margin-right: 30px; font-family: "Noto Sans KR Regular"; font-size: 30px;}
.ci_concept_wrap1 .concept_ct_wrap {max-width: 1200px; margin-top: 100px;}
.ci_concept_wrap1 .concept_ct_wrap span:first-of-type {font-family: "Noto Sans KR Regular"; font-size: 20px; margin-bottom: 25px; display: block; }
.ci_concept_wrap1 .concept_ct_wrap .concept_ct_under {display: flex; flex-wrap: wrap; flex-direction: row; width: 86%; margin-top: 50px; margin-bottom: 100px;}
.concept_ct_under .concept_ct_under_left {margin-right: 20px;  width: 40%;}
.concept_ct_under .concept_ct_under_left img {width: 80%; min-width: 300px;}
.concept_ct_under .concept_ct_under_right {width: 50%; min-width: 350px;}
.concept_ct_under_right .line_cover {margin: 20px 0;}
.concept_ct_under_right .line_cover span:first-of-type {font-family: "Noto Sans KR Regular"; font-size: 20px; text-align: center; line-height: 30px; display: block; float: left; background-color: #EEEEED; width: 30px; border-radius: 30px; margin-right: 15px;}
.concept_ct_under_right .line_cover .lc_txt {font-family: "Noto Sans KR Regular"; font-size: 14px; text-align: left; display: block; width: 100%;}
/*
.ci_concept_wrap2 {}
.ci_concept_wrap2 .mst_title {width: 100%;max-width: 1200px;display: flex; flex-wrap: wrap;}
.ci_concept_wrap2 .mst_title .mst_title_title {float: left; display: block; width: 100px; height: 300px; margin-right: 30px; font-family: "Noto Sans KR Medium"; font-size: 24px;}
.ci_concept_wrap2 .title_ct_wrap {}
.ci_concept_wrap2 .title_ct_wrap .title_linecover {display: flex; flex-wrap: wrap;}
.ci_concept_wrap2 .title_ct_wrap .title_linecover div {font-family: "Noto Sans KR Bold"; font-size: 45px; width: 350px; margin-right: 90px; line-height: 45px; margin: 10px 0;}
.ci_concept_wrap2 .title_ct_wrap .title_linecover div span {color: #ff5800;}
.ci_concept_wrap2 .title_ct_wrap .title_linecover .title_txt {font-family: "Noto Sans KR Regular"; font-size: 16px; text-align: left; display: block; line-height: 65px; min-width: 350px;}
*/
@media screen and (max-width: 1350px) {
	.ci_concept_wrap1 .concept_title {height: auto; float: clear;}
	.ci_concept_wrap2 .mst_title .mst_title_title {height: auto;}
}
@media screen and (max-width: 1370px) {
    .ci_concept_wrap1 {align-items: center; justify-content: center;}
    .ci_concept_wrap1 .concept_ct_wrap .concept_ct_under {flex-direction: column; align-items: center;}
    .ci_concept_wrap1 .concept_title {height: 70px;}
    .ci_concept_wrap1 .concept_ct_wrap {max-width: 1000px; margin: 100px 10% 0 10%;}
}
@media screen and (max-width: 1000px){
    .concept_ct_under .concept_ct_under_left {margin: 0; width: 300px;}
}
@media screen and (max-width: 850px){
	.ci_concept_wrap1 {align-items: center; justify-content: center;}
    .ci_concept_wrap1 .concept_ct_wrap .concept_ct_under {flex-direction: column; align-items: center;}
    .concept_ct_under .concept_ct_under_right {margin-top: 50px;}
    .concept_ct_under .concept_ct_under_left {margin: 0;}
    
}
/*CI끝*/

  /*연혁*/
.company_03{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 60px 0 100px 0;
}
.company_03 .year_title { display: block;font-family: "Noto Sans KR Regular"; font-size: 30px;}

.company_03 .history-left h2 {
    font-size: 47px;
    color: #000;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    float: left;

}

.company_03 .history-left h2 span {
    font-size: 49px;
    color: #000;
    font-family: 'Noto Sans KR';
    font-weight: 800;
    padding-left: 0;
    margin-left: 0;

}

.company_03 .history-left span {
    font-size: 26px;
    line-height: 68px;
    padding-left: 20px;
}

.company_03 .history-left p.text {
    color: #484848;
    font-family: 'Noto Sans KR';
    margin-top: 30px;


}

.company_03 .history-left .image {
    margin-top: 70px;
}

.company_03 .history-right {
    background: url("/theme/leafgreen/img/dot_back.png") 9px 0% repeat-y;
    margin-top: 10px;
    margin-left: 80px;
}

.company_03 .history-right .box {
    background: url('/theme/leafgreen/img/dot.png') 0 14px no-repeat;
    margin-bottom: 30px;
    border-bottom: 0;
    padding-left: 60px;
    font-size: 30px;
    font-weight: 900;
}

.company_03 .history-right .box .image {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}

.company_03 .history-right .box h2 {
    font-weight: 900;
    font-family: 'Noto Sans KR';
    margin-bottom: 20px;
    color: #000;
}

.company_03 .history-right dl {
    display: flex;
    margin-bottom: 8px;
}

.company_03 .history-right dl dt span {
    background: #efefef;
    display: block;
    border-radius: 1em;
    text-align: center;
    font-size: 15px;
    color: #a1a1a1;
    padding-top: 6px;
    padding-bottom: 6px;
    width: 50px;
    margin-right: 12px;
    font-weight: 600;
}

.company_03 .history-right dl dd {
    font-size: 18px;
    color: #686868;
    font-weight: 400;
    line-height: 30px;

}

@media screen and (max-width: 616px) {
    .company_03 .year_title {margin-bottom: 40px;}
    .company_03 .history-right dl dd {font-size: 16px;}
    .company_03 .history-right .box .image {width: 70px; height: 70px;}
    .company_03 .history-right .box h2 {font-size: 26px;}
}

/*연혁 끝*/

/* 오시는 길 */
.company_04{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 100px;
}

.company_04 #map p.sky {
    position: absolute;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 16px 48px 18px;
}


.company_04 .table_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    margin-top: 60px;
}

.company_04 .table_wrap .title h2 {
    font-size: 30px;
    color: #000;
    margin-bottom: 24px;
    font-family: "Noto Sans KR Regular";
}

.company_04 .table_wrap iframe {
    margin: 40px 0;
    width: 1000px;
}

.company_04 .table_wrap .map_under_wrap {border-top: #000 3px solid; border-bottom: #a1a1a1 1px solid; display: flex; flex-wrap: wrap; flex-direction: column;}
.company_04 .table_wrap .map_under_wrap .mu_left {display: flex; flex-wrap: wrap;  margin: 20px 0 10px 0;}
.company_04 .table_wrap .map_under_wrap .mu_left .mu_l_add {font-family: 'Noto Sans KR';font-weight: 600; font-size: 20px; margin-right: 10px;}
.company_04 .table_wrap .map_under_wrap .mu_left .mu_l_add_r {font-family: 'Noto Sans KR';font-weight: 400; font-size: 18px;}
.company_04 .table_wrap .map_under_wrap .mu_right {display: flex; flex-wrap: wrap; margin-bottom: 20px;}
.company_04 .table_wrap .map_under_wrap .mu_right .mu_r_tel {font-family: 'Noto Sans KR';font-weight: 600; font-size: 20px; margin-right: 10px;}
.company_04 .table_wrap .map_under_wrap .mu_right .mu_r_tel_r {font-family: 'Noto Sans KR';font-weight: 400; font-size: 18px;}

@media screen and (max-width: 1000px) {
    .company_04 .table_wrap iframe {width: 90vw;}
}

@media screen and (max-width: 600px) {
    .company_04 .table_wrap .map_under_wrap .mu_left {flex-direction: column;}
    .company_04 .table_wrap .map_under_wrap .mu_right {flex-direction: column;}
    .company_04 .table_wrap .map_under_wrap .mu_left .mu_l_add {margin: 10px 0;}
    .company_04 .table_wrap .map_under_wrap .mu_right .mu_r_tel {margin: 10px 0;}
}

/* 오시는 길 마감 */

/*사업소개*/
.company_info  { width:100%; height:auto;  }
.company_info .Ideology { width:100%; padding-bottom:100px;}
.company_info .Ideology .inner { max-width:1240px; margin:auto; clear:both; display: flex; flex-direction: column; flex-wrap: wrap;}
.company_info .Ideology .inner h2 {font-size: 36px;font-weight: bold;color: #000; letter-spacing:5px; text-align:center; padding:95px 0 50px 0}
.company_info .Ideology .inner .point{color: #ff5800;}
.company_info .Ideology .inner h2:after { content: " ";display: block; margin:20px auto; width:40px; height: 1px; background-color:#000; clear: both;}
.company_info .Ideology .info_ct_wrap {display: flex; flex-wrap: wrap; max-width:1240px;}
.company_info .Ideology .info_ct_wrap .dl_wrap {width:33%; min-width: 300px;; padding:20px; border-right:1px solid #ddd}
.company_info .Ideology .info_ct_wrap .dl_wrap:last-child { border:0}
.company_info .Ideology .info_ct_wrap .dl_wrap .web_icon { padding:0 0 20px 0; text-align:center; color:#ff4200}
.company_info .Ideology .info_ct_wrap .dl_wrap .web_icon img {width: 150px;}
.company_info .Ideology .info_ct_wrap .dl_wrap .dt_div { font-size:20px; height:60px; font-weight:bold; letter-spacing:5px; text-align:center} 
.company_info .Ideology .lead { line-height:1.6; text-align:center; font-size:16px; color:#555}

@media screen and (max-width:1100px) {
    .company_info .Ideology .info_ct_wrap {flex-direction: column; align-content: center;}
    .company_info .Ideology .info_ct_wrap .dl_wrap {width: 100%; padding: 30px;}
}
/*사업소개 끝*/

@media screen and (min-width:1200px){
    .mb_view { display: none;}
}