.fs0{font-size: 0;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.txt-title{position: relative; padding-left: 14px;}
.txt-title:before{content: ""; display: inline-block; width: 4px; height: 20px; background: #17b5a9; position: absolute; top: calc(50% - 1px); left: 0; transform: translate(0%, -50%);}
@media (min-width: 992px) {
    .txt-title{padding-left: 20px;}
    .txt-title:before{content: ""; display: inline-block; width: 4px; height: 20px; position: absolute; top: calc(50% - 2px); }
}
/*서브 탭*/
.sub-tab-menu .dropdown_box{ width: 100%; max-width: 700px; padding: 10px; border: 1px solid #ddd; position: relative; margin: 0 auto; text-align: center; z-index: 1;
    background: #fff;}
.sub-tab-menu .dropdown_list li a{ display: block; padding: 10px; color: #6F6F6F;}
.sub-tab-menu .dropdown_list li.on a{color: #e87722;}
.sub-tab-menu {position: relative; max-width: 800px; margin: 0 auto;}
.sub-tab-menu .m_title { display: block; background: #e87722; color: #fff; padding: 15px; text-align: center; font-weight: 600; cursor: pointer;position: relative;}
.sub-tab-menu .m_title::after { content: "";  position: absolute; right: 15px; top: 17px; width: 8px; height: 8px; border-color: #ffffff; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; -webkit-transform: rotate(222deg);-moz-transform: rotate(222deg); -ms-transform: rotate(222deg);  -o-transform: rotate(222deg); transform: rotate(224deg); vertical-align: middle;}
.sub-tab-menu .dropdown_box { display: none;}
.sub-tab-menu.active .dropdown_box { display: block;}
.sub-tab-menu.active .m_title::after {transform: rotate(45deg); top: 20px;}

/* PC 화면에서는 m_title 숨김 */
@media (min-width: 768px) {
    .sub-tab-menu .dropdown_list{margin: 0 -5px!important;}
    .sub-tab-menu .dropdown_list li{font-weight: 600; display: inline-block; width: calc(100% / 3 - 14px); margin: 0 5px; vertical-align: middle; position: relative;}
    .sub-tab-menu .left-border:before{content: "";position: absolute; z-index: 20; border-right: 1px solid #ddd; transform: rotate(45deg); width: 22px; height: 22px; background: #fff; top: -11px; left: -11px;}
    .sub-tab-menu .left-border:after{content: "";position: absolute; z-index: 20; border-right: 1px solid #ddd; transform: rotate(-45deg); width: 22px; height: 22px; background: #fff; bottom: -11px; left: -11px;}
    .sub-tab-menu .right-border:before{content: "";position: absolute; z-index: 20; border-left: 1px solid #ddd; transform: rotate(-45deg); width: 22px; height: 22px; background: #fff; top: -11px; right: -11px;}
    .sub-tab-menu .right-border:after{content: "";position: absolute; z-index: 20; border-left: 1px solid #ddd; transform: rotate(45deg); width: 22px; height: 22px; background: #fff; bottom: -11px; right: -11px;}
    .sub-tab-menu .dropdown_list li .s-left-border:before{content: "";position: absolute; border-right: 1px solid #fff; transform: rotate(45deg); width: 10px; height: 22px; background: #fff; top: -8px; left: -1px;}
    .sub-tab-menu .dropdown_list li .s-left-border:after{content: "";position: absolute; border-right: 1px solid #fff; transform: rotate(-45deg); width: 10px; height: 22px; background: #fff; bottom: -8px; left: -1px;}
    .sub-tab-menu .dropdown_list li .s-right-border:before{content: "";position: absolute; z-index: 20; border-left: 1px solid #fff; transform: rotate(-45deg); width: 10px; height: 22px; background: #fff; top: -8px; right: -1px;}
    .sub-tab-menu .dropdown_list li .s-right-border:after{content: "";position: absolute; z-index: 20; border-left: 1px solid #fff; transform: rotate(45deg); width: 10px; height: 22px; background: #fff; bottom: -8px; right: -1px;}
    .sub-tab-menu .dropdown_list li.on a{background: #e87722; color: #fff;}
    .sub-tab-menu .dropdown_list li a{ padding: 15px;}
    .sub-tab-menu .m_title {display: none;}
    .sub-tab-menu .dropdown_box {display: block;}
}


/*회사소개*/
.company-introduction{position: relative; margin-bottom: 200px;}
.company-introduction-bg{background: url(../images/content/company-introduction-bg_v2.jpg) no-repeat; background-size: cover; background-position: 75%; padding: 90px 0 40px; height: 350px; position: relative; background-attachment: fixed;}
.company-introduction-bg:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));}
.company-introduction-txt{position: absolute; top: calc(50% - 30px); left: 50%; transform: translate(-50%,-50%); color: #fff; width: 100%;}
.company-introduction-txt .cit-title{font-size: 22px; font-weight: 800;  word-break: keep-all;}
.company-introduction .sub-scroll-box{position: absolute; bottom: -130px; left: 50%; transform: translate(-50%,0);}
.company-introduction .sub-scroll-txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; width: 100%; text-align: center;}
.company-introduction .sub-scroll-img { animation: rotate 10s linear infinite; }
.company-introduction .sub-scroll-icon {animation: shake 1.5s infinite;}
.company-introduction-con {overflow: hidden;}
.company-introduction-con.cic-con-1{padding-top: 40px;}
.cic-con-1 .cic-img-box {position: relative;}
.cic-con-1 .cic-img-box .cic-img-con-1{width: 100%;}
.cic-con-1 .cic-img-box .cic-img-con-1 .cic-img{height: 205px; position: relative;}
.cic-con-1 .cic-img-box .cic-img-con-1 .cic-img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; height: 100%; width: 100%;}
.cic-con-1 .cic-img-box .cic-img-con-2{ position: absolute; bottom: -60px; right: 0; width: 200px;}
.cic-con-1 .cic-img-box .cic-img-con-2 .cic-img{width: 100%;}
.cic-con-1 .cic-img-box .cic-img-con-2 .cic-logo{position: absolute; top: -103px; right: 0;}
.company-introduction-con .cic-txt-box{margin-top: 40px;}
.cic-txt-box .cic-number{color: #17b5a9;}
.cic-txt-box .cic-title{padding-bottom: 20px; margin-bottom: 20px; position: relative;}
.cic-txt-box .cic-title:before{content: ""; position: absolute; left: 0; bottom: 0; width: 15px; height: 2px; background: #17b5a9;}

.cic-con-2 .cic-img-box .cic-img-con-1 .cic-img{height: 205px; position: relative;}
.cic-con-2 .cic-img-box .cic-img-con-1 .cic-img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; height: 100%; width: 100%;}

.cic-con-3 .cic-img-box{font-size: 0;}
.cic-con-3 .cic-img-box .cic-img-con-1 {width:100%; }
.cic-con-3 .cic-img-box .cic-img-con-1 .cic-img{width: 100%; height: 230px;  position: relative;}
.cic-con-3 .cic-img-box .cic-img-con-2 {margin-top: 20px;}
.cic-con-3 .cic-img-box .cic-img-con-2 .cic-img {width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: middle; height: 110px; position: relative;}
.cic-con-3 .cic-img-box .cic-img-con-2 .cic-img:nth-child(n+3){margin-top: 20px;}
.cic-con-3 .cic-img-box .cic-img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; height: 100%; width: 100%;}

.factory-img-box {overflow: hidden; font-size: 0;}
.factory-img-box .factory-img-con-1 .factory-img{position: relative; height: 200px;}
.factory-img-box .factory-img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; height: 100%; width: 100%;}
.factory-img-box .factory-img-con-2{margin: 20px -10px 0 -10px;}
.factory-img-box .factory-img-con-2  .factory-img{width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: middle; position: relative; height: 80px;}

.rdcenter-img-box{overflow: hidden; font-size: 0; margin: 0 -10px;}

.rdcenter-img-box .rdcenter-img-con-2{margin: 0 -10px;}
.rdcenter-img-box .rdcenter-img-con-2 .rdcenter-img{width: calc(100% / 2 - 20px); margin: 20px 10px 0 10px; display: inline-block; vertical-align: middle;  position: relative; height: 95px;}
.rdcenter-img-box .rdcenter-img-con-2 .rdcenter-img:nth-child(n+3){width: calc(100% / 3 - 20px); margin-top: 20px;}
.rdcenter-img-box .rdcenter-img-con-1 .rdcenter-img { height: 200px; position: relative;}
.rdcenter-img-box .rdcenter-img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; height: 100%; width: 100%;}

@keyframes rotate {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

@keyframes shake {
  0%, 100% {transform: translateY(0);}
  50% { transform: translateY(-10px);}
}



@media (min-width: 768px) {
   .cic-txt-box .cic-title:before { width: 30px; height: 4px;}
   .company-introduction-bg{background-position: top;}
}
@media (min-width: 992px) {
    .company-introduction-txt .cit-title{font-size: 40px;}
    .company-introduction-bg{height: calc(100vh - 340px);}
    .cic-con-1 .cic-img-box .cic-img-con-1{width: 65%;}
    .cic-con-1 .cic-img-box .cic-img-con-1 .cic-img{height: 410px;}
    .cic-con-1 .cic-img-box .cic-img-con-2{ position: absolute; bottom: -120px; right: 0; width: 30%;}
    .company-introduction-con.cic-con-1{padding-top: 0px;}
    .cic-con-2 .cic-img-box .cic-img-con-1 .cic-img{height: 410px;}
    
    .cic-con-3 .cic-img-box{margin: 0 -10px;}
    .cic-con-3 .cic-img-box .cic-img-con-1 {width: calc(65% - 20px); margin: 0 10px; display: inline-block; vertical-align: middle;}
    .cic-con-3 .cic-img-box .cic-img-con-1 .cic-img{ height: 460px;}
    .cic-con-3 .cic-img-box .cic-img-con-2 {width: calc(35% - 20px); margin: 0 10px; display: inline-block; vertical-align: middle;}
    .cic-con-3 .cic-img-box .cic-img-con-2 .cic-img {height: 220px;}
    
    .factory-img-box .factory-img-con-1 {width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: middle;}
    .factory-img-box .factory-img-con-1 .factory-img{height: 400px; position: relative;}
    .factory-img-box .factory-img-con-2 {width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: middle;}
    .factory-img-box .factory-img-con-2 .factory-img{width: 100%; margin: 0; display: block; height: 190px;}
    .factory-img-box .factory-img-con-2 .factory-img:nth-child(2){margin-top: 20px;}
    
    .rdcenter-img-box .rdcenter-img-con-1{width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: middle;}
    .rdcenter-img-box .rdcenter-img-con-2{width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: middle;}
    .rdcenter-img-box .rdcenter-img-con-1 .rdcenter-img { height: 400px;}
    .rdcenter-img-box .rdcenter-img-con-2 .rdcenter-img{height: 190px; margin: 0 10px;}
}


/* ODM/OEM 사업프로세스*/
.top-bg-box{margin: 40px 0 0 0; position: relative;}
.top-bg-box-txt{position: absolute; text-align: center; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; color: #fff; padding: 20px; word-break: keep-all;}
.top-bg-box-txt .op-bg-box-title{font-size: 30px; padding-bottom: 20px; margin-bottom: 30px; position: relative;}
.top-bg-box-txt .op-bg-box-title:before{content: ""; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 40px; height: 1px; background: #fff;}
.top-fff-box{background: #fff; padding: 30px 10px; position: relative; z-index: 2;}
.process-box .process-ul .process-list{text-align: center; width: calc(100% / 2 - 24px); display: inline-block; margin: 0 10px; position: relative; vertical-align: top;}
.process-box .process-ul .process-list:before{content: ""; position: absolute; right: -12px; top: 44px; display: inline-block; width: 8px; height: 8px; border-color: #949494; border-top: 2px solid #949494; border-left: 2px solid #949494; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
.process-box .process-ul .process-list .process-icon-box{width: 100px; height: 100px; border-radius: 50%; background: #f2f2f2; margin: 0 auto; position: relative;}
.process-box .process-ul .process-list .process-icon-box img{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 50px;}
.process-box .process-ul .process-list .process-number{margin: 15px 0 6px; font-weight: 800; color: #e87722;}
.process-box .process-ul .process-list .process-title{font-weight: 600;}
.process-box .process-ul .process-list:nth-child(n+3){margin-top: 60px;}
.process-box .process-ul .process-list:nth-child(n+4){margin-top: 60px;}
.process-box .process-ul .process-list:nth-child(2):before,
.process-box .process-ul .process-list:nth-child(4):before, 
.process-box .process-ul .process-list:nth-child(6):before,
.process-box .process-ul .process-list:nth-child(8):before{content: none;}
@media (min-width: 768px) {
    .process-box .process-ul .process-list{width: calc(100% / 3 - 44px);  display: inline-block; margin: 0 20px; position: relative;}
    .process-box .process-ul .process-list:nth-child(2):before,
    .process-box .process-ul .process-list:nth-child(4):before, 
    .process-box .process-ul .process-list:nth-child(6):before{content: "";}
    .process-box .process-ul .process-list:nth-child(3):before,
    .process-box .process-ul .process-list:nth-child(6):before, 
    .process-box .process-ul .process-list:nth-child(8):before{content: none;}
    .process-box .process-ul .process-list:nth-child(3){margin-top: 0px;}
}
@media (min-width: 992px) {
    .top-bg-box-txt .op-bg-box-title{font-size: 45px;} 
    .top-bg-box-txt{top: calc(50% - 50px);}
    .top-fff-box{padding: 60px 30px; margin: -100px 0 40px 0;}
    .process-box .process-ul .process-list{ width: calc(100% / 4 - 44px);}
    .process-box .process-ul .process-list .process-icon-box{width: 120px; height: 120px;}
    .process-box .process-ul .process-list .process-icon-box img{max-width: 70px;}
    .process-box .process-ul .process-list:nth-child(4):before{content: none;}
    .process-box .process-ul .process-list:nth-child(8):before{content: none;}
    .process-box .process-ul .process-list:before{right: 0; top: 60px; }
    .process-box .process-ul .process-list:nth-child(3):before,
    .process-box .process-ul .process-list:nth-child(6):before{content: "";}
        .process-box .process-ul .process-list:nth-child(4){margin-top: 0px;}
}
.top-bg-box .sub-top-video{ position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%;}
.spreadImageBox {box-sizing:inherit !important; -webkit-box-sizing:inherit !important; position:relative; height:500px}
.spreadImageBox .spreadImage.typeEdgeL {display:block;position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden;transition:width .9s ease}
.spreadImageBox .spreadImage.typeEdgeL img {display:block;position:absolute;left:0;top:0; max-width:inherit}
.spreadImageBox .spreadImage.typeEdgeR {display:block;position:absolute;width:100%;height:100%;right:0;top:0;overflow:hidden;transition:width .9s ease;}
.spreadImageBox .spreadImage.typeEdgeR img {display:block;position:absolute;right:0;top:0; max-width:inherit}
.spreadImageBox .spreadImage.typeFull {display:block;position:absolute; width:1420px;height:100%;left:50%;transform:translateX(-50%);top:0;overflow:hidden;transition:width .9s ease;}
.spreadImageBox .spreadImage.typeFull:before{content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.0.5);}
.spreadImageBox .spreadImage.typeFull img {display:block;position:absolute;left:50%;top:0;margin:0 0 0 -1000px; max-width:inherit; filter: grayscale(0%);}

@media all and (max-width:999px) {
	.spreadImageBox {height:415px}
	.spreadImageBox .spreadImage.typeFull {width:1120px}
}
@media all and (max-width:799px) {
	.spreadImageBox {min-height:440px; max-height:100%; height:100%;}
	.spreadImageBox .spreadImage.typeFull {width:100% !important}
	.spreadImageBox .spreadImage.typeEdgeR {position:unset;}
	.spreadImageBox .spreadImage.typeEdgeR img {display:block;position:absolute;left:0;top:0; max-width:100%}
	.spreadImageBox .spreadImage.typeEdgeL {position:unset;}
	.spreadImageBox .spreadImage.typeEdgeL img {display:block;position:absolute;left:0;top:0; max-width:100%}
}
/*공장소개*/
.factory-Info{font-size: 0; text-align: center; margin: 0 -10px;}
.factory-Info .factory-Info-list{width: calc(100% / 3 - 20px); margin: 0 10px; display: inline-block; vertical-align: top; position: relative;}
.factory-Info .factory-Info-list:after{content: ""; position: absolute; top:20px; right: -10px; width: 1px; height: 60px; background: #ddd;}
.factory-Info .factory-Info-list:last-child:after{content: none;}
.factory-Info .factory-Info-list .factory-Info-title{font-weight: 700; margin: 10px 0 5px;}
.factory-Info .factory-Info-list .factory-Info-txt{color: #666;}
.factory-Info .factory-Info-list .factory-Info-icon img{max-width: 40px;}
@media (min-width: 768px) {
    .factory-Info .factory-Info-list .factory-Info-icon img{max-width: 60px;}
    .factory-Info .factory-Info-list .factory-Info-title{margin: 20px 0 10px;}
    .factory-Info .factory-Info-list:after{content: ""; position: absolute; top:50%; right: -10px; transform: translate(0%,-50%);}
}

/*R&D센터소개*/
.top-fff-box .fff-more-with{ max-width: 1000px; margin: 0 auto; word-break: keep-all; color: #666;}
.basicSet .img-left-con-box{margin-top: 40px!important; font-size: 0;}
.img-left-con-box .img-left-con-list{margin-bottom: 40px; vertical-align: top;}
.img-left-con-box .img-left-con-list:last-child{margin-bottom: 0;}
.img-left-con-box .img-left-con-list .left-con-img{background: #ddd; border-radius: 10px; overflow: hidden; height: 200px; position: relative;}
.img-left-con-box .img-left-con-list .left-con-img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); object-fit: cover; height: 100%;}
.img-left-con-box .img-left-con-list .right-con-txt{margin-top: 15px;}
.img-left-con-box .img-left-con-list .right-txt{margin-top: 10px;}
.img-left-con-box .img-left-con-list .right-txt ul li + li{margin-top: 6px;}
.img-left-con-box .img-left-con-list .right-txt ul li{position: relative; padding-left: 10px;}
.img-left-con-box .img-left-con-list .right-txt ul li:before{ content: ""; position: absolute; top: 7px; left: 0; width: 3px; height: 3px; background: #bbb; border-radius: 50%;}
@media (min-width: 768px) {
    .basicSet .img-left-con-box{margin-top: 80px!important; font-size: 0;}
    .img-left-con-box .img-left-con-list{width: calc(100% / 3 - 40px); margin: 0 20px; display: inline-block;}
    .img-left-con-box .img-left-con-list .right-con-txt{margin-top: 25px;}
    .img-left-con-box .img-left-con-list .right-txt{margin-top: 15px;}
    .img-left-con-box .img-left-con-list .right-txt ul li{padding-left: 14px;}
    .img-left-con-box .img-left-con-list .right-txt ul li:before{ content: ""; position: absolute; top: 9px; left: 0; width: 4px; height: 4px;}
}

/*주요개발품목 선케어/스킨케어/메이크업*/
.major-development-box .major-development-list { overflow: hidden; font-size: 0;}
.major-development-box .major-development-list .major-development-img {background: #333; vertical-align: middle; height: 200px; position: relative; z-index: 0;}
.major-development-box .major-development-list .major-development-img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; height: 100%; width: 100%;}
.major-development-box .major-development-list .major-development-more {word-break: keep-all; background: #fff; vertical-align: middle; padding: 20px 0; border-radius: 10px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center;}
.major-development-box .major-development-list .major-development-title { font-weight: 700; margin-bottom: 10px; padding-bottom: 10px; position: relative;}
.major-development-box .major-development-list .major-development-title:after { content: ""; position: absolute; left: 0; bottom: 0; width: 15px; height: 2px; background: #17b5a9;}
.major-development-box .major-development-list + .major-development-list { margin-top: 40px;}
@media (min-width: 768px) {
    .major-development-box .major-development-list:nth-child(odd) { flex-direction: row;}
    .major-development-box .major-development-list:nth-child(even) { flex-direction: row-reverse;}
    .major-development-box .major-development-list:nth-child(odd) .major-development-more { margin-left: -100px;}
    .major-development-box .major-development-list:nth-child(even) .major-development-more { margin-right: -100px;} 
    .major-development-box .major-development-list {display: flex; align-items: center; justify-content: center;}
    .major-development-box .major-development-list .major-development-img { width: 50%;  display: inline-block; }
    .major-development-box .major-development-list .major-development-more { width: 50%;  padding: 60px 40px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);}
    .major-development-box .major-development-list .major-development-img {height: 400px;}
    .major-development-box .major-development-list + .major-development-list { margin-top: 80px;}
    .major-development-box .major-development-list .major-development-title { margin-bottom: 20px; padding-bottom: 20px;}
    .major-development-box .major-development-list .major-development-title:after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 4px;}
}

/*포뮬레이션*/
.sub2-title{position: relative; padding-left: 14px;}
.sub2-title:before{content: ""; position: absolute; left: 0; top: 6px; width: 3px; height: 20px;background: #e87722;}
.sub2-stitle{color: #999;}
.formulation-box{background: #f2f2f2; height: 300px; border-radius: 60px 60px 0 60px; margin: 0; overflow: hidden; position: relative;}
.basicSet .formulation-box .f-texture-ul{padding: 50px 0!important; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; font-size: 0;}
.formulation-box.fb-0101{background: url(../images/content/f-texture-bg0101.jpg)no-repeat; background-size: cover;}
.formulation-box.fb-0102{background: url(../images/content/f-texture-bg0102.jpg)no-repeat; background-size: cover;}
.formulation-box.fb-0103{background: url(../images/content/f-texture-bg0103.jpg)no-repeat; background-size: cover;}
.formulation-box.fb-0104{background: url(../images/content/f-texture-bg0104.jpg)no-repeat; background-size: cover;}
.f-texture-ul .f-texture-list{width: calc(100% / 3); display: inline-block; vertical-align: middle;}
.f-texture-ul .f-texture-list:nth-child(n+4){margin-top: 20px;}
.f-texture-ul .f-texture-list .f-texture-circle{background: #fff; border-radius: 50%; width: 90px; height: 90px; position: relative; margin: 0 auto; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);}
.f-texture-ul .f-texture-list .f-texture-circle .f-texture-circle-con{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.f-texture-ul .f-texture-list .f-texture-circle .f-texture-circle-con img{max-width: 45px;}
.filter-type-box{font-size: 0;}
.filter-type-box .filter-type-list{background: #f2f2f2;  margin: 10px 0; text-align: center; padding: 20px;}
.filter-type-box .filter-type-list:last-child{margin-bottom: 0;}
.formulation-con{position: relative; margin-bottom: 50px; padding-bottom: 50px;}
.formulation-con:last-child{padding-bottom: 0px;}
.passing_handwriting {display: none;}
.passing_handwriting.animate { opacity: 0.1; transform: translateX(-100%);}
.passing_handwriting.reverse { opacity: 0; transform: translateX(100%);}
@media (min-width: 768px) {
    .passing_handwriting { display: block; position: absolute; bottom: 0; right: 0; font-weight: 800; font-size: 140px; text-transform: uppercase; opacity: 0; font-family: "JosefinSans"; transition: transform 1s ease-out, opacity 1s ease-out; transform: translateX(100%);}
    .formulation-box{margin: 0 20px;}
    .f-texture-ul .f-texture-list .f-texture-circle{width: 110px; height: 110px; }
    .formulation-con{position: relative; margin-bottom: 100px; padding-bottom: 100px;}
    .formulation-con:last-child{padding-bottom: 300px;}
    .basicSet .formulation-box{background-attachment: fixed;}
    .f-texture-ul .f-texture-list .f-texture-circle .f-texture-circle-con img{max-width: 75px;}
}
@media (min-width: 992px) {
    .sub2-title{padding-left: 20px;}
    .sub2-title:before{content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 30px;}
    .formulation-box{height: 300px; border-radius: 120px 120px 0 120px; margin: 0 60px;}
    .f-texture-ul .f-texture-list{width: calc(100% / 6);}
    .f-texture-ul .f-texture-list .f-texture-circle{width: 150px; height: 150px;}
    .filter-type-box .filter-type-list{width: calc(100% / 3 - 40px); margin: 0 20px; display: inline-block;  padding: 40px;}
    .f-texture-ul .f-texture-list:nth-child(n+4){margin-top: 0px;}
    .basicSet .formulation-box .f-texture-ul{text-align: center; width: 80%;}
}

/*otc제품이란?*/
.otc-definition-box { text-align: center; margin-top: 0px;}
.Image-magnification { overflow: hidden; display: flex; justify-content: center; align-items: center; width: 100%; margin: 0 auto;  transition: transform 0.6s ease-out, width 0.6s ease-out, height 0.6s ease-out;}
.Image-magnification img { width: 100%; transition: transform 0.6s ease-out;}
.otc-definition-txt-box{margin-top: 40px; word-break: keep-all;}
.otc-definition-txt-box .odtt-1 br{display: block;}
.otc-definition-con .two-img-bg-box {width: 100%; margin: 0 auto; overflow: hidden;}
.otc-definition-con .two-img-bg-box .tibb-list{text-align: center; margin-bottom: 20px; padding-bottom: 10px; background: #222; color: #fff; border-radius: 10px; overflow: hidden;}
.otc-definition-con .two-img-bg-box .otc-txt-bg-img{opacity: 0.5;}
.otc-bg-fda-bg{padding: 0 0 20px;}
.otc-bg-fda-bg .otc-fda-layout{overflow: hidden; word-break: keep-all;}
.otc-bg-fda-bg .otc-fda-layout .fda-examination_results-box{width: 70%; margin: 0 auto 40px;}
.lnk-bnt{ padding: 10px; border: 0; background: #17b5a9; color: #fff; font-weight: 600; border-radius: 5px;transition: 0.5s;}
.lnk-bnt:hover{background: #222;transition: 0.5s;}
.lnk-bnt-2{ padding: 20px 30px; border: 0; background: #17b5a9; color: #fff; font-weight: 600; border-radius: 5px;transition: 0.5s;}
.lnk-bnt-2:hover{background: #222;transition: 0.5s;}
.lnk-bnt i{margin-left: 6px; font-weight: 100; font-size: 11px;}
@media (min-width: 768px) {
    .otc-bg-fda-bg{background: url(../images/content/otc-bg-fda-bg.jpg)no-repeat; background-size: cover; padding: 90px 0 40px;}
    .otc-bg-fda-bg .otc-fda-layout .fda-examination_results-box{width: calc(40% - 60px); margin: 0 30px; display: inline-block; vertical-align: top;}
    .otc-bg-fda-bg .otc-fda-layout .otc-fda-txt{width: calc(100% - 40% - 64px); margin: 40px 30px 0 30px; display: inline-block; vertical-align: top; word-break: keep-all;}
}
@media (min-width: 992px) {
    .otc-definition-box {margin-top: 50px; }
    .otc-definition-txt-box{margin-top: 140px;}
    .otc-definition-txt-box .odtt-1 br{display: none;}
    .otc-definition-con .two-img-bg-box {width: 70%;}
    .otc-definition-con .two-img-bg-box .tibb-list{text-align: center; width: calc(100% / 2 - 24px); margin: 0 10px; display: inline-block; padding-bottom: 20px;}
    .otc-bg-fda-bg{padding: 120px 0 0;}
    .otc-bg-fda-bg .otc-fda-layout .fda-examination_results-box{width: calc(25% - 60px);}
    .otc-bg-fda-bg .otc-fda-layout .otc-fda-txt{width: calc(100% - 25% - 64px); margin: 60px 30px 0 30px;}
    .lnk-bnt{ padding: 14px 25px;}
    .lnk-bnt i{margin-left: 10px; font-size: 15px;}
    .lnk-bnt-2{ padding: 24px 60px;}
}

/*선진 OTC장점*/
.sub-otc-point .sub-otc-list{overflow: hidden; text-align: center; word-break: keep-all; color: #fff; } 
.sub-otc-point .sub-otc-list:nth-child(n+2){margin-top: 20px;}
.sub-otc-point .sub-otc-list .sop-txt-box { background: #333; height: 250px; border-radius: 10px; padding: 20px; display: flex; justify-content: center; align-items:center; position: relative; transition: 0.3s; overflow: hidden;}
.sub-otc-point .sub-otc-list .sop-txt-box:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1; transition: 0.3s;}
.sub-otc-point .sub-otc-list .sop-txt-box:hover:before{background: rgba(232,119,34,0.9); transition: 0.3s;}
.sub-otc-point .sub-otc-list .sop-txt-box:hover .sop-txt{color: #fff!important;}
.sub-otc-point .sub-otc-list .sop-txt-icon{width: 52px; height: 45px; background: url(../images/main/main-choice-icon2.png) no-repeat center / 315px; background-position: 0px -45px; margin: 0 auto 20px;}
.sub-otc-point .sub-otc-list:nth-child(1) .sop-txt-icon{width: 52px; height: 45px; background: url(../images/main/main-choice-icon2.png) no-repeat center / 315px; background-position: -208px -45px;}
.sub-otc-point .sub-otc-list:nth-child(2) .sop-txt-icon{width: 52px; height: 45px; background: url(../images/main/main-choice-icon2.png) no-repeat center / 315px; background-position: -156px -45px;}
.sub-otc-point .sub-otc-list:nth-child(3) .sop-txt-icon{width: 52px; height: 45px; background: url(../images/main/main-choice-icon2.png) no-repeat center / 315px; background-position: 0px -45px;}
.sub-otc-point .sub-otc-list:nth-child(4) .sop-txt-icon{width: 52px; height: 45px; background: url(../images/main/main-choice-icon2.png) no-repeat center / 315px; background-position: -260px -45px;}
.sub-otc-point .sub-otc-list:nth-child(1) .sop-txt-box{background: url(../images/content/sop-txt-box-bg2.jpg) no-repeat; background-size: cover;}
.sub-otc-point .sub-otc-list:nth-child(2) .sop-txt-box{background: url(../images/content/sop-txt-box-bg4.jpg) no-repeat; background-size: cover;}
.sub-otc-point .sub-otc-list:nth-child(3) .sop-txt-box{background: url(../images/content/sop-txt-box-bg1.jpg) no-repeat; background-size: cover;}
.sub-otc-point .sub-otc-list:nth-child(4) .sop-txt-box{background: url(../images/content/sop-txt-box-bg3.jpg) no-repeat; background-size: cover;}
.sub-otc-point .sub-otc-list .sop-txt-box .sop-txt-con{position: relative; z-index: 2;}
.sub-otc-point .sub-otc-list .sop-txt-box .sop-txt br{display: none;}
.line-design{ padding-top: 30px; border-top: 4px solid #000;}
.line-design .line-title{text-align: left; margin-bottom: 20px;}
.line-design .line-design-list + .line-design-list{margin-top: 30px; padding-top: 30px;  border-top: 1px solid rgba(0, 0, 0, 0.2);}
.line-design .line-txt{word-break: keep-all;}
@media (min-width: 768px) {
    .sub-otc-point .sub-otc-list .sop-txt-box { height: 290px;}
    .sub-otc-point .sub-otc-list .sop-txt-box .sop-txt br{display: block;}
    .sub-otc-point .sub-otc-list{overflow: hidden; width: calc(100% / 2 - 24px); margin: 0 10px; display: inline-block; vertical-align: middle; } 
    .sub-otc-point .sub-otc-list:nth-child(n+2){margin-top: 0px;}
    .sub-otc-point .sub-otc-list:nth-child(n+3){margin-top: 20px;}
    .line-design{ padding-top: 60px;}
    .line-design .line-title{width: calc(100% - 80% - 44px); margin: 0 20px; display: inline-block; vertical-align: middle;}
    .line-design .line-txt{width: calc(100% - 20% - 44px); margin: 0 20px; display: inline-block; vertical-align: middle;}
    .line-design .line-design-list + .line-design-list{margin-top: 60px; padding-top: 60px;}
}
@media (min-width: 992px) {
     .sub-otc-point .sub-otc-list .sop-txt-box { height: 260px;}
    .sub-otc-point .sub-otc-list{width: calc(100% / 2 - 24px); margin: 0 10px;} 
    
}

/* contact us*/
.sub-contact { position: relative;}
.sub-contact .sub-contact-left-box { width: 100%; background: #f7f7f7; overflow-x: auto;}
.sub-contact .sub-contact-map-box { width: 100%; margin-top: 20px; position: relative;}
/*.sub-contact .sub-contact-map-box:before{content: ""; display: inline-block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0); z-index: 2;}*/
.sub-contact .sub-contact-map-box .naver-map-btn{position: absolute; top: 20px; right: 20px; z-index: 10;}
.sub-contact .sub-contact-map-box .naver-map-btn a{ padding: 16px 30px; border-radius: 120px 120px 0 120px; display: block; background: #222; color: #fff; font-weight: 700; vertical-align: middle; margin: 0 6px 6px 0;}
.sub-contact .sub-contact-map-box .naver-map-btn a i{margin-right: 6px; font-size: 16px; vertical-align: middle;}
.sub-contact-left-box ul li { padding: 20px; transition: color 0.5s, font-weight 0.3s; display: block;}
.sub-contact-left-box ul li:first-child { background: #222; color: #fff;}
.sub-contact-left-box ul li.active:first-child .color-4{ color: #fff!important;}
.sub-contact-left-box ul li + li{border-top: 1px solid #e2e2e2;}
.sub-contact-info .sub-contact-info-list .sub-contact-info-title{width: 50px; display: inline-block;}
.sub-contact-info .sub-contact-info-list + .sub-contact-info-list {margin-top: 6px;}
.sub-contact-info .sub-contact-info-list .sub-contact-info-txt{width: calc(100% - 64px); margin-left: 10px; display: inline-block;}
.tabular-form-box{font-size: 0;}
.tabular-form-box dt{background: #333; display: block; color: #fff; padding: 20px;}
.tabular-form-box dd{display: block; padding: 20px; background: #f7f7f7;}
.tabular-form-box +.tabular-form-box {border-top: 1px solid #ffffff;}
@media (min-width: 992px) {
    .sub-contact-left-box ul li{padding: 20px 30px;}
    .sub-contact .sub-contact-left-box { width: 340px; display: inline-block; vertical-align: top; overflow: auto;}
    .sub-contact .sub-contact-map-box {display: block; vertical-align: top; margin-top: 0;}
    .sub-contact .sub-contact-map-box .naver-map-btn a{ padding: 20px 40px;}
    .sub-contact .sub-contact-map-box .naver-map-btn a i{margin-right: 12px; font-size: 18px;}
    
    .sub-contact-left-box ul li { transition: background 0.5s, color 0.5s; display: block; background: #f7f7f7; color: #000;}
    .sub-contact-left-box ul li:first-child { background: #222; color: #fff;}
    .sub-contact-left-box ul li:first-child .color-4 { color: #fff !important;}
    .sub-contact-left-box ul li:hover { background: #222; color: #fff;}
    .sub-contact-left-box ul li:hover .color-4 { color: #fff !important;}
    .sub-contact-left-box ul:hover li:first-child { background: #f7f7f7; color: #000;}
    .sub-contact-left-box ul:hover li:first-child .color-4 { color: #999 !important;}
    .sub-contact-left-box ul li:first-child:hover { background: #222;color: #fff;}
    .sub-contact-left-box ul li:first-child:hover .color-4 { color: #fff !important;}
    .tabular-form-box dt{display: inline-block; width: 15%;}
    .tabular-form-box dd{width: calc(100% - 15%); display: inline-block;}
}

/*문의하기*/
.sub-form{border-top: 3px solid #2f2f2f; padding-top: 40px;}
.sub-form dt{font-weight: 700; margin-bottom: 10px;}
.sub-form .require_mark{color: #FF0004; margin-left: 4px;}
.sub-form .bg-write-box{ background: #f7f7f7; padding: 20px; margin-top: 20px; border-radius: 10px;}
.write-two dl:nth-child(n+2){margin-top: 20px!important;}
@media (min-width: 992px) {
    .sub-form .write-two{margin: 0 -20px;}
    .sub-form .write-two dl{width: calc(100% / 2 - 40px); margin: 0 20px!important; display: inline-block; vertical-align: top;}
    .sub-form .bg-write-box{padding: 40px; margin-top: 40px;}
}

/*뉴스레터*/
.sub-latest-news{overflow: hidden;}
.news-letter-left .news-letter-img-box{height: 0; overflow: hidden; position: relative; background: #f9f9f9; padding-bottom: 56.375%;}
.news-letter-left .news-letter-img-box img{max-width: 100%; position: absolute; min-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease-in-out;}
.news-letter-img-txt .news-letter-title{width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.5s;}
.latest-news-letter-box{background: #f2f4ff; padding: 30px 20px;}
.latest-news-letter-box .news-letter-box{font-size: 0;}
.latest-news-letter-box .news-letter-box .news-letter-list{display: block; }
.latest-news-letter-box .news-letter-box .news-letter-right{margin-top: 20px;}
.latest-news-letter-box .news-letter-img-txt .news-letter-language-txt{font-weight: 600; background: #17b5a9; display: inline-block; color: #fff; padding: 5px 14px;}
.latest-news-letter-box .news-letter-img-txt .news-letter-stxt{color: #a7a9ba; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}
.latest-news-letter-box .news-letter-img-txt .news-letter-date{color: #717385;}
.latest-news-letter-box .news-letter-list:hover .news-letter-left .news-letter-img-box img{transform: translate(-50%, -50%) scale(1.1);}

.mini-news-letter-box{font-size: 0;}
.mini-news-letter-box .mini-news-letter-list{display: block; border: 1px solid #eee; padding: 15px;}
.mini-news-letter-box .mini-news-letter-list:nth-child(n+2){margin-top: 20px;}
.mini-news-letter-box .mini-news-letter-list .news-letter-left{width: calc(40%); display: inline-block; vertical-align: middle;}
.mini-news-letter-box .mini-news-letter-list .news-letter-right{width: calc(60% - 20px); margin-left: 20px; display: inline-block; vertical-align: middle;}
.mini-news-letter-box .news-letter-img-txt .news-letter-language-txt { font-weight: 500; background: #17b5a9; display: inline-block; color: #fff; padding: 5px 14px;}
.mini-news-letter-box .news-letter-img-txt .news-letter-date {color: #717385;}
.mini-news-letter-box .mini-news-letter-list:hover{ border:1px solid #17b5a9; transition: 0.5s;}
.mini-news-letter-box .mini-news-letter-list:hover .news-letter-left .news-letter-img-box img{transform: translate(-50%, -50%) scale(1.1);}
.letter-modal-btn .modal-btn{border: 1px solid #17b5a9; color: #17b5a9; font-weight: 600; padding: 14px 24px; transition: 0.5s;}
.letter-modal-btn .modal-btn:hover{background: #222; border: 1px solid #222; color: #fff;}
.modal-form dt{font-weight: 600; margin-bottom: 10px;}
.modal-form .require_mark { color: #FF0004; margin-left: 4px;}
@media (min-width: 768px) {
    .latest-news-letter-box .news-letter-box .news-letter-list{margin: 0 -20px;}
    .latest-news-letter-box .news-letter-box .news-letter-left{width: calc(55% - 40px); margin: 0 20px; display: inline-block; vertical-align: middle;}
    .latest-news-letter-box .news-letter-box .news-letter-right{width: calc(45% - 40px); margin: 0 20px; display: inline-block; vertical-align: middle;}
    .mini-news-letter-box{margin: 0 -20px;}
    .mini-news-letter-box .mini-news-letter-list{width: calc(100% / 2 - 40px); margin: 0 20px; padding: 20px; display: inline-block; vertical-align: top; transition: 0.5s;}
    .mini-news-letter-box .mini-news-letter-list:nth-child(n+2){margin-top: 0px;}
    .mini-news-letter-box .mini-news-letter-list:nth-child(n+3){margin-top: 40px;}
    .mini-news-letter-box .mini-news-letter-list .news-letter-left{width: calc(45%);}
    .mini-news-letter-box .mini-news-letter-list .news-letter-right{width: calc(55% - 20px);}
    
}
@media (min-width: 992px) {
    .latest-news-letter-box{ padding: 60px 20px;}
}

@media (min-width: 1200px) {
    .latest-news-letter-box{ padding: 80px 0;}
}

/* 뉴스레터 뷰*/
.news-letter-page{overflow: hidden;}
.news-letter-page-bg{ border-bottom: 1px solid #ddd; position: relative;}
.news-letter-page-bg:before{content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.news-letter-page-bg-txt{ max-width: 1420px; word-break: keep-all; padding: 30px 10px;}
.news-letter-page-bg-txt .letter-txt-top .news-letter-language-txt{font-weight: 600;  background: #17b5a9; display: inline-block; color: #fff; padding: 5px 14px;}
.news-letter-page-bg-txt .letter-txt-top .news-letter-date{color: #aaa;}
.news-by-txt{text-align: left; max-width: 830px; margin: 0 auto;}
.news-by-txt dl{display: block; position: relative;}
/*.news-by-txt dl:before{content: ""; display: inline-block; position: absolute; width: 1px; height: 10px; background: #ccc; top: 50%; right: -22px; transform: translate(0px, -50%);}*/
.news-by-txt dl:last-child:before{content: none;}
.news-by-txt dl + dl{margin-top: 5px!important;}
.news-by-txt dl dt{display: inline-block; padding-right: 10px; color: #17b5a9; font-weight: 800;}
.news-by-txt dl dd{display: inline-block; color: #999;}
.news-body-txt {max-width: 830px; margin: 0 auto;}
.news-related .related-box {font-size: 0; margin: 0 -10px!important;}
.news-related .related-box .related-list{width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: top;}
.news-related .related-box .related-list:nth-child(n+3){margin-top: 30px;}
.news-related .related-box .related-list .related-img-box{ height: 0; overflow: hidden; position: relative; background: #f9f9f9; padding-bottom: 56.375%;}
.news-related .related-box .related-list .related-img-box img{max-width: 100%; position: absolute; min-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease-in-out;}
.news-related .related-box .related-list .related-img-box .related-language-txt{position: absolute; top: 5px; left: 5px; z-index: 1; font-weight: 600; background: #17b5a9; display: inline-block; color: #fff; padding: 5px 14px;}
.news-related .related-box .related-list .news-letter-date{text-align: right; color: #999;}
.news-related .related-bottom .news-letter-title{ margin-top: 10px; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  transition: 0.5s;}
.news-related .related-box .related-list:hover .related-img-box img{transform: translate(-50%, -50%) scale(1.1);}
.news-related .related-box .related-list:nth-child(n+5){display: none;}
@media (min-width: 992px) {
    .news-by-txt dl{display: block;}
    .news-letter-page-bg-txt{padding: 40px 0;}
    .news-related .related-box .related-list{width: calc(100% / 4 - 20px);}
    .news-related .related-bottom .news-letter-title{margin-top: 20px;}
    .news-related .related-box .related-list .related-img-box .related-language-txt{position: absolute; top: 10px; left: 10px;}
    .news-related .related-box .related-list:nth-child(n+3){margin-top: 0px;}
}
@media (min-width: 1200px) {
  .news-letter-page-bg-txt {max-width: 1120px;}
}
@media (min-width: 1440px) {
  .news-letter-page-bg-txt {max-width: 1420px;}
}

/*글씨흐르는 효과*/
.footer-animated-box { position: absolute; top: -220px; left: -7px;}
.footer-animated-box .footer-animated-con { overflow: hidden; position: relative; background: #e7e7e7; color: #fff; transform: rotate(4.7deg); padding: 20px 0; font-weight: 600; width: 100vw; }
.footer-animated-box .animated-content { display: flex; align-items: center; white-space: nowrap; font-size: 32px; min-width: 200%;}
.footer-animated-box .animated-inner { display: flex; width: max-content; animation: f-scroll 40s linear infinite;}
@keyframes f-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (max-width: 768px) {
    .footer-animated-box { position: absolute; top: -95px; left: -0px;}
    .footer-animated-box .animated-content { font-size: 20px; }
    .footer-animated-box .footer-animated-con { padding: 10px 0;}
    .footer-animated-box .animated-content-1 { animation-duration: 12s;}
}

/* 메뉴쪽 sns*/
.rd-navbar-fixed .top-sns-nav{ position: fixed; top: 24px; right: 7px;}
.top-sns-nav{ position: fixed; top: 14px; right: 70px; z-index: 100;}
.top-sns-nav{ position: fixed; top: 14px; right: 70px; z-index: 100;;}
.top-sns-nav span a img{max-width: 26px; display: inline-block;}
.top-sns-nav span{padding: 0 1px;}
@media (min-width: 400px) {
    .top-sns-nav{right: 90px;}
}
@media (min-width: 1280px) {
    .top-sns-nav span{padding: 0 2px;}
    .top-sns-nav{ top: 32px;}
    .top-sns-nav span a img{max-width: 40px;}
}
@media (min-width: 1600px) {
    .top-sns-nav{right: 250px;}
}

/* 회사소개 품질시스템 하단 이미지 */
.cic-con-2 .cic-img-side { display: flex; align-items: stretch; gap: 12px;}
.cic-con-2 .cic-img-side .cic-img {overflow: hidden;}
.cic-con-2 .cic-img-side .cic-img:first-child { flex: 0 0 37%;}
.cic-con-2 .cic-img-side .cic-img:last-child { flex: 1;}
.cic-con-2 .cic-img-side .cic-img img { display: block; width: 100%; height: 100%; object-fit: cover;}

/* 주요개발품목 디자인 다시*/
.dev-product { width: 100%; padding: 40px 20px; background: #fff; }
.dev-product .dev-product-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; width: 100%; margin: 0 auto; padding: 0; list-style: none; }
.dev-product .dev-product-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; border-radius: 20px;}
.dev-product .dev-product-div { display: flex; flex-direction: column; height: 100%; margin: 0; }
.dev-product .dev-product-pic { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 0.88; overflow: hidden; padding: 20px; }
.dev-product .dev-product-img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; }
.dev-product .dev-product-info { display: flex; flex: 1; flex-direction: column; min-height: 160px; padding: 24px; background: #fbfbfb; }
.dev-product .dev-product-brand { display: inline-flex; align-items: center; align-self: flex-start; margin: 0; padding: 7px 12px; color: #36bdbb; font-weight: 700; line-height: 1; letter-spacing: -0.02em; background: #e9f8f7; border-radius: 999px; word-break: keep-all; }
.dev-product .dev-product-name { margin: 16px 0 0; color: #111; font-weight: 700; line-height: 1.5; letter-spacing: -0.035em; word-break: keep-all; overflow-wrap: anywhere; }
.dev-product .dev-product-seller { margin: auto 0 0; padding-top: 22px; color: #aaa; font-weight: 400; line-height: 1.5; letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: anywhere; }
.dev-product .dev-product-seller span { color: inherit; font-weight: inherit; }

@media screen and (max-width: 992px) {
    .dev-product .dev-product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width:768px) {
    .dev-product { padding: 24px 16px; }
    .dev-product .dev-product-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .dev-product .dev-product-pic { padding: 10px; }
    .dev-product .dev-product-info { min-height: 0; padding: 22px 20px 24px; }
}