@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
 
 .enfont{font-family: 'Oswald', sans-serif;}
 .krfont{font-family: 'Noto Sans KR', sans-serif;}
 

 
 html, body {
      margin: 0;
      padding: 0;
      letter-spacing: -0.5px
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 100%;
        margin: 0;
    }

    .slick-slide {
      margin: 0;
    }



    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: 1;
    }
    
    .slick-active {
      opacity: 1;
    }

    .slick-current {
      opacity: 1;
    }
    

.langmo{position: absolute; left: 18px; top: 18px;}
.langmo span{margin: 0 10px}


.mainbanner{position: relative; height: 80em; letter-spacing: -0.5px}
.mainbanner .bannerimg01{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover !important; z-index: -1}
.mainbanner .bannerimg02{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover !important; z-index: -1}
.mainbanner .bannerimg03{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover !important; z-index: -1}
.mainbanner .bannertit{max-width: 1200px; margin: 0 auto; color: #fff; margin-top: 12%}
.mainbanner .bannertit p{font-size: 28px; line-height: 35px; font-weight: 400; word-break: keep-all}
.mainbanner .bannertit h3{font-size: 35px; line-height: 35px; font-weight: 400; margin-top: 40px; margin-bottom: 25px; word-break: keep-all}
.mainbanner .bannertit h1{font-size: 65px; line-height: 75px; font-weight: bold; margin-bottom: 40px; word-break: keep-all}

.mainbanner .bannerbtn{border: 1px solid #fff; padding: 20px 30px; font-size: 20px; line-height: 30px; display: inline-block; color: #fff; margin-top: 60px; transition-duration: 0.3s;}
.mainbanner .bannerbtn span{margin-left: 50px; display: inline-block; vertical-align: middle}
.mainbanner .bannerbtn span img{width: auto}
.mainbanner .bannerbtn:hover{background: #f18e1e; transition-duration: 0.3s; border-color: #f18e1e}

.mainbanner .bannerbtn2{border: 1px solid #fff; padding: 20px 30px; font-size: 20px; line-height: 30px; display: inline-block; color: #fff; margin-top: 60px; transition-duration: 0.3s;}
.mainbanner .bannerbtn2 span{margin-left: 50px; display: inline-block; vertical-align: middle}
.mainbanner .bannerbtn2 span img{width: auto}
.mainbanner .bannerbtn2:hover{background: #e60b16; transition-duration: 0.3s; border-color: #e60b16}

.mainbanner .bannerbtn3{border: 1px solid #fff; padding: 20px 30px; font-size: 20px; line-height: 30px; display: inline-block; color: #fff; margin-top: 60px; transition-duration: 0.3s;}
.mainbanner .bannerbtn3 span{margin-left: 50px; display: inline-block; vertical-align: middle}
.mainbanner .bannerbtn3 span img{width: auto}
.mainbanner .bannerbtn3:hover{background: #0c549b; transition-duration: 0.3s; border-color: #0c549b}

.lazy .slick-prev, .lazy .slick-next{width: 83px; height: 111px;
    z-index: 2;}
.lazy .slick-prev{left:40px;  background: url('https://servore.cafe24.com/img/main/prev.png'); }
.lazy .slick-next{right:40px;  background: url('https://servore.cafe24.com/img/main/next.png'); }
.lazy .slick-prev:before{content: '';}
.lazy .slick-next:before{content: '';}


.mainsubtitle{font-size: 40px; line-height: 50px; font-weight: 600; margin-bottom: 70px}

.brand{max-width: 1200px; padding: 150px 0 150px 0; margin: 0 auto}
.brand h1{ margin-bottom: 70px}
.brand ul{display: flex; text-align: center; justify-content: space-around;}
.brand ul li{text-align: center; cursor: pointer; border-right:2px solid #eee; width: 33.33%; padding: 20px 0; position: relative}
.brand ul li h2{font-size: 25px; line-height: 35px; color: #333}
.brand ul li p{font-size: 20px; line-height: 35px; color: #555; margin-top: 10px}

.brand ul li:last-child{border-right:0px}

.brand ul li .hover{opacity: 0; background-size: cover !important; text-align: center; position: absolute; width: 100%; left: 0; top: 0; height: 500px; padding-top: 70px; z-index: 20; transition-duration: 0.5s;}
.brand ul li:hover > .hover{opacity: 1; transition-duration: 0.5s;}

.brand ul li .hover .line{margin: 0 auto; height: 4px; width: 25px; background: #02519f;}
.brand ul li .hover h3{color: #fff; font-size: 40px; line-height: 50px; font-weight: 600; margin-top: 30px}
.brand ul li .hover p{color: #fff; font-size: 25px; line-height: 35px; font-weight: 400; margin-top: 10px}



.promotion{height: 750px; position: relative}
.promotion ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: absolute; bottom:0;
	display: flex;
	width: 100%
}
.promotion ul.tabs li{
	background: rgba(0,0,0,0.5);
	color: #fff;
	padding: 30px 35px;
	cursor: pointer;
	width:33.33%;
	font-size: 22px; line-height: 33px; font-weight: 600;
	text-align: center;
	position: relative;
}
.promotion ul.tabs li span{vertical-align: sub;
    margin-right: 5px;}
.promotion ul.tabs li .arro{position: absolute; right: 40px; top: 40px; margin-right: 0; opacity: 0}

.promotion ul.tabs li.current{
	background: #0c549b;
	color: #fff;
	text-align: left;
	transition-duration: 0.5s;
}

.promotion ul.tabs li.current .arro{opacity: 1}

.promotion .tab-content{
	display: none;
	background: #ededed;
	padding: 200px 0;
	background-size: cover !important;
	height: 750px;
	opacity:0;
	transition-duration: 0.5s;
}

.promotion .tab-content .tit{max-width: 1200px; margin: 0 auto; color: #fff}
.promotion .tab-content .tit h2{font-size: 30px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 30px;}
.promotion .tab-content .tit h1{font-size: 48px;
    font-weight: 600;
    line-height: 55px;
    margin-bottom: 30px;
    position: relative;
    width: auto;
    display: inline-block;
    padding-right: 100px;}
.promotion .tab-content .tit h1 span{font-weight: 400}
.mark{margin-left: 10px;
    vertical-align: bottom;
    position: absolute;
    right: 0;
    top: -15px;}

.promotion .tab-content .tit h3{font-size: 25px;
    line-height: 45px;
    font-weight: 300;
    margin-bottom: 10px;}
.promotion .tab-content .tit p{font-size: 20px;
    line-height: 33px;
    font-weight: 300;}



.promotion .tab-content.current{
	display: inherit;
	transition-duration: 0.5s;
	opacity:1;
}




.product{padding: 150px 0 150px 0; background-size: cover !important; text-align: center}
.product .box{text-align: center; padding: 30px 20px 15px; border: 2px solid #fff; background: #fff; cursor: pointer; box-shadow: 3px 3px 3px rgb(0,0,0,0.0); position: relative}
.product .box:hover{border: 2px solid #004098; box-shadow: 3px 3px 3px rgb(0,0,0,0.2)}

.product .box .text{margin: 10px 0; text-align: left}
.product .box .text h2{font-size: 20px; line-height: 30px; font-weight: 300; color: #222}
.product .box .text h2 span{margin-right: 5px}
.product .box .text h2 span img{display: inline-block}
.product .box .text h1{font-size: 30px; line-height: 40px; font-weight: 600; color: #222; margin-left: 8px}

.product .box .centerbtn{border: 1px solid #dfdfdf; padding:20px; display: block;  width: 100%; margin-top:  30px; color: #004098; 
font-size: 22px; line-height: 30px; font-weight: 500; background: #fff;  transition-duration: 0.5s;}
.product .box .centerbtn:hover{border: 1px solid #0c549b; padding:20px; display: block;  width: 100%; margin-top:  30px; color: #fff; 
font-size: 22px; line-height: 30px; font-weight: 500; background: #0c549b;  transition-duration: 0.5s; }

.product .slick-slide{opacity: 1;  margin: 0 25px; padding-bottom: 20px}


.center .slick-prev, .center .slick-next{width: 100px; height: 100px;
    z-index: 2; border: 2px solid #dfdfdf; box-shadow: 3px 3px 3px rgb(0,0,0,0.2); border-radius: 50px}
    
.center .slick-prev:hover, .center .slick-next:hover{border: 2px solid #004098;  transition-duration: 0.5s;}    
    
.center .slick-prev{left:10%;  background:#fff url('https://servore.cafe24.com/img/main/prev_product.png'); background-repeat: no-repeat;
    background-position: center;}
.center .slick-next{right:10%;  background:#fff url('https://servore.cafe24.com/img/main/next_product.png'); background-repeat: no-repeat;
    background-position: center;}
.center .slick-prev:before{content: '';}
.center .slick-next:before{content: '';}

.mark_top{position: absolute; top: 15px; left: 15px}

.news{padding: 150px 0; text-align: left; max-width: 1200px; margin: 0 auto}

.n2_7_title_wrap {width:980; height:39px;padding-top:0px; border:1px solid #ccc}
.n2_7_title a:link, .n2_7_title a:visited, .n2_7_title a:active, .n2_7_title a:hover {float:left; text-decoration:none; padding-left:0px; white-space:nowrap; font:bold 12px gulim, dotum; color:#222; line-height:27px}
.n2_7_icon {float:left; margin-left:5px; height:19px}
.n2_7_right_wrap {float:right; padding-top:9px; padding-right:7px;}



#border {border:1px solid #DFDFDF;height:289px;}


#oneshot_2_7 { position:relative;}
#oneshot_2_7 .img_set{width:100%; height:auto; background-color:#fff;padding:0;}
#oneshot_2_7 .subject_set{margin-top: 35px;}
#oneshot_2_7 .subject_set .sub_title{font-size: 23px; line-height: 33px; color: #222; letter-spacing: -0.5px}
#oneshot_2_7 .subject_set .sub_content{margin-top: 20px; font-size: 17px; line-height: 33px; color: #888; font-weight: 500}
#oneshot_2_7 ul {list-style:none;clear:both;margin:0;padding:0; display: flex; justify-content: flex-start;}
/*이미지 좌우간격*/
#oneshot_2_7 li {list-style:none;text-decoration:none;padding:0px 0px 30px 0px; cursor: pointer; border-bottom: 3px solid #dfdfdf; margin: 0 15px; width: 33.33%;}
#oneshot_2_7 li:hover{border-bottom: 3px solid #004098}

#oneshot_2_7 li:first-child{margin-left: 0}
#oneshot_2_7 li:last-child{margin-right: 0}

.end{padding: 0; width: 100%}
.end ul{display: flex;  width: 100%}
.end ul li{background-size: cover !important;  width: 50%; padding: 75px}
.end ul li h2{font-size: 38px; line-height: 50px; font-weight: 600; color: #fff}
.end ul li p{font-size: 20px; line-height: 33px; font-weight: 400; color: #fff; margin-top: 30px;}
.end ul li:first-child{padding-left: 18%}
.end ul li:last-child{display: flex; padding-right: 18%}
.end ul li:last-child > div{}
.end ul li:last-child > div:last-child{margin-left: 60px}
.end ul li a{font-size: 20px; line-height: 33px; font-weight: 400; color: #fff; margin-top: 10px; padding-bottom: 10px; border-bottom: 2px solid #fff;
 display: block; position: relative; min-width: 210px}
.end ul li a span{position: absolute; right: 10px; top: 10px; transition-duration: 0.5s}
.end ul li a:hover span{right: 0px; transition-duration: 0.5s}




/* Reset */
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

.nav a { text-decoration: none; }

.nav li { list-style: none; }



/* Menu Container */
.nav {
	display: flex;
	position: relative;
	cursor: default;
	z-index: 1000;
	justify-content: center;
}

/* Menu List */
.nav > li {
	display: inline-block;
}

/* Menu Links */
.nav > li > a {
	position: relative;
	display: block;
	z-index: 510;
width:100%;
height:100px;
line-height:100px;
padding: 0 40px;
	font-weight: 600;
	font-size: 20px;
	color: #fff;


	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}
.nav:hover { background: #fff; color: #000; transition-duration: 0.5s}
.headon .nav:hover > .headon{background: #f8f8f8; width: 100%}



.nav:hover > li > a {color: #000; }

.nav > li:hover > a { background: #f8f8f8; color: #0c549b; border-bottom: 2px solid #002d87}


.inner{max-width: 1200px; margin: 0 auto !important; width: 100%}


/* Menu Dropdown */
.nav > li > div {
	position: absolute;
	display: block;
	width: 100%;
	top: 100px;
	left: 0;

	opacity: 0;
	visibility: hidden;
	overflow: hidden;

	background: #f8f8f8;

	-webkit-transition: all .3s ease .15s;
	-moz-transition: all .3s ease .15s;
	-o-transition: all .3s ease .15s;
	-ms-transition: all .3s ease .15s;
	transition: all .3s ease .15s;
}

.nav > li:hover > div {
	opacity: 1;
	visibility: visible;
	overflow: visible;
}

/* Menu Content Styles */
.nav .nav-column {
	padding:30px 40px;
	flex:1;
	text-align: left;
	border-left: 1px solid #cccccc;
}

.nav .nav-column:first-child{border-left:0}
.nav .nav-column h3 {
	margin: 0px 0 10px 0;
	line-height: 35px;
	
	font-weight: bold;
	font-size: 18px;
	color: #111;
	text-transform: uppercase;
}

.nav .nav-column ul{display: block; text-align: center}
.nav .nav-column ul li{display: inline-block; margin: 0 20px}

.nav .nav-column li a {
	display: block;
	line-height: 25px;
	font-weight: 400;
	font-size: 20px;
	color: #444;
}

.nav .nav-column li a:hover { color: #0c549b; }


/* Menu Content Styles */
.nav .nav-column2 {
	padding:30px 40px;
	flex:1;
	text-align: left;
	border-left: 1px solid #e9e9e9;;
	background-position-x: right !important;
	background-position-y: bottom !important;
	background-repeat: no-repeat !important;
}

.nav .nav-column2:first-child{border-left:0}
.nav .nav-column2 h3{
	margin: 0px 0 10px 0;
	line-height: 35px;	
	font-weight: bold;
	font-size: 27px;
	color: #014099;
}

.nav .nav-column2 h3 a{
	color: #014099;
}

.nav .nav-column2 p {color: #333333; font-size: 20px; line-height: 25px; margin-bottom: 50px}
.nav .nav-column2 p a{color: #888}
.nav .nav-column2 ul{display: block; text-align: center}
.nav .nav-column2 ul li{display: block; margin:0 0 20px 0; text-align: left}

.nav .nav-column2 li a {
	display: block;
	line-height: 25px;
	font-weight: 400;
	font-size: 20px;
	color: #444;
}
.nav .nav-column2 li a span{margin-left: 5px; vertical-align: middle}
.nav .nav-column2 li a:hover { color: #0c549b; }

.rightnav{position: absolute; right: 50px; top: 35px; z-index: 2000}
.rightnav span{color: #dfdfdf; vertical-align: middle}
.rightnav a{padding: 0 15px; font-size: 18px; font-weight: 400; color: #fff; display: inline-block; vertical-align: middle; letter-spacing: -0.3; line-height: 25px}
.rightnav a:last-child{line-height: 20px}
.headon {position: relative}

.headon:hover {background: #f8f8f8}
.headon:hover > .rightnav a{color: #222}


.rightnav a:hover{}
.headon:hover > .nav > li > a {color: #000; }

.emt10{height: 10px; width: 100%}


#footer{padding:0 0 50px 0; background: #0e0e0e ; color: #fff}
#footer .top{padding: 45px 0 ; background: #111}
#footer .footinner{max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between;
    align-items: center;}
#footer .footinner .footlogo{width: 40%}
#footer .footinner .footnav{color: #fff; width: 60%}
#footer .footinner .footnav ul{text-align: right}
#footer .footinner .footnav ul li{display: inline-block; margin: 0 15px}
#footer .footinner .footnav ul li a{color: #fff; font-size: 19px; line-height: 26px; font-weight: 300; display: block}

#footer .footsitemap{max-width: 1200px; margin: 100px auto 50px auto}
#footer .footsitemap ul{display: flex; justify-content: space-between;}
#footer .footsitemap ul li{width: 20%}
#footer .footsitemap ul li h2{font-size:22px; color: #0f69c3; line-height: 33px;  margin-bottom: 20px}
#footer .footsitemap ul li a{display: block; color: #fff; font-size: 19px; margin-bottom: 5px; line-height: 28px; font-weight: 300}
#footer .footsitemap ul li a span{color: #aaaaaa}

#footer .footlast{padding: 50px 0 0 0; border-top: 1px solid #222222;; max-width: 1200px; margin: 0 auto; position: relative}
#footer .footlast ul li{display: inline-block; margin-right: 15px; font-size: 17px; color: #fff; line-height: 26px; font-weight: 300}
#footer .footlast p{margin-top: 5px; color: #555555; font-size: 17px;  line-height: 26px;}
#footer .footlast .tel{font-size: 25px; line-height: 26px; font-weight: 300; position: absolute; right: 0; top: 50px}
#footer .footlast .tel b{margin-right: 5px}



.quick{position: fixed; right: 50px; bottom: 5%}
.quick .q1{background: #fff; border-radius: 5px; text-align: center; padding: 10px; border: 1px solid #dfdfdf;}
.quick .q1 ul li{display: block; border-bottom: 1px solid #dfdfdf; padding: 10px 0}
.quick .q1 ul li:last-child{border-bottom: 0}
.quick .q1 ul li p{font-size: 13px; line-height: 18px; color: #888}
.quick .q2{background: #0c549b; border-radius: 0px; text-align: center; padding: 15px 10px; margin-top: -5px}
#q2{opacity: 0; transition-duration: 0.5s}
.dnone{opacity: 1 !important; transition-duration: 0.5s}





.popup_are {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
}

.pop_up_content {
  max-width: 550px;
  width: 100%;
  position: relative;

 background: #111;
 position: absolute;
 left: 50%;
 top: 50%;
     left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pop_up_content .slide_btn {

}
.pop_up_content .slide_btn span {
  cursor: pointer;
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  position: absolute;
  top: 50%; z-index: 2
}

.pop_up_content .slide_btn span#pop_up_prev{left: -80px}
.pop_up_content .slide_btn span#pop_up_next{right: -80px}

.pop_up_slide {
  margin: 0;
  overflow: hidden;
}


.pop_up_slide.slick-dotted.slick-slider{margin: 0}

.pop_up_slide .slick-dots{bottom: 25px; z-index: 2}

.pop_up_slide .slick-dots li{width: 10px; height: 10px; border-radius: 10px; background: #fff; opacity: .5}
.pop_up_slide .slick-dots li.slick-active{opacity: 1}

.pop_up_slide img {
  width: 100%;
  display: block
}
.pop_up_slide a {
  display: block;
}

.pop_up_slide .slick-slide {
  padding: 0 ;
}

.pop_foot {
  display: flex;
  align-items: center;
  justify-content: space-between;

    width: 100%;
    background: #111;padding: 5px 10px
}

.pop_foot input {
 
}
.pop_foot input + label {
  padding-left: 10px;
  position: relative;

  background-position: left center;
  background-size: 30px auto;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
  word-break: keep-all;
  cursor: pointer;
  flex:1
}

.pop_foot input:checked + label {
  background-image: url(../img/main/pop_ckon.png);
}
.pop_foot button {
  font-size: 16px;
  color: #fff;
  display: flex;
  gap: 10px;
  background: transparent;
  border: 0;
  align-items: center;
}




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

    
     .pop_up_content{max-width: 80%}
    .pop_up_content .slide_btn{display: none}

}



@media screen and (max-width: 969px) { 
	
	.nav{display: none;}
	.rightnav{display: none}
	#logo{left: 15px; top: 15px}
	
	.hd_pops_con {
    width: 100% !important;
    height: auto !important;}
    
    .hd_pops img{display: block}
    .hd_pops_con br{display: none}
    
    .hd_pops{top: 100px ; left: 0 !important}
    
    
    .bannertit .markicon{max-width: 50px; right: -60px}
    


}


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

    
     .pop_up_content{max-width: 96%}


}