@charset "utf-8";

body *{box-sizing:border-box; word-break:keep-all;}

#header{border-bottom:1px solid #ebebeb;}
#content{padding-bottom:70px;}
#content > .inr{max-width:calc(1400px + 6%); margin:0 auto; padding:0 3%; width:100%; box-sizing:border-box;}
#content h2{margin-top:50px; margin-bottom:20px; font-size:35px; color:#111; font-weight:400; text-align:center; word-break:keep-all;}
@media screen and (max-width:1024px){
	#content h2{font-size:30px;}
}
@media screen and (max-width:767px){
	#content h2{font-size:25px;}
}
@media screen and (max-width:420px){
	#content{padding-bottom:40px;}
	#content h2{margin-top:30px; font-size:22px;}    
}

/* 브랜드스토리 */
.area_brand{box-sizing:border-box;}
.area_brand .intro{position:relative; padding:0 3%; width:100%; height:850px; background:url(../images/content/img_brand01.jpg)no-repeat center/cover; box-sizing:border-box;}
.area_brand .intro:before{content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:300px; background:linear-gradient(to top, #fff, rgba(255,255,255,0.8), rgba(255,255,255,0.3), rgba(255,255,255,0));}
.area_brand .intro .txt{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:0; z-index:1; width:100%; text-align:center;}
.area_brand .intro .txt h3{display:inline-block; font-size:0;}
.area_brand .intro .txt h3+h3{margin-left:30px;}
.area_brand .intro .txt h3 span{display:inline-block; font-size:80px; color:#fff; font-family:'InkLipquid'; font-weight:600; transform:translateY(60px); opacity:0;}
.area_brand .intro .txt h3:last-child span{font-size:120px;}
.area_brand .intro .txt h3 span.fadeup01{animation:fadeup 0.2s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup02{animation:fadeup 0.2s 0.1s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup03{animation:fadeup 0.2s 0.15s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup04{animation:fadeup 0.2s 0.2s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup05{animation:fadeup 0.2s 0.25s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup06{animation:fadeup 0.2s 0.3s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup07{animation:fadeup 0.2s 0.35s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup08{animation:fadeup 0.2s 0.4s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup09{animation:fadeup 0.2s 0.45s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup10{animation:fadeup 0.2s 0.5s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup11{animation:fadeup 0.2s 0.55s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup12{animation:fadeup 0.2s 0.6s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup13{animation:fadeup 0.2s 0.65s ease-in forwards;}
.area_brand .intro .txt h3 span.fadeup14{animation:fadeup 0.2s 0.7s ease-in forwards;}
.area_brand .intro .line{position:absolute; bottom:-200px; left:50%; transform:translateX(-50%); width:1px; height:400px; background:#f6b52b;}
.area_brand .intro .line:after{content:''; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:15px; height:15px; background:#f6b52b; border-radius:50%; box-shadow:0 0 20px rgba(255,201,90,0.9);}
@keyframes fadeup{100%{transform:translateY(0); opacity:1;}}
.area_brand .part0101{background:url(../images/content/img_brand02.jpg)no-repeat 60% 50%/cover; background-attachment:fixed;}
.area_brand .part0102{background:url(../images/content/img_brand03.jpg)no-repeat 60% 50%/cover; background-attachment:fixed;}
.area_brand .part01 .logo{background:#fff; padding-bottom:150px; border-bottom-left-radius:50% 200px; border-bottom-right-radius:50% 200px;}
.area_brand .part0101 .logo{padding-top:300px;}
.area_brand .part0102 .logo{padding-top:150px;}
.area_brand .part01 .logo span{display:block; margin:auto;}
.area_brand .part01 .logo span.logo01{margin-bottom:60px;}
.area_brand .part01 .logo span img{display:block; width:100%;}
.area_brand .part0101 .logo span.logo01{width:484px;}
.area_brand .part0101 .logo span.logo02{width:495px;}
.area_brand .part0102 .logo span.logo01{width:583px;}
.area_brand .part0102 .logo span.logo02{width:392px;}
.area_brand .part01 .naming{padding:150px 0; box-sizing:border-box; text-align:center;}
.area_brand .part01 .naming .word{display:flex; justify-content:space-between; align-items:center;}
.area_brand .part01 .naming .word img{height:17px;}
.area_brand .part01 .naming .word span{display:block; width:360px; height:360px; box-sizing:border-box; border-radius:50%; color:#fff; font-weight:500;}
.area_brand .part01 .naming .word span i{display:block; font-weight:bold;}
.area_brand .part0101 .naming span.word01{background:rgba(247,181,44,0.2);}
.area_brand .part0101 .naming span.word02{background:rgba(0,0,0,0.5); border:2px dashed #f7b52c;}
.area_brand .part0102 .naming span.word01{background:rgba(41,52,78,0.8);}
.area_brand .part0102 .naming span.word02{background:rgba(255,255,255,0.9); border:2px dashed #29344e;}
.area_brand .part01 .naming span.word01{padding-top:125px; font-size:25px;}
.area_brand .part01 .naming span.word01 i{margin-bottom:5px; font-size:40px;}
.area_brand .part01 .naming span.word02{padding-top:100px; font-size:40px;}
.area_brand .part01 .naming span.word02 i{font-size:60px;}
.area_brand .part0102 .naming span.word02{color:#29344e;}
.area_brand .part01 .naming p{margin-top:80px; font-size:18px; color:#fff; opacity:0.8;}
.area_brand .part01 .naming p+p{margin-top:20px;}
.area_brand .part > h3{margin:150px auto 50px; font-size:35px; color:#29344e; text-align:center;}
.area_brand .part > h3 em{display:block; opacity:0.6; font-size:25px;}
.area_brand .part02 p{font-size:20px; color:#444; text-align:center;}
.area_brand .part02 .table_wrap{display:flex; justify-content:space-between; margin:50px auto 80px;}
.area_brand .part02 table.table{border-top:0 !important; width:calc(100% / 2 - 20px);}
.area_brand .part02 table.table thead tr{border-bottom:none !important; text-align:center; color:#fff; font-size:18px; font-weight:500;}
.area_brand .part02 table.table tbody tr{border-bottom:1px dashed #ddd;}
.area_brand .part02 table.table tr td{border:none !important;}
#content table.table thead + tbody tr td{color:#444;}
.area_brand .part02 .list01{padding-bottom:40px; border-bottom:1px dashed #ddd;}
.area_brand .part02 .list02{padding-top:40px;}
.area_brand .part02 .list h3{position:relative; margin-bottom:20px; padding-left:15px; font-size:24px; color:#111;}
.area_brand .part02 .list h3:before{content:''; display:block; position:absolute; top:14px; left:0; width:7px; height:7px; border-radius:50%; background:#f7b52c;}
.area_brand .part02 .list ul li{position:relative; padding-left:18px; font-size:18px; color:#444;}
.area_brand .part02 .list ul li+li{margin-top:10px;}
.area_brand .part02 .list ul li:before{content:''; display:block; position:absolute; top:11px; left:0; width:8px; height:1px; background:#444;}

.area_brand .part03 .certi_list{display:flex; justify-content:center;}
.area_brand .part03 .certi_list li{width:300px; margin-bottom:2rem; border:1px solid #ddd;}
.area_brand .part03 .certi_list li+li{margin-left:40px;}
.area_brand .part03 .certi_list li img{width:100%;}

@media screen and (max-width:1400px){
    .area_brand .part01 .naming .word{justify-content:center;}
    .area_brand .part01 .naming .word span{width:260px; height:260px;}
    .area_brand .part01 .naming span.word01{padding-top:85px; font-size:22px;}
    .area_brand .part01 .naming span.word01 i{margin-bottom:2px; font-size:35px;}
    .area_brand .part01 .naming span.word02{padding-top:65px; font-size:32px;}
    .area_brand .part01 .naming span.word02 i{font-size:50px;}
    .area_brand .part01 .naming .word img{margin:0 20px; height:13px;}
}
@media screen and (max-width:1024px){
    .area_brand .part0101{background-attachment:scroll;}
    .area_brand .part0102{background-attachment:scroll;}
    .area_brand .intro{height:70vh;}
    .area_brand .intro .txt{margin-top:-60px;}
    .area_brand .intro .txt h3 span{font-size:50px;}
    .area_brand .intro .txt h3:last-child span{font-size:80px;}
    .area_brand .intro .line{bottom:-125px; height:250px;}
    .area_brand .intro .line:after{width:13px; height:13px;}
    .area_brand .part01 .logo{padding-bottom:100px; border-bottom-left-radius:50% 90px; border-bottom-right-radius:50% 90px;}
    .area_brand .part0101 .logo{padding-top:200px;}
    .area_brand .part01 .logo span.logo01{margin-bottom:50px;}
    .area_brand .part0101 .logo span.logo01{width:380px;}
    .area_brand .part0101 .logo span.logo02{width:400px;}
    .area_brand .part01 .naming{padding:100px 0;}
    .area_brand .part01 .naming .word span{width:180px; height:180px;}
    .area_brand .part01 .naming .word img{margin:0 12px; height:10px;}
    .area_brand .part01 .naming span.word01{padding-top:60px; font-size:18px;}
    .area_brand .part01 .naming span.word01 i{font-size:25px;}
    .area_brand .part01 .naming span.word02{padding-top:45px; font-size:25px;}
    .area_brand .part01 .naming span.word02 i{font-size:35px;}
    .area_brand .part01 .naming p{margin-top:50px; font-size:16px;}
    .area_brand .part01 .naming p+p{margin-top:15px;}
    .area_brand .part0102 .logo{padding-top:100px;}
    .area_brand .part0102 .logo span.logo01{width:450px;}
    .area_brand .part0102 .logo span.logo02{width:340px;}
    .area_brand .part02 .list01{padding-bottom:35px;}
    .area_brand .part02 .list02{padding-top:35px;}
    .area_brand .part > h3{margin:60px auto 40px; font-size:30px;}
    .area_brand .part > h3 em{font-size:22px;}
    .area_brand .part02 p{font-size:18px;}
    .area_brand .part02 .table_wrap{margin:40px auto 60px;}
    .area_brand .part02 table.table{width:calc(100% / 2 - 10px);}
    .area_brand .part02 table.table thead tr{font-size:16px;}
    #content table.table thead + tbody tr td{font-size:15px;}
    .area_brand .part02 .list h3{margin-bottom:16px; font-size:18px;}
    .area_brand .part02 .list h3:before{top:9px;}
    .area_brand .part02 .list ul li{padding-left:13px; font-size:16px;}
    .area_brand .part02 .list ul li:before{top:10px; width:6px;}
    .area_brand .part02 .list ul li+li{margin-top:8px;}
    .area_brand .part03 .certi_list{justify-content:space-between;}
    .area_brand .part03 .certi_list li{width:calc(100% / 4 - 10px);}
    .area_brand .part03 .certi_list li+li{margin-left:0;}
}
@media screen and (max-width:767px){
    .area_brand .intro{height:62vh;}
    .area_brand .intro:before{height:150px;}
    .area_brand .intro .txt h3 span{font-size:35px;}
    .area_brand .intro .txt h3:last-child span{font-size:52px;}
    .area_brand .intro .txt h3+h3{margin-left:15px;}
    .area_brand .intro .line{bottom:-60px; height:150px;}
    .area_brand .intro .line:after{width:11px; height:11px;}
    .area_brand .part01 .logo{padding-bottom:70px; border-bottom-left-radius:50% 50px; border-bottom-right-radius:50% 50px;}
    .area_brand .part01 .logo span.logo01{margin-bottom:30px; width:300px !important;}
    .area_brand .part01 .logo span.logo02{width:300px !important;}
    .area_brand .part01 .naming{padding:70px 0;}
    .area_brand .part01 .naming .word span{width:150px; height:150px;}
    .area_brand .part01 .naming .word span:first-child{margin-right:-20px;}
    .area_brand .part01 .naming .word span:last-child{margin-left:-20px;}
    .area_brand .part01 .naming span.word01{padding-top:50px; font-size:15px;}
    .area_brand .part01 .naming span.word01 i{font-size:20px; margin-bottom:0;}
    .area_brand .part01 .naming span.word02{position:relative; padding-top:40px; font-size:18px;}
    .area_brand .part01 .naming span.word02 i{font-size:25px;}
    .area_brand .part01 .naming .word img{display:none;}
    .area_brand .part01 .naming p{margin-top:35px; font-size:14px;}
    .area_brand .part01 .naming p+p{margin-top:12px;}
    .area_brand .part0101 .logo{padding-top:140px;}
    .area_brand .part0102 .logo{padding-top:70px;}
    .area_brand .part02 .list01{padding-bottom:30px;}
    .area_brand .part02 .list02{padding-top:30px;}
    .area_brand .part > h3{margin:70px auto 30px; font-size:24px;}
    .area_brand .part > h3 em{font-size:18px;}
    .area_brand .part02 p{font-size:16px;}
    .area_brand .part02 .table_wrap{margin:20px auto 40px;}
    #content table.table thead + tbody tr td{font-size:14px;}
    .area_brand .part02 .list h3{margin-bottom:12px; font-size:16px; padding-left:12px;}
    .area_brand .part02 .list h3:before{width:6px; height:6px;}
    .area_brand .part02 .list ul li{font-size:14px;}
    .area_brand .part02 .list ul li:before{top:9px;}
    .area_brand .part02 .list ul li+li{margin-top:6px;}
    .area_brand .part03{padding-bottom:70px;}
}
@media screen and (max-width:640px){
    .area_brand .part02 .table_wrap{display:block;}
    .area_brand .part02 table.table{width:100%;}
    .area_brand .part03 .certi_list{flex-wrap:wrap;}
    .area_brand .part03 .certi_list li{margin-bottom:10px; width:calc(100% / 2 - 5px);}
}
@media screen and (max-width:480px){
    .area_brand .intro .txt h3+h3{margin-left:10px;}
    .area_brand .part01 .logo span.logo01,
    .area_brand .part01 .logo span.logo02{width:60% !important;}
    .area_brand .part01 .naming .word span{width:120px; height:120px;}
    .area_brand .part01 .naming span.word01{padding-top:38px; font-size:14px;}
    .area_brand .part01 .naming span.word01 i{font-size:18px;}
    .area_brand .part01 .naming span.word02{padding-top:30px; font-size:16px;}
    .area_brand .part01 .naming span.word02 i{font-size:22px;}
    
}










/*
@media screen and (max-width:480px){
    .line_list li{width:49%;}
    .line_list li:nth-child(2n){margin-right:0;}
    .line_list li:last-child{margin-right:0 !important;}
    .line_list li:nth-child(3n){margin-right:2%;}
}
*/