/* 버튼 */ .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: 10px;padding-right: 10px;} .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: center; flex-wrap: wrap; padding:10px 0px;} .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%;margin-right: 0.5%;}/* */ .col4{box-sizing:border-box;position:relative;float:left;width:49%;}/**/ .col5{box-sizing:border-box;position:relative;float:left;width:49%}/* */ .ss1{display: flex; justify-content: space-between; flex-wrap: wrap; padding:20px 0px;} .box-color > .icon > .info1 { margin-top: 0px; border: 1px solid #e0e0e0; padding: 10px 0 5px 0; height:300px;background:#3577ac;background-image: url(so_9.png);background-position: 10% -30%; background-repeat:no-repeat; } .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 > .info2 { margin-top: 0px; border: 1px solid #e0e0e0; padding: 10px 0 5px 0; height:300px;background:#aa8f8f;background-image: url(so_6.png);background-position: 10% -30%; background-repeat:no-repeat; } .box-color > .icon > .info2 > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; } .box-color > .icon > .info2 > p { font-size: 13px;font-weight:600; color: #666; line-height: 1.7; margin: 20px; text-align:center;} .box-color > .icon > .info2:hover{background:#773b3b;color:#fff;} .box-color > .icon > .info1:hover p {background: #1d3557;color: #fff;} .sym_2{position:absolute;top: 0;right: 0;} #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;} /*********** hot_link CSS border-right: none;***********/ .hot_link {width: 50%;height: 300px;float: left;position:relative} .hot_link li {float: left;width: 33.3%;text-align: center;height: 50%;} .hot_link li a {color: #161616;font-size: 18px; font-weight:600; line-height: 30px;letter-spacing: -1px;background-repeat: no-repeat;background-position: center 20px;display: block;width: 99.5%;height: 50px;padding-top: 100px;border-bottom: #fff solid 1px;border-right: #fff solid 1px;background-color: #d9d0bf;height: 100%;} .hot_link li a:hover {color: #fff;background-color: #b19893;-webkit-transition: background-color 0.3s ease;-moz-transition: background-color 0.3s ease;-o-transition: background-color 0.3s ease;transition: background-color 0.3s ease;} .hot_link li a.icon_01 {background-image: url(icon_01.png);} .hot_link li a.icon_02 {background-image: url(icon_02.png);} .hot_link li a.icon_03 {background-image: url(icon_03.png);} .hot_link li a.icon_04 {background-image: url(icon_04.png);/*border-bottom: none;*/} .hot_link li a.icon_05 {background-image: url(icon_05.png);} .hot_link li a.icon_06 {background-image: url(icon_06.png);} @media screen and (max-width:1199px) { .hot_link {width: 100%;} } @media all and (max-width:640px){ .hot_link {width: 100%;height: 300px;float: none;overflow: hidden;position: relative;top: 0px;left: 0px;} .hot_link li {width: 33.3%;} .hot_link li a {} } .program-bn {margin-top:15px;height: 420px;padding: 50px 0;background: url(bss_bg.jpg) center / cover no-repeat;} .main-content {width: 1400px;margin: 0 auto;overflow: hidden;display: flex;justify-content: space-between;} .program-bn li {width: 31%;float: left;text-align: center;} .program-bn li img{width:100%;} .program-bn a img:hover {transform: scale(1.05);} .program-bn a img {transition: 1s;} @media screen and (max-width: 1400px) { .main-content {width: 100%;} .program-bn {height: auto;padding: 40px 0;} } /* 배너 */ #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:1430px;} #ftBanner {overflow:hidden;border:1px solid #ffffff;} #ftBanner>.inner {position:relative;padding:5px 0 5px;} #ftBanner .slideWrap2 {overflow:hidden;margin-left:5px;margin-right:5px;} #ftBanner .slideWrap2 .slideBox {position:relative;height:60px;} #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;} /* 3 */ #main-line-3{padding:40px 0 40px; background-color:#f2ebcc; background-image:url(son_1.png);} #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:300px; margin-right:10px; background-color:#fff;} #main-line-3>.in>.midd>.item-1>.item-1_2{width:calc((100% - 0px) * 0.33); height:300px; margin-right:10px; background-color:#fff;} #main-line-3>.in>.midd>.item-1>.item-1_3{width:calc((100% - 0px) * 0.33); height:300px; 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; height:21px; font-size: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:#3c2106;} #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:#fff;-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(1)>a {background-color:#5f724c; background-image:url(so_1.png);background-size: cover;border: solid 1px #edcfa5;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(2)>a {background-color:#b58450;background-image:url(so_2.png);background-size: cover;border: solid 1px #edcfa5;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(3)>a {background-color:#63738a;background-image:url(so_3.png);background-size: cover;border: solid 1px #edcfa5;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(4)>a {background-color:#755d74;background-image:url(so_4.png);background-size: cover;border: solid 1px #edcfa5;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(1)>a::before{content:""; width:6rem; height:5rem; background-image:url(j_1.png); 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:6rem; height:5rem; background-image:url(j_2.png); 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:6rem; height:5rem; background-image:url(j_3.png); 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(4)>a::before{content:""; width:6rem; height:5rem; background-image:url(j_4.png); 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:15px; font-size:20px; color:inherit;font-weight:600;} #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,#main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(2)>a:hover, #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(3)>a:hover,#main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(4)>a:hover{background-image:url(line-3-item-2_bg_on.jpg);} #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_2>ul>li:nth-child(3)>a:hover::before{background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(4)>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_2_pc.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; height:21px; font-size: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:20px;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: #c1cfbf;padding: 12px;} #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:9em; height:9em; 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 * 2) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-2>a::before{background-position:calc(-11em * 1) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-3>a::before{background-position:calc(-10em * 6) -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 * 2) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-2>a:hover::before{background-position:calc(-11em * 1) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-3>a:hover::before{background-position:calc(-10em * 6) -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:12px; text-align:center; font-family:'Nanum Barun Gothic'; font-weight:600; font-size:21px; 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;} } @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:220px;} #main-line-3>.in>.midd>.item-1>.item-1_2{left:0px; bottom:205px; width:100%; height:300px;} #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>ul {height: 150px;} } @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:300px;} #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;} } @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:300px; 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: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:7px;right:12px;} .mainMore a{position:relative;display:block;width:30px;height:30px;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)} /*공지사항*/ .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:45px;width:100%;border-top:1px solid #bbbbc1;background:#ffffff;height: 238px;} .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: 5px;margin-bottom:5px;background:#cbd2d8;height:286px;} .tprogram0 h2{position:absolute;top:2px;left:15px;z-index:10;font-size: 20px;font-weight: 500;} .tprogram{box-shadow: 1px 1px 0 #bfc9da;margin-top: 5px;margin-bottom:5px;background:#ffffff;height:286px;} .tprogram h2{position:absolute;top:2px;left:15px;z-index:10;font-size: 20px;font-weight: 500;} .tprogram2{border:2px solid #bbbbc1;margin-top: 5px;margin-bottom:5px;background:#cbd2d8;height:286px;} .tprogram2 h2{position:absolute;top:2px;left:15px;z-index:10;font-size: 20px;font-weight: 500;} .tprogram3{box-shadow: 1px 1px 0 #bfc9da;margin-top: 5px;margin-bottom:5px;background:#ffffff;height:286px;font-weight: 500;} .tprogram3 h2{position:absolute;top:2px;left:15px;z-index:10} /*.tprogram ul li:first-child{padding-left:0}*/ /* */ .tprogram4{box-shadow: 1px 1px 0 #bfc9da;margin-top: 5px;margin-bottom:5px;background:#ffffff;height:286px;} .tprogram4 h2{position:absolute;top:2px;left:15px;z-index:10} .tprogram5{box-shadow: 1px 1px 0 #bfc9da;margin-top: 5px;margin-bottom:5px;background:#ffffff;height:286px;} .tprogram5 h2{position:absolute;top:2px;left:15px;z-index:10} .tprogram6{box-shadow: 1px 1px 0 #bfc9da;margin-top: 5px;margin-bottom:5px;background:#ffffff;height:286px;} .tprogram6 h2{position:absolute;top:2px;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 {margin-top: -24px;border: 1px solid #e0e0e0;padding: 25px 0 10px 0;background: #457b9d;color: #fff;height:220px;background-image: url(so_6.png);background-position: 120% -60%;background-repeat: no-repeat;} .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:#d5f8fb;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 {margin-top: -24px;border: 1px solid #e0e0e0;padding: 25px 0 10px 0;background: #c5bdd9;color: #fff;height:220px;background-image: url(so_7.png);background-position: 120% -60%;background-repeat: no-repeat;} .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 {margin-top: -24px;border: 1px solid #e0e0e0;padding: 25px 0 10px 0;background: #6d8cab;color: #fff;height:220px;background-image: url(so_8.png);background-position: 120% -60%;background-repeat: no-repeat;} .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-pink-3 */ .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-3 {margin-top: -24px;border: 1px solid #e0e0e0;padding: 25px 0 10px 0;background: #1d3557;color: #fff;height:220px;background-image: url(so_9.png);background-position: 120% -60%;background-repeat: no-repeat;} .box-color > .icon > .info-pink-3 > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; } .box-color > .icon > .info-pink-3 > p { font-size: 13px; font-weight:600; color: #fff; line-height: 1.7; margin: 20px; text-align:center; } .box-color > .icon > .info-pink-3 > .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-pink-3:hover{background:#f7f6d5;color:#333;} .box-color > .icon > .info-pink-3:hover p { color: #333;} @media screen and (max-width:1199px) { .col3 {width: 49%;margin-right: 0.5%;} } /* 모바일기기 1 */ @media only screen and (max-width: 320px) { .box-color .material-symbols-outlined{ font-size: 40px; } .box-color .title{ font-size: 18px; } } /* 모바일기기 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: 18px; } } /* 태블릿 */ @media only screen and (min-width: 769px) and (max-width: 1200px){ .box-color .material-symbols-outlined{ font-size: 55px; } .box-color .title{ font-size: 20px; } } /* 데스크탑 */ @media only screen and (min-width: 1201px) { .box-color .material-symbols-outlined{ font-size: 55px; } .box-color .title{ font-size: 20px; font-weight: 700; } } .btn-area{ position: absolute; text-align: center; width: 100%; bottom: 40px; } .btn-area1{ position: absolute; text-align: center; width: 100%; bottom: 20px; } .sym{display:inline-block;padding:20px 0;} .sym2{display:inline-block;padding:25px 0 0 0;} .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: 15px 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; } /* 모바일기기 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;} }