/* ================================================================= 
* 컬러검색
* ================================================================= */
.search .esccolor{ position: relative;}
.search .esccolor .imgArea{ position: absolute; width: 65%; z-index: -1; height: 100%; display: flex; }
.search .esccolor .imgArea img{ margin: auto 0;}
.search .esccolor .title{ font-size: 3.5rem; font-weight: bold; margin-left: auto; margin-right: 10%; width: fit-content; }
.search .esccolor .title span{ display: block; width: fit-content; }
.search .esccolor .textArea{ width: 40%; padding: 5%; margin: 2%; margin-left: auto; background-color: #fff; font-size: 1.3rem; box-shadow: 0.5rem 0.5rem 0.5rem gray;}

.search .findArea {margin: 5rem auto;}
.search .findArea .iptArea{ font-size: 2.7rem; padding: 1.5rem; border-bottom: 1.3px solid #bdbdbd; display: flex; }
.search .findArea .iptArea i{ margin: auto 0;}
.search .findArea .iptArea .word{ border: none; margin: 1rem 2rem; outline: none;}
.search .findArea .iptArea .btnColorPk{ margin: auto 2rem auto auto; position: relative;}
.search .findArea .iptArea .btnColorPk .iptCp{ position: absolute; bottom: -30%; visibility: hidden;}
.search .findArea .iptArea .btnColorPk .btn{padding: 1rem 2rem; border: 1px solid #353535; font-size: 1.3rem; height: 3.9rem; border-radius: 100px;}

.search .findArea .explain{ font-size: 1.2rem; margin: 2rem 0;}
.search .findArea .explain li{margin: 0.5rem 0;}

.search .findArea .type { margin: 2rem 0;}
.search .findArea .type li { font-size: 2.7rem; margin-right:1.5rem; color:#bdbdbd; display: inline-block; cursor: pointer;}
.search .findArea .type li::before { content: "|"; margin-right: 1.5rem; color:#bdbdbd;}
.search .findArea .type li:first-child::before{content: "";}
.search .findArea .type li.active {color:var(--bs-body-color)}
.search .findArea .type li .en { font-size: 1.7rem;}

.search .findArea .colorArea{margin: 3rem 0; min-height: 30rem; max-height: 30rem; overflow-y: auto;}
.search .findArea .colorArea li {aspect-ratio: auto 1/1; margin: 0.35%; width: 7.6%; display: inline-block; cursor: pointer;}

.search .findArea {position: relative;; padding-left: 20rem; min-width: 1280px; overflow-x: auto; overflow-y: hidden;}


/* 색상 노출*/

.colorBox { position: relative; width: 100%;}

.clr-field{margin-top: -0rem;}
#clr-color-value, .clr-preview{display: none !important;}
.clr-picker { display: block !important; width: 98% !important; box-shadow: none !important; min-height: 28rem!important;}
#clr-color-area{min-height: 20rem !important;}
.clr-field {width: 0 !important;}

.iptColor{height: 0px; border: none; color: white;}


/* 컬러 바*/

.colorBar {position: absolute; left:0; top:0; height: 100%; margin-right: 1rem; width: 18rem; background-color: #fff; border-right:solid 1px #BDBDBD;}

.colorBar .colorList{height: 75%; overflow-y: auto;}
.colorBar .setColor{height: 25%; border-top:solid 1px #BDBDBD; margin: 1em;}
.colorBar .colorList .selectColor {width: 96%; margin : 2%; height: 5em;}
.colorBar .colorList .colorCode{cursor: pointer;}
.colorBar .colorList li {margin-bottom: 1em;}

.colorBar .selectColor {width: 96%; margin : 2%; height:55%;font-size: 1.3rem; text-align: -webkit-right; color: #fff;}
.colorBar .selectColor i {display: none;}
.colorBar .selectColor:hover i {display: block; margin: 0.3em; padding: 0.1em 0.1em; background-color: #BDBDBD; width: 1.3em; border-radius: 100%;}
.colorBar .colorCode {font-weight: bold; font-size: 2em;}
.colorBar .btnList {text-align: right;}
.colorBar .btn { border-radius: 20px; font-size: 1em; border: solid 1px #BDBDBD; width: fit-content; margin-left: auto;}

/* ================================================================= 
* 컬러연구소
* ================================================================= */
.laboratory .esc {display: flex;}
.laboratory .esc .imgArea{width: 50%; text-align: center;}
.laboratory .esc .textArea{width: 50%; padding: 10% 5%;}
.laboratory .esc .textArea p {margin: 1rem 0; font-size:1.2rem;}
.laboratory .esc .textArea .en{color:var(--main-color); font-size:1.5rem;}
.laboratory .esc .textArea .title{font-size:3rem; font-weight: bold;}

.laboratory .concept {position: relative; margin: 5rem auto; padding: 0;}
.laboratory .concept .textArea {color:#fff; position: absolute; top:0; width: 100%; height: 100%; padding: 10% 5%; display: flex;}
.laboratory .concept .textArea .nomalTxt{font-size: 2rem; font-weight: bold; width: 40%; margin-top: 3%;}
.laboratory .concept .textArea .blurTxt{margin: 0 5%; border-radius: 30px; position: relative; box-shadow: 2px 7px 15px 8px rgba(0, 0, 0, 1); overflow: hidden; z-index: 55;}
.laboratory .concept .textArea .blurArea{filter: blur(5px); position: absolute; width: 100%; height: 100%; background-color: rgb(251 251 251 / 0%); backdrop-filter: blur(0.2px); z-index: -1;}
.laboratory .concept .textArea .blurTxt p{width: 70%; margin: 10%;}
.laboratory .concept .textArea .blurTxt .btxt {margin-top: 45%;}
.laboratory .concept .textArea .btxt .title{font-size: 3rem;}
.laboratory .concept .textArea .btxt span{display: block; margin: 5% 0;}

.laboratory .colorTxt{color:var(--main-color); font-size: 3.2rem;}
.laboratory .colorTxt .showYear{font-size: 8.5rem; letter-spacing: 1rem;}

.laboratory .colorShow{ margin: 3rem auto; position: relative;}
.laboratory .bgImg{ position: absolute; z-index: -1; filter: blur(5px); width: 100%; height: 60%; overflow: hidden;}
.laboratory .bgImg .bgblack{ position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.3;}
.laboratory .bgImg img{ width: 100%; margin-top: -45%;}
.laboratory .colorShow .poster{ padding: 5%; display: flex; color: #fff;}
.laboratory .colorShow .poster img{ width: 60%;}
.laboratory .colorShow .poster .title { font-size: 4.5rem; margin: 2rem 0; }
.laboratory .colorShow .poster .textArea { padding: 0 5%; font-size: 1.5rem;}

.laboratory .showHist {text-align: center; background-color: #e6e6e6; padding: 9rem 0;}
.laboratory .showHist .title{font-weight: bold; font-size: 3.2rem; margin-bottom: 7rem;}
.laboratory .showHist .swiper{padding:0;}
.laboratory .showHist .swiper .swiper-slide{transform: scale(0.8);}
.laboratory .showHist .swiper .swiper-slide-active{transform: scale(1.2); z-index: 999;}

.laboratory .research {margin: 7rem auto;}
.laboratory .research .title{text-align: center; font-size: 3.2rem; font-weight: bold; margin: 4rem 0;}
.laboratory .research .itemlist{display: flex;}
.laboratory .research .itemlist .item {width: 30%; margin: 1rem 1.5%; border:5px dotted var(--main-color); text-align: center; padding: 2rem; border-radius: 250px;}
.laboratory .research .itemlist .item li {aspect-ratio: auto 1/1; display: flex; flex-direction: column; justify-content: center; margin-top: -10%;}
.laboratory .research .itemlist .item .head{font-size: 1.3rem;}
.laboratory .research .itemlist .item .head p{margin: 0.5rem 0;}
.laboratory .research .itemlist .item .head .t1{font-size: 2rem; font-weight: bold;}
.laboratory .research .itemlist .item .circle{border-radius: 50%; font-weight: bold; font-size: 3rem;}
.laboratory .research .itemlist .item .circle.type1{margin-top: -15%; background-color: #bdbdbd; color:var(--main-color);}
.laboratory .research .itemlist .item .circle.type2{margin-top: -25%; background-color: var(--main-color); color:#fff;}


/* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
@media screen and (min-width:768px) and (max-width:1023px) { 
    /* ================================================================= 
    * 컬러검색
    * ================================================================= */
    .search .esccolor .title span{ margin-left: auto;}
    .search .esccolor .textArea{ width: 50%; }

    .search .findArea {margin: 5rem auto; padding-left: 0}
    .search .findArea .iptArea{ font-size: 2.2rem; padding: 1.5rem;}
    .search .findArea .iptArea .word{ margin: 1rem; width: 75%;}
    .search .findArea .iptArea .btnColorPk{ margin: auto; position: relative;}
    .search .findArea .iptArea .btnColorPk .iptCp{ position: absolute; bottom: -30%; visibility: hidden;}
    .search .findArea .iptArea .btnColorPk .btn{padding: 0.8rem 1rem; font-size: 1rem; width: max-content; height: 3rem;}

    .search .findArea .explain{ font-size: 1.2rem; margin: 2rem 0;}
    .search .findArea .explain li{margin: 0.5rem 0;}

    .search .findArea .type { margin: 2rem 0;}
    .search .findArea .type li { font-size: 2.2rem; margin-right:1rem;}
    .search .findArea .type li::before {margin-right: 1rem;}
    .search .findArea .type li .en { font-size: 1.5rem;}

    .search .findArea .colorArea{margin: 1rem 0; min-height: 30rem; max-height: 30rem; overflow-y: auto;}
    .search .findArea .colorArea li {aspect-ratio: auto 1/1; margin: 0.35%; width: 7.6%; display: inline-block; cursor: pointer;}
   

    .search .findArea {min-width: 100%;}
    /* 컬러 바*/
    .colorBar {position: relative; width: 100%; border: none; height: 29em; margin: 0;}

    .search .findArea .colorArea{width: 100%;}
    .clr-picker {width: 100% !important} 
    .colorBar .setColor {width: 100%; height: 5rem; margin: 0; padding: 0; position: absolute; top: 0}
    .colorList {position:absolute; bottom: 0; height: 20rem; margin: 0; display: flex; flex-wrap: wrap;}
    .colorList li {margin-right: 0.5em;}
    .colorBar .selectColor {margin: 0.5em; width: 98%;}
    .colorBar .colorList .selectColor{margin: 0.5em; width: 10em;}
    .colorBar .colorCode {font-size: 1.5em; margin-left: 0.5rem;}

    /* ================================================================= 
    * 컬러연구소
    * ================================================================= */
    .laboratory .esc .textArea p {margin: 1rem 0; font-size:1.2rem;}
    .laboratory .esc .textArea .title{font-size:2.5rem;}

    .laboratory .concept {position: relative; margin: 5rem auto; padding: 0;}
    .laboratory .concept .textArea .nomalTxt{font-size: 1.5rem; width: 60%; margin: 3% 0;}
    .laboratory .concept .textArea .blurTxt .btxt {margin-top: 30%;}

    .laboratory .colorTxt{color:var(--main-color); font-size: 3.5rem;}
    .laboratory .colorTxt .showYear{font-size: 9rem; -webkit-text-stroke-width: medium; letter-spacing: 1rem;}

    .laboratory .colorShow .poster .title { font-size: 3rem; margin: 2rem 0; }
    .laboratory .colorShow .poster .textArea { padding: 0 5%; font-size: 1.3rem;}

    .laboratory .showHist {padding: 7rem 0;}
    .laboratory .showHist .title{font-size: 3.5rem; margin-bottom: 5rem;}

    .laboratory .research .itemlist .item .circle{border-radius: 50%; font-weight: bold; font-size: 1.5rem;}
    .laboratory .research .itemlist .item .circle.type1{margin-top: 0%; background-color: #bdbdbd; color:var(--main-color);}
    .laboratory .research .itemlist .item .circle.type2{margin-top: -25%; background-color: var(--main-color); color:#fff;}

}

/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media screen and (min-width:480px) and (max-width:767px) { 
    /* ================================================================= 
    * 컬러검색
    * ================================================================= */
    .search .esccolor .imgArea{ position: absolute; width: 100%; display: block; }
    .search .esccolor .title{ font-size: 3rem; text-align: -webkit-right; color:#fff}
    .search .esccolor .textArea{ width: 100%; margin: 0; margin-left: auto; font-size: 1.3rem; }

    .search .findArea .iptArea{font-size: 1.7rem; padding: 0.5rem; display: flex; flex-wrap: wrap;}
    .search .findArea .iptArea .word{ margin:1rem 0 1rem 1rem; width: 85%;}
    .search .findArea .iptArea .btnColorPk{ margin: auto 0 auto auto;}
    .search .findArea .iptArea .btnColorPk .iptCp{bottom: -20%; }
    .search .findArea .iptArea .btnColorPk .btn{padding: 0.5rem 1rem; font-size: 1rem; height: 3rem;}

    .search .findArea .explain{font-size: 1rem; margin: 1rem;}
    .search .findArea .type li { font-size: 1.5rem; margin-right:0.3rem;}
    .search .findArea .type li::before { margin-right: 0.3rem;}
    .search .findArea .type li .en { font-size: 1rem;}

    .search .findArea .colorArea li {margin: 0.75%; width: 11%;}

    
    /* 컬러 바*/
    .colorBar {position: relative; width: 100%; border: none; height: 29em; margin: 0;}

    .search .esccolor {min-width: 100%;}
    .search .findArea {padding-left: 0; min-width: 100%; overflow: hidden;}
    .search .findArea .colorArea{width: 100%;margin-bottom: 0;}
    .clr-picker {width: 100% !important} 
    .colorBar .setColor {width: 100%; height: 5rem; margin: 0; padding: 0; position: absolute; top: 0}
    .colorBar .colorList {position:absolute; bottom: 0; height: 20rem; margin: 0; display: flex; flex-wrap: wrap; overflow-y: scroll    ;}
    .colorList li {margin-right: 0.5em;}
    .colorBar .selectColor {margin: 0.5em; width: 95%;}
    .colorBar .colorList .selectColor{margin: 0.5em; width: 10em;}
    .colorBar .colorCode {font-size: 1.5em; margin-left: 0.5rem;}


    /* ================================================================= 
    * 컬러연구소
    * ================================================================= */
    .laboratory .esc {display: block;}
    .laboratory .esc .imgArea{width: 100%; }
    .laboratory .esc .textArea{width: 100%; padding: 10% 5%;}
    
    .laboratory .esc .textArea p { font-size:1.3rem;}
    .laboratory .esc .textArea .title{ font-size:3rem;}
    
    .laboratory .concept {position: relative; margin: 0 auto; }
    .laboratory .concept img{position: absolute; width: 100%; bottom: 0;}
    .laboratory .concept .textArea {position: relative; width: 100%; padding: 10% 5%; padding-top:0; display: block;}
    .laboratory .concept .textArea .nomalTxt{font-size: 2rem; width: 100%; margin: 20% 5%; color:#000;}
    .laboratory .concept .textArea p{width: 70%; margin: 10%;}
    .laboratory .concept .textArea .btxt {margin: 0 10%;}
    .laboratory .concept .textArea .btxt .title{font-size: 2rem;}

    .laboratory .colorTxt {font-size: 2rem; margin: 3rem 0;}
    .laboratory .colorTxt .showYear{font-size: 6rem; letter-spacing: 0.5rem;}

    .laboratory .colorShow{ margin: 3rem auto; position: relative;}
    .laboratory .bgImg{ position: absolute; overflow: hidden; bottom: 0;}
    .laboratory .bgImg .bgblack{ position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.3;}
    .laboratory .bgImg img{ width: 100%; margin-top: -45%;}
    .laboratory .colorShow .poster{ padding: 5%; display: block;}
    .laboratory .colorShow .poster img{ width: 60%; height: max-content;}
    .laboratory .colorShow .poster .title { font-size: 2rem; margin: 1rem 0; }
    .laboratory .colorShow .poster .textArea { padding: 0 5%; font-size: 1.3rem;}
    
    .laboratory .showHist {margin: 2rem 0; padding: 5rem 0;}
    .laboratory .showHist .title{font-size: 3rem; margin-bottom: 5rem;}
    .laboratory .showHist .swiper .swiper-slide-active{transform: scale(1);}

    .laboratory .research .title{ font-size: 2.2rem;}
    .laboratory .research .itemlist{display: block;}
    .laboratory .research .itemlist .item {width: 95%; margin: 1rem 1.5%; padding: 2rem; }
    .laboratory .research .itemlist .item li {display: block; margin-top: -10%;}
    .laboratory .research .itemlist .item .head{font-size: 1.2rem; aspect-ratio: auto;}
    .laboratory .research .itemlist .item .head .t1{font-size: 1.7rem; }
    .laboratory .research .itemlist .item .circle{ font-size: 2rem; aspect-ratio:auto; border-radius: 20px;}
    .laboratory .research .itemlist .item .circle.type1{margin-top: 0%;}
    .laboratory .research .itemlist .item .circle.type2{margin-top: 0%;}
}


/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media screen and (max-width:479px) { 
    /* ================================================================= 
    * 컬러검색
    * ================================================================= */
    .search .esccolor .imgArea{ position: absolute; width: 100%; display: block; }
    .search .esccolor .title{ font-size: 3rem; text-align: -webkit-right; color:#fff}
    .search .esccolor .textArea{ width: 100%; margin: 0; margin-left: auto; font-size: 1.2rem; }

    .search .findArea .iptArea{font-size: 1.5rem; padding: 0.5rem; display: flex; flex-wrap: wrap;}
    .search .findArea .iptArea .word{ margin:1rem 0 1rem 1rem; width: 85%;}
    .search .findArea .iptArea .btnColorPk{ margin: auto 0 auto auto;}
    .search .findArea .iptArea .btnColorPk .iptCp{bottom: -20%; }
    .search .findArea .iptArea .btnColorPk .btn{padding: 0.5rem 1rem; font-size: 1rem; height: 3rem;}

    .search .findArea .explain{font-size: 0.8rem; margin: 1rem;}
    .search .findArea .type li { font-size: 1.3rem; margin-right:0.2rem;}
    .search .findArea .type li::before { margin-right: 0.2rem;}
    .search .findArea .type li .en { font-size: 0.7rem;}

    .search .findArea .colorArea li {margin: 0.75%; width: 11%;}


    /* 컬러 바*/
    .colorBar {position: relative; width: 100%; border: none; height: 29em; margin: 0;}

    .search .esccolor {min-width: 100%;}
    .search .findArea {padding-left: 0; min-width: 100%; overflow: hidden;}
    .search .findArea .colorArea{width: 100%;margin-bottom: 0;}
    .clr-picker {width: 100% !important} 
    .colorBar .setColor {width: 100%; height: 5rem; margin: 0; padding: 0; position: absolute; top: 0}
    .colorBar .colorList {position:absolute; bottom: 0; height: 20rem; margin: 0; display: flex; flex-wrap: wrap; overflow-y: scroll    ;}
    .colorList li {margin-right: 0.5em;}
    .colorBar .selectColor {margin: 0.5em; width: 95%;}
    .colorBar .colorList .selectColor{margin: 0.5em; width: 95%; height: 4em;}
    .colorBar .colorCode {font-size: 1.5em; margin-left: 0.5rem;}

    /* ================================================================= 
    * 컬러연구소
    * ================================================================= */
    .laboratory .esc {display: block;}
    .laboratory .esc .imgArea{width: 100%; }
    .laboratory .esc .textArea{width: 100%; padding: 10% 5%;}
    
    .laboratory .esc .textArea p { font-size:1.1rem;}
    .laboratory .esc .textArea .title{ font-size:2.2rem;}
    
    .laboratory .concept {position: relative; margin: 0 auto; }
    .laboratory .concept img{position: absolute; width: 100%; bottom: 0;}
    .laboratory .concept .textArea {position: relative; width: 100%; padding: 10% 5%; display: block;}
    .laboratory .concept .textArea .nomalTxt{font-size: 1.5rem; width: 100%; margin: 5%; color:#000;}
    .laboratory .concept .textArea p{width: 70%; margin: 10%;}
    .laboratory .concept .textArea .btxt {margin: 0 10%;}
    .laboratory .concept .textArea .btxt .title{font-size: 2rem;}

    .laboratory .colorTxt {font-size: 1.5rem; margin: 3rem 0;}
    .laboratory .colorTxt .showYear{font-size: 5rem; letter-spacing: 0.5rem;}

    .laboratory .colorShow{ margin: 3rem auto; position: relative;}
    .laboratory .bgImg{ position: absolute; overflow: hidden; bottom: 0;}
    .laboratory .bgImg .bgblack{ position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.3;}
    .laboratory .bgImg img{ width: 100%; margin-top: -45%;}
    .laboratory .colorShow .poster{ padding: 5%; display: block;}
    .laboratory .colorShow .poster img{ width: 60%; height: max-content;}
    .laboratory .colorShow .poster .title { font-size: 2rem; margin: 1rem 0; }
    .laboratory .colorShow .poster .textArea { padding: 0 5%; font-size: 1.3rem;}
    
    .laboratory .showHist {margin: 2rem 0; padding: 5rem 0;}
    .laboratory .showHist .title{font-size: 2rem; margin-bottom: 5rem;}
    .laboratory .showHist .swiper .swiper-slide-active{transform: scale(1);}

    .laboratory .research .title{ font-size: 2.2rem;}
    .laboratory .research .itemlist{display: block;}
    .laboratory .research .itemlist .item {width: 95%; margin: 1rem 1.5%; padding: 2rem; }
    .laboratory .research .itemlist .item li {display: block; margin-top: -10%;}
    .laboratory .research .itemlist .item .head{font-size: 1.2rem; aspect-ratio: auto;}
    .laboratory .research .itemlist .item .head .t1{font-size: 1.7rem; }
    .laboratory .research .itemlist .item .circle{ font-size: 2rem; aspect-ratio:auto; border-radius: 20px;}
    .laboratory .research .itemlist .item .circle.type1{margin-top: 0%;}
    .laboratory .research .itemlist .item .circle.type2{margin-top: 0%;}
}