@charset "UTF-8";
@import url("/humanframe/theme/ocean/assets/style/field-main.css");

.field .field-main-visual {background-color:#f6e6e3;background-image:url("../image/main/incheon-portal-field-main-visual.jpg");}
.field .field-main-visual .field-main-slogan { color:#333333;}

/* left-area */
.field .mid-cont-inner .cont-wrap.left-area{width: 890px}
.field .mid-cont-inner .cont-wrap.left-area ul > li {height:200px;}
.field .mid-cont-inner .cont-wrap.left-area ul > li a {width:290px;height:200px;background-color:#c7e0f0;background-position:80% 80%;border:1px solid #b0d6ee;margin-right:10px;font-size:20px;}
.field .mid-cont-inner .cont-wrap.left-area ul > li:nth-child(1) a{background-image: url('../image/main/img-health-info01.png');}
.field .mid-cont-inner .cont-wrap.left-area ul > li:nth-child(2) a{background-image: url('../image/main/img-health-info02.png');}
.field .mid-cont-inner .cont-wrap.left-area ul > li:nth-child(3) a{background-image: url('../image/main/img-health-info03.png');margin-right:0;}

.field .mid-cont-inner .cont-wrap.right-area{width:270px}
.field .mid-cont-inner .cont-wrap.right-area ul > li { float:none;width:100%;height:95px;padding:0;}
.field .mid-cont-inner .cont-wrap.right-area ul > li a {position:relative;width:100%;height:95px;background-color:#bbe5dc;border:1px solid #9eded0;padding:0 60px 0 28px;box-sizing:border-box;line-height:93px;}
.field .mid-cont-inner .cont-wrap.right-area ul > li a:before { left:auto;right:28px;border-radius:0;width:60px;height:100%;background-position:50% 50%;}
.field .mid-cont-inner .cont-wrap.right-area ul > li:nth-child(1) { margin-bottom:10px;margin-top:0;}
.field .mid-cont-inner .cont-wrap.right-area ul > li:nth-child(1) a:before{background-image: url('../image/main/icon-health01.png');}
.field .mid-cont-inner .cont-wrap.right-area ul > li:nth-child(2) a:before{background-image: url('../image/main/icon-health02.png');}

@media all and (max-width:1172px){
    .field .mid-cont-inner{height:auto;}    
    .field .mid-cont-inner .cont-wrap.left-area{width:100%;}
    .field .mid-cont-inner .cont-wrap.left-area ul > li { width:32%;margin-right:2%;}
    .field .mid-cont-inner .cont-wrap.left-area ul > li:nth-child(3) { margin-right:0;}
    .field .mid-cont-inner .cont-wrap.left-area ul > li a { width:100%;}
    .field .mid-cont-inner .cont-wrap.right-area{width:100%;}
    .field .mid-cont-inner .cont-wrap.right-area ul > li {font-size: 18px; height: auto;}
}
@media all and (max-width:768px){
    
    .field .bottom-cont-inner .cont-wrap dl > dd > ul > li{width:100%;margin-right:0;}
    .bottom-cont-inner{margin-top:20px;}
    .field .mid-cont-inner .cont-wrap.right-area > div{height:auto;}
    .field .mid-cont-inner .cont-wrap.right-area ul{float:none;margin:0 auto;width:100%;}
    .field .mid-cont-inner .cont-wrap.right-area > div{padding:20px 20px 0 20px;}
    .field .mid-cont-inner .cont-wrap.right-area ul > li{width:100%;}
    .field .mid-cont-inner .cont-wrap.right-area > div .txt-wrap{width:100%;}
}
@media all and (max-width:480px){
    .field .mid-cont-inner .cont-wrap.left-area ul > li{width:100%;height: auto;overflow:hidden;margin-bottom: 10px;margin-right:0;}
    .field .mid-cont-inner .cont-wrap.left-area ul > li:nth-child(even){float:right;}
    .field .mid-cont-inner .cont-wrap.left-area ul > li a{width:100%; background-position:97% 50%; background-size:80px; font-size: 18px;}
    .field .mid-cont-inner .cont-wrap.left-area ul > li:nth-child(1) a{height:95px;width:100%;}
    .field .mid-cont-inner .cont-wrap.left-area ul > li:nth-child(2) a{height:95px;width:100%;}
    .field .mid-cont-inner .cont-wrap.left-area ul > li:nth-child(3) a{height:95px;width:100%;}
	
    .field .mid-cont-inner .cont-wrap.left-area ul > li a strong {display: inline-block; vertical-align: middle; line-height: 1.3;}
    .field .mid-cont-inner .cont-wrap.left-area ul > li a {background-size: 64px;}

    .field .mid-cont-inner .cont-wrap.right-area { margin-top:0;}
    .field .mid-cont-inner .cont-wrap.right-area ul > li a, .field .mid-cont-inner .cont-wrap.left-area ul > li a{height: 76px !important; line-height: 72px; padding: 0 18px;}
	.field .mid-cont-inner .cont-wrap.right-area ul > li a:before {right: 17px;width: 54px;}
	.field .mid-cont-inner .cont-wrap.right-area ul > li:nth-child(1) a:before{background-size: 51px;}
	.field .mid-cont-inner .cont-wrap.right-area ul > li:nth-child(2) a:before{background-size: 46px;}
}