@import url("app.css");


html {height: 100%;}
body {margin: 0;
      font-size: 13px;
      line-height: 1.5;
      position: relative;
      height: 100%;
      background: #000}

#wrap{width: 100%; height: 100%; position: relative}


/*main img */
.swiper-container {
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
}

#wrap .swiper-container .mb_text{display: none}
#wrap .swiper-container .main_text img{position: absolute; top: 315px; left: 7%; opacity: .9; width: 50%}



/*공통 header 영역 */


#headerArea{position: absolute; width: 100%; top:0; color: #fff; z-index: 10}

#headerArea .headerInner{}
#headerArea .headerInner .topMenu{position: relative}
#headerArea .headerInner .topMenu ul{overflow: hidden; right: 6.2%; top: 18px; font-size: 12px; width: 207px; font-family: 'Montserrat'; font-weight: bold; z-index: 15; }
#headerArea .headerInner .topMenu ul li{float: left; text-align: center; margin-right: 20px}
#headerArea .headerInner .topMenu ul li:nth-child(1):after{content: ''; background: url(../images/bar.png) ; display: block; height: 10px; position: absolute; width: 6px;}
#headerArea .headerInner .topMenu ul li:last-of-type{margin-right: 0}
#headerArea .headerInner .topMenu ul li:nth-child(3):after{content: ''; background: url(../images/bar.png) ; display: block; height: 10px; position: absolute; width: 6px;}
#headerArea .headerInner .topMenu ul li a{color: #949494}
#headerArea .headerInner .topMenu ul li a:hover{color: #5570e3}


#headerArea .headerInner .headerBottom h1{float: left}
#headerArea .headerInner .headerBottom .logo a{background: url(../images/total_logo.png); width: 318px; height: 37px; display: block; text-indent: -999px; overflow: hidden; margin: 49px 131px 0}
#headerArea .headerInner .headerBottom .header{padding-top: 50px}
#headerArea .headerInner .headerBottom .header img{display: none}
.main_text{height: 1070px}


/* 1depth 메뉴 영역 */

#headerArea .headerInner .headerBottom #gnb{right: 20.5%; width: 800px; margin-top: 8px;}
#headerArea .headerInner .headerBottom #gnb ul li a.depth1{color: #fff; font-size: 22px}
#headerArea .headerInner .headerBottom #gnb ul li a.depth1:hover{color: #5570e3; font-weight: bold}



ul.dropdownmenu{overflow: hidden; width:850px; height:80px;float:left}
ul.dropdownmenu li.menu{float:left;position:relative; margin-right: 7.6%}
ul.dropdownmenu li.menu:nth-child(5){margin-right: 0}
ul.dropdownmenu li.m1{margin-left:0px;}
ul.dropdownmenu li.m1:after{}
ul.dropdownmenu li h3{position:relative; height:25px; overflow:hidden;}

ul.dropdownmenu li a.depth1{height:25px;overflow:hidden;display:block}
ul.dropdownmenu li a.depth1:hover{}

            /* 2depth 메뉴 영역*/


ul.dropdownmenu li .m6 ul{left: -55px}
ul.dropdownmenu li ul{position:absolute;top:17px; left:0; padding:22px 0 5px 5px; width:1000px; display: none}
ul.dropdownmenu li.m1 ul{left: 0}
ul.dropdownmenu li.m1 ul:after{content: ""; display: block; background: url(../images/Triangle_20.png); width: 20px; height: 20px; position: absolute; top: 10px; left: 30px}
ul.dropdownmenu li.m2 ul{left: -100px}
ul.dropdownmenu li.m2 ul:after{content: ""; display: block; background: url(../images/Triangle_20.png); width: 20px; height: 20px; position: absolute; top: 10px; left: 115px}
ul.dropdownmenu li.m3 ul{left: -375px}
ul.dropdownmenu li.m3 ul:after{content: ""; display: block; background: url(../images/Triangle_20.png); width: 20px; height: 20px; position: absolute; top: 10px; left: 400px}
ul.dropdownmenu li.m4 ul{left: -40px}
ul.dropdownmenu li.m4 ul:after{content: ""; display: block; background: url(../images/Triangle_20.png); width: 20px; height: 20px; position: absolute; top: 10px; left: 20px}
ul.dropdownmenu li.m5 ul{left: -397px}
ul.dropdownmenu li.m5 ul:after{content: ""; display: block; background: url(../images/Triangle_20.png); width: 20px; height: 20px; position: absolute; top: 10px; left: 415px}

ul.dropdownmenu li.bar:after{content: '/'; display: block; font-size: 10px}
ul.dropdownmenu li.bar{padding: 7px 0}


ul.dropdownmenu li ul li{ float:left; padding:7px 15px; background: rgba(78,78,78,.9)}
ul.dropdownmenu li ul li:first-of-type{border-radius: 0 0 0 5px}
ul.dropdownmenu li ul li:last-of-type{border-radius: 0 0 5px 0}
ul.dropdownmenu li.menu ul li a{ color:#fff; transition:all .5s; font-size: 16px }
ul.dropdownmenu li.menu ul li a:hover{color: #80bce6;}





/*관련사이트 영역 */

#headerArea .headerInner .headerBottom .select{right: 7%;
    border: 1px solid #ccc; width: 193px; height: 34px; display: inline-block; background: url(../images/Triangle.png) 172px center no-repeat; z-index: 1}

#headerArea .headerInner .headerBottom .select a.arrow{color: #fff; display: block; padding: 8px 5px}

#headerArea .headerInner .headerBottom .select .listTitle{background: #4d4a4a; padding-left: 7px}
#headerArea .headerInner .headerBottom .select ul.aList{display: none; background: rgba(0,0,0,.7); border:1px solid #666}
#headerArea .headerInner .headerBottom .select ul li a{color: #ccc; padding: 0 7px}
#headerArea .headerInner .headerBottom .select ul li a:hover{color: #fff}
#headerArea .headerInner .headerBottom .select li{border-bottom: 1px solid #666}
#headerArea .headerInner .headerBottom .select li:last-of-type{border-bottom: none}
#headerArea .headerInner .headerBottom .select .aList ul li{padding: 5px 5px}


/*sitemap 영역 */

.categoryMap{position: fixed; top:0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9; color: #fff; display: none}
.categoryMap .underLine{width: 100%; height: 45px; border-bottom: 1px solid #6e6969cc; text-indent: -999px; overflow: hidden}
.categoryMap h1{background: url(../images/logo_sitemap.png) no-repeat; width: 258px; height: 131px; margin: 29px 141px; text-indent: -999px; overflow: hidden; display: inline-block}
.categoryMap h1 a{color: #fff; display: block; height: 131px}


.categoryMap .subject{position: absolute; top: 57px; left: 27.9%; width: 80%}
.categoryMap ul .category{padding: 33px 0 48px; border-bottom: 1px solid #3d4875}
.categoryMap ul .category .title{width: 250px; text-align: right}
.categoryMap ul .category .title a{color: #6880e9; font-size: 33.02px; font-weight: bold; margin-right: 28px; letter-spacing: -2.7px}
.categoryMap ul .category{overflow: hidden}
.categoryMap ul .category li{float: left; margin-left: 8px; letter-spacing: -.6px;}
.categoryMap ul .category li:nth-child(1){margin-left: 0}
.categoryMap ul .category li a{color: #e0e0e0; font-size: 22.1px; font-weight: bold}

.categoryMap ul .category li.bar:after{content: '/'; display: block; font-size: 10px}
.categoryMap #footerArea{position: fixed; bottom: 0; left: 5%;}


/*공통 footer 영역 */

#footerArea{width: 90%; color: #fff; height: 250px; margin: 0 auto; border-top: 1px solid #1e1e1e; margin-top: 165px}
#footerArea a{color: #a0a0a0}

#footerArea .footerLeft{float: left; margin: 47px 1.5%}

#footerArea .footerLeft ul{overflow: hidden}
#footerArea .footerLeft ul li{float: left; padding: 0 17px 0px 4px; background: url(../images/bar_footer.png) right center no-repeat}
#footerArea .footerLeft ul li:first-child{padding-left: 0}
#footerArea .footerLeft ul li p.mb_pc{display: none}
#footerArea .footerLeft ul li:nth-child(4){background: none}
#footerArea .footerLeft ul li:nth-child(5){background: url(../images/icon1_footer.png) no-repeat; height: 18px;width: 16px; padding-right: 0px}
#footerArea .footerLeft ul li:nth-child(5) a{display: block;height: 18px}
#footerArea .footerLeft ul li:last-child{background: url(../images/icon2_footer.png) 8px no-repeat; padding-right: 4px; height: 18px; width: 23px}
#footerArea .footerLeft ul li:last-child a{display: block; height: 18px; width: 23px}
#footerArea .footerLeft  address{margin: 9px 0; font-size: 14px; line-height: 1.25; color: #a0a0a0; text-align: left}
#footerArea .footerLeft  address .mb_code{display: none}
#footerArea .footerLeft  address .main_tell{display: block}

#footerArea .footerLeft .footer_copyright{font-size: 14px; letter-spacing: .35px; color: #a0a0a0}
#footerArea .footerLeft .mb_copyright{display: none}


#footerArea .footerRight{float: right; margin: 39px 0; width: 396px}
#footerArea .footerRight ul{overflow: hidden}
#footerArea .footerRight ul li{float: left; margin-right: 9%; width: 180px; height: 35px; display: block; }
#footerArea .footerRight ul li:nth-child(1) a{background: url(../images/logo1_footer.png) no-repeat; display: block; height: 35px; text-indent: -999px; overflow: hidden}
#footerArea .footerRight ul li:nth-child(2){margin-right: 0}
#footerArea .footerRight ul li:nth-child(2) a{background: url(../images/logo2_footer.png) no-repeat; ; display: block; height: 35px; text-indent: -999px; overflow: hidden}

.isMobile { display: none; }
.isPc {  }

/* sm-screen css 화면위치수정*/
.sm-screen .main_text{height: 760px}
.sm-screen .swiper-container .main_text img{top: 265px !important; width: 45% !important;}

.sideList_bagground{background: rgba(0,0,0,.5); border-radius: 10px; padding: 10px; margin-top: 130px;}

.side_situation address {
	margin-top: 11px;
    margin-left: 20px;
}
.side_situation .tel,
.side_situation br {display: none;}



/* 일반 pc */
@media screen and (max-width:1400px) {

    #wrap .swiper-container img{left: 50px}

    #headerArea .headerInner .topMenu ul{right: 38px}
    ul.dropdownmenu li.menu{margin-right: 4%}
    #headerArea .headerInner .headerBottom .logo a{margin: 49px 50px 0}
    #headerArea .headerInner .headerBottom #gnb{left: 50px; top: 135px;}
    #headerArea .headerInner .headerBottom .select{right: 50px}

	#footerArea{width: 100%}
}


@media screen and (max-width:1200px) {

    ul.dropdownmenu{float: none}
    #headerArea .headerInner .headerBottom .select{top: 50px}

}


/* 테블릿 */
@media screen and (max-width:1024px) {

    #footerArea .footerLeft{left: .5%}

    #headerArea .headerInner .headerBottom #gnb{width: 710px}
    ul.dropdownmenu{width: 730px}

    #footerArea{width: 100%}
    #footerArea .footerRight{width: 170px; margin: 70px 0 0}
	#footerArea .footerRight ul li{margin: 0 auto; float: none; width: 170px; height: 35px; display: block}
	#footerArea .footerRight ul li:nth-child(2){margin-right: 0; float: right; width: 147px}
}

/* 소형 테블릿 */
@media screen and (max-width:768px) {

    body{background: none}
    .swiper-container{height: 699px}
    .red-slide {height: 600px; background-position: 0 80px; position: relative}
    #wrap .swiper-container .mb_text{display: block; position: absolute; left: 32px; top: 200px; text-align: left}
    #wrap .swiper-container .mb_text p:first-child{font-size: 35.42px; font-family: 'Montserrat'; font-weight: bold; margin-bottom: 30px; line-height: 1em}
    #wrap .swiper-container .mb_text p:last-child{font-size: 20.83px; width: 95%}
    .main_text{height: 850px}
    #wrap .swiper-container .main_text img{display: none}


    #headerArea{background: #fff; height: 115px}
    #headerArea .headerInner .headerBottom h1{width: 100%}
    #headerArea .headerInner .headerBottom .logo a{background: url(../images/mb_logo.png) center no-repeat; width: 355px; height: 40px; margin: 20px auto}
    #headerArea .headerInner .headerBottom .header img{display: block; top: 30px; left: 9%; position: absolute}


    #headerArea .headerInner .headerBottom #gnb{display: none; width: 100%; padding: 0; clear: both; position: absolute; top: 80px; z-index: 100; left: 0px;}
    ul.dropdownmenu{width: 100%; height: 730px}
    ul.dropdownmenu li.menu{float: none; border-bottom: 1px solid #ccc; margin-right: 0; text-align: center; padding: 17px 0 12px 0; background: #000}

    ul.dropdownmenu li.menu ul{width: 100%; padding: 0 ;left: 0; position: relative; top: 15px}
    ul.dropdownmenu li.menu ul:after{background: none}
    ul.dropdownmenu li ul li{background: rgb(255, 255, 255); float: none;
    width: 100%; border-bottom: 1px solid #ccc; padding: 16px 0;}
    ul.dropdownmenu li ul li:first-of-type{border-radius: 0}
    ul.dropdownmenu li ul li:last-of-type{border-radius: 0}
    ul.dropdownmenu li.bar{display: none}
    ul.dropdownmenu li.menu ul li a{color: #000; font-size: 20.83px}

    #headerArea .headerInner .headerBottom #gnb ul li a.depth1{font-size: 20px}



    #headerArea .headerInner .topMenu{display: none}

    #headerArea .headerInner .headerBottom .select{display: none}

    #footerArea{width: 100%; text-align: center; margin-top: 0}
    #footerArea .footerLeft{width: 100%; margin: 47px 0}
    #footerArea .footerLeft nav{margin: 0 auto 20px}
    #footerArea .footerLeft ul{font-size: 20.83px; display: inline-block}
    #footerArea .footerLeft ul li p.mb_pc{display: block}
    #footerArea .footerLeft ul li p.pc{display: none}
    #footerArea .footerLeft ul li:nth-child(4){padding: 0 0 0 4px}
    #footerArea .footerLeft ul li:nth-child(5){display:none}
    #footerArea .footerLeft ul li:nth-child(6){display:none}
    #footerArea a{color: #666666}
    #footerArea .footerLeft address{font-size: 20.83px; color: #666666; text-align: center}
    #footerArea .footerLeft  address .mb_code{display: inline-block}
    #footerArea .footerLeft  address .mb_hidden{display: none}
    #footerArea .footerLeft .footer_copyright{display: none}
    #footerArea .footerLeft .mb_copyright{width: 100%; display: block; font-size: 16.67px; color: #666666}
    #footerArea .footerLeft .mb_copyright a.f{background: url(../images/mb_icon1_footer.png) no-repeat; height: 21px; width: 21px;
    display: inline-block}
    #footerArea .footerLeft .mb_copyright a.t{background: url(../images/mb_icon2_footer.png) no-repeat; height: 21px; width: 21px;
    display: inline-block}

    #footerArea .footerRight{float: none; clear: both; margin: 0 auto; width: 100%;}
    #footerArea .footerRight ul{display: inline-flex}
    #footerArea .footerRight ul li:nth-child(2){width: 156px}
    .scroll_ico{display: none !important}

    ul.dropdownmenu li.menu ul li a{
    	color: #7a7a7a;
	    transition: all .5s;
	    font-size: 18px;
	    font-weight: bold;
    	/* color:#000; transition:all .5s; font-size: 16px */
    }
    #headerArea .headerInner .headerBottom .header {padding-top: 0px;}
    .isMobile { display: block; }

    #SidebarSituation address br {display:none;}

    .sideList_bagground{background: none}

}

/* 모바일 640px*/
@media screen and (max-width:640px) {

    #footerArea .footerLeft ul{font-size: 18px}
    #footerArea .footerLeft address{font-size: 18px}

}


/* 모바일 480px */
@media screen and (max-width:480px) {

    .swiper-container{height: 645px}

    #headerArea .headerInner .headerBottom .logo a{width: 250px; background-size: 100%; margin: 20px 25%}

    #footerArea .footerLeft{margin: 30px 0}
    #footerArea .footerLeft ul{font-size: 16px}
    #footerArea .footerLeft address{font-size: 16px; width: 80%; margin: auto}
    #footerArea .footerRight ul li:nth-child(1){width: 182px}
    #footerArea .footerRight ul li:nth-child(2){width: 157px}
}


@media (max-width: 550px) {
	.isPc { display: none; }
}

@media screen and (min-width:2000px) {
	.red-slide {
		height: 100%;
	}
	.main_content {
		max-width: 1920px;
    	margin: 0 auto;
    	position: relative;
	}
	.main_text {
	    max-width: 1920px;
	    text-align: left;
	    position: relative;
	}
	#wrap .swiper-container .main_text img {
	    width: unset;
	}
}