@charset "utf-8";

/* G마켓 폰트*/
@import url(gmarketsans.css);

/* 사이트 공통 스타일 */
*,*:after,*:before { box-sizing: border-box; }
html { text-shadow: 1px 1px 1px rgba(0,0,0,0.004); min-width: 320px; font-size: 62.5%; }
html, body { width:100%; height:100%; background: #fff; color: #222; }
body { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.2rem; 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; }
a { text-decoration:none; color: #222; }
::selection { background:#2ca6df; color:#FFF; text-shadow:none; }
::-moz-selection { background:#2ca6df; color:#FFF; text-shadow:none; }
::-webkit-selection { background:#2ca6df; color:#FFF; text-shadow:none; }

@media all and (max-width:1199px)
{
	html { font-size: 58.5%; }
}

/*폼 요소*/
input, textarea,option, button { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.3rem; letter-spacing: -0.5px; }
input[type=text],input[type=password],textarea,button { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; }
select { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.3rem; letter-spacing: -1px; width: 150px; height: 30px; padding-left: 5px; padding-right: 5px; }
input::-ms-input-placeholder { color: #ccc; }
input::-webkit-input-placeholder { color: #ccc; } 
input::-moz-placeholder { color: #ccc; }
textarea::-ms-input-placeholder { color: #ccc; }
textarea::-webkit-input-placeholder { color: #ccc; } 
textarea::-moz-placeholder { color: #ccc; }

/*숨김처리*/
.blind { position:absolute; font-size:0; line-height:0; height:0; }

/*테스트*/
.testBorder { border:1px solid red !important; }
.testBg { background-color:yellow !important; }

/*클리어픽스*/
.clearFix { display:block; clear:both; font-size:0; height:0; }
.clearfix:after{
	content:'';
	display: block;
	clear: both;
}

/* 셀렉트 커스텀 */
.selectbox { position: relative; border-style: none;  z-index: 1; display: inline-block; height: 48px; width: 170px; margin-left: 5px; vertical-align: top; transition: background .25s ease; }
.selectbox:hover { background: #f8f8f8; }
.selectbox:before { content: "";  position: absolute; top: 50%; margin-top: -10px; right: 8px; background: url(../../img/common/down_b_ico.svg) no-repeat; width: 20px; height: 20px; opacity: 0.5; }
.selectbox label { position: absolute; top: 0; left: 0; color: #222;  z-index: -1;  /* IE8에서 label이 위치한 곳이 클릭되지 않는 것 해결 */ font-size: 1.3rem; line-height: 48px; text-align: left; width: 90%; padding-left: 15px; cursor: pointer; }
.selectbox select { width: 100%; line-height: normal;  /* line-height 초기화 */ font-family: inherit; border: 0; opacity: 0;  /* 숨기기 */  filter:alpha(opacity=0);  /* IE8 숨기기 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */  -moz-appearance: none; appearance: none; margin-left: 0; height: 48px; cursor: pointer; }

/* 기본 */
#spobee_container { position: relative; }

/* 헤더 */
.header-container { height: 81px; width: 100%; position: fixed; z-index: 5; left: 0; top: 0; border-bottom: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.2); }
.header-container .header { height: 100%; position: relative; }
.header-container .header .gnb { width: 1100px; margin: 0 auto; height: 100%; }
.header-container .header .gnb ul.depth-01 { height: 100%; text-align: center; }
.header-container .header .gnb ul.depth-01>li { vertical-align: top; display: inline-block; width: 16%; text-align: center; position: relative; }
.header-container .header .gnb ul.depth-01>li>h2 { display: block; height: 100%; }
.header-container .header .gnb ul.depth-01>li>h2 a { font-size: 1.6rem; color: #fff; font-weight: 500; text-shadow: 0 0 3px rgba(0,0,0,0.1); line-height: 80px; display: block; position: relative; transition: color .25s ease; }
.header-container .header .gnb ul.depth-01>li:after { position: absolute; z-index: 4; content: ''; width: 0; height: 3px; left: 50%; top: 77px; background: #2ca6df; transition: left 0.25s ease, width 0.25s ease; }
.header-container .header .gnb ul.depth-01>li:hover>h2 a { color: #2ca6df; }
.header-container .header .gnb ul.depth-01>li:hover:after { width: 60%; left: 20%; }
.header-container .header .gnb ul.depth-01>li>ul.depth-02 { height: 0; overflow: hidden; padding: 0 0; position: absolute; width: 100%; left: 0; top: 80px; transition: height .25s ease,padding .25s ease; }
.header-container .header .gnb:hover ul.depth-01>li>ul.depth-02 { height: 220px; padding: 40px 0; }
.header-container .header .gnb ul.depth-01>li>ul.depth-02>li { margin-bottom: 20px; }
.header-container .header .gnb ul.depth-01>li>ul.depth-02>li:last-child { margin-bottom: 0; }
.header-container .header .gnb ul.depth-01>li>ul.depth-02>li a { font-size: 1.35rem; font-weight: 400; color: #4d4d4d; transition: color .25s ease; }
.header-container .header .gnb ul.depth-01>li>ul.depth-02>li a:hover { color: #1b90c7; }

.header-container .header .sub-gnb-bg { height: 0; width: 100%; background: rgba(255,255,255,0.9); overflow: hidden; transition: height .25s ease; }
.header-container .header .gnb:hover + .sub-gnb-bg { height: 220px; }

.header-container .header .logo { width: 130px; position: absolute; right: 50%; margin-right: 660px; top: 24px; }
.header-container .header .logo a { display: block; }
.header-container .header .logo a img { width: 100%; height: auto; }

.header-container .header .youtube-btn { width: 140px; position: absolute; height: 35px; text-align: center; top: 24px; left: 50%; margin-left: 660px; display: inline-block; border: 1px solid #fff; background: rgba(255,255,255,0.1); color: #fff; font-size: 1.4rem; line-height: 33px; transition: background .25s ease, border-color .25s ease; }
.header-container .header .youtube-btn .eng { letter-spacing: 0; }
.header-container .header .youtube-btn:hover { background: #c41313; border-color: #c41313; }

@media all and (max-width: 1650px)
{
	.header-container .header .logo { margin-right: 0; right: auto; left: 30px;  transition: margin-right .25s ease; }
	.header-container .header .gnb { width: 900px; transition: width .25s ease; }
	.header-container .header .youtube-btn { left: auto; right: 30px; margin-left: 0; }
}

@media all and (max-width: 1200px)
{
	.header-container .header .logo { width: 120px; }
	.header-container .header .gnb { display: none; }
	.header-container .header .youtube-btn { display: none; }
}

@media all and (max-width: 740px)
{
	.header-container { height: 60px; }
	.header-container .header .logo { width: 90px; top: 18px; }
}

/* 모바일 메뉴 */
.header-container .header #mobile_gnb_toggle { position: absolute; opacity: 0; filter: alpha(opacity=0); top: -999px; }
.header-container .header label.mobile-menu-btn { display: none; position: absolute; width: 25px; height: 25px; right: 30px; top: 29px; opacity: 1; z-index: 1; transform: translate3d(0, 0, 0); transition: transform .4s; }
.header-container .header label.mobile-menu-btn img { width: 100%; }
.header-container .header input[type=checkbox]:checked ~ .slide-gnb { transform: translate3d(0, 0, 0); }

.header-container .header .slide-gnb ul { margin-top: 80px; }
.header-container .header .slide-gnb ul li { line-height: 5rem; border-bottom:1px solid rgba(255,255,255,0.1);}
.header-container .header .slide-gnb ul .select { background: rgba(0,0,0,0.2); }
.header-container .header .slide-gnb ul .select ul.mobile-depth-02 { display: block; }
.header-container .header .slide-gnb ul li a { display: block; color: #E6F8FF; font-size: 1.5rem; font-weight: normal; padding-left: 3rem; }
.header-container .header .slide-gnb .close-btn { float: right; margin-right: 30px; margin-top: 23px; display: block; width: 25px; height: 25px; }
.header-container .header .slide-gnb .close-btn img { width: 100%; height: 100%; }
.header-container .header .slide-gnb { height: 100%; position: fixed; right: 0; top: 0; z-index: 999; background: #2e303c; width: 400px; box-sizing: border-box; transform: translate3d(1000px, 0, 0); transition: all .5s; display: none; }
.header-container .header .slide-gnb ul.mobile-depth-02 {margin:0; background:rgba(0,0,0,0.3); display: none;}
.header-container .header .slide-gnb ul.mobile-depth-02 li {line-height: 4.5rem; }
.header-container .header .slide-gnb ul.mobile-depth-02 li a {font-size:1.3rem;}
.ul-toggle {display: block !important;}
@media all and (max-width: 1200px)
{
	.header-container .header label.mobile-menu-btn { display: block; }
	.header-container .header .slide-gnb { display: block; }
}
/* 컨택트 */
.contact-info-container { background: #54659e; height: 140px; overflow: hidden; }
.contact-info-container>div { float: left; width: 33.3333%; text-align: center; padding: 30px 30px 30px 170px; height: 100%; }
.contact-info-container>div.tel-info { background: url(../../img/common/contact_img_01.png) no-repeat; background-size: 153px 154px; background-position: 70px center; background-color: #6b78a4; }
.contact-info-container>div.sns-info { background: url(../../img/common/contact_img_02.png) no-repeat; background-size: 162px 146px; background-position: 70px center; }
.contact-info-container>div.inq-info { background: url(../../img/common/contact_img_03.png) no-repeat; background-size: 160px 160px; background-position: 70px center; background-color: #455380; }
.contact-info-container>div .info-title { font-size: 1.7rem; color: #e7e7e7; margin-bottom: 8px; position: relative; display: inline-block; }
.contact-info-container>div .info-title:before { position: absolute; content: ''; width: 7px; height: 7px; border-radius: 50%; background: #e7e7e7; left: -25px; top: 50%; margin-top: -3.5px; }
.contact-info-container>div .info-title:after { position: absolute; content: ''; width: 7px; height: 7px; border-radius: 50%; background: #e7e7e7; right: -25px; top: 50%; margin-top: -3.5px; }
.contact-info-container>div p { font-size: 1.5rem; color: #e7e7e7; letter-spacing: 0; font-weight: 300; line-height: 23px; position: relative; }
.contact-info-container>div p.tel { margin-right: 20px; }
.contact-info-container>div p.tel,
.contact-info-container>div p.fax { display: inline-block; }
.contact-info-container>div p.tel,
.contact-info-container>div p.fax,
.contact-info-container>div p.email { font-size: 1.3rem; }
.contact-info-container>div p .head { font-weight: 600; margin-right: 10px; }
.contact-info-container>div p .col { color: #ffc000; font-weight: 500; }

@media all and (max-width: 1400px)
{
	.contact-info-container>div { padding-left: 30px; }
}
@media all and (max-width: 1100px)
{
	.contact-info-container>div.tel-info,
	.contact-info-container>div.sns-info,
	.contact-info-container>div.inq-info { background-position: center; }
}
@media all and (max-width: 740px)
{
	.contact-info-container { height: auto; }
	.contact-info-container>div { width: 100%; float: none; display: block; }
	.header-container .header label.mobile-menu-btn { width: 20px; top: 20px; }
	.header-container .header .slide-gnb { width: 300px; }
	.header-container .header .slide-gnb .close-btn { width: 20px; height: 20px; }
}
/* 푸터 */
.footer-container { background: #eeeff8; }
.footer-container .footer { width: 1100px; margin: 0 auto; padding: 55px 0; text-align: center; }
.footer-container .footer .top { border-bottom: 1px solid #cdd0d7; padding-bottom: 30px; }
.footer-container .footer .top .logo-area { margin-bottom: 40px; }
.footer-container .footer .top .logo-area img { width: 109px; }
.footer-container .footer .top .foot-menu ul li { display: inline-block; margin-right: 35px; position: relative; }
.footer-container .footer .top .foot-menu ul li a { font-size: 1.4rem; color: #929292; }
.footer-container .footer .top .foot-menu ul li.partner a,
.footer-container .footer .top .foot-menu ul li.ad a { font-weight: 600; }
.footer-container .footer .top .foot-menu ul li:after { position: absolute; content: ''; height: 10px; width: 1px; background: #aaa; top: 50%; margin-top: -5px; right: -17px; }
.footer-container .footer .top .foot-menu ul li:last-child:after { display: none; }
.footer-container .footer .top .foot-menu ul li:last-child { margin-right: 0; }
.footer-container .footer .bottom { padding-top: 30px; color: #929292; }
.footer-container .footer .bottom p { display: inline-block; letter-spacing: 0; margin: 0 20px 5px; position: relative; color: #929292; font-size:1.4rem;  }
.footer-container .footer .bottom p.info:after { position: absolute; content: ''; top: 50%; margin-top: -5px; width: 1px; height: 10px; background: #cecece; right: -20px; }
.footer-container .footer .bottom p.email:after,
.footer-container .footer .bottom p.address:after { display: none; }
.footer-container .footer .bottom .spobee { margin-bottom: 15px; display: block; font-size:1.4rem;}
.footer-container .footer .bottom .copyright { margin-top: 15px; display: block; color: #a7a7a7; }

@media all and (max-width: 1100px)
{
	.footer-container .footer { width: 100%; padding: 55px 30px; }
}

/* 가격정보 */
.price-info-wrap {margin-top:80px; margin-bottom:50px; text-align: center; font-size:1.8rem; border-top: 1px solid #dee3eb; padding-top: 50px; font-weight: 600;}
.price-info-wrap p a {display: block;padding:10px 30px; color:#fff; background:#2ea7e0; font-size:1.5rem; transition:background .3s ease; font-weight:400;margin: 20px auto;
	width: 140px;}
.price-info-wrap p a:hover {background:#098dcb}

@media(max-width:550px) {
	.price-info-wrap {margin-top:40px;}
}

table tr th span.th-important { display: inline-block; height: 4px; width: 4px; border-radius: 50%; margin: 0 0 8px 5px; background: #f05050;}



/************************************** 페이징 **************************************/


.paging { text-align: center; margin-top: 30px;}
.paging ul {display: inline-block;}
.paging ul li {display: inline-block; height: 30px; line-height: 30px; width:30px; text-align: center; margin:0 2px; }
.paging ul li:hover a { background: #eaeaea; }
.paging ul li.select a {background: #2ea7e0; color: #fff; }
.paging ul li a {display: block; width: 100%; height: 100%;color: #333; border-radius: 30px;}
.paging ul li:first-child a img {margin-left: -2px}
.paging ul li a img { width: 20px; height: 20px; margin-top: 5px; opacity: .7; }
.paging .rotate img {transform: rotate(180deg); margin-left: 1px}
.paging .rotate:last-child img {margin-left: 0}

@media all and (max-width: 580px) {
	.paging ul li {height: 25px; line-height: 23px; width: 25px; font-size: 1.2rem;}
	.paging ul li:first-child,
	.paging ul li:last-child {display: none;}
	.paging ul li a img {margin-top:3px;}
}

@media all and (max-width: 500px) {
	.paging ul {width: 100%;}
	.paging ul li {margin:0;}
	.paging ul li a {border: 0;}
}

@media all and (max-width: 375px) {
	.paging ul li { width: 21px; height: 21px; line-height: 20px; }
	.paging ul li a img { width: 15px; height: 15px; margin-top: 3px; }
}


/************************************** 인풋, 셀렉트박스, 첨부파일 **************************************/


/* 셀렉트박스 */
.select-box { width: 100%; height:40px; position: relative; display: inline-block; float: left;}
.select-box select {border:1px solid #c4c4c4; border-radius: 5px; width: 100%; height: 100%; padding: 0 40px 0 10px; font-size: 1.4rem; background: url(../../img/common/select_arrow.png); background-repeat: no-repeat; -webkit-background-size: 10px 6px; background-size: 10px 6px; color: #4C4C4C;background-color: #fff; background-position: calc(100% - 20px); cursor:pointer;}
.select-box select:disabled {cursor:no-drop}
.select-box select:hover {border-color: #9f9f9f;}
@media (max-width: 800px) {
	.select-box {width: 100%;}
}

/* 인풋 텍스트 */
input[type="text"].text-input { height:36px;  width: 100%; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid #c4c4c4; color: #686868; border-radius: 3px; background:#fff; transition: box-shadow .3s ease}

/* 인풋 텍스트 */
input[type="text"].text-input { height:36px;  width: 100%; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid #c4c4c4; color: #686868; border-radius: 3px; background:#fff; transition: box-shadow .3s ease}

/* 텍스트아레아 */
textarea {width: 100%; resize: none; padding:10px; font-size: 1.4rem; min-height: 200px;border:1px solid #c4c4c4; border-radius: 5px}
textarea:hover {border-color: #9f9f9f;}


/* 버튼 스타일 */
.btn-wrap {position: relative; text-align: center;}
.btn-wrap:after { content: ''; display: block; clear: both; }
.btn-wrap .btn-right {float:right;}
.btn-wrap .btn-left {float:left;}
.btn-wrap .btn-center {display: inline-block; float:none }
.btn-wrap button {margin-right: 5px; font-weight: 600; border:0; background:#aeaeae; color:#fff; height: 35px; padding: 0 40px; font-size: 1.3rem; cursor: pointer; float: left; border-radius: 50px; }
.btn-wrap button:last-child {margin-right:0;}
.btn-wrap button.small-btn {padding: 3px 15px; height: 25px; min-width: 90px; font-size: 1.2rem; font-weight: 500; border-radius: 20px; }

.btn-wrap.inline { display: inline-block; }
.btn-wrap.inline button { float: none; }
.btn-wrap.mg-t20 { margin-top: 20px; }

/* 버튼 색상 */
.btn-wrap button.theme-btn {background: #2ea7e0; color: white}
.btn-wrap button.theme-btn:hover {background: #098dcb}