@charset 'utf-8';

/* 공통 */
:root {
  --mainColor: #22ac38
}

*{line-height: 1.3; word-break:keep-all; box-sizing:border-box;}
.os-theme-dark>.os-scrollbar, .os-theme-light>.os-scrollbar{padding: 0; margin: 30px 14px 30px 0; background: #EEEEEE;}
.os-theme-dark>.os-scrollbar-vertical, .os-theme-light>.os-scrollbar-vertical{width: 1px; padding: 0;}
.os-theme-dark>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle, .os-theme-light>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle{max-height: 100px;}
.os-theme-dark>.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle,
.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background: #999;}

.cm{color: var(--mainColor);}

.flex_box{display:flex}
.flex_box.jfs{justify-content:flex-start}
.flex_box.jfc{justify-content:center}
.flex_box.jfe{justify-content:flex-end}
.flex_box.as{align-items:flex-start}
.flex_box.ac{align-items:center}
.flex_box.ae{align-items:flex-end}

.w1600{padding: 0 150px;}
.w1500{width: 100%; max-width: 1500px; margin: 0 auto;}
.w1400{width: 100%; max-width: 1400px; margin: 0 auto;}
/* 전체메뉴라인 */
.line_box{position:absolute; top: 0; left: 50%; width: 100%; height: 100vh; padding: 0 150px; transform:translateX(-50%);}
.line_box span{position:absolute; top: 0; left: 150px; width: 1px; height: 100vh; background: rgba(226, 226, 226, 0.5); }
.line_box .right{left: auto; right: 150px;}
/* 폰트 */
.he{font-family: 'Heebo', sans-serif !important;}
/* 라인박스 */
.line span{position:absolute; }
.line .left{left: 150px; width: 1px; height: 100%; top: 0; }
.line .right{right: 150px; width: 1px; height: 100%; top: 0; }
.line .bot{width: 100%; bottom: 52px; height: 1px; left: 0; }
.line .top{width: 100%; top: 52px; height: 1px; left: 0;}
.line span.icon::before,
.line span.icon::after{content:""; position:absolute; z-index: 10; width: 7px; height: 7px; display:inline-block; vertical-align: top;}

.line .top.icon_left::before{top:-3px; left: 147px; background:url(/img/common/icon_line01.png)}
.line .top.icon_right::after{top:-3px; right: 147px; background:url(/img/common/icon_line01.png)}

.line .bot.icon_left::before{bottom: -3px; left: 147px; background:url(/img/common/icon_line01.png)}
.line .bot.icon_right::after{bottom: -3px; right: 147px; background:url(/img/common/icon_line01.png)}

.line .left.icon_bot::before{bottom: -3px; left: -3px; background:url(/img/common/icon_line01.png)}
.line .left.icon_top::after{top: -3px; left: -3px; background:url(/img/common/icon_line01.png)}
.line .left.icon_bot.px1::before{bottom: -4px;}
.line .left.icon_top.px1::after{top: -4px;}

.line .right.icon_bot::before{bottom: -3px; right: -3px; background:url(/img/common/icon_line01.png)}
.line .right.icon_top::after{top: -3px; right: -3px; background:url(/img/common/icon_line01.png)}
.line .right.icon_bot.px1::before{bottom: -4px;}
.line .right.icon_top.px1::after{top: -4px;}

.line.bgg span{background: rgba(238, 238, 238, 0.1);}

/* 퀵 */
.quick{position:fixed; top: 60px; right: 35px; z-index: 500;}
.quick ul{text-align: center; width: 85px;}
.quick ul li{margin-bottom:35px;}
.quick ul li:last-of-type{margin-bottom:0;}
.quick ul li a{display:inline-block; width: 85px; height: 85px; position:relative; font-size:14px; color: #fff; line-height: 85px;}
.quick ul li a::before{content:""; position:absolute; top: 50%; left: 50%; width: 80%; height: 80%; box-shadow: 0 0 20px 20px rgb(34 172 56 / 40%); background: rgba(34, 172, 56, 0.4); border-radius: 50%; transform:translate(-50%,-50%); z-index: -1; transition:0.5s}
.quick ul li.top{font-family: 'Heebo', sans-serif; font-size:14px; color: #fff; cursor: pointer;}
.quick ul li.top .top_icon{display:inline-block; vertical-align: top; width: 16px; height: 16px; background:url(/img/common/icon_top.png) 50% 50% no-repeat;}

.quick.sub ul li a,
.quick.c ul li a{color: #111;}
.quick.sub .top,
.quick.c .top{color: #111111;}
.quick.sub ul li.top .top_icon,
.quick.c ul li.top .top_icon{background:url(/img/common/icon_topH.png) 50% 50% no-repeat;}

.quick ul li a:hover::before{width: 110%; height: 110%; box-shadow: 0 0 0 0 rgb(34 172 56 / 100%); background: rgba(34, 172, 56, 1); opacity: 0.4;}

/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:15px;	line-height: 140%; word-break:break-all; }
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ font-size:15px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:15px; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }


.header{position:fixed; top: 0; left: 0; width: 100%; display:flex; justify-content:space-between; height: 105px; align-items:center; padding: 0 40px 0 65px; transition:0.4s; z-index: 1000;}
.header.inOut.top{top: -105px;}
.header::after{content:""; position:absolute; top: 0; right: 150px; width: 1px; height: 105px; background: rgba(255, 255, 255, 0.1); transition:0.4s;}
.header::before{content:""; position:absolute; top: 105px; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.1); transition:0.4s;}
.header .logo{}
.header .logo a{display:inline-block; vertical-align: top; width: 331px; height: 54px; background:url(/img/common/logo.svg) 50% 50% no-repeat;}
.header .gnb{position: absolute; top: 0; left: 50%; transform:translateX(-50%);}
.header .gnb > ul{display:flex;}
.header .gnb > ul > li{position:relative; }
.header .gnb > ul > li > a{display:inline-block; width: 100%; vertical-align: top; padding: 0 45px; line-height: 105px; font-weight:600; font-size:18px; color: #fff; transition: color 0.3s}
.header .gnb > ul > li > a span{display:none; }  
.header .gnb > ul > li > ul{position:absolute; top: 105px; left: 50%; width: 238px; background: #fff; border-radius:0 0 0 30px; max-height: 410px; overflow: hidden; transform:translateX(-50%);  visibility:hidden; height: 0; box-shadow: 0px 1px 34px rgba(0, 0, 0, 0.15); transition:1.0s}
.header .gnb > ul > li > ul.sub_depth02{overflow-y: auto;}
/* 스크롤 플러그인이 안되서 css로 작동 높이 직접 정해줘야함 *미디어 쿼리 1500px에도 있음 */
.header .gnb > ul > li:hover > ul{visibility:visible;}
.header .gnb > ul > li:hover > ul.sub_depth01{height: 315px;}
.header .gnb > ul > li:hover > ul.sub_depth02{height: 410px;}
.header .gnb > ul > li:hover > ul.sub_depth03{height: 121px;}
.header .gnb > ul > li:hover > ul.sub_depth04{height: 153px;}
.header .gnb > ul > li:hover > ul.sub_depth05{height: 185px;}
/* =================================================================== */
.header .gnb > ul > li .os-content > li,
.header .gnb > ul > li > ul > li{margin-bottom: 1px; padding: 0 20px 0 40px;}
.header .gnb > ul > li .os-content > li:first-of-type,
.header .gnb > ul > li > ul > li:first-of-type{padding-top:24px;}
.header .gnb > ul > li .os-content > li:last-of-type,
.header .gnb > ul > li > ul > li:last-of-type{margin-bottom:0; padding-bottom:34px;}
.header .gnb > ul > li .os-content > li > a,
.header .gnb > ul > li > ul > li > a{display:inline-block; vertical-align: top; width: 100%; font-weight:500; font-size:16px; line-height: 1.1875; color: #222; padding: 6px 0;  transition: color 0.3s}
.header .gnb > ul > li .os-content > li > ul,
.header .gnb > ul > li > ul > li > ul{margin-top: 1px;}
.header .gnb > ul > li .os-content > li > ul > li,
.header .gnb > ul > li > ul > li > ul > li{margin-bottom: 1px;}
.header .gnb > ul > li .os-content > li > ul > li:last-of-type,
.header .gnb > ul > li > ul > li > ul > li:last-of-type{margin-bottom:0;}
.header .gnb > ul > li .os-content > li > ul > li > a,
.header .gnb > ul > li > ul > li > ul > li > a{position:relative; display:inline-block; vertical-align: top; width: 100%; font-weight:300; font-size:16px; line-height: 1.1875; color: #666; vertical-align: top; padding:6px 0 6px 8px; transition:color 0.3s}
.header .gnb > ul > li .os-content > li > ul > li > a::before,
.header .gnb > ul > li > ul > li > ul > li > a::before{content:"·"; position:absolute; top: 5px; left: 0;font-weight:300; font-size:16px; line-height: 1.1875;}
.header .header_ui{}
.header .header_ui .m_btn{position:relative; width: 70px; height: 70px; text-align: center; cursor: pointer; z-index: 100;}
.header .header_ui .m_btn span{position:relative; display:inline-block; vertical-align: top; width: 20px; height: 1px; background: #fff; margin: 34px 0; transition:0.4s} 
.header .header_ui .m_btn span::after{content:""; position: absolute; top: -7px; left: 0; width: 100%; height: 100%; background: #fff; transition:0.4s}
.header .header_ui .m_btn span::before{content:""; position: absolute; top: 7px; left: 0; width: 100%; height: 100%; background: #fff; transition:0.4s}
.header .header_ui .all_menu{position:fixed; top: 0; right: -30%; width: 100%; height: 100vh; background: #fff; padding: 105px 0;  visibility:hidden; opacity: 0; transition:1s}
.header .header_ui .all_menu::after{content:""; position:absolute; top: -158px; left: -108px; background: var(--mainColor); opacity: 0.2; filter: blur(167px); width: 477px; height: 477px; border-radius:50%;}
.header .header_ui .all_menu::before{content:""; position:absolute; bottom:  -53px; right: -33px; background: var(--mainColor); opacity: 0.2; filter: blur(167px); width: 477px; height: 477px; border-radius:50%;}
.header .header_ui .all_menu .line_box .right{height: calc(100vh - 105px); top: 105px;}
.header .header_ui .all_menu .flex_box{position:relative; max-width: 100%; align-items:center; justify-content:center;  z-index: 5; height: calc(100vh - 210px); padding: 0 150px;}
.header .header_ui .all_menu .flex_box::after{content:""; position:absolute; top: 0; left: 605px; width: 1px; height: 100%; background: rgba(226, 226, 226, 0.5); }
.header .header_ui .all_menu .flex_box .img{width: 709px; height: calc(100vh - 210px); background:url(/img/common/all_nav_img.png) 50% 50% /cover no-repeat;}
.header .header_ui .all_menu .flex_box .img figure{position:relative; padding-bottom:45.2%; overflow: hidden;}
.header .header_ui .all_menu .flex_box .img figure img{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); max-width: 100%; height: 100%;}
.header .header_ui .all_menu .flex_box .a_gnb{width: calc(100% - 709px);}
.header .header_ui .all_menu .flex_box .a_gnb > ul{position:relative;}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li{/*  margin-bottom:80px */; margin-bottom:1px; width: 455px;}
.header .header_ui .all_menu .flex_box .a_gnb li:last-of-type{margin-bottom:0;}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li > a{position:relative; display:inline-block; width: 455px; vertical-align: top; font-weight:600; font-size:40px; color: #222; padding: 25px 0 25px 65px;opacity: 0.2; transition:0.3s}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li:first-of-type > a{padding-top: 0;}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li > a span{display:block; font-weight:800; width: 100%; font-size:14px; color: var(--mainColor);}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li:first-of-type > a span{top: -20px;}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content,
.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul{display:none; position:absolute; top: 23px; left: 455px; padding-left: 70px; width: calc(100% - 455px); max-height: 545px;}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content{display:block; left: 0 !important;}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li,
.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li{/* margin-bottom:30px; */ padding-right: 62px;} 
.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li > a,
.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li > a{display:inline-block; vertical-align:top; width: 100%; padding: 15px 0; font-weight:500; font-size:20px; color: #666; transition:color 0.3s;} 
.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li:first-of-type > a,
.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li:first-of-type > a{padding-top: 0;	}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li > ul,
.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li > ul{margin-top: -7px; margin-bottom:12px;}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li > ul > li,
.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li > ul > li{margin-bottom:1;}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li > ul > li > a,
.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li > ul > li a{position:relative; display:inline-block; vertical-align:top; width: 100%; font-weight:300; font-size:18px; color: #666; padding: 7px 0 7px 8px; transition:color 0.3s}
.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li > ul > li > a::before,
.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li > ul > li a::before{content:"·"; position:absolute; top: 5px; left: 0;}
/* 전체 메뉴 스크롤 */
.header .header_ui .all_menu .os-theme-dark>.os-scrollbar, .os-theme-light>.os-scrollbar{padding: 0; margin: 0 60px 0 0; background: #F1F1F1;}
.header .header_ui .all_menu .os-theme-dark>.os-scrollbar-vertical, .os-theme-light>.os-scrollbar-vertical{width: 2px; padding: 0;}
.header .header_ui .all_menu .os-theme-dark>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle, .header .header_ui .all_menu .os-theme-light>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle{max-height: 210px;}
.header .header_ui .all_menu .os-theme-dark>.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle,
.header .header_ui .all_menu .os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background: var(--mainColor);}
/* ===================================================== */

.header .header_ui .all_menu .a_footer{text-align: center;  border-top: 1px solid rgba(226, 226, 226, 0.5);}
.header .header_ui .all_menu .a_footer p{font-weight:300; font-size:15px; color: #808080; line-height: 104px;}

.header.scroll{background: #fff; }
.header.scroll::before{background:rgba(226, 226, 226, 0.5);}
.header.scroll::after{background:rgba(226, 226, 226, 0.5);}
.header.scroll .logo a{background:url(/img/common/logo_h.svg) 50% 50% no-repeat;}
.header.scroll .gnb > ul > li > a{color: #222;}
.header.scroll .header_ui .m_btn span, 
.header.scroll .header_ui .m_btn span::after,
.header.scroll .header_ui .m_btn span::before{background: #000;}

.header .header_ui .all_menu .flex_box .a_gnb > ul > li.on > a{opacity: 1;}


.header.open{border-color: rgba(226, 226, 226, 0.5);}
.header.open .header_ui .m_btn{z-index: 100;}
.header.open::before{background:rgba(226, 226, 226, 0.5); z-index: 100;}
.header.open::after{background:rgba(226, 226, 226, 0.5);}
.header.open .header_ui .m_btn span{background: transparent;} 
.header.open .header_ui .m_btn span::after{transform:rotate(45deg); top: 0; background: #000;}
.header.open .header_ui .m_btn span::before{transform:rotate(-45deg); top: 0; background: #000;}
.header.open .header_ui .all_menu{right: 0; visibility:visible; opacity: 1;}


.footer{position:relative; background: #111111; padding: 63px 180px;}
.footer::after{content:""; position:absolute; top: 0; right: 150px; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.1); }
.footer::before{content:""; position:absolute; top: 0; left: 150px; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.1);}
.footer .flex_box{display:flex; align-items:center}
.footer .flex_box .left{display:flex; width: 60%; align-items:center}
.footer .flex_box .left .f_logo{background:url(/img/common/f_logo.png) 50% 50% no-repeat; width: 80px; height: 64px;}
.footer .flex_box .left .addr{width: calc(100% - 80px); padding-left: 50px;}
.footer .flex_box .left .addr h3{font-weight:600; font-size:15px; color: #ccc; margin-bottom: 15px;}
.footer .flex_box ul{display:flex; flex-wrap:wrap; }
.footer .flex_box ul li{position:relative; font-weight:300; font-size:15px; color: #ccc; margin-bottom:15px;}
.footer .flex_box ul li:first-of-type{margin-right: 31px;}
.footer .flex_box ul li:first-of-type::after{content:""; position:absolute; top: 4px; right: -16px; width: 1px; height: 11px; background: #5C5C5C;}
.footer .flex_box ul li:last-of-type{margin-bottom: 0;}
.footer .flex_box ul li span{font-weight:600;}
.footer .flex_box ul li.w100{width: 100%;}
.footer .flex_box ul li address{display:inline; }
.footer .flex_box .right{width: 40%; text-align: right;}
.footer .flex_box .right ul{justify-content:flex-end;}
.footer .flex_box .right ul li{margin-right: 31px;}
.footer .flex_box .right ul li::after{content:""; position:absolute; top: 4px; right: -16px; width: 1px; height: 11px; background: #5C5C5C;}
.footer .flex_box .right ul li:last-of-type,
.footer .flex_box .right ul li:first-of-type{margin-right: 0;}
.footer .flex_box .right ul li:last-of-type::after,
.footer .flex_box .right ul li:first-of-type::after{display:none; }
.footer .flex_box .right p{font-weight:300; font-size:15px; color: #808080;}



/* @keyframes inOut{
	0%{border-radius:46% 54% 48% 52% / 53% 45% 55% 47%}
	20%{border-radius:34% 66% 34% 66% / 59% 37% 63% 41%; transform:rotate(0);}
	40%{border-radius:65% 35% 35% 65% / 59% 81% 19% 41%}
	60%{border-radius:65% 35% 72% 28% / 59% 22% 78% 41%}
	80%{border-radius:34% 66% 34% 66% / 59% 37% 63% 41%}
	100%{border-radius:50% 50% 50% 50% / 50% 50% 50% 50%; transform:rotate(360deg);}
} */

@media (hover: hover){
	.header .gnb > ul > li:hover > a{ color: var(--mainColor); font-weight:bold;}
	.header .gnb > ul > li .os-content > li:hover > a,
	.header .gnb > ul > li > ul > li:hover > a{font-weight:600; color: var(--mainColor);}
	.header .gnb > ul > li .os-content > li > ul > li > a:hover,
	.header .gnb > ul > li > ul > li > ul > li > a:hover{font-weight:400; color: #222;}

	.header .header_ui .all_menu .flex_box .a_gnb > ul > li:hover > a{opacity: 1;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li:hover > a,
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li:hover > a{font-weight:600; color: var(--mainColor);}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li > ul > li > a:hover,
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li > ul > li a:hover{font-weight:400; color: var(--mainColor);}
}
@media (max-width: 1800px){
	.header .header_ui .all_menu .flex_box::after{left: 530px;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li{width: 380px;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content, 
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul{width: calc(100% - 380px); left: 380px; padding-left: 40px;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > a{width: 380px; font-size:34px; padding-left: 40px;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > a span{left: 40px;}
}

@media (max-width: 1700px){
	.quick{right: 15px;}

	.header{padding: 0 25px 0 40px;}
	.header::after{right: 120px;}
	.header .gnb > ul > li > a{padding: 0 30px;}
	

	.w1600,
	.line_box,
	.header .header_ui .all_menu .flex_box{padding: 0 120px;}

	
	.footer::before,
	.line .left,
	.line_box span{left: 120px;}
	.footer::after,
	.line .right,
	.line_box .right{right: 120px;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li,
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li{padding-right: 20px;}
	.header .header_ui .all_menu .os-theme-dark>.os-scrollbar, .os-theme-light>.os-scrollbar{margin: 0 20px 0 0;}

	.header .header_ui .all_menu .flex_box::after{left: 500px;}

	.line .top.icon_left::before{left: 117px;}
	.line .top.icon_right::after{right: 117px;}
	.line .bot.icon_left::before{left: 117px;}
	.line .bot.icon_right::after{right: 117px;}

}

@media (max-width: 1600px){
	.w1600,
	.line_box, .header .header_ui .all_menu .flex_box{padding: 0 70px;}
	.line_box span{left: 70px;}
	.line_box .right{left: auto; right: 70px;}
	.header .header_ui .all_menu .flex_box::after{left: 450px;}
	.header .header_ui .all_menu .line_box .right{top: 70px; height: calc(100vh - 70px);}

	.header.open{padding: 0 0 0 40px; height: 70px;}
	.header.open::after{right: 70px; height: 70px;}
	.header.open::before{top: 70px;}
	.header.open .header_ui .all_menu{padding: 70px 0 105px; transition:0.4s}
	.header.open .header_ui .all_menu .flex_box .img,
	.header.open .header_ui .all_menu .flex_box{height: calc(100vh - 175px)}

	.footer{padding: 60px 140px;}
	.footer .flex_box .left .addr{padding-left: 25px;}
}

@media (max-width: 1500px){
	.quick{right: 15px;}


	.header .gnb{position:static; transform:translateX(0);}
	.header .gnb > ul > li > ul{width: 205px;}
	.header .gnb > ul > li .os-content > li:first-of-type,
	.header .gnb > ul > li > ul > li:first-of-type{padding-top: 14px;}
	.header .gnb > ul > li .os-content > li,
	.header .gnb > ul > li > ul > li{padding: 0 20px;}
	.header .gnb > ul > li .os-content > li:last-of-type,
	.header .gnb > ul > li > ul > li:last-of-type{padding-bottom:14px;}

	/* 스크롤 플러그인이 안되서 css로 작동 높이 직접 정해줘야함 */
	.header .gnb > ul > li:hover > ul.sub_depth01{height: 315px;}
	.header .gnb > ul > li:hover > ul.sub_depth02{height: 410px;}
	.header .gnb > ul > li:hover > ul.sub_depth03{height: 91px;}
	.header .gnb > ul > li:hover > ul.sub_depth04{height: 123px;}
	.header .gnb > ul > li:hover > ul.sub_depth05{height: 155px;}
	/* =================================================================== */

	.header .header_ui .all_menu .flex_box::after{left: 370px;}
	.header .header_ui .all_menu .flex_box .img{width: 550px}
	.header .header_ui .all_menu .flex_box .a_gnb{width: calc(100% - 550px);}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li{margin-bottom:0;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > a,
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li{width: 300px;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > a{padding: 16px 0 16px 30px; font-size:30px;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content, 
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul{width: calc(100% - 300px); left: 300px; padding-left: 20px;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul{ top: 50%; transform:translateY(-50%);}
}

@media (max-width: 1200px){
	.quick{bottom: 20px;}
	.quick ul li a{width: 50px; height: 50px; line-height: 50px;}
	.quick ul li a:hover::before{width: 140%; height: 140%;}

	.header{padding: 0 0 0 16px; height: 70px;}
	.header::before{top: 70px;}
	.header::after{right: 8px; height: 70px;}
	.header .gnb{display:none; }

	
	.header .header_ui .all_menu::after,
	.header .header_ui .all_menu::before{width: 200px; height: 200px; filter:blur(0); border-radius:50%; box-shadow:0 0 200px 200px var(--mainColor); opacity: 0.1;}
	.header .header_ui .all_menu::before{right: 0; bottom: 0;}
	.header .header_ui .all_menu::after{top: 0; left: 0;}
	
	.header .header_ui .all_menu .flex_box .a_gnb{width: 100%;}
	.header .header_ui .all_menu .flex_box .img{display:none;}
	
	.header.open::after{right: 8px;}
	.footer::before,
	.line .left,
	.line_box span{left:8px;}
	.footer::after,
	.line .right,
	.line_box .right{right: 8px;}
	.line .top.icon_left::before{left: 5px;}
	.line .top.icon_right::after{right: 5px;}
	.line .bot.icon_left::before{left: 5px;}
	.line .bot.icon_right::after{right: 5px;}
	
	.header .header_ui .all_menu .flex_box::after{left: 315px;}
	.w1600,
	.line_box, .header .header_ui .all_menu .flex_box{padding: 0 16px;}

	.footer{padding: 40px 16px;}
}

@media (max-width: 1000px){

	.quick{top: auto !important; position:fixed !important; bottom: 60px;}

	.footer .flex_box{flex-wrap:wrap;}
	.footer .flex_box .left{width: 100%; flex-wrap:wrap;}
	.footer .flex_box .left .addr{width: 100%; padding-left: 0; margin-top: 20px;}
	.footer .flex_box .right{width: 100%; text-align: left; margin-top: 15px;}
	.footer .flex_box .right ul{justify-content:flex-start}
}

@media (max-width: 800px){
	
	.header .header_ui .all_menu::before{right:-140px; bottom: -140px;}
	.header .header_ui .all_menu::after{top: -140px; left: -140px;}
	.header .header_ui .all_menu .flex_box::after{left: calc(40% + 2px);}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li{width: 40%;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > a{width: 100%; padding-left: 15px; padding: 10px 0 10px 10px;}

	.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content,
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul{width: 60%; left: 40%; max-height: 400px;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li,
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li{padding-right: 10px;}
	.header .header_ui .all_menu .os-theme-dark>.os-scrollbar, .os-theme-light>.os-scrollbar{margin-right: 10px;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li > a,
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li > a{padding: 8px 0;}
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li .os-content > li > ul > li > a,
	.header .header_ui .all_menu .flex_box .a_gnb > ul > li > ul > li > ul > li a{padding: 5px 0 5px 8px;}
}