@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 기본 틀 CSS
 * date : 2019-05-02
******************************************************** */
#wrap{position: relative; width: 100%; margin: 0 auto; min-width: 1140px;}
.layFull{width: 100%; margin: 0 auto; position: relative;}
.layGrid{width: 1140px; margin: 0 auto; position: relative; box-sizing: border-box;}
.layFull p, .layGrid p{font-size: 15px; line-height: 27px; color: #666; word-break: keep-all;}
.sound_only{display: none;}

/* Header */
#header{ position: fixed; background: rgba(0, 0,0, .5); z-index: 9999; padding: 20px 0; text-align: center}
#header a{ display: inline; }
#header.f-nav{background: #1b1b1b;}
#header.f-nav img{width: 150px;}


/* Section */
.mainSlide{margin-bottom: 0px; width: 100%; max-width:1920px; margin: 0 auto; position: relative;} 
.mainSlide .bx-wrapper{height: 764px; position: relative; overflow: hidden; z-index: 99;}
.mainSlide .bx-viewport{position: absolute !important; top: 0; left: 50%; margin-left: -960px; width: 1920px !important; }
.mainSlide .bx-controls{margin: 0 auto;  width: 100%; position: absolute; top: 50%;}
.mainSlide .bx-controls-direction a{top: 0px !important; width: 30px !important; height: 30px !important; font-size: 20px; font-weight: bold; color: #333; background: #fff; text-align: center; border-radius: 50%; line-height: 28px;}
.mainSlide .bx-pager{padding-top: 0; position: absolute; bottom: -380px;}
.mainSlide .bx-wrapper .bx-pager.bx-default-pager a{background-color: #fff;}
.mainSlide .bx-wrapper .bx-pager.bx-default-pager a:hover, .mainSlide .bx-wrapper .bx-pager.bx-default-pager a.active, .mainSlide .bx-wrapper .bx-pager.bx-default-pager a:focus{background-color: #ed0875;}
.mainSlide .bx-wrapper .bx-prev{left: 30px; display: none;}
.mainSlide .bx-wrapper .bx-next{right: 30px; display: none;}
.mainSlide .bx-viewport li{height: 764px; text-align: center;}
.mainItem01{background: url(../images/main_slide01.jpg) no-repeat center center; background-size: cover;}
.mainItem02{background: url(../images/main_slide02.jpg) no-repeat center center; background-size: cover;}
.mainItem03{background: url(../images/main_slide03.jpg) no-repeat center center; background-size: cover;}
.mainSlide > h3{position: absolute; top: 50%; left: 0; text-align: center; width: 100%; z-index: 99;}
.mainSlide > h3 > span{display: inline-block; position: relative; font-size: 3rem; color: #fff; font-family: 'AritaBuri', serif; font-weight: 900; text-shadow: 3px 3px 3px rgba(0, 0, 0, .3)}
.mainSlide > h3 > span:before{content: ''; display: block; position: absolute; top: 10px; left: -120px; width: 100px; height: 2px; background: #fff;}
.mainSlide > h3 > span:after{content: ''; display: block; position: absolute; top: 10px; right: -120px; width: 100px; height: 2px; background: #fff;}


#about{padding: 70px 0 260px; background: url(../images/about_bg.jpg) no-repeat center center;}
.mainTilte{/* font-family: 'Roboto Slab', serif; */ color: #333; font-size: 34px; font-weight: bold; margin-bottom: 46px; text-transform: uppercase;}

#technology{padding: 70px 0; background: url(../images/tech_bg.jpg) no-repeat center center;}
.techTxt{font-size: 20px; line-height: 32px; color: #444; font-weight: 600; }
.techTxt > span{display: block; font-weight: 400; margin-top: 5px;}
.techTit{margin-top: 40px; font-size: 26px; line-height: 32px; margin-bottom: 20px; color: #333; font-weight: normal; /* font-family: 'Roboto Slab', serif; */}
.techList{padding: 0px 20px 40px 20px; border-bottom: 2px solid #ac5089; margin-bottom: 30px;}
.techList > li{width: 260px; margin-left: 20px; display: inline-block; float: left;}
.techList > li:first-child{margin-left: 0px;}
.techList > li > p{font-size: 15px; line-height: 24px; color: #333; padding: 0 20px; margin-top: 5px; font-weight: 600;}
.techDl{display: table; width: 768px; margin: 0 auto;}
.techDl dt{display: table-cell; vertical-align: middle;}
.techDl dd{display: table-cell; text-align: left;padding-left: 20px;}


#product{padding-top: 80px;}
#product .layGrid{padding: 0 20px;}
#product .fl{width: 634px;}
#product .fr{width: 448px; padding: 70px 0 120px; background: url(../images/product_right.jpg) no-repeat right top; background-size: 90%;}


#feature{padding: 75px 0;background: url(../images/feature_bg.jpg) no-repeat center center;}
#feature .layGrid{padding: 0 20px;}
.featTab{margin-bottom: 30px;}
.featTab li{float: left; width: 18%; margin-left: 2.5%;}
.featTab li:first-child{margin-left: 0;}
.featTab li > a{display: block; text-align: center; border: 2px solid #ed0875; background: #fff; border-radius: 5px; min-height: 54px; padding: 8px 10px 3px; font-weight: bold; line-height: 24px;}
.featTab li > a.text01{line-height: 56px;}
.featTab li.active > a{color: #fff; background: #ed0875;}
.featView{width: 1100px; height: 434px; margin: 0 auto; display: none;}
.featView.active{display: block;}
.featTxt{width: 500px; padding: 70px 40px; box-sizing: border-box;}
.featTxt > h3{position: relative; font-size: 30px; color: #333; padding-bottom: 15px; margin-bottom: 18px;}
.featTxt > h3:before{content: ''; display: block; width: 40px; height: 2px; background: #ed0875; position: absolute; bottom: -5px; left: 0;}
#featView01{background: url(../images/feature01.jpg) no-repeat center center;}
#featView02{background: url(../images/feature02.jpg) no-repeat center center;}
#featView03{background: url(../images/feature03.jpg) no-repeat center center;}
#featView04{background: url(../images/feature04.jpg) no-repeat center center;}
#featView05{background: url(../images/feature05.jpg) no-repeat center center;}


#point{padding: 80px 0;background: url(../images/point_bg.jpg) no-repeat center center;}
.pointSlide{width: 100%; box-sizing: border-box; padding: 0 20px;}
.pointSlide .fl{width: 446px;}
.pointSlide .fr{width: 654px; height: 334px; background: #fff; box-sizing: border-box; padding: 50px 50px;}
.pointSlide .fr > h3{width: 100%; font-size: 25px; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #ddd; color: #333;}
.pointSlide .fr li{width: 100%; position: relative; display: block; font-size: 15px; color: #555; margin-bottom: 5px; padding-left: 15px;}
.pointSlide .fr li:before{content: ''; display: block; position: absolute; top: 11px; left: 0; width: 5px; height: 5px; border-radius: 50%; background-color: #ed0875}
.pointSlide .bx-prev{left: 10px !important; font-size: 30px; color: #666}
.pointSlide .bx-next{right: 10px !important;font-size: 30px;  color: #666; text-align: right;}
.pointSlide .bx-wrapper .bx-pager{padding-top: 0; bottom: 0;}
.pointSlide .bx-wrapper .bx-pager.bx-default-pager a{background-color: #c0c0c0;}
.pointSlide .bx-wrapper .bx-pager.bx-default-pager a:hover, 
.pointSlide .bx-wrapper .bx-pager.bx-default-pager a.active, 
.pointSlide .bx-wrapper .bx-pager.bx-default-pager a:focus{background-color:#ed0875;}


#how{padding: 80px 0 20px; }
#how .techTxt{margin-bottom: 40px;}

#use{padding: 80px 0;}
.useList{}
.useList > li{width: 210px; float: left; margin-left: 12.5px; box-sizing: border-box; text-align: center; border: 1px solid #ddd; padding: 20px; border-bottom: 7px solid #ed0875; border-radius: 0 0 10px 10px; min-height: 414px;}
.useList > li:first-child{margin-left: 0;}
.useList > li > img{width: 100%;}
.useList > li > p{padding-top: 60px; position: relative;}
.useList > li > p:before{content: ''; display: block; width: 40px; height: 2px; background: #ed0875; position: absolute; top: 34px; left: 50%; margin-left: -20px;}

#beauty{padding: 80px 0; background: url(../images/beauty_bg.jpg) no-repeat center center;}
#beauty .layGrid{padding: 0 20px;}
#beauty .fl{width: 500px;}
#beauty .fl > h3{padding-top: 40px; padding-bottom: 20px;}
#beauty .fl > p{color: #fff; font-size: 15px; letter-spacing: -0.5px;}
#beauty .fr{width: 580px;}
#beauty .fr img{width: 100%;}

#cert{padding: 80px 0px}
.certSlide{margin-top: 50px; width: 100%; box-sizing: border-box; padding: 0 60px;}
.certSlide .bx-prev{left: -40px !important; font-size: 30px; width: 48px; height: 48px; background: #ed0875; border-radius: 50%; text-align: center; color: #fff;}
.certSlide .bx-next{right: -40px !important;font-size: 30px; width: 48px; height: 48px; background: #ed0875; border-radius: 50%; text-align: center; color: #fff;}

/* Footer */
#footer{background-color: #e8d0d0;}
#footer > .layGrid{padding: 30px 20px; text-align: center;}
#footer > .layGrid > p{color: #4a4a4a; font-size: 13px; line-height: 24px; padding: 20px 0;}
.copytright{background-color: #937777; text-align: center;}
.copytright > p{color: #fff; font-size: 13px; padding: 3px 0;}