/* 전체 공통 */ body{ overflow-x: hidden; } .inner{ width: 1200px; margin: 0 auto; } .eng{ font-family: 'Lato', sans-serif; } /* 메인 */ #main{ height: 100vh; } #main .main_visual{ height: 100vh; position: relative; overflow: hidden; } #main .main_visual .main_img{ } #main .main_visual .main_img img{ display: block; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.1); transition: transform 5s; } #main .main_visual .main_c{ position: absolute; width: 100%; left: 0; top: 55%; transform: translate(0,-50%);} #main .main_visual .main_c .m_txt{ margin-bottom: 110px; } #main .main_visual .main_c .m_txt > span{ display: block; font-size: 16px; color:#07111c; letter-spacing: 8px; transform: translate(0,30px); opacity: 0; } #main .main_visual .main_c .m_txt strong{ font-size: 40px; line-height: 80px; color:#000000; display: block; letter-spacing: -1px; margin-top: 30px; transform: translate(0,30px); opacity: 0; } #main .main_visual .main_c .m_txt strong span{ font-weight: 800; color:#0b4c2f; font-size: 46px; } #main .main_visual .main_c .m_btn{ } #main .main_visual .main_c .m_btn ul:after{ content:""; display: table; clear: both; } #main .main_visual .main_c .m_btn ul li{ float: left; width: 180px; height: 220px; border-radius: 10px; background-color: #fff; margin-right: 27px; text-align: center; transform: translate(0,30px); opacity: 0; transition: transform 1s, opacity 1s; } #main .main_visual .main_c .m_btn ul li a{ display: block; height: 100%; padding-top: 19px; } #main .main_visual .main_c .m_btn ul li a i{ display: inline-block; position: relative; } #main .main_visual .main_c .m_btn ul li a i:after{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; } #main .main_visual .main_c .m_btn ul li:nth-child(1) a i:after{ background: url('../img/main/m_icon01_on.png') center center no-repeat; } #main .main_visual .main_c .m_btn ul li:nth-child(2) a i:after{ background: url('../img/main/m_icon02_on.png') center center no-repeat; } #main .main_visual .main_c .m_btn ul li:nth-child(3) a i:after{ background: url('../img/main/m_icon03_on.png') center center no-repeat; } #main .main_visual .main_c .m_btn ul li:hover a i:after{ opacity: 1; } #main .main_visual .main_c .m_btn ul li:last-child{ margin-right: 0; } #main .main_visual .main_c .m_btn ul li a dl{ margin-top: 10px; } #main .main_visual .main_c .m_btn ul li a dl dt{ display: block; color:#44453b; font-size: 16px; font-weight: 600; margin-bottom: 7px; } #main .main_visual .main_c .m_btn ul li a dl dd{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -1px; line-height: 26px; color:#44453b; transform: skew(-0.1deg);} #main .main_visual .main_c .m_btn ul li:hover{ background: url('../img/main/btn_hover.jpg') center center no-repeat; box-shadow: 3px -7px 57px 0px rgba(90, 100, 37, 0.22); } #main .main_visual .main_c .m_btn ul li:hover a dl dt{ color: #fff; } #main .main_visual .main_c .m_btn ul li:hover a dl dd{ color: #fff; } #main .main_visual .scroll{ position: absolute; right: 0; top: 50%; transform: translate(0,-50%); z-index: 1; width: 60px; height: 5px; } #main .main_visual .scroll:before{ content:""; width: 100%; height: 1px; background-color: rgba(255,255,255,0.3); display: block; position: absolute; left: 0; top: 50% ;transform: translate(0,-50%);} #main .main_visual .scroll .dots{ display: block; width: 5px; height: 5px; background-color: #fff; border-radius: 50%; animation: scroll 3s linear infinite; position: absolute; left: 0; top: 0; } #main.on .main_visual.swiper-slide-active .main_img img{ transform: translate(-50%,-50%) scale(1);} #main.on .main_visual.swiper-slide-active .main_c .m_txt > span{ transform: translate(0,0); opacity: 1; transition: transform 1s, opacity 1s; transition-delay: .4s; } #main.on .main_visual.swiper-slide-active .main_c .m_txt strong{ transform: translate(0,0); opacity: 1; transition: transform 1s, opacity 1s; transition-delay: .8s; } #main.on .main_visual.swiper-slide-active .main_c .m_btn ul li{ transform: translate(0,0); opacity: 1; } #main.on .main_visual.swiper-slide-active .main_c .m_btn ul li:nth-child(1){ transition-delay: 1.2s; } #main.on .main_visual.swiper-slide-active .main_c .m_btn ul li:nth-child(2){ transition-delay: 1.5s; } #main.on .main_visual.swiper-slide-active .main_c .m_btn ul li:nth-child(3){ transition-delay: 1.8s; } #main .con01 { background: url('../img/main/con01_bg.jpg') center center no-repeat; height: 100vh; position: relative; } #main .con01 .inner{ position: absolute; left: 0; right: 0; margin: 0 auto; top: 54%; transform: translate(0,-50%);} #main .con01 .txt_b strong{ display: block; margin-bottom: 30px;transform: translate(0,30px); opacity: 0; transition: transform 1s, opacity 1s; } #main .con01 .txt_b .p01{ font-size: 18.83px; line-height: 37px; letter-spacing: -1px; color:#4b5455; margin-bottom: 90px; transform: translate(0,30px); opacity: 0; transition: transform 1s, opacity 1s; } #main .con01 .txt_b .p02{ font-size: 34px; line-height: 60px; letter-spacing: -1px; color:#434943; font-weight: 600; transform: translate(0,30px); opacity: 0; transition: transform 1s, opacity 1s; } #main .con01 .txt_b .p02 span{ font-weight: 800; color:#161b15; } #main .con01 .txt_b .p02 i{ display: inline-block; margin-left: 24px; } #main .con01.swiper-slide-active .txt_b strong{ transform: translate(0,0); opacity: 1; transition-delay: .4s; } #main .con01.swiper-slide-active .txt_b .p01{ transform: translate(0,0); opacity: 1; transition-delay: .8s; } #main .con01.swiper-slide-active .txt_b .p02{ transform: translate(0,0); opacity: 1; transition-delay: 1.2s; } @keyframes scroll { 0%{ opacity: 1; left: 0; } 80%{ opacity: 1; left: 80%; } 100%{ opacity: 0; left: 100%; } } /* 서브 공통 */ #hd.sub_hd{ border-bottom: 1px solid #ececec; background-color: #fff; } #hd.sub_hd.on { background-color: #112738; border-bottom: none; } #sub .sub_visual{ padding-top: 220px; } #sub .sub_visual .sub_t{ text-align: center; } #sub .sub_visual .sub_t span{ font-size: 16px; color:#07111c; letter-spacing: 6px; font-weight: 400; display: block; margin-bottom: 22px; transform: translate(0,30px); opacity: 0; transition: transform 1s, opacity 1s; } #sub .sub_visual .sub_t strong{ display: block; margin-bottom: 75px; font-size: 50px; font-weight: 600; color:#000000; letter-spacing: -1px; transform: translate(0,30px); opacity: 0; transition: transform 1s, opacity 1s; } #sub .sub_visual .sub_i{ width: 100%; height: 579px; position: relative; overflow: hidden; background-color: #112738; } #sub .sub_visual .sub_i img{ height: 579px; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.1); opacity: .5; transition: transform 5s, opacity 3s; } #sub .sub_visual.on .sub_i img{ transform: translate(-50%,-50%) scale(1); opacity: 1; } #sub .sub_visual.on .sub_t span{ transform: translate(0,0); opacity: 1; transition-delay: .4s; } #sub .sub_visual.on .sub_t strong{ transform: translate(0,0); opacity: 1; transition-delay: .8s; } #sub .sub_con{ position: relative; } #sub .sub_con .sub_tab{ height: 80px; border-bottom: 1px solid #ececec; position: absolute; left: 0; top: 0; width: 100%; background-color: #fff; } #sub .sub_con .sub_tab .inner{ text-align: center; } #sub .sub_con .sub_tab ul{ display: inline-block; } #sub .sub_con .sub_tab ul:after{ content:""; display: table; clear: both; } #sub .sub_con .sub_tab ul li{ float: left; margin-right: 90px; height: 80px; } #sub .sub_con .sub_tab ul li a{ position: relative; width: 100%; height: 100%; display: block; line-height: 80px; font-size: 18px; color: #353935; } #sub .sub_con .sub_tab ul li a:after{ content:""; display: block ;width: 40px; height: 40px; border-radius: 50%; position: absolute; border: 10px solid rgba(179, 196, 192, 0.2); left: 0; bottom: -20px; right: 0; margin: 0 auto; transform: scale(0); } #sub .sub_con .sub_tab ul li:last-child{ margin-right: 0; } #sub .sub_con .sub_tab ul li.on a{ color: #0068b7; font-weight: 600; } #sub .sub_con .sub_tab ul li.on a:after{ transform: scale(1); transition: transform .8s; } #sub .sub_con .sub_tab ul li:hover a{ color: #0068b7; font-weight: 600; } #sub .sub_con{ padding-top: 195px; position: relative; } #sub .sub_con .sub_tit{ display: block; text-align: center; margin-bottom: 118px; } #sub .sub_con .sub_tit strong{ display: block; font-size: 34px; font-weight: 600; color:#393939; letter-spacing: -1px; } #sub .sub_t2{ margin-bottom: 35px; } #sub .sub_t2 strong{ display: block; position: relative; padding-left: 58px; font-size: 22px; font-weight: 600; color:#131819; letter-spacing: -1px; } #sub .sub_t2 strong:before{ content:""; display: block; width: 47px; height:21px; background: url('../img/sub/tit2_dot.png')center center no-repeat; position: absolute; left: 0; top: 2px; } /* 회사소개 */ #sub.greeting .gr_w:after{ content:""; display: table; clear: both; } #sub.greeting .gr_w{ position: relative; width: 100%; } #sub.greeting .gr_w .left{ float: left; width: 48%; margin-right: 4%; padding-left: 18.75%; padding-top: 100px; } #sub.greeting .gr_w .right{ position: absolute; float: right; right: 0; top: 0; width: 48%; text-align: right; position: relative; height: 100%; } #sub.greeting .gr_w .right img{ max-width: 800px; width: 100%; } #sub.greeting .gr_w .left p{ font-size: 28px; line-height: 58px; letter-spacing: -1px; color:#131819; } #sub.greeting .gr_w .left p .cr01{ color: #97c527; font-weight: 600; } #sub.greeting .gr_w .left p .cr02{ color: #016db2; font-weight: 600; } #sub.greeting .gr_w .left > span{ font-size: 18px; letter-spacing: -1px; color:#242929; display: block; text-align: right; margin-top: 30px; } #sub.greeting .gr_w .left > span i{ display: inline-block; transform: translate(0,-2px);} /* 회사연혁 */ #sub.history .sub_con{ background: url('../img/sub/history_bg.jpg') center top no-repeat; background-size: cover; } #sub.history .y_wrap{ position: relative; } #sub.history .y_wrap:after{ content:""; display: block ;width: 2px; height: 100%; background-color: #e6ebe9; position: absolute; left: 50%; top: 0; transform: translate(-50%,0);} #sub.history .y_wrap dl{ padding-bottom: 160px; } #sub.history .y_wrap dl:after{ content:"";display:table; clear: both; } #sub.history .y_wrap dl dt{ float: left; width: 48%; margin-right: 2%; position: relative; padding-left: 60px; } #sub.history .y_wrap dl dt:before{ content:""; display: block; width: 149px; height: 149px; background: url('../img/sub/y_cir01.png') center center no-repeat; position: absolute; left: 0; top :50%; transform: translate(0,-50%); animation: ro2 20s linear infinite; } #sub.history .y_wrap dl.y_2000 dt:before{ background: url('../img/sub/y_cir02.png') center center no-repeat; } #sub.history .y_wrap dl dd{ float: left; width: 50%; padding-left: 40px; position: relative; margin-top: 10px; } #sub.history .y_wrap dl dd:after{ content:""; display: block; width: 23px; height:23px; background: url('../img/sub/history_dot.png') center center no-repeat; border-radius: 50%; box-shadow: 0px 3px 6px 0px rgba(20, 131, 190, 0.36); position: absolute; left: -12px; top: 0; z-index: 1; } #sub.history .y_wrap dl dd ul li:after{ content:"";display:table; clear: both; } #sub.history .y_wrap dl dd ul li span{ float: left; display: block; font-size: 20px; font-weight: 600; color:#131819; letter-spacing: -1px; width: 110px; } #sub.history .y_wrap dl dd ul li p{ float: left; font-size: 16px; letter-spacing: -1px; color: #4b5455; line-height: 20px; } #sub.history .y_wrap dl dd ul li{ margin-bottom: 35px; } #sub.history .y_wrap dl dd ul li:last-child{ margin-bottom: 0; } /* 관계회사소개 */ #sub.family .sub_con{ background: url('../img/sub/family_bg.jpg') right bottom no-repeat; padding-bottom: 160px; } #sub.family .wrap:after{ content:""; display: table; clear:both; } #sub.family .wrap{ position: relative; } #sub.family .wrap:before{ content:""; display: block; width: 70px; height: 70px; background: url('../img/sub/family_dot.png') center center no-repeat; position: absolute; left: 50%; transform: translate(-50%,0); top: 34px; z-index: 1; } #sub.family .wrap .line{ display: block; width: 50%; height: 2px; background-color: #e3e8e7; position: absolute; left: 50%; transform: translate(-50%,0); top: 68px; } #sub.family .wrap .left{ float: left; width: 41% } #sub.family .wrap .right{ float: right; width: 41%; } #sub.family .wrap .box{ background-color: #ffffff; border: 2px solid #97c527; padding-top: 50px; padding-bottom: 60px; padding-left: 40px; padding-right: 10px; box-shadow: 12px 9px 43px 0px rgba(71, 83, 83, 0.1); position: relative; z-index: 1; } #sub.family .wrap .box strong{ display: block; margin-bottom: 45px; } #sub.family .wrap .box dl{ margin-bottom: 22px;} #sub.family .wrap .box dl:last-child{ margin-bottom: 0; } #sub.family .wrap .box dl:after{ content:""; display: table; clear: both; } #sub.family .wrap .box dl dt{ float: left; width: 28%; margin-right: 1%; font-size: 18px; font-weight: 600;color:#131819; letter-spacing: -1px; padding-left: 30px; position: relative; } #sub.family .wrap .box dl dt:after{ content:""; display: block; width: 18px; height: 18px; background: url('../img/sub/family_arrow1.png') center center no-repeat; border-radius: 50%; box-shadow: 0px 3px 6px 0px rgba(16, 164, 120, 0.13); position: absolute; left: 0; top: 0; } #sub.family .wrap .box dl dd{ float: left; width: 71%; font-size: 16px; } #sub.family .wrap .right{ border: 2px solid #0068b7; } #sub.family .wrap .right dl dt:after{ background: url('../img/sub/family_arrow2.png') center center no-repeat; } /* 오시는길 */ #sub.direction .sub_con{ padding-bottom: 160px; position: relative; } #sub.direction .sub_con:before{ content:""; display: block ;width: 100%; height: 58%; background-color: #f7fafa; position: absolute; left: 0; bottom: 0; z-index: -1; } #sub.direction .maps{ width: 100%; height: 440px; box-shadow: 12px 9px 43px 0px rgba(71, 83, 83, 0.25); position: relative; } #sub.direction .maps:before{ content:""; display: block; width: 209px; height: 179px;background: url('../img/sub/map_bg.png')center center no-repeat; position: absolute; right: -45px; top: -100px; z-index: -1; } #sub.direction .root_daum_roughmap .wrap_controllers{ display: none; } #sub.direction .root_daum_roughmap .border1{ display: none; } #sub.direction .root_daum_roughmap .border2{ display: none; } #sub.direction .root_daum_roughmap .border3{ display: none; } #sub.direction .root_daum_roughmap .border4{ display: none; } #sub.direction .root_daum_roughmap{ width: 100%; } #sub.direction .root_daum_roughmap .wrap_map{ height: 440px; } #sub.direction .m_bot{ margin-top: 78px; } #sub.direction .m_bot:after{ content:""; display: table; clear: both; } #sub.direction .m_bot .cir{ float: left; width: 26%; margin-right: 7%; position: relative; } #sub.direction .m_bot .cir:before{ content:""; display: block; width: 50%; height: 2px; background-color: #dde5e3; position: absolute; right: -40%; top: 50%; transform: translate(0,-50%);} #sub.direction .m_bot .cir .wrap2{ position: relative; display: inline-block; } #sub.direction .m_bot .cir .wrap2:after{ content:""; display: block; width: 110%; height: 110%; border-radius: 50%; border: 2px solid #ffffff; position: absolute; left: -5%; top: -5%; } #sub.direction .m_bot .cir .wrap2 img{ display: block; position: relative; border-radius: 50%; box-shadow: 12px 9px 43px 0px rgba(71, 83, 83, 0.25); } #sub.direction .m_bot .t_bx{ float: left; width: 67%; background-color: #fff; box-shadow: 12px 9px 43px 0px rgba(71, 83, 83, 0.1); padding: 45px; padding-right: 15px; padding-bottom: 35px; margin-top: 20px; position: relative; z-index: 1; } #sub.direction .m_bot .t_bx dl{ margin-bottom: 4px;} #sub.direction .m_bot .t_bx dl:last-child{ margin-bottom: 0; } #sub.direction .m_bot .t_bx dl:after{ content:""; display: table; clear: both; } #sub.direction .m_bot .t_bx dl dt{ float: left; width: 143px; font-size: 18px; font-weight: 600;color:#131819; letter-spacing: -1px; padding-left: 30px; position: relative; line-height: 44px; } #sub.direction .m_bot .t_bx dl dt:after{ content:""; display: block; width: 18px; height: 18px; background: url('../img/sub/family_arrow2.png') center center no-repeat; border-radius: 50%; box-shadow: 0px 3px 6px 0px rgba(16, 164, 120, 0.13); position: absolute; left: 0; top: 13px; } #sub.direction .m_bot .t_bx dl dd{ float: left; font-size: 18px; line-height: 44px; color:#4b5455; } #sub.product .table_w{ display: block; width: 100%; } #sub.product .img_w img{ box-shadow: 12px 9px 43px 0px rgba(71, 83, 83, 0.1); width: 100%; } #sub.product .con01{ position: relative; padding-top: 80px; margin-bottom: 155px; } #sub.product .con01:before{ content:""; display:block; width: 100%; height: 63%; background-color: #f7fafa; position: absolute; left: 0; top: 0; z-index: -1; } #sub.product .con01 .p01{ text-align: center; font-size: 22px; line-height: 44px; color:#4b5455; letter-spacing: -1px; font-weight: 600; margin-bottom: 85px; } #sub.product .con01 .p01 .cr01{ color: #0068b7; } #sub.product .con01 .p01 .cr02{ color: #97c527; } #sub.product .con01 .p01 .cr03{ color: #03a0ae; } #sub.product .con01 .lr_w:after{ content:""; display: table; clear: both; } #sub.product .con01 .lr_w .left{ float: left; margin-right: 4%; width: 50%; } #sub.product .con01 .lr_w .right{ float: left; width:46%; padding-top: 70px; } #sub.product .con01 .lr_w .right strong{ display: block; font-size: 20px; font-weight: 600; letter-spacing: -1px; color:#131819; margin-bottom: 70px; } #sub.product .con01 .lr_w .right ul:after{ content:""; display: table; clear: both; } #sub.product .con01 .lr_w .right ul li{ float: left; width: 49%; margin-right: 2%; margin-bottom: 19px; padding: 13px 0; border-radius: 4px; box-shadow: 1px 2px 7px 0px rgba(17, 115, 189, 0.2); border: 1px solid rgba(17, 115, 189, 0.2); background-color: transparent; padding-left: 44px; position: relative; font-size: 16px; color:#4d6c84; letter-spacing: -1px; } #sub.product .con01 .lr_w .right ul li:after{ content:""; width: 28px; height: 28px; background: url('../img/sub/dl_chk.png') center center no-repeat; display: block; position: absolute; left: 12px; top: 10px; } #sub.product .con01 .lr_w .right ul li:nth-child(2n+0){ margin-right: 0; } #sub.product .con_w{ margin-bottom: 110px; } #sub.product .con_w:last-child{ margin-bottom: 0; padding-bottom: 160px; } #sub.product .con02 ul:after{ content:""; display: table; clear: both; } #sub.product .con02 ul li{ float: left; width: 48%; margin-right: 4%; } #sub.product .con02 ul li:last-child{ margin-right: 0; } #sub.product .con03 .img_w{ margin-bottom: 45px; } #sub.product .table_w img{ display: block; width: 100%; } #sub.product .con04 .p02{ font-size: 16px; color:#0384ae; letter-spacing: -1px; margin-top: 20px; } #sub.product .con05{ background: url('../img/sub/product01_bg01.jpg')right bottom no-repeat; background-size: cover; padding-top: 95px; } #sub.product .con05 ul:after{ content:""; display: table; clear: both; } #sub.product .con05 ul li{ width: 20%; float: left; margin-top: 70px; } #sub.product .con05 ul li dl{ display: inline-block; text-align: center; } #sub.product .con05 ul li dt { position: relative; } #sub.product .con05 ul li dt img{ max-width: 100%; margin-bottom: 12px; } #sub.product .con05 ul li dd{ display: inline-block; text-align: center; font-size: 18px; line-height: 30px; color:#154162; font-weight: 400; letter-spacing: -1px; } #sub.product .con05 ul li:nth-child(6), #sub.product .con05 ul li:nth-child(7), #sub.product .con05 ul li:nth-child(8), #sub.product .con05 ul li:nth-child(9), #sub.product .con05 ul li:nth-child(10){ text-align: right;} #sub.product .con05 ul li dt:after{ content:""; width: 14px; height:14px; background: url('../img/sub/product_a01.png') center center no-repeat; position: absolute; right: -90%; top: 45%; transform: translate(0,-50%);} #sub.product .con05 ul li:nth-child(5n+0):after{ display: none; } #sub.product .con05 ul li:nth-child(6) dt:after, #sub.product .con05 ul li:nth-child(7) dt:after, #sub.product .con05 ul li:nth-child(8) dt:after, #sub.product .con05 ul li:nth-child(9) dt:after, #sub.product .con05 ul li:nth-child(10) dt:after{ background: url('../img/sub/product_a02.png') center center no-repeat; } #sub.product01 .sub_con{ position: relative; } #sub.product01 .bg_wrap > div{ position: absolute; } #sub.product01 .bg_wrap .bg01{ left: 19%; top: 5.2%; } #sub.product01 .bg_wrap .bg02{ left: 0%; top: 12%; } #sub.product01 .bg_wrap .bg03{ right: 0%; top: 50%; z-index: -1; } #sub.product02 .sub_con{ position: relative; } #sub.product02 .con01:before{ height: 75%; } #sub.product02 .bg_wrap > div{ position: absolute; } #sub.product02 .bg_wrap .bg01{ left: 21%; top: 8%; } #sub.product02 .bg_wrap .bg02{ right: 12%; top: 18%; } #sub.product03 .cw_w{ position:relative; } #sub.product03 .cw_w:before{ content:""; display: block; width: 258px; height: 258px; border-radius: 50%; border: 60px solid #0068b7; background-color: #fff; position: absolute; left: -140px; top: -115px; } #sub.product03 dl:after{ content:""; display: table; clear: both; } #sub.product03 dt{ float: left; width: 40%; margin-right: 2%; font-size: 40px; color:#0068b7; font-weight: 800; letter-spacing: -1px; position: relative; } #sub.product03 dt:after{ content:""; display: block; width: 300px; height: 1px; background-color: #d5e3e0; position: absolute; right: 106%; top: 19px; z-index: -1; } #sub.product03 dt span{ display: block; font-size: 30px; font-weight: 600; color:#0068b7; opacity: .3; letter-spacing: -1px; margin-top: 20px; } #sub.product03 dd{ float: left; width: 58%; } #sub.product03 dd .p01{ font-size: 22px; line-height: 44px; color:#4b5455; letter-spacing: -1px; font-weight: 600; margin-bottom: 60px; } #sub.product03 dd .p01 span{ color:#0068b7; } #sub.product03 .sub_t2{ margin-bottom: 22px; } #sub.product03 dd .wrap2{ position: relative; padding-top: 65px; padding-bottom: 95px; } #sub.product03 dd .wrap2:before{ content:""; display: block; width: 250%; height: 100%; position: absolute; left: -110px; top: 0; z-index: -1; background-color: #f7fafa; } #sub.product03 dd .t_w table{ width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; } #sub.product03 dd .t_w table th{ height: 70px; vertical-align: middle; color:#ffffff; font-size: 18px; font-weight: 600; letter-spacing: -1px; background-color: #0384ae; border-right: 1px solid rgba(255,255,255,0.2); } #sub.product03 dd .t_w table th:last-child{ border-right : 1px solid #0384ae; } #sub.product03 dd .t_w table td{ font-size: 18px; font-weight: 600; color:#4b5455; letter-spacing: -1px; text-align: center; vertical-align: middle; border-bottom: 1px solid #0384ae; border-right: 1px solid #c6e2eb; height: 60px; } #sub.product03 dd .t_w table td:first-child{ border-left: 1px solid #c6e2eb; } #sub.product03 dd .t_w2{ margin-top: 60px; } #sub.product03 dd .t_w2 table th{ background-color: #24ad93; } #sub.product03 dd .t_w2 table td{ border-right: 1px solid #cdebe5; border-bottom: 1px solid #24ad93; } #sub.product03 dd .t_w2 table th:last-child{ border-right : 1px solid #24ad93; } #sub.product03 dd .t_w2 table td:first-child{ border-left: 1px solid #cdebe5; } #sub.product03 .con02{ margin-top: 180px; } #sub.product03 .con02 dl dt{ color: #97c527; } #sub.product03 .con02 dl dt span{ color:#bbcb92; } #sub.product03 .con02 dd .p01 span{ color:#97c527; } #sub.product03 .con02 dd .wrap2{ padding-bottom: 160px; } #sub.product03 .con02:before{ border-color: #97c527; } #sub.product03 .con02 dt:after{ background-color: #e7eae0; } #sub.acceptance .con01{ background: url('../img/sub/acceptance_bg.jpg') center top no-repeat; padding-top: 350px; padding-bottom: 160px; text-align: center; } #sub.acceptance .con01 .send_b{ margin-top: 30px; } #sub.acceptance .con01 .send_b a{ width: 288px; height: 60px; border: 1px solid #fff; display: block; margin: 0 auto; line-height: 58px; font-size: 18px; font-weight: 400; letter-spacing: -1px; color:#ffffff; transition: background-color .4s, border .4s, border-radius .4s; } #sub.acceptance .con01 .send_b a i{ margin-left: 20px; display: inline-block; transform: translate(0,-2px);} #sub.acceptance .sub_con .sub_tit{ margin-bottom: 50px; } #sub.acceptance .con01 .send_b a:hover{ background-color: #00919e; border: 1px solid #00919e; border-radius: 6px; } #sub.board_w .sub_con{ padding-bottom: 160px; } #sub.step .con01{ padding-bottom: 160px; } #sub.step .con01 ul{ position: relative; } #sub.step .con01 ul:before{ content:""; display: block; width: 300%; height: 50%; transform: translate(-50%,-50%); position: absolute; left: 50%; top:50%; z-index: -1; background-color: #f7fafa; } #sub.step .con01 ul:after{ content:""; display: table; clear: both; } #sub.step .con01 ul li{ float: left; position: relative; width: 28%; margin-right: 8%; margin-bottom: 75px; } #sub.step .con01 ul li:before{ content:""; display: block; position: absolute; right: -16%; top: 60%; transform: translate(0,-50%);width: 14px; height: 14px; background: url('../img/sub/step_arrow.png') center center no-repeat; } #sub.step .con01 ul li:nth-child(3n+0):before{ display: none; } #sub.step .con01 ul li:nth-child(3n+0){ margin-right: 0; } #sub.step .con01 ul li:nth-child(4),#sub.step .con01 ul li:nth-child(5),#sub.step .con01 ul li:nth-child(6){ margin-bottom: 0; } #sub.step .con01 ul li dl dt{ position: relative; z-index: 1; } #sub.step .con01 ul li dl dt img{ display: block; margin: 0 auto; } #sub.step .con01 ul li dl dd{ border-radius: 20px; background-color: #fff; box-shadow: 3px 4px 18px 0px rgba(142, 160, 175, 0.14); height: 180px; position: relative; padding: 0 12px; margin-top: -45px; } #sub.step .con01 ul li dl dd p{ width: 100%; text-align: center; position: absolute; left: 0; top: 60%; transform: translate(0,-50%);font-size: 18px; line-height: 36px; color:#445766; letter-spacing: -1px; font-weight: 600; } #sub.step .con01 ul li dl dd p span{ color:#4b5455; font-weight: 400; } @keyframes ro { 0%{ transform: rotate(0); } 100%{ transform: rotate(360deg); } } @keyframes ro2 { 0%{ transform: translate(0,-50%) rotate(0); } 100%{ transform: translate(0,-50%) rotate(360deg); } } @media (min-width: 1920px){ html, body{ max-width: 1920px; margin: 0 auto; } } @media (max-width: 1800px){ #main .con03 .port_list .slide_w .img_wrap{ display: block; width:90%; } #main .con03 .port_list .slide_w .img_wrap img{ width: 100%; } } @media (max-width: 1650px){ #sub.greeting .gr_w .left{ padding-left: 10%; } #sub.product02 .bg_wrap .bg02{ right: -3%; } #sub.product02 .bg_wrap .bg01{ left: 5%; } } @media (max-width: 1550px){ html, body{ overflow-x: hidden; } #sub.greeting .gr_w .left p{ font-size: 20px; line-height: 40px; } #sub.product03 .cw_w:before{ width: 160px; height: 160px; left: -80px; top: -60px; border-width: 40px; } } @media (max-width: 1460px){ #sub.product03 dt{ padding-left: 50px; } } @media (max-width: 1300px){ #sub.product03 .cw_w:before{ width: 100px; height: 100px; left: -50px; top: -25px; border-width: 25px; } } @media (max-width: 1216px){ #hd_pop, #hd_wrapper, #tnb .inner, #container_wr, #ft_wr{ width: 100%; padding: 0 20px; box-sizing: border-box; } #hd, #wrapper, #ft{ min-width: auto; } .inner{ width: 100%; padding: 0 20px; } #bo_gall .gall_img img{ display: block; width: 100%; } #sub.greeting .gr_w .left{ padding-left: 20px; padding-top: 40px; } } @media (max-width: 1260px){ .gnb_2dul .gnb_2dul_box{ padding: 10px 0; } .gnb_1da{ font-size: 16px; padding: 0 32px; } .gnb_2da{ font-size: 14px; ;line-height: 38px; } } @media (max-width: 1050px){ #sub.direction .m_bot .cir .wrap2 img{ width: 100%; } #sub.product01 .bg_wrap{ display: none; } #sub.product .con01 .lr_w .right strong{ margin-bottom: 30px ;} #sub.product .con01 .lr_w .right ul li{ font-size: 13px; } #sub.product .con01 .lr_w .right ul li:after{ top: 7px; } #sub.product .con05 ul li dt:after{ right: -65%; } } @media (max-width: 980px){ #hd.sub_hd{ padding-top: 0; } #gnb .gnb_1dli{ display: none; } #gnb .gnb_mnal{ display: block; } #logo a img{ height: 38px; } #gnb .gnb_1dli{ line-height: 32px; margin-top:23px; } #hd_wrapper{ padding-bottom: 20px; } #hd:after{ display: none; } #bo_gall .bo_tit{ font-size: 16px !important; line-height: 28px !important;; } #bo_gall p.date{ font-size: 14px !important; } .bo_sch_wrap .bo_sch .sch_bar .sch_input{ width: 80% !important; font-size: 14px !important; height: 42px !important; } .bo_sch_wrap .bo_sch select{ width: 15% !important; height: 42px !important; font-size: 14px !important; margin-right: 2% !important; } .bo_sch_wrap .bo_sch{ display: block !important; } .bo_sch_wrap .bo_sch .sch_bar{ width: 83% !important; } .bo_sch_wrap .bo_sch .sch_bar .sch_btn{ width: 42px !important; height:42px !important; font-size: 16px !important; } #main .main_visual .main_c .m_txt strong{ font-size: 28px; line-height: 52px; } #main .main_visual .main_c .m_txt strong span{ font-size: 32px; } #main .main_visual .main_c .m_txt{ margin-bottom: 70px; } #main .con01.swiper-slide-active .txt_b strong img{ height: 60px; } #main .con01 .txt_b .p01{ font-size: 15px; line-height: 30px; margin-bottom: 70px; } #main .con01 .txt_b .p02{ font-size: 24px; line-height: 40px; } #main .con01 .txt_b .p02 i{ display: block; margin-left: 0; margin-top: 12px; } #ft{ background-image: none; padding: 50px 0; } #ft .f_top .f_logo{ padding-top: 0; } #ft .f_top{ float: none; width: 100%; margin-right: 0; margin-bottom: 20px; } #ft .f_bot{ float: none; width: 100%; } #ft .f_bot address{ font-size: 13px; line-height: 30px; } #ft .f_bot p{ font-size: 12px; } #main .main_visual .main_img img{ left: 29%; } #main .con01{ background: url(../img/main/con01_bg2.jpg) center center no-repeat; background-size: auto 100%; } #main .con01 .inner{ top: 50%; } #ft .f_bot address{ word-break: keep-all; } #sub.greeting .gr_w .left{ float: none; width: 100%; margin-right: 0; } #sub.greeting .gr_w .left > span{ text-align: left; } #sub.greeting .gr_w .right{ width: 70%; } #sub.history .y_wrap dl dt{ padding-left: 38px; } #sub.history .y_wrap dl dt img{ height: 30px; } #sub.history .y_wrap dl dt:before{ width: 90px; height: 90px; background-size: 100% 100% !important; } #sub.history .y_wrap dl dd ul li p{ font-size: 14px; } #sub.history .y_wrap dl dd ul li span{ font-size: 16px; width: 77px; } #sub.history .y_wrap dl dd:after{ width: 18px; height: 18px; background-size: 100% 100%; left: -8px; } #sub.family .wrap .left{ float: none; max-width: 490px; width: 80%; margin: 0 auto; margin-bottom: 80px; } #sub.family .wrap .right{ float: none; max-width: 490px; width: 80%; margin: 0 auto; margin-top: 80px; } #sub.family .wrap:before{ width: 50px; height:50px; background-size: 100% 100%; top: 50%; transform: translate(-50%,-50%);} #sub.family .wrap .line{ width: 2px; height: 50%; top: 50%; transform: translate(-50%,-50%);} #sub.product02 .bg_wrap{ display: none; } #sub.product03 dt{ font-size: 24px;} #sub.product03 dt span{ font-size: 16px; margin-top: 8px; } #sub.product03 dd .p01{font-size: 16px; line-height: 32px; margin-bottom: 30px; } #sub.product03 dd .wrap2{ padding-top: 40px; padding-bottom: 60px ;} #sub .sub_t2 strong{ font-size: 16px;padding-left: 42px; } #sub .sub_t2 strong:before{ width: 36px; height:16px; background-size: 100% 100%; } #sub.product03 dd .t_w table th{ height: 50px; font-size: 14px; } #sub.product03 dd .t_w table td{ font-size: 14px; height: 42px; } #sub.product03 .con02{ margin-top: 100px; } #sub.product03 dd .wrap2:before{ left: -44px; } #sub.step .con01 ul li{ width: 46%; margin-right: 8%; } #sub.step .con01 ul li:nth-child(3n+0){ margin-right: 8%; } #sub.step .con01 ul li:nth-child(2n+0){ margin-right: 0; } #sub.step .con01 ul li:before{ right: -10%; } #sub.step .con01 ul li:nth-child(3n+0):before{ display: block; } #sub.step .con01 ul li:nth-child(2n+0):before{ display: none; } #sub.step .con01 ul:before{height: 75%; } } @media (max-width: 880px){ #sub .sub_visual{ padding-top: 160px; } #sub .sub_visual .sub_t span{ font-size: 14px; } #sub .sub_visual .sub_t strong{ font-size: 32px; margin-bottom: 50px; } #sub .sub_visual .sub_i{ height: 400px; } #sub .sub_visual .sub_i img{ height: 400px; } #sub .sub_con .sub_tab{ height: 60px; } #sub .sub_con .sub_tab ul{ display: block; } #sub .sub_con .sub_tab ul li{ height: 60px; margin-right: 0; } #sub .sub_con .sub_tab ul li a{ line-height: 60px; font-size: 14px; transform: skew(-0.1deg);} #sub.company .sub_con .sub_tab ul li{ width: 20%; } #sub.product .sub_con .sub_tab ul li, #sub.product2 .sub_con .sub_tab ul li{ width: 33.3333333%; } #sub.customer .sub_con .sub_tab ul li{ width: 33.3333333%; } #sub .sub_con .sub_tab ul li a:after{ width: 24px; height: 24px; border: 6px solid rgba(179, 196, 192, 0.2); bottom: -12px; } #sub .sub_con{ padding-top: 140px; } #sub .sub_con .sub_tit strong{ font-size: 24px; } #sub .sub_con .sub_tit{ margin-bottom: 50px ;} #sub.greeting .gr_w .left{ padding-top: 0; } #sub.greeting .gr_w .left p{ font-size: 16px; line-height: 32px; word-break: keep-all; } #sub.greeting .gr_w .left p.bb br{ display: none; } #sub.direction .maps{ height: 300px; width: 80%; margin: 0 auto; } #sub.direction .root_daum_roughmap .wrap_map{ height: 300px; } #sub.direction .maps:before{ width: 140px; height: 120px; background-size: 100% 100%; top: -62px; } #sub.direction .m_bot .t_bx dl dt{ font-size: 14px; padding-left: 20px; line-height: 30px; width: 98px; } #sub.direction .m_bot .t_bx dl dt:after{ width: 14px; height:14px; background-size: 100% 100%; top: 8px; } #sub.direction .m_bot .t_bx dl dd{ font-size: 14px; line-height: 30px; } #sub.direction .m_bot .t_bx{ padding-top: 30px; padding-bottom: 30px; padding-left: 30px; } #sub.direction .m_bot{ margin-top: 40px; } #sub.direction .sub_con{ padding-bottom: 100px; } #sub.product .con01{ padding-top: 50px; } #sub.product .con01 .p01{ font-size: 16px; line-height: 32px; margin-bottom: 40px; } #sub.product .con01 .lr_w .left{ float: none; width: 70%; margin: 0 auto; } #sub.product .con01 .lr_w .right{ float: none; width: 70%; margin: 0 auto; padding-top: 40px; } #sub.product .con01 .lr_w .right strong{ margin-bottom: 15px; } #sub.product .con01 .lr_w .right ul li{ margin-bottom: 10px; } #sub .sub_t2 strong{ font-size: 18px; } #sub .sub_t2 strong:before{ width: 40px; height: 18px; background-size: 100% 100%; top: 1px; } #sub.product .con03 .img_w{ margin-bottom: 20px; } #sub .sub_t2 strong{ padding-left: 50px; } #sub.product .con05 ul li dt:after{ right: -35%; } #sub .sub_t2{ margin-bottom: 18px; } #sub.product .con01{ margin-bottom: 80px; } #sub.product .con_w{ margin-bottom: 80px; } #sub.product .con05 ul li{ margin-top: 40px; } #sub.product .con_w:last-child{ padding-bottom: 80px; } #sub.product .con05 ul li dd{ font-size: 14px; line-height: 24px; min-height: 48px; } #sub.product .con05 ul li dt:after{ right: -50%; } #sub.acceptance .con01 strong img{ width: 100px; } #sub.acceptance .con01 .send_b a{ width: 190px; height: 48px; line-height: 46px; font-size: 14px; } #sub.acceptance .con01 .send_b a i{ margin-left: 8px; } #sub.acceptance .con01 .send_b a i img{ width: 12px; } #sub.acceptance .con01{ background-size: 1200px; padding-top: 200px; padding-bottom: 80px; } } @media (max-width: 800px){ .tbl_head01 thead th{ padding: 12px 0; font-size: 14px; height: 38px; } .tbl_head01 td{ height: 38px; font-size: 14px; } .tbl_head01 thead th.th01{ width: 10%; } #faq_wrap li a p{ font-size: 14px !important;} #faq_wrap li h3 .tit_bg{ font-size: 14px !important; } #faq_wrap li h3{ min-height: 52px !important; line-height: 26px !important; padding-left: 60px !important; } #faq_wrap li h3 .tit_btn{ top: 14px !important; } #faq_con .con_inner .closer_btn{ top: -43px !important; } #faq_wrap li h3 .tit_bg{ left: 23px !important; } #faq_con .con_inner:after{ left: 23px !important; font-size: 14px !important; } #faq_con .con_inner{ padding:25px !important; padding-left: 60px !important;} #faq_con .con_inner p{ font-size: 13px !important; line-height: 25px !important; } #sub.history .y_wrap dl dt{ float: none; width: 100%; margin-right: 0; margin-bottom: 40px; } #sub.history .y_wrap:after{ left: 0; transform: translate(0,0);} #sub.history .y_wrap dl dt:before{ animation: none; left: -2px; z-index: 1; } #sub.history .y_wrap dl dd:after{ top: -63px; } #sub.history .y_wrap dl dd{ float: none; width: 100%; } #sub.history .y_wrap dl{ padding-bottom: 100px; } #sub.history .y_wrap dl dd ul li{ margin-bottom: 20px; } #sub.family .wrap .box strong{ margin-bottom: 20px; } #sub.family .wrap .box strong img{ height: 24px; } #sub.family .wrap .box dl dt{ font-size: 14px; padding-left: 20px; width: 22%; } #sub.family .wrap .box dl dt:after{ width: 14px; height: 14px; background-size: 100% 100% !important; top: 1px; } #sub.family .wrap .box dl dd{ font-size: 14px; width: 77%; } #sub.family .wrap .box{ padding-top: 40px; padding-bottom: 40px; padding-left: 30px; } #sub.product .con05 ul li{ width: 50%; text-align: center !important;} #sub.product .con05 ul li dl{ display: block; } #sub.step .con01 ul li dl dd p{ font-size: 14px; line-height: 28px; } #sub.step .con01 ul li dl dd{ height: 130px;margin-top: -30px; } #sub.step .con01 ul li dl dt img{ width: 56px; } #sub.step .con01 ul li{ margin-bottom: 35px; } #sub.step .con01{ padding-bottom: 80px; } #sub.step .sub_con{ padding-top: 80px; } } @media (max-width: 700px){ #ft{ padding: 40px 0; } #ft .f_top .f_logo img{ height: 32px; } #ft .f_top .f_nav ul li a{ line-height: 32px; font-size: 14px; } #ft .f_top{ padding-bottom: 15px; } #ft .f_bot{ margin-top: 15px; } #ft .f_bot address{ font-size: 14px; line-height: 28px; float: none; width: 100%; } #ft .f_bot address span{ width: 12px; } #ft .f_bot p{ float: none; display: block; text-align: right; padding-top: 10px; font-size: 12px; } #main .con01{ background-position: right 40% center; } #main .con01 .inner{ top: 40%; } #sub.product .con05 ul li dt:after{ right: 0; } #sub.product .con05 ul li:nth-child(2n+0) dt:after{ display: none; } #sub.product .con05 ul li dt img{ width: 60px; } #sub.product .con05 ul li{ margin-top: 20px; } #sub.product .con05{ padding-top: 65px; padding-bottom: 75px; } #sub.product03 dt{ float: none; width: 100%; margin-right: 0; padding-left: 35px; } #sub.product03 dd{ float: none; width: 100%; padding-left: 35px; margin-top: 20px; } #sub.product03 .cw_w:before{ width: 60px; height: 60px; border-width: 18px; left: -30px; top: -18px; } #sub.product03 dd .wrap2:before{left: -27px; } } @media (max-width: 640px){ .tbl_head01 thead th.th02{ width: auto; } .tbl_head01 thead th.th03{ width: 50px !important; } .tbl_head01 thead th.th04{ width: 50px !important; } .tbl_head01 td{ font-size: 12px; } #bo_btn_top{ display: none !important; } .bo_sch_wrap{ margin-bottom: 20px !important;} #bo_gall .bo_tit{ font-size: 14px !important; line-height: 26px !important; } #main .main_visual .main_c .m_btn ul li{ width: 31.333333%; margin-right: 3%; height: 192px; } #main .main_visual .main_c .m_btn ul li:last-child{ margin-right: 0; } #main .main_visual .main_c .m_btn ul li a i img{ width: 72px; } #main .main_visual .main_c .m_btn ul li a i:after { background-size: 100% 100% !important;} #main .main_visual .main_c .m_btn ul li a dl dd{ font-size: 13px; line-height: 23px; } #main .main_visual .main_c .m_btn ul li a dl dt{ font-size: 14px; } #main .main_visual .main_img img{ left: 16%; } #main .main_visual .scroll{ top: auto; transform: translate(0,0); bottom:50px; } #sub .sub_visual{ padding-top: 100px; } #sub .sub_visual .sub_t span{ font-size: 12px; margin-bottom: 12px; } #sub .sub_visual .sub_t strong{ font-size: 24px; margin-bottom: 35px; } #sub .sub_visual .sub_i{ height: 300px; } #sub .sub_visual .sub_i img{ height: 300px; } #sub .sub_con .sub_tit strong{ font-size: 20px; } #sub .sub_con .sub_tit{ margin-bottom: 30px; } #sub.greeting .gr_w .left p{ font-size: 14px; line-height: 28px; } #sub.greeting .gr_w .left > span{ font-size: 14px; } #sub.greeting .gr_w .right{ width: 80%; } #sub .sub_con .sub_tab .inner{ padding: 0; } #sub .sub_con .sub_tab ul li a{ font-size: 12px; } #sub.board_w .sub_con{ padding-bottom: 100px; } #sub.product .con_w:last-child{ padding-bottom: 40px; } #sub.product .con04 .p02{ font-size: 12px; line-height: 18px; margin-top: 8px; } #sub.product .con01 .lr_w .right ul li{ width: 100%; margin-right: 0; } #sub.product .con01:before{ height: 45%; } #sub.product02 .con01:before{ height: 65%; } #sub.product .con01 .lr_w .right strong{ font-size: 18px; } #sub.product .con02 ul li{ margin-right: 0; width: 100%; margin-bottom: 20px; } #sub.product .con02 ul li:last-child{ margin-bottom: 0; } #sub.product03 dt{ font-size: 18px; } #sub.product03 dt span{ margin-top: 4px; } #sub.product03 dd .p01{ font-size: 13px; line-height: 26px; } #sub .sub_t2 strong{ font-size: 16px; } #sub.product03 dd .t_w table th{ height:40px; font-size: 12px; } #sub.product03 dd .t_w table td{ font-size: 12px; height: 38px; } #sub.product03 dd .wrap2{ padding-top: 30px; padding-bottom: 44px; } #sub.product03 dd .t_w2{ margin-top: 30px; } #sub.product03 .con02 dd .wrap2{ padding-bottom: 90px; } #sub.product03 .con02{ margin-top: 60px; } } @media (max-width: 540px){ #ft .f_bot address{ font-size: 12px; line-height: 22px; } #ft .f_bot p{ font-size: 11px; } #hd{ padding-top: 10px; } #logo{ margin-top: 10px; } #gnb .gnb_1dli{ margin-top: 11px; } #main .main_visual .main_img img{ left: -16%; } #logo a img{ height: 35px; } #hd_pop, #hd_wrapper, #tnb .inner, #container_wr, #ft_wr{ padding: 0 15px; } #hd_wrapper{ padding-bottom: 10px; } #top_btn .wrap .wrap2 strong{ display: none; } #top_btn{ width: 50px; height: 50px; box-shadow: 5px 3px 10px 0px rgb(0 0 0 / 10%); bottom: 10px; right: 10px; } #ft .f_bot p{ word-break: keep-all; } #main .main_visual .main_c .m_txt strong{ text-shadow: 3px 3px 5px rgba(0,0,0,0.3); color: #fff; } #main .main_visual .main_c .m_txt strong span{ color: #fff; } #main .main_visual .main_c .m_txt > span{ color: #fff; } #main .con01.swiper-slide-active .txt_b strong img{ height: 40px; } #main .con01 .txt_b .p01{ font-size: 13px; line-height: 25px; margin-bottom: 35px; } #main .con01 .txt_b strong{ margin-bottom: 15px; } #main .con01 .txt_b .p02{ font-size: 18px; line-height: 30px; } #main .con01 .inner{ top: 32%; } .gall_row .col-gn-4{ width: 48% !important; margin-right: 4% !important; } .gall_row .col-gn-4:nth-child(2n+0){ margin-right: 0 !important; } #bo_gall .gall_text_href{ margin-top: 15px !important;} #bo_gall p.date{ margin-top: 0 !important; } #bo_gall .gall_box{ margin-bottom: 30px !important;} .pg_wrap{ margin-top: 40px !important; padding-bottom: 50px; } .bo_sch_wrap .bo_sch select{ width: 33% !important; } .bo_sch_wrap .bo_sch .sch_bar{ width: 65% !important; } .bo_sch_wrap .bo_sch .sch_bar .sch_input{ width: 75% !important; } #bo_gall #gall_ul .gall_li{ margin-bottom: 30px !important;} #bo_v_title .bo_v_tit{ font-size: 16px !important; } #faq_wrap li a p{ font-size: 12px !important;} #faq_wrap li h3 .tit_bg{ font-size: 12px !important; } #faq_wrap li h3{ min-height: 52px !important; line-height: 26px !important; padding-left: 40px !important; } #faq_wrap li h3 .tit_btn{ top: 14px !important; } #faq_con .con_inner .closer_btn{ top: -43px !important; } #faq_wrap li h3 .tit_bg{ left: 15px !important; } #faq_con .con_inner:after{ left: 15px !important; font-size: 12px !important; } #faq_con .con_inner{ padding:25px !important; padding-left: 40px !important;} #faq_con .con_inner p{ font-size: 12px !important; line-height: 22px !important; } #main .main_visual .main_c .m_txt strong{ font-size: 20px; line-height: 40px; margin-top: 15px; } #main .main_visual .main_c .m_txt strong span{ font-size: 24px; } #main .main_visual .main_c .m_txt{ margin-bottom: 35px; } #main .main_visual .main_c .m_btn ul li a i img{ width: 50px; } #main .main_visual .main_c .m_btn ul li{ height: 164px; } #ft .f_bot p{ font-size: 10px; line-height: 18px; } #ft .f_top{ margin-bottom: 0; } #ft .f_bot{ margin-top: 0; } #sub .sub_con{ padding-top: 120px; } #sub .sub_con .sub_tit { margin-bottom: 40px; } #sub .sub_con .sub_tit strong{ font-size: 18px; } #sub.greeting .gr_w .left p{ font-size: 13px; line-height: 26px; } #sub .sub_con .sub_tab{ height: 50px; } #sub .sub_con .sub_tab ul li{ height: 50px; } #sub .sub_con .sub_tab ul li a{ line-height: 50px; } #sub.history .y_wrap dl dt img{ height: 22px; } #sub.history .y_wrap dl dt:before{ width: 60px; height: 60px; } #sub.history .y_wrap dl dd:after{ top: -59px; } #sub.history .y_wrap dl dt{ padding-left: 22px; } #sub.history .y_wrap dl dd{ padding-left: 22px; } #sub.history .y_wrap dl dd ul li span{ font-size: 14px; width: 60px;} #sub.history .y_wrap dl dd ul li p{ font-size: 12px; line-height: 16px; } .bo_sch_wrap .bo_sch select{ font-size: 12px !important; } .bo_sch_wrap .bo_sch .sch_bar .sch_input{ font-size: 12px !important; } #sub.family .wrap .box{ width: 90%; } #sub.family .wrap .box strong img{ height: 18px; } #sub.family .wrap .box dl dt{ float: none; width: 100%; margin-right: 0; margin-bottom: 10px; } #sub.family .wrap .box dl dd{ float: none; width: 100%; padding-left: 20px; } #sub.family .wrap .box{ padding-top: 20px; padding-bottom: 20px; padding-left: 20px; } #sub.family .wrap .box dl dd{ font-size: 12px; } #sub.family .wrap:before{ width: 38px; height: 38px; } #sub.family .sub_con{ padding-bottom: 90px; } #sub.direction .maps{ width: 90%; height: 240px; } #sub.direction .root_daum_roughmap .wrap_map{ height: 240px; } #sub.direction .maps:before{ width: 90px; height: 77px; top: -40px; } #sub.direction .m_bot .cir{ display: none; } #sub.direction .m_bot .t_bx{ float: none; width: 100%; } #sub.direction .m_bot{ margin-top: 20px; } #sub.direction .m_bot .t_bx dl dd{ font-size: 12px; } #sub.direction .sub_con{ padding-bottom: 80px; } #sub.product .con01 .p01{ font-size: 14px; line-height: 28px; margin-bottom: 40px ; word-break: keep-all; } #sub.product .con01 .p01 br{ display: none; } #sub.product .con01 .lr_w .left{ width: 85%; } #sub.product .con01 .lr_w .right{ width: 85%; } #sub .sub_t2 strong{ font-size: 15px; } #sub .sub_t2 strong:before{ top: 0; } #sub.product .con_w{margin-bottom: 60px; } #sub.product .con01{ margin-bottom: 60px; } #sub.step .con01 ul li dl dd{ border-radius: 10px; } #sub.step .con01 ul li dl dd p{ font-size: 12px; line-height: 24px; } #sub.step .con01 ul li:before{ right: -13%; } #sub.step .con01 ul li dl dd{ height: 105px; } } @media (max-width: 375px){ #gnb_all .gnb_al_ul{ padding-top: 160px; } #gnb_all .gnb_al_ul > li > a{ font-size: 16px; } #gnb_all .gnb_al_ul > li:before{ top: -2px; } #gnb_all .gnb_al_ul > li > ul > li > a{ font-size: 13px; } #gnb .gnb_close_btn{ top: 12px; right: 12px; } #sub.direction .m_bot .t_bx{ padding: 15px; } #sub.direction .m_bot .t_bx dl dt{ float: none; width: 100%; } #sub.direction .m_bot .t_bx dl dd{ float: none; width: 100%; padding-left: 20px; line-height: 16px; } #sub.direction .maps{ width: 90%; height: 200px; } #sub.direction .root_daum_roughmap .wrap_map{ height: 200px; } #sub.product03 dd .p01 br{ display: none; } #sub.product03 dd .p01{ word-break: keep-all; } }