@charset "UTF-8";

.field {letter-spacing: -0.05em;}
.field .field-main-visual {display:block;position:relative;width:100%;height:240px;text-align:center;background-color:#4e99ff;background-repeat:no-repeat;background-position:50% 0;background-size:1920px 240px;}
.field .field-main-visual .field-main-slogan { display:block;max-width:1172px;margin:0 auto;padding:74px 0;text-align:left;vertical-align:middle;font-family:"Noto Sans";color:#fff;}
.field .field-main-visual .field-main-slogan span { display:block;font-size:25px;}
.field .field-main-visual .field-main-slogan strong { display:block;margin-top:10px;font-size:38px;font-weight:600;}
.field .field-main-wrap { display:block; width:100%;max-width:1172px;position:relative;margin:70px auto;}
.field > section{min-width:100%}
.field .top-cont-inner{overflow: hidden;}
.field .cont-wrap.wraping{display:block;float: left; width:50%; margin-bottom: 70px;}
.field .cont-wrap.wraping:after{content: ''; display: block; clear: both;}

/* dots */
.field .top-cont-inner { overflow:hidden;margin-bottom:70px;}
.field .top-cont-inner .slider-wrap { display:block;float:left; width:592px;}
.field .top-cont-inner .news-wrap { display:block;float:right; width:540px;}

/* slider */
.field .slider-wrap .owl-carousel{display:block;position:relative;width:100%; height: 370px;}
.field .slider-wrap .owl-carousel .owl-stage-outer { display:block;position:relative;overflow:hidden;height:100%;width:100%;}
.field .slider-wrap .owl-carousel .owl-item img{display:block;height: 370px;}
.field .slider-wrap .owl-carousel .owl-dots{position: absolute; bottom: 12px;width:100%;text-align:center;}
.field .slider-wrap .owl-carousel .owl-dots .owl-dot{display:inline-block;overflow:hidden;width:14px;height:14px;border-radius:50%;margin:0 10px 0 0; background-color:#fff;opacity:1;}
.field .slider-wrap .owl-carousel .owl-dots .owl-dot:last-child { margin-right:0;}
.field .slider-wrap .owl-carousel .owl-dots .owl-dot.active {background-color:#0067b6; }
.field .slider-wrap .owl-carousel .owl-dots .owl-dot span{ display:block;overflow:hidden;width:0; height:0;}
.field .slider-wrap .owl-carousel .owl-dots .owl-dot:hover {background-color: #00235d;}
.field .slider-wrap .owl-carousel .owl-nav .owl-next{background:url(/humanframe/theme/traffic/assets/image/main/incheon-portal-field-traffic-btn-next.gif) no-repeat; width:54px; height:54px; background-size:54px; color: transparent; position: absolute; top:50%; right:0; margin: -27px 0 0 0; border-radius: 0}
.field .slider-wrap .owl-carousel .owl-nav .owl-prev{background:url(/humanframe/theme/traffic/assets/image/main/incheon-portal-field-traffic-btn-prev.gif) no-repeat; width:54px; height:54px; background-size:54px; color: transparent; position: absolute; top:50%; left:0; margin: -27px 0 0 0; border-radius: 0}
.field .slider-wrap .owl-carousel .owl-thumbs { display:none !important; }


/* news-tab */
.field .cont-wrap .notice-tab{width:100%; height:370px; }
.field .news-tab-wrap {position:relative;/*width:585px;*/width:100%;}
.field .news-tab-wrap > .news-menu {overflow: hidden;}
.field .news-tab-wrap > .news-menu > li {}
.field .news-tab-wrap > .news-menu > li > .tab {position:absolute;top: 0px;height: 60px;line-height: 60px;z-index:50;width: 120px;}
.field .news-tab-wrap > .news-menu > li.on > .tab {background: #0067b6; color: #fff;}
.field .news-tab-wrap > .news-menu > li.on > .tab > a {font-size:20px;font-weight:400; color: #fff;border:0;}
.field .news-tab-wrap > .news-menu > li > .tab > a {font-family:"Noto Sans";color: #000;font-size:20px;display:inline-block;border: 1px solid #d8d8d8;border-bottom: 0; width: 120px;text-align: center;}
.field .news-tab-wrap > .news-menu > li:nth-child(2) > .tab {left:120px;}
.field .news-tab-wrap > .news-menu > li:nth-child(3) > .tab {left:240px;}
.field .news-tab-wrap > .news-menu > li:nth-child(4) > .tab {left:360px;}
.field .news-tab-wrap > .news-menu > li:nth-child(4) > .tab > a {width:130px;}
.field .news-list-wrap {display:block;position:relative;padding-top: 60px;border-bottom: 2px solid #0067b6;}
.field .news-list-wrap .board-title {margin:58px 0 0; padding:28px 0; border-top:2px solid #2d2b6f;}
.field .news-list-wrap .board-title > h1 {font-size:20px; margin:0 0 15px; color:#333; font-weight:400;}
.field .news-list-wrap .board-title > p {font-size:18px; margin:0 0 35px; color:#666; font-weight:300; height:44px; line-height:1.4;}
.field .news-list-wrap .board-title > span {font-size:14px; color:#888; font-weight:300;}
.field .news-list-wrap .news-list {width:100%;border-top: 2px solid #0067b6;}
.field .news-list-wrap .news-list li {overflow:hidden;border-top:1px solid #ddd;height: 50px;line-height: 50px;}
.field .news-list-wrap .news-list li:first-child{border-top:0;}
.field .news-list-wrap .news-list li .subject {width: calc(100% - 85px); font-size:18px; font-weight:400; color:#666; float:left;display:block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.field .news-list-wrap .news-list li .date{float:right;text-align:right; font-size:17px; color:#666; font-weight:400; }
/*.field .news-list-wrap .news-list li:first-child .subject,
.field .news-list-wrap .news-list li:first-child .date{color: #333}*/
.field .nsTab-contents {display:none;}
.field .nsTab-contents.on {display:block;}
.field .btn-view-more {position: absolute; top:0; right:0;width: 50px;height: 60px;border: 1px solid #d7d7d7;padding:16px;box-sizing: border-box;}
.field .btn-view-more:before{content: '';position: absolute;top: 29px;left: 12px;display: inline-block;width:26px;height: 2px;background: #b2b2b2;}
.field .btn-view-more:after{content: '';display: inline-block;position: absolute;top: 29px;left: 12px;width:26px;height: 2px;background: #b2b2b2;transform: rotate(-90deg);}
.field .btn-view-more > span { display:block;overflow:hidden;position:absolute;left:-9999999px;font-size:0;}


/* left-area */
.field .mid-cont-inner{width:100%; margin-bottom: 70px;}
.field .mid-cont-inner::after, .field .mid-cont-inner:after {content: " "; display: table; width: 100%; clear: both; height: 0; overflow: hidden;}
.field .mid-cont-inner .cont-wrap{display: inline-block}
.field .mid-cont-inner .cont-wrap.left-area{float:left;}
.field .mid-cont-inner .cont-wrap ul{display: block;overflow:hidden;}
.field .mid-cont-inner .cont-wrap.left-area ul > li {display: block;float:left;/*width:195px;height:160px;margin-right:10px;*/}
.field .mid-cont-inner .cont-wrap.left-area ul > li:last-child { margin-right:0;}
.field .mid-cont-inner .cont-wrap.left-area ul > li a{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:right bottom; padding: 28px 0 0 22px;font-family:"Noto Sans";font-size: 22px; color: #333333; font-weight: 300; line-height:1.3;box-sizing: border-box;}
.field .mid-cont-inner .cont-wrap ul > li a strong {display: block; font-weight: 500;}


/* right-area */
.field .mid-cont-inner .cont-wrap.right-area{float:right;}
.field .mid-cont-inner .cont-wrap.right-area ul{overflow:hidden;}
.field .mid-cont-inner .cont-wrap.right-area ul > li{display:block;float:left;width:50%;font-size:17px;color:#000;font-weight:400;padding:8px 0 34px 0;box-sizing:border-box;}
.field .mid-cont-inner .cont-wrap.right-area ul > li:nth-child(3),
.field .mid-cont-inner .cont-wrap.right-area ul > li:nth-child(4){padding:0}
.field .mid-cont-inner .cont-wrap.right-area ul > li a { display:block;position:relative;height:56px;padding-left:68px;line-height:52px;font-family:"Noto Sans";}
.field .mid-cont-inner .cont-wrap.right-area ul > li a:before { content:"";display:block;position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;background-repeat:no-repeat;background-position:50% 50%;}
.field .mid-cont-inner .cont-wrap.right-area ul > li a span { display:inline-block;line-height:1.2;vertical-align:middle;}

/* bottom -cont */
.field .bottom-cont-inner{overflow: hidden; width: 100%;}
.field .bottom-cont-inner .cont-wrap dl{display:block;position:relative; width: 100%;}
/*.field .bottom-cont-inner .cont-wrap dl:after{content: ''; display: block; clear:both;}
.field .bottom-cont-inner .cont-wrap dl > dt, .bottom-cont-inner dl > dd{float: left;}*/
.field .bottom-cont-inner .cont-wrap dl > dt{display:block;position:absolute;left:0;top:0;width:160px;height:100%;padding: 24px 0 28px 38px;background: #0067b6;font-family:"Noto Sans";font-size:20px;color: #fff;font-weight: 300;box-sizing: border-box;letter-spacing: -0.05em;vertical-align:middle;line-height:1.2;}
.field .bottom-cont-inner .cont-wrap dl > dd:before {content:'';display: inline-block;position:absolute;left:-7px;top:50px;/*top:50%;margin-top:-7px;*/width: 14px;height: 14px;transform: rotate(45deg);background: #0067b6;position: absolute;top: 50%;margin-top: -7px;right: -7px;}
.field .bottom-cont-inner .cont-wrap dl > dd {display:block;position:relative;background: #f5f5f5;width:calc(100% - 160px);padding: 20px 0 22px 83px;margin-left:160px;box-sizing: border-box;}
.field .bottom-cont-inner .cont-wrap dl > dd > ul{overflow:hidden;}
.field .bottom-cont-inner .cont-wrap dl > dd > ul > li{display:block;float:left;width:31.3333%;margin-right:2%;/*width: 219px;*/font-size:17px;line-height: 32px;color: #666; text-align: left;box-sizing:border-box;}
.field .bottom-cont-inner .cont-wrap dl > dd > ul > li a { display:block;position:relative;padding:0 10px;box-sizing:border-box;}
.field .bottom-cont-inner .cont-wrap dl > dd > ul > li a:before{content: ''; display: inline-block; overflow:hidden;position:absolute;left:0;top:17px;width:3px; height: 3px; background-color: #666; margin-right: 6px; vertical-align: middle;}
.field .bottom-cont-inner .cont-wrap dl > dd > ul > li a:hover::before { background-color:#333;}
.field .bottom-cont-inner .cont-wrap dl > dd > ul > li:hover{font-weight: 700; color: #333; text-decoration: underline #707070;}
.field .bottom-cont-inner .cont-wrap dl > dd > ul > li a span { display:inline-block;line-height:1.2;vertical-align:middle;}

@media all and (max-width:1172px){
    .field .top-cont-inner,
    .field .mid-cont-inner {margin-bottom:30px;}
    .field .top-cont-inner .slider-wrap { width:48.5%;margin-right:3%;}
    .field .top-cont-inner .news-wrap { width:48.5%;}
    .field .field-main-visual .field-main-slogan { width:auto;margin:0 4vw;}
    .field .field-main-wrap { width:auto;margin:20px 4vw;}
    .field .mid-cont-inner .cont-wrap.left-area,
    .field .mid-cont-inner .cont-wrap.right-area { float:none;width:100% !important;}
    .field .mid-cont-inner .cont-wrap.right-area  {margin-top:20px;}
    .field .bottom-cont-inner .cont-wrap dl > dd > ul > li {width:48%;}
}
@media all and (max-width:768px){
    .field .field-main-visual { height:40vw;min-height:200px;background-size:auto 100%;}
    .field .field-main-visual .field-main-slogan { text-shadow:4px 4px 4px rgba(0,0,0,0.4);}
    .field .top-cont-inner .slider-wrap { float:none;width:100%;}
    .field .top-cont-inner .news-wrap { float:none;width:100%;margin-top:20px;}
}

@media all and (max-width:768px){

    .field .bottom-cont-inner .cont-wrap dl > dt,
    .field .bottom-cont-inner .cont-wrap dl > dd { float:none;position:relative;width:100%;margin:0;padding:20px;}
    .field .bottom-cont-inner .cont-wrap dl > dt br{display:none;}
    .field .bottom-cont-inner .cont-wrap dl > dd:before {top:0;right:auto;left:27px;}
}

@media all and (max-width:480px){
    .field .slider-wrap .owl-carousel {height:280px;}
    .field .slider-wrap .owl-carousel .owl-item img {height:280px;}
	.field .news-tab-wrap > .news-menu > li > .tab {height: 48px;line-height: 48px;width: 100px;}
	.field .news-tab-wrap > .news-menu > li.on > .tab > a {font-size:18px;}
	.field .news-tab-wrap > .news-menu > li > .tab > a {font-size:18px;width: 100px;}
	.field .news-tab-wrap > .news-menu > li:nth-child(2) > .tab {left:100px;}
	.field .news-tab-wrap > .news-menu > li:nth-child(3) > .tab {left:200px;}
	.field .news-tab-wrap > .news-menu > li:nth-child(4) > .tab {left:300px;}
	.field .news-tab-wrap > .news-menu > li:nth-child(4) > .tab > a {width:110px;}
	.field .news-list-wrap {padding-top: 48px;}
	.field .btn-view-more {width: 48px;height: 48px;padding:13px;}
	.field .btn-view-more:before{top: 23px;left: 13px;width:22px;}
	.field .btn-view-more:after{top: 23px;left: 13px;width:22px;transform: rotate(-90deg);}
}

@media all and (max-width:320px){
    .field .field-main-visual .field-main-slogan {margin:0 2vw;}
    .field .field-main-wrap {margin:20px 2vw;}
}