@charset "utf-8";

/* 사이트 공통 스타일 */
*,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { text-shadow: 1px 1px 1px rgba(0,0,0,0.004); font-size: 62.5%; overflow-x: hidden;}
html, body { width:100%; height:100%; }
body { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.3rem; letter-spacing: -0.5px; background-color: #fff; text-rendering: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body>.wrapper { overflow-x: hidden; }
/* span,p,a,h1, h2, h3, h4, h5, h6 { -webkit-transform: skew(-0.03deg); -ms-transform: skew(-0.03deg); -o-transform: skew(-0.03deg); transform: skew(-0.03deg); } */
a { text-decoration:none; color: #222; }
::-moz-selection {background:#0475f4; color:#FFF; text-shadow:none;}
::selection {background:#0475f4; color:#FFF; text-shadow:none;}
::-moz-selection {background:#0475f4; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#0475f4; color:#FFF; text-shadow:none;}


/*클리어픽스*/
.clearfix:after { display:block; clear:both; content: ''; }

/* wrapper */
.wrapper {position: relative; width: 100%; height: 100%; }
.wrapper .cont-width { width: 1200px; margin: 0 auto; }

/* header */
.header-container { position: relative; width: 100%; }
.header-container::after { content: ''; display: block; clear: both; }
.header-container .nav-wrap { position: relative; height: 120px; }
.header-container .nav-wrap .logo-area { float: left; width: 155px; margin: 40px 0 30px;  text-align: center;}
.header-container .nav-wrap .logo-area img { width: 155px; height: auto; }
.header-container .nav-wrap ul.gnb-area { position: relative; width: -webkit-calc(50% - 78px); width: calc(50% - 78px); margin-top: 40px; }
.header-container .nav-wrap ul.gnb-area.left { float: left; text-align: center; }
.header-container .nav-wrap ul.gnb-area.right { float: right; text-align: center;}
.header-container .nav-wrap ul.gnb-area > li { float: left; width: 33.3%; position: relative; }
.header-container .nav-wrap ul.gnb-area > li > a { display: inline-block; position: relative; color: #1f1f1f; font-size: 1.7rem; padding: 27.5px 0; word-break: keep-all; font-weight: 500; }
.header-container .nav-wrap ul.gnb-area > li > a:after { content: ''; position: absolute; bottom: 30px; left: -10px; width: 0; height: 10px; border-radius: 10px; background: rgba(0,107,214,0.2); -webkit-transition: width .3s; -o-transition: width .3s; transition: width .3s; }
.header-container .nav-wrap ul.gnb-area > li:hover > a:after { width: -webkit-calc(100% + 20px); width: calc(100% + 20px); }
.header-container .nav-wrap .login-area { position: absolute; top: 20px; right: 0; }
.header-container .nav-wrap .login-area > a { display: inline-block; margin-left: 45px; font-size: 1.4rem; color: #666; font-weight: 600; }
.header-container .nav-wrap .login-area > a img { vertical-align: middle; margin-right: 10px; margin-top: -5px; height: 15px; }

.header-container .nav-wrap ul.gnb-area > li ul { overflow: hidden; position: absolute; top: -webkit-calc(100% + 1px); top: calc(100% + 1px); left: 0; z-index: 10; background: #fff; border-radius: 0 0 20px 20px; width: 100%; font-size: 1.5rem; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: -o-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s, -o-transform .3s; border: 1px solid #dee3eb; border-top: 0; }
.header-container .nav-wrap ul.gnb-area > li:hover ul { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); }
.header-container .nav-wrap ul.gnb-area > li ul li a { display: block; padding: 13px 10px; word-break: keep-all; color: #444; }
.header-container .nav-wrap ul.gnb-area > li ul li a:hover { font-weight: 600; }

/* header mobile style */
.header-container .nav-wrap .mo-hamburger { display: none; position: absolute; top: 28px; right: 20px; }
.header-container .nav-wrap .mo-hamburger span { width: 23px; height: 4px; background: #444; display: block; margin-bottom: 5px; border-radius: 10px; -webkit-transition: top .3s ease, -webkit-transform .3s ease; transition: top .3s ease, -webkit-transform .3s ease; -o-transition: top .3s ease, -o-transform .3s ease; transition: transform .3s ease, top .3s ease; transition: transform .3s ease, top .3s ease, -webkit-transform .3s ease, -o-transform .3s ease; }
.header-container .nav-wrap .mo-hamburger span.line02 { margin-left: 5px; width: 18px; }
.header-container .nav-wrap .mo-hamburger span.line03 { margin: 0; }
.header-container .nav-wrap .mo-hamburger.on span.line01 { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: relative; top: 9px; }
.header-container .nav-wrap .mo-hamburger.on span.line02 { display: none; }
.header-container .nav-wrap .mo-hamburger.on span.line03 { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.header-container .nav-wrap .mo-gnb-area { position: fixed; width: 100%; height: calc(100% - 76px); top: 76px; left: 100%; right: 0; bottom: 0; z-index: -1; background: transparent; -webkit-transition: background .5s, left .5s; -o-transition: background .5s, left .5s; transition: background .5s, left .5s; }
.header-container .nav-wrap .mo-gnb-area.show { background: rgba(0,0,0,.25); z-index: 5; left: 0; } 
.header-container .nav-wrap .mo-gnb-area.show .mo-gnb-wrap { right: 0; } 
.header-container .nav-wrap .mo-gnb-area.hide  { background: transparent; } 
.header-container .nav-wrap .mo-gnb-area.hide .mo-gnb-wrap { right: -102%; } 
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap { position: absolute; top: 0; right: -102%; width: 60%; background: #fff; height: 100%;border-top:1px solid #dee3eb; -webkit-transition: right .3s; -o-transition: right .3s; transition: right .3s;overflow-y: auto;}
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap > ul { padding: 10px 0;  }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap > ul > li { position: relative; padding: 15px 10px; margin: 0 20px; border-bottom: 1px solid #f1f1f1; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap > ul > li > i { position: absolute; top: 17px; right: 10px; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; -o-transition: -o-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s, -o-transform 0.3s; color: #c5c9cc;}
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap > ul > li.select > i { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); color: #333; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap > ul > li > a { display: inline-block; position: relative; font-size: 1.6rem; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap > ul > li.select > a:after { content: ''; position: absolute; bottom: 0; left: -10px; width: -webkit-calc(100% + 20px); width: calc(100% + 20px); height: 10px; border-radius: 10px; background: rgba(0,107,214,0.2); }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap > ul > li > ul { display: none; padding: 5px 0; margin-top: 15px; background: #eee; border-radius: 15px; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap > ul > li.select > ul { display: block; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap > ul > li > ul li a { display: block; border-bottom: 1px solid #dcdcdc; padding: 10px 20px; font-size: 1.5rem; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap > ul > li > ul li:last-child a { border-bottom: 0; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap .user { position: relative; width: 100%; padding: 25px 20px; border-bottom: 1px solid #dee3eb;}
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap .user h2 { font-size: 1.2rem; color: #333; font-weight: 500; margin-bottom: 10px; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap .user ul li { float: left; width: 50%; text-align: center; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap .user ul li a { display: block; width: 100%; padding: 10px; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap .user ul li.login a { background: #0461ea; color: #fff; border: 1px solid #0461ea; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap .user ul li.signup a { border: 1px solid #0461ea; color: #0461ea; }
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap .user ul li.mypage { float: none; clear: both; width: 100%;}
.header-container .nav-wrap .mo-gnb-area .mo-gnb-wrap .user ul li.mypage a { background: #0461ea; color: #fff; border: 1px solid #0461ea; }

/* body-container */
.body-container { width: 100%; position: relative; }


/* body-container */
.footer-container { width: 100%; position: relative; background: #333; color: #fff; }
.footer-container .footer-wrap { padding-top: 40px; padding-bottom: 40px;}
.footer-container .footer-wrap ul { margin-bottom: 10px; }
.footer-container .footer-wrap ul li { position: relative; display: inline-block; padding-right: 20px; }
.footer-container .footer-wrap ul li:after { content: ''; position: absolute; top: 5px; right: 9px; width: 1px; height: 10px; background: #8e8e8e; }
.footer-container .footer-wrap ul li:last-child:after { display: none; }
.footer-container .footer-wrap ul li a { color: #fff; }
.footer-container .footer-wrap p { font-weight: 100; color: #a0a0a0; }
.footer-container .footer-wrap p.info { margin-bottom: 10px; display: inline-block; }