@charset "utf-8";

.mo{display:none;}
.pc{display:inline-block;}

@media screen and (max-width:500px){
    .pc{display:none;}
    .mo{display:inline-block;}
}


#page{}

#page .description_box{position:relative;background-color:#f1f1f1;}
#page .description_box:after{content:"";display:block;clear:both;}
#page .description_box .thumbnail{background-color:#efefef;width:50%;float:right;background-image:url(../img/ko/image1.png);background-size:cover;background-repeat:no-repeat;background-position:center center;}
#page .description_box .thumbnail:before{content:"";display:block;padding-bottom:54.358%;}
#page .description_box .text{position:absolute;top:50%;left:25%;transform:translate(-50%,-50%);color:#222222;font-size:17px;font-weight:400;line-height:2.529;white-space:nowrap;}

@media screen and (max-width:1200px){
	#page .description_box .text{font-size:1.4vw;}
}

@media screen and (max-width:700px){
	#page .description_box .thumbnail{width:auto;float:none;}
	#page .description_box .text{transform:translate(0,0);float:none;position:static;padding:7%;text-align:left;white-space:normal;font-size:14px;}
}

@media screen and (max-width:500px){
    #page .description_box .text{font-size:12px;}
}

@media screen and (max-width:350px){
    #page .description_box .text{font-size:11px;}
}



#page .summary_box{margin-top:125px;}
#page .summary_box ul{margin:0;padding:0;list-style:none;}
#page .summary_box ul:after{content:"";display:block;clear:both;}
#page .summary_box ul li{float:left;width:calc(25% - 1.875%);margin-right:2.5%;border:1px solid #c3c3c3;box-sizing:border-box;position:relative;transition:background-image ease 0.3s, box-shadow ease 0.3s, border-color ease 0.3s;background-size:83.928%;background-repeat:no-repeat;background-position:center center;}
#page .summary_box ul li:nth-child(4n){margin-right:0;}
#page .summary_box ul li:before{content:"";display:block;padding-bottom:89%;}
#page .summary_box ul li .description{font-size:0;color:transparent;position:absolute;left:0;top:0;}
#page .summary_box ul li:hover{box-shadow:4px 4px 6px rgba(100,100,100,0.40);border-color:transparent;}
#page .summary_box ul li:nth-child(1){background-image:url(../img/ko/tab1.png);}
#page .summary_box ul li:nth-child(2){background-image:url(../img/ko/tab2.png);}
#page .summary_box ul li:nth-child(3){background-image:url(../img/ko/tab3.png);}
#page .summary_box ul li:nth-child(4){background-image:url(../img/ko/tab4.png);}
#page .summary_box ul li:nth-child(1):hover{background-image:url(../img/ko/tab1ov.png);}
#page .summary_box ul li:nth-child(2):hover{background-image:url(../img/ko/tab2ov.png);}
#page .summary_box ul li:nth-child(3):hover{background-image:url(../img/ko/tab3ov.png);}
#page .summary_box ul li:nth-child(4):hover{background-image:url(../img/ko/tab4ov.png);}

@media screen and (max-width:900px){
	#page .summary_box{margin-top:95px;}
}

@media screen and (max-width:700px){
	#page .summary_box{margin-top:65px;}
	#page .summary_box ul li{width:calc(50% - 7.5px);margin-right:15px;}
	#page .summary_box ul li:nth-child(2n){margin-right:0;}
	#page .summary_box ul li:nth-child(n+3){margin-top:15px;}
}

@media screen and (max-width:500px){
	#page .summary_box{margin-top:35px;}
}

@media screen and (max-width:350px){
	#page .summary_box{margin-top:30px;}
}



#page .value_box{margin-top:195px;position:relative;}
#page .value_box .thumbnail{width:75%;background-color:#efefef;position:relative;right:24%;background-image:url(../img/ko/image2.png);background-size:cover;background-repeat:no-repeat;background-position:center center;}
#page .value_box .thumbnail:before{content:"";display:block;padding-bottom:62.222%;}
#page .value_box .text{position:absolute;top:50%;width:42.5%;right:0;transform:translateY(-50%);}
#page .value_box .text .title{border:5px solid #e1e1e1;padding:6% 0 6% 28%;width:129%;box-sizing:border-box;position:absolute;right:0;font-size:30px;font-weight:300;color:#111111;line-height:1.666;}
#page .value_box .text .title b{font-weight:500;}
#page .value_box .text .description{margin-top:50%;color:#000000;font-size:15px;font-weight:400;line-height:2.133;white-space:nowrap;position:relative;}

@media screen and (max-width:1200px){
	#page .value_box .text .title{font-size:2.5vw;}
	#page .value_box .text .description{font-size:1.25vw;}
}

@media screen and (max-width:900px){
	#page .value_box{margin-top:145px;}
}

@media screen and (max-width:700px){
	#page .value_box{margin-top:95px;}
	#page .value_box .thumbnail{width:auto;float:none;right:0;margin:0 -20px;}
	#page .value_box .text{transform:translate(0,0);float:none;position:relative;width:auto !important;margin-top:-10% !important;}
	#page .value_box .text .title{font-size:18px !important;position:static;width:auto !important;padding:13% 6% 6% !important;text-align:center;}
	#page .value_box .text .description{font-size:14px !important;white-space:normal;margin-top:30px !important;text-align:center;}
}

@media screen and (max-width:500px){
	#page .value_box{margin-top:45px;}
	#page .value_box .text .title{font-size:15px !important;}
	#page .value_box .text .description{font-size:12px !important;margin-top:25px !important;}
}

@media screen and (max-width:350px){
	#page .value_box{margin-top:40px;}
	#page .value_box .text .title{font-size:14px !important;}
	#page .value_box .text .description{font-size:11px !important;margin-top:20px !important;}
}