/* 상단 헤더 */
#header {width:100%;  line-height: 150px; background: transparent; transition:all 0.4s ease; position: fixed; top: 0; left: 0; right: 0; z-index: 99;}
#header .head {position: relative}
#header .logo {width: 100%; text-align: center}
#header .logo a img {height:45px}

#header .menu {position: absolute; top:0; left: 10%}
#header .menu button {display: block; width: 50px; height: 40px; background: transparent; cursor: pointer;}

#header .t_incall {position: absolute; top:0; right: 10%}
#header .t_incall img {height:25px}

body.fixed #header {line-height: 100px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.2);}

.navigation {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; padding: 5%; background: rgba(0,0,0,0.9);  transition: all 0.4s ease; display: none}
.navigation.open {display: block; z-index: 999}
.navigation .close_btn {width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 40px; margin-bottom: 20px; color:#fff}
.navigation ul {border-top: 1px solid rgba(255,255,255,0.2)}
.navigation ul li {border-bottom: 1px solid rgba(255,255,255,0.2)}
.navigation ul li a {font-size: 40px; font-weight: 700; color:#fff; display: block; padding: 2% 0; transition: all 0.3s ease}
.navigation ul li a:hover,
.navigation ul li a:focus {color:#e4290d}


/* 중간 레이아웃 */
#wrapper{position:relative}
#container_wr {width:100%}
#container_wr:after {display:block;visibility:hidden;clear:both;content:""}
#container {width:100%; overflow:hidden; }
#container:after {display:block;visibility:hidden;clear:both;content:""}
.inner_container {width:1500px; height:100%;  margin:0 auto; position: relative}
.flex_container {display: flex; align-items: center}

/* 플로팅배너 */
.float_banner {position: fixed; bottom: 120px; right: 10px; z-index: 99; animation:ani 1s infinite alternate}
.float_banner a {display: block}
.float_banner img {filter: drop-shadow(2px 10px 10px rgba(0, 0, 0, 0.1))}
@keyframes ani {
    0%{transform:translate(0,0);}
    100%{transform:translate(0,10px);}
 } 

/* main visual */
.main_visual {width: 100%}
.main_visual .swiper-slide {width: 100%; height: 100vh}
.main_visual .swiper-slide.video-slide {background: url('../img/main/main_video_pc.jpg')  center bottom no-repeat; background-size: cover}
.main_visual .swiper-slide.slide01 {background: url('../img/main/main_visual01_pc.jpg') #f7f7f7 center bottom no-repeat; background-size: cover}
.main_visual .swiper-slide.slide02 {background: url('../img/main/main_visual02_pc.jpg') #fbfbfb center bottom no-repeat; background-size: cover}
.main_textbox {position: absolute; top: 50%; left: 50%; width: 1200px; margin-left: -600px; margin-top: -100px}
.main_textbox .copy {display: block; padding:20px 0; opacity: 0;  transition: all .7s ease}
.main_textbox .top-left {text-align: left; transform: translateX(-100px); transition-delay: 1300ms}
.main_textbox .bottom-right {text-align: right; transform: translateX(100px); transition-delay: 1600ms}
.main_textbox .main_copy {text-align: center; opacity: 0; transform: translateY(100px); transition: all .7s ease; transition-delay: 900ms}
.main_textbox .main_copy img {max-width: 100%}
.swiper-slide-active .main_textbox .main_copy  {opacity: 1; transform: translateY(0);}
.swiper-slide-active .main_textbox .copy {opacity: 1;}
.swiper-slide-active .main_textbox .top-left {transform: translateX(0); }
.swiper-slide-active .main_textbox .bottom-right {transform: translateX(0);}


/* 메인 - 공통 */
.section {position: relative;  background: #FFF;}

.text-wrap {text-align: left}
.text-wrap.center {text-align: center}
.text-wrap h2 {font-size: 80px; font-weight: 800; letter-spacing: -3px; line-height: 1.1;     word-break: keep-all;}
.text-wrap h2 span {color: #de320f}
.text-wrap h2 sup {font-size: 16px; vertical-align: top; opacity: 0.3}
.text-wrap p {font-size: 24px;  margin: 70px 0; letter-spacing: -1px; line-height: 1.6; color:#333}
.text-wrap a {transition: all 0.3s ease}
.text-wrap a:hover {margin-left: 10px; transition: 0.3s ease;}
.text-wrap a img {height: 30px}
.text-wrap small {opacity: 0.3;}


/* 메인- 솔비 */
#sb {padding: 200px 0}
#sb .img-wrap {text-align: center}
#sb .img-wrap img {width: 100%; max-width: 1560px}
#sb .text-wrap {position: absolute; top: 50%; right: 10%; margin-top: -230px; z-index: 1}
#sb .text-wrap h2 {font-size: 77px}

/* 메인- 후기영역 */
#main_lastest {width: 1300px; margin : 150px auto 0; padding: 0 40px}
#main_lastest .board_title {text-align: center; font-size: 40px; font-weight: 300; color: #444}
#main_lastest .board_title a {border-bottom: 1px solid #444}
#main_lastest .bx_after {width:100%; height:auto; margin-top: 50px; position: relative}
#main_lastest .bx_left {display:table; width:20%; height:350px; border: 1px solid #ccc; text-align: center; position: absolute; top:0; left: 0}
#main_lastest .bx_left .bx_left_inner {display: table-cell; vertical-align: middle}
#main_lastest .bx_left h2 {font-size: 60px; font-weight: 900; color: #222; line-height: 1}
#main_lastest .bx_left p {font-size: 18px; color: #555}
#main_lastest .bx_left img {height: 30px; display: block; margin: 20px auto}

#main_lastest .bx_right { display:inline-block; width:100%; padding-left: 21%; position: relative}

/* 메인- 브랜드스토리 */
#brand {padding: 200px 0}
#brand .text-wrap {position: absolute; top: 50%; left: 10%; z-index: 3; margin-top: -230px}
#brand .img-wrap {text-align: right}
#brand .img-wrap img {width: 100%; max-width: 1560px}
#brand .spin_text {position: absolute; bottom: 7%; right: 6%; width: 200px; height: 200px}
#brand .spin_text img {animation: rotate_image 20s linear infinite; transform-origin: 50% 50%; width: 100%}
@keyframes rotate_image {100% {transform: rotate(360deg)}}

/* 메인-메이킹필름영역 */
.film_wrap {padding: 0 13%}


/* 메인 - 해국추출물 */
#heaguk .fix_bg_area {width: 100%; height: 700px; background: url('../img/main/section02_img.jpg') center no-repeat; background-size: cover; background-attachment: fixed}
#heaguk .text-wrap {margin-bottom: 100px; text-align: center}
#heaguk .fix_bg_btext {position: absolute; bottom: -10%; left: 0; z-index: 1}



/* 메인 - 제품정보 */
#product {padding: 200px 0}
#product .img-wrap {text-align: right}
#product .img-wrap img {width: 100%; max-width: 1560px}
#product .text-wrap {position: absolute; top: 50%; left: 10%; margin-top: -230px; z-index: 1}
#product .text-wrap h2 {font-size: 77px}



/* 메인 - 인플루언서이미지+DB창 */
#bottom_dbform {margin-bottom: 200px}
#bottom_dbform .flex_container {padding: 0 10%}
#bottom_dbform .flex_container > div {width: 50%}
#bottom_dbform .left_box img {width: 100%}
#bottom_dbform .right_box {padding: 0 6.5%}
.db_title {text-align: center; margin-bottom: 10px}
.db_title img {max-width: 100%}
.db_title a {display: block; margin-top: 20px; padding-top: 20px; border-top: 1px dashed #ddd}

.db_form dl {width: 100%; margin-bottom: 10px; border: 1px solid #555; padding: 0 20px; line-height: 60px; display: flex; align-items: center}
.db_form dl dt {width: 20%; font-size: 24px; font-weight: 500}
.db_form dl dd {width: 80%; height: 100%}
.db_form dl dd input {width: 100%; height: 100%; font-size: 24px; font-weight: 700; font-family: inherit}
.db_form dl.gender {padding: 0; display: block}
.db_form dl.gender dd {width: 100%}
.db_form dl.gender dd .s_btn {display: flex; align-items: center; cursor: pointer}
.db_form dl.gender dd .s_btn > div {width: 50%; font-size: 24px; text-align: center}
.db_form dl.gender dd .s_btn .on {background: #222; color: #fff}
.db_form .pv_wrap {text-align: center; margin-top: 20px}
.db_form .pv_wrap .checkbox {display:inline-block; margin-right: 5px}
.db_form .pv_wrap .checkbox:last-child {margin-right: 0}
.db_form .pv_wrap .checkbox a {font-size: 11px; font-family: sans-serif; letter-spacing: -1px}
.db_form  .send_btn {clear: both; margin-top: 30px}
.db_form  .send_btn button {width: 100%; height: 70px; background: #de320f; line-height: 70px; color:#fff; font-size: 30px; font-weight: 700}

/* 레이어팝업 */
.layer_popup {display:none; background:#fff; width:800px; height:500px}
.layer_popup .title {width:100%; height:60px; background:#1c2637; line-height:60px; padding:0 20px; position:relative}
.layer_popup .title h2 {font-size:21px; font-weight:400; color:#fff}
.layer_popup .title a {width:60px; height:60px; display:block; text-align:center; color:#fff; font-size:30px; position:absolute; top:0; right:0}
.layer_popup .title a i {line-height:60px; vertical-align:top}
.layer_popup .inner {height:360px; margin:30px 0; padding:0 30px; overflow-x:hidden; overflow-y:scroll;}



/* 개인정보처리방침 */
#privacy_all {width:1000px; margin:100px auto}
#privacy_all .title {font-size:24px; text-align:center; margin-bottom:20px}
.privacy-wrap {width:100%; font-size:14px; letter-spacing:-0.5px}
.privacy-wrap .priv_msg {background:#f9f9f9; padding:15px; text-align:justify; line-height:2; margin-bottom:20px}
.privacy-wrap .normal-text {text-align:justify; line-height:1.7}
.privacy {margin-bottom:20px}
.privacy:last-child {margin-bottom:0}
.privacy h3 {margin-bottom:10px}
.privacy h4 {font-weight:500; line-height:1.7}
.privacy ul {margin:10px 0}
.privacy ul > li {position:relative; padding-lefT:7px; line-height:2}
.privacy ul > li:before {content:'-'; position: absolute; top:0; left:0}
.privacy ol {margin:5px 0}
.privacy ol > li {position: relative; padding-left:7px; font-size:13px;  line-height:1.8; letter-spacing:-0.7px}
.privacy ol > li:before {content:'·'; position: absolute; top:0; left:0}
.priv_table {width:100%; margin:10px 0; border-top:1px solid #333}
.priv_table thead th {background:#f8f8f8; font-weight:600; padding:10px 0; border-bottom:1px solid #ddd}
.priv_table tbody td {padding:10px; border-bottom:1px solid #ddd}
.priv_table tbody th {padding:10px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; font-weight:600}


/* footer */
#footer-wrap {width:100%; background:#444; padding:50px 0}
#footer-wrap .footer {text-align:center}
.bottom-logo {margin-bottom:20px}
.bottom-logo img {height:30px; opacity: 0.8}
.address p {font-size: 14px; line-height: 1.7; color: #fff; opacity: 0.5}
.address a {width:120px; height:30px; line-height:30px; font-size:0.7em; background:#555; color:#fff; text-align:center; margin-top:20px; display:inline-block}
.address a.naver {background:#00c901}
#footer-wrap .privacy_open {font-size:13px; background:#555; color:#fff; padding:5px 10px; text-align:center; margin-top:10px; display:inline-block;}

#top_btn {width:70px; height:70px; background:#fff; position:fixed; bottom:30px; right:40px; z-index:999; border-radius: 50%; box-shadow: 0 5px 10px rgba(0,0,0,0.3);}
#top_btn > i {font-size:30px}

.x_div {width: 100px; height: 30px; position: absolute; top: -30px; left: 50%; margin-left: -50px; text-align: center}
#x_btn {display: block; width: 100%; height: 100%; background: #222; color: #fff}
#x_btn > i {font-size: 14px}

/* sub page */
/* 서브페이지 공통 */
.sub_visual img {width: 100%}
#sub_container > img {width: 100%}
#sub_container .margin_auto {width: 1500px; margin: 0 auto}
#sub_container .margin_auto img {width: 100%; max-width: 1500px}
#sub_container.info {padding: 10% 0}

.product .btn_wrap {text-align: center; margin-top: -101px; padding-bottom: 50px}
.product .btn_wrap #opengraph {display: inline-block; padding: 1% 2%; border: 1px solid #999; color: #555; transition: all 0.3s ease}
.product .btn_wrap #opengraph:hover {background: #e4290d; border-color: #e4290d; color:#fff}

.graph_hidden {display: none; }
.graph_hidden img {width: 100%}

/* 서브페이지 DB Form (hidden) */
#db_form {position:fixed; width: 100%; padding: 30px 0; background: #e5290e;   bottom: -999px; left: 0; right: 0; z-index: 9; transition: all 0.3s ease;}
#db_form.open {bottom: 0}
#db_form > form {width: 1000px; margin: 0 auto; display: flex; align-items: start}
#db_form .input_form {width: 70%; height: auto; overflow: hidden}
#db_form .input_form dl {width: 50%; float: left; margin-bottom: 10px; display: flex; align-items: center}
#db_form .input_form dl dt {width: 20%; font-size: 18px; font-weight: 600; color:#fff}
#db_form .input_form dl dd {width: 80%}
#db_form .input_form dl dd input {width: 90%; height: 40px; border-radius: 5px; padding: 0 10px; font-family: inherit; font-size: 18px}
#db_form .input_form dl dd .s_btn {width: 90%; height: auto; overflow: hidden}
#db_form .input_form dl dd .s_btn > div {width: 50%; line-height: 40px;  float: left; background: #fff; text-align: center}
#db_form .input_form dl dd .s_btn div.on {background: #222; color:#fff}
#db_form .input_form dl dd .s_btn .s_f {border-radius: 5px 0 0 5px}
#db_form .input_form dl dd .s_btn .s_m {border-radius: 0 5px 5px 0}
#db_form .send_wrap {width: 30%; text-align: center}
#db_form .send_wrap button {width: 100%; height: 62px; background: #222; border-radius: 5px; color: #fff; font-size: 24px; font-weight: 800}
#db_form .send_wrap .checkbox {margin-top: 10px; display:inline;}
#db_form .send_wrap .checkbox a {font-size: 11px; color: #fff}
.hidden {display: none}

/* 서브페이지 - 제품정보하단 DB form */
#sub_db {width: 1000px; margin: 0 auto 100px}
#sub_db h1 {text-align: center; margin-bottom: 20px}
#sub_db h1 > img {width: 100%; max-width: 428px !important}

/*
        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; 
            height: 0;
            overflow: hidden;
            max-width: 100%;
        }

  
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
*/

/* responsive */
    @media screen and (max-width:1500px) {
        body {min-width: 100%; width: 100%}

        /* 메인페이지 */
        #header .menu {left: 5%}
        #header .t_incall {right: 5%}

		#cf {padding: 100px 0}

		#sb {padding-top: 100px;padding-bottom:0;}
		#sb .img-wrap {text-align: center}
		#sb .img-wrap img { padding-top:100px;width: 100%; max-width: 1560px}
		#sb .text-wrap {position: absolute; top: 40%; left: 10%; margin-top: -230px; z-index: 1; text-align:center;}
		#sb .text-wrap h2 {font-size: 77px}

        #brand {padding: 200px 0}
        #brand .text-wrap {left: 5%}
        #heaguk .fix_float_img {left: 5%}
        #product .text-wrap {left: 5%}

        #bottom_dbform .flex_container {padding: 0}

        /* 서브페이지 */
        #sub_container .margin_auto {width: 100%; padding: 0 5%}
        #sub_container .margin_auto img, 
        #sub_container .margin_auto img, #sub_container .graph img#sub_container .graph img {max-width: 100%}
    }

    @media screen and (max-width:1200px) {
        /* 메인페이지 */
        .main_textbox {width: 100%; left: 0; margin-left: 0; padding: 0 30px}

        #main_lastest {width: 100%}



    }

    @media screen and (max-width:1024px) {
        /* 메인페이지 */
        .main_visual .swiper-slide {height: 100svh}
        .main_visual .swiper-slide.video-slide {background: url('../img/main/main_video_mo.jpg') center no-repeat; background-size: cover}
        .main_visual .swiper-slide.slide01 {background: url('../img/main/main_visual01_tb.jpg') #f5f5f5 center bottom no-repeat; background-size: cover}
        .main_visual .swiper-slide.slide02 {background: url('../img/main/main_visual02_tb.jpg') #f2fafc center bottom no-repeat; background-size: cover}

        .main_textbox {top: 12%; margin-top: 0}
        .main_textbox .top-left,
        .main_textbox .bottom-right {text-align: center}
        .main_textbox .main_copy img {width: 70%}
        .main_textbox .top-left img {max-width: 70%}
        .main_textbox .bottom-right img {max-width: 50%}
        
        #sb {padding: 200px 0 0 0 }


        #brand .text-wrap {position: unset; margin-top: 0; padding: 5% 5% 10% 5%}
        #brand .img-wrap {text-align: right}
        #brand .spin_text {position: unset; float: right; margin: -150px 50px 0 0}

        #heaguk .text-wrap {padding: 5% 5% 10% 5%; margin-bottom: 0}
        #heaguk .text-wrap br {display: block}
        #heaguk .fix_bg_area {background-attachment: inherit; background-size: cover}
        #heaguk .fix_bg_btext img {display: none}
        #heaguk .fix_float_img {position: unset; text-align: right; margin: -25% 5% 0 0}

        #product {padding: 200px 0 0 0 }
        #product .text-wrap {position: unset; margin-top: 0; padding: 5% 5% 10% 5%; text-align: center}

        #bottom_dbform .flex_container {display: block}
        #bottom_dbform .flex_container > div {width: 100%}
        #bottom_dbform .right_box {padding: 10% 10% 0 10%}

        /* 서브페이지 */
        #sub_container .margin_auto {padding: 0}
        #sub_container .graph {padding: 80px 0}

        #db_form {padding: 30px}
        #db_form > form {width: 100%; display: block}
        #db_form .input_form {width: 100%}
        #db_form .send_wrap {width: 100%}

        #sub_db {width: 100%; padding: 0 30px}

        #privacy_all {width:100%; margin:100px auto}


    }
    
    @media screen and (max-width: 768px) {
        .float_banner img {width: 100px; height: auto; bottom: 100px}
        #top_btn {width: 50px; height: 50px; right: 20px}

        #header {line-height: 80px}
        #header .logo a img {height: 24px}
        #header .menu {lefT: 3%}
        #header .menu button img {width: 30px}
        #header .t_incall {right: 3%}
        #header .t_incall img {height: auto; width: 100px}
        body.fixed #header {line-height: 80px;}

        .text-wrap h2 {font-size: 60px !important}

        #brand .img-wrap {text-align: center}
        #heaguk .fix_float_img {display: none}
        #product .img-wrap {text-align: center}
        #product .img-wrap img {width: 100%}

        #bottom_dbform {margin-bottom: 100px}
    
	    #db_form .input_form dl {width: 100%}
        #db_form .input_form dl dd input {width: 100%}
        #db_form .input_form dl dd .s_btn {width: 100%}
		#db_form .send_wrap .checkbox {margin-top: 10px ; display:inline-block}
		#db_form .send_wrap .checkbox a {font-size: 11px; color: #fff}


        #footer-wrap {padding: 50px 10px}
        .address p {font-size: 11px}

        #main_lastest .bx_left {width: 40%}
        #main_lastest .bx_right {padding-left: 41%}
        .pic_lt .lt_slide .lt_slide_item a .stars {display: none}

    }

    @media screen and (max-width: 430px) {
        #header .t_incall {top: 25%}
        .t_incall a {width: 40px; height: 40px; display: block; background: rgb(255, 82, 16); padding-top: 3%; border-radius: 50%; position: relative}
        .t_incall a:after {content: '\efe9'; font-family: 'remixicon'; position: absolute; top: 0; left: 0; line-height: 40px; text-align: center; width: 100%; color: #fff; font-size: 23px}
        .t_incall a img {display: none}


        .navigation ul li a {font-size: 24px; padding: 5% 0}
        .main_textbox {padding: 0 50px}
        .main_textbox .copy {padding: 10px 0}
        .main_textbox .main_copy img {width: 100%}
        .main_textbox .top-left img {max-width: 95%}
        .main_textbox .bottom-right img {max-width: 65%}

        .text-wrap p {font-size: 16px; margin: 30px 0; word-break: keep-all;}
        .text-wrap p br {display: none;}
        .text-wrap h2 {font-size: 40px !important}
        .text-wrap a img {height: 20px}

        #brand {padding: 100px 0}
        #brand .spin_text {bottom: unset; top: 30%;  margin: -74px 30px 0 0; width: 150px; height: 150px}

        #heaguk .text-wrap p br {display: none}
        #heaguk .fix_bg_area {height: 400px; background: url('../img/main/section02_img_mo.jpg') center no-repeat; background-size: auto 100%}

        #product {padding: 100px 0 0 0}
        #product .text-wrap p br {display: block}

        .product .btn_wrap {margin-top: -60px; padding-bottom: 30px} 
        .product .btn_wrap #opengraph {font-size: 14px}

        #bottom_dbform .right_box {padding: 30px 30px 0 30px}
        .db_form dl {line-height: 50px}
        .db_form dl dt {font-size: 18px}
        .db_form dl dd input {font-size: 18px}
        .db_form dl.gender dd .s_btn > div {font-size: 18px}

        #footer-wrap {padding: 30px 10px}

        #main_lastest {margin: 100px auto 0}
        #main_lastest .bx_left {width: 100%; height: auto; position: unset; margin-bottom: 20px; background: #f7f7f7;  padding: 30px}
        #main_lastest .bx_left h2 {font-size: 48px; margin: 0; display: inline-block; vertical-align: middle; margin-right: 10px}
        #main_lastest .bx_left img {   }
        #main_lastest .bx_left p {display: none}
	.star-container { top:10px;}
        #main_lastest .bx_right {padding-left: 0}

    }