@charset "utf-8";
/* 브라우저 업데이트 권장 팝업 */
#browserUpdate {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#111; z-index:9999}
#browserUpdate .inner {position:absolute; top:50%; left:50%; width:800px; margin:-275px 0 0 -400px; padding:100px 70px; text-align:center; background:#fff}
#browserUpdate .inner h2 {font-size:42px; margin-bottom:30px}
#browserUpdate .inner p {color:#777; line-height:1.8; margin-bottom:40px}
#browserUpdate .inner ul {text-align:justify}
#browserUpdate .inner ul:after {display:inline-block; width:100%; content:''}
#browserUpdate .inner ul li {display:inline-block; width:24%; padding:20px; border:1px solid #e8e8e8; vertical-align:top}
#browserUpdate .inner ul li:hover {background:#fafafa}
#browserUpdate .inner ul li .icon {width:48px; height:48px; margin:0 auto 25px auto}
#browserUpdate .inner ul li .icon img {display:block; width:100%}
#browserUpdate .inner ul li a {display:block; height:35px; font-family:'돋움','Dotum'; font-size:12px; color:#444; text-align:center; line-height:31px; border:1px solid #dedede; border-bottom:3px solid #dadada; background:#f9f9f9}
#browserUpdate .inner ul li a:hover {background:#fff}
#browserUpdate .inner ul li a:active {border-top:1px solid #dadada; border-bottom:1px solid #dedede; background:#f4f4f4}


/* 전체 ~ 컨테이너 */
body.scroll {position:fixed; width:100%; height:100%; overflow:hidden}
#wrap {}
/*
#header {position:fixed; top:0; left:0; width:100%; z-index:100}
#header .inner {position:relative; width:100%; max-width:1400px; height:50px; margin:0 auto; padding:35px 50px 0 50px}
#header h1 {position:absolute; left:50px; top:35px; z-index:100; transition:all 0.3s;font-size:0px;width:85px;}
#header h1 img {width:100%;display:block;}

#header.scroll h1 {top:-85px}
#header.scroll #callNav {top:20px; background:#21bbb1}
#callNav.sub {background:#21bbb1}
#callNav.sub > div {background:#fff}
#header.scroll #callNav > div {background:#fff}
#gnb {position:fixed; top:0; right:-100%; width:100%; height:100%; padding:200px 0 90px; background:#21bbb1; z-index:80}
#gnb .nav_wrap {position:relative; max-width:1380px; width:97%; height:95%; margin:0 auto; overflow:hidden}
#gnb ul.nav {width:105%; max-width:1400px; height:100%; margin:0 auto; padding:0 50px; overflow-x:hidden; overflow-y:auto}
#gnb ul.nav > li {position:relative; z-index:1}
#gnb ul.nav > li.on {z-index:10}
#gnb ul.nav > li.on > a, #gnb ul.nav > li.active a {color:#fff}
#gnb ul.nav > li > a {display:block; padding:15px 0; font-size:45px; font-weight:700; line-height:1}
#gnb ul.nav > li > a span.ko {display:none}
#gnb ul.nav > li.on span.en, #gnb ul.nav > li.active span.en {display:none}
#gnb ul.nav > li.on span.ko, #gnb ul.nav > li.active span.ko {display:block}
#gnb ul.nav > li > ul.sub {display:none; position:absolute; top:30px ; right:30%; width:400px}
#gnb ul.nav > li > ul.sub > li > a {display:block; padding:8px 0; font-size:24px; color:#555; line-height:1}
#gnb ul.nav > li > ul.sub > li > a:hover {color:#fff}
#gnb .infoArea {position:absolute; bottom:0; left:0; width:100%; padding:50px 0}
#gnb .infoArea .info_inner {max-width:1400px; margin:0 auto; padding:0 50px}
#gnb .infoArea .info_inner p {font-size:12px; line-height:1.3}
#gnb .infoArea .info_inner ul.sns {margin-bottom:10px}
#gnb .infoArea .info_inner ul.sns li {display:inline-block; padding:0 5px}
#callNav {position:absolute; right:50px; top:35px; width:48px; height:48px; border-radius:50%; background:#fff; cursor:pointer; z-index:100; transition:all 0.3s ease}
#callNav:hover {background:#21bbb1}
#callNav > div {position:absolute; width:16px; height:2px; left:35%; background:#333; transition:all 0.3s ease}
#callNav .bar1 {top:16px}
#callNav .bar2 {top:22px}
#callNav .bar3 {top:28px}
#callNav:hover > div {background:#fff}
#callNav:hover .bar1 {top:14px}
#callNav:hover .bar3 {top:30px}
#callNav.active {background:#fff}
#callNav.active > div {background:#21bbb1}
#callNav.active .bar1 {top:22px; transform:rotate(45deg)}
#callNav.active .bar2 {display:none}
#callNav.active .bar3 {top:22px; transform:rotate(-45deg)}
body.main #container {margin-top:0 !important}
#container {margin-top:100px;min-height:800px;}
#container.visual {margin-top:0 !important}
*/
#header {position:fixed; top:20px; left:0; width:100%; height:auto; transition:all .3s ease; z-index:150}
#header:before {position:fixed; top:-50px; left:0; width:100%; height:50px; content:''; background:#fff; transition:all .3s ease}
#header.scroll {top:0}
#header.scroll:before {top:0; box-shadow:0 1px 3px 0 rgba(0,0,0,0.12)}
#header.scroll #lnb > li > a {color:#333; padding-top:10px}
#header .inner {position:relative; max-width:1400px; height:60px; margin:0 auto; padding:0 50px}
#header.scroll #lnb > li > ul.depth2 {margin-top:-15px}
/*#header h1 {position:absolute; top:5px; left:50px;width:85px;transition:all .3s ease }*/
#header h1 {position:absolute; top:22px; left:50px;width:200px;transition:all .3s ease }
#header h1 img {width:100%;display:block;}
/*#header.scroll h1 {width:60px;transition:all .3s ease;top:8px;margin-bottom:0px;}*/
#header.scroll h1 {width:200px;transition:all .3s ease;top:15px;margin-bottom:0px;}
#lnb {float:right}
#lnb > li {position:relative; display:inline-block; margin:0 30px}
#lnb > li > a {display:block; /*height:60px;*/ padding:20px 0 0 0; font-size:15px; /*color:#333*/}
body.main #lnb > li > a, body.visual #lnb > li > a {color:#fff}
#lnb > li > a span {position:relative; border-bottom:2px solid transparent}
#lnb > li.on > a span {color:#21bbb1; border-color:#21bbb1}
#lnb > li > ul.depth2 {display:none; position:absolute; margin-top:-5px; padding:10px 0; left:0; min-width:160px; border-left:2px solid #21bbb1; /*background:#fff*/background-color: rgba(244,244,244,0.7)}
#lnb > li > ul.depth2 > li > a {display:block; padding:8px 20px; font-size:14px; font-weight:500; color:#000}
#lnb > li > ul.depth2 > li > a span {padding-bottom:3px; border-bottom:2px solid transparent;transition:all .4s ease}
#lnb > li > ul.depth2 > li.on > a span, #lnb > li > ul.depth2 > li > a:hover span {color:#21bbb1; border-color:#21bbb1;}
#lnb > li > ul.depth2 > li.on > a, #lnb > li > ul.depth2 > li > a:hover {color:#333; border-color:#21bbb1; background-color: rgba(221,221,221,0.7)}
#m_call {display:none; position:absolute; top:16px; left:30px; width:30px; height:30px; cursor:pointer; z-index:50}
#m_call.on span.top {top:4px; transform:rotate(225deg)}
#m_call.on span.bottom {top:4px; transform:rotate(-45deg)}
#m_call span {position:absolute; left:0; display:block; width:17px; height:1px; background:#000; transition:all .4s ease}
#m_call span.top {top:0}
#m_call span.top {top:7px}
body.main #m_call span, body.visual #m_call span {background:#fff}
body.main #container {margin-top:0 !important}
#container {margin-top:100px;min-height:800px;}
#container.visual {margin-top:0 !important}
ul.allocation {text-align:justify; overflow:hidden}
ul.allocation:after {display:inline-block !important; width:100%; height:0; content:''}
ul.allocation li {position:relative; float:none !important; display:inline-block}
ul.allocation li.clear {margin:0; padding:0; border:none; background:none}
ul.column2 li {width:48%}
ul.column3 li {width:32%}
ul.column4 li {width:23%}

/* 브라우저 업데이트 레이어 */
#browserUpdate {position:fixed; display:none; top:150px; left:0; width:100%; height:auto; text-align:center; color:#fff; padding:80px 0; background:#21bbb1; z-index:1000}
#browserUpdate h2 {font-size:30px; font-weight:400; line-height:1.2; margin-bottom:20px}
#browserUpdate h2:before {font-family:'FontAwesome'; content:'\f071'; margin-right:10px}
#browserUpdate p {font-size:14px; line-height:1.7; color:#fff; margin-bottom:50px}
#browserUpdate a {display:inline-block; margin:0 5px; padding:8px 0; width:200px; color:#fff; border:1px solid #fff}
#browserUpdate a.confirm {color:#21bbb1 !important; background:#fff}
/* 스크롤 버튼 */
#scrollTop {position:fixed; display:none; bottom:10px; left:0; width:100%; height:50px; margin:0 auto; z-index:50}
#scrollTop .inner {margin:0 auto; max-width:1400px; height:100%; padding:0 50px; text-align:right}
#scrollTop a {display:inline-block; width:45px; height:45px; text-align:center; color:#fff; line-height:45px; border-radius:50%; background:#21bbb1}
/* 푸터 */
#footer {clear:both; width:100%; background:#000;}
#footer .inner {position:relative; padding:55px 20px; text-align:center}
#footer .inner .copyright {display:inline-block; font-size:12px; color:#999; padding-left:40px}
#footer .inner ul.sns {display:inline-block; padding-left:30px}
#footer .inner ul.sns li {display:inline-block; padding:0 5px; color:#fff}
#footer .inner ul.sns li a {color:#fff}
#footer .inner address {color:#999;}
#blogo {margin:0px auto 15px auto;text-align:center;display:inline-block;}
#blogo img {display:block;}
/* 공통 색상 클래스 */
.black {color:#000 !important}
.safetainer-blue {color:#0000ff !important}
.safetainer-red {color:#ff0000 !important}
.safetainer-font {font-family: 'Days One', sans-serif;}
.po_color { color:#21bbb1 !important}

@media screen and (max-width:1024px) and (min-width: 100px) {
 /*
 #gnb {padding-top:150px}
 #gnb > .nav_wrap > ul.nav > li > a {font-size:48px; padding:15px 0}
*/
 #m_call {display:block !important}
 /*#header h1 {width:60px; top:8px; left:50%; margin-left:-30px}*/
 #header h1 {width:200px; top:8px; left:50%; margin-left:-100px}
 #header h1 img {}
 #header.scroll #m_call {top:20px}
 #header.scroll #m_call span {background:#000}
 #header .inner .lnb_wrap {display:none; position:fixed; top:50px; left:0; width:100%; height:100%; padding-top:30px; background:#fff; z-index:1000}
 #header .inner .lnb_wrap .scroll {position:relative; height:100%; padding-bottom:40px; overflow-y:auto}
 #lnb {float:none; width:90%; margin:0 auto}
 #lnb > li {display:block; width:100%; margin:0; border-bottom:1px solid #dedede}
 #lnb > li > a {font-size:21px; font-weight:500; color:#333; height:auto !important; padding:15px 0 !important}
 #lnb > li > a.dropdown span:before {position:absolute; top:50%; left:100%; width:12px; height:2px; margin:-1px 0 0 10px; content:''; background:#333; transition:all .3s ease}
 #lnb > li > a.dropdown span:after {position:absolute; top:50%; left:100%; width:2px; height:12px; margin:-6px 0 0 15px; content:''; background:#333; transition:all .3s ease}
 #lnb > li.open > a.dropdown span:after {transform:rotate(-90deg)}
 #lnb > li > ul.depth2 {position:static; border:none}
 #lnb > li > ul.depth2 > li > a {font-size:21px; color:#999; padding:5px 30px}
 #lnb > li > ul.depth2 > li.on > a span, #lnb > li > ul.depth2 > li> a:hover span {border-color:transparent !important}
}
@media screen and (max-width:768px) and (min-width:100px) {
 /*
 #header .inner {padding:35px 0 0 0}
 #header h1 {left:30px;width:80px;}
 #header h1 img {}
 #callNav {right:30px}
 #gnb {padding-top:100px}
 #gnb > .nav_wrap > ul.nav {padding:0 30px}
 #gnb > .nav_wrap > ul.nav > li > a {font-size:24px}
 #gnb > .nav_wrap > ul.nav > li > ul.sub {position:static}
 #gnb ul.nav > li > ul.sub > li > a {font-size:18px; padding:5 20px; color:#555}
 #gnb .infoArea .info_inner {padding:0 30px}
 */
}
@media screen and (max-width:640px) and (min-width: 100px) {
 /*
 #gnb .infoArea {padding:30px 0}
 */
 #header h1 {top:10px; }
 #lnb > li > a {font-size:15px}
 #lnb > li > ul.depth2 > li > a {font-size:15px !important; padding:5px 20px}

 #scrollTop .inner {padding:0 30px}
 #footer .inner {padding:30px; text-align:left}
 #footer .inner .copyright {padding:0 0px 0 0}
 #footer .inner ul.sns {position:absolute; bottom:30px; right:30px}
 #blogo {margin:0 0 15px 0}
 /*#blogo img {width:80px;}*/
}