@charset "utf-8";
/*컬러값*/
*{word-break: keep-all !important;}
.mcol{color:#DA1D27;}
.bul{background-color:#DA1D27;}
.tb{border-color:#DA1D27 !important;}

/*헤더*/
.hide-header{position:fixed;z-index:2;top:0;left:0;width:100%;background-image:url(/img_up/shop_pds/ubmix/design/img/index/bk75.png);
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.hide-header::after{clear:both;content: "";display:block;}
.hide-header.is-hidden{-webkit-transform:translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);}

#header .logo{float:left;position:relative;width:150px;overflow: hidden;background-color: transparent;}
#header .logo a{display:inline-block;height:100%;padding-top:40px;}
#header .menuWrap{float:left;position:relative;width:780px;}
#header .yestop{float:right;padding-top:40px;}
#header .yestop a{display:block;width:140px;border:1px solid #171717; text-align: center; background-color:#000;color:#fff;font-weight:600;padding:10px 0;text-decoration:none;}
#header .yestop a:hover{background-color:#D0112B;border:0;}
@media screen and (max-width: 768px) {
	#header .logo{width:150px;text-align:left;padding-left:20px; -webkit-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}
	#header .logo img{width:100%;height:auto;}
}
@media screen and  (min-width: 768px)  and  (max-width:1100px) {
	#header .logo{width:20%;}
	#header .menuWrap{width:80%;}
	#header .yestop{display:none;}
}
/*메인*/
*{letter-spacing:-1px;}
.sec01{position:relative;margin:65px auto 0;}
.sec01 .package{float:left;width:304px;height:334px;background-image:url(/img_up/shop_pds/ubmix/design/img/main/secbg.png);background-repeat:no-repeat;}
.sec01 .package h2{margin-top:20px;}
.sec01 .package p{margin:25px 0;font-size:1.45rem;font-weight:600;color:#000;}
.sec01 .package p span{display:none;}
.sec01 .package a{display:inline-block;background-color:#000;color:#fff;width:200px;padding:8px 0;text-align:center;font-size:1.3rem;font-weight:600; text-decoration: none;}
.sec01 .sec01banner{overflow:hidden;}
@media screen and (max-width: 768px) {
	.sec01{margin:20px auto 0;}
	.sec01 .package{float:inherit;width:100%;height:auto;background-image:none;border:2px solid #000;padding:15px;margin-bottom:10px;} 
	.sec01 .package h2{float:left;width:50%;}
	.sec01 .package h2 img{width:100%;height:auto;}	
	.sec01 .package p{float:left;width:50%;margin:0;padding:10px 20px 0;font-size:1.4rem;color:#777; }
	.sec01 .package p span{display:block;}
	.sec01 .package a{width:inherit;margin:20px 0 10px;}	
}
.sec02{margin-top:100px;}
.sec02 h2{ text-align: center;margin-bottom:20px;}
.sec02 .txt1{font-size:1.7rem;color:#767676;text-align: center;margin-bottom:70px;}
.sec02 .txt1 span{display:block;}
.sec02 .sec02banner{float:left;width:396px;margin-right:10px;}
.sec02 .bannerbox{overflow:hidden;}
.sec02 .bannerbox ul li{float:left;margin-bottom:10px;}
.sec02 .bannerbox ul li:nth-child(2n+1){margin-right:10px;}
@media screen and (max-width: 768px) {
	.sec02{margin-top:50px;}
	.sec02 h2 img{width:95%;height:auto;}
	.sec02 .txt1{color:#767676;margin-bottom:20px;font-size:1.4rem;}
	.sec02 .sec02banner{float:inherit;width:100%;margin-right:0;margin-bottom:20px;}
	.sec02 .bannerbox ul li{float:left;width:50%;margin-bottom:0;}
	.sec02 .bannerbox ul li img{width:100%;height:inherit;}
	.sec02 .bannerbox ul li:nth-child(2n+1){margin-right:0;}
}
/*와이드배너*/
.widebanner{position:relative;margin:0;padding:0;background-color:#fff;background-image: url("/img_up/shop_pds/ubmix/design/img/main/widebanner.png"); background-repeat:no-repeat;background-size:cover;background-attachment:fixed;margin-top:65px;}
.widebanner > .container{position:relative;z-index:3; }
.widebanner .wbox{background-color: transparent;display:table;width:100%;height:650px;}
.widebanner .wbox .section{padding:10px;display:table-cell;text-align:center;vertical-align:middle;}
.widebanner .wbox .section .txtbox{text-align:center;border:8px solid #000;padding:50px 15px;}
.widebanner .wbox .section h2{margin-bottom:20px;}
.widebanner .wbox .section .txt1{font-weight:600;font-size:1.7rem;color:#fff;}
.widebanner .wbox .section .txt1 span{display:block;}

.widebanner .wbox .section a{width:250px;display:inline-block;background:none;color:#000;font-weight:600;padding:10px 0;font-size:1.4em;margin-top:30px;text-decoration:underline;}
.widebanner .wbox .section a:hover{text-decoration:underline;color:#000}
.widebanner .image{margin:50px auto 0;}
.widebanner .image .image-grid{float:left;width:21%;margin:0 2%;text-align:center;background-color:#db1d27;padding:15px;}
.widebanner .image .image-grid em{display:block; text-align: center;margin:15px 0 15px;}
.widebanner .image .image-grid .sub-title{position:relative;font-size:1.95rem;font-weight:600;color:#fff;margin-bottom:10px;}
.widebanner .image .image-grid .paragraph {font-size:1.45rem;color:#eee;letter-spacing: 0;margin-bottom:15px;}

@media screen and (max-width: 768px) {
.widebanner{margin-top:20px;}
.widebanner .wbox .section{padding:40px 0;}
.widebanner .wbox .section h2{margin-bottom:20px;}
.widebanner .wbox .section h2 img{width:95%;height:auto;}
.widebanner .wbox .section .txt1{font-size:1.3rem;}

.widebanner .image{margin-top:30px; overflow: hidden;}
.widebanner .image .image-grid{float:left;width:49%;margin:0.5%;padding:10px;}
.widebanner .wbox .section h3{font-size:2rem;}	
.widebanner .wbox .section .txtbox{float:inherit; display:block; text-align: center;}
.widebanner .wbox .section a{width:100%;display:block;background:none;color:#000;font-weight:600;padding:10px 0;font-size:1.4em;margin-top:30px;}
.widebanner .image .image-grid .sub-title{position:relative;font-size:1.6rem;}
.widebanner .image .image-grid .paragraph {font-size:1.1rem;}
}

/* 하단 레이아웃 */
#footer{background:#000;padding:0 0 2rem;}
#footer .nav{border-bottom:1px solid #171717;padding:12px 0;margin:0 auto 5px;}
#footer .info{overflow:hidden;margin-bottom:0;}
#footer .info li{display:inline-block;position:relative;padding-right:10px;font-weight:600;}
#footer .info li:last-child a:after{display:none;}
#footer .info a{position: relative;display:block;font-size:1.3rem;padding:5px 10px;color:#4d4d4d;text-decoration:none;}
#footer .info a:after{content: '';position:absolute;top:8px;right:-5px;width:1px;height:10px;background-color:#4d4d4d;}
#footer .logo{float:left;padding-right:40px;text-align:center;margin:1rem 0;}

#footer .copy{overflow:hidden;}
#footer .copy span{margin-right:10px;color:#4d4d4d;font-size:1.25rem;line-height:180%;}
#footer .copy address{margin-top:8px;color:#4d4d4d;}
#footer .row > div:nth-child(2){float:right;}
@media screen and (max-width: 768px) {
#footer .logo{float:inherit;padding-right:0;text-align:center;}
#footer .info a{font-size:1.3rem;}
#footer .copy span{font-size:1.2rem;}
}
@media all and (max-width: 991px) {
#footer .row > div:nth-child(2){float: inherit;margin-top:10px;}	
}
#footer .link h3{font-size:1.0em;font-weight:500;color:#222;padding:5px 0;}
#footer .link select{display:block;font-size:1.2rem;color:#666;padding:2px 0;padding: 0px 2px 1px;}
#footer .form-control{background:#efefef;border:1px solid #746868; border-radius:0;box-shadow:none;color:#746868;}


#footer .footerTel{background-image:url(/img_up/shop_pds/ubmix/design/img/index/tel_icon.png); background-repeat:no-repeat; background-position:0 50%;padding-left:60px;}
#footer .footerTel dt{font-size:2.7rem;color:#fff;font-weight:600;letter-spacing:0;} 
#footer .footerTel dd{color:#fff;font-size:1.25rem;letter-spacing:0;}


/*서브비주얼*/
.subvisual{width:100%;background-color:#fff;overflow:hidden;margin:0 auto;display:table;height:680px;}
.subvisual .Img{align-items:center;margin:0;background-position:center center; text-align:center;background-repeat:no-repeat;background-size:cover;position:relative;background-color:#292b2c;overflow:hidden;box-shadow:0 0 10px rgba(0, 0, 0, 0.2);
width:100%;animation-name:zoom;animation-duration:2s;animation-delay:1.5s;animation-iteration-count:1;animation-direction:alternate;animation-fill-mode:forwards;display:table-cell;vertical-align:middle;transform: scale(1.1, 1.1);}
.subvisual .Img p{display:block;max-width:1300px;margin:70px auto 0;font-weight:600;padding:0px 30px 0;text-align: center;font-size:2.5rem;color:#fff;}
.subvisual .Img span{display:block;font-size:1.75rem;font-weight:normal;margin-top:8px;}
@media screen and (max-width: 768px) {
	.subvisual{height:300px;}
	.subvisual .Img p img{width:70%;height:auto;}
	.subvisual .Img span{font-size:1.2rem;margin:0 40px;;}
}

/*서브페이지 타이틀*/
#container{position:relative;z-index:4;min-height:500px;height:auto !important;margin:0;font-size:1em;}
.container_title{display:block;padding:0 0 30px;z-index:999;font-weight:600;font-size:2.7rem;letter-spacing:-1px;border-bottom:1px dotted #ddd;margin-bottom:30px;}

button{background-color: transparent}
#top_btn {position:fixed;bottom:0;right:0;width:70px;height:70px;line-height:70px;text-align:center;font-size:18px;z-index:90;background:#000;border:0;color:#fff;display:none;}
#top_btn:hover{background:#DA1D27;color:#fff; opacity:1;}
#top_btn span{font-size:0;}
@media screen and (max-width: 768px) {
#top_btn {width:50px;height:50px;line-height:50px;font-size:16px;}
}