*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{vertical-align: top; max-width: 100%; height: auto;}
/**/
html, body {font-family: 'Noto Sans KR', sans-serif; overflow-x: hidden; background-color: #fff;}
.wrap {width: 100%; max-width: 1200px; position: relative; margin: 0 auto;}
.wrap:after, ul:after {clear: both; content: ""; display: block;}

@media screen and (max-width : 768px){
    .pc {display: none !important;}
}
@media screen and (min-width : 769px){
    .mob {display: none !important;}
}

/**/
.pf_visual {height: 100vh; background: url(../img/gem.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_visual .wrap {height: 100%;}
.pf_visual dl {display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; height: 100%; text-align: center;}
.pf_visual dl dt {font-size: 20px;}
.pf_visual dl dd {font-size: 60px; font-weight: bold;}

@media screen and (max-width:768px){
    .pf_visual dl dd {font-size: 25px;}
}


/**/
.pf_main {padding-top: 190px; background: url(../img/bg01.jpg); background-position: top; position: relative; z-index: 2; background-size: 100% auto; background-repeat: no-repeat; background-color: #fff;}
.pf_main .textbox h2 {font-size: 20px; font-family: 'Poppins', sans-serif; margin-bottom: 60px;}
.pf_main .textbox dl {margin-bottom: 100px; word-break: keep-all;}
.pf_main .textbox dl dt {font-size: 80px; margin-bottom: 40px;  font-weight: bold; line-height: 1.2; font-family: 'Poppins', sans-serif;}
.pf_main .textbox dl dd {font-size: 18px; color: #666666; line-height: 1.5;}
.pf_main .textbox a {padding: 15px 35px; display: inline-block; background: #000; color: #fff; border-radius: 100px; text-align: center; margin-bottom: 100px;}

@media screen and (max-width:768px){
    .pf_main {padding-top: 110px;}
    
    .pf_main .textbox h2 {font-size: 20px; margin-bottom: 15px;}
    .pf_main .textbox dl {margin-bottom: 55px;}
    
    .pf_main .textbox dl dt {font-size: 35px; margin-bottom: 30px;}
    .pf_main .textbox dl dd {font-size: 14px;}
    
.pf_main .textbox a {padding: 15px 35px; display: inline-block; background: #000; color: #fff; border-radius: 100px; text-align: center; margin-bottom: 100px;}
}



/**/



.pf_main .onesbox {position: relative; margin-bottom: 150px; display: block;}
.pf_main .right_tablet { display: inline-block; box-sizing: border-box; padding-left: 36%;}
.pf_main .left_mobile {position: absolute; bottom: -20%; width: 100%;}
.pf_main .left_mobile .imgbox {text-align: right; box-sizing: border-box; padding: 0 55% 0 20%;}

.pf_main .middle-box {text-align: right; position: relative;  z-index: -1; margin-top: -50px;}

@media screen and (max-width : 768px){
    .pf_main {text-align: center;}
    
    .pf_main .onesbox {margin-bottom: 80px;}
    .pf_main .right_tablet {padding-left: 15%;}
    .pf_main .left_mobile .imgbox {text-align: left; box-sizing: border-box; padding: 0 70% 0 5%    ;}
    
    
    .pf_main .middle-box {box-sizing: border-box; padding-left: 20%;}
    
}


/**/
.pf_main .admin {position: relative; margin-top: 350px; box-sizing: border-box; padding: 0 3%;}
.pf_main .admin li {float: left; width: 60%;}
.pf_main .admin li:nth-of-type(2) {width: 40%;}
.pf_main .admin li:nth-of-type(2) h2 {font-size: 80px; margin-bottom: 50px;}
.pf_main .admin li:nth-of-type(2) dl dt {font-size: 35px; margin-bottom: 20px; font-weight: bold;}
.pf_main .admin li:nth-of-type(2) dl dd {font-size: 24px; color: #666;}

.pf_main .admin2 {margin-bottom: 150px;}
.pf_main .admin2 li {float: left;}
.pf_main .admin2 li:nth-of-type(1) {margin-top: 120px; margin-left: 5%; padding-bottom: 120px; width: calc(40% - 5%);}
.pf_main .admin2 li:nth-of-type(1) dl dt {font-size: 35px; font-weight: bold; margin-bottom: 40px;}
.pf_main .admin2 li:nth-of-type(1) dl dd {font-size: 30px; color: #666;}
.pf_main .admin2 li:nth-of-type(1) dl dd span {font-size: 24px;}
.pf_main .admin2 li:nth-of-type(1) dl dd i {font-size: 30px; color: #000; font-style: normal;}

.pf_main .admin2 li:nth-of-type(2) {position: relative; width: calc(60% - 9%); text-align: right; margin-right: 9%; margin-top: -13%;}


@media screen and (max-width : 1672px){
    
    .pf_main .admin li:nth-of-type(2) h2 {font-size: 60px;}
    .pf_main .admin li:nth-of-type(2) dl dt {font-size: 25px;}
    .pf_main .admin li:nth-of-type(2) dl dd {font-size: 18px;}
    
    .pf_main .admin2 li:nth-of-type(2) {width: 60%; text-align: right; margin-right: 0; margin-top: -13%; box-sizing: border-box; padding-right: 5%;}
    
    .pf_main .admin2 li:nth-of-type(1) dl dt {font-size: 35px; margin-bottom: 30px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd {font-size: 20px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd span {font-size: 20px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd i {font-size: 20px;}
    
}

@media screen and (max-width : 1346px){
    
    .pf_main .admin li:nth-of-type(2) h2 {font-size: 40px; margin-bottom: 20px;}
    .pf_main .admin li:nth-of-type(2) dl dt {font-size: 18px;}
    .pf_main .admin li:nth-of-type(2) dl dd {font-size: 16px;}
    
    .pf_main .admin2 li:nth-of-type(1) dl dt {font-size: 35px; margin-bottom: 30px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd {font-size: 16px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd span {font-size: 16px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd i {font-size: 16px;}
    
}

@media screen and (max-width : 1076px){
    
    .pf_main .admin li:nth-of-type(2) h2 {font-size: 30px; }
    .pf_main .admin li:nth-of-type(2) dl dt {font-size: 15px;}
    .pf_main .admin li:nth-of-type(2) dl dd {font-size: 12px;}
    
    .pf_main .admin2 li:nth-of-type(1) dl dt {font-size: 24px; margin-bottom: 20px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd {font-size: 12px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd span {font-size: 12px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd i {font-size: 12px;}
    
}





@media screen and (max-width : 768px){
    
    .pf_main .admin {display: flex; flex-direction: column-reverse; padding: 0 5%; margin-top: 80px;}
    .pf_main .admin li {width: 95%; float: none; margin: 0 auto;}
    .pf_main .admin li:nth-of-type(2) {width: auto; margin-bottom: 80px;}
    .pf_main .admin li:nth-of-type(2) h2 {font-size: 50px; margin-bottom: 25px;}
    .pf_main .admin li:nth-of-type(2) dl dt {font-size: 20px; margin-bottom: 20px;}
    .pf_main .admin li:nth-of-type(2) dl dd {font-size: 13px; color: #666;}
    
    
    .pf_main .admin2 {margin-bottom: 90px; display: flex; flex-direction: column-reverse; box-sizing: border-box; padding: 0 5%;}
    .pf_main .admin2 li {float: none;}
    .pf_main .admin2 li:nth-of-type(1) {margin-top: 0; margin-left: 0; padding-bottom: 0; width: auto;}
    .pf_main .admin2 li:nth-of-type(1) dl dt {font-size: 27px; margin-bottom: 20px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd {font-size: 14px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd span {font-size: 14px;}
    .pf_main .admin2 li:nth-of-type(1) dl dd i {font-size: 14px;}

    .pf_main .admin2 li:nth-of-type(2) {position: relative; width: 95%; text-align: center; margin: 30px auto;}
    
}



/**/
.pf_main .listcut {text-align: center; margin-bottom: 110px;}
.pf_main .listcut ul {display: block; width: 80%; margin: 0 5% 0 auto;}
.pf_main .listcut li {float: left; height: 90px; border-radius: 10px; width: calc(100%/7); line-height: 90px; font-size: 26px; color: #9d9d9d;}
.pf_main .listcut li:nth-of-type(2) {color: #fff; font-size: 35px; background: #795f4a; }

@media screen and (max-width:1356px){
    
    .pf_main .listcut ul {display: block; width: 90%; margin: 0 auto;}
    .pf_main .listcut li {font-size: 20px;}
    .pf_main .listcut li:nth-of-type(2) {font-size: 25px;}
}

@media screen and (max-width:927px){
    
    .pf_main .listcut ul {display: block; width: 100%; margin: 0 auto;}
    .pf_main .listcut li {font-size: 16px; height: 50px; line-height: 50px;}
    .pf_main .listcut li:nth-of-type(2) {font-size: 18px;}
}


@media screen and (max-width:768px){
    
    .pf_main .listcut {margin-bottom: 50px; box-sizing: border-box; padding: 0 5%;}
    .pf_main .listcut ul {display: block; width: auto; margin: 0;}
    .pf_main .listcut li {font-size: 13px;}
    .pf_main .listcut li:nth-of-type(2) {font-size: 13px;}
}


.pf_main .img02 {text-align: center; max-height: 500px; overflow: hidden;}

@media screen and (max-width:768px){
    
    .pf_main .img02 {width: 80%; margin: 0 auto; height: auto; margin-bottom: 140px;}
}


.pf_main .img01bg {height: 100vh; background: url(../img/img01.jpg); background-attachment: fixed; background-position: center top; background-repeat: no-repeat;}

@media screen and (max-width:768px){
    
    .pf_main .img01bg {height: 620px; background-attachment: scroll;}
    
}

.pf_main .gem_img10 {margin: 130px 0; text-align: center;}

@media screen and (max-width:768px){
    
    .pf_main .gem_img10 {margin: 95px 0 100px; box-sizing: border-box; padding: 0 5%;}
    .pf_main .gem_img10 .img10_m dl {margin-top: 65px;}
    .pf_main .gem_img10 .img10_m dl dt {font-size: 20px; font-weight: bold; color: #000; margin-bottom: 25px;}
    .pf_main .gem_img10 .img10_m dl dd {font-size: 14px; color: #666;}
    
}


.pf_main .colorconcept {margin-bottom: 270px; background-image: url(../img/bg02.jpg); background-size: 100% auto; background-repeat: no-repeat; position: relative;}
.pf_main .colorconcept h2 {font-size: 20px; margin-bottom: 60px; box-sizing: border-box; padding-right: 50px; font-family: 'Poppins', sans-serif;}
.pf_main .colorconcept dl {margin-bottom: 95px;}
.pf_main .colorconcept dl dt {font-size: 90px; font-weight: bold; line-height: 1.2; font-family: 'Poppins', sans-serif;}
.pf_main .colorconcept dl dd {font-size: 15px; font-weight: 300; color: #656565; word-break: keep-all;}
.pf_main .colorconcept .concept {padding-bottom: 73%;}
.pf_main .colorconcept .concept li {width: 95px; height: 95px; border-radius: 100%; background: #998465; float: left; margin-right: 10px;}
.pf_main .colorconcept .concept li:last-child {margin-right: 0; background: #000;}
.pf_main .colorconcept .concept li:nth-of-type(2) {background: #b38859;}
.pf_main .colorconcept .concept li:nth-of-type(3) {background: #bfbfbf;}
.pf_main .colorconcept .kitaos {position: absolute; top: 25%; width: 100%; transform: translateY(-50%) !important; z-index: 2;}
.pf_main .colorconcept .kit {box-sizing: border-box; padding-right: 25%; position: absolute; z-index: 2;}
.pf_main .colorconcept .pl {text-align: right;}

@media screen and (max-width:768px){
    
    .pf_main .colorconcept {margin-bottom: 100px; background: none;}
    .pf_main .colorconcept h2 {font-size: 20px; margin-bottom: 25px; padding-right: 0;}
    .pf_main .colorconcept dl {margin-bottom: 50px;}
    .pf_main .colorconcept dl dt {font-size: 45px; margin-bottom: 40px;}
    .pf_main .colorconcept dl dd {font-size: 12px;}
    
    .pf_main .colorconcept .concept {padding-bottom: 0;}
    .pf_main .colorconcept .concept li {float: left; margin: 0; width: calc(100%/4 - 30px/4); height: auto; margin-right: 10px;}
    .pf_main .colorconcept .concept li:after {content: ""; display: block; padding-bottom: 100%;}
    
    .pf_main .colorconcept .kitaos {position: static; top: auto; width: 100%; transform: none !important; z-index: 2;}
    .pf_main .colorconcept .kit { position: static; margin-top: 30px; box-sizing: border-box; padding: 0 5%; transform: none;}
    
    .pf_main .colorconcept .kitaos {position: static; transform: none !important; text-align: center;}
    .pf_main .colorconcept .kit {box-sizing: border-box; padding-right: 0; position: static; z-index: 2; text-align: center; padding: 0;}
    
}

.pf_main .gif_img {padding-bottom: 5%;}
.pf_main .gif_img dl {margin-bottom: 60px;}
.pf_main .gif_img dl dt {font-size: 30px; font-weight: bold;}
.pf_main .gif_img dl dd {font-size: 20px; color: #666;}

.pf_main .gif_img .img_box { position: relative; padding-bottom: 67%;}
.pf_main .gif_img .img_box .img_box_border {padding-bottom: 40%; border: 12px solid #000; border-radius: 30px; position: relative;}
.pf_main .gif_img .img_scroll { position: absolute; top: 0; border-radius: 46px 46px 0 0; overflow: hidden; box-sizing: border-box; padding: 12px;}




@media screen and (max-width : 768px){
.pf_main .gif_img dl {margin-bottom: 60px;}
    .pf_main .gif_img dl dt {font-size: 24px; margin-bottom: 25px;}
    .pf_main .gif_img dl dd {font-size: 16px; word-break: keep-all;}
    
    .pf_main .gif_img .img_box {padding-bottom: 100%;}
    
}

.gem06_link {padding: 130px 0 60px; text-align: center; background: #f3f4f6;}
.gem06_link a {color: #333; font-size: 30px; font-weight: 600;}
.gem06_link span {position: relative; top: -5px; margin-right: 20px;}
.gem06_link img {vertical-align: middle;}

@media screen and (max-width: 768px) {
    
    .gem06_link {padding: 60px 0 60px;}
    .gem06_link a {font-size: 20px;}
    
}



.gem_next {height: 560px; position: relative; overflow: hidden; text-align: left; background-image: url(/html/portfolio/brain/img/brain.png); background-position: center center; background-repeat: no-repeat; position: relative;}

.gem_next .link {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 888;}

.gem_next .textbox {position: absolute; top: 150px; color: #fff; z-index: 10; width: 95%; max-width: 1200px; left: 50%; transform: translateX(-50%);}
.gem_next .textbox dl dt {font-size: 20px; font-family: 'Poppins', sans-serif; font-weight: normal;}
.gem_next .textbox dl dd {font-size: 60px; font-weight: bold;}

@media screen and (max-width: 768px) {
    
    .gem_next {height: 250px;} 
    .gem_next .textbox {top: 50px;}
    .gem_next .textbox dl dd {font-size: 24px;}
    
}