@CHARSET "UTF-8";

.html-wrap {width:100%; min-width: 1440px;}
.header-wrap {position: absolute;} /* templet header 고정 */
.body-wrap {position:relative; width:100%; clear: both;margin-bottom:60px;}
.body-wrap > .content-header{height: 500px; width: 100%; min-width: 1440px; position: relative; background-position: top center; background-size: cover; background-repeat: no-repeat;}
.body-wrap > .content-header.menu01 {background-color: #97c44b;}
.body-wrap > .content-header.menu02 {background-color: #649eff;}
.body-wrap > .content-header.menu03 {background-color: #628ab6;}
.body-wrap > .content-header.menu04 {background-color: #8cab5a;}
.body-wrap > .content-header.menu01 {background-image: url(../img/sub_visual_01.jpg?v20221101);}
.body-wrap > .content-header.menu02 {background-image: url(../img/sub_visual_02.jpg?v20221101);}
.body-wrap > .content-header.menu03 {background-image: url(../img/sub_visual_03.jpg?v20221101);}
.body-wrap > .content-header.menu04 {background-image: url(../img/sub_visual_04.jpg?v20221101);}
.body-wrap > .content-header.menu06 {background-image: url(../img/sub_visual_05.jpg);}
.body-wrap > .content-header > div {width: 1440px; position: relative; height: 100%; margin: auto;}
.body-wrap > .content-header > div > .menu-title {display: inline-block; font-size: 50px; font-weight: bold; color: #ffffff; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); text-shadow: 0 0 30px rgba(0, 0, 0, 0.2); }

.content-wrap {position:relative; width: 1200px; clear:both; margin: auto;}
.content-wrap > #side-menu {position:relative; float:left; width:210px; min-height: 50px; margin-top: 100px; margin-right: 30px; border: 1px solid #cccccc; } 
.content-wrap > #content {position:relative; float:right; display:table; width:960px; margin: 100px 0;}

.body-content {margin-bottom:20px; }
.body-content .text-content {line-height: 1.7; font-size: 16px; color: #666666;}

/* 사이드 메뉴 */
.snb {width: 210px; float: left; margin: 100px 30px 100px 0;}
.snb .gn > div,
.snb > div {height: 130px; background:linear-gradient(20deg, rgba(0,171,212,1) 0%, rgba(151,196,255,1) 100%); color: #ffffff; text-align: center; position: relative;}
.snb .sn {height: auto;}
.snb .gn > ul,
.snb .gn > div > div,
.snb > div > div {display:none;}
.snb .gn > div {display: block;}
.snb .gn > div > div.active,
.snb > div > div.active {display: inline-block; width: 100%; font-size: 22px; font-weight: bold; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.snb > div > img { height: 100%; }
.snb {position: relative;}
.snb .point {position: absolute; top:100vh; width: 0; height: 0;}
.snb.on {position: fixed; top:0; left:50%; margin:0 0 0 -600px;}
.snb_front {position: absolute; top:100px; width: 0; height: 0;}

.snb ul > li {min-height: 50px; background-color: #ffffff; border: 1px solid #dddddd; border-bottom: 0; text-align: left;}
.snb ul > li:FIRST-CHILD {border-top: 0;}
.snb ul > li:LAST-CHILD {border-bottom: 1px solid #dddddd;}
.snb ul > li > a {display: flex; align-items: center; justify-content: space-between; min-height: 50px; color: #666666;font-weight: 400;font-size:15px; padding:15px 12px; letter-spacing:-0.8px}
.snb ul > li > a > span {display: block; float: right; width: 15px; height: 25px; background-image: url(../img/Arrow_right01.png?v20221101); background-repeat: no-repeat; background-position:50% 50%; background-size:8px; transform:rotate(90deg);}
.snb ul > li > a > span.link {background-image: url(../img/icon_link.png?v20221101); transform:rotate(0deg); background-size:14px; height: 20px;}
.snb ul > li > a:HOVER {background-color: #f8f8f8; color: #00abd4;}
.snb ul > li > a:HOVER > span.link {background-image: url(../img/icon_link02.png?v20221101);}
.snb ul > li.open > a {background-color: #f8f8f8; color: #00abd4; min-height: auto; }
.snb ul > li.open > a > span {transform:rotate(-90deg);}
.snb ul > li:LAST-CHILD.open > a {border-bottom: 0;}

.snb ul > li > ul {background-color: #ffffff; padding: 28px 20px; box-sizing: border-box; border-top:1px solid #dddddd;}
.snb ul > li > ul:FIRST-CHILD {display: block;}
.snb ul > li > ul > li {position: relative; min-height: 25px; margin-bottom: 10px; border: 0 !important; height: auto;}
.snb ul > li > ul > li:FIRST-CHILD {border-top: 0;}
.snb ul > li > ul > li:LAST-CHILD {margin-bottom: 0;}
.snb ul > li > ul > li > span {display: inline-block; background: url(../img/bu_sidemenu.png?v20221101) no-repeat; width: 2px; height: 2px; margin-right: 8px; vertical-align: middle; background-position: 0px -25px;}
.snb ul > li > ul > li:HOVER > span {background-position: 0 0;}
.snb ul > li > ul > li.open > span {background-position: 0 0;}

.snb ul > li > ul > li > a {display: inline-block; font-size: 14px; font-weight: 400; color: #999999; padding: 0; height: auto; min-height:auto; letter-spacing:-0.8px; width:90%; vertical-align:top; }
.snb ul > li > ul > li > a > span {display: block; float: right; width: 15px; height: 18px; background-image: url(../img/btn_sub_sidemenu.png?v20221101); background-repeat: no-repeat; background-position: 0 -47px;}
.snb ul > li > ul > li.open > a {color: #00abd4; text-decoration-line: underline; text-underline-position: under; height: auto; background: none;}
.snb ul > li > ul > li:HOVER > a {color: #00abd4; }
.snb ul > li > ul > li.open > a > span {background-position: 0 -72px;}
.snb ul > li:FIRST-CHILD+li+li+li+li+li+li+li+li+li > ul > li > ul {bottom: 0; top: auto;}
.snb ul > li:FIRST-CHILD+li+li+li+li+li+li+li+li+li+li > ul > li > ul {bottom: 0; top: auto;}
.snb ul > li > ul > li > ul > li {position: relative; min-height: 25px;}
.snb ul > li > ul > li > ul > li > span {position: absolute; display: block; left: 18px; width: 9px; height: 25px; background-image: url(../../res/pc/img/bu_sub_sidemenu.png?v20221101); background-repeat: no-repeat; background-position: 0px 11px;}
.snb ul > li > ul > li > ul > li:HOVER > span {background-position: 0px -14px;}
.snb ul > li > ul > li > ul > li.open > span {background-position: 0px -14px;}
.snb ul > li > ul > li > ul > li > a {display: block; padding: 2px 20px 4px 25px; font-size: 13px; color: #444444;}
.snb ul > li > ul > li > ul > li > a > span {position: absolute; width: 23px; height: 21px; background-image: url(../img/btn_sub_sidemenu.png?v20221101); background-repeat: no-repeat; background-position: 6px -97px;}
.snb ul > li > ul > li > ul > li:HOVER > a {color: #eeeeee; font-weight: bold;}
.snb ul > li > ul > li > ul > li.open > a {color: #eeeeee; font-weight: bold;}
.snb ul > li > ul > li > ul > li.open > a > span {background-position: 6px -122px;}
.snb ul > li > ul > li > ul > li > ul > li {position: relative; min-height: 22px;}
.snb ul > li > ul > li > ul > li > ul > li > span {position:absolute; display: block; left: 25px; width: 8px; height: 17px; background-image: url(../../res/pc/img/bu_sub_sidemenu.png?v20221101); background-repeat: no-repeat; background-position: 0 -38px;}
.snb ul > li > ul > li > ul > li > ul > li.open > span {background-position: 0 -63px;}
.snb ul > li > ul > li > ul > li > ul > li:HOVER {background-color: #bfc9e1; background-image: url(../../res/pc/img/ptn_sidemenu.png?v20221101);}
.snb ul > li > ul > li > ul > li > ul > li > a {display: block; padding: 2px 10px 2px 35px; font-size: 13px;}
.snb ul > li > ul > li > ul > li > ul > li.open > a {color: #eeeeee; font-weight: bold;}

.snb ul > li.depth2 > a:HOVER {background-color: #ffffff;}

/* costom contents */
.main-title {width: 100%; text-align: center; margin-bottom: 40px;}
.main-title > .text {font-size: 36px; font-weight: bold; color: #222222; margin-bottom: 40px;}
.main-title > .icon {display: inline-block; background: url(../img/ele_tit.png?v20221101) no-repeat; width: 1px; height: 50px;}
.sub-title { position: relative; padding-left: 40px; font-size: 24px; font-weight: 500; color: #222222; background: url(../img/icon_title.png?v20221101) no-repeat; background-position: 0px 5px; margin-bottom: 30px; background-size: auto 28px;}
.sub-title2 {background: url(../img/bg_line.png?v20221101) no-repeat 50%; text-align: center; font-size: 20px; font-weight: 500; color: #e8aa00;}