@charset "utf-8";

/*전체 메뉴 시 컨텐츠 쪽 스크롤 방지*/
html.noneScroll, body.noneScroll  {overflow: hidden !important; overflow-x: hidden !important; overflow-y: hidden !important;}

/*layout*/
.wow {visibility: hidden;}

/*header*/
.header { box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 100; right: 0; left: 0; padding: 0 100px; height: 100px; font-size: 14px; background:#fff; box-shadow: 0 1px 0 0 rgba(0 0 0/10%);}
    /* logo */
.header .logo { width: 500px; padding-left:30px;}
.header .logo a { display: flex !important; }
.header .logo_sym { width: 90px !important; margin-right: 12px; }
.header .logo img {width: 100%; height: 44px;}
.header .logo img.logo_m {display: none;}

.header .fr{ display: flex; align-items: center;}

    /* util icon */
.header .right_wrap { display: flex; align-items: center; box-sizing: border-box; z-index: 9999;}
.header .right_wrap a{display: block; width: 100%; height: 100%;}
    /* Login */
.header .login{width: 21px; height: 24px; background:url(/images/2022/cmmn/login.png)no-repeat center center/cover;}
.header .logout{width: 24px; height: 24px; background:url(/images/2022/cmmn/head_icon5.png)no-repeat center center/cover;}

    /* Lang */
.header .lang{ position:relative; width: 24px; height: 24px; background:url(/images/2022/cmmn/lang.png)no-repeat center center/cover; margin: 0 20px;}
.header .lang:hover .lang_box{ opacity: 1;}
.header .lang_box{ position: absolute; top: 35px;  left: 50%; transform: translateX(-50%); opacity: 0;}
.header .lang_box > a{padding: 8px 12px; text-align: center;  display: block; box-sizing: border-box; border-radius: 10px; background: #111; color: #fff; margin-bottom: 3px; font-size: 12px; text-transform: uppercase; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.header .lang_box > a:hover{background: #000;  font-weight: 500;}

    /* ham_btn */
.header .ham_btn{width: 22px; height: 22px; background:url(/images/2022/cmmn/ham.png)no-repeat center center/cover; cursor: pointer;}
.header .ham_btn.active{width: 22px; height: 22px; background:url(/images/2022/cmmn/cls.png)no-repeat center center/cover; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.header .ham_btn.active:hover{transform:rotate(180deg);}

    /* gnb */
    /*전체 드랍다운 CSS:S*/
.header .head { display: flex; align-items: center; box-sizing: border-box; transition: all .3s ease-in-out; background-color: rgba(0,0,0,0);}
.header .head::before { position: absolute; top: 100px; right: 0; left: 0; height: 0; transition: all .2s ease-in-out; content: ""; opacity: 0;}
.header .gnb_wrap {text-align:center;}
.header .gnb_wrap > .gnb > ul{ display: flex;}
.header .gnb_wrap > .gnb > ul > li{ position: relative; width: 120px;}
.header .gnb_wrap > .gnb > ul > li:first-child{ margin: 0;}
.header .gnb_wrap > .gnb > ul > li > a{ box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; height: 100px; text-align: center; font-weight: 500; color: #333; font-size: 18px;}
.header .gnb_wrap > .gnb > ul > li > a.ab{padding-top:17px; font-weight: 700; letter-spacing: -1px;}
.header .gnb_wrap > .gnb > ul > li > a::before { content: ""; position: absolute;  bottom: 0; right: 0; left: 0; height: 3px; background: #e10713; opacity: 0;}
.header .gnb_wrap > .gnb > ul ul{ position: absolute; top: 100px; right: 0; left: 0; padding: 20px 0;}
.header .gnb_wrap > .gnb > ul ul > li > a { color:#fff;}
.header:hover .gnb_wrap > .gnb > ul ul { display:block;}
.header .gnb_wrap > .gnb > ul ul > li {}
.header .gnb_wrap > .gnb > ul ul > li a { display: flex; justify-content: center; align-items: center; height: 40px; font-size:16px; color: #333; transition: all .3s ease-in-out; position:relative;}
.header .gnb_wrap > .gnb > ul ul > li a::before{position: absolute; content: ""; width: 11px; height: 9px; background:url(/images/2022/cmmn/tit_dec.png)no-repeat top center/cover; top: 10%; right: -18px;  transition: all .3s ease-in-out; opacity: 0;}
.header .gnb_wrap > .gnb > ul ul > li:hover a::before{opacity: 1;}
.header .gnb_wrap > .gnb > ul ul > li:hover a {color:#e10713; font-weight: 500; transition: all .3s ease-in-out;}


.header .head:hover{}
.header .head:hover::before { height: 200px; background: rgba(230 230 230/100%); opacity: 1;}
.header .gnb_wrap > .gnb { overflow: hidden;}
.header .head:hover .gnb_wrap > .gnb {overflow: inherit;}
.header .head:hover .gnb_wrap > .gnb > ul > li > a {color: #000;}
.header .gnb_wrap > .gnb > ul > li > .two_depth{ transition: all .5s ease-in-out;}
.header .gnb_wrap > .gnb > ul > li > .two_depth.td1{}
.header .head:hover .gnb_wrap > .gnb > ul > li > .two_depth {opacity: 1; z-index: 0;}
.header .head .gnb_wrap > .gnb > ul > li:hover > a {position: relative;}
.header .gnb_wrap > .gnb > ul > li:hover > a::before {opacity: 1;}
.header .head:hover .right_box a {background-color: #ddd; border-color: #ddd;}
.header .head:hover .sns a {background-image: url("/images/2022/cmmn/sns_c.png");}

.scroll .head{background-color: #fff;}
.scroll .gnb_wrap > .gnb > ul > li > a {color: #000;}
.scroll .head:hover {background-color: #fff;}
.scroll .head .logo img.logo_b {display: inline;}
.scroll .head .right_box a {background-color: #ddd; border-color: #ddd;}
.scroll .head .sns a {background-image: url("/images/2022/cmmn/sns_c.png");}

.scroll .ham_btn span {background: #000;}
.scroll .ham_btn.active span {background: #fff;}

@media(max-width: 1701px){
    .header{ padding: 0 30px 0 0;}

}
@media(max-width: 1501px){
    .header{ padding: 0 50px 0 0;}
    .header .head{ display: none;}
}
@media(max-width: 767px){
    .header{ padding: 0 20px 0 0;}

    .mobile_menu .gnb > ul{ margin: 30px 0 0 0 !important;}
    .mobile_menu .gnb > ul > li{ margin: 30px 0 0 0 !important;}
    .mobile_menu .gnb > ul > li.open ul{ display: block !important;}

}



/* mobile menu */
.mobile_menu {background: rgba(0,0,0,.3); display: none;  box-sizing:border-box; position: fixed; left: 0; width: 100%; height: 100%; top: 0;}
.mobile_menu .right_wrap {display: none;}
.mobile_menu .gnb_logo{width: 500px; float: left; padding:30px 0 0 80px; z-index: 999999999999;}
.mobile_menu .gnb_logo img.logo_m{display: none;}

.mobile_menu .gnb { box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: -70%;width: 100%; height: 100%; background: #fff; }

.mobile_menu .gnb .gnb_logo{ display: flex; align-items: center; position: absolute; top: 0; left: 100px; padding: 0; height: 100px;}

.mobile_menu .gnb > ul { display: flex; flex-wrap: wrap; margin: -50px -50px 0 -50px; max-width: 1000px; width: 100%;}
.mobile_menu .gnb > ul:after {display: block; content: ""; clear: both; height: 0;}
.mobile_menu .gnb > ul > li{ display: block; box-sizing: border-box; margin: 50px 0 0 0; width: 33.33%; text-align: center;}
.mobile_menu .gnb > ul > li > a { margin: 0 50px; line-height:130%; color:#333; font-weight: 600; font-size: 24px; transition:all .3s ease; word-break: keep-all; position: relative;}
.mobile_menu .gnb > ul > li > a.ab{font-weight: 800;}
.mobile_menu .gnb > ul > li > a::before {position: absolute; content: ""; width: 220px; left: 50%; transform: translateX(-50%); bottom: -15px; height: 1px; background: #ddd;}
.mobile_menu .gnb > ul > li > a::after{position: absolute; content: ""; width: 15px; height: 12px; background:url(/images/2022/cmmn/tit_dec.png)no-repeat top center/cover; top: -4%; right: -25px;  transition: all .3s ease-in-out;}
.mobile_menu .gnb > ul > li > ul { margin-top: 40px;}
.mobile_menu .gnb > ul > li > ul a { position: relative; font-weight: 400; color: #333; font-size: 16px; transition: all .3s ease-in-out; word-break: keep-all; padding-bottom: 20px; display: block;}
.mobile_menu .gnb > ul > li > ul a:hover { color:#e10713; font-weight: 500;}
.mobile_menu .close_btn { z-index:2; position: absolute; right: -70px; width: 60px; height:60px; text-indent: -99999px; border:2px solid #122e4b; top: 10px; box-sizing: border-box; background:#fff url("/images/2022/cmmn/clos_btn.png") no-repeat center; cursor: pointer;}
.mobile_menu .mobile_f_btn { display:none; position: fixed; bottom: 0; width:100%; min-width: 360px;}
.mobile_menu .mobile_f_btn a { background: #e10713; padding: 25px 0; text-align: center; float: left; width: 50%;  box-sizing: border-box; color:#fff; display: inline-block;}
.mobile_menu .mobile_f_btn a:first-child {border-right:1px solid #e10713;}
/*layout*/



@media print, screen and (max-height:860px){
    /* mobile_menu *//*높이 값이 낮을 때, overflow-y 스크롤 추가*/
   .mobile_menu .gnb {overflow-y: scroll;}
}

@media print, screen and (min-width:501px){
    /* mobile_menu *//*모바일에서 PC로 바뀔 때 메뉴 간 간격 오류 수정*/
    .mobile_menu .gnb > ul > li > ul {height: auto !important;}
}

@media print, screen and (max-width:1700px){
	.header .gnb_wrap{left:28%;}
    .header .right_wrap{right: 1%;}
}

@media print, screen and (max-width:1500px){
    /* gnb */
    .header .gnb_wrap{left:30%;}
    .header .gnb_wrap > .gnb > ul > li > a{font-size:17px;}
    .header .gnb_wrap > .gnb > ul > li{width:124px;}
}

@media print, screen and (max-width:1400px){
    /* header */
    /*전체 드랍다운 CSS:S*/
    .header .gnb_wrap {width: 60%;}
    .header .gnb_wrap > .gnb > ul > li {width: 110px;}
    /*전체 드랍다운 CSS:E*/

    .header .gnb_wrap {display: none;}
    .header .lang a {margin: 5px 15px 0 0;}
    .header .sns .blog {margin-left: 10px;}
}

@media print, screen and (max-width:1200px){
    /* header */
    .header .head:hover{background-color: none !important; height: 0px !important;}
    .header .head::before{display: none;}
    .header .logo, .mobile_menu .gnb_logo{}
}

@media print, screen and (max-width:1024px){
    /* header */
    .header .head {}

    /* dropdown효과 */
    .header .head::before {display: none;}
    .header .head:hover {background-color: inherit; height: 90px;}
    .header .head:hover .logo img.logo_b {display: none;}
    .header .head:hover .logo img.logo_w {display: inline;}
    .header .head:hover .lang a {border-color: #fff; background-color: transparent;}
    .header .head:hover .sns a {background-image: url("/images/2022/cmmn/sns_w.png");}
    
    /* ham_btn */
    .header.active .ham_btn span {background: #fff;}
    .header .ham_btn {top: 24px;}
    .header .ham_btn.active {top:24px;}
    
    /* 스크롤 */
    .scroll .head:hover {background-color: #fff;}
    .scroll .head:hover {background-color: #fff;}
    .scroll:hover .ham_btn span { background-color: #000;}
    .scroll:hover .ham_btn.active span { background-color: #fff;}

    /* mobile_menu */
    .mobile_menu .right_wrap {z-index: 1;top: 28px; display: block;}
    .mobile_menu .gnb {width: 100%; overflow-y: scroll;}
    .mobile_menu .gnb_logo{padding: 30px;}
    .mobile_menu .gnb > ul > li > ul li:first-child {margin-top: 0;}
    .mobile_menu .gnb > ul > li > ul li {display: block; margin-left: 0; margin-top: 15px;}
    .mobile_menu .gnb > ul > li > ul a {font-size: 17px;}
      
}

@media print, screen and (max-width:768px){
    /* header */
    .header .logo img { height: unset; }
    .header, .header .head{height: 70px;}
    .header .head{padding: 11px 12px;}
    .header .right_wrap{right: 5%; top: 24px;}

    .header .logo {width: 210px; padding-left:20px;}
    .header .logo_sym { display: none; }
    .header .logo img.logo_w {display: none;}
    .header .logo img.logo_m {display: block;}
    .header .head:hover .logo img.logo_w {display: none;}

	.header .logout{width:20px; height:20px;}
    .header .login{width: 19px; height: 21px;}
    .header .lang{width: 20px; height: 20px; margin: 0 20px 0 25px;}
    .header .ham_btn{ width: 30px; height: 30px; background-size: 20px 20px;}
    .header .ham_btn.active{width: 30px; height: 30px; background-size: 20px 20px;}

    /* mobile_menu */
    .mobile_menu .gnb_logo{width: 210px; height: 46px; padding:15px}
    .mobile_menu .gnb_logo img.logo{display: none;}
    .mobile_menu .gnb_logo img.logo_m{display: block;}
    .mobile_menu .gnb > ul > li{ width: 50%; }
    .mobile_menu .gnb > ul > li > a { font-size: 18px;}
    .mobile_menu .gnb > ul > li > ul a{font-size: 15px; padding-bottom:0px;}
}

@media print, screen and (max-width:500px){
    /* header */
    .header .logo{width: 140px; padding-left:10px;}
    .header .lang_box{top:26px;}
    .header .lang_box > a{padding: 5px; font-size: 11px;}

    /* mobile_menu */
    .mobile_menu .gnb_logo{ left: 20px !important; padding: 0; width: 140px; height: 70px !important;}
    .mobile_menu .gnb > ul{display: block; flex: none;}
    .mobile_menu .gnb > ul > li{width: 100%;}
    .mobile_menu .gnb > ul > li a{ position: relative; z-index: 100;}
    .mobile_menu .gnb > ul > li > ul{margin-top: 35px;}
}