@charset "utf-8";

@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);

.main-visual {position:relative; overflow:hidden;}
.main-visual .item {position: relative; z-index:1;}
.main-visual .item  .pic {position:relative; height:100vh; overflow:hidden;}
.main-visual .item .visual-img {position:absolute;  top:0; left:0; width:100%; height:100%; object-fit:cover; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;  opacity: 1 !important; animation-duration: 3s; transition: all 1s ease;}
.main-visual .slick-dots {position:absolute; bottom:50px; left:0; display:flex; justify-content:center;  width:100%;  z-index:50}
.main-visual .slick-dots li {margin:0 10px;}
.main-visual .slick-dots li button {font-size:0; line-height:0; width:13px; height:13px; background:transparent; border:2px solid #fff; border-radius:50%;}
.main-visual .slick-dots li.slick-active button {background:#fff; border-color:#fff;}

.animated {transition: all .5s ease;}

.main-visual [data-animation-in] {
    opacity: 0;
    animation-duration: 1.5s;
    transition: opacity 0.5s ease 0.3s;
	transition:1s;
}

@keyframes zoomInImage {
  from {
    transform: scale3d(1.1, 1.1, 1.1);
		transition:1s;
  }
  to {
    transform: scale3d(1, 1, 1);
			transition:1s;
  }
}

.zoomInImage {
  animation-name: zoomInImage;
}

@keyframes zoomOutImage {
  from {
    transform: scale3d(1, 1, 1);
			transition:1s;
  }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
			transition:1s;
  }
}

.zoomOutImage {
  animation-name: zoomOutImage;
		transition:1s;
}


.main-title {text-align:center; margin-bottom:40px;}
.main-title h2 {font-size:60px;line-height:1.4em; color:#222;font-weight:400; font-family: 'Jeju Hallasan', cursive;}
.main-title p {font-size:22px; line-height:1.4em; color:#777; padding-top:5px;}

.section1 {position:relative}
.section1:after {content:"";position:absolute; top:10%; left:11%; width:248px; height:300px; background:url(../images/main/menu_bg.png) 0 0 no-repeat;  z-index:-1; background-size:contain} 
.section1 .main-title p {font-weight:500;}
.section1 .nav {margin-bottom:50px; padding:0 35px;}
.section1 .nav ul {display:flex; flex-wrap:wrap; margin-left:-10px; margin-bottom:-10px;}
.section1 .nav ul li {width:calc(16.6666666% - 10px); margin-left:10px; margin-bottom:10px; border:1px solid #222; border-radius:50px; overflow:hidden; text-align:center;}
.section1 .nav ul li a {display:block; font-size:16px; line-height:48px; color::#222; background:#fff;font-weight:500;}
.section1 .nav ul li a:hover {background:#222; color:#fff;}

.section2 {padding-bottom:110px; position:relative;}
.section2 .contain {position:relative; }
.section2:after {content:"";position:absolute; bottom:0; left:0; width:100%; height:75%; background:#222; z-index:-1}  

.section3 {padding:100px 0;} 
.section3 .main-title p {font-size:25px; color:#444}
.section3 .main-title p strong {font-weight:700;}
.section3 .box {color:#fff; background:url('../images/main/brand_bg.jpg') 50% 50% no-repeat; background-size:cover; padding:125px 0; margin-bottom:40px;}
.section3 dl {margin-bottom:25px;}
.section3 dl:last-child {margin-bottom:0;}
.section3 dl dt {font-size:22px; line-height:1.6em;font-weight:500; margin-bottom:15px;}
.section3 dl dd {font-size:18px; line-height:1.8em;}
.section3 .store-menu {max-width:935px; padding-right:15px; padding-left:15px; margin:0 auto 40px;}
.section3 .store-menu ul {display:flex; margin-left:-40px;}
.section3 .store-menu ul li {width:33.3333333%; padding-left:40px; }
.section3 .store-menu .pic {position:relative; height:0; padding-bottom:65.5%; overflow:hidden;;}
.section3 .store-menu .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.section3 .store-menu .pic:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #ddd}

.pop-store-wrap {display:none; position:relative; width:100vw; background:#fff; max-width:1000px; padding:50px 80px; margin:0 auto;}
.pop-store-wrap .close {position:absolute; top:30px; right:30px; width:30px; height:30px; transition: all 0.2s ease-in-out;}
.pop-store-wrap .close:before, .pop-store-wrap .close:after {position:absolute; left:9px; top:4px;content: ' ';height:30px; width:1px;background-color:#222;}
.pop-store-wrap .close:before {transform: rotate(45deg);}
.pop-store-wrap .close:after {transform: rotate(-45deg);}
.pop-store-wrap .logo {text-align:center; margin-bottom:55px;}
.pop-store-wrap dl {margin-bottom:60px;}
.pop-store-wrap dl dt {color:#222; font-size:22px ;line-height:1.6em; margin-bottom:10px;font-family: 'Jeju Hallasan', cursive;}
.pop-store-wrap dl dd {font-size:16px; line-height:1.6em;}


.section4 {padding:170px 0; background:url('../images/main/fran_bg.jpg') 50% 50% no-repeat; background-size:cover;}
.section4 .main-title h2 {color:#fff;}
.section4 .main-title p {font-size:20px; color:#fff;}
.section4 ul {display:flex; flex-wrap:wrap; margin-left:-66px;}
.section4 ul li {width:25%; padding-left:66px; text-align:center; transition:0.3s;}
.section4 ul li .box {width:250px; height:250px; margin:0 auto; display:table; border-radius:50%; background:#fff;}
.section4 ul li a {display:table-cell; vertical-align:middle; width:100%; height:100%;}
.section4 ul li .icon {background-repeat:no-repeat; background-position:50% 50%; height:80px; margin-bottom:18px; transition:0.3s;}
.section4 ul li .tit {font-size:30px; line-height:1.4em; color:#333; font-family: 'Jeju Hallasan', cursive; transition:0.3s;}
.section4 ul li:nth-child(1) .icon {background-image:url('../images/main/fran_icon1.png');}
.section4 ul li:nth-child(2) .icon {background-image:url('../images/main/fran_icon2.png');}
.section4 ul li:nth-child(3) .icon {background-image:url('../images/main/fran_icon3.png');}
.section4 ul li:nth-child(4) .icon {background-image:url('../images/main/fran_icon4.png');}
.section4 ul li:hover .box {background:#3e3528}
.section4 ul li:hover:nth-child(1) .icon {background-image:url('../images/main/fran_icon1_on.png');}
.section4 ul li:hover:nth-child(2) .icon {background-image:url('../images/main/fran_icon2_on.png');}
.section4 ul li:hover:nth-child(3) .icon {background-image:url('../images/main/fran_icon3_on.png');}
.section4 ul li:hover:nth-child(4) .icon {background-image:url('../images/main/fran_icon4_on.png');}
.section4 ul li:hover .tit {color:#fff}

.section5 {padding:120px 0;}
.section5 .row {display:flex; margin-left:-30px;}
.section5 .col {width:33.3333333%; padding-left:30px;}
.section5 h2 {font-size:22px; line-height:1.4em; color:#333;font-weight:500; margin-bottom:10px;}
.section5 .main-board {position:relative;}
.section5 .more {position:absolute; top:10px; right:0; font-size:14px; line-height:1.4em; color:#666;font-weight:500;}
.section5 .list ul {border-top:1px solid #ddd;} 
.section5 .list ul li {border-bottom:1px solid #ddd; font-size:16px; line-height:50px; position:relative;}
.section5 .list ul li a {display:block; padding-right:80px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.section5 .list ul li a:hover {color:#000}
.section5 .list ul li span {position:absolute; top:0; right:0; font-size:15px; color:#888}
.section5 .gall {border-top:1px solid #ddd; padding:15px 0; border-bottom:1px solid #ddd;}
.section5 .gall ul {display:flex; margin-left:-20px;}
.section5 .gall ul li {width:50%; padding-left:20px;}
.section5 .gall .thumb {position:relative; height:0; padding-bottom:56.3%; margin-bottom:13px; overflow:hidden}
.section5 .gall .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;}
.section5 .gall .tit {font-size:16px; line-height:1.5em; color:#333; transition:0.3s; height:calc(1.5em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.section5 .gall a:hover .tit {color:#000}
.section5 .gall a:hover .thumb img {transform:translate(-50%,-50%) scale(1.04,1.04); -ms-transform:translate(-50%,-50%) scale(1.04,1.04); -webkit-transform:translate(-50%,-50%) scale(1.04,1.04);}
.section5 .item .pro-thumb {position:relative; height:0; padding-bottom:53.9%; overflow:hidden}
.section5 .item .pro-thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;}
.section5 .item a:hover  .pro-thumb img {transform:translate(-50%,-50%) scale(1.04,1.04); -ms-transform:translate(-50%,-50%) scale(1.04,1.04); -webkit-transform:translate(-50%,-50%) scale(1.04,1.04);}