@charset "utf-8";

/* media */
@media screen and (max-width:1400px) {
    #body .inner{ width:90% !important;}
    
}
@media screen and (max-width:1280px) {
    .inner {
        width: 100% !important;
        margin: 0 auto;
    }
    /* visual */
    .visual {
        background-position: 150% center;
    }
    .visual .visualCover .textArea .btnArea{        
        width:380px;
    }
    /*artBanner*/
    #contArea .artBanner li {
        width: 32%;
        margin-right:2%;        
    }
    /* bannerItem */
    #contArea .bannerItem{}
    #contArea .bannerItem::after {
        content: '';
        display: block;
        clear: both;    
    }
    #contArea .bannerItem div {
        width:31.22%;
        height:230px;
        margin-right: 1.5%;   
        border-radius: 0 25% 0 25%;        
        padding:45px 0 0 10px;
    }
    #contArea .bannerItem div span{
       font-size:1.4rem;
    }
}
@media screen and (max-width:1180px) {    
    /* visual */
    .visual {
        background-position: 120px center;
    }
}
@media screen and (max-width:1024px) {
    
    .visual { 
        background-position:-10% center;
    }
    /* visual */
    .visual .visualCover {       
        width: 50%;        
    } 
    /* main banner */
    #contArea .artBox {
        width: 50%;
        padding: 40px 25px;
        transition: all 0.6s ease-out;
    }
    #contArea .artBox_r {
        width: 50%;
        padding: 40px 0 0 25px;        
        transition: all 0.6s ease-out;
    }
    /*notice*/
    #contArea .artNotice {
        background-size: auto 65%;        
    }
    
    /* bannerItem */
    #contArea .bannerItem div {
        width: 46.5%;
        height: 154px;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 25px 0 0 25px;
    }
    #contArea .bannerItem div:nth-child(2){
        border-radius: 20% 0 20% 0;
    }
    #contArea .bannerItem div:nth-child(3){
        border-radius: 20% 0 20% 0;
        margin-right: 10px;
    }
    #contArea .bannerItem div:nth-child(4){
        background: url(/resource/Images/client_B/main/bg_m_banner04.png) left top no-repeat;
        background-size:cover;
        margin-right:0;
        display:block;
    }
    #contArea .bannerItem div span{
       font-size:1.5rem;
       line-height:120%; 
    }
    #contArea .bannerItem div span.smTxt{       
       margin-top:20px;
    }
    #contArea .sponsorItem button,
    #contArea .sponsorItem h2 {
        display: none
    }
    #contArea .sponsorItem {
        padding-top:10px;
    }
}
@media screen and (max-width:912px) {
   
    #header h1 img {
        width: 139px;
    }
    .visual {
        background-position: -50px center;
    }
}
@media screen and (max-width:830px) { 
	#header h1{width:20%;} 	    
    #header .gnb {width:79%;}
}
@media screen and (max-width:820px) {
    body {
        font-size: 14px;
        line-height: 160%;
        letter-spacing:1px;
    }
    :root {--btn-width:30%;--btn-height:40px;}
    .inner {width: 100% !important;}
    #header .tnb p {padding: 0;}
    #header .tnb p a{
        display:inline-block;
        width:39px;
        line-height:39px;
        vertical-align:middle;
        font-size: 1.5rem !important;
    }
    #header .tnb p button{width: 39px;height: 39px;}
    #header .tnb i{font-size: 1.5rem !important;color: #fff;}
    #header .gnb {opacity:0;transition:var(--transition-custom2);}
    #header .gnb ul{display:none;transition: var(--transition-custom2);}
    
    /* m_sitemap */
    .m_sitemap{
        display:none; 
        position:fixed; 
        z-index:3000;
        left:0;
        top:0;
        width:100%;
        height:100vh;  
        overflow:auto;
        background-color: rgba(0, 0, 0,0.5); 
    }
    .m_sitemap .container{
        position:absolute;
        right:0;
        background:#192642;
        width:0; 
        min-height:100vh; 
        overflow:hidden;
        transition: all .5s;
    }  
    .m_sitemap_open { display:block;}
    .m_sitemap_close { display:none;}
    .m_sitemap .container_open{width: 50%;overflow: auto;}
    .m_sitemap .container_close {width: 0;overflow: auto;}    
    .m_sitemap div.close {
        position: relative;
        text-align: right;
        padding:20px 30px;
    }
    .m_sitemap div.close span.close{
        display:inline-block;
        color: #fff;
        font-size: 35px;
    }
    .m_sitemap div.close span.close:hover,
    .m_sitemap div.close span.close:focus { 
        color:var(--btn-hover);  
        cursor: pointer;
    }
    .m_sitemap nav ul.map-1 {padding:0 30px; }
    .m_sitemap nav li.map-1-item {border-bottom: 1px dotted #2d3a58;}
    .m_sitemap nav li ul,
    .m_sitemap nav li.map-1-item:first-child {border-top: 1px dotted #2d3a58; } 
    .m_sitemap nav li.map-1-item>a { 
        display:block;
        height:50px;
        line-height:50px;
        overflow:hidden;
        text-indent:5%;
        font-size:1.3rem;
        color:#fff;
    }
    .m_sitemap nav li.map-1-item a:hover {
        background: #2eaddb;
        transition: var(--transition-custom);
    }   
    .m_sitemap nav ul.map-2  { display:none }
    .m_sitemap nav li.map-2-item a{ 
        display:block;
        padding:15px 0;
        text-indent:10px;
        font-size:1.2rem;
        background-color:#2d3a58; 
    }
    .m_sitemap nav li.map-2-item a span{color:#fff;}    
    /* contArea */
    #contArea {
        clear: both;
        background-image:none
    }    
    /* visual */
    .visual {        
        background: url(/resource/Images/client_B/main/visual_a.png) right center no-repeat;        
    }
    .visual .visualCover {
        background:none;
        height: 100%;
        width:100%;        
    }
    .visual .visualCover .textArea{        
        background:rgb(0,0,0,0.6);        
    }
    .visual .visualCover .textArea p span.text_s{
        font-size:1.2rem;
    }
    .visual .visualCover .textArea p span.text_m {
        font-size: 1.4rem;
    }
    .visual .visualCover .textArea p span.text_l {
        font-size: 3.0rem;
        padding:15px 0 20px 0;
        letter-spacing:-1px;
    }
    .visual .visualCover .textArea .btnArea{        
        width:380px;
        margin-top:100px;
    }
    
    #contArea .artBox {
        width: 100%;
    }
    #contArea .artBox_r {
        width: 100%;
        padding: 40px 30px 40px 30px;
    }  
    #contArea .artBanner {
        height: auto;
    }
    /* notice */
    #contArea .artNotice {
        height: auto;
        background-size: auto 60%;
        background-position:3% 60%
    }
    /* bannerItem */
    #contArea .bannerItem div {
        width: 49%;
        height: 250px;
        margin-right: 2%;
        margin-bottom: 2%;
        padding: 55px 0 0 45px;
        border-radius: 0 25% 0 25%;
        letter-spacing:1px
    }
    #contArea .bannerItem div:nth-child(2){
        border-radius: 25% 0 25% 0;
        margin-right: 0;
    }
    #contArea .bannerItem div:nth-child(3){
        border-radius: 25% 0 25% 0;
        margin-right: 2%;
    }
    #contArea .bannerItem div:nth-child(4){
         border-radius: 0 25% 0 25%;
         margin-right: 0;
    }
    #contArea .bannerItem div:nth-child(4) .smTxt{
         margin-bottom:10px;
         margin-top:0;
    }
    #contArea .bannerItem div span{
       font-size:2.1rem;
       width:80%;
       line-height:130%; 
    }
    #contArea .bannerItem div span.smTxt{
       font-size:1.3rem;
    }
    /*sponsor_logo*/
    #contArea .sponsorItem h2 {
        display: block
    }
    #contArea .sponsorItem {
        padding-top: 0;
    }
 }   
@media screen and (max-width:768px) {
    body {
        font-size: 14px;
        line-height: 160%;
        letter-spacing:-0.5px;
    }
    /* bannerItem */
    #contArea .bannerItem div {        
        height: 250px;
        padding: 55px 0 0 45px; 
    } 
    #contArea .bannerItem div span{
       font-size:1.9rem;       
    }
    #contArea .bannerItem div span.smTxt{
       font-size:1.3rem;
    }
	  
}
@media screen and (max-width:560px) { 
    .visual {
        background-position: -480px center;
    }
    /* bannerItem */
    #contArea .bannerItem div {       
        height: 200px;
        padding: 50px 0 0 20px; 
    } 
    #contArea .bannerItem div span{
       font-size:1.6rem;       
    }
    #contArea .bannerItem div span.smTxt{
       font-size:1.2rem;
       margin-top:0
    }
    /* sideMenu */
    .sideMenu .quickList li {width: 60px;}
    .gotoTop a {width: 50px;height: 50px;}

}
@media screen and (max-width:454px) {
    :root {
        --btn-width: 45%;
        --btn-height: 40px;
    }
    #contArea .artBox_r {        
        padding: 40px 20px 40px 20px;
    } 
    /* bannerItem */
    #contArea .bannerItem div {
        padding: 30px 0 0 20px; 
    } 
    #contArea .bannerItem div span{
       font-size:1.3rem;       
    }
    #contArea .bannerItem div span.smTxt{
       font-size:1.0rem;
       margin-top:10px
    }
    #contArea .bannerItem div:nth-child(4) .smTxt{
         margin-bottom:10px;
         margin-top:0px
    }
    #contArea .artNotice {
        background: none;
    }
    #contArea .artNotice .list {
        width: 90%;
        padding-left: 0%;
        margin-top: 20px;
    }
    .visual {
        height: 470px;
        background: url(/resource/Images/client_B/main/visual_a.png) -350px center no-repeat;
        background-size:cover;
        
    }
    .visual .visualCover .textArea .btnArea {
        width: 70%;
        margin-top:50px;
    }
    .visual .visualCover .textArea p{
        margin-top:120px;
    }
    .visual .visualCover .textArea .btnArea a{
        padding:15px 0;       
    }
    .visual .visualCover .textArea p span.text_l {
        font-size: 2.5rem;
        letter-spacing:-0.5px;
    }
    /* videoItem */
    #contArea .videoItem{
        height: 430px;    
    }
    #contArea .videoItem .videoArea{        
        padding-bottom:350px;        
    }
    /* sponsorItem */
    #contArea .artBox_r.sponsorItem {
        padding-top: 0;
    }
    #header .tnb p i {font-size: 1.3rem !important;}
    #header .tnb p a {width: 33px;line-height: 33px;}
    #header .tnb p button {width: 33px;height: 33px;} 
   
 }   
 @media screen and (max-width:412px) {
    body {font-size: 12px;line-height: 120%;}
    #header h1 {
        width: 50%;
        
    }
    .visual {
        height: 400px;        
    }
    .visual .visualCover .textArea p span.text_l {
        font-size: 1.5rem;
        padding:15px 10px;
        letter-spacing:0px;
    }
    .visual .visualCover .textArea p span.text_m {
        font-size: 0.9rem;
    }
    #contArea .artBox_r.bannerItem {
        padding:0;
    }
    #contArea .artBox_r.sponsorItem  {
        padding-top:10px
    }
    #contArea .bannerItem div:nth-child(2),
    #contArea .bannerItem div:nth-child(3),
    #contArea .bannerItem div:nth-child(4),
    #contArea .bannerItem div{
        width: 100%;
        border-radius: 0;
        height: auto;
        padding: 20px;
    }
    #contArea .bannerItem div .titTxt{
        width: 100%;
    }
    
}