@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}


/* header */
#header {position:relative; top:0; left:0; width:100%; background:#fff; height:100px; z-index:90;}
#header .contain {position:relative; z-index:2;}
#header .topline {position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient(90deg, rgba(204,0,1,1), rgba(255,127,0,1));}
#header .sitelogo {position:absolute; top:23px; left:0; z-index:10; }


#gnb {position:relative; font-weight:400; font-family:'InfinitySans'; letter-spacing:-.03em;}
#gnb>ul {display:flex; justify-content:flex-end;}
#gnb>ul>li {position:relative; text-align:center; padding:0 40px;}
#gnb>ul>li:last-child {padding-right:0;}
#gnb>ul>li>a {position:relative; display:inline-block; color:#242424; font-size:20px; line-height:100px;}
#gnb>ul>li.active>a {color:#cc0001;}


#gnb .submenu {position:absolute; top:100px; height:50px; left:23px; display:none;}
#gnb .submenu ul {display:flex;} 
#gnb .submenu ul li {padding:0 20px;} 
#gnb .submenu ul li a {display:block; color:#fff; font-size:16px; font-weight:400; line-height:50px; white-space:nowrap;}
#gnb .submenu ul li a:hover {text-decoration:underline;}

#gnb>ul>li.m2 .submenu {left:-300px;}
#gnb>ul>li.m3 .submenu {left:45px;}
.submenu-bg {display:none; position:absolute; top:100px; left:0; width:100%; background:#333;}


/* main */ 
.main_visual {position:relative; overflow:hidden; letter-spacing:-.03em;}
.main_visual .item {position:relative; height:885px; z-index:10;}
.main_visual .item .section-img {position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-repeat:no-repeat; background-position:50% 50%;}
.main_visual .cnt {position:absolute; width:1200px; height:auto; top:0; left:50%; transform:translateX(-50%); font-family:'InfinitySans';}
.main_visual .tit {color:#fff; position:absolute; top:150px; left:0;}
.main_visual .tit p {font-size:22px; line-height:2.727em; font-weight:400;}
.main_visual .tit h3 {font-size:40px; line-height:1.1em;  font-weight:700;}
.main_visual .tit h3 span {font-size:55px; display:block; line-height:1.5em;}
.main_visual .wrap {display:flex; margin-left:-20px; position:absolute; top:420px; left:0;}
.main_visual .wrap .box {width:calc(25% - 20px); margin-left:20px; font-family:'InfinitySans';}
.main_visual .cnt .wrap .box {position:relative; width:285px; height:370px; cursor:pointer;}
.main_visual .cnt .wrap .box .inner {background:#fff; min-height:398px; padding:70px 40px 45px; border-radius:30px 30px 0 30px;}
.main_visual .cnt .wrap .box .inner h3 {font-size:22px; color:#333; margin-bottom:30px; line-height:1.625em;}
.main_visual .cnt .wrap .box .inner .list p {font-size:16px; color:#555; font-weight:300; line-height:1.625em; font-family:'Noto Sans KR'; margin-bottom:8px;}
.main_visual .cnt .wrap .box .inner .more {font-size:14px; color:#777; font-family:'Noto Sans KR'; position:absolute; bottom:40px;}
.main_visual .cnt .wrap .box .front .more:after {content:""; position:absolute; top:10px; left:76px; border:solid #777; border-width:0 1px 1px 0; display:inline-block; padding:4px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
.main_visual .cnt .wrap .box .back .more:after {content:""; position:absolute; top:10px; left:80px; border:solid #fff; border-width:0 1px 1px 0; display:inline-block; padding:4px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
.main_visual .cnt .wrap .back {position:absolute; top:0; left:0; z-index:-1;}
.main_visual .cnt .wrap .back .inner {background:linear-gradient(320deg,#cc0001, #ffba00);}
.main_visual .cnt .wrap .back .inner h3 {color:#fff;}
.main_visual .cnt .wrap .back .inner .list p {color:#fff;}
.main_visual .cnt .wrap .back .inner .more {color:#fff;}
.main_visual .front {-webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); transform:rotateY(0deg); -webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;transition:.5s ease-in-out; display:block;}
.main_visual .back {-moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg);transform:rotateY(180deg); -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out; transition:.5s ease-in-out;}
.main_visual .cnt-box:hover .front {-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);transform:rotateY(-180deg);}
.main_visual .cnt-box:hover .back {z-index:2; -moz-transform:rotateY(0);-webkit-transform:rotateY(0);transform:rotateY(0);}


	/* slick-dots */
.main_visual .slick-dots {position:absolute; top:280px; right:378px; display:flex; z-index:100px;}
.main_visual .slick-dots li {margin:0 10px; position:relative;}
.main_visual .slick-dots button {border:0; background:transparent; color:#fff; font-size:14px;}
.main_visual .slick-dots li:nth-child(1).slick-active,
.main_visual .slick-dots li:nth-child(2).slick-active {padding-right:70px;}
.main_visual .slick-dots li:last-child.slick-active {padding-left:70px;}
.main_visual .slick-dots li:nth-child(1).slick-active:after,
.main_visual .slick-dots li:nth-child(2).slick-active:after {content:""; width:50px; height:1px; background:#fff; position:absolute; top:16px; right:0;}
.main_visual .slick-dots li:last-child.slick-active:before {content:""; width:50px; height:1px; background:#fff; position:absolute; top:16px; left:0;}
	/* slick-arrow */
.main_visual .items .slick-arrow {position:absolute; top:289px; border:0; background-size:contain; width:8px; height:13px; font-size:0; border:0;}
.main_visual .items .slick-prev {right:541px; background:url("../images/bbs/datepicker_prev.png") no-repeat; z-index:10;}
.main_visual .items .slick-next {right:360px; background:url("../images/bbs/datepicker_next.png") no-repeat;}


/* sub page */
#sub #container {margin-bottom:0;}
.contain {max-width:1200px; margin:0 auto; position:relative;}
.real-cont {margin-bottom:100px;}

.sub-visual {height:330px; font-family:'InfinitySans'; position:relative; margin-bottom:20px;}
.sub-visual .tit {font-size:35px; font-weight:400; color:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10;}
.sub-visual .background {background-size:cover; position:absolute; width:100%; height:100%; top:0; left:0;}

.lnb {position:relative; overflow:hidden; font-family:'InfinitySans';}
.lnb ul {width:1200px; margin:0 auto; display:flex; justify-content:center;}
.lnb ul li {text-align:center; width:274px; line-height:60px; border:1px solid #ddd; color:#333; margin-right:20px; font-size:18px; font-weight:700;}
.lnb ul li:last-child{margin-right:0;}
.lnb ul li.active {color:#cc0001;}
.lnb ul li a {display:block;}

.lnb.type02 ul li:last-child {line-height:1.4em; padding:5px;}

.sub-title {font-family:'InfinitySans';}
.sub-title h2 {font-size:35px; font-weight:700; color:#333; text-align:center; margin:80px 0;}

.scroll-top {position:absolute; z-index:50; width:70px; height:70px; font-size:16px; font-weight:500; right:360px; bottom:65px; background:#545454; text-align:center; line-height:70px; color:#fff; border-radius:50%;}

/* footer */
#footer {position:relative; background:#333; line-height:1.6em; letter-spacing:-.03em;}
#footer address {font-style:normal;}

.foot-group {padding:32px 0; font-weight:500; line-height:1.8em;}
.foot-group .tit {font-size:15px; color:#e7e7e7;}
.foot-group address {font-size:14px; color:#b9b9b9;}
.foot-group address span {margin:0 5px;}