@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR|Noto+Serif');
@font-face {
    font-family: 'Times New Roman';
    src: url('../font/TimesNewRomanPSMT.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {margin: 0; padding: 0; list-style: none; text-decoration: none; color: inherit;}

body {font-family:'Noto Sans KR', 'NanumGothic', sans-serif;}

/*header start*/
#header {width: 100%; height: 146px; background: #ddd8b8; font-family: 'Noto Serif', 'Noto Sans KR';}
h1 {float: left; margin: 50px 377px 0 35px;}
#gnb li {float: left; font-size: 24px; text-transform: uppercase; margin: 60px 45px 0 0;}
#gnb li a {display: block;}
#gnb li a:hover {color: #6b6b47; transition: all 1s;}
.util {float: right; margin: 60px 44px 0 0;}
.util li {float: left; margin-left: 20px;}
.util li a:hover {text-decoration: underline;}

#contents {}

.visWrap_1 {width: 100%; height: 550px; background: #da946d;}
.vis_1 {width: 1000px; margin: 0 auto; color: #fff;}
.visBox_1 {width: 550px; height: 422px; margin: 80px 0 0 0; float: left;}
.visBox_1 p {animation: tran 2.5s linear; opacity: 0; animation-fill-mode: forwards;}
.visBox_1 p:nth-child(1) {font-size: 80px; font-weight: bold; line-height:1em; margin-bottom:50px;}
.visBox_1 p:nth-child(1) span {font-size: 60px; letter-spacing: -5px;}
.visBox_1 p:nth-child(2) {font-size: 19px; margin: 50px 0 90px 0; animation-delay: 0.4s;}
.visBox_1 p:nth-child(3){font-size: 25px; margin-bottom: 75px; animation-delay: 0.8s;}
.visBox_1 p:nth-child(3) span {font-weight: bold;}
.visimgBox_1 {width: 450px; height: 422px; margin: 85px 0 0 0; float: left; opacity: 0; animation: tran 2.5s; animation-delay: 1s; animation-fill-mode: forwards;}


@keyframes tran {
    
    0% {opacity: 0;}
    100% {opacity: 1;}
}



.bestBox {width: 1000px; margin: 0 auto; overflow: hidden; padding: 20px;}
.bestBox h2 {font-size: 48px; color: #333; margin: 55px 0 75px 0;}
.bestBox h2:after {content: ""; display: block; width: 235px; height: 5px; background: #d4bdaa;}
.bestBox .imgBox {width: 235px; height: 431px; background: #f4edd7; float: left; margin-right: 20px;}
.bestBox .imgBox:last-child {margin-right: 0;}
.bestBox .imgBox .img {width: 214px; height: 273px; background: #fff; margin: 10px auto;}
.bestBox .imgBox .text {width: 214px; height: 120px; margin: 15px 10px; text-align: center; font-size: 14px; color: #333;}
.bestBox .imgBox .text p:last-child {font-weight: bold; line-height: 2em; color: #000;}
.bestBox .imgBox .text span {font-family: 'Times New Roman'; font-size: 38px; font-weight: bold; line-height: 1.5em;}
.bestBox .imgBox:hover {background: #ddcabb; transition: all .7s;}
.bestBox .imgBox a:hover .text p {color: #ffffff; transition: all .7s;}

.visWrap_2 {width: 100%; height: 500px; background: #7ba383; margin-top: 100px;}
.vis_2 {width: 1000px; margin: 0 auto;}
.visimgBox_2 {width: 570px; height: 420px; margin: 60px 0 0 0; float: left;}
.visBox_2 {width: 430px; height: 365px; margin: 80px 0 0 0; float: right; text-align: right; font-size: 20px;
color: #fff;}
.visBox_2 p:first-child {font-size: 20px; margin: 0 0 10px 0;}
.visBox_2 p:first-child span {font-size: 37px; font-weight: bold; line-height: 3em;}
.visBox_2 p:nth-child(2) {font-size: 37px; font-weight: bold; line-height: 1.5em;}
.visBox_2 p:nth-child(2) span {font-size: 50px; font-weight: bold}
.visBox_2 p:last-child {margin: 30px 0 0 0;}
.visBox_2 p:last-child span {font-weight: bold;}


.newBox {width: 1000px; margin: 0 auto; overflow: hidden; padding: 20px;}
.newBox h2 {font-size: 48px; color: #333; margin: 55px 0 75px 0; }
.newBox h2:after {content: ""; display: block; width: 235px; height: 5px; background: #d4bdaa;}
.newBox .imgBox {width: 320px; height: 455px; background: #f4edd7; float: left; margin: 0 20px 60px 0;}
.newBox .imgBox:last-child {margin-right: 0;}
.newBox .imgBox:hover {background: #ddcabb; transition: all 0.7s;}
/*.newBox .imgBox:hover .text p:first-child {font-weight: bold;}*/
.newBox .imgBox .img {width: 283px; height: 287px; background: #f4edd7; margin: 18px auto;}
.newBox .imgBox .img img {width: 283px; height: 287px;}
.newBox .imgBox .text {width: 293px; height: 112px; margin: 20px 13px; text-align: center;}
.newBox .imgBox .text p {color: #333; font-size: 14px; line-height: 1.3em;;}
.newBox .imgBox .text p:nth-child(2) {color: #000; font-weight: bold; line-height: 2.6em;}


.revWrap {width: 100%; height: 1100px; background: url(../img/rev_bg_41.png);}
.revBox {width: 1000px; padding: 20px; margin: 0 auto; overflow: hidden;}
.revBox h2 {font-size: 48px; color: #333; margin: 30px 0 75px 0;}
.revBox h2:after {content: ""; display: block; width: 235px; height: 5px; background: #d4bdaa;}
.revBox .revBox2 {width: 700px; margin: auto;}
.revBox .rev_video {width: 700px; height: 377px; background: #fff; margin-bottom: 30px; overflow: hidden;}
.revBox .rev_video video {min-width: 700px; height: 397px;}
.revBox .rev_text {width: 300px; height: 400px; background: rgba(212, 189, 170, 0.4); float: left; margin-right: 20px; padding: 20px; font-size: 14px; cursor: pointer;}
.revBox .rev_text:last-child {margin-right: 0;}
.revBox .rev_text .imgBox {width: 300px; height: 300px;}
.revBox .rev_text:hover {}
.revBox .rev_text .txtBox {width: 300px; height: 80px; color: #333; margin-top: 20px;}
.revBox .rev_text .txtBox p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.revBox .rev_text .txtBox h4 {margin-bottom: 15px; text-align: center;}


.recomBox {width: 1000px; margin: 0 auto; overflow: hidden; padding: 20px; cursor: pointer;}
.recomBox h2 {font-size: 48px; color: #333; margin: 55px 0 60px 0;}
.recomBox h2:after {content: ""; display: block; width: 235px; height: 5px; background: #d4bdaa;}
.recomBox>p {font-size: 35px; color: #333; margin-bottom: 20px;}
.recomBox .imgBox {width: 320x; height: 450px; background: #f4edd7; float: left; margin: 0 20px 50px 0;}
.recomBox .imgBox:last-child {margin-right: 0;}
.recomBox .imgBox .img {width: 283px; height: 287px; background: #fff; margin: 18px auto; text-align: center;}
.recomBox .imgBox .img img {width: 283px; height: 287px;}
.recomBox .imgBox .text {font-size: 15px; width: 293px; height: 112px; margin: 20px 13px; text-align: center;}
.recomBox .imgBox .text>p {color: #333; margin: 25px;}
.recomBox .imgBox .text>p:last-child {font-weight: bold;}
.recomBox .imgBox .text span {color: #777; font-size: 13px; font-weight: bold;}
.recomBox .imgBox:hover {background: #ddcabb; transition: all 0.7s;}

.infoWrap {width: 100%; background: #ddd8b8;}
.infoBox {width: 1000px; margin: 0 auto; overflow: hidden; padding: 20px; color: #333;}
.infoBox h3 {font-size: 35px; margin: 30px;}
.infoBox .faq {width: 490px; height: 349px; background: #fff; float: left; overflow: hidden; font-size: 15px}
.infoBox .faq h3:after {content: ""; display: block; width: 130px; height: 5px; background: #d4bdaa;}
.infoBox .faq .onlineBox {width: 180px; float: left; padding: 30px; margin-bottom: 15px;}
.infoBox .faq .onlineBox span {font-size: 25px; font-weight: bold; color: #996234}
.infoBox .faq .storeBox {width: 180px; float: right; padding: 30px; margin-bottom: 15px;}
.infoBox .faq .storeBox span {font-size: 25px; font-weight: bold; color: #996234}
.infoBox .faq>p {margin: 30px;}

.infoBox .mobile {width: 490px; height: 349px; background: #fff; float: right;}
.infoBox .mobile h3:after {content: ""; display: block; width: 100px; height: 5px; background: #d4bdaa;}
.infoBox .qr_list {float: left; margin: 20px 0 30px 30px;}
.infoBox .mob_list {width: 240px; float: right; margin-top: 25px;}
.infoBox .mob_list li {margin-bottom: 50px;}

.footerWrap {width: 100%; height: 300px; background: #a9a8a4;}
#footer {width: 1000px; padding-top: 50px; margin:0 auto; font-size: 15px;}
.logoBox {width: 227px; height: 225px; float: left; margin-right: 20px; }
.footerBox {width: 500px; overflow: hidden; float: left; margin-right: 20px; color: #eee;}
.footerBox .footer_list {overflow: hidden; margin-bottom: 15px;}
.footerBox .footer_list li {float: left; margin-right: 5px;}

.snsBox {width: 230px; float: right;}
.snsBox h3 {font-size: 20px; color: #fff; margin-bottom: 20px;}
.snsBox h3:after {content: ""; display: block; width: 40px; height: 3px; background: #fff;}
.snsBox .sns_list li {float: left; margin-right: 15px;}
.snsBox .sns_list li:last-child {margin-right: 0px;}