@charset "utf-8";

/* 레이아웃 */
html { font-size: 20px; }
#footer, #footer_wrap { background: #eaeaea; }

/* 가운데 영역 */
.container, .container_wrap { position: relative; width: 1280px; margin: 0 auto; }

/* 로우 영역 */
.row, .row_wrap { padding: 0 40px; }

/* 헤더 영역 */
.join { overflow: hidden; height: 20px; }
.join_left { float: left; }
.join_left ul { position: relative; overflow: hidden; }
.join_left li { float: left; line-height: 21px; }
.join_left li:first-child { margin-right: 20px; }
.join_left li:first-child:after { position: absolute; left: 75px; top: 5px; content: ''; width: 1px; height: 12px; background: #222; }

.top_menu_right, .top_menu_right_login { display: none; }

@keyframes rotate_wolsan_logo {
	0% { transform: rotateY(0deg); }
	100% { transform: rotateY(180deg); }
}
@keyframes rotate_wolsan_text {
	0% { transform: rotateX(0deg); }
	100% { transform: rotateX(360deg); }
}

.head { overflow: hidden; height: 80px; }
.head_center { float: left; }
.head_title { position: relative; height: 90px; }
.head_center a > img { position: absolute; top: 5px; width: 70px; animation-name: rotate_wolsan_logo; animation-duration: 5s; animation-delay: 0s; animation-iteration-count: 3; }
.head_center h1 { position: absolute; left: 83px; top: -9px; width: 200px; font-size: 1.6rem; }
.head_center h1 img { position: absolute; top: 25px; left: -15px; font-weight: 600; animation: rotate_wolsan_text 5s 15s infinite; }
.head_center h1 strong { position: absolute; left: 50px; top: 21px; color: #002d5b; font-weight: 600; font-size: 36px; }

.head_right { position: relative; float: right; width: calc(100% - 80px - 200px); margin-top: 10px; }
.head_right .menu_ham { display: none; }
.menu_nav { position: absolute; top: 35px; right: 40px; width: 710px; max-width: 710px; z-index: 999; }
.menu_nav .navi_chassis > ul { display: flex; }
.menu_nav .navi_chassis > ul > li { position: relative; flex: 1; height: 50px; line-height: 45px; text-align: center; font-size: 0.900rem; font-weight: 400; background: #fff; border-left: 1px solid #fff; box-sizing: border-box; border-radius: 4px; margin-left: 1px; }
.menu_nav .navi_chassis > ul > li:last-child { border-right: 1px solid #fff; }
.menu_nav .navi_chassis > ul > li a { display: block; color: #002e5b; font-weight: 500; }
.menu_nav .navi_chassis > ul > li a:hover { color: #ff6a6f; font-weight: 700; }

.menu_nav .navi_chassis > ul > li > ul { display: none; position: absolute; left: -1px; top: 50px; width: 100%; }
.menu_nav .navi_chassis > ul > li > ul.active { display: block; }
.menu_nav .navi_chassis > ul > li > ul.active:before { content: ""; position: absolute; top: -5px; display: block; width: 100%; height: 10px; background: #ff656a; }
.menu_nav .navi_chassis > ul > li > ul > li { width: 100%; background: white; line-height: 35px; /*border: 1px solid #e63880; border-top: 0; border-radius: 4px; margin-top: 1px;*/ }
.menu_nav .navi_chassis > ul > li > ul > li:first-child { padding-top: 10px; }
.menu_nav .navi_chassis > ul > li > ul > li:last-child { border-radius: 0 0 4px 4px; padding-bottom: 10px; }

.div_user_infor { position: relative; }
.div_user_infor .user_infor { position: absolute; right: 10px; top: -22px; }
.div_user_infor .user_infor i { font-size: 24px; padding: 2px 0 0 5px; vertical-align: -4px; color: #065fd4; }
.div_user_infor .user_infor strong { font-size: 17px; color: #065fd4; }

/* 미디어쿼리 */
@media (max-width: 1280px) {
	.container, .container_wrap { width: 100%; }
}

@media (max-width: 1090px) {
	/*.head_right .navi_chassis { margin-left: calc(150px - (1280px - 100vw - 80px) * 0.625); }*/
	.menu_nav { width: calc(100vw - 280px - 100px); }
}