@charset "utf-8";

.inner{ position:relative; width:1920px; margin:0 auto;}

.header { width:100%; position:relative; z-index:1111; }
.header .area .inner { display:flex; justify-content:space-between; align-items:center; padding:40px 0; flex-wrap:wrap; }
.header .area .logo img { width:520px; }
.header .area .info-txt{ display:flex;align-items:center; }
.header .area .info-txt p { font-weight:500; font-size:27px;}
.header .area .info-txt p+p{ margin-left:30px;}
.header .area .info-txt p span{ display:inline-block; padding:10px 20px; border-radius:17px; color:#fff; background:#d03b2f; margin-right:10px; font-size:22px; font-weight:600;}
.header .area .info-txt p b{ font-weight:800;}


.m-top-util{ display:none;}
.m-countdown { background:#283748; padding:10px 15px; display:flex; justify-content:center; gap:15px; flex-wrap:wrap; display:none; }
.m-countdown p { color:#fff; font-size:13px; font-weight:500; white-space:nowrap; }
.m-countdown p span { display:inline-block; padding:3px 8px; border-radius:10px; background:#d03b2f; color:#fff; margin-right:5px; font-size:11px; font-weight:600; }
.m-countdown p b { font-weight:800; }

.header .nav-area { background:#003471; padding:0 20px; }
.header .nav { display:flex; align-items:center; }
.header .nav .close { display:none; }
.header .nav .deps_1 {display: flex;}
.header .nav .deps_1 > li {height: 100%; font-size:25px; font-weight: 500; position: relative}
.header .nav .deps_1 > li+li{ position:relative; margin-left:30px; padding-left:30px;}
.header .nav .deps_1 > li+li:before{ content:''; position:absolute; top:50%;transform: translateY(-50%); left:0; width:1px; height:20px; border-left:1px solid rgb(255,255,255,0.3);}
.header .nav .deps_1 > li a{ padding:35px 0; display: block; height: 100%; white-space:nowrap; display: flex; align-items: center; color: #fff ; position: relative; font-size:30px;}
.header .nav .deps_1 > li a:hover{ color:#F66}
.header .nav .deps_1 > li a i{ margin-right:10px; font-size:30px;}
.header .quick-text {display: none}
.header .nav .deps_1 > li .deps_2 {position: absolute;left:50%; bottom: 15px; transform: translateY(100%); width:250px; margin-left:-125px;background:#283748; opacity: 0; transition: all .3s ;padding: 17px 0; visibility: hidden}
.header .nav .deps_1 > li .deps_2 li > a {padding: 8px 0px;justify-content: center; font-size: 19px; color: #fff}
.header .nav .deps_1 > li .deps_2 li > a:hover{ color:#0CF}

.header > .icon-box { position:absolute; top:20px;right:15px; }
.header > .icon-box button { padding:10px; font-size:24px; color:#333; cursor:pointer; }
.header > .icon-box button.ham { display:none; }
.header .nav-area .jtv-logo{ position:absolute; top:50%;transform: translateY(-50%); right:0; background:#000b32; padding:15px 25px; border-radius:20px; color:#fff260; display:flex;align-items:center; font-weight:700;}
.header .nav-area .jtv-logo img{ width:70px; margin-left:10px;}


.btn-util-top { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:#283748; color:#fff !important; border-radius:10px; font-size:18px; }
.btn-util-top:hover { background:#1a2636; }


.r-area{ display:flex;}
.top-util{ margin-left:20px;}

#footer{ padding:50px 0; font-size:20px;}
#footer span+span{ margin-left:30px;}
#footer .copy{ opacity:0.5; margin-top:5px; letter-spacing:0;}








@media (max-width: 1980px) {
	
	.inner{ width:1440px;}
	.header .area .inner{padding:30px 0; }
	.header .area .logo img{ width:470px;}

	.header .nav .deps_1 > li {font-size:21px;}
	.header .top-icon ul li+li{ margin-left:37px;}
	.header .nav .deps_1 > li a {padding:25px 0; font-size:23px;}
	.header .nav .deps_1 > li a i{font-size:25px;}

	.header .nav .deps_1 > li .deps_2 { width:200px; margin-left:-100px;}
	.header .nav .deps_1 > li .deps_2 li > a { font-size: 17px;}
	
	.header .area .info-txt p { font-size:23px;}
	.header .area .info-txt p span{ font-size:17px; padding:7px 15px; }

	
	#footer{font-size:17px;}
	.header .nav-area .jtv-logo{ padding:10px 20px;}
	.header .nav-area .jtv-logo img{ width:50px;}



	
}

@media (max-width: 1440px) {




    .header .nav .close ,
    .header > .icon-box button.ham,
    .header .quick-text {display: block}


    .header .nav .close {position: absolute; right:20px; top: 20px; color: #333; font-size: 28px}
    .header .nav {position: fixed; left:0%;right: auto ;top: 0; width: 100%; height: 100%; z-index: 10; display: block; background-color: #002f60;
        transform: translate(100%,0); padding:0; transition: left .5s ease-in-out;overflow: auto; display: flex; flex-direction: column; align-items: flex-start;;}
    .header.on .nav {left: -100%; }
    .header .nav .quick-text{display: block;width: 100%; padding:20px 20px; box-sizing:border-box; background:#fff;}
    .header .nav .quick-text .m-logo img{ width:250px;}
    .header .nav .quick-text > p {font-size: 24px; color: #fff; font-weight: 700; padding: 0 40px;}
    .header .nav .quick-text .navi_bg {padding: 0; box-shadow: none; border-radius: 0; display: flex; margin-top: 20px;border-bottom: 10px solid rgba(255,255,255, 0.2) }
    .header .nav .quick-text .navi_bg li {width: 20%; border: 1px solid rgba(255,255,255, 0.2); height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 15px;}
    .header .nav .quick-text .navi_bg li + li {margin-top: 0; border-left: none;}
    .header .nav .quick-text .navi_bg .icon_box {height:40px ; display: flex; align-items: center ; justify-content: center }
    .header .nav .quick-text .navi_bg li .ico_tit {word-break: keep-all;}
    .header .nav .quick-text .navi_bg li .ico_tit br {display: none;}

    .header .nav .bot-text {display: block; display: flex; font-size: 15px; width: 100%; padding-left: 40px; padding-top: 15px;}
    .header .nav .bot-text ul {display: flex; width: 100%;}
    .header .nav .bot-text ul li {border: 1px solid rgba(255,255,255, 0.2); color: #fff; border-radius: 50px; padding: 0 15px; height: 35px; line-height: 33px; font-size: 13px;}
    .header .nav .bot-text ul li + li {margin-left: 15px;}
    .header .nav > ul {display: flex;flex-direction: column; align-items: flex-start; padding: 20px 0;}
    .header.on > .right .spe .ham {display:none}
    .header.on > .right .spe .close {display:flex; position: fixed; right: 0; top: 0px; width: 80px; height: 80px;}
    .header .nav .deps_1 {padding:0 10px; margin-top:15px; box-sizing:border-box; width: 100%; height: auto}
    .header .nav .deps_1 > li {width: 100%;  height: auto; font-weight: 500; font-size:20px; border-bottom:1px solid rgb(255,255,255,0.05) }
    .header .nav .deps_1 > li+li{ margin-left:0px; padding-left:0;}
	.header .nav .deps_1 > li+li:before{ display:none;}
    .header .nav .deps_1 > li > a {height: auto; padding: 0px;color: #fff !important; display: flex; align-items: center; justify-content: flex-start; padding:  20px 30px 0px;  padding-bottom:20px ;}
    .header .nav .deps_1 > li > a::after { content: "\ea4e";  font-family: "remixicon";display: none; posi0tion: static; width: auto; height:auto; font-size:20px; transform: translateX(0); vertical-align: middle; line-height: 1; margin-left: auto; font-weight: 500; width: auto; transition: all .3s;}

    .header .nav .deps_1 > li:nth-of-type(7) {cursor: pointer}
    .header .nav .deps_1 > li:nth-of-type(7) > a{pointer-events: none}
    .header .nav .deps_1 > li:nth-of-type(7) > a:after{display: inline-block}
    .header .nav .deps_1 > li:first-child a{margin-top: 0; }
    .header .nav .deps_1 > li.on {background-color: transparent; color: #fff;}
    .header .nav .deps_1 > li.active > a::after {transform: rotate(180deg);     }

    .header .nav .deps_1 > li .deps_2 {position: static; transform: none; opacity: 1;visibility: visible; transition: none; display: none; left:0; margin:0; width:100%; background:rgb(0,0,0,0.25)}
    .header .nav .deps_1 > li .deps_2 li > a {justify-content: flex-start; padding-left: 40px; color:rgb(255,255,255,0.6);}

    .navi_bg {; border-radius: 55px; padding:45.5px 20px 42.5px; box-shadow:2px 1px 25px rgba(0,0,0,0.35);}
    .navi_bg li + li {margin-top:40px;}
    .navi_bg i {font-size:35px; color: rgba(255,255,255,0.3); display: block; text-align: center;}
    .navi_bg .ico_tit {font-size:13px; font-weight: 400; margin:15px auto 0; color:#fff; display: block; text-align: center;}
    .navi_bg a {display: block; width:100%; text-align: center;}
    .navi_bg img {width:36px; opacity: 0.3;}
    .navi_bg a i, .navi_bg a img {transition: 0.3s ease-in-out;}

    .header .fix_btn_box .menu_btn_box {display: none}
    .header .logo a{ margin-left:10px;}
   .deps_3 {display: none;}
   
   .inner{ width:100%;}
   .m-countdown { padding:12px 20px; }
    .m-countdown p { font-size:15px; }
    .m-countdown p span { font-size:13px; padding:4px 10px; }
    
    .header .area .logo img{ width:400px;}
	.header .nav-area .jtv-logo{ display:none;}
	
	.header .area .inner{ display:block; padding:20px 0 0 0;}
	.r-area{ width:100%; background:#d03b2f; color:#fff; padding:15px 10px; box-sizing:border-box; margin-top:20px;}
	.header .area .info-txt p span{ background:#fff; color:#d03b2f }
	
	.top-util{ display:none;}
	.m-top-util{ display:block; margin-top:10px;}
	.m-top-util a{ background:#efefef; padding:10px 15px; font-size:15px; border-radius:10px; display:inline-block;}
	
	.m-top-util .m-jtv-logo img{ width:40px;}
	
	    #footer{ padding:30px 10px;}
}






@media (min-width: 1440px){
    .header .nav .deps_1 > li:hover a:before {opacity: 1; bottom: -5px; }
    .header .nav .deps_1 > li:hover .deps_2 {opacity: 1; bottom: 0;   visibility:inherit}
    .header .fix_btn_box .top_btn_box:hover {box-shadow: none; background: #000;}
    .header .fix_btn_box .top_btn_box:hover i {color:#fff;}
    .header .fix_btn_box .menu_btn_box:hover ul{max-height: 542px; opacity: 1}
    .header .fix_btn_box .menu_btn_box:hover >i {opacity: 0;visibility: hidden}
    .header .fix_btn_box .menu_btn_box ul li a:hover .icon {opacity: 1}
    


}


@media (max-width: 800px){
	.r-area{ display:block; text-align:center;}
	.header .area .info-txt{ display:block;}
	.header .area .info-txt p+p{ margin:5px 0 0 0;}
	.header .area .info-txt p span{ width:70px;}
	
	#footer p span{ display:block;}
	#footer span+span{ margin:5px 0 0 0;}

}

@media (max-width: 640px){
	
	.header .area .logo img{ width:290px;}
	
	#footer{ font-size:15px;}
	#footer .copy{ font-size:14px;}
	
}

@media (max-width: 480px){
	
	.header .area .info-txt p{ font-size:20px;}
	.header .area .info-txt p span{ padding:5px 10px;}
	.m-top-util{display: grid; grid-template-columns:repeat(2, 1fr); text-align:center;gap:10px;}
	
	
}