*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{vertical-align: top; max-width: 100%; height: auto;}
/**/
html, body {}
.pwrap {width: 90%; max-width: 1200px; position: relative; margin: 0 auto;}
.pwrap:after, ul:after {clear: both; content: ""; display: block;}

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

/**/
.pf_visual {height: 100vh; position: relative;}

.pf_visual .videobox {position: relative; height: 100vh; background: url(../img/mokwoo_bg.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}
.pf_visual .videobox:before {background: rgba(0,0,0,0.5); width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; z-index: -1;}

.pf_visual .textbox {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: 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; font-family: 'Poppins', sans-serif;}
.pf_visual dl dd {font-size: 60px; font-weight: bold; line-height: 1.2;}

@media screen and (max-width:768px){
	
	.pf_visual .videobox {background: url(../img/mokwoo_bg_m.jpg); background-position: right center;}
	
	.pf_visual dl dt {font-size: 3vw;}
    .pf_visual dl dd {font-size: 8vw;}
	
	
}

.pf_next {height: 560px; position: relative; overflow: hidden; background-image: url(/listport/sunny/img/sunny00.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.pf_next .link {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 888;}
.pf_next .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
.pf_next .textbox {position: absolute; top: 150px; color: #fff; z-index: 10; width: 95%; max-width: 1200px; left: 50%; transform: translateX(-50%);}
.pf_next .textbox dl dt {font-size: 20px; font-family: 'Poppins', sans-serif; font-weight: normal;}
.pf_next .textbox dl dd {font-size: 60px; font-weight: bold;}

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

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

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



/*ㅡㅡㅡㅡ D-wep ㅡㅡㅡㅡ*/
#over_view {padding: 100px 0 150px;}
#over_view .dl01 {margin-bottom: 40px;}
#over_view .dl01 dt {font-size: 30px; margin-bottom: 40px; font-family: 'Poppins', sans-serif; font-weight: bold;}
#over_view .dl01 dd {font-size: 18px; color: #666; line-height: 1.3;}
#over_view .link {background: #333; color: #fff; font-size: 18px; padding: 15px 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; max-width: 180px; position: relative;}
#over_view .link a {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#over_view .link i {margin-left: 6%;}
/**/


.mookwoo01 {position: relative;}
.mookwoo01::after {content: ""; position: absolute; height: 85%; width: 100%; background: #eee; bottom: 0; left: 0; z-index: -1;}
.mookwoo01 .pwrap {max-width: 1300px;}
.mookwoo01 figure img{transform: translateX(-45px);}

.mookwoo02 {background:#eeeeee;}
.mookwoo02 ul {background-image: url(../img/mokwoo_05.png); background-repeat: no-repeat; background-position:center; display: flex; flex-wrap: wrap; transform: translateY(-5%); background-size: 50%;}
.mookwoo02 ul li {width: 50%;}
.mookwoo02 ul li:nth-of-type(2) {margin-top: 20%; position: relative; right: -10%}
.mookwoo02 ul li:nth-of-type(3) {margin-top: -20%;}
.mookwoo02 .imgbox {margin-top: -5%; position: relative; padding-bottom: 145px;}
.mookwoo02 .imgbox dl {position: absolute; bottom: 25%; left: 50%; max-width: 1200px; transform: translateX(-50%) translateY(50%); width: 100%;}
.mookwoo02 .imgbox dl dt {font-size: 30px; margin-bottom: 35px; font-weight: bold;}
.mookwoo02 .imgbox dl dd {font-size: 18px; line-height: 1.3;}

.pal_mookwoo {height: 920px; position: relative; overflow: hidden;background: transparent; background-image: url(../img/mokwoo_pallex.jpg); background-size: cover; background-attachment: fixed;}


.colorconcept {margin-top: 170px; margin-bottom: 300px;}
.colorconcept dl dt {font-size: 60px; font-weight: bold; margin-bottom: 45px; font-family: 'Poppins', sans-serif; line-height: 1;}
.colorconcept dl dd {color: #656565; font-size: 18px;}

.colorconcept .color {display: flex; margin-top: 60px;}
.colorconcept .color li {width: 97px; background: #008e47; margin-right: 15px; border-radius: 100%;}
.colorconcept .color li:nth-of-type(2) {box-sizing: border-box; border: 1px solid #dedede; background: #fff;}
.colorconcept .color li:last-child {background: #000; margin-right: 0;}
.colorconcept .color li::after {display: block; content:""; padding-bottom: 100%;}

.colorconcept .imgbox {position: relative;}
.colorconcept .imgbox figure {transform: translateX(5%);}

.colorconcept .imgbox .box {position: absolute; bottom: 5%; right: 0; z-index: -1;  width: 50%;}
.colorconcept .imgbox ul {display: flex; transform: translateY(-50%);}
.colorconcept .imgbox ul li:first-child {margin-right: 30px;}


@media screen and (max-width:768px){
	
	#over_view {padding: 50px 0 100px;}
	#over_view .dl01 dt {font-size: 24px; margin-bottom: 20px}
	#over_view .dl01 dd {font-size: 14px;}
	#over_view .link {font-size: 14px;}

	.mookwoo01 figure img{transform: translateX(0);}
	
	.mookwoo02 ul li:nth-of-type(2) {right: -4%;}
	.mookwoo02 .imgbox dl {position: static; bottom: 25%; left: 50%; max-width: 1200px; transform: none; width: 90%; margin: 20px auto 0; padding-bottom: 40px;}
	.mookwoo02 .imgbox dl dt {font-size: 16px; margin-bottom: 25px; font-weight: bold;}
	.mookwoo02 .imgbox dl dd {font-size: 14px;}

	.pal_mookwoo {height: 300px; background-attachment: scroll;}

	.colorconcept {margin-top: 80px; margin-bottom: 80px;}
	.colorconcept dl dt {font-size: 24px; margin-bottom: 25px;}
	.colorconcept dl dd {font-size: 14px;}

	.colorconcept .color {margin-top: 30px;}
	.colorconcept .color li {width: calc(100%/3 - 30px/3); margin-right: 15px;}
	
	.colorconcept .imgbox {margin-top: 40px;}
	.colorconcept .imgbox figure {position: relative; left: -10%;}

	.colorconcept .imgbox .box {width: 100%;}
	.colorconcept .imgbox ul {transform:translateY(-50%) translateX(30%);}
	.colorconcept .imgbox ul li:first-child {margin-right: 10px;}

	
}