@charset "utf-8";
/* CSS Document */


/* CSS Information ----------------------------------------

Site Name : 반응형 기본디자인 A1
Part : 하단
Last edit : 2020.03.17
Author : Gautech(PDH)

관련폰트 :
font-family: 'Noto Sans KR', sans-serif; (100,300,400,500,600,700,900)
font-family: 'Noto Serif KR', serif; (200,300,400,500,700,900)
font-family: 'NanumSquareRound', sans-serif; (400,500,700,900)
font-family: 'NanumBarunGothic', sans-serif; (200,300,400,700)
font-family: 'Roboto', sans-serif; (300,400,500,700,900)

--------------------------------------------------------- */



.cont_4{ text-align: center;}
.service_center{ width:1010px; height:135px; border:1px solid #ddd; background-color:#fafafa; margin:6px auto 40px auto; display: inline-table; padding:9px 0px 0px 0px; box-sizing:border-box;}
.service_center_left{ width:44%; float:left; text-align:left; padding:0 50px 0 60px; background-image:url(/images/main/main_tel_line.png); background-repeat:no-repeat; background-size: auto; background-position:right center;}
.tel_top{ width:100%; height:auto;}
.tel_top>img{ width:auto; height:auto; float:left; margin-top:8px; margin-right:10px;}
.tel_top>p{}
.tel_text01{ float: left; font-size:26.5px; color:#333; letter-spacing:-1px; font-weight:300;}
.tel_text01>span{ font-weight:800;}
.tel_text02{ float: left; font-size:40px; color:#828282; letter-spacing:-2px; font-weight:600; line-height:40px;}
.tel_text02>span{ font-weight:600; color:#333;}
.tel_bottom{ width:100%; height:auto; font-size:18px; color:#5f5e5e; float: left; font-weight:500; letter-spacing:-0px; margin-top:1px;}

.service_center_right{ width:56%; height:auto; float:left;}
.service_center_right a{ width:auto; height:auto; display: inline-block;}
.service_center_right a:nth-child(2){ margin:0 46px;}

.buttons{position: relative; text-align: center; background-color:rgba(237,237,237,1); border-radius:100px;}
.buttons button{overflow: hidden; position: relative; display: inline-block; vertical-align: top; width: 116px; height: 116px; line-height: 116px; transition: all 0.5s; border-radius:100px; border:0; background-repeat:no-repeat; background-size: contain; display:inline-block; cursor:pointer;}
.buttons:nth-child(1) button{ background-image:url(/images/main/main_supo_img01.png);}
.buttons:nth-child(2) button{ background-image:url(/images/main/main_supo_img02.png);}
.buttons:nth-child(3) button{ background-image:url(/images/main/main_supo_img03.png);}
.buttons button:hover{color: #fff;}
.buttons:nth-child(1) button:hover{ background-image:url(/images/main/main_supo_img04.png);}
.buttons:nth-child(2) button:hover{ background-image:url(/images/main/main_supo_img05.png);}
.buttons:nth-child(3) button:hover{ background-image:url(/images/main/main_supo_img06.png);}
.buttons button:before{content: ""; z-index: -1; position: absolute; background:url(/images/common/gradation.svg); transition: all 1s; }
.buttons.buttons2 .button6:before{left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 200%; height: 0;}
.buttons.buttons2 .button6:hover:before{height: 300%;}

.modal_new{display: inline-block; position: absolute; bottom: 100px; right: 95px;}
.modal_new>button{ background-image:url(/images/main/main_supo_img07.png) !important; background-color: rgba(237,237,237,1);}
.modal_new>button:hover{ background-image:url(/images/main/main_supo_img08.png) !important;}



footer>h2 { display:none;}
.footer_wrap { width:100%; color:#fff;}

.footer_menu { width:100%; height:27px; background-image:url(/images/common/gradation.svg); background-repeat:no-repeat; background-size: auto; text-align: center;}
.footer_menu>a { display:inline-block; font-size:16px; font-weight:200; padding:0 15px; line-height:27px; background-image:url(/images/icon/menu_bar2.png); background-repeat:no-repeat; background-position:100% 50%;}
.footer_menu>a:last-child { background-image: none;}

.footer_copy { width:1200px; margin:0 auto; text-align:center; color:#5b5b5b;}
.footer_copy>p { width:100%; padding:12px 20px; line-height:23px}
.footer_copy>p>span { display:inline-block; padding:0 10px;}
.w3c { padding-top:18px;}


/* 1024 ~ 768까지 태블릿 설정 */

@media screen and (max-width:1024px){

.service_center{ width:90%; height: auto; border:1px solid #ddd; background-color:#fafafa; margin:6px auto 40px auto; display: inline-table; padding:15px 40px; box-sizing:border-box;}
.service_center_left{ width:100%; float:left; text-align:left; padding:0 0px 0 0px; background-image: none;}
.tel_top{ width:100%; height:auto;}
.tel_top>img{ width:auto; height:auto; float:left; margin-top:0px; margin-right:10px;}
.tel_top>p{}
.tel_text01{ float: left; font-size:26.5px; color:#333; letter-spacing:-1px; font-weight:300;}
.tel_text01>span{ font-weight:800;}
.tel_text02{ float: left; font-size:40px; color:#828282; letter-spacing:-2px; font-weight:600; line-height:40px; margin-left:20px;}
.tel_text02>span{ font-weight:600; color:#333;}
.tel_bottom{ width:auto; height:auto; font-size:18px; color:#5f5e5e; float: left; font-weight:500; letter-spacing:-0px; margin-top:1px;}

.service_center_right{ width:100%; height:auto; float:left; margin:20px auto 10px auto;}
.service_center_right a{ float:left;}
.service_center_right a img{}
.service_center_right a:nth-child(2){ margin:0 46px;}


.modal_new{display: inline-block; position: absolute; bottom: 95px; right: 30px;}


.footer_wrap { width:100%; color:#fff;}

.footer_menu { width:100%; height:27px; background-image:url(/images/common/gradation.png); background-repeat:no-repeat; background-size: auto; text-align: center;}
.footer_menu>a { display:inline-block; font-size:14px; font-weight:200; padding:0 10px; line-height:27px; background-image:url(/images/icon/menu_bar2.png); background-repeat:no-repeat; background-position:100% 50%;}
.footer_menu>a:last-child { background-image: none;}

.footer_copy { width:100%; margin:0 auto; font-size:13px; color:#5b5b5b;}
.footer_copy>p { width:100%; padding:12px 20px; line-height:20px}
.footer_copy>p>span { display:inline-block; padding:0 10px;}
.w3c { padding-top:18px;}


}



/* 767 ~ 320까지 모바일 설정 */

@media screen and (max-width:767px){

.service_center{ width:95%; height: auto; border:1px solid #ddd; background-color:#fafafa; margin:6px auto 40px auto; display: inline-table; padding:15px 15px 15px 15px; box-sizing:border-box;}
.service_center_left{ width:290px; float: inherit; margin:0 auto; display:inline-block; text-align:left; padding:0 0px 0 0px; background-image: none;}
.tel_top{ width:100%; height:auto;}
.tel_top>img{ width:auto; height:auto; float:left; margin-top:0px; margin-right:5px;}
.tel_top>p{}
.tel_text01{ float: left; font-size:23.5px; color:#333; letter-spacing:-1px; font-weight:300;}
.tel_text01>span{ font-weight:800;}
.tel_text02{ float: left; font-size:35px; color:#828282; letter-spacing:-2px; font-weight:600; line-height:40px; margin-left:0px;}
.tel_text02>span{ font-weight:600; color:#333;}
.tel_bottom{ width:auto; height:auto; font-size:15.7px; color:#5f5e5e; float: left; font-weight:500; letter-spacing:-0px; margin-top:1px;}

.service_center_right{ width:300px; height:auto; float:inherit; display:inline-block; margin:20px auto 7px auto;}
.service_center_right a{ float:left; width:32%;}
.service_center_right a img{ width:100%;}
.service_center_right a:nth-child(2){ margin:0 2%;}

.buttons{position: relative; text-align: center; background-color:rgba(237,237,237,1); border-radius:100px;}
.buttons button{overflow: hidden; position: relative; display: inline-block; vertical-align: top; width: 100%; height: 95px; transition: all 0.5s; border-radius:100px; border:0; background-repeat:no-repeat; background-size: contain; display:inline-block; cursor:pointer;}
.buttons:nth-child(1) button{ background-image:url(/images/main/main_supo_img01.png);}
.buttons:nth-child(2) button{ background-image:url(/images/main/main_supo_img02.png);}
.buttons:nth-child(3) button{ background-image:url(/images/main/main_supo_img03.png);}
.buttons button:hover{color: #fff;}
.buttons:nth-child(1) button:hover{ background-image:url(/images/main/main_supo_img04.png);}
.buttons:nth-child(2) button:hover{ background-image:url(/images/main/main_supo_img05.png);}
.buttons:nth-child(3) button:hover{ background-image:url(/images/main/main_supo_img06.png);}
.buttons button:before{content: ""; z-index: -1; position: absolute; background:url(/images/common/gradation.svg); transition: all 1s; }
.buttons.buttons2 .button6:before{left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 200%; height: 0;}
.buttons.buttons2 .button6:hover:before{height: 300%;}

.modal_new{ width:93px; height:93px; display: inline-block; position: absolute; bottom: 4px; right: 5px;}


.footer_wrap { width:100%; color:#fff;}

.footer_menu { width:100%; height:auto; background-image:url(/images/common/gradation.png); background-repeat:no-repeat; background-size: auto; text-align: center; background-size:100% 100%; background-position:center;}
.footer_menu>a { display:inline-block; font-size:13px; font-weight:200; padding:0 10px; line-height:20px; background-image:url(/images/icon/menu_bar2.png); background-repeat:no-repeat; background-position:100% 50%;}
.footer_menu>a:nth-child(3){ display:none;}
.footer_menu>a:nth-child(4){ display:none;}
.footer_menu>a:last-child { background-image: none;}

.footer_copy { width:100%; margin:0 auto; font-size:12px; color:#5b5b5b;}
.footer_copy>p { width:100%; padding:12px 15px; line-height:18px}
.footer_copy>p>span { display:inline-block; padding:0 4px;}
.w3c { padding-top:2px;}


}