@charset "utf-8";

/* ==========================================================================
   COMMON
   ========================================================================== */
#main section .button1{display:inline-block}
#main section .button1 a{display:block; padding:20px 54px; border:1px solid #333; transition:.2s ease-in-out}
#main section .button1 span{display:inline-block; font-size:17px; font-weight:400; color:#333; letter-spacing:-0.25px; line-height:16px; padding-right:38px; background:url('../images/common/arw1-2.png') no-repeat right 1px center; background-size:24px 13px; transition:.2s ease-in-out}
#main section .button1:hover a{border-color:#208758; background:#208758}
#main section .button1:hover span{color:#fff;  background-image:url('../images/common/arw1.png')}

#main section .button1.c1 a{border:1px solid #ededed}
#main section .button1.c1 span{color:#fff; background:url('../images/common/arw1.png') no-repeat right 1px center; background-size:24px 13px}
#main section .button1.c1:hover a{border-color:#208758; background:#208758}
#main section .button1.c1.red:hover a{border-color:#ff0000; background:#ff0000}


/* ==========================================================================
   MAIN VISUAL
   ========================================================================== */
#main_visual{position:relative; overflow:hidden}
#main_visual li{width:100%; height:calc(100vh - 92px); background-repeat:no-repeat; background-position:center; background-size:cover}
#main_visual li.vis1{background-image:url('../images/main/mvis1.jpg')}
#main_visual li.vis2{background-image:url('../images/main/mvis2.jpg')}
#main_visual li.vis3{background-image:url('../images/main/mvis3.jpg')}
#main_visual li.vis4{background-image:url('../images/main/mvis4.jpg')}
#main_visual li.vis5{background-image:url('../images/main/mvis5.jpg')}
#main_visual .static_text{position:absolute; top:50%; width:100%; margin-top:-130px; color:#fff; text-align:center; box-sizing:border-box; transition:.3s ease-in-out}
#main_visual .static_text .main_text{font-size:46px; font-weight:600; line-height:1.3; letter-spacing:-1.2px; transition:.3s ease-in-out}
#main_visual .static_text .main_text strong{color:#47fb77}
#main_visual .static_text .sub_text{margin-top:32px; font-size:20px; font-weight:300; line-height:34px; letter-spacing:-0.5px; transition:.3s ease-in-out}
#main_visual .static_text .button1{margin-top:43px;}

/* BX-SLIDER */
#main_visual #bx-pager{position:absolute; bottom:46px; width:100%; text-align:center; z-index:100}
#main_visual #bx-pager .item_pager{display:inline-block; margin:0 1px}
#main_visual #bx-pager .item_pager a{display:inline-block; width:22px; height:22px; border:1px solid transparent; border-radius:50%}
#main_visual #bx-pager .item_pager span{display:inline-block; position:relative; top:1px; width:6px; height:6px; background:#fff; border-radius:50%}
#main_visual #bx-pager .item_pager a.active,
#main_visual #bx-pager .item_pager a:hover{border-color:#fff}
#main_visual #bx-pager .item_pager a.active span,
#main_visual #bx-pager .item_pager a:hover span{background:#31cc86}
#main_visual .bx-wrapper .bx-controls-direction a{margin-top:-50px; width:35px; height:69px; opacity:.8; transition:.2s ease-in-out}
#main_visual .bx-wrapper .bx-controls-direction a:hover{opacity:1}
#main_visual .bx-wrapper .bx-prev{left:80px; background:url('../images/main/arw_mvis_prev.png') no-repeat 0 0}
#main_visual .bx-wrapper .bx-prev:hover{left:75px}
#main_visual .bx-wrapper .bx-next{right:80px; background:url('../images/main/arw_mvis_next.png') no-repeat 0 0}
#main_visual .bx-wrapper .bx-next:hover{right:75px}

/* ==========================================================================
   MAIN CONTENTS
   ========================================================================== */
#main section .sc_title .title{font-size:43px; font-weight:600; color:#222; letter-spacing:-2px; transition:.3s ease-in-out}
#main section .sc_title p{margin-top:21px; font-size:17px; color:#555; letter-spacing:-0.5px; transition:.3s ease-in-out}

/*이지폼의 장점*/
#main section.m_sc1{padding:107px 0 120px; text-align:center; background:#f0f0f0; transition:.3s ease-in-out}
#main section.m_sc1 .box_set{margin-top:45px; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li{position:relative; float:left; width:20%; height:328px; background-color:#fff; animation: fadeEffect .5s}
#main section.m_sc1 .box_set li .inner_box{width:100%; height:100%; border:1px solid #e5e5e5; border-right:none; box-sizing:border-box; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li:last-child .inner_box{border-right:1px solid #e5e5e5}
#main section.m_sc1 .box_set li .cont_box{position:absolute; top:45px; width:100%; letter-spacing:-0.25px; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li .cont_box .txt1{padding-top:102px; font-size:18px; font-weight:400; color:#ababab; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li .cont_box .sep1{display:inline-block; width:22px; height:2px; background:#208758; margin:15px 0 15px; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li .cont_box .txt2{font-size:17px; font-weight:bold; color:#333; line-height:28px; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li.box1 .cont_box .txt1{background:url('../images/main/ico_msc1-1.png') no-repeat center 0; background-size:60px 73px; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li.box2 .cont_box .txt1{background:url('../images/main/ico_msc1-2.png') no-repeat center 3px; background-size:68px 72px; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li.box3 .cont_box .txt1{background:url('../images/main/ico_msc1-3.png') no-repeat center 0; background-size:69px 73px; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li.box4 .cont_box .txt1{background:url('../images/main/ico_msc1-4.png') no-repeat center 0; background-size:65px 74px; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li.box5 .cont_box .txt1{background:url('../images/main/ico_msc1-5.png') no-repeat center 5px; background-size:76px 73px; transition:.3s ease-in-out}
#main section.m_sc1 .box_set li:hover{background-repeat:no-repeat; background-position:center; background-size:cover}
#main section.m_sc1 .box_set li:hover .inner_box{border:none}
#main section.m_sc1 .box_set li:hover + li .inner_box{border-left-color:#fff}
#main section.m_sc1 .box_set li .hover_box{display:none}
#main section.m_sc1 .box_set li:hover .hover_box{display:block}
#main section.m_sc1 .box_set li:hover .cont_box{display:none}
#main section.m_sc1 .box_set li.box1:hover{background-image:url('../images/main/m_sc1-1.jpg')}
#main section.m_sc1 .box_set li.box2:hover{background-image:url('../images/main/m_sc1-2.jpg')}
#main section.m_sc1 .box_set li.box3:hover{background-image:url('../images/main/m_sc1-3.jpg')}
#main section.m_sc1 .box_set li.box4:hover{background-image:url('../images/main/m_sc1-4.jpg')}
#main section.m_sc1 .box_set li.box5:hover{background-image:url('../images/main/m_sc1-5.jpg')}
#main section.m_sc1 .box_set li .hover_box{position:absolute; top:66px; width:100%; letter-spacing:-0.25px; animation: fadeEffect .5s}
#main section.m_sc1 .box_set li .hover_box .txt1{padding-top:65px; font-size:20px; font-weight:bold; color:#fff; line-height:28px;}
#main section.m_sc1 .box_set li .hover_box .sep1{display:inline-block; width:1px; height:26px; background:#fff; margin:9px 0 13px}
#main section.m_sc1 .box_set li .hover_box .txt2{font-size:18px; font-weight:400; color:#fff; line-height:26px}
#main section.m_sc1 .box_set li.box1 .hover_box .txt1{background:url('../images/main/ico_msc1-1_1.png') no-repeat center 0; background-size:40px 47px}
#main section.m_sc1 .box_set li.box2 .hover_box .txt1{background:url('../images/main/ico_msc1-2_1.png') no-repeat center 0; background-size:46px 49px}
#main section.m_sc1 .box_set li.box3 .hover_box .txt1{background:url('../images/main/ico_msc1-3_1.png') no-repeat center 0; background-size:46px 49px}
#main section.m_sc1 .box_set li.box4 .hover_box .txt1{background:url('../images/main/ico_msc1-4_1.png') no-repeat center 0; background-size:45px 50px}
#main section.m_sc1 .box_set li.box5 .hover_box .txt1{background:url('../images/main/ico_msc1-5_1.png') no-repeat center 0; background-size:51px 49px}
/*이지폼과 기존제품 비교*/
#main section.m_sc2{padding:107px 0 120px; background:url('../images/main/bg_m_sc2.jpg') no-repeat center; background-size:cover; overflow:hidden; transition:.3s ease-in-out}
#main section.m_sc2 .sc_title{text-align:center;}
#main section.m_sc2 .sc_title .title{color:#fff}
#main section.m_sc2 .sc_title .title span{font-size:34px; color:#193902; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare{position:relative; padding:70px 0; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare > div{position:relative; width:50%; color:#fff}
#main section.m_sc2 .box_compare .left{float:left; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .right{float:right; text-align:right; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .txtset{position:relative; padding:25px 0 10px; letter-spacing:-0.25px; box-sizing:border-box; z-index:10; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .line{display:inline-block; position:relative; height:1px; margin:28px 0; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .line:after{content:""; display:block; position:absolute; top:-8px; width:17px; height:17px; border-radius:50%}
#main section.m_sc2 .box_compare .txt1{font-size:30px; font-weight:bold; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .txt2 p{margin-bottom:15px; font-size:22px; font-weight:300; line-height:31px; letter-spacing:-0.25px; padding-left:26px; background:url('../images/common/ico_check1.png') no-repeat 0 7px; background-size:18px 18px; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .txt2 p .dsp2{display:none}
#main section.m_sc2 .box_compare .obj_prd{position:absolute; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .left .line{width:calc(100% - 205px); background:#fff; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .left .line:after{right:0; background:#fff}
#main section.m_sc2 .box_compare .left .obj_prd{top:0; right:-45px; z-index:9; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .left .obj_prd img{width:350px; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .right .txt1{opacity:.7}
#main section.m_sc2 .box_compare .right .txt2{float:right; opacity:.8}
#main section.m_sc2 .box_compare .right .txt2 p{font-size:19px; background:none; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .right .txt2 p:before{content:"- "}
#main section.m_sc2 .box_compare .right .line{width:calc(100% - 205px); background:#b9e796; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .right .line:after{left:0; background:#b9e796}
#main section.m_sc2 .box_compare .right .obj_prd{top:15px; left:0px; z-index:8; transition:.3s ease-in-out}
#main section.m_sc2 .box_compare .right .obj_prd img{width:290px; transition:.3s ease-in-out}
#main section.m_sc2 .btn_prd{text-align:center}
#main section.m_sc2 .btn_prd a{display:inline-block; padding:20px 54px; border:1px solid #ededed; transition:.2s ease-in-out}
#main section.m_sc2 .btn_prd span{display:inline-block; font-size:17px; font-weight:400; color:#fff; letter-spacing:-0.25px; line-height:16px; padding-right:38px; background:url('../images/common/arw1.png') no-repeat right 1px center; background-size:24px 13px; transition:.2s ease-in-out}
#main section.m_sc2 .btn_prd a:hover{border-color:#fff; background:#fff}
#main section.m_sc2 .btn_prd a:hover span{color:#2e811e; background-image:url('../images/common/arw1-1.png')}
/*이지폼 영상*/
#main section.m_sc3{padding:110px 0 117px; background:url('../images/main/bg_m_sc3.jpg') no-repeat center; background-size:cover; transition:.3s ease-in-out}
#main section.m_sc3 .sc_movie .left{float:left; width:calc(100% - 696px); transition:.3s ease-in-out}
#main section.m_sc3 .sc_movie .right{float:right; width:696px; transition:.3s ease-in-out}
#main section.m_sc3 .sc_movie .txtset{padding:34px 0; transition:.3s ease-in-out}
#main section.m_sc3 .sc_movie .txt1{display:inline-block; padding:10px 0; border-top:1px solid #888786; border-bottom:1px solid #888786; font-size:18px; color:#efefef; text-transform:uppercase; transition:.3s ease-in-out}
#main section.m_sc3 .sc_movie .txt2{margin-top:0px; font-size:43px; line-height:54px; font-weight:600; color:#fff; letter-spacing:-2px; transition:.3s ease-in-out}
#main section.m_sc3 .sc_movie p{margin-top:27px; font-size:19px; color:#e8e8e8; line-height:1.6; transition:.3s ease-in-out}
#main section.m_sc3 .sc_movie .button1{margin-top:28px; transition:.3s ease-in-out}
#main section.m_sc3 .sc_movie .right .button1{display:none}
/*인증내역*/
#main section.m_sc4{padding:110px 0 120px; text-align:center; background:#efefef; transition:.3s ease-in-out}
#main section.m_sc4 .crs_ctf{margin-top:33px; transition:.3s ease-in-out}
#main section.m_sc4 .crs_ctf li{padding-top:33px}
#main section.m_sc4 .crs_ctf li .thumb{position:relative; border:1px solid #e0e0e0}
#main section.m_sc4 .crs_ctf li .thumb:after{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0; transition:.2s ease-in-out}
#main section.m_sc4 .crs_ctf li:hover .thumb:after{opacity:.15}
#main section.m_sc4 .crs_ctf li .info_certi{margin-top:14px; line-height:1.2; letter-spacing:-0.25px;}
#main section.m_sc4 .crs_ctf li .info_certi .txt1{font-size:18px; line-height:26px; font-weight:bold; color:#333; transition:.3s ease-in-out}
#main section.m_sc4 .crs_ctf li .info_certi .txt2{margin-top:8px; font-size:16px; color:#7d7d7d; transition:.3s ease-in-out}
#main section.m_sc4 .crs_ctf li .mark{position:absolute; top:0; left:50%; width:76px; height:70px; margin-left:-38px; background:url('../images/main/mark_certi.png') no-repeat 0 0; background-size:100%}
#main section.m_sc4 .crs_ctf li .mark span{position:relative; top:16px; font-size:11px; font-weight:bold; color:#fff; line-height:16px}
/* BX-SLIDER */
#main section.m_sc4 .crs_ctf .bx-wrapper{background:transparent}
#main section.m_sc4 .crs_ctf .bx-wrapper .bx-controls-direction a{margin-top:-35px; width:46px; height:46px; transition:.2s ease-in-out}
#main section.m_sc4 .crs_ctf .bx-wrapper .bx-prev{left:-70px; background:url('../images/main/arw2_prev.png') no-repeat 0 0; background-size:100%}
#main section.m_sc4 .crs_ctf .bx-wrapper .bx-prev:hover{left:-75px}
#main section.m_sc4 .crs_ctf .bx-wrapper .bx-next{right:-70px; background:url('../images/main/arw2_next.png') no-repeat 0 0; background-size:100%}
#main section.m_sc4 .crs_ctf .bx-wrapper .bx-next:hover{right:-75px}
#main section.m_sc4 .button1{margin-top:70px; transition:.3s ease-in-out}
/*시공사례*/
#main section.m_sc5{padding:100px 0 120px; text-align:center; background:#fff; transition:.3s ease-in-out}
#main section.m_sc5 .list_case{margin-top:48px; transition:.3s ease-in-out}
#main section.m_sc5 .button1{margin-top:25px; transition:.3s ease-in-out}
/*회사소개*/
#main section.m_sc6{padding:100px 0 190px; background:url('../images/main/bg_m_sc6.jpg') no-repeat center; background-size:cover; transition:.3s ease-in-out}
#main section.m_sc6 .site_grid > div{float:left; width:50%; box-sizing:border-box; transition:.3s ease-in-out}
#main section.m_sc6 .left .logo{text-align:center; transition:.3s ease-in-out}
#main section.m_sc6 .left .logo img{width:270px; transition:.3s ease-in-out}
#main section.m_sc6 .right{padding-left:60px; padding-top:25px}
#main section.m_sc6 .right .txtset{display:inline-block}
#main section.m_sc6 .right .main_text{font-size:40px; font-weight:bold; color:#fff; line-height:1.35; transition:.3s ease-in-out}
#main section.m_sc6 .right .sub_text{display:none; margin-top:20px; padding:8px 0; border-top:1px solid rgba(255,255,255,.4); border-bottom:1px solid rgba(255,255,255,.4); font-size:18px; font-weight:300; color:#fff; line-height:1.6; transition:.3s ease-in-out}

/*시공처,구매처 문의*/
#main section.m_sc7{padding:0 0 13px; background:#efefef; transition:.3s ease-in-out}
#main section.m_sc7 .cont_box{position:relative; top:-100px; transition:.3s ease-in-out}
#main section.m_sc7 .cont_box > div{float:left; width:50%; height:280px; box-sizing:border-box; transition:.3s ease-in-out}
#main section.m_sc7 .cont_box .left{background:#333d4a url('../images/main/ico_msc7-1.png') no-repeat right center; background-size:147px 159px}
#main section.m_sc7 .cont_box .right{background:#1c744c url('../images/main/ico_msc7-2.png') no-repeat right center; background-size:168px 177px}
#main section.m_sc7 .cont_box .inner_box{position:relative; padding:54px 60px; transition:.3s ease-in-out}
#main section.m_sc7 .cont_box .title{font-size:27px; font-weight:bold; color:#fff; letter-spacing:-1px; transition:.3s ease-in-out}
#main section.m_sc7 .cont_box .sep1{display:inline-block; width:27px; height:1px; background:#fff; margin:20px 0 18px; transition:.3s ease-in-out}
#main section.m_sc7 .cont_box p{font-size:17px; color:#fff; line-height:1.5; letter-spacing:-0.7px; transition:.3s ease-in-out}
#main section.m_sc7 .cont_box .txt1{margin-top:22px;}
#main section.m_sc7 .cont_box .txt1 a{display:inline-block; vertical-align:middle}
#main section.m_sc7 .cont_box .txt1 .tel{font-size:28px; font-weight:bold; color:#fff; line-height:32px; padding-left:30px; background:url('../images/common/ico_call1-1.png') no-repeat 0 center; background-size:22px 22px; transition:.3s ease-in-out}
#main section.m_sc7 .cont_box .txt1 .kakao{margin-left:14px; width:126px; height:32px; line-height:29px; font-size:13px; color:#361d02; text-align:right; padding-right:18px; background:url('../images/main/bg_kakao.png') no-repeat 0 center; background-size:100%; box-sizing:border-box}
#main section.m_sc7 .cont_box .left p{color:#d5dae2}
#main section.m_sc7 .cont_box .right p{color:#d0fde9}