/* 버튼 */ .btn,.btn i{vertical-align:middle}.btn:before,.btn:focus:before,.btn:hover:before{z-index:-1;transition:.3s}.btn,.btn.btn-link{overflow:hidden;text-transform:uppercase}.btn,.btn:not(:disabled):not(.disabled){cursor:pointer}.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{font-size:.8rem}.btn{position:relative;z-index:1;border-radius:2px;font-weight:700!important;font-size:14px;padding:14px 30px!important;letter-spacing:.05em}.btn i{display:inline-block;margin-right:8px}.btn.btn-rounded{border-radius:100px}.btn:before{content:"";position:absolute;left:0;top:0;width:0%;height:100%}.btn.btn-link{border:0;padding:0!important;color:#4782d3}.btn.btn-sm{padding:9px 20px!important;font-size:.75rem}.btn.btn-link:after{font-family:themify;content:"\e649";margin-left:5px;position:relative;top:0;font-size:10px;transition:.3s;-webkit-transition:.3s}.btn.btn-link:hover{text-decoration:none;color:#999}.btn.btn-link:hover:after{margin-top:-100px}.btn.btn-secondary{color:#999}.btn-circle .btn-danger i,.btn-circle .btn-info i,.btn-circle .btn-primary i,.btn-circle .btn-success i,.btn-circle .btn-warning i,.btn.btn-secondary:hover{color:#fff}.btn-white{background-color:#fff;color:#333}.btn-white-outline{border:2px solid #fff;background-color:transparent;color:#fff}.btn-white-outline:focus:before,.btn-white-outline:hover:before{width:100%;background-color:#fff}.btn-outline-primary{border:2px solid #4782d3;background-color:transparent;color:#4782d3}.btn-outline-primary:active,.btn-outline-primary:focus,.btn-outline-primary:hover{color:#fff;border-color:#4782d3;background-color:transparent}.btn-outline-primary:active:before,.btn-outline-primary:focus:before,.btn-outline-primary:hover:before{width:100%;background-color:#4782d3}.btn-outline-info{border:2px solid #5bc0de;background-color:transparent;color:#5bc0de}.btn-outline-info:active,.btn-outline-info:focus,.btn-outline-info:hover{color:#fff;border-color:#5bc0de;background-color:transparent}.btn-outline-info:active:before,.btn-outline-info:focus:before,.btn-outline-info:hover:before{width:100%;background-color:#5bc0de}.btn-outline-success{border:2px solid #5cb85c;background-color:transparent;color:#5cb85c}.btn-outline-success:active,.btn-outline-success:focus,.btn-outline-success:hover{color:#fff;border-color:#5cb85c;background-color:transparent}.btn-outline-success:active:before,.btn-outline-success:focus:before,.btn-outline-success:hover:before{width:100%;background-color:#5cb85c}.btn-outline-danger{border:2px solid #c9302c;background-color:transparent;color:#c9302c}.btn-outline-danger:active,.btn-outline-danger:focus,.btn-outline-danger:hover{color:#fff;border-color:#c9302c;background-color:transparent}.btn-outline-danger:active:before,.btn-outline-danger:focus:before,.btn-outline-danger:hover:before{width:100%;background-color:#c9302c}.btn-outline-warning{border:2px solid #f0ad4e;background-color:transparent;color:#f0ad4e}.btn-outline-warning:active,.btn-outline-warning:focus,.btn-outline-warning:hover{color:#fff;border-color:#f0ad4e;background-color:transparent}.btn-outline-warning:active:before,.btn-outline-warning:focus:before,.btn-outline-warning:hover:before{width:100%;background-color:#f0ad4e}.btn-outline-secondary{border:2px solid #ccc;background-color:transparent;color:#ccc}.btn-outline-secondary:active,.btn-outline-secondary:focus,.btn-outline-secondary:hover{color:#fff;border-color:#ccc;background-color:transparent}.btn-outline-secondary:active:before,.btn-outline-secondary:focus:before,.btn-outline-secondary:hover:before{width:100%;background-color:#ccc}.btn-secondary.disabled,.btn-secondary:disabled{background-color:#f5f5f5}.btn-danger,.btn-dark,.btn-info,.btn-primary,.btn-secondary,.btn-success,.btn-warning,.btn-white{box-shadow:0 .05em .1em rgba(0,0,0,.18);border:0}.btn-danger:hover,.btn-dark:hover,.btn-info:hover,.btn-primary:hover,.btn-secondary:hover,.btn-success:hover,.btn-warning:hover,.btn-white:hover{border:0;box-shadow:0 .05em 1em rgba(0,0,0,.18)}.btn-secondary{background:#f5f5f5;box-shadow:none}.btn-secondary:active,.btn-secondary:focus,.btn-secondary:hover{border:0;color:#fff;box-shadow:none}.btn-circle,.icon-sm-rounded{text-align:center;border-radius:50%}.btn-primary,.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background:#4782d3;color:#fff}.btn-circle{width:80px;height:80px;line-height:80px}.btn-circle i{display:block;line-height:80px;margin:0 auto;font-size:35px}.btn-dark,.btn-dark:active,.btn-dark:focus,.btn-dark:hover{background:#141414;color:#fff}.icon-sm-rounded{width:32px;height:32px;line-height:32px;display:inline-block!important;background:#4782d3;color:#fff}.btn-white-outline:focus,.btn-white-outline:hover{color:#333;border-color:#fff}.btn.btn-lg{padding:15px 40px!important;font-size:14px}.btn:focus,.btn:hover{box-shadow:none;outline:0!important} .you_a{padding:20px 0;} .btn.btn-sm {padding: 9px 20px!important;font-size: 12px;} .main-box{padding-left: 5px;padding-right: 5px;} .main-box .col-md-12{padding:5px 5px;} .box-color{position: relative;} .box-color > .icon { text-align: center; position: relative; } .box-color > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #6c757d; vertical-align: middle; } .box-color > .icon > .info { margin-top: -24px; border: 1px solid #e0e0e0; padding: 25px 0 10px 0; height:220px;background:#ded4c8;} .box-color > .icon > .info > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; } .box-color > .icon > .info > p { font-size: 13px;font-weight:600; color: #666; line-height: 1.7; margin: 20px; text-align:center;} .box-color .space { height: 30px; } .box-color > .icon > .info:hover{background:#1d3557;color:#fff;} .box-color > .icon > .info:hover p {background: #1d3557;color: #fff;} .ss{display: flex; justify-content: flex-start; flex-wrap: wrap; padding:5px 0px;} .ss > .item {margin-right: 1%;} /*.ss > .item:first-child {margin-right: 1%;}*/ .ss > .item:nth-child(3) {margin-right: 0;} .ss > .item:last-child {margin-right: 0;} .col1{box-sizing:border-box;position:relative;float:left;width:100%}/* */ .col2{box-sizing:border-box;position:relative;float:left;width:32.6%}/* */ .col3{box-sizing:border-box;position:relative;float:left;width:32.6%}/* */ .col4{box-sizing:border-box;position:relative;/*float:left*/;width:32.4%;}/**/ .col5{box-sizing:border-box;position:relative;float:left;width:49%}/* */ .ss1{display: flex; justify-content: space-between; flex-wrap: wrap; padding:10px 0px;} .box-color .icon .info1 { margin-top: -24px; border: 1px solid #e0e0e0; padding: 10px 0 5px 0; height:120px;background:#f3f1ec;} .box-color > .icon > .info1 > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; } .box-color > .icon > .info1 > p { font-size: 13px;font-weight:600; color: #666; line-height: 1.7; margin: 20px; text-align:center;} .box-color > .icon > .info1:hover{background:#1d3557;color:#fff;} .box-color > .icon > .info1:hover p {background: #1d3557;color: #fff;} .box-color > .icon > a .info1:hover{background:#882b07;color:#fff;} #sy_1{background-image: url('z1.jpg');background-size: cover;background-position: center center;} #sy_2{background-image: url('z2.jpg');background-size: cover;background-position: center center;} #sy_3{background-image: url('z3.jpg');background-size: cover;background-position: center center;} #sy_4{background-image: url('z4.jpg');background-size: cover;background-position: center center;} #sy_5{background-image: url('z5.jpg');background-size: cover;background-position: center center;} #sy_6{background-image: url('z6.jpg');background-size: cover;background-position: center center;} #sy_7{background-image: url('z7.jpg');background-size: cover;background-position: center center;} #sy_8{background-image: url('z8.jpg');background-size: cover;background-position: center center;} #sy_1:hover{background-image: url('');background:#2f5c13;} #sy_2:hover{background-image: url('');background:#1d3557;} #sy_3:hover{background-image: url('');background:#2f5c13;} #sy_4:hover{background-image: url('');background:#1d3557;} #sy_5:hover{background-image: url('');background:#2f5c13;} #sy_6:hover{background-image: url('');background:#1d3557;} #sy_7:hover{background-image: url('');background:#2f5c13;} #sy_8:hover{background-image: url('');background:#1d3557;} #main-line-5 {position:relative;background: #a1dadc url(bg_body.gif);} #main_visual_a {position: relative;width: 100%;height: 100%; overflow: hidden;max-width:1400px;margin:0 auto;margin-top:20px;margin-bottom:20px;} #main_visual_a img {max-width: 100%;height: auto;border: 0;vertical-align: top;} /* 배너 */ #ftBanner ul, #ftBanner li{margin:0;padding:0} / #ftBanner img{max-width:100%;height:auto;border:0;vertical-align:top} #ftBanner ul{list-style:none} #ftBanner .inner {margin:0 auto;max-width:1280px;} #ftBanner {overflow:hidden;border:1px solid #e5cb53;background:#f2f0c4;} #ftBanner>.inner {position:relative;padding:19px 0 15px;} #ftBanner .slideWrap2 {overflow:hidden;margin-left:88px;margin-right:10px;} #ftBanner .slideWrap2 .slideBox {position:relative;height:49px;padding-right:5px;} #ftBanner .slideWrap2 ul {position:absolute;top:0;left:0;width:9999em;margin-left:1px;} #ftBanner .slideWrap2 ul li {position:relative;float:left;width:182px;text-align:center;box-sizing:border-box;} #ftBanner .slideWrap2 ul li:before {position:absolute;top:0;right:0;z-index:100;content:"";overflow:hidden;display:block;width:1px;height:49px;background:#acacac;} #ftBanner .slideWrap2 ul li:first-child {border-left:1px solid #acacac;} #ftBanner .slideNav {overflow:hidden;position:absolute;top:33px;left:10px;} #ftBanner .slideNav>* {overflow:hidden;float:left;display:block;margin-right:3px;width:21px;height:21px;font-size:0;line-height:0;background:url(btn_foot_slidenav.png) no-repeat 0 0;cursor:pointer;} #ftBanner .slideNav .prev {background-position:0 0;} #ftBanner .slideNav .stop {background-position:-24px 0;} #ftBanner .slideNav .stop.on{background:url(btn_foot_slidenav_play.png) no-repeat 0 0;} #ftBanner .slideNav .next {background-position:100% 0;} .serv_wrap1 {position:relative; width:100%; height:460px; background:url(mid_bg1.jpg) center 0 no-repeat} .serv_wrap1 .inner_wrap {position:relative; width:1430px; margin:0 auto; padding:60px 0 60px 0} .serv_wrap1 .inner_wrap > h2 {color:#221816; font-size:40px; font-family:'s-core-dream-regular','Microsoft Yahei', 'Nanum Gothic', 'Malgun Gothic', sans-serif; text-align:center; font-weight:normal; letter-spacing:0.1em} .serv_wrap1 .inner_wrap > p {color:#333; font-size:17px; font-weight:bold; text-align:center; margin-bottom:50px} .serv_wrap1 .inner_wrap > p.desc {color:#666; font-size:14px; text-align:center; margin-bottom:0.25em} .serv_wrap1 .inner_wrap ul {margin:0 0px} .serv_wrap1 .inner_wrap ul:after {display:block; content:""; clear:both} .serv_wrap1 .inner_wrap ul li {padding:10px; width:16.6%; float:left} .serv_wrap1 .inner_wrap ul li a {display:block; position:relative; width:100%; height:330px; box-shadow:10px 10px 15px 0px rgba(0,0,0,.3);} .serv_wrap1 .inner_wrap ul li a.go_bg_01 {background:url(go_bg_01.jpg) 50% 0 no-repeat; background-size:cover} .serv_wrap1 .inner_wrap ul li a.go_bg_02 {background:url(go_bg_02.jpg) 50% 0 no-repeat; background-size:cover;} .serv_wrap1 .inner_wrap ul li a.go_bg_03 {background:url(go_bg_03.jpg) 50% 0 no-repeat; background-size:cover} .serv_wrap1 .inner_wrap ul li a.go_bg_04 {background:url(go_bg_04.jpg) 50% 0 no-repeat; background-size:cover;} .serv_wrap1 .inner_wrap ul li a.go_bg_05 {background:url(go_bg_05.jpg) 50% 0 no-repeat; background-size:cover;} .serv_wrap1 .inner_wrap ul li a.go_bg_06 {background:url(go_bg_06.jpg) 50% 0 no-repeat; background-size:cover;} .serv_wrap1 .inner_wrap ul li a.go_bg_01:hover {background:url(go_bg_01a.jpg) 50% 0 no-repeat; background-size:cover} .serv_wrap1 .inner_wrap ul li a.go_bg_02:hover {background:url(go_bg_02a.jpg) 50% 0 no-repeat; background-size:cover;} .serv_wrap1 .inner_wrap ul li a.go_bg_03:hover {background:url(go_bg_03a.jpg) 50% 0 no-repeat; background-size:cover} .serv_wrap1 .inner_wrap ul li a.go_bg_04:hover {background:url(go_bg_04a.jpg) 50% 0 no-repeat; background-size:cover;} .serv_wrap1 .inner_wrap ul li a.go_bg_05:hover {background:url(go_bg_05a.jpg) 50% 0 no-repeat; background-size:cover;} .serv_wrap1 .inner_wrap ul li a.go_bg_06:hover {background:url(go_bg_06a.jpg) 50% 0 no-repeat; background-size:cover;} .serv_wrap1 .inner_wrap ul li a:hover .serv_txt {background:rgba(6,19,48,1);} .serv_wrap1 .inner_wrap ul li a .serv_txt {position:absolute; bottom:0; left:0; width:100%;background:rgba(6,19,48,0.7);} .serv_wrap1 .inner_wrap ul li a .serv_txt .sub_txt:before {display:block; width:30px; height:3px; margin:12px auto; background-color:#FFF; content:""} .serv_wrap1 .inner_wrap ul li a .serv_txt .sub_txt {font-size:16px; color:#FFF; font-family: 'Nanum Gothic', 'Malgun Gothic', sans-serif; text-align:center} .serv_wrap1 .inner_wrap ul li a .serv_txt .sub_sbj {margin-bottom:25px; font-size:20px; color:#FFF; font-family:'s-core-dream-regular','Nanum Myeongjo', 'Nanum Gothic', sans-serif; text-align:center} /* 3 */ #main-line-3{padding:30px 0 30px; background-color:#ece1d4; background-image:url(line-3_bg.jpg);} #main-line-3>.in{width:100%; max-width:1400px; margin:0 auto;} #main-line-3>.in>.midd>.item-1{display:flex;justify-content: space-between;} #main-line-3>.in>.midd>.item-1>.item-1_1{width:calc((100% - 0px) * 0.33); height:318px; margin-right:10px; background-color:#fff;} #main-line-3>.in>.midd>.item-1>.item-1_2{width:calc((100% - 0px) * 0.33); height:318px; margin-right:10px; background-color:#fff;} #main-line-3>.in>.midd>.item-1>.item-1_3{width:calc((100% - 0px) * 0.33); height:318px; background-color:#fff;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx{display:flex; flex-direction:column; justify-content:center; position:relative; width:100%; height:100%; padding:30px; background-image:url(service_img_1_pc.jpg); background-repeat:no-repeat; background-position:right bottom; background-size:cover;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>em{display:flex; align-items:center; justify-content:center; position:absolute; left:-16px; top:30px; width:78px; height:30px; font-style:normal; font-family:'Nanum Barun Gothic'; font-size:16px; color:#fff; background-color:#7a5632;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong{width:85px; margin-top:-140px; height:25px; color:#fff; font-size:2.2rem;white-space : nowrap;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span{line-height:1.5; margin-top:5px; font-family:'Nanum Barun Gothic'; font-size:16px; color:#d1d1d1;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span>span{display:block;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span+span{display:flex; align-items:center; width:105px; height:34px; padding:0 5px 0 10px; margin-top:20px; font-weight:600; font-size:15px; color:#222; background-color:#fff; border-radius:4px; box-shadow:6px 6px 8px 2px rgba(0,0,0,0.1);-webkit-transition:background-color 0.3s linear; transition:background-color 0.3s linear;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span+span::after{content:""; width:3.2em; height:3.2em; margin-left:auto; font-size:7px; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-16em 0; background-size:150em auto;-webkit-transform:rotate(90deg); transform:rotate(90deg);} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx:hover{text-decoration:none;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx:hover>strong+span+span{color:#fff; background-color:#d71920;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx:hover>strong+span+span::after{background-position:-16em -6.4em;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul{position:relative; display:flex; flex-wrap:wrap; width:100%; height:100%;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul::before, #main-line-3>.in>.midd>.item-1>.item-1_2>ul::after{content:""; display:block; position:absolute; left:0; top:50%; width:100%; height:1px; background-color:#eadcd2;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li{width:50%; height:50%;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a{display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; padding:20px; text-decoration:none; color:#222;-webkit-transition:background 0.3s linear; transition:background 0.3s linear;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(2)>a {background-image:url(so_002.png);background-size: cover;border: solid 1px #ffffff;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(1)>a {background-image:url(so_001.png);background-size: cover;border: solid 1px #ffffff;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(1)>a::before{content:""; width:4em; height:3em; background-repeat:no-repeat; background-size:4em auto;background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(2)>a::before{content:""; width:4em; height:3em; background-repeat:no-repeat; background-size:4em auto;background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(3)>a {background-image:url(so_003.png);background-size: cover;border: solid 1px #ffffff;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(4)>a {background-image:url(so_004.png);background-size: cover;border: solid 1px #ffffff;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(4)>a::before{content:""; width:4em; height:3em; background-repeat:no-repeat; background-size:4em auto;background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(3)>a::before{content:""; width:4em; height:3em; background-repeat:no-repeat; background-size:4em auto;background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a>strong{margin-top:-110px; font-size:23px; color:inherit;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a>span{margin-top:5px; font-family:'Nanum Barun Gothic'; font-size:15px; color:inherit;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a:hover{color:#fff; background-color:#7f5d3a;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(1)>a:hover::before{background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(2)>a:hover::before{background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_3>.bx{display:flex; flex-direction:column; justify-content:center; position:relative; width:100%; height:100%; padding:30px; background-image:url(service_img_1_tablet.jpg); background-repeat:no-repeat; background-position:right bottom; background-size:cover;} #main-line-3>.in>.midd>.item-1>.item-1_3>.bx>em{display:flex; align-items:center; justify-content:center; position:absolute; left:-16px; top:30px; width:78px; height:30px; font-style:normal; font-family:'Nanum Barun Gothic'; font-size:16px; color:#fff; background-color:#7a5632;} #main-line-3>.in>.midd>.item-1>.item-1_3>.bx>strong{width:85px; margin-top:-140px; height:25px; font-size:2.2rem;white-space : nowrap;} #main-line-3>.in>.midd>.item-1>.item-1_3>.bx>strong+span{line-height:1.5; margin-top:5px; font-family:'Nanum Barun Gothic'; font-size:16px; color:#3c2106;} #main-line-3>.in>.midd>.item-1>.item-1_3>.bx>strong+span>span{display:block;} #main-line-3>.in>.midd>.item-1>.item-1_3>.bx>strong+span+span{display:flex; align-items:center; width:105px; height:34px; padding:0 5px 0 10px; margin-top:20px; font-weight:600; font-size:15px; color:#222; background-color:#fff; border-radius:4px;box-shadow:6px 6px 8px 2px rgba(0,0,0,0.1);-webkit-transition:background-color 0.3s linear; transition:background-color 0.3s linear;} #main-line-3>.in>.midd>.item-1>.item-1_3>.bx>strong+span+span::after{content:""; width:3.2em; height:3.2em; margin-left:auto; font-size:7px; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-16em 0; background-size:150em auto;-webkit-transform:rotate(90deg); transform:rotate(90deg);} #main-line-3>.in>.midd>.item-1>.item-1_3>.bx:hover{text-decoration:none;} #main-line-3>.in>.midd>.item-1>.item-1_3>.bx:hover>strong+span+span{color:#fff; background-color:#d71920;} #main-line-3>.in>.midd>.item-1>.item-1_3>.bx:hover>strong+span+span::after{background-position:-16em -6.4em;} #main-line-3>.in>.midd>.item-2{position:relative; margin-top:0px;width: 100%;} #main-line-3>.in>.midd>.item-2>.scroll-box{overflow:auto; position:relative;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul{display:flex;justify-content: space-between;flex-wrap: wrap;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li{width:33%; padding:0;text-align: center;background-color: #c5cfc8;padding: 10px;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li:not(:last-child){margin-right:0px;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a{display:block; position:relative;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a::before{margin:0 auto;content:""; display:block; width:10em; height:10em; font-size:10px; background-color:#fff; background-image:url(layout.svg); background-repeat:no-repeat center; background-size:150em auto; border-radius:50%;-webkit-box-shadow:2px 5px 6px 2px rgba(0,0,0,0.04);box-shadow:2px 5px 6px 2px rgba(0,0,0,0.04);-webkit-transition:background-color 0.3s linear; transition:background-color 0.3s linear;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-1>a::before{background-position:calc(-10em * 0) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-2>a::before{background-position:calc(-10em * 1) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-3>a::before{background-position:calc(-10em * 2) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-4>a::before{background-position:calc(-10em * 3) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-5>a::before{background-position:calc(-10em * 4) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-6>a::before{background-position:calc(-10em * 5) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-7>a::before{background-position:calc(-10em * 6) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-8>a::before{background-position:calc(-10em * 7) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-9>a::before{background-position:calc(-10em * 8) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-10>a::before{background-position:calc(-10em * 9) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-11>a::before{background-position:calc(-10em * 10) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-12>a::before{background-position:calc(-10em * 11) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-13>a::before{background-position:calc(-10em * 12) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a:hover{text-decoration:none;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a:hover::before{background-color:#7a5632;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-1>a:hover::before{background-position:calc(-10em * 0) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-2>a:hover::before{background-position:calc(-10em * 1) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-3>a:hover::before{background-position:calc(-10em * 2) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-4>a:hover::before{background-position:calc(-10em * 3) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-5>a:hover::before{background-position:calc(-10em * 4) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-6>a:hover::before{background-position:calc(-10em * 5) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-7>a:hover::before{background-position:calc(-10em * 6) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-8>a:hover::before{background-position:calc(-10em * 7) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-9>a:hover::before{background-position:calc(-10em * 8) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-10>a:hover::before{background-position:calc(-10em * 9) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-11>a:hover::before{background-position:calc(-10em * 10) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-12>a:hover::before{background-position:calc(-10em * 11) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-13>a:hover::before{background-position:calc(-10em * 12) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a>span{ display:block; width:100%; margin-top:15px; text-align:center; font-family:'Nanum Barun Gothic'; font-weight:600; font-size:17px; color:#222; word-break:keep-all; } #main-line-3>.in>.midd>.item-2>.scroll-box{ -ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; } #main-line-3>.in>.midd>.item-2>.scroll-box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } #main-line-3>.in>.midd>.item-2 .scroll{display:block; position:absolute; height:3px; background-color:#d8c7b4; border-radius:5px;} #main-line-3>.in>.midd>.item-2 .scroll>span{position:absolute; left:0; top:0; width:10%; height:100%; background-color:#bea794; border-radius:5px;} @media screen and (max-width:1460px) { #main-line-3>.in{width:calc(100% - 60px); max-width:100%; margin:0 30px;} } @media screen and (max-width:1270px) { #main-line-3>.in>.midd>.item-1{padding-bottom:0px;flex-wrap: wrap} #main-line-3>.in>.midd>.item-1>.item-1_1, #main-line-3>.in>.midd>.item-1>.item-1_3{width:calc((100% - 20px) / 2);} #main-line-3>.in>.midd>.item-1>.item-1_1{margin-right:0px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx{background-image:url(service_img_1_pc.jpg);background-size: cover;} #main-line-3>.in>.midd>.item-1>.item-1_2{position:relative; left:0px; top:10px; width:100%; height:160px;order:1;margin-right: 0px;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul::before, #main-line-3>.in>.midd>.item-1>.item-1_2>ul::after{display:none;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li{width:25%; height:100%;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:not(:last-child){border-right:1px solid #eadcd2;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(1)>a, #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(4)>a{background-image:url(so_2.jpg);} } @media screen and (max-width:1100px) { #main-line-3>.in>.midd>.item-1>.item-1_1, #main-line-3>.in>.midd>.item-1>.item-1_3{height:280px;} #main-line-3>.in>.midd>.item-1>.item-1_2{left:0px; top:10px; width:100%; height:160px;} } @media screen and (max-width:1024px) { #main-line-3>.in>.midd>.item-1>.item-1_2{left:0px; bottom:0px; width:100%; height:160px;} } @media screen and (max-width:960px) { #main-line-3>.in>.midd>.item-1{padding-bottom:0px;} #main-line-3>.in>.midd>.item-1>.item-1_1, #main-line-3>.in>.midd>.item-1>.item-1_3{height:240px;} #main-line-3>.in>.midd>.item-1>.item-1_2{left:0px; bottom:205px; width:100%; height:160px;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(3) {left:0px; bottom:205px; width:50%; height:160px;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(4) {left:0px; bottom:205px; width:50%; height:160px;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li {width: 50%;height: 100%;} /* #main-line-3>.in>.midd>.item-1>.item-1_2{left:30px; bottom:250px; width:95%;height:120px;} */ } @media screen and (max-width:800px) { #main-line-3>.in>.midd>.item-1{flex-wrap:wrap; padding-bottom:0;} #main-line-3>.in>.midd>.item-1>.item-1_1 {width:100%; height:200px;} #main-line-3>.in>.midd>.item-1>.item-1_2 {height:150px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx{align-items:flex-start; padding:50px 30px 30px 30px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>em{left:-8px; top:12px; width:58px; height:23px; font-size:13px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong{flex-shrink:0;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span{font-size:14px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span+span{margin-top:7px;} #main-line-3>.in>.midd>.item-1>.item-1_3{width:100%; height:200px; margin-top:10px;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li:not(:last-child){margin-right:0px;} #main-line-3>.in>.midd>.item-2{margin-top:360px;} } @media screen and (max-width:650px) { #main-line-3{padding:45px 0;} #main-line-3>.in{width:calc(100% - 40px); margin:0 20px;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li{width:33%; padding:0;text-align: center;} } @media screen and (max-width:550px) { #main-line-3>.in>.midd>.item-1>.item-1_1{width:100%; height:187px; margin-right:0;} #main-line-3>.in>.midd>.item-1>.item-1_2{width:100%; height:187px; margin-top:10px;} #main-line-3>.in>.midd>.item-1>.item-1_3{height:auto;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>strong{font-size:14px;} #main-line-3>.in>.midd>.item-1>.item-1_3>.midd::before{content:""; display:block; position:relative; z-index:-1; width:100%; padding-top:50%;} } /* 1 */ #main-line-1{padding:0 0px;} #main-line-1>.grid{position:relative; height:566px; background-color:#ddd;} #main-line-1>.grid .in{max-width:1400px; margin:0 auto;} #main-line-1>.grid>.move, #main-line-1>.grid>.move>ul, #main-line-1>.grid>.move>ul>li{position:absolute; left:0; top:0; width:100%; height:100%;} #main-line-1>.grid>.move{z-index:0;} #main-line-1>.grid>.move>ul>li{ opacity:0; z-index:0; background-repeat:no-repeat; background-position:center center; background-size:cover; -webkit-transition:opacity 1s linear 1s; transition:opacity 1s linear 1s; } #main-line-1>.grid>.move>ul>li>.in{display:flex; flex-direction:column; justify-content:center; width:100%; height:100%;} #main-line-1>.grid>.move>ul>li>.in>strong{ font-family: 'Buri'; font-size:40px; color:#fff; -webkit-text-shadow:3px 6px 6px rgba(0,0,0,0.23); text-shadow:3px 6px 6px rgba(0,0,0,0.23); } #main-line-1>.grid>.move>ul>li>.in>strong>span{display:block;} #main-line-1>.grid>.move>ul>li>.in>span{margin-top:10px; font-size:20px; color:rgba(255,255,255,0.7);} #main-line-1>.grid>.controll{position:absolute; left:0; bottom:20px; z-index:200; width:100%;} #main-line-1>.grid>.controll>.in{display:flex; align-items:center;justify-content: center;} #main-line-1>.grid>.controll>.in>button:not(:first-child){margin-left:15px;} #main-line-1>.grid>.controll>.in>button.simbol:not(:first-child){margin-left:15px;} #main-line-1>.grid>.controll .simbol{ position:relative; width:12px; height:12px; cursor:pointer; border:none; background-color:#fff; -webkit-transform:rotate(45deg); transform:rotate(45deg);border-radius:50%; } #main-line-1>.grid>.controll .simbol:nth-child(1){margin-left:10px;} #main-line-1>.grid>.controll .simbol::before{ opacity:0; content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #fff; -webkit-transform:scale(0); transform:scale(0); -webkit-transition:all 0.3s linear; transition:all 0.3s linear;border-radius:50%; } #main-line-1>.grid>.controll .simbol>span{position:absolute; font-size:0; color:transparent;} #main-line-1>.grid>.controll .simbol.on::before{ opacity:0.7; -webkit-transform:scale(1.8); transform:scale(1.8); } #main-line-1>.grid>.controll [class*="btn-"]{width:16px; height:16px; cursor:pointer; border:none; background-color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-size:1500px auto;} #main-line-1>.grid>.controll [class*="btn-"]>span{position:absolute; font-size:0; color:transparent;} #main-line-1>.grid>.controll .btn-stop{background-position:-400px 0;} #main-line-1>.grid>.controll .btn-play{background-position:-416px 0;} #main-line-1>.grid>.move>ul>li.on{ opacity:1; z-index:100; -webkit-transition:opacity 1s linear 0s; transition:opacity 1s linear 0s; } button.on{background-color: #3c3535 !important;} @media screen and (max-width:1730px) { #main-line-1{padding:0;} } @media screen and (max-width:1460px) { #main-line-1>.grid .in{width:calc(100% - 60px); max-width:100%; margin:0 30px;} } @media screen and (max-width:1024px) { #main-line-1>.grid{height:435px;} #main-line-1>.grid>.move>ul>li>.in>strong{font-size:51px;} #main-line-1>.grid>.move>ul>li>.in>span{font-size:17px;} } @media screen and (max-width:930px) { .main-box .col-md-12 {padding: 5px 5px;top: 50px;} } @media screen and (max-width:650px) { #main-line-1>.grid{height:290px;} #main-line-1>.grid .in{width:calc(100% - 40px); padding-bottom:50px; margin:0 20px;} #main-line-1>.grid>.move>ul>li>.in>strong{font-size:32px;} #main-line-1>.grid>.move>ul>li>.in>span{font-size:13px;} #main-line-1>.grid>.controll{bottom:20px;} } @media screen and (max-width:360px) { #main-line-1>.grid>.move>ul>li>.in>strong{font-size:28px;} #main-line-1>.grid>.move>ul>li>.in>span{font-size:11px;} #main-line-1>.grid>.controll{bottom:20px;} } /* 더보기 */ .mainMore{position:absolute;top:12px;right:12px;} .mainMore a{position:relative;display:block;width:37px;height:35px;background:url(bg_more_box.png) left top no-repeat;transition:all .3s} .mainMore a:hover{transform:rotate(135deg)} .mainMore a img{position:absolute;left:50%;margin-left:-5.5px;top:50%;margin-top:-5.5px;transition:all .3s} .mainMore a:hover img{transform:rotate(-135deg)} .mainMorea{position:absolute;top:0px;right:12px;} .mainMorea a{position:relative;display:block;width:37px;height:35px;background:url(bg_more_box.png) left top no-repeat;transition:all .3s} .mainMorea a:hover{transform:rotate(135deg)} .mainMorea a img{position:absolute;left:50%;margin-left:-5.5px;top:50%;margin-top:-5.5px;transition:all .3s} .mainMorea a:hover img{transform:rotate(-135deg)} /*공지사항*/ .jservice {position:relative;height:296px;} .jservice .jsvc{position:relative;overflow:hidden;background:#ffffff;padding: 5px 10px 5px 20px;} .jservice .jsvc li{padding: 2px 0px 2px 0px;} .jservice .jsvc .svc_list{position:relative;width:200%} .jservice .jsvc .svc_list:after{content:'';display:block;clear:both} .jservice .jsvc .svc_list li{float:left;width:12.5%} .jservice .jsvc .svc_list li a{display:block} /* 20180209 수정 */ .jsvc1{position:relative;top:0px;width:100%;border-top:1px solid #c9d1fa} .gall_rectang {} .gall_rectang ul{display: flex;justify-content: space-between;flex-wrap: wrap;} .rec_thumb img{width: 100%;} /* */ .jsvc{position:absolute;top:55px;width:100%;border-top:1px solid #bbbbc1} .gall_rectang {} .gall_rectang ul{display: flex;justify-content: space-between;flex-wrap: wrap;} .rec_thumb img{width: 100%;} #container.main .col4.tprogram0{margin-left:0;clear:both} .tprogram0{border:2px solid #bbbbc1;margin-top: 10px;margin-bottom:10px;background:#ffffff;height:296px;} .tprogram0 h2{position:absolute;top:10px;left:15px;z-index:10;font-size: 19px;font-weight: 600;} .tprogram{box-shadow: 1px 1px 0 #bfc9da;margin-top: 10px;margin-bottom:10px;background:#ffffff;height:296px;} .tprogram h2{position:absolute;top:10px;left:15px;z-index:10;font-size: 19px;font-weight: 600;} .tprogram2{border:2px solid #bbbbc1;margin-top: 10px;margin-bottom:10px;background:#ffffff;height:296px;} .tprogram2 h2{position:absolute;top:10px;left:15px;z-index:10;font-size: 19px;font-weight: 600;} .tprogram3{box-shadow: 1px 1px 0 #bfc9da;margin-top: 10px;margin-bottom:10px;background:#ffffff;height:296px;font-weight: 500;} .tprogram3 h2{position:absolute;top:10px;left:15px;z-index:10} /*.tprogram ul li:first-child{padding-left:0}*/ /* */ .tprogram4{box-shadow: 1px 1px 0 #bfc9da;margin-top: 10px;margin-bottom:10px;background:#ffffff;height:296px;} .tprogram4 h2{position:absolute;top:10px;left:15px;z-index:10} .tprogram5{box-shadow: 1px 1px 0 #bfc9da;margin-top: 10px;margin-bottom:10px;background:#ffffff;height:296px;} .tprogram5 h2{position:absolute;top:10px;left:15px;z-index:10} .tprogram6{box-shadow: 1px 1px 0 #bfc9da;margin-top: 10px;margin-bottom:10px;background:#ffffff;height:296px;} .tprogram6 h2{position:absolute;top:10px;left:15px;z-index:10} /* */ /* info-pink */ .box-color > .icon { text-align: center; position: relative; } .box-color > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #6c757d; vertical-align: middle; } .box-color > .icon > .info-pink{ background-image: url('s_01.png'); background-size: cover; background-position: center; margin-top: -24px; border: 1px solid #e0e0e0; padding: 30px 0 10px 0; height:150px; } .box-color > .icon > .info-pink > h3.title{ margin-top:20px; font-size: 20px; color: #222; font-weight: 500; } .box-color > .icon > .info-pink > p { font-size: 13px;font-weight:600; color: #fff; line-height: 1.7; margin: 20px; text-align:center;} .box-color .space { height: 30px; } .box-color > .icon > .info-pink:hover{ background:#5f969b; color:#333; } .box-color > .icon > .info-pink:hover p { color: #333; } /* info-pink1 */ .box-color > .icon { text-align: center; position: relative; } .box-color > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #6c757d; vertical-align: middle; } .box-color > .icon > .info-pink1 { background-image: url('s_02.png'); background-size: cover; background-position: center; margin-top: -24px; border: 1px solid #e0e0e0; padding: 30px 0 10px 0; height:150px; } .box-color > .icon > .info-pink1 > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; } .box-color > .icon > .info-pink1 > p { font-size: 13px;font-weight:600; color: #fff; line-height: 1.7; margin: 20px; text-align:center;} .box-color .space { height: 30px; } .box-color > .icon > .info-pink1:hover{ background:#b7afc0; color:#333; } .box-color > .icon > .info-pink1:hover p { color: #333; } /* info-pink2 */ .box-color > .icon { text-align: center; position: relative; } .box-color > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #6c757d; vertical-align: middle; } .box-color > .icon > .info-pink2 { background-image: url('s_03.png'); background-size: cover; background-position: center; margin-top: -24px; border: 1px solid #e0e0e0; padding: 30px 0 10px 0; height:150px; } .box-color > .icon > .info-pink2 > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; } .box-color > .icon > .info-pink2 > p { font-size: 13px;font-weight:600; color: #fff; line-height: 1.7; margin: 20px; text-align:center;} .box-color .space { height: 30px; } .box-color > .icon > .info-pink2:hover{ background:#bac7d5; color:#333; } .box-color > .icon > .info-pink2:hover p { color: #333; } /* info-pink3 */ .box-color > .icon { text-align: center; position: relative; } .box-color > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #6c757d; vertical-align: middle; } .box-color > .icon > .info-pink3 { background-image: url('s_04.png'); background-size: cover; background-position: center; margin-top: -24px; border: 1px solid #e0e0e0; padding: 30px 0 10px 0; height:150px; } .box-color > .icon > .info-pink3 > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; } .box-color > .icon > .info-pink3 > p { font-size: 13px; font-weight:600; color: #fff; line-height: 1.7; margin: 20px; text-align:center; } .box-color > .icon > .info-pink3 > .more a { font-family: "Roboto",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; } .box-color .space { height: 25px; } .box-color > .icon > .info-pink3:hover{ background:#9f9c40; color:#333; } .box-color > .icon > .info-pink3:hover p { color: #333; } /* info-pink4 */ .box-color > .icon { text-align: center; position: relative; } .box-color > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #6c757d; vertical-align: middle; } .box-color > .icon > .info-pink4 { background-image: url('s_05.png'); background-size: cover; background-position: center; margin-top: -24px; border: 1px solid #e0e0e0; padding: 30px 0 10px 0; height:150px; } .box-color > .icon > .info-pink4 > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; } .box-color > .icon > .info-pink4 > p { font-size: 13px;font-weight:600; color: #fff; line-height: 1.7; margin: 20px; text-align:center;} .box-color .space { height: 30px; } .box-color > .icon > .info-pink4:hover{ background:#bac7d5; color:#333; } .box-color > .icon > .info-pink4:hover p { color: #333; } /* info-pink5 */ .box-color > .icon { text-align: center; position: relative; } .box-color > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #6c757d; vertical-align: middle; } .box-color > .icon > .info-pink5 { background-image: url('s_06.png'); background-size: cover; background-position: center; margin-top: -24px; border: 1px solid #e0e0e0; padding: 30px 0 10px 0; height:150px; } .box-color > .icon > .info-pink5 > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; } .box-color > .icon > .info-pink5 > p { font-size: 13px;font-weight:600; color: #fff; line-height: 1.7; margin: 20px; text-align:center;} .box-color .space { height: 30px; } .box-color > .icon > .info-pink5:hover{ background:#b7afc0; color:#333; } .box-color > .icon > .info-pink5:hover p { color: #333; } /* 모바일기기 1 */ @media only screen and (max-width: 320px) { .box-color .material-symbols-outlined{ font-size: 40px; } .box-color .title{ font-size: 12px; } } /* 모바일기기 2 */ @media only screen and (min-width: 321px) and (max-width: 768px){ .box-color .material-symbols-outlined{ font-size: 40px; } .box-color .title{ font-size: 12px; } } /* 태블릿 */ @media only screen and (min-width: 769px) and (max-width: 1200px){ .box-color .material-symbols-outlined{ font-size: 55px; } .box-color .title{ font-size: 16px; } } /* 데스크탑 */ @media only screen and (min-width: 1201px) { .box-color .material-symbols-outlined{ font-size: 55px; } .box-color .title{padding-top: 3px; font-size: 16px; font-weight: 700; } } .btn-area{ position: absolute; text-align: center; width: 100%; bottom: 25px; } .btn-area1{ position: absolute; text-align: center; width: 100%; bottom: 10px; } .box-color .material-symbols-outlined{ transition: transform 0.3s ease; } .box-color:hover .material-symbols-outlined{ transform: rotateY(180deg); } .box-color .info .btn-default:hover{ background: #457b9d; color:#fff; } .center-heading p { margin-top: 10px; } p.sub-text { font-style: normal; font-size: 15px; line-height: 29px; font-weight: 700; color: #555; } /**** 카운트 *****/ /* 모바일기기 1 */ @media only screen and (max-width: 320px) { .fun-fact-wrap { background-repeat: repeat !important; padding-top:100px; padding-bottom:40px; } .business-count { text-align: center; } .business-count h3 { margin-bottom: 25px; font-size: 12px; font-weight: 700; color: #fff; } .business-count h3 i { font-size: 12px; margin-right: 20px; color: #32c5d2; } .business-count h4 { margin-bottom: 0px; color: #fff; font-size: 12px; font-weight: 700; text-transform: capitalize; } } /* 모바일기기 2 */ @media only screen and (min-width: 321px) and (max-width: 768px){ .fun-fact-wrap { background-repeat: repeat !important; padding-top:100px; padding-bottom:40px; } .business-count { text-align: center; } .business-count h3 { margin-bottom: 25px; font-size: 14px; font-weight: 700; color: #fff; } .business-count h3 i { font-size: 14px; margin-right: 20px; color: #32c5d2; } .business-count h4 { margin-bottom: 0px; color: #fff; font-size: 12px; font-weight: 700; text-transform: capitalize; } } /* 태블릿 */ @media only screen and (min-width: 769px) and (max-width: 1200px){ .fun-fact-wrap { background-repeat: repeat !important; padding-top:180px; padding-bottom:140px; } .business-count { text-align: center; } .business-count h3 { margin-bottom: 25px; font-size: 50px; font-weight: 700; color: #fff; } .business-count h3 i { font-size: 40px; margin-right: 20px; color: #32c5d2; } .business-count h4 { margin-bottom: 0px; color: #fff; font-weight: 700; text-transform: capitalize; } } /* 데스크탑 */ @media only screen and (min-width: 1201px) { .fun-fact-wrap { background-repeat: repeat !important; padding-top:180px; padding-bottom:140px; } .business-count { text-align: center; } .business-count h3 { margin-bottom: 25px; font-size: 50px; font-weight: 700; color: #fff; } .business-count h3 i { font-size: 40px; margin-right: 20px; color: #32c5d2; } .business-count h4 { margin-bottom: 0px; color: #fff; font-weight: 700; text-transform: capitalize; } } .widebox-1 { overflow: hidden; padding: 20px 0px; background: url('7.jpg') scroll center no-repeat; background-position: center; background-size: cover; } .widebox-1-row { position: relative; } .no-padding.gray { background-color: #f5f5f5; } @media all and (max-width:1000px) { .serv_wrap {height:auto} .serv_wrap .inner_wrap {width:100%; padding:5% 2.5%} .serv_wrap .inner_wrap ul li {width:50%} .serv_wrap .inner_wrap ul li a {margin-top:0 !important} .serv_wrap .inner_wrap > p {margin-bottom:20px} .serv_wrap1 {height:auto} .serv_wrap1 .inner_wrap {width:100%; padding:5% 2.5%} .serv_wrap1 .inner_wrap ul li {width:50%} .serv_wrap1 .inner_wrap ul li a {margin-top:0 !important} .serv_wrap1 .inner_wrap > p {margin-bottom:20px} .bn_wrap {height:auto; background-size:cover} .bn_wrap .inner_wrap {width:100%;} .bn_wrap .inner_wrap ul li {width:50%} .bn_wrap .inner_wrap ul li a {font-size:15px; border-bottom:rgba(255,255,255,0.2) 1px solid} } @media screen and (max-width:930px) { .widebox-1 {padding: 20px 10px;} .col4 {width: 49%;} .ss > .item:nth-child(2) {margin-right: 0;} .ss > .item:nth-child(3) {margin-right: 1%;} .ss > .item:nth-child(4) {margin-right: 0;} .ss > .item:last-child {margin-right: 0;} } @media all and (max-width:480px) { .serv_wrap .inner_wrap {padding:5% 2.5%} .serv_wrap .inner_wrap > h2 {font-size:30px} .serv_wrap .inner_wrap ul {margin:0} .serv_wrap .inner_wrap ul li {padding:10px} .serv_wrap .inner_wrap ul li a {height:220px} .serv_wrap .inner_wrap ul li a .serv_txt {padding:0 18px} .serv_wrap .inner_wrap ul li a .serv_txt .sub_sbj {font-size:18px} .serv_wrap1 .inner_wrap {padding:5% 2.5%} .serv_wrap1 .inner_wrap > h2 {font-size:30px} .serv_wrap1 .inner_wrap ul {margin:0} .serv_wrap1 .inner_wrap ul li {padding:10px} .serv_wrap1 .inner_wrap ul li a {height:220px} .serv_wrap1 .inner_wrap ul li a .serv_txt {padding:0 18px} .serv_wrap1 .inner_wrap ul li a .serv_txt .sub_sbj {font-size:18px} } /* 모바일기기 1 */ @media only screen and (max-width: 320px) { .no-padding.img-view { background-size: cover; height: 100%; } .no-padding-inner { padding: 30px; } .no-padding-inner-img{ padding: 80px; } .widebox-icon { background: transparent; width: 50px; height: 50px; display: inline-block; float: left; height: 35px; line-height: 35px; margin-right: 10px; position: relative; text-align: center; top: 5px; } .widebox-icon .material-symbols-outlined { width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #0077b6; color: #fff; font-size: 24px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .servicebox-icon { padding-left: 65px; } .servicebox-icon h4 { font-weight: 700; font-size: 14px; color: #000; text-transform: uppercase; margin-bottom: 5px; } .servicebox-icon p { font-weight: 700; font-size: 12px; color: #999; text-transform: uppercase; margin-bottom: 5px; line-height: 1.7; } } /* 모바일기기 2 */ @media only screen and (min-width: 321px) and (max-width: 768px){ .no-padding.img-view { background-size: cover; height: 100%; } .no-padding-inner { padding: 30px; } .no-padding-inner-img{ padding: 80px; } .widebox-icon { background: transparent; width: 50px; height: 50px; display: inline-block; float: left; height: 35px; line-height: 35px; margin-right: 10px; position: relative; text-align: center; top: 5px; } .widebox-icon .material-symbols-outlined { width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #0077b6; color: #fff; font-size: 24px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .servicebox-icon { padding-left: 65px; } .servicebox-icon h4 { font-weight: 700; font-size: 14px; color: #000; text-transform: uppercase; margin-bottom: 5px; } .servicebox-icon p { font-weight: 700; font-size: 12px; color: #999; text-transform: uppercase; margin-bottom: 5px; line-height: 1.7; } } /* 태블릿 */ @media only screen and (min-width: 769px) and (max-width: 1200px){ .no-padding.img-view { background-size: cover; position: absolute; height: 100%; } .no-padding-inner { padding: 60px; } .widebox-icon { background: transparent; width: 50px; height: 50px; display: inline-block; float: left; height: 35px; line-height: 35px; margin-right: 10px; position: relative; text-align: center; top: 5px; } .widebox-icon .material-symbols-outlined { width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #0077b6; color: #fff; font-size: 17px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .servicebox-icon { padding-left: 65px; } .servicebox-icon h4 { font-weight: 700; font-size: 15px; color: #000; text-transform: uppercase; margin-bottom: 5px; } .servicebox-icon p { font-weight: 700; font-size: 13px; color: #999; text-transform: uppercase; margin-bottom: 5px; } } /* 데스크탑 */ @media only screen and (min-width: 1201px) { .no-padding.img-view { background-size: cover; position: absolute; height: 100%; } .no-padding-inner { padding: 60px; } .widebox-icon { background: transparent; width: 50px; height: 50px; display: inline-block; float: left; height: 35px; line-height: 35px; margin-right: 10px; position: relative; text-align: center; top: 5px; } .widebox-icon .material-symbols-outlined { width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #0077b6; color: #fff; font-size: 24px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .servicebox-icon { padding-left: 65px; } .servicebox-icon h4 { font-weight: 700; font-size: 15px; color: #000; text-transform: uppercase; margin-bottom: 5px; } .servicebox-icon p { font-weight: 700; font-size: 13px; color: #999; text-transform: uppercase; margin-bottom: 5px; } }