@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url("https://use.typekit.net/zqf5req.css");

@font-face {
    font-family: 'InkLipquid';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.inkfont{font-family: 'InkLipquid';}
.prefont{font-family: 'Pretendard', sans-serif;}
.pfont{font-family: omnigothic, sans-serif;}


html {position: relative; height: 100%; min-height: 100%; margin: 0; -webkit-text-size-adjust:none; scroll-behavior: smooth;}
body {position: relative; width: 100%; height: auto; min-height: 100%; font-family: 'Pretendard', sans-serif; overflow-y: auto; overflow-x: hidden; letter-spacing: -0.5px; color:#222; word-break:keep-all;}
*, *::before, *::after {padding:0; margin:0; box-sizing: border-box;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent; word-break:keep-all; color: #222}


input,button,textarea,select{font-family: 'Pretendard', sans-serif;color:#222; word-break:keep-all;}
ul {list-style-type: none; padding-inline-start: 0;}
a {text-decoration: none;}
table{padding:0; border:0; border-spacing:0px; border-collapse:collapse;}
th, td{padding:0;}
button {border: none; background:none; cursor: pointer;}
input:focus, select:focus, option:focus, textarea:focus, button:focus{outline: none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
textarea:focus {outline:none;}

pre{font-family: 'Pretendard', sans-serif;}

.image100 {display: flex;}
.image100 img {width: 100%;}
.container {overflow: hidden; padding-bottom: 200px;}
.section {position: relative; background-color: #fff; z-index: 2;}
.contents_wrapper {width: 100%; max-width: 1432px; padding: 0 16px; margin: 0 auto; position: relative;}
.txt_block span {display: block;}

.hidden {display: none;}
input {height: 50px; border-radius: 0px; border: 1px solid #fff; padding: 0 15px; font-size: 16px; width: 100%; line-height: 40px; flex: 1}
input::placeholder {color:#b2b2b2;}
input:focus, textarea:focus {border: 1px solid #333;}
textarea {height: 130px; border-radius: 5px; border: 2px solid #e6e6e6; padding: 18px 28px; font-size: 16px; width: 100%; resize: none;}
textarea::placeholder {color:#b2b2b2;}

div::-webkit-scrollbar {width:18px; height: 3px;}
div::-webkit-scrollbar-thumb {background-color: #e1e1e1; background-clip : padding-box; border: 5px solid transparent;}
div::-webkit-scrollbar-track {background:none;}

input[type="checkbox"]{display: inline-block; width: 20px; height: 20px; border: 1px solid #dfdfdf; border-radius: 5px; flex: none}

.inner{max-width: 1200px; margin: 0 auto; width: 1200px}



/** header **/


header{
	position: sticky; top:0 ; left: 0;  background: #322f2f;
	width: 100%; padding: 13px 0; z-index: 9999
}

header .inner{display: flex; justify-content:space-between; align-items: center}

.navare{display: flex; gap:45px; align-items: center}
.navare ul{display: flex; gap:45px; align-items: center}
.navare a{color: #fff; font-size: 22px; line-height: 50px; font-weight: 400; align-items: center;}

.navare .telbtn{display: flex; gap:8px; height: 45px; border-radius: 50px; background: #b01123; padding: 0 25px}
.navare .telbtn span{color: #fff; font-size: 22px; line-height: 50px; font-weight: 400}
.navare .telbtn b{color: #fff; font-size: 26px; line-height: 50px; font-weight: 600}

/** footer **/

.floating_bottom{padding: 30px 0; background: #b01123; position: sticky; bottom: 0; left: 0; width: 100%; z-index: 9998}

.floating_bottom.nofloating{position: relative; background: #241d1d}

.floating_bottom.nofloating .btn_are, .floating_bottom.nofloating .btn_are button{background: #b01123}


.floating_bottom .inner{display: flex; gap:90px; justify-content: space-between}
.floating_bottom .form_are{width: calc(100% - 360px)}
.floating_bottom .form_are ul{display: flex; flex-wrap: wrap; gap:15px}
.floating_bottom .form_are ul li{display: flex; align-items: center; width: calc(50% - 7.5px)}
.floating_bottom .form_are ul li:last-child{width: 100%}
.floating_bottom .form_are ul li p{width: 90px; color: #fff; font-size: 22px; }
.floating_bottom .form_are ul li span{color: #fff; padding: 0 8px}

.floating_bottom .btn_are{width: 360px; background: #171414; display: flex; align-items: center; border-radius: 8px}
.floating_bottom .btn_are button{color: #fff; font-size: 34px; font-weight: 500; padding: 40px 20px; border-radius: 8px; background: #171414; width: 100% }

.floating_bottom .agree{    padding-left: 90px;
    margin-top: 15px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    flex-direction: column;}
    
.floating_bottom .agree .flex_gree{display: flex; gap:10px; align-items: center;margin-top: 10px}
.floating_bottom .agree .flex_gree a{background: #333; color: #fff; padding:0 10px; font-size: 14px; line-height: 30px}

.floating_bottom .agree input{}
.floating_bottom .agree span{font-size: 18px; color: #fff; }
.floating_bottom .agree span a{color: #fff}

.floating_bottom .point_agree{position: relative; right: 0; top: 0; color: #fff; font-size: 14px; font-weight: 300; text-align: right; width: 100%}


.floating_bottom .title{text-align: center; color: #fff; margin-bottom: 33px}
.floating_bottom .title p{font-size: 26px; color: #fff; font-weight: 300; line-height: 35px}
.floating_bottom .title h2{font-size: 36px; font-weight: 500; color: #fff; line-height: 55px}

/*240611*/

.new_floating_bottom{position: fixed; z-index: 9999; right: 20px; top: 50%; width: 250px;
 background: #b01123; border-radius: 20px; transform: translateY(-50%); padding: 20px}


.new_floating_bottom h2{font-size: 20px; font-weight: 300; color: #fff; text-align: center}
.new_floating_bottom h2 b{color: #fff; font-weight: 500}

.new_floating_bottom .form_are li{display: flex; margin-top: 15px}
.new_floating_bottom .form_are li p{color: #fff; font-size: 18px; width: 72px}
.new_floating_bottom .form_are li input{height: 30px; width: 100%; flex:1; box-sizing: border-box}



.new_floating_bottom .inner{width: 100%}

.new_floating_bottom .flex_gree{margin-top: 15px}
.new_floating_bottom .flex_gree span{color: #fff; font-size: 14px; color: #fff}

.new_floating_bottom .are_box{display: flex; gap:5px}
.new_floating_bottom .are_box + .are_box{margin-top: 5px}

.new_floating_bottom .btn-example{color: #fff; font-size: 13px; background: #333; text-align: center; display: block; padding: 0 2px; line-height: 30px; margin-top: 15px}

.new_floating_bottom .btn_are{text-align: center; margin-top: 5px}
.new_floating_bottom .btn_are button{color: #fff; font-size: 21px; background: #171414; line-height: 50px; display: block; width: 100%; font-weight: bold}

/** main **/

.banner{background: url(../images/banner/bg.png); background-size: cover; background-position: center; height: 635px; display: flex; align-items: center; justify-content: flex-start}


.banner h2{font-size: 60px; color: #fff; font-weight: 300}
.banner h2 b{font-size: 70px; font-weight: 600;  display: block; 
 background: linear-gradient(to right top, #e2c038, #fadd69);
    color: transparent;
    -webkit-background-clip: text}

.banner p{color: #fff; font-size: 40px; line-height: 48px; font-weight: 500; margin-top: 35px}
.banner p span{display: block; font-size: 30px; font-weight: 200; color: #fff; line-height: 48px}


.video{padding: 40px 0; background: url(../images/video/bg.png); background-size: cover}
.video .inner{max-width: 930px;}


.video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
}

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




.sagunja{ background: url(../images/sagunja/bg.png); 
	background-size: cover; padding: 120px 0; text-align: center}

.sagunja h1{color: #fff; font-size: 70px; font-weight: 500; line-height: 93px}
.sagunja h2{font-size: 34px; font-weight: 400; color: #fff; position: relative; }
.sagunja h2 b{color: #e3c13b; font-weight: 500; display: inline-block; position: relative}
.sagunja h2 span{position: absolute; display: block; left: 0; bottom: -15px; color: #9d9fa2; font-weight: 400; font-size: 12px;}
.sagunja .line{margin:  15px auto 30px; width: 90px; height: 1px ; background: #fff}
.sagunja p{font-size: 28px; line-height: 44px; color: #fff; font-weight: 300}

.sagunja h2 + h2{margin-top: 32px}




.step9{padding: 120px 0;background: #fff}
.step9 .text{text-align: center}
.step9 .text h2{color: #171414; font-size: 52px; font-weight: 500; color: #171414}
.step9 .text h2 b{color:#b01123; font-weight: 500 }
.step9 .text p{font-size: 28px; line-height: 44px; color: #171414; font-weight: 300; margin-top: 25px}


.last_info{padding: 100px 0;background: #fafafa}
.last_info .text{text-align: center; margin-bottom: 90px}
.last_info .text h2{color: #171414; font-size: 52px; font-weight: 500; color: #171414}
.last_info .text h2 b{color:#b01123; font-weight: 500 }
.last_info .text p{font-size: 28px; line-height: 44px; color: #171414; font-weight: 300; margin-top: 25px}


.instep{margin-top: 85px; display: flex; gap:30px; flex-wrap: wrap; justify-content: center}


.check_point{padding: 40px 0; background: url(../images/point/bg.png); 
	background-size: cover; padding: 120px 0; text-align: center; background-position: center;}


.check_point .inner{display: flex; justify-content: flex-end}

.check_point .tit{text-align: center}
.check_point .tit h2{color: #000; font-size: 40px; font-weight: 500;line-height: 70px}
.check_point .tit h2 span{color: #b01123; font-weight: 500; left: -.5; font-size: 58px}


.check_point .info_are{max-width: 800px;}

.box_are{margin-top: 45px}
.box_are .box{padding:35px; background: rgba(255,255,255,.95); text-align: left; display: flex; align-items: center; justify-content: flex-start; gap:20px}
.box_are .box h2{font-size: 36px; font-weight: 500; line-height: 50px; color: #000}
.box_are .box h2 span{color: #b01123}

.box_are .box p{color: #000; font-size: 22px; line-height: 34px; letter-spacing: -1px; font-weight: 400}
.box_are .box h2 + p{margin-top: 15px}

.box_are .box + .box{margin-top: 25px}


.point_three{padding:100px 0; }
.point_three h2{color: #241d1d; font-size: 52px; font-weight: 500; line-height: 65px}
.point_three .img_flex{display: flex; align-items: flex-start;gap:20px; margin-top: 35px }

.point_three .img_flex .w850{width: 854px; background: url(../images/three/04.png); background-size: 854px 316px; background-repeat: no-repeat; height: 316px}
.point_three .img_flex .aniimg{width: 0; overflow: hidden}

.show .img_flex .aniimg{width: 100%; transition-duration: 1s}

.boxshadow{box-shadow: 1px 1px 15px rgba(0,0,0,0.2)}

.point_three_bg{background: #902227; padding: 100px 0; text-align: center}

.point_three_bg p {font-size: 34px; font-weight: 300; color: #fff; line-height: 50px}
.point_three_bg h2{font-size: 52px; line-height: 80px; font-weight: 500; color: #fff}
.point_three_bg img{margin-top: 30px; margin-bottom: 30px}
.point_three_bg .box{padding: 30px; background: #fff}
.point_three_bg .box p{font-size: 34px; font-weight: 300; color: #000}
.point_three_bg .box h2{font-size: 40px; line-height: 50px; color: #000; font-weight: 500}
.point_three_bg .box h2 b{color: #b01123; font-weight: 500}

.sung01{padding: 100px 0; background: url(../images/sung01/bg.jpg); background-size: cover; text-align: center}
.sung01 .inner{max-width: 1265px; width: 1265px}
.sung01 img{display: block; margin: 0 auto}
.sung01 .book{display:flex; flex-direction:column; align-content:center; justify-content:flex-start; position:relative;}
.sung01 .book .bottom{display:block; position:absolute; top:78px; transition:top 1s cubic-bezier(0.42, 0, 0.29, 1.04) 0s;}
.sung01 .book .mid{overflow:hidden; clip-path:inset(0 0 100% 0); transition:1s cubic-bezier(0.42, 0, 0.29, 1.04) 0s;}
.sung01.show .book .mid{margin-top:-1px; clip-path:inset(0 0 0 0); transition-delay:0.4s;}
.sung01.show .book .bottom{top:100%; transition-delay:0.4s;}

.sung01_2{position:relative; max-width:1200px; box-sizing:border-box; margin:160px auto 0; padding:80px 60px; background:#fff;}
.sung01_2 h2{padding-bottom:30px; border-bottom:1px solid #c0c0c0; font-size:40px; font-weight:300;}
.sung01_2 .inr{display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; padding:60px 0 100px;}
.sung01_2 .box_chart{flex:none; position:relative; width:569px;}
.sung01_2 [data-soungChart]{display:block; position:absolute; transition:0.5s linear 0s;}
.sung01_2 .box_chart [data-soungChart="01"]{opacity:0;}
.sung01_2 .box_chart [data-soungChart="02"]{clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
.sung01_2 .box_chart.show [data-soungChart="01"]{opacity:1;}
.sung01_2 .box_chart.show [data-soungChart="02"]{clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%); transition-duration:1.2s; transition-delay:0.3s}
.sung01_2 .box_chart_info{flex:auto; padding-left:20px; text-align:left; font-size:22px;}
.sung01_2 .box_chart_info ul li{word-break:keep-all;}
.sung01_2 .box_chart_info ul li strong{display:block; margin-top:10px; margin-bottom:5px;}
.sung01_2 .box_chart_info ul li p{line-height:1.6em;}
.sung01_2 .box_chart_info > ul > li > ul > li{margin-bottom:7px;}
.sung01_2 .box_chart_result p{font-size:30px; line-height:1.5em;}
.sung01_2 .box_chart_result span{display:block; margin-top:15px; color:#6e6e6e; font-size:20px;}


.ingredient{padding: 100px 0; background: #fcfcfc}

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

.ing_text{text-align: left}
.ing_text.center{text-align: center}

.ing_text .tag{height: 50px; border: 1px solid #b01123; line-height: 50px; color: #aa050f; font-size: 24px; font-weight: 500; border-radius: 50px; display: inline-block; padding: 0 25px; text-transform: uppercase}
.ing_text h1{color: #000; font-size: 52px; line-height: 70px; font-weight: 500; margin: 30px 0 0}
.ing_text h2{color: #000; font-size: 46px; line-height: 55px; font-weight: 500}
.ing_text h3{color: #000; font-size: 30px; line-height: 46px; font-weight: 500; margin: 20px 0 0; letter-spacing: -1px}
.ing_text h3 b{color: #b01123; font-weight: 500}
.ing_text p{font-size: 24px; line-height: 40px; color: #000; font-weight: 400; margin: 20px 0 0; letter-spacing: -1px}


.ingredient .box{margin-top: 100px; background: #fff; padding: 55px; text-align: center}
.ingredient .box h2{font-size: 40px; font-weight: 500; color: #000; line-height: 66px}
.ingredient .box p{color: #555555; font-size: 24px; line-height: 35px;}
.ingredient .box p.right_text{text-align: right; margin-top: 55px; font-size: 20px}

.ingredient .box ul{display: flex; align-items:flex-start; justify-content: center; margin-top: 50px}

.ingredient .box ul li{text-align: center; flex: 1; padding: 0 80px; }
.ingredient .box ul li + li{border-left: 1px solid #ddd}
.ingredient .box ul li p{font-size: 21px; line-height: 29px; color: #000000}

.zn{padding: 100px 0 ;background: url(../images/ingredient/bg.png); background-size: cover; }

.center_img{text-align: center; margin-top: 60px}

.information{padding: 100px 0 ;background: url(../images/info/bg.png); background-size: cover; }

.information .info_top{display: flex; }

.information .info_top .text_are{ margin-left: -100px; text-align: left}

.information .info_top .text_are .flex_max{display: flex; gap:20px; align-items: center; margin: 30px 0}

.information .info_top .text_are .flex_max img{max-width: 300px}

.information .info_top .text_are .flex_max ul li{display: flex; gap:15px}
.information .info_top .text_are .flex_max ul li + li{margin-top: 15px;}
.information .info_top .text_are .flex_max ul li span{border: 1px solid #fff; border-radius: 50px; padding: 0 10px; line-height: 35px; font-size: 22px; color: #fff; height: 35px; display: block}

.information .info_top .text_are .flex_max ul li p{font-size: 22px; color: #fff; line-height: 40px}

.information .box_info{padding: 35px; background: #fff; }
.information .box_info .tit{display: flex; gap:40px; align-items: center}
.information .box_info .tit .line{padding: 30px; 
	text-align: center; border: 1px solid #aa050f; display: flex; align-items: center}

.information .box_info .tit .no3{display: flex; gap:40px; align-items: center}


.information .box_info p{font-size: 22px; line-height: 34px; font-weight: 400; color: #aa050f; margin-top: 35px; text-align: center}



.company{padding: 100px 0 0 0; }
.company .box{padding: 55px; box-shadow: 1px 5px 15px rgba(0,0,0,0.3); display: flex; 
gap:0px; justify-content: space-between; align-items: flex-start; position: relative; z-index: 2; background: #fff; 
    flex-direction: column;}
.company .box h2{color: #000; font-size: 42px; line-height: 66px; font-weight: 500}
.company .box p{color: #000; font-weight: 400; font-size: 28px; line-height: 44px; margin-top: 15px}

.logo_flex{margin-top: 50px; display: flex; gap:75px; align-items: center; position: relative; z-index: 2}
.logo_flex p{color: #000; font-size: 28px; line-height: 42px;}

.companyimg{margin-top: -400px; width: 100%; display: block}


.do_info{padding: 100px 0; background: #121b36}
.do_info .do_title{text-align: center;margin-bottom: 50px;  }
.do_info .do_title .rod{color: #fff; font-size: 34px; font-weight: 300; line-height: 65px; height: 65px; padding: 0 50px; background: #263256; border-radius: 50px; display: inline-block; margin-bottom: 30px}

.do_info .do_title h2{color: #fff; font-size: 50px; line-height: 65px; font-weight: 500; }
.do_info .do_title p{font-size:26px; font-weight: 300; color: #fff; line-height: 44px; margin-top: 20px }

.do_info .area_do_chart{display:flex; flex-flow:row nowrap; justify-content:center; align-items:stretch; margin-left:-24px;}
.do_info .area_do_chart h3{position:absolute; top:0px; width:100%; box-sizing:border-box; padding:40px 10px 0; font-size:35px; text-align:center; font-weight:600;}
.do_info .area_do_chart > div{position:relative; width:calc(100% / 2 - 24px); min-height:200px; box-sizing:border-box; margin-left:24px; background:#f6f6f6;}
.do_info .area_do_chart > div span{display:block;}
.do_info .area_do_chart img{max-width:100%;}
.do_info .area_do_chart [data-doAni]{display:block; position:absolute; top:0px;}
.do_info .area_do_chart .box_do_chart01 [data-doani="01"]{clip-path:inset(0 100% 0 0); transition:1s ease-in-out 0s;}
.do_info .area_do_chart .box_do_chart01.show [data-doani="01"]{clip-path:inset(0 0 0 0); transition-delay:1.7s;}
.do_info .area_do_chart .box_do_chart01 [data-doani="02"]{z-index:2; opacity:0; transition:opacity 0.5s ease 0s;}
.do_info .area_do_chart .box_do_chart01.show [data-doani="02"]{opacity:1; transition-delay:1.5s;}
.do_info .area_do_chart .box_do_chart01 [data-doani="03"]{overflow:hidden;}
.do_info .area_do_chart .box_do_chart01 [data-doani="03"] img{display:block; transform:translateY(100%); transition:1.5s ease-in-out 0s;}
.do_info .area_do_chart .box_do_chart01.show [data-doani="03"] img{transform:translateY(0);}

.do_info .area_do_chart .box_do_chart02 [data-doAni="01"]{overflow:hidden; z-index:10; top:135px; left:50%; width:370px; height:370px; border-radius:100%; transform:translateX(-50%);}
.do_info .area_do_chart .box_do_chart02 [data-doAni="01"] span{overflow:hidden; display:block; position:absolute; top:0px; width:50%; height:100%;}
.do_info .area_do_chart .box_do_chart02 [data-doAni="01"] span:before{content:''; display:block; width:100%; height:100%; background:#f6f6f6;}
.do_info .area_do_chart .box_do_chart02 [data-doAni="01"] .left{left:0px;}
.do_info .area_do_chart .box_do_chart02 [data-doAni="01"] .left:before{transform-origin:100% 50%;}
.do_info .area_do_chart .box_do_chart02.show [data-doAni="01"] .left:before{animation:circle-show 0.8s linear 0.8s 1 forwards;}
.do_info .area_do_chart .box_do_chart02 [data-doAni="01"] .right{right:0px;}
.do_info .area_do_chart .box_do_chart02 [data-doAni="01"] .right:before{transform-origin:0% 50%;}
.do_info .area_do_chart .box_do_chart02.show [data-doAni="01"] .right:before{animation:circle-show 0.8s linear 0s 1 forwards;}
.do_info .area_do_chart .box_do_chart02 [data-doAni="02"]{opacity:0; transition:opacity 0.5s ease 0s;}
.do_info .area_do_chart .box_do_chart02.show [data-doani="02"]{opacity:1; transition-delay:1.6s;}

@keyframes circle-show{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(180deg);}
}

.img_shd.flex{display: flex; gap:30px; justify-content: space-between}
.img_shd img{box-shadow: 1px 5px 15px rgba(0,0,0,0.3)}

.do_5{display: flex; gap:20px; align-items: flex-start; justify-content: center; text-align: center}
.do_5 p{font-size: 26px; line-height: 40px; font-weight: 300; margin-top: 10px; color: #fff}

.do_last{display: flex; justify-content: space-between; align-items: center; margin-top: 40px}
.do_last p{font-size: 24px; line-height: 40px; color: #787878}

.emt100{height: 100px}



.fadeinfinite {
    animation-duration: .8s;
  animation-name: fadeinfinite;
  animation-iteration-count: infinite;
	}

@keyframes fadeinfinite {
    0% {opacity:0;}
    50% {opacity:1;}
	100% {opacity:0;}
}

.colorchage {
    animation-duration: .8s;
  animation-name: colorchage;
  animation-iteration-count: infinite;
	}

@keyframes colorchage {
    0% {color: #e3c13b}
    100% {opacity:#fff;}

}


.pc{}
.mo{display: none !important}


.floating_bottom.mo{padding: 0}
.mobile_floatting{display: flex;}
.mobile_floatting a{width: 50%; padding: 18px; display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;}
.mobile_floatting a + a{border-left: 1px solid #c24856; }
.mobile_floatting a span{color: #fff; font-size: 18px; font-weight: 500}




.pop-layer .pop-container {
  padding:0;

}

.pop-layer p.ctxt {
  color: #666;
  line-height: 25px;
}

.pop-layer .btn-r {
  width: 100%;
  margin: 10px 0 20px;
  padding-top: 10px;
  border-top: 1px solid #DDD;
  text-align: right;

}

.pop-layer {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 800px;
  height: auto;
  background-color: #fff;
   z-index: 9999;
    transform: translate(-50%, -50%);
    width: 80%;
    max-height: 70%;
    border: 1px solid #ddd;
    overflow-y: auto;
}

.dim-layer {
  display: none;
  position: fixed;
  _position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.dim-layer .dimBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}

.dim-layer .pop-layer {
  display: block;
}

a.btn-layerClose {
  display: inline-block;
  height: 25px;
  padding: 0 14px 0;
  border: 1px solid #171414;
  background-color: #171414;
  font-size: 13px;
  color: #fff;
  line-height: 25px;
}

a.btn-layerClose:hover {
  border: 1px solid #171414;
  background-color: #171414;
  color: #fff;
}




.prebg{background: url(../images/prebg.jpg); background-size: cover; background-position: center; height: 100px;    display: flex;
    align-items: center;
    justify-content: center; }
.prebg h2{color: #fff; font-size: 22px; text-align: center}

.pre_txt{padding: 35px 20px;}
.pre_txt .big{display: flex; gap:5px; color: #b01123; font-size: 20px;}
.dotbox{margin-top: 15px; padding: 15px;     border: 1px dashed #7f7f7f; border-radius: 15px}

.pre_txt p{font-size: 15px; color: #555555}
.pre_txt h3{font-size: 18px; color: #333}

.pre_txt .sub_big{font-weight: bold; }

.emt20{height: 20px}
.emt10{height: 10px}
.pre_list{margin-top: 5px; padding-left: 10px}
.pre_list li{font-size: 15px; color: #999; }
.pre_list li + li{margin-top: 5px}


.pre_table{}
.pre_table table{width: 100%; border-top: 1px solid #b01123}
.pre_table th{text-align: center; background: #f8f8f8; font-size: 14px; color: #222; border-bottom: 1px solid #dcdcdc; padding: 8px}
.pre_table td{text-align: left; background: #fff; font-size: 14px;; color: #222;
 border-bottom: 1px solid #dcdcdc; padding: 8px; vertical-align: middle; line-height: 20px; word-break: keep-all}
.pre_table td.txtc{text-align: center; white-space: nowrap;}
.pre_table th + th{border-left: 1px solid #dcdcdc}
.pre_table td + td{border-left: 1px solid #dcdcdc}


.pre_line{margin: 40px 0; height: 1px; width: 100%; background: #dcdcdc}



@media (max-width: 1700px) {
  
}




@media (max-width: 1600px) {
 

}



@media (max-width: 1440px) { 
  



}

@media screen and (max-width:1240px){
	.do_info .area_do_chart .box_do_chart02 [data-doAni="01"]{top:10vw/* 135px */; width:30vw/* 370px */; height:30vw/* 370px */;}
}

@media (max-width: 1200px) { 
	img{max-width: 100%}
  .inner{padding: 0 25px; width: 100%}
  
  .sung01 .inner {
    max-width: 1265px;
    width: 100%;}
    .sung01 .book .mid{}    
	.sung01 .book .bottom{top:5vw/* 71px */;}

	.sung01_2{margin-top:13.333vw/* 160px */;}
	.sung01_2 .inr{flex-wrap:wrap;}
	.sung01_2 .box_chart_result{text-align:left;}
	.sung01_2 .box_chart_result p{font-size:2.500vw/* 30px */;}
	.sung01_2 .box_chart_info{padding-left:0px;}

	.do_5 p{font-size:20px; line-height:1.5em;}

}



@media (max-width: 1024px) { 
	
	.point_three .img_flex .w850{width: 854px; background: url(../images/three/04.png); background-size: 854px 316px; background-repeat: no-repeat; height: 316px}
	
	.point_three .img_flex .aniimg{width: 0%; overflow: hidden; height: 316px}
	.point_three .img_flex .aniimg img{max-width: none; }

	.show .img_flex .aniimg{width: 100%; transition-duration: 2s}

  
  .navare ul{display: none}
  .navare .telbtn{padding: 0 15px; line-height: 45px; font-size: 18px; }
  .navare .telbtn.mo{padding: 0 25px}
	.navare .telbtn span{display: none}
	.navare .telbtn b{display: none}
	
	
	.banner {
   background-position: 60% 50%;
    height: auto;
    padding: 20px 0;
    min-height: 270px;
    align-items: flex-start;}
    
	.banner h2{font-size: 16px; line-height: 25px}
	.banner h2 b{font-size: 30px; line-height: 40px;}
	.banner p{font-size: 20px; line-height: 25px; margin-top: 10px}
	.banner p span{font-size: 16px; line-height: 25px}
	
	
	.floating_bottom{padding: 20px 0}
	
	.floating_bottom .form_are ul li p{display: none}
	.floating_bottom .inner{gap:10px}
	
	input {
    height: 40px;
    border-radius: 0px;
    border: 1px solid #fff;
    padding: 0 8px;
    font-size: 14px;
    width: 100%;
    line-height: 40px;
    flex: 1;}
	
	
	
	.floating_bottom .inner {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-direction: column;}
    
    .floating_bottom .form_are {
    width: 100%;}
    
    
    .floating_bottom .btn_are {
    width: 100%;
    background: #171414;
    display: flex;
    align-items: center;
    border-radius: 0;}
    
    .floating_bottom .btn_are button {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 8px;
    border-radius: 0;
    background: #171414;
    width: 100%;}
    
    .floating_bottom .agree{padding-left: 0; display: block}
    .floating_bottom .agree span {
    font-size: 14px;
    color: #fff;}
    
    .floating_bottom .point_agree{position: relative}
    
    .sagunja{padding: 80px 0}
    
    .sagunja h1{font-size: 30px; line-height: 45px}
    .sagunja h2{font-size: 20px; line-height: 35px}
    
    .sagunja h2 span {
    position: relative;
    display: block;
    left: 0;
    color: #9d9fa2;
    font-weight: 400;
    font-size: 12px;}
    
    .sagunja p{font-size: 16px; line-height: 25px; font-weight: 400}
    
    
    .step9 .text h2{font-size: 30px; line-height: 45px}
    .step9 .text p{font-size: 16px; line-height: 25px; font-weight: 400}
    
    
    .last_info{padding: 90px 0;background: #fafafa}
    .last_info .text{margin-bottom: 70px}
.last_info .text h2{font-size: 30px; line-height: 45px}
.last_info .text p{font-size: 16px; line-height: 25px; font-weight: 400}
    
    
    .floating_bottom.nofloating{padding: 50px 0}
    
    .floating_bottom .title p{font-size: 16px; line-height: 25px; font-weight: 400}
    
    .floating_bottom .title h2{font-size: 20px; line-height: 35px}
    
    .check_point .tit h2{font-size: 30px; line-height: 45px}
    .check_point .tit h2 span{font-size: 30px; line-height: 45px}
    
    .box_are .box{flex-direction: column;}
    
    .box_are .box h2{font-size: 20px; line-height: 35px; font-weight: 500}
    
    .box_are .box p{font-size: 16px; line-height: 25px; font-weight: 400}
    
    .point_three h2{font-size: 30px; line-height: 45px}
    
    .step9{padding: 80px 0}
    .check_point{padding: 80px 0}
    .point_three{padding: 80px 0}
    
    
    .point_three_bg{padding: 80px 0}
    .instep{gap:10px}
    .instep img{width: calc(50% - 10px)}
    
    .point_three .img_flex{flex-direction: column; align-items: center;}
    
    
    .point_three_bg p{font-size: 16px; line-height: 25px; font-weight: 400}
    .point_three_bg h2{font-size: 30px; line-height: 45px}
    
    .sung01{padding: 80px 0}
	.sung01_2 h2{font-size:30px;}
	.sung01_2 .box_chart_result span{font-size:15px;}
	.sung01_2 .box_chart_info{font-size:18px;}
    
    .point_three_bg .box p{font-size: 16px; line-height: 25px; font-weight: 400}
    .point_three_bg .box h2{font-size: 20px; line-height: 30px; font-weight: 500}
    
    
    .flex_ing {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-content: center;
    align-items: center; gap:20px}
    
    .ing_text {
    text-align: center;}
    
    
    .ing_text .tag {
    height: 30px;
    border: 1px solid #b01123;
    line-height: 30px;
    color: #aa050f;
    font-size: 14px;
    font-weight: 500;
    border-radius: 50px;
    display: inline-block;
    padding: 0 10px;
    text-transform: uppercase;}
    
    .ing_text h1, .ing_text h2{font-size: 30px; line-height: 45px}
    .ing_text h3{font-size: 20px; line-height: 30px; font-weight: 500}
    .ing_text p{font-size: 16px; line-height: 25px; font-weight: 400}
    
    
    .ingredient .box h2{font-size: 20px; line-height: 30px; font-weight: 500}
    .ingredient .box p{font-size: 16px; line-height: 25px; font-weight: 400}
    
    .ingredient .box ul {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 50px;gap:10px}
    
    .ingredient .box ul li + li {
    border-left: 0px solid #ddd;}
    
    
    .ingredient .box{padding: 25px}
    
    
    .ingredient .box ul li p{font-size: 16px; line-height: 22px; word-break: keep-all}
    .ingredient .box ul li p br{display: none}
    .ingredient .box p.right_text{text-align: center; font-size: 14px; line-height: 20px}




.ingredient, .zn{padding: 80px 0}


.information .info_top {
    display: flex;
    flex-direction: column;}


.information .info_top .text_are {
    margin-left: 0;
    text-align: left;
}

.information .info_top .text_are .flex_max {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 30px 0;
    flex-direction: column;
}

.information .info_top .text_are .flex_max ul li {
    display: block;
}
.information .info_top .text_are .flex_max ul li span{font-size: 16px}
.information .info_top .text_are .flex_max ul li p{font-size: 16px; line-height: 22px; margin-top: 15px}

.information .box_info .tit {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: column;
}


.information .box_info .tit .no3 {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.information .box_info .tit .no3 img{width: calc(33% - 10px)}


.information .box_info p{font-size: 16px; line-height: 22px; margin-top: 15px}

.company .box {
    padding: 20px;
    gap: 20px;
    flex-direction: column;
}
.company .box h2{font-size: 20px; line-height: 30px; font-weight: 500}

.company .box p{font-size: 16px; line-height: 22px; }


.do_info .do_title .rod{font-size: 16px; line-height: 35px; height: 35px; padding: 0 10px}
.do_info .do_title h2{font-size: 30px; line-height: 45px}
.do_info .do_title p{font-size: 16px; line-height: 22px}
.do_info .area_do_chart h3{font-size:22px;}

.do_5{flex-direction: column;}

.do_5 p{font-size: 16px; line-height: 22px}

.do_5 .box{width: 100%}


.do_last {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    flex-direction: column;
}
.do_last p{font-size: 16px; line-height: 22px}

.img_shd.flex {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    flex-direction: column;
}

.flex_ing img{max-width: 60%}


.ingredient .box ul li {
    text-align: center;
    flex: auto;
    padding: 0 15px; width: 50%
}


  
    
    
    .companyimg{margin: 0}
    
    .logo_flex {
    margin-top: 50px;
    display: flex;
    gap: 35px;
    align-items: center;
    position: relative;
    z-index: 2;
    flex-direction: column;
}
    
    .logo_flex img{
    	    max-width: 200px;
    margin: 0 auto;

    }
    .logo_flex p{font-size: 16px; line-height: 22px; word-break: keep-all; margin-bottom: 50px}
    .logo_flex p br{display: none}

}

@media (max-width: 959px) { 
  

}



@media (max-width: 768px) {
	.sung01_2{padding:60px 20px;}
	.sung01_2 .box_chart_result p{font-size:20px; word-break:keep-all;}
	.sung01_2 .box_chart_result p br{display:none;}
	.sung01_2 .box_chart{width:100%; max-width:569px;}
	.sung01_2 .box_chart img{max-width:100%;}
	.sung01_2 .inr{padding-bottom:50px;}
     
     
    .point_three .img_flex .w850 {
    width: 718px;
    background-size: 718px 266px;
    height: 266px;} 
     
     .point_three .img_flex .aniimg {
    height: 266px;}
     
     .point_three .img_flex .aniimg img {
    max-width: none;
    height: 266px;}
   
   .do_info .area_do_chart h3{padding-top:20px;}
   .do_info .do_title p br{display:none;}
   
   
   .navare{gap:10px}
   
   .pc{display: none}
.mo{display: block !important}

img.logo{width: 80%}



}



@media (max-width: 640px) {
 
}

@media screen and (max-width: 580px){
	.do_info .area_do_chart{flex-wrap:wrap; margin-left:0px;}
	.do_info .area_do_chart > div{width:100%; margin-left:0px;}
	.do_info .area_do_chart .box_do_chart02{margin-top:30px;}
	.do_info .area_do_chart .box_do_chart02 [data-doAni="01"]{top:19.5vw/* 120px */; width:57vw/* 330px */; height:57vw/* 330px */;}
}



@media (max-width: 479px) {
	

	.sung01 .book{ margin: 0 auto;}
	.sung01.show .book .mid{margin: 0 auto }

	.sung01_2{padding:40px 20px;}
	.sung01_2 .box_chart_result p{font-size:18px;}
	.sung01_2 .box_chart_info{font-size:16px;}
	   
	   
	   .point_three .img_flex .w850 {
    width: 400px;
    background-size: 400px 148px;
    height: 148px;} 
     
     .point_three .img_flex .aniimg {
    height: 148px;}
     
     .point_three .img_flex .aniimg img {
    max-width: none;
    height: 148px;}
	   
 
}


@media (max-width: 320px){
	.sung01_2 h2{font-size:26px;}
	.do_info .area_do_chart h3{font-size:20px;}
}




@media (min-width: 1025px){
	.navare .telbtn span, .navare .telbtn b{animation-duration: .8s;
    animation-name: colorchage;
    animation-iteration-count: infinite;}
    
    .floating_bottom .btn_are button{animation-duration: .8s;
    animation-name: colorchage;
    animation-iteration-count: infinite;}
    
    
    .floating_bottom.nofloating .btn_are button{animation-duration: .8s;
    animation-name: none;
    animation-iteration-count: infinite;}
    
}