﻿/* right menu */
#tsOpen button {
    border: 0;
    background: #333;
    font-weight: bold;
    padding: 20px 0;
}   

#tsOpen button p{color:#fff}

#tsOpen button span{color:#fff;display:block}

#tsOpen button img{
	width: 30%;
	padding-top: 10px
}

/*header*/
#topMenu{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid;
    padding: 10px 0;
}

.mLink{
	display: none;
}

#h_m_logo{
	display: none;
}

.quickLink .eg{
    color: #304a57;
    font-weight: 500;
    line-height: normal;
}

.quickLink p img{
    margin-right: 5px;
    vertical-align: bottom;
}

#topArea_web > #topMenu > .setMenu > ul li.lang{
    border: 1px solid;
    border-radius: 15px;
    padding: 0px 10px;
    margin-left: 30px;
    line-height: normal;
}

.lang a{
    color: #322f2c;
    font-size: 13px;
    line-height: 23px;
    display: block;
}

.setMenu ul{
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
}

.searchWord{
    border: 1px solid #322f2c;
    border-radius: 15px;
    padding: 4px 10px;
    width: 90%;
    background: url(/common/images/ic_search.png) 10px no-repeat;
    background-size: 15px;
    padding-left: 30px;
    min-height: 0!important;
    height: auto;
    line-height: normal;
    margin-bottom: 0px;
}

.setMenu .searchBtn{
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 20px}

.setMenu .searchBtn a{color:#fff}

.searchWord::placeholder{
    color: #322f2c;
    font-family: Noto Sans KR;
    padding-left: 5px
}

/* button keyboard focus color */ 

button:focus-visible {outline: 3px solid red}

/* 탭 스타일 */
.newsContainer {
    background-color: #ffffff;
    padding-bottom: 45px;
    overflow: hidden;
 }
 
.newstabs .current{
	border-top: 2px solid #f8b61f;
}

.title{
    font-weight: 600;
    display: inline-block;
    padding-left: 5px;
    margin-right: 100px;
    margin-bottom: 20px;
    font-size: 16px;
}

.newstabs li{
	margin-left: 30px;
}

.newstabs li a{
    height: 27px;
    line-height: 27px;
    font-size: 16px;
}

.newContent ul li{
    line-height: 3.5rem;
    border-top:1px solid #f8b61f;
    width: 100%;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#newContents .slick-track .slick-slide img {
    height: 175px;
}

.newsList{
	display: flex;
    overflow: hidden;
    flex-direction: column;	
}

.newsList span{
    padding-left: 5px;
}

.newsList span::after{
    content: "│";
}

.newContent ul li:last-child{
    border-bottom:1px solid #f8b61f
}

.top_1{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

#mainBanner{
    width:55%;
    height: 100%;
}

#newsSection{
    width:45%;
    margin-left: 30px;
}

#quickMenuMobile{
	display: none;
}


/*icon*/
.url_icon{
    width: 100px;
    height: 100px;
    padding: 5px;
    border-radius: 15px;
    background: #f8b61f;
    display: flex;
    align-content: center;
    justify-content: center;
}

.url_icon:hover{
	background: #ededed;
}
.url_icon img{ 
    padding: 20px;
}

.small img{ 
    padding: 30px;
}

.smallx2 img{ 
    padding: 35px;
}

.sns{
    color: #322f2c;
    text-align: center;
    margin-top: 10px;
    font-weight: 500;
}

#newSites ul{
    display: flex;
    justify-content:space-between;
}


/*footer*/
#footer {
	background-color: #ededed;
	padding-bottom: 3rem;
	padding-top: 2rem;
	color: #322f2c;
	font-size: 0.75rem;
	margin-top: 5rem;
    width: 100%;
    box-sizing: border-box;
}

#footerWrap {
	width: 100%;
	margin: auto;
	max-width:1400px;
	color:#322f2c
}

#footer .footTable {
    width:100%;
    line-height:100%;
}

#footer .footTable .cell {
    display: flex;
    justify-content: space-between;
    align-items:center;
}
#footer .footTable .cell.link {
    display: flex;
    justify-content: flex-end;
    align-items:center;
    width: 50%;
}

#footer .footTable .cell.link select {
    padding: 8px;
    border: 1px solid #322f2c;
    font-family: inherit;
    background: none;
    border-radius: 0px;
    cursor: pointer;
    margin-left: 40px;
    font-weight: 500;
}

#footer .footTable .cell.link select::-ms-expand {    
    display: none;
}

#footer .go_btn{
    padding: 9px 10px;
    border: 1px solid;
    margin-left: 10px;
    font-weight: bold;
    cursor: pointer;
}

#footer .foot_menu {
    font-size:0.875rem;
    font-weight: bold;
    display: flex;
}

#footer .foot_menu:hover {
    color:#555555;
}

#footer .foot_menu li {
    padding-right:1rem;
    margin-right:1rem;
    cursor:pointer
}

#footer .foot_menu li:hover{
   color:#322f2c!important;
}

#footer .foot_menu li:last-child {
    border:0;
    margin:0;
    padding:0;
}
#footer .foot_menu li:hover {
    font-weight: bold;
    color: #cccccc
}

#footer .foot_menu li:nth-child(2){
    color:#800000;font-weight:600;text-decoration:underline
}

#footer .foot_menu li a {
    color:inherit !important;
}
#footer .infoTable {
    display:flex;
    margin-top:2.5rem;
}

#footer .infoTable .infoBox {
    padding-left:6.25rem;
}
#footer .infoTable .infoBox ul li {
    display:block;
    line-height:10px;
}
#footer .infoTable .infoBox ul li span {
    display:inline-block;
    margin-right: 5px;
    line-height: 20px;
}
#footer .infoTable .infoBox ul li.copy {
    font-size:0.825rem;
    font-weight:bold;
    margin-bottom:0;
    padding-left: 5px;
}

#footer .infoTable .infoBox .title{
    font-weight: bold;
}

#footer .mark_area{width:38%}
#footer .mark_area a{float:right}


.foot_icon img{
    width:30px;
    margin-right: 10px;
}

@media (max-width: 1400px) {

	.mobileViewArea {
    	display: block !important;
	}
	
	#topArea_web{
		display: none
	}

	#wrap{
		padding:0 2em;
		box-sizing: border-box;
	}
	
	#quickMenu{display:none}
	
	#quickMenuMobile{
		display: block;
		margin-bottom: 10px;
	}
	
	#quickMenuMobile ul{
		width:100%;
	}
	
	#quickMenuMobile .title{
		font-size: 18px;
		width: 100%;
		margin-bottom: 5px;
		margin-top: 30px;
		margin-right: 0;
	}
	
	#quickMenuMobile .sub_quick{
		width:100%;
	}
	
	#quickMenuMobile .sub_quick .sub_q_menu{
		width:100%;
		display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
	}
	
	#quickMenuMobile .sub_quick .sub_q_menu li{
		border: 1px solid #e5e5e5;
		width: 20%;
		text-align: center;
		padding: 0 10px;
		line-height: 18px;
	    height: 58px;
	    margin-top: 10px;
		display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	#header h1 {
		display: flex;
		align-items: center;
	}
	
	#h_m_logo{
		display: block;
		justify-content: center;
		padding: 20px 0;
		border-bottom: 1px solid 
	}
	
    .container{
        padding: 0 2em;
    }
    
    .tab_item {
        margin-left: 20px;
    }
    
    .top_1{
        display: unset;
    }
    
    #gnb {
    	display:none;
    }	
    
    #mainBanner{
        width:100%;
    }
    
    #newsSection {
        width: 100%;
        margin-top: 20px;
        margin-left: 0;
    }
    
	.VOD_area video{width: 100%!important;}

    #m_searchBox {
		width: 74%;
		background-color: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		display: none;
		height: 80px;
		line-height: 80px;
		margin-left: 2em;
	}

	#m_searchBox input {
		outline: none;
		border: 1px solid #e5e5e5;
		height:36px;
		line-height: 36px;
		width: 50%;
		font-size:11px;
		padding-left:10px;
	}
	
	#searchClose{float:right}
	#searchClose p img{width:20px;height:auto;padding-right:50px;z-index: 10;}
	
	#m_searchBox input::-ms-expand,
	#m_searchBox button::-ms-expand{
		display:block;
		margin:0;
		line-height:100%;
	}
	
	#m_searchBox .search_enter {
		padding:0;
		width: 20%;
		background-color: #000000;
		border:none;
		outline: none;
		color: #ffffff;
		height: 36px;
    	display: inline-block;
    	padding-bottom: 3px;
	}
	
	#m_search {
		width: 3.5rem;
		height: 2.5rem;
		background: url('/common/images/ic_search.png') no-repeat center;
	}
	
	.mLink{
		display: block;
		margin-left: 30px;
	}
	
	#newContents > ul {
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    flex-wrap: wrap;
	}
	
	#newContents > ul > li {
	    position: relative;
	    width:48%;
	    margin-right: 0;
	    margin-top: 20px;
	}
	
	#newContents .title{
		margin-right: 0;
	}
	
	#newSites ul li{
		padding: 0 90px;
		margin-top: 20px;
	}
	
	#newSites {
    	margin-top: 0;
	}
	
    #newSites ul{
        flex-wrap: wrap;
        margin: auto;
    }
    
    #footer {
    	padding-left:2em;
    	padding-right:2em;
    }
		
}

@media (max-width: 1300px) {
	#relationSection .webViewArea{
		display: none;
	}
	#relationSection {
		display: unset;
	}
	
	#relationSection .mobileViewArea .item a:nth-child(2){
		margin-top: 10px;
	}
	#relationSection .relationSlider {
	    width: 90%;
	    margin: auto;
	}
    
    #relationSection .relationSlider .slick-next {
	    right: -2em!important;
	    left:auto;
	    top: 2.5rem;
	}
	
	#relationSection .relationSlider .slick-prev {
	    left: -2.6em;
	    top: 2.5rem;
	}
	
	#relationSection .secTitle {
	    width: 100%;
	    font-size: 18px;
	}
	
	#newSites ul li{
		padding: 0 65px;
	}
}	

@media (max-width: 1000px) {

    .sns{
        margin-bottom: 20px;
    }
    
    .tabs{
        padding-left: 0
    }
    
    #tabsTitle {
        display: inline-block;
        margin-right: 50px;
    }
    
    #newSites ul li{
		padding: 0 40px;
	}

/*     #newSites ul::after {
        display: block;
        content:"";
        width: 110px;
    } */

    #footer .footTable .cell{
        display: unset;
    }
    #footer .footTable .cell.link {
        width:100%;
        justify-content: flex-start;
        align-items: center;
        margin-top: 40px
    }
        
    #footer .foot_menu{
        justify-content: center;
    }
    #footer .footTable .cell.link {
        justify-content: center;
    }
    #footer .infoTable{
        display: unset;
    }
    .logo{
        text-align: center;
        display: block;
        margin: 30px;
    }
    #footer .infoTable .infoBox {
        padding: 0;
        text-align: center;
        display: block;
    }

	#footer .mark_area{width:60%;padding-top: 15px}


}

@media (max-width: 810px) {
	#newSites ul li {
    	padding: 0 20px;
	}
}

@media (max-width: 750px) {
	#header h1 {
	    text-align: left;
	}
	
	#header h1 #hLogo {
	    width: 70%;
	}
	
	#header #rLogo {
	    width: 50%;
	    padding-left:unset;
	    float:left;
	    padding-right: 60px;
	}

	.quickLink p img {
	    width: 11%;
	}
	
	.quickLink .eg {
		font-size: 12px;
	}
	
	.mLink {
    	margin-left: 0px;
	}
	
    #topMenu{
        display: none;
    }

    .tab_item {
        margin-left: 20px;
    }
    
    #tabsTitle {
        margin-right: 0px;
    }
    
    #newSites ul li {
    	padding: 0 20px;
    }
    
    .newsContainer .title{
    	margin-right: 20px;
    }

	#footer .mark_area{width: 70%;padding-top: 15px}



}

@media (max-width: 660px) {
	#newSites ul li {
	    padding: 0 10px;
	}
	
	.newstabs li {
    	margin-left: 10px;
	}
	
	.contentBox p img{width:100%!important}
	
}

@media (max-width: 570px) {
    #tabsTitle {
        display: none;
    }
    label.tab_item {
        margin-left: 10px;
    }
    #newSites ul li {
	    padding: 0;
	}
    #footer .footTable .cell.link {
        display: unset;
    }
    
    .foot_icon{
        width: 100%;
        text-align: center;
        padding: 30px 0;
    }
    
    .footer_sel{
        text-align: center;
    }
    
    #footer .footTable .cell.link select{
        margin-left: 0
    }
}

@media (max-width: 520px) {
	.url_icon {
	    width: 80px;
	    height: 80px;
	}
	.url_icon img {
    	padding: 10px;
	}
	.small img{ 
    	padding: 20px;
	}
	.smallx2 img{
		padding: 30px;
	}
	.mLink {
		display: none;
	}	
	
	.newsContainer .title {
    	display: none;
	}
	
	.newsContainer ul{
		margin-bottom: 5px;
	}

	#newContents .slick-track .slick-slide img {
	    height: 100%;
	}
	
	#quickMenuMobile .sub_quick .sub_q_menu li {
    	width: 15%;
    	padding: 0 15px;
	}
}

/* 추가수정 */
/* 메인 슬라이더 */
#mainSlide > .slick-next {
    right: 0;
    background-image: url(../images/bullet_main_bn_next.png);
}

#mainSlide > .slick-arrow {
    background-color:#707070;
    border: 0;
    /* outline: none; */
    position: absolute;
    z-index: 1;
    text-indent: -999999px;
    width: 60px;
    height: 60px;
    top: calc(50% - 30px);
    cursor: pointer;
}

#mainSlide > .slick-arrow:hover {
    background-color: rgba(0,0,0,0.5);
}

#mainSlide > .slick-prev {
    left: 0;
    background-image: url(../images/bullet_main_bn_prev.png);
}

.pause-main,.play-main{
	cursor: pointer;
}

.url_icon .imgHv{
	display: none;
}




