@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; }




/*공통스타일시트*/
.section {padding:150px 0;}
.section .inner {width:1187px; margin:0 auto; }
body {font-family: 'Noto Sans KR', sans-serif; font-size:18px; font-weight: 300; color:#666; margin:0; padding:0; word-break:keep-all; letter-spacing:-0.3px}
p {margin:0; padding:0;}
ul, li {list-style:none; padding:0; margin:0;}
a:link, a:visited, a:active {text-decoration:none;}
h3 {font-size:22px; color:#333; font-weight:500; line-height:1.4; margin:0;}

.eng_font {font-family: 'Roboto', sans-serif;}

.common_title {font-size:35px; color:#111; font-weight:500; text-align:center; margin-bottom:60px;}
.common_title span {color:#01babd; text-transform:uppercase; font-size:18px; letter-spacing:4px; font-weight:600; display:block;}
video { border:0; display:block; width:100%; background-color:#fff; }

/*유앤아이가 지금까지 걸어온 길*/
.uni_road.section {padding-top:0 !important; background:url('imges/logo_bg.png'); background-repeat:no-repeat; background-position:right bottom;}
.uni_road span.bar {width:1px; background:#ccc; height:120px; display:block; margin:-5px auto 35px auto;}
.num_wrap {text-align:center;}
.num_wrap li {display:inline-block; text-align:center; margin:0 40px; line-height: 1.1;}
.num_wrap li strong{font-family: 'GmarketSansMedium';}
.num_wrap li span {display:block; font-family: 'GmarketSansBold'; font-size:85px; font-weight:bold; color:#01babd;}

/*유앤아이만의 차별화된 프로세스*/
.section.uni_process {background:#f7f7f7;}
.process_wrap {overflow:hidden;}
.process_wrap li {width:calc(24% - 2px); height:350px; float:left; margin-right:1.1%; margin-bottom:1.1%; border:2px solid #fff; background:#fff;  text-align:center;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center; }
.process_wrap li:nth-child(4), .process_wrap li:nth-child(8) {margin-right:0;}
.process_wrap li span.sep {width:35px; height:1px; background:#444; display:block; margin:20px auto; }
.process_wrap li p {padding:0 18px;}
.process_wrap li img {margin-bottom:10px; }
.process_wrap li:hover {border-color:#01babd;}

/*토탈서비스*/
.section.uni_total  {text-align:center;}
.section.uni_total .common_title {margin-bottom:10px !important;}
.section.uni_total .sub_tt_txt {font-size:21px; margin-bottom:70px !important;}
.section.uni_total .totalSV_wrap {margin:70px 0;}
.section.uni_total .totalSV_wrap:last-child {margin-bottom:0;}
.section.uni_total .totalSV_wrap ul {width:100%; overflow:hidden; display:flex;}

.section.uni_total .totalSV_wrap ul li:first-child {float:left; width:53%; text-align:left;}
.section.uni_total .totalSV_wrap ul li:last-child {width:47%; float:right; display: -webkit-flex; display: -ms-flex;
                         display: flex;
                         -webkit-justify-content: center;
                         -ms-justify-content: center;
                         justify-content: center;
                         -ms-align-items: center;
                         -webkit-align-items: center;
                         align-items: center; }

.section.uni_total .totalSV_wrap ul li .inner {width:100%;}
.section.uni_total .totalSV_wrap ul li .inner p {width:92%; margin:0 auto;}
.section.uni_total .num {font-family:'Roboto', sans-serif; margin-bottom:20px; color:#01b3bb; font-weight:bold; font-size:60px; letter-spacing:-2.5px; display:block;}

.section.uni_total .totalSV_wrap.right ul li:first-child {float:left; width:47%;  text-align:left; text-align:center; display: -webkit-flex;
                         display: flex;
                         -webkit-justify-content: center;
                         justify-content: center;
                         -webkit-align-items: center;
                         align-items: center;}
.section.uni_total .totalSV_wrap.right ul li:last-child {width:53%; float:right; text-align:right; display:block;}
.uni_total.m {display:none;}


/*지점 안내*/
.section.uni_branch {overflow:hidden; background:#f7f7f7;}
.branch_content .content_inner:first-child {float:left; width:55%; position:relative;}
.branch_content .content_inner:last-child {float: right;  width: 36%; padding-top:12%;}
.branch_content .content_inner  .branch_icon li {position:absolute; text-align:center; font-size:14px;}
.branch_content .content_inner  .branch_icon li span {display:block;}

.branch_content .branch_icon img {-webkit-animation: move 1s 1s infinite linear alternate; position:relative;
    -moz-animation: move 0.5s 0.5s infinite linear alternate;
    -ms-animation: move 0.5s 0.5s infinite linear alternate;
    -o-animation: move 0.5s 0.5s infinite linear alternate;
    animation: move 0.5s 0.5s infinite linear alternate;}

@keyframes move {
    from {top:0px;}
    to {top:5px;}
}

.branch_content .content_inner  .branch_icon li:nth-child(1) {top:50px; left:396px;}
.branch_content .content_inner  .branch_icon li:nth-child(2) {top:125px; left:372px;}
.branch_content .content_inner  .branch_icon li:nth-child(3) {top:100px; left:463px;}
.branch_content .content_inner  .branch_icon li:nth-child(4) {top:150px; left:240px;}
.branch_content .content_inner  .branch_icon li:nth-child(5) {top:200px; left:375px;}
.branch_content .content_inner  .branch_icon li:nth-child(6) {top:210px; left:490px;}
.branch_content .content_inner  .branch_icon li:nth-child(7) {top:210px; left:236px;}
.branch_content .content_inner  .branch_icon li:nth-child(8) {top:180px; left:299px;}
.branch_content .content_inner  .branch_icon li:nth-child(9) {top:242px; left:420px;}
.branch_content .content_inner  .branch_icon li:nth-child(10) {top:285px; left:199px;}
.branch_content .content_inner  .branch_icon li:nth-child(11) {top:285px; left:335px;}
.branch_content .content_inner  .branch_icon li:nth-child(12) {top:280px; left:405px;}
.branch_content .content_inner  .branch_icon li:nth-child(13) {top:290px; left:475px;}
.branch_content .content_inner  .branch_icon li:nth-child(14) {top:310px; left:570px;}
.branch_content .content_inner  .branch_icon li:nth-child(15) {top:340px; left:310px;}
.branch_content .content_inner  .branch_icon li:nth-child(16) {top:250px; left:60px;}
.branch_content .content_inner  .branch_icon li:nth-child(17) {top:363px; left:112px;}
.branch_content .content_inner  .branch_icon li:nth-child(18) {top:340px; left:188px;}
.branch_content .content_inner  .branch_icon li:nth-child(19) {top:400px; left:255px;}
.branch_content .content_inner  .branch_icon li:nth-child(20) {top:420px; left:95px;}
.branch_content .content_inner  .branch_icon li:nth-child(21) {top:470px; left:178px;}
.branch_content .content_inner  .branch_icon li:nth-child(22) {top:485px; left:255px;}
.branch_content .content_inner  .branch_icon li:nth-child(23) {top:420px; left:355px;}

.branch_content .content_inner  .branch_icon li:nth-child(24) {top:430px; left:430px;}
.branch_content .content_inner  .branch_icon li:nth-child(25) {top:380px; left:410px;}
.branch_content .content_inner  .branch_icon li:nth-child(26) {top:435px; left:480px;}


.branch_content .content_inner  .branch_icon li:nth-child(27) {top:370px; left:510px;}
.branch_content .content_inner  .branch_icon li:nth-child(28) {top:570px; left:452px;}

.branch_content .content_inner  .branch_icon li:nth-child(29) {top:662px; left:393px;}
.branch_content .content_inner  .branch_icon li:nth-child(30) {top:620px; left:378px;}
.branch_content .content_inner  .branch_icon li:nth-child(31) {top:650px; left:430px;}
.branch_content .content_inner  .branch_icon li:nth-child(32) {top:470px; left:130px;}
.branch_content .content_inner  .branch_icon li:nth-child(33) {top:592px;left:229px;}





.branch_content .branch_txt span {font-size:22px;  display:block; margin-bottom:10px; font-weight:400;}

.branch_content .branch_list  {margin-top:50px;}
.branch_content .branch_list li{float:left;  margin: 0 10px 10px 0;width:calc(33% - 8px); text-align:center;}
.branch_content .branch_list li a {display:block; padding:9px 2px; color:#666;  border:1px solid #c7c7c7; }
.branch_content .branch_list li:nth-child(3), .branch_content .branch_list li:nth-child(6), .branch_content .branch_list li:nth-child(9), .branch_content .branch_list li:nth-child(12) {margin-right:0;}
.branch_content .branch_list li a {transition:all 0.5s;}
.branch_content .branch_list li a:hover {color:#fff; background:#01babd; border:1px solid #01babd; }




/*유앤아이 상표등록*/
.section.uni_award {clear:both; background:#01babd; padding:0;}
.section.uni_award .bx-wrapper {background:none !important; box-shadow:none !important; border:none !important; margin-bottom:0; padding:0 5px;}
.section.uni_award .award_txtArea {width:32%; color:#fff; position:absolute;left: 0;  top: 50%; transform: translate(0%, -50%);}
.section.uni_award .award_imgArea {width:100%;}
.section.uni_award .slider_wrapper {}
.section.uni_award .common_title {color:#fff; text-align:left; margin:0;}
.section.uni_award .award_txtArea span.sep {width: 35px; height: 1px; background: #fff; display: block; margin: 20px 0;}
.section.uni_award .bx-controls.bx-has-pager {display:none;}
.section.uni_award  .bx-viewport {height:500px !important;}



/*가맹 문의*/
.uni_contact {background:#f7f7f7; padding-bottom:310px;}
.contact_info {width:100%; text-align:center;}
.contact_info li {text-align:center; display:inline-block; vertical-align: top; margin:0 20px;}
.contact_info li > div {background:#01babd; color:#fff; height:150px; width:150px; border-radius:300px; margin:0 auto 10px auto !important;
                         display: -webkit-flex;
                         display: flex;
                         -webkit-justify-content: center;
                         justify-content: center;
                         -webkit-align-items: center;
                         align-items: center; }
.contact_info li > div span {display:block; font-weight:500; margin-bottom:-4px; margin-top:3px;}

/*컨택트폼*/
.section.uni_contactForm {padding-top:0; background:#fff;  width:1187px; margin:-235px auto 0 auto;}
.section.section.uni_contactForm .inner {width:calc(100% - 80px); padding:0 40px;  }
.section.section.uni_contactForm .privacy_wrap .inner {width:100%;}
.contact_sep_bar {width:1px; height:65px; background:#ccc; display:block; margin:0 auto 25px auto;}
.section.uni_contactForm p.inner_txt {text-align:center; margin-top:10px;}

.section.uni_contactForm .input_area {overflow:hidden; margin-top:40px;}
/*.section.uni_contactForm form .input_area input {width:calc(33.333% - 26px);  float:left; height:50px; font-size:15px; padding:0 0 0 10px; display: block;    border-radius:0;  border:1px solid #ccc; margin-right:20px;}*/
.section.uni_contactForm form .input_area input {width:calc(50% - 25px);  float:left; height:50px; font-size:15px; padding:0 0 0 10px; display: block;    border-radius:0;  border:1px solid #ccc; margin-right:20px;}
.section.uni_contactForm form #phone {margin-right:0;}
.section.uni_contactForm .contact_txtArea {margin-top:20px; clear:both;}
#message { border:1px solid #ccc; display:block; width:calc(100% - 23px); height:90px;  padding:0; border-radius:0; font-size:15px; font-family:'Roboto', sans-serif; padding:10px;}

.button_submit {width:200px; clear: both; margin:0 auto; font-size:18px; cursor:pointer; transition:all 0.5s; margin:50px auto 0 auto; display:block; line-height:2.9; height:50px; border-radius:0; background:#666; color:#fff !important; border:none; }
.button_submit:hover {background:#01babd; color:#fff; }
.privacy_agree {font-size:15px;  margin:8px 0 0 0; padding:0; float:right;}
.privacy_agree span {position: relative; top: -1px;}

.privacy_wrap {width:calc(100% - 42px); border:1px solid #ccc; padding:20px; font-size:14.5px; height:200px; margin-top:20px; overflow-y:scroll; color:#888 !important;}
.privacy_wrap .inner {padding:0 !important; margin:0 !important;}
.privacy_wrap h4 {margin:0 0 10px 0; font-size:17px; font-weight:400; color:#777;}
.privacy_wrap p {margin-bottom:7px; line-height:21px;}
.privacy_wrap ul {margin-top:20px;}
.privacy_wrap ul li {margin-bottom:15px;}
.privacy_wrap ul li span {display:block;}
.privacy_wrap ul li:last-child {margin-bottom:0;}

textarea::placeholder, input::placeholder {color:#999;}
input:focus {outline:none !important; border:1px solid #01babd !important;}
textarea:focus {outline:none; border:1px solid #01babd !important;}






/*미디어쿼리*/

@media screen and (max-width: 767px) {
    body {font-size:16px;}
    h3 {font-size:18px;}
    .section .inner {width:calc(100% - 20px); padding:0 10px;}
    .num_wrap li span {font-size:40px;}
    .num_wrap li {margin:0 20px;}
    .common_title {font-size:22px;}
    .common_title span {font-size:14px;}
    .uni_road.section {background:none;}
    .section{padding:70px 0px;}
    .common_title {margin-bottom:30px;}
    .process_wrap li {width:48%; margin:1%;}
    .process_wrap li {  width: 48%;  margin: 1%;  border: none; height:300px;}
    .section.uni_total .sub_tt_txt {font-size:16px; margin-bottom:40px !important;}
    .section.uni_total .sub_tt_txt br {display:none;}
    .process_wrap li span.sep {margin:10px auto;}
    .section.uni_total .totalSV_wrap ul {display:block;}
    .section.uni_total .totalSV_wrap ul li:first-child {width: 100%; float: none; text-align: center;}
    .section.uni_total .totalSV_wrap ul li:last-child {width:100%; margin:-150px auto 0 auto; background:#fff; float:none;  display:block; position:relative;}
    .section.uni_total .totalSV_wrap ul li .inner img {display:none;}
    .section.uni_total .num{ font-size: 30px;  line-height: 1;  margin-bottom: 5px;  padding-top: 15px;}
    .uni_total.m {display:block;}
    .uni_total.pc {display:none;}
    .section.uni_total .totalSV_wrap {margin-top:30px;}
    .section.uni_total .totalSV_wrap ul li .inner p {width:100%;}
    .section.uni_total .totalSV_wrap ul li .inner {    width: calc(100% - 20px);}
    .branch_content .content_inner:first-child { float: none;  width: 320px;  position: relative;  margin: 0 auto; text-align: center;}
    .branch_content .content_inner:first-child .gray_map{width:320px;}
    .branch_content .content_inner .branch_icon li {font-size:10px;}
    .branch_content .content_inner .branch_icon li:nth-child(1) {top:7%; left:60%;}
    .branch_content .content_inner .branch_icon li:nth-child(2) {top:16.5%; left:56%;}
    .branch_content .content_inner .branch_icon li:nth-child(3) {top:13%; left:70.5%;}
    .branch_content .content_inner .branch_icon li:nth-child(4) {top:22%; left:35.5%;}
    .branch_content .content_inner .branch_icon li:nth-child(5) {top:28%; left:57%;}
    .branch_content .content_inner .branch_icon li:nth-child(6) {top:29%; left:74.5%;}
    .branch_content .content_inner .branch_icon li:nth-child(7) {top:28%; left:35%;}
    .branch_content .content_inner .branch_icon li:nth-child(8) {top:28%; left:45%;}
    .branch_content .content_inner .branch_icon li:nth-child(9) {top:33%; left:63%;}
    .branch_content .content_inner .branch_icon li:nth-child(10) {top:41%; left:32%;}
    .branch_content .content_inner .branch_icon li:nth-child(11) {top:39%; left:52%;}
    .branch_content .content_inner .branch_icon li:nth-child(12) {top:38%; left:61%;}
    .branch_content .content_inner .branch_icon li:nth-child(13) {top:38.5%; left:72%;}
    .branch_content .content_inner .branch_icon li:nth-child(14) {top:43%; left:87%;}
    .branch_content .content_inner .branch_icon li:nth-child(15) {top:47%; left:46%;}
    .branch_content .content_inner .branch_icon li:nth-child(16) {top:33%; left:9%;}
    .branch_content .content_inner .branch_icon li:nth-child(17) {top:50%; left:16%;}
    .branch_content .content_inner .branch_icon li:nth-child(18) {top:46%; left:27%;}
    .branch_content .content_inner .branch_icon li:nth-child(19) {top:56%; left:39%;}
    .branch_content .content_inner .branch_icon li:nth-child(20) {top:58%; left:13%;}

    .branch_content .content_inner .branch_icon li:nth-child(21) {top:67%; left:27%;}
    .branch_content .content_inner .branch_icon li:nth-child(22) {top:68%; left:38.5%;}
    .branch_content .content_inner .branch_icon li:nth-child(23) {top:58%; left:55%;}
    .branch_content .content_inner .branch_icon li:nth-child(24) {top:60%; left:67%;}
    .branch_content .content_inner .branch_icon li:nth-child(25) {top:55%; left:63%;}
    .branch_content .content_inner .branch_icon li:nth-child(26) {top:60%; left:77%;}

    .branch_content .content_inner .branch_icon li:nth-child(27) {top:48%; left:76%;}
    .branch_content .content_inner .branch_icon li:nth-child(28) {top:76%; left:69%;}
    .branch_content .content_inner .branch_icon li:nth-child(29) {top:92%; left:61%;}

    .branch_content .content_inner .branch_icon li:nth-child(30) {top:87%; left:58%;}
    .branch_content .content_inner .branch_icon li:nth-child(31) {top:89%; left:67%;}
    .branch_content .content_inner .branch_icon li:nth-child(32) {top:62%; left:19%;}
    .branch_content .content_inner .branch_icon li:nth-child(33) {top:80%; left:35%;}

    .branch_content .content_inner .branch_icon li > img {width:15px}
    .branch_content .content_inner:last-child {width:100%; text-align:center; padding-top:30px;}
    .branch_content .branch_txt span {font-size:18px;}

    .branch_content .branch_list {margin-top:20px;}
    .branch_content .branch_list {text-align:center;}
    .branch_content .branch_list li {width:23%; float:none; margin:0.5% !important; display:inline-block;}

    .section.uni_award .bx-viewport {height:200px !important; text-align:center;}
    .section.uni_award .award_txtArea {width:100%;}
    .section.uni_award , .section.uni_award .slider_wrapper{height:200px;}
    .award_txtArea {text-align:center; z-index:2;}

    .section.uni_award img.first {opacity:0;}
    .section.uni_award img.twice {opacity:0;}


    .section.uni_award .common_title {text-align:center;}
    .section.uni_award .award_txtArea span.sep {margin:10px auto;}
    .section.uni_contactForm {margin-top:-35px;}
    .section.uni_contactForm {width:calc(100% - 50px);}
    .contact_info li > div {width:100px; height:100px;}

    .section.uni_contactForm form .input_area input {   width: calc(100% - 12px); margin-bottom:10px; height:40px;}
    .section.uni_contactForm .contact_txtArea {margin-top:0px;}
    .privacy_wrap {margin-top:10px; height:70px; padding:10px; width: calc(100% - 23px);}
    .privacy_wrap h4 {font-size:14px;}
    .section.section.uni_contactForm .inner {  width: calc(100% - 20px);  padding: 0 10px;}
    .privacy_agree span {font-size:12px;}
    .button_submit {width:140px; font-size:16px; height:40px; line-height:2.6;}

    .contact_info li {width:150px; margin:0;}



}


@media screen and (min-width: 320px) and (max-width: 480px) {

    .process_wrap h3 br{display:none;}
    .process_wrap li {width:98%; height: auto; padding:20px 0;}
    .process_wrap li img {   width: 30px; margin-bottom: 5px;}
    .num_wrap li {margin:0 10px; font-size:12px;}
    .num_wrap li span {font-size:25px;}
    .uni_road span.bar {height:50px;}
    .section.uni_award .award_imgArea {
    width: 100%;
    color: #fff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0%, -50%);}
}