/* Reset styles */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* Global Styles */
html {
    width: 100%;
    height: 100%;
}

body {
    font: 0.75em Verdana, Dotum, AppleGothic, sans-serif;
    color: #353535;
    background: #fff;
    min-width: 1400px;
    overflow-x: hidden;
    font-family: 'Pretendard', 'Montserrat', sans-serif;
    
    
    /* 드래그 방지 */
     -webkit-user-select: none; /* 크롬, 사파리, 오페라 */
  -moz-user-select: none; /* 파이어폭스 */
  -ms-user-select: none; /* IE 10/11 */
  user-select: none; /* 일반 */
    
    
}

.en {
    font-family: 'Montserrat';
  }



body#popup {
    min-width: 0;
}

li {
    list-style: none;
}

img, fieldset {
    border: none;
    vertical-align: top;
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

a {
    text-decoration: none;
    color: #000;
}

a:hover {
    
}

a:active {
    text-decoration: none;
}

/* Accessibility Skip Navigation */
#skipNavigation {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 0;
}

#skipNavigation p a {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin-left: -1px;
    margin-bottom: -1px;
    text-align: center;
    color: #000;
    white-space: nowrap;
}

#skipNavigation p a:focus, #skipNavigation p a:hover, #skipNavigation p a:active {
    width: 100%;
    height: auto;
    padding: 10px 0;
    background: #c4122f;
    color: #fff;
    z-index: 100;
}

/* Dim Overlay */
.dimmed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

/* Additional Styles */
.displaynone {
    display: none;
}




/* Media Query for Mobile */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Adjust font size for smaller screens */
        min-width: initial; /* Remove minimum width */
    }
}










@charset "euc-kr";

/* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */

/* tag reset */



li { list-style:none; }
img,fieldset { border:none; vertical-align:top; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
th,td { border:0; vertical-align:top; }
input,select,textarea { font-size:100%; font-family:"돋움", Dotum; color:#555; vertical-align:middle; }
.inputTypeText { height:19px; padding:3px 0 0 9px; border:1px solid #d5d5d5; }
select { height:24px; border:1px solid #d5d5d5; }
textarea { padding:5px 6px; border:1px solid #d5d5d5; line-height:1.5; }
legend { visibility:hidden; position:absolute; left:-9999px; top:-9999px; width:0; height:0; line-height:0; }
button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; }
hr.layout { display:none; }
a { text-decoration:none; color:#555; }
a:hover { }
a:active { text-decoration:none; }
.objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; }
table tr.radioType input,
span.noBorder input { border:none !important; width:auto !important; height:auto !important; margin:0 3px 0 0 !important; vertical-align:middle !important; background:none !important; }
#content_CONTAINER td { width:auto !important; }
table.nneditor-table { width:auto !important; }

/* 결제진행바 */
#progressPaybarBackground { position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; }
#progressPaybarView { position:absolute; z-index:100; top:160px; left:20px; width:471px; font-size:12px; }
#progressPaybarView .box { height:180px; background:url(http://img.cafe24.com/images/ec_hosting/popup/layer_guide/bg_layer_box1.gif) 0 0 no-repeat; }
#progressPaybarView .box .graph { padding:15px 0 0 0; text-align:center;}
#progressPaybarView .box .graph span { display:block; text-align:center; margin:20px 0; }
#progressPaybarView .box .txt { text-align:center; padding:15px 0 0; color:#555555; }
div.layerProgress { filter:alpha(opacity=40); opacity:0.4; -moz-opacity:0.4; background-color:#999; }

/* contents */
#skipNavigation {position:absolute; top:0; left:0; z-index:100; width:100%; height:0;}
#skipNavigation p, #skipNavigation ul, #skipNavigation ul li {height:0;}
#skipNavigation p a {position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px;  text-align:center; color:#000; white-space:nowrap;}
#skipNavigation p a:focus, #skipNavigation p a:hover, #skipNavigation p a:active {width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:100;}

.displaynone { display:none; }

/* **************************** 필수 CSS 수정 및 삭제 불가 **************************** */

.mbi-simpletalk-kakao > .bridges>a { width:50px; height: 50px; }

.mbi-simpletalk-kakao > .bridges {
border-width: 0px !important; 
}
@charset "utf-8"; 


/* Layout */
#header { position:fixed; width:100%; margin:0 auto; height:120px; border-bottom:1px solid; border-color:rgba(255,255,255,0.1); z-index:9; transition:.5s; } 

#header .inner { width:1200px; height:120px; margin:0 auto; z-index:5; padding:0px 0 0 0; text-align:center; 
 display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } 

#header .inner .logo { width:auto; margin-top:0px; } 

#header .inner .menu > li > a { color:#fff; } 

#header .inner .topcall { width:auto; text-align:left; flex-direction: column; margin-top:-15px; color:#fff; } 
#header .inner .topcall h2 { font-size:15px; font-weight:500; padding:0 0 3px 0; } 
#header .inner .topcall h3 { font-size:30px; font-weight:650; font-family: 'GmarketSansBold'; } 

/* 스크롤 내렸을때 CSS .active */
#header.active { 
 position:fixed; 
 width:100%; 
 background:rgba(255,255,255,0.95); 
 border-bottom:1px solid; 
 border-color:rgba(0,0,0,0.05); 
 transition:.5s; 
 } 

#header.active .logo-img { 
 content: url("//xn--hc0b248d.kr/upload/img/ci/logo2.png"); 
 } 

#header.active .inner .menu > li > a { color:#000; } 

#header.active .inner .topcall { } 
#header.active .inner .topcall h2 { color:#000; } 
#header.active .inner .topcall h3 { color:#0054a7; } 



#wrap { position:relative; width:100%; margin:0 auto; } 
#container { width:100%; margin:0 auto; *zoom:1; } 
#container:after { content:""; display:block; clear:both; } 

#contents { width:100%; min-height:750px; margin:0 auto; } 
#contents .page { width:1200px; margin:0 auto; } 

#contents .contents { width:1200px; } 



#board_list { position:relative; width:100%; margin:0 auto; height:65px; line-height:65px; background:rgba(0,83,196,0.7); box-sizing:border-box; margin-top:0px; z-index:5; margin-top:-65px; } 
#board_list ul { width: 1000px; height:65px; margin:0 auto; 
display:flex; 
justify-content: space-between; 
 } 
#board_list ul li { font-size:20px; font-weight:450; color:#fff; width:auto; } 


#board_list ul li:nth-child(1) { width:auto; } 
#board_list ul li:nth-child(1) i { display:inline-block; margin:0 5px 0 0; } 
#board_list ul li:nth-child(2) { width:700px; margin:7px 0 0 0; } 





#noti { position:relative; width:1200px; margin:0 auto; height:70px; line-height:70px; background:rgba(0, 52, 106, 0.8); padding:0 0 0 75px; box-sizing:border-box; margin-top:-70px; z-index:99; border-radius:30px 30px 0 0; } 
#noti .wrap { width:1200px; margin:0 auto; } 
#noti .wrap p { width:120px; float:left; font-size:20px; color:#ffffff; background:url("//xn--hc0b248d.kr/upload/img/icon/line.jpg") no-repeat 105px 27px; margin:0 20px 0 0; } 
#noti .wrap p.check { margin:25px 0 0 0; background:none; } 
#noti .wrap ul { position:relative; width:600px; height:70px; float:left; margin-left:320px; z-index:99999; } 
#noti .wrap ul li { width:295px; display:inline-block; font-size:20px; color:#ffffff; padding:0 0 0 45px; box-sizing:border-box; height:70px; float:left; border-left:1px solid; border-right:1px solid; border-color:rgba( 255, 255, 255, 0.2 ); } 
#noti .wrap ul li:last-child { border-right:0; } 
#noti .wrap ul li img { margin:25px 5px 0 60px; } 
#noti .wrap ul li a { color:#fff; display:block; } 




#work { position:relative; width:100%; height:auto; margin:0 auto; z-index:5; box-sizing:border-box; padding:65px 0; text-align:center; color:#000; } 
#work > h2 { font-size:20px; font-weight:550; color:#002b5b; letter-spacing:4px; } 
#work > h3 { font-size:38px; font-weight:450; padding:12px 0 40px 0; white-space : pre-line; line-height:1.4; } 
#work > h3 span { font-weight:650; } 

#work > ul { width:1200px; height:auto; margin:0 auto; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; overflow:hidden; box-sizing: border-box; } 

#work > ul > li { position:relative; width:32%; box-sizing:border-box; overflow:hidden; border-radius:15px; margin-bottom:40px;} 
#work > ul > li:nth-child(1),
#work > ul > li:nth-child(2) {width:48%;}


#work > ul > li .img { width:100%; height:auto; } 
#work > ul > li .img img { width:100%; } 

#work > ul > li .txt { position:absolute; width:100%; height:auto; text-align:left; bottom:30px; left:40px; color:#fff; text-shadow: 0px 0px 5px rgba(0,0,0,0.5); } 
#work > ul > li .txt > h3 { font-size:32px; font-weight:650; } 
#work > ul > li .txt > h2 { font-size:18px; font-weight:450; padding:5px 0 0 0; white-space : pre-line; line-height:1.4; } 

#work ul li:hover img { 
 transform: scale(1.05, 1.05); 
 transition: all ease 0.5s 0s; 
 } 
 #work ul li img { 
 transition: all ease 0.5s 0s; 
 } 
 


 .md { width:100%; height:auto; margin:0 auto; padding:100px 0; box-sizing:border-box; text-align:center; color:#000; background:#f5f9fa; overflow:hidden; } 
 .md > h2 { font-size:38px; font-weight:400; } 
 .md > h2 span { font-weight:650; } 
 .md > h3 { font-size:22px; font-weight:350; padding:10px 0 40px 0; } 
 
 .md > ul { max-width:1200px; height:100%; margin:0 auto; 
  display:flex; 
  flex-wrap: wrap; 
  align-items:center; 
  justify-content: space-between; } 
  
  .md > ul > li { width:32%; overflow:hidden; margin-left:auto; background:#ffffff; } 
  .md > ul > li .txt { position:relative; display:table; width:auto; text-align:center; margin:0 auto; margin-top:-10px; z-index:1; } 
  .md > ul > li .txt > h3 { font-size:24px; font-weight:550; padding:35px 0 0 0; color:#000; } 
  .md > ul > li .txt > h4 { font-size:18px; font-weight:350; padding:10px 0 30px 0; line-height:1.4; white-space:pre-line; color:#7c7c7c; } 
 
  .md > ul > li .img { width:100%; } 










.comp { position:relative; width:100%; height:auto; margin:0 auto; z-index:5; box-sizing:border-box; padding:0; z-index:2; margin-top:30px; } 
.comp > ul { width:1200px; margin:0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } 
.comp > ul > li { position:relative; width:49%; height:auto; box-sizing:border-box; padding:30px; border:1px solid #eee; } 
.comp > ul > li .img { width:100%; } 
.comp > ul > li .img img { width:100%; } 

.comp > ul > li .txt { width:auto; z-index:9; text-align:left; color:#000; padding:0 0 0 10px; } 
.comp > ul > li .txt > h3 { font-size:21px; font-weight:650; padding:20px 0 5px 0; } 
.comp > ul > li .txt > h4 { font-size:17px; font-weight:350; padding:0; white-space : pre-line; line-height:1.4; } 
.comp > ul > li .txt > h4 span { font-weight:550; } 
.comp > ul > li .txt > h5 { font-size:40px; font-weight:650; color:#43d2e8; padding:5px 0 5px 0; } 
.comp > ul > li .txt > h5 i { padding:0 5px 0 0; font-size:34px; } 
.comp > ul > li .txt a { color:#fff; } 





.person { width:100%; height:auto; margin:0 auto; padding:80px 0 0 0; box-sizing:border-box; text-align:center; color:#000; background:url("//xn--hc0b248d.kr/upload/img/banner/person_bg.png") no-repeat 50% 0; overflow:hidden; } 
.person > ul { max-width:70%; height:100%; margin:0 auto; 
display:flex; 
flex-wrap: wrap; 
align-items:center; 
justify-content: space-between; } 

.person > ul > li { width:auto; overflow:hidden; } 
.person > ul > li .txt { width:auto; text-align:left; margin:0 auto; } 
.person > ul > li .txt > h2 { font-size:46px; font-weight:450; padding:0 0 10px 0; white-space : pre-line; line-height:1.3; } 
.person > ul > li .txt > h2 span { font-weight:650; } 
.person > ul > li .txt > h2 span b { color:#1959b8; font-weight:650; } 
.person > ul > li .txt > h3 { font-size:24px; font-weight:400; line-height:1.4; padding:5px 0 30px 0; white-space:pre-line; } 
.person > ul > li .txt > h4 a { display:table; font-size:22px; font-weight:400; padding:8px 15px; border:1px solid #000; } 

.person > ul > li:nth-child(1) { width:auto; margin-top:0px; } 
.person > ul > li:nth-child(2) { } 

.person > ul > li .check { width:auto; text-align:left; margin:0 auto; } 
.person > ul > li .check ul li { display:block; font-size:34px; font-weight:450; color:#000; line-height:1.6; } 
.person > ul > li .check ul li span { background:url("//xn--hc0b248d.kr/upload/img/banner/check.png") no-repeat left; color:#1168e2; font-family: 'Montserrat', sans-serif; font-weight:650; padding-left:35px; margin-right:15px; } 




#count { width:100%; margin:0 auto; } 
#count > ul { width:90%; text-align:center; padding:0; 
 display:flex; 
flex-wrap: wrap; 
align-items: center; 
justify-content: space-between; 
 } 
#count > ul > li { width:31%; height:auto; background:#fff; border-radius:15px; padding:35px 0; border:4px solid #abe5ff; } 
#count > ul > li > h2 { font-size:22px; font-weight:350; color:#000; padding:20px 0 0 0; white-space : pre-line; } 
#count > ul > li > h2 span { font-weight:650; } 




.icon { width:100%; height:auto; margin:0 auto; padding:120px 0; box-sizing:border-box; text-align:center; color:#fff; background:url("//xn--hc0b248d.kr/upload/img/banner/icon_bg.jpg") no-repeat 50% 0; background-size:cover; overflow:hidden; } 
.icon .wrap { width:1100px; margin:0 auto; } 

.icon .wrap > h2 { font-size:42px; font-weight:550; } 
.icon .wrap > h2 span { color:#6ccdff; } 
.icon .wrap > h3 { font-size:24px; font-weight:350; padding:15px 0 30px 0; white-space : pre-line; line-height:1.4; } 

.icon ul { width: 100%; text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } 

.icon ul li { width: 48%; height:auto; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.50); display: flex; justify-content: center; align-items: center; padding:35px 0; margin:0 0 30px 0; } 

 .icon ul li .img { width:auto; margin:0 20px 0 0; } 
 .icon ul li .img img { width:auto; } 
 
 .icon ul li .txt { width:50%; height:auto; text-align:left; } 
 .icon ul li .txt > h2 { font-size:16px; font-weight:550; padding:0 0 12px 0; color:#6ccdff; } 
 .icon ul li .txt > h3 { font-size:26px; font-weight:650; padding:0 0 10px 0; } 
 .icon ul li .txt > h4 { font-size:20px; font-weight:300; white-space : pre-line; line-height:1.4; } 






#brand { position:relative; width:1200px; height:auto; margin:0 auto; text-align:center; z-index:5; padding:120px 0 60px 0; color:#000; } 
#brand > h2 { font-size:36px; font-weight:550; color:#002b5b; letter-spacing:0px; } 
#brand > h3 { font-size:20px; font-weight:350; padding:12px 0 40px 0; white-space : pre-line; line-height:1.4; } 
#brand > h3 span { font-weight:650; } 
#brand ul { width:1200px; margin:0 auto; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } 
#brand ul li { display:flex; align-items: center; justify-content: center; width:23%; height:140px; margin-bottom:30px;; margin-left:0; background:#fff; box-sizing:border-box; overflow:hidden; border:1px solid #eee; } 
#brand ul li img { width:auto; } 


#gallery { position:relative; width:1200px; height:auto; margin:0 auto; padding:140px 0 100px 0; overflow:hidden; text-align:center; color:#000; } 
#gallery > h2 { font-size:36px; font-weight:550; color:#002b5b; letter-spacing:0px; } 
#gallery > h3 { font-size:20px; font-weight:350; padding:12px 0 40px 0; white-space : pre-line; line-height:1.4; } 
#gallery > h3 span { font-weight:650; } 



#online { position:relative; width:100%; height:auto; margin:0 auto; color:#fff; padding:40px 0; box-sizing:border-box; background:#000; z-index:1; margin-top:0px; } 
#online::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url("//xn--hc0b248d.kr/upload/img/banner/online_bg.png") no-repeat 50% 0%; background-size:cover; filter:blur(0px); opacity:1.0; z-index: -1; } 

#online > h2 { font-size:30px; font-weight:300; padding:0 0 30px 0; color:#fff; white-space : pre-line; text-align:center; line-height:1.4; } 
#online > h2 span { font-weight:650; } 

#online ul { width:1200px; margin:0 auto; display:flex; 
flex-wrap: wrap; 
justify-content: space-between; 
align-items: center;
 } 

#online ul li { width:48%; height:auto; box-sizing:border-box; background:rgba(0,0,0,0.00); border-radius:10px; padding:20px 25px;} 

#online ul li.cs h2 { font-size:26px; font-weight:500; padding:0 0 10px 0; } 
#online ul li.cs h3 { font-size:25px; font-weight:550; padding:0 0 10px 0; white-space : pre-line; line-height:1.4;} 
#online ul li.cs h4 { padding:0 0 20px 0; font-size:28px; font-weight:450;  } 
#online ul li.cs h4 span {font-size:44px; font-weight:650; margin-left:5px; color:#fff;}
#online ul li.cs h4 a { color:#fff; }
#online ul li.cs h5 { font-size:24px; font-weight:500; padding:0 0 10px 0; } 
#online ul li.cs h5 a { color:#fff; } 
#online ul li.cs h5 span { display:inline-block; width:82px; font-size:20px; border:1px solid #fff; padding:3px 0; margin-right:6px; border-radius:10px; text-align:center; } 

#online ul li.cs p { float:left; padding:20px 10px 0 0; } 

#online ul li.qna {background:#fff;}
#online ul li.qna h2 { font-size:27px; font-weight:550; padding:0 0 5px 0; color:#000;} 
#online ul li.qna p {width:100%; height:420px; margin:0 auto;}






#footer { position:relative;  width:100%; height:265px; background:#191919; letter-spacing:-0.5px; } 
#footer .inner { position:relative; width:1200px; margin:0 auto; overflow:hidden; display:flex; justify-content: space-between;} 
#footer .inner .logo { position:absolute; top:70px; opacity:1.00; } 

#footer .inner .sns01 { width:auto; margin:50px 0 0 0; letter-spacing:0; color:#fff; } 
#footer .inner .sns01 .img { width:auto; text-align:left; padding:5px 0 15px 0; } 
#footer .inner .sns01 .img img { margin:0 auto; } 
#footer .inner .sns01 h1 { font-size:18px; font-weight:650; margin:0 0 10px 0; } 
#footer .inner .sns01 h2 { font-size:18px; font-weight:550; padding:5px 0 0 0; } 
#footer .inner .sns01 h3 { font-size:15px; font-weight:350; margin:5px 0 0 0; } 

#footer .inner .sns02 { width:auto; letter-spacing:0; color:#fff; margin:60px 0 0 0;} 
#footer .inner .sns02 h1 { font-size:16px; font-weight:650; margin:0 0 5px 0; } 
#footer .inner .sns02 h2 { font-size:28px; font-weight:600; font-family: 'Montserrat', sans-serif; padding:0 0 10px 0; } 
#footer .inner .sns02 h3 { font-size:14px; font-weight:400; margin:0 0 15px 0; color:#eee; } 
#footer .inner .sns02 h3 span { border:1px solid #eee; padding:2px 10px; border-radius:20px; } 


#footer .inner .area {display:table; width:auto; padding:70px 0 15px 0; margin:0 0 0 190px; font-size:17px; font-weight:200; } 
#footer .inner .area a { color:#b6b6b6; } 
#footer .inner .area a:hover { opacity:0.80; } 
#footer .inner .area span { padding:0 15px 0 15px; background:url("//xn--hc0b248d.kr/upload/img/icon/until.jpg") no-repeat 0 6px; background-size:1px; } 
#footer .inner .area span.log { padding:0 15px 0 0; background:none; color:#b6b6b6; } 

#footer .inner .address {width:auto; margin:15px 0 0 0px; padding:15px 0 0 0; line-height:30px; text-align:left; font-size:16px; font-weight:300; border-top:1px solid #313131;} 
#footer .inner .address span { padding:0 12px 0 12px; color:#b6b6b6; background:url("//xn--hc0b248d.kr/upload/img/icon/until.jpg") no-repeat 0 6px; background-size:0.8px; } 

#footer .inner .address span a { color:#fff; } 
#footer .inner .address span.log { padding:0 12px 0 0; background:none; } 
#footer .inner .address span.log.tt { display:inline-block; margin-top:20px; } 
#footer .inner .address span.copy { padding:0 12px 0 0; background:none; line-height:54px; } 

#footer .admin a { position:absolute; background:#232323; padding:3px 5px; font-size:11px; color:#fff; top:200px; left:620px; } 

#footer .top { position:absolute; color:#fff; top:17px; right:0px; } 



/* 탐색경로바 */
.path { overflow:hidden; height:30px; line-height:30px; *zoom:1; } 
.path span { overflow:hidden; position:absolute; width:0; height:0; white-space:nowrap; text-indent:100%; } 
.path ol { float:right; } 
.path li { float:left; padding:0 0 0 12px; margin:0 0 0 8px; color:#757575; background:url("http://img.echosting.cafe24.com/skin/base/layout/ico_path.gif") no-repeat 0 10px; } 
.path li:first-child { background:none; } 
.path li a { color:#757575; } 
.path li strong,
.path li strong a { color:#2e2e2e; } 

/* 타이틀 */
.titleArea { min-height:30px; margin:10px 0 20px; border-bottom:1px solid #e8e8e8; } 
.titleArea h2 { display:inline-block; padding:0 0 0 12px; color:#2e2e2e; font-size:16px; *display:inline; *zoom:1; background:url("http://img.echosting.cafe24.com/skin/base/layout/ico_heading.gif") 0 50% no-repeat; } 
.titleArea p { display:inline-block; margin:0 0 0 6px; padding:0 0 0 10px; color:#939393; background:url("http://img.echosting.cafe24.com/skin/base/layout/ico_bar.gif") no-repeat 0 0; *display:inline; *zoom:1; } 
.titleArea ul { padding:5px 0; color:#939393; line-height:18px; } 
.titleArea ul li { padding:0 0 0 9px; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_square2.gif") no-repeat 4px 7px; } 

/* 게시판 메인 */
.boardMain { overflow:hidden; *zoom:1; } 
.boardMain td img { vertical-align:middle; margin:1px; } 
.boardMain .board { margin:0 0 65px; } 
.boardMain .leftArea { float:left; width:50%; } 
.boardMain .leftArea .board { margin:0 23px 65px 0; } 
.boardMain .rightArea { float:right; width:50%; } 
.boardMain .rightArea .board { margin:0 0 65px 23px; } 

/* 퀵뷰 모달 */
#modalBackpanel { display:none; position:absolute; top:0; left:0; z-index:10000; width:100%; height:100%; background:#000; } 
#modalContainer { display:none; position:absolute; top:100px; left:100px; z-index:10001; width:975px; height:720px; border:1px solid #333; background:#fff; } 
#modalContainer #modalContent { width:100%; height:100%; } 
/* Font */
.txtInfo { color:#707070; }
.txtWarn { color:#f76560; }
.txtEm { color:#008bcc; }
.txtDel, .strike, .discount { text-decoration:line-through; font-weight:normal; }
.strike strong, .discount strong { font-weight:normal; }
.txtNormal { font-weight:normal; font-style:normal; }
.txtNum { display:inline-block; font-size:11px; color:#939393; word-break:normal; }
.txt11 { font-size:11px; }
.txt12 { font-size:12px; }
.txt14 { font-size:14px; }
.txt16 { font-size:16px; }
.txt18 { font-size:18px; letter-spacing:-1px; }
.txtIcon { font-size:12px; font-style:normal; }
.txtBreak { word-break:break-all; word-wrap:break-word; }
  /* JP, TW, CN */
  html:lang(ja) .txt11,
  html:lang(zh) .txt11,
  html:lang(zh-tw) .txt11 { font-size:12px; }

/* grid */
.gBlank5 { display:block; margin-top:5px; }
.gBlank10 { display:block; margin-top:10px; }
.gBlank20 { display:block; margin-top:20px; }
.gBlank30 { display:block; margin-top:30px; }
.gIndent10 { margin-left:10px; }
.gIndent20 { margin-left:20px; }
.gSpace10 { margin-right:10px; }
.gSpace20 { margin-right:20px; }
.gMerge { position:relative; z-index:1; margin-top:-1px; }

/* ec-base-qty */
.ec-base-qty { position:relative; display:inline-block; width:50px; margin:0 1px 0 0; text-align:left; }
.ec-base-qty input[type="text"] { width:22px; height:23px; padding:0 0 0 5px; line-height:25px; border:1px solid #d4d8d9; border-radius:3px 0 0 3px; }
.ec-base-qty .up { position:absolute; left:27px; top:0; }
.ec-base-qty .down { position:absolute; left:27px; bottom:0; }
.ec-base-qty .qtyUp {position:absolute; left:27px; top:0;}
.ec-base-qty .qtyDown { position:absolute; left:27px; bottom:0;}
.ec-base-qty .qtyUp .up { position:static; left:auto; top:auto; }
.ec-base-qty .qtyDown .down { position:static; left:auto; top:auto; }

/* ec-base-chk */
.ec-base-chk { display:inline-block; position:relative; margin:0 8px 0 0; width:22px; height:22px; vertical-align:top; cursor:pointer; }
.ec-base-chk input { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.ec-base-chk .checkbox { position:absolute; top:0; left:0; width:100%; height:100%; background:url("//img.echosting.cafe24.com/skin/base/common/bg_join_check.png") no-repeat 0 0; }
.ec-base-chk input:checked + .checkbox { background-position:-34px 0; }

/* Form */
input,select,textarea { font-size:100%; font-family:"돋움", Dotum; color:#353535; vertical-align:middle; }
input[type=radio],
input[type=checkbox] { width:13px; height:13px; border:0; }
input[type=text],
input[type=password] { height:18px; line-height:20px; padding:2px 4px; border:1px solid #d5d5d5; color:#353535; font-size:12px; }
input[type=radio] + label, input[type=checkbox] + label { margin:0 4px 0 2px; }
select { height:24px; border:1px solid #d5d5d5; }
textarea { padding:5px 6px; border:1px solid #d5d5d5; line-height:1.5; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#c1c1c1; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#c1c1c1; }
input::-moz-placeholder, textarea::-moz-placeholder { color:#c1c1c1; opacity:1; }
legend { visibility:hidden; position:absolute; left:-9999px; top:-9999px; width:0; height:0; line-height:0; }

table tr.radioType input,
span.noBorder input { border:none !important; width:auto !important; height:auto !important; margin:0 3px 0 0 !important; vertical-align:middle !important; background:none !important; }

.gLabel { display:inline-block; }
.gLabel label { margin-right:20px; line-height:22px; }
.fWidthFull input[type=text] { width:100%; height:24px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.fWidthFull textarea { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.fWidthFull select { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.fList.typeHor .gLabel { margin-right:20px; }
.fList.typeVer .gLabel { display:block; }

/* ec-base-radio */
.ec-base-radio.typeDelivery .ec-base-label{display:block;}

.ec-base-tooltip { display:none; z-index:2; position:absolute; top:24px; padding:15px; border:1px solid #565960; background:#fff;
    -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
}
.ec-base-tooltip h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; background:url("//img.echosting.cafe24.com/skin/base/common/ico_layer_title.gif") no-repeat 0 50%; }
.ec-base-tooltip h3 + p { margin:0 5px 10px; }
.ec-base-tooltip h4 { margin:15px 10px 8px 5px; font-size:12px; }
.ec-base-tooltip h4:before { display:inline-block; content:""; margin:0 5px 0 0; width:3px; height:3px; background:#666; vertical-align:middle; }
.ec-base-tooltip .btnClose { position:absolute; right:14px; top:14px; }
.ec-base-tooltip .edge { z-index:20; position:absolute; left:50%; top:-6px; display:block; margin:0 0 0 -5px; width:10px; height:6px; }
.ec-base-tooltip .edge:before,
.ec-base-tooltip .edge:after { display:inline-block; content:""; position:absolute; top:0; width:0; height:0; border:solid transparent; }
.ec-base-tooltip .edge:before { margin:1px 0 0; border-bottom-color:#565960; border-width:0 5px 5px 5px; }
.ec-base-tooltip .edge:after { left:1px; margin:2px 0 0; border-bottom-color:#fff; border-width:0 4px 4px 4px; }
.ec-base-tooltip table th,
.ec-base-tooltip table td { padding:8px 10px 7px 10px; border:1px solid #e8e8e8; line-height:1.5em; }
.ec-base-tooltip table th { padding-right:0; background:#fbf9fa; }
.ec-base-tooltip table thead th { text-align:center; }
.ec-base-tooltip table tbody th { text-align:left; }
.ec-base-tooltip table .left { text-align:left; }
.ec-base-tooltip table .center { text-align:center; }
.ec-base-tooltip table .right { text-align:right; }
.ec-base-tooltip table .info { padding:0; color:#757575; }
.ec-base-tooltip table p.info:before,
.ec-base-tooltip table ul.info li:before { display:inline-block; content:""; margin:0 3px 0 0; width:4px; height:1px; background:#757575; vertical-align:middle; }
.ec-base-tooltip .info { padding:10px 10px 0; margin:5px 0 0; }
.ec-base-tooltip p.bullet,
.ec-base-tooltip ul.bullet { margin:8px 10px; }
.ec-base-tooltip p.bullet:before,
.ec-base-tooltip ul.bullet li:before { display:inline-block; content:""; margin:-3px 3px 0 0; width:0; height:0; border:solid transparent; border-left-color:#333; border-width:2px 0 2px 2px; vertical-align:middle; }
.ec-base-tooltip ul.bullet li { line-height:1.5em; }
.ec-base-tooltip .txtEm { color:#008bcc; }
.ec-base-tooltip .txtWarn { color:#f65b54; }

/* typeUpper */
.ec-base-tooltip.typeUpper { top:auto; bottom:34px; }
.ec-base-tooltip.typeUpper .edge { top:auto; bottom:-6px; }
.ec-base-tooltip.typeUpper .edge:before { margin:0 0 -5px; border-top-color:#565960; border-width:5px 5px 0 5px; }
.ec-base-tooltip.typeUpper .edge:after { left:1px; margin:0 0 -4px; border-top-color:#fff; border-width:4px 4px 0 4px; }
span.ec-base-help,
p.ec-base-help,
ul.ec-base-help li { margin:2px 9px; padding:1px 0 1px 20px; line-height:1.4; text-align:left; background:url('//img.echosting.cafe24.com/skin/base/common/ico_info.gif') no-repeat 0 2px; }

div.ec-base-help { margin:20px 0; border:1px solid #d6d4d4; line-height:18px; }
div.ec-base-help > h2,
div.ec-base-help > h3 { padding:9px 0 6px 10px; border-bottom:1px solid #e8e7e7; color:#101010; font-size:12px; background:#fbfbfb; }
div.ec-base-help .inner { padding:0 9px 12px; }
div.ec-base-help h4 { margin:22px 0 -4px; color:#404040; font-size:12px; font-weight:normal; }
div.ec-base-help h4:first-child { margin-top:13px; }
div.ec-base-help p { margin:15px 0 0 10px; color:#707070; }
div.ec-base-help ul,
div.ec-base-help ol { margin:15px 0 0 11px; }
div.ec-base-help li { color:#707070; }

/* number */
div.ec-base-help ol li { padding:0 0 0 25px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_number.png') no-repeat; }
div.ec-base-help ol .item1 { background-position:-484px 0; }
div.ec-base-help ol .item2 { background-position:-434px -100px; }
div.ec-base-help ol .item3 { background-position:-384px -200px; }
div.ec-base-help ol .item4 { background-position:-334px -300px; }
div.ec-base-help ol .item5 { background-position:-284px -400px; }
div.ec-base-help ol .item6 { background-position:-234px -500px; }
div.ec-base-help ol .item7 { background-position:-184px -600px; }
div.ec-base-help ol .item8 { background-position:-134px -700px; }
div.ec-base-help ol .item9 { background-position:-84px -800px; }
div.ec-base-help ol .item10 { background-position:-34px -900px; }

/* typeDash */
div.ec-base-help ul li { padding:0 0 0 11px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_dash.gif') no-repeat 0 7px; }
.ec-base-help.typeDash li { padding:0 0 0 11px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_dash.gif") no-repeat 0 7px; }
.ec-base-tooltip .ec-base-help.typeDash li { margin:2px 0; }
/* 공통 */
.ec-base-product { margin:22px 0 0; }
.ec-base-product .title { margin:0 0 17px; }
.ec-base-product .title h2 { font-weight:normal; font-size:20px; color:#2e2e2e; text-align:center; }
.ec-base-product .title h3 { font-weight:normal; font-size:20px; color:#2e2e2e; text-align:center; }
.ec-base-product img { vertical-align:middle; }

.ec-base-product .prdList { display:table; width:100%; min-width:756px; margin:-20px 0 0; font-size:0; line-height:0; }
.ec-base-product .prdList > li { display:inline-block; margin:20px 0; color:#757575; vertical-align:top; }

.ec-base-product .prdList .chk { display:block; margin:0 0 10px; text-align:center; }
.ec-base-product .prdList .thumbnail { position:relative; margin:0 7px 10px; text-align:center; }
.ec-base-product .prdList .thumbnail a img { max-width:100%; border:1px solid #ececec; box-sizing:border-box; }
.ec-base-product .prdList .thumbnail .wish { position:absolute; right:3px; bottom:4px; z-index:1; cursor:pointer; }
.ec-base-product .prdList .thumbnail .prdIcon { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; }

.ec-base-product .prdList .description { margin:0 auto; padding:0 7px; font-size:12px; line-height:18px; text-align:center; }
.ec-base-product .prdList .description .name { display:block; text-align:left; }
.ec-base-product .prdList .description .name a { color:#2e2e2e; }
.ec-base-product .prdList .description .icon { margin:0 0 15px; border-bottom:1px solid #e8e8e8; vertical-align:middle; }
.ec-base-product .prdList .description .icon:after { content:""; display:block; clear:both; }
.ec-base-product .prdList .description .promotion { float:left; margin:0 0 4px; text-align:left; }
.ec-base-product .prdList .description .button { float:right; margin:0 0 4px; }
.ec-base-product .prdList .description .button img { cursor:pointer; }
.ec-base-product .prdList .description .button .option { display:inline; position:relative; }
.ec-base-product .prdList .description .mileage { display:block; }
.ec-base-product .prdList .description span.grid { display:block; }

.ec-base-product .prdList .description .button .likeButton { display:inline-block; margin:0 5px; }
.ec-base-product .prdList .description .button .likeButton button { font-family:verdana; color:#9a9a9a; letter-spacing:-1px; background:none; }
.ec-base-product .prdList .description .button .likeButton button img { margin-bottom:0; vertical-align:middle; }
.ec-base-product .prdList .description .button .likeButton button strong {height:16px; vertical-align:middle; }
.ec-base-product .prdList .description .button .likeButton.selected button { color:#353535; }

/* 진열방식 */
.ec-base-product ul.grid3 > li { width:33.33%; }
.ec-base-product ul.grid4 > li { width:25%; }
.ec-base-product ul.grid5 > li { width:20%; }
.ec-base-product ul.grid3 > li .color { max-width:230px; }
.ec-base-product ul.grid4 > li .color { max-width:190px; }
.ec-base-product ul.grid5 > li .color { max-width:130px; }

/* module="product_ListItem" */
.ec-base-product .spec { margin:0; }
.ec-base-product .spec li { text-align:left; }
.ec-base-product .spec li .title { font-weight:normal; vertical-align:top; }
.ec-base-product .spec li .title span { vertical-align:top; }
.ec-base-product .spec li .color { overflow:hidden; display:inline-block; margin:3px 0 0 0; }
.ec-base-product .spec li .chips { float:left; width:10px; height:10px; margin:0 2px 2px 0; border:1px solid #e3e3e3; font-size:0; line-height:0; }

/* 할인기간 레이어 */
.ec-base-product .discountPeriod { display:inline-block; z-index:10; position:relative; width:55px; height:19px; vertical-align:middle; }
.ec-base-product .layerDiscountPeriod { left:50%; top:26px; width:247px; margin:0 0 0 -124px; }
.ec-base-product .layerDiscountPeriod strong.title { display:block; margin:0 0 12px; padding:0 35px 0 0; font-weight:bold; color:#2e2e2e; }
.ec-base-product .layerDiscountPeriod .content p { margin:2px 0 0; font-size:11px; color:#000; line-height:16px; color:#757575; letter-spacing:-1px; }
.ec-base-product .layerDiscountPeriod .content p strong { font-weight:normal; font-size:12px; color:#2e2e2e; }
.ec-base-product .layerDiscountPeriod .content p strong span { font-size:11px; }

/* 썸네일 아이콘 위치 */
.ec-product-bgLT { background-position:left top; }
.ec-product-bgLC { background-position:left center; }
.ec-product-bgLB { background-position:left bottom; }
.ec-product-bgRT { background-position:right top; }
.ec-product-bgRC { background-position:right center; }
.ec-product-bgRB { background-position:right bottom; }
.ec-product-bgCT { background-position:center top; }
.ec-product-bgCC { background-position:center center; }
.ec-product-bgCB { background-position:center bottom; }

.ec-base-paginate { margin:30px 0; text-align:center; font-size:0; line-height:0; }
.ec-base-paginate ol { display:inline-block; font-size:0; line-height:0; vertical-align:top; *display:inline; *zoom:1; *margin:0; }
.ec-base-paginate li { display:inline-block; margin:0 0 0 -1px; border:1px solid #d7d5d5; font-size:12px; color:#757575; vertical-align:top; *display:inline; *zoom:1; }
.ec-base-paginate li:first-child { margin-left:0; }
.ec-base-paginate img { vertical-align:top; }
.ec-base-paginate li a { display:block; width:33px; padding:9px 0; font-weight:bold; color:#939393; line-height:14px; background:#fff; }
.ec-base-paginate li a:hover { text-decoration:none; background:#f0f2f2; }
.ec-base-paginate li a.this { padding-bottom:6px; border-bottom:3px solid #495164; color:#495164; }
.ec-base-paginate a.nolink { cursor:default; }

/* typeSub */
.ec-base-paginate.typeSub ol { margin:0 15px; vertical-align:middle; }
.ec-base-paginate.typeSub li { font-size:12px; border:0; }
.ec-base-paginate.typeSub img { vertical-align:middle; }
.ec-base-paginate.typeSub li a { width:auto; margin:0 5px 0; padding:2px; color:#353535; background:none; }
.ec-base-paginate.typeSub li a.this { color:#008bcc; text-decoration:underline; border:0; }
.ec-base-paginate.typeSub .first { margin-right:3px; }
.ec-base-paginate.typeSub .last { margin-left:3px; }

.ec-base-tab { position:relative; }
.ec-base-tab .menu {
    margin:0 0 20px; border:1px solid #cbcdce; border-bottom-color:#202020; border-left:0; background:#f2f2f2;
    box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
}
.ec-base-tab .menu:after { content:""; display:block; clear:both; }
.ec-base-tab .menu li { float:left; border-left:1px solid #cbcdce; background:#f2f2f2; }
.ec-base-tab .menu li a { display:block; min-width:187px; margin:0 0 0 -1px; padding:12px 5px 11px; border-right:1px solid #cbcdce; color:#707070; text-decoration:none; outline:0; text-align:center; background:#f2f2f2; }
.ec-base-tab .menu li:first-child a { margin-left:0; }
.ec-base-tab .menu li.selected a { position:relative; top:-1px; left:-2px; margin:0 0 -1px; border:1px solid #202020; border-bottom:0; color:#fff; font-weight:bold; background:#4a5164; }
.ec-base-tab .menu li.selected:first-child a { left:-1px; }
.ec-base-tab > .right { position:absolute; top:8px; right:10px; line-height:24px; color:#909090; }
  /* typeLight */
  .ec-base-tab.typeLight .menu li.selected a { margin:0 0 -2px; border-bottom:1px solid #fff; color:#404040; background:#fff; }
  /* grid (2~7) */
  .ec-base-tab[class*="grid"] .menu { display:table; table-layout:fixed; width:100%; }
  .ec-base-tab[class*="grid"] .menu li { float:none; display:table-cell; vertical-align:middle; }
  .ec-base-tab[class*="grid"] .menu li a { display:inline-block; width:100%; min-width:0; margin:0; padding:11px 0; border:0; }
  .ec-base-tab[class*="grid"] .menu li.selected { position:relative; top:0; right:-1px; border:1px solid #292929; border-bottom:0; background:#4a5164; }
  .ec-base-tab[class*="grid"] .menu li:first-child.selected { right:0; }
  .ec-base-tab[class*="grid"] .menu li.selected a { position:static; background:none; }
    .ec-base-tab.grid2 .menu li { width:50.5%; }
    .ec-base-tab.grid3 .menu li { width:34%; }
    .ec-base-tab.grid4 .menu li { width:25.5%; }
    .ec-base-tab.grid5 .menu li { width:20.5%; }
    .ec-base-tab.grid6 .menu li { width:17%; }
    .ec-base-tab.grid7 .menu li { width:14.8%; width:15% \0/; }
    .ec-base-tab.grid7 .menu li:first-child { width:13% \0/; }
  /* gFlex */
  .ec-base-tab.gFlex .menu { display:flex; border-right:0; }
  .ec-base-tab.gFlex .menu:after { display:none; }
  .ec-base-tab.gFlex .menu li { display:flex; align-items: center; float:none; flex:1; position:relative; }  
  .ec-base-tab.gFlex .menu li:last-child { border-right:1px solid #cbcdce; }  
  .ec-base-tab.gFlex .menu li a { width:100%; min-width:0; border-right:0; background:none; word-break:break-all; }
  .ec-base-tab.gFlex .menu li a:after { content:''; width:100%; height:100%; position:absolute; top:0; left:0; }
  .ec-base-tab.gFlex .menu li.selected { border:1px solid #292929; border-bottom:0; background:#4a5164; }
  .ec-base-tab.gFlex .menu li.selected a { left:0; margin:0 0 -1px -1px; background:#4a5164; border:0; position: initial;}
/* button */
  [class^='btnNormal'], a[class^='btnNormal'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid #d1d1d1; border-radius:2px; font-family:"굴림",Gulim; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#222; background-color:#fff; }
  [class^='btnSubmit'], a[class^='btnSubmit'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid transparent; border-radius:2px; font-family:"굴림",Gulim; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#fff; background-color:#4a5164; }
  [class^='btnEm'], a[class^='btnEm'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid transparent; border-radius:2px; font-family:"굴림",Gulim; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#fff; background-color:#84868b; }
  [class^='btnBasic'], a[class^='btnBasic'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid #d1d1d1; border-radius:2px; font-family:"굴림",Gulim; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#222; background-color:#f0f0f0; }
    [class^='btnNormal']:not(.disabled):hover { background-color:#f3f3f3; }
    [class^='btnSubmit']:not(.disabled):hover { background-color:#43495a; }
    [class^='btnEm']:not(.disabled):hover { background-color:#77797d; }
    [class^='btnBasic']:not(.disabled):hover { background-color:#e5e5e5; }
    [class^='btnNormal'].disabled { border-color:#e3e3e3; color:#999; }
    [class^='btnSubmit'].disabled { background-color:#9297a2; color:#f0f0f0; }
    [class^='btnEm'].disabled { background-color:#b5b6b9; color:#f0f0f0; }
    [class^='btnBasic'].disabled { color:#999; }
  /* size */
    [class^='btn'].sizeS { padding:6px 8px; }
    [class^='btn'].sizeM { padding:10px 16px; }
    [class^='btn'].sizeL { padding:14px 16px; min-width:80px; font-weight:bold; }
  /* width Fix */
    [class^='btn'][class*='Fix'] { width:72px; word-break:keep-all; word-wrap:break-word; }
    [class^='btn'][class*='Fix'].sizeS { width:96px; }
    [class^='btn'][class*='Fix'].sizeM { width:120px; padding-left:8px; padding-right:8px; }
    [class^='btn'][class*='Fix'].sizeL { width:160px; padding-left:8px; padding-right:8px; }
 
/* icon button */
  a.btnLink { color:#222; }
  a.btnLink:hover { text-decoration:none; -webkit-box-shadow:0 1px 0 0 #222; -moz-box-shadow:0 1px 0 0 #222; box-shadow:0 1px 0 0 #222; }
  a.btnLink:after { content:""; display:inline-block; margin:-2px -2px 0 3px; vertical-align:middle; border:0 0 0 10px; border-style:solid;  border-color:transparent transparent transparent #77797d; }
  [class^='btn'] i { display:none \0/IE8; }
  [class^='btn'] .icoArrow { display:inline-block; width:3px; height:3px; margin:-2px 1px 0 1px; border:2px solid #77797d; border-width:0 2px 2px 0; vertical-align:middle;
    transform:rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg);
  }
    [class^='btnSubmit'] .icoArrow,
    [class^='btnEm'] .icoArrow { border-color:#f0f0f0; }
  [class^='btn'] .icoDelete { position:relative; overflow:hidden; display:inline-block; width:10px; height:10px; margin:-2px 2px 0 0; vertical-align:middle; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
  [class^='btn'] .icoDelete:before { content:""; position:absolute; top:0; right:4px; width:2px; height:10px; background:#77797d; }
  [class^='btn'] .icoDelete:after { content:""; position:absolute; top:4px; right:0; width:10px; height:2px; background:#77797d; }
    [class^='btnSubmit'] .icoDelete:before, [class^='btnSubmit'] .icoDelete:after,
    [class^='btnEm'] .icoDelete:before, [class^='btnEm'] .icoDelete:after { background:#f0f0f0; }
  [class^='btn'] .icoAdd, [class^='btn'] .icoRemove { position:relative; overflow:hidden; display:inline-block; width:8px; height:8px; margin:-2px 2px 0 0; vertical-align:middle; }
  [class^='btn'] .icoAdd:before, [class^='btn'] .icoAdd:after, [class^='btn'] .icoRemove:before { content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:2px; background:#77797d; }
  [class^='btn'] .icoAdd:before, [class^='btn'] .icoRemove:before { height:2px; margin:-1px 0 0 -4px; }
  [class^='btn'] .icoAdd:after { width:2px; margin:-4px 0 0 -1px; }
  [class^='btn'] img { margin:-2px 1px 0; vertical-align:middle; }
  [class^='btn'].addWidth { padding:2px 20px; }


                                                   /* unique */
    .btnLogin, a.btnLogin { display:inline-block; box-sizing:border-box; width:100px; height:70px; line-height:70px; border-radius:2px; text-align:center; font-family:"굴림",Gulim; font-size:12px; font-weight:bold; text-decoration:none; color:#fff; background-color:#4a5164; }
    .btnLogin:hover { background-color:#43495a; }
    .btnAgree, a.btnAgree { display:inline-block; box-sizing:border-box; width:80px; height:70px; line-height:70px; border:1px solid #d1d1d1; border-radius:2px; text-align:center; font-family:"굴림",Gulim; font-size:12px; font-weight:bold; color:#222; text-decoration:none; background-color:#fff; }
    .btnAgree:hover { background-color:#f3f3f3; }
    .btnToggle { display:inline-block; font-size:0; line-height:0; }
    .btnToggle button { display:inline-block; box-sizing:border-box; border:1px solid #d1d1d1; margin:0 -1px 0 0; padding:0 7px; height:24px; line-height:24px; text-align:center; font-family:"굴림",Gulim; font-size:12px; outline:0; text-decoration:none; color:#222; background:#fff; }
    .btnToggle button:first-child { border-radius:2px 0 0 2px; }
    .btnToggle button:last-child { border-radius:0 2px 2px 0; }
    .btnToggle button.selected { position:relative; border:1px solid #84868b; color:#fff; background:#84868b; }
 
/* ec-base-button */
.ec-base-button { padding:10px 0; text-align:center; }
.ec-base-button.justify { position:relative; }
.ec-base-button:after { display:block; content:""; clear:both; }
.ec-base-button .gLeft { float:left; text-align:left; }
.ec-base-button .gRight { float:right; text-align:right; }
.ec-base-button.justify .gLeft { position:absolute; left:0; }
.ec-base-button.justify .gRight { position:absolute; right:0; }
.ec-base-button .text { margin:0 6px 0 10px; color:#353535; line-height:24px; }
  /* type */
    .ec-base-button.typeBorder { margin-top:-1px; padding:10px 20px; border:1px solid #d7d5d5; }
    .ec-base-button.typeBG { padding:10px 20px; border:1px solid #d7d5d5; background:#fbfafa; }
  /* gColumn */
    .ec-base-button[class*="gColumn"] { margin:0 auto; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; justify-content:center; }
    .ec-base-button[class*="gColumn"]:after { display:none; }
    .ec-base-button[class*="gColumn"] [class^='btn'] { margin:0 2px; padding-left:8px; padding-right:8px; word-break:keep-all; word-wrap:break-word; white-space:normal; -webkit-flex:1; -moz-flex:1; -ms-flex:1; flex:1; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; align-items:center; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; justify-content:center; }
    .ec-base-button[class*="gColumn"] [class^='btn'][class*='Fix'] { -webkit-flex:none; -moz-flex:none; -ms-flex:none; flex:none; }
    /* gFlex */
      .ec-base-button[class*="gColumn"] .gFlex2 { -webkit-flex:2; -moz-flex:2; -ms-flex:2; flex:2; }
      .ec-base-button[class*="gColumn"] .gFlex3 { -webkit-flex:3; -moz-flex:3; -ms-flex:3; flex:3; }
      .ec-base-button[class*="gColumn"] .gFlex4 { -webkit-flex:4; -moz-flex:4; -ms-flex:4; flex:4; }
/* base */
.ec-base-box { padding:20px; margin-left:auto; margin-right:auto; border:5px solid #e8e8e8; color:#404040; }
.ec-base-box.gHalf { position:relative; padding:20px 0; }
.ec-base-box.gHalf:before { position:absolute; top:0; left:50%; display:block; content:""; width:1px; height:100%; background-color:#e6e6e6; }
.ec-base-box.typeBg { background-color:#fbfafa; }
.ec-base-box.typeThin { border-width:1px; border-color:#d7d5d5; }
.ec-base-box.typeThin h3.boxTitle { margin:0 0 20px; font-size:20px; text-align:center; }
.ec-base-box.typeThinBg { border-width:1px; border-color:#d7d5d5; background-color:#fbfafa; }
.ec-base-box.center { text-align:center; }
    /* 약관 */
    .ec-base-box.typeThinBg > .agree { padding:20px; border:1px solid #e6e6e6; background:#fff; }
    .ec-base-box.typeThinBg > .agree p { padding:0 0 17px; }

/* typeMember */
.ec-base-box.typeMember { padding:0; }
.ec-base-box.typeMember .information { display:table; table-layout:fixed; padding:10px 0; width:100%; box-sizing:border-box; }
.ec-base-box.typeMember .information > .title, .ec-base-box.typeMember .information > .thumbnail { display:table-cell; padding:0 15px; width:70px; text-align:center; vertical-align:middle; }
.ec-base-box.typeMember .information > .title { vertical-align:middle; }
.ec-base-box.typeMember .information > .thumbnail img { max-width:70px; }
.ec-base-box.typeMember .information .description { display:table-cell; padding:0 10px; width:auto; line-height:1.5em; border-left:1px solid #e8e8e8; vertical-align:middle; }
    .ec-base-box.typeMember.gMessage { border-width:1px; border-color:#d7d5d5; }
.ec-base-box .message { display:block; padding:10px 0 10px 35px; border-bottom:1px solid #e8e7e7; background:#fbfbfb url("//img.echosting.cafe24.com/skin/base/common/ico_info.gif") no-repeat 10px center; }

/* typeProduct */
.ec-base-box.typeProduct { display:table; table-layout:fixed; padding:15px 0; width:100%; box-sizing:border-box; }
.ec-base-box.typeProduct .thumbnail, .ec-base-box.typeProduct .information { display:table-cell; padding:0 20px; vertical-align:middle; }
.ec-base-box.typeProduct .thumbnail { width:100px; }
.ec-base-box.typeProduct .thumbnail img { max-width:90px; border:1px solid #d7d5d5; }
.ec-base-box.typeProduct .information { padding-left:0; }
.ec-base-table table { position:relative; margin:10px 0 0; border:1px solid #d7d5d5; border-top:0; color:#fff; line-height:1.5; }
  .ec-base-table.gLayoutFixed table { table-layout:fixed; }
  .ec-base-table.gLayoutFixed .gLayoutAuto table { table-layout:auto; }
.ec-base-table table:before { position:absolute; top:0; left:0; display:block; content:""; width:100%; height:1px; background:#d7d5d5; }
.ec-base-table thead th { padding:11px 0 10px; border-left:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; color:#353535; vertical-align:middle; font-weight:normal; background:#fbfafa; }
.ec-base-table tbody th { padding:11px 0 10px 18px; border:1px solid #dfdfdf; border-bottom-width:0; color:#353535; text-align:left; font-weight:normal; background-color:#fbfafa; }
.ec-base-table th { word-break:break-all; word-wrap:break-word; }
.ec-base-table th:first-child { border-left:0; }
.ec-base-table td { padding:11px 10px 10px; border-top:1px solid #dfdfdf; color:#353535; vertical-align:middle; word-break:break-all; word-wrap:break-word; }
.ec-base-table td.clear { padding:0 !important; border:0 !important; }
.ec-base-table tr.payDetail td { padding:21px 10px 20px 0; background:#fbfafa; }

/* horizontal */
  /* typeWrite */
    .ec-base-table.typeWrite td { padding:8px 10px 7px; }
    .ec-base-table.typeWrite img { max-width:100% !important; height:auto !important; }

/* vertical */
  /* typeList */
    .ec-base-table.typeList table { border-top:1px solid #d7d5d5; }
    .ec-base-table.typeList table:before { display:none; }
    .ec-base-table.typeList td { padding:8px 10px 7px; }
    .ec-base-table.typeList tfoot td { padding:15px 10px 17px; background:#fbfafa; }
    .ec-base-table .message { border:1px solid #d7d5d5; padding:50px 0; text-align:center; color:#757575; font-weight:bold; }
    .ec-base-table table + .message { margin:-1px 0 0; }
    .ec-base-table table td.message { padding:50px 0; }
    .ec-base-table .scroll .message { border:0; }
  /* scroll */
    .ec-base-table.typeList .head td { padding:11px 0 10px; border-left:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; color:#353535; vertical-align:middle; text-align:center; background:#fbfafa; }
    .ec-base-table.typeList .head td:first-child { border-left:0; }
    .ec-base-table.typeList .scroll { position:relative; overflow-x:hidden; overflow-y:scroll; max-height:185px; min-height:100px; border:1px solid #d7d5d5; border-top-width:0; margin-top:-1px; }
    .ec-base-table.typeList .scroll table { border:0; margin:0; }
    .ec-base-table.typeList .scroll table:before { display:none; }
    .ec-base-table.typeList .scroll .message { border: 0; }
  /* thead - blind */
    .ec-base-table thead.blind,
    .ec-base-table thead.blind th { display:none; }
    .ec-base-table thead.blind + tbody tr:first-child th,
    .ec-base-table thead.blind + tbody tr:first-child td { border-top-width:0; }
  /* Line */
    .ec-base-table.typeList.gLine table { border-width:0; border-bottom-width:1px; }

/* common */
  /* border, background style none */
    .ec-base-table.typeClear table:before { display:none; }
    .ec-base-table.typeClear table,
    .ec-base-table.typeClear th,
    .ec-base-table.typeClear td { border:0 none; background:none; }
    .ec-base-table.typeClear th { font-weight:bold; }
  /* border */
    .ec-base-table.gBorder td { border-left:1px solid #dfdfdf; }
    .ec-base-table.gBorder td:first-child { border-left:0; }
    .ec-base-table.gBorder td.gClearLine { border-left:0; }
    .ec-base-table.typeList.gBorder tbody td { border-color:#eee; }
  /* align */
    .ec-base-table .left { text-align:left; }
    .ec-base-table .center { text-align:center; }
    .ec-base-table .right { text-align:right; }
    .ec-base-table.typeList .center td,
    .ec-base-table.typeList td.center { padding-left:0; padding-right:0; }
    .ec-base-table.typeList .center td.left { padding-left:10px; }
    .ec-base-table.typeList .center td.right { padding-right:10px; }
    .ec-base-table .top th, .ec-base-table th.top,
    .ec-base-table .top td, .ec-base-table td.top { vertical-align:top; }
    .ec-base-table .middle th, .ec-base-table th.middle,
    .ec-base-table .middle td, .ec-base-table td.middle { vertical-align:middle; }
  /* form */
    .ec-base-table img { vertical-align:middle; }
  /* address */
    .ec-base-table .ec-address { margin:-9px -10px -7px; }
    .ec-base-table .ec-address > li { padding:8px 10px 7px; border-top:1px solid #dfdfdf; }
    .ec-base-table .ec-address > li input[type="text"] { width:373px; }
    .ec-base-table .ec-address > li select { width:383px; }
    .ec-base-table .ec-address .ec-base-help { margin-left:0; }
    .ec-base-table .ec-address .ec-address-area select { display:block; }
    .ec-base-table .ec-address .ec-address-area select:not(:first-child) { margin-top:6px; }
    .ec-base-table .ec-address .ec-address-zipcode input[type="text"] { width:80px; margin-right:3px; }
    .ec-base-table .ec-address .ec-address-zipcode .btnBasic { margin-right:4px; }

@media print {
  .ec-base-table table:before { display:none; }
}
.ec-base-desc { overflow:hidden; text-align:left; }
.ec-base-desc:after { content:""; display:block; clear:both; }
.ec-base-desc dt, .ec-base-desc .term { float:left; width:100px; margin:0 0 2px; padding:0 4px 0 0; line-height:22px;-webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; font-weight:normal; }
.ec-base-desc dd, .ec-base-desc .desc { display:block; margin:0 0 2px; padding:0 5px 0 100px; min-height:22px; line-height:22px; word-wrap:break-word; word-break:break-all; }
.ec-base-desc dd:after, .ec-base-desc .desc:after { content:""; display:block; clear:left; }

/* size */
.ec-base-desc.gSmall dt, .ec-base-desc.gSmall .term { width:30%; }
.ec-base-desc.gSmall dd, .ec-base-desc.gSmall .desc { padding-left:30%; }
.ec-base-desc.gMedium dt, .ec-base-desc.gMedium .term { width:40%; }
.ec-base-desc.gMedium dd, .ec-base-desc.gMedium .desc { padding-left:40%; }
.ec-base-desc.gLarge dt, .ec-base-desc.gLarge .term { width:50%; }
.ec-base-desc.gLarge dd, .ec-base-desc.gLarge .desc { padding:0 0 0 50%; }

/* align */
.ec-base-desc.centerDT dt, .ec-base-desc.centerDD dd, .ec-base-desc.centerDT .term, .ec-base-desc.centerDD .desc,
.ec-base-desc.center, .ec-base-desc .center { text-align:center; }
.ec-base-desc.rightDT dt, .ec-base-desc.rightDD dd, .ec-base-desc.rightDT .term, .ec-base-desc.rightDD .desc,
.ec-base-desc.right, .ec-base-desc .right { text-align:right; }
.ec-base-desc.rightDD dd, .ec-base-desc.rightDD .desc { padding-right:0; }

/* typeBullet */
.ec-base-desc.typeBullet dt,
.ec-base-desc.typeBullet .term { padding:0 4px 0 10px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow.png") no-repeat 0 7px; }

/* typeDot */
.ec-base-desc.typeDot dt,
.ec-base-desc.typeDot .term { position:relative; padding:0 4px 0 10px; }
.ec-base-desc.typeDot dt:before,
.ec-base-desc.typeDot .term:before { position:absolute; top:50%; left:0; content:""; display:block; width:2px; height:2px; margin:-2px 0 0 0; background:#383838; }

.listbt {border:1px solid #d9d9d9; padding:10px 25px; font-size:16px; color:#000; font-weight:normal;}
.enterbt {border:0px solid #d9d9d9; padding:10px 25px; font-size:16px; color:#fff; font-weight:normal; background:#1c1c1c;}
.cancelbt {border:0px solid #d9d9d9; padding:10px 25px; font-size:16px; color:#fff; font-weight:normal; background:#8e8e8e;}
.wrtbt { display:inline-block; padding:10px 30px; font-size:16px; font-weight:500; background:#999; color:#fff;}


/* 버튼사이즈별 */
span.ju_btn_s1 span { display:inline-block; line-height:40px; padding:0 30px; font-size:16px; font-weight:500; letter-spacing:-1px; }
span.ju_btn_s2 span { display:inline-block; line-height:40px; padding:0 30px; font-size:16px; font-weight:500; letter-spacing:-1px; }
span.ju_btn_s3 span { display:inline-block; line-height:40px; padding:0 30px; font-size:16px; font-weight:500;}
span.ju_btn_s4 span { display:inline-block; line-height:40px; padding:0 30px; font-size:16px; font-weight:500;}
span.ju_btn_s5 span { display:inline-block; line-height:40px; padding:0 30px; font-size:16px; font-weight:500; letter-spacing:-1px; }


span.ju_btn_c1 span { color:#fff !important; background:#000; border:0px solid #434b50; }
span.ju_btn_c2 span { color:#fff !important; background:#999; border:1px solid #999; }
span.ju_btn_c3 span { color:#2e2e2e !important; background:#fff; border:1px solid #aaa; }
span.ju_btn_c4 span { color:#2e2e2e !important; background:#ededed; border:1px solid #b3b3b3; }

.search_btn { display:inline-block; line-height:22px; padding:0 15px; font-size:12px; color:#2e2e2e; background:#fff; border:1px solid #aaa; }






/* 상세페이지 구매버튼 */
a.dj_btn_buy { line-height:60px; width:34%; margin:0 7px 0 0; background:#333; color:#fff; font-weight:bold; font-size:16px; text-align:center; } 
a.dj_btn_cart { line-height:60px; width:30%;  margin:0 7px 0 0; border:1px solid #bbb; color:#111; font-size:16px; text-align:center; } 
a.dj_btn_wish {  line-height:60px; width:32%; margin:0 0 0 -1px; border:1px solid #bbb; color:#111; font-size:16px; text-align:center; } 
a.dj_btn_sold { line-height:60px; width:50%; margin:0 7px 0 0; background:#676767; color:#fff; font-weight:bold; font-size:16px; text-align:center; pointer-events : none;} 


/* 상세페이지 게시판 버튼 */
a.dj_write_btn { line-height:42px; padding:0 22px; display:inline-block; background:#333; color:#fff; font-weight:bold; font-size:16px; text-align:center; } 
a.dj_write_btn_w { line-height:42px; padding:0 22px; display:inline-block; background:#fff; border:1px solid #aaa; color:#222; font-weight:bold; font-size:16px; text-align:center; } 

/* 장바구니 버튼 */
a.dj_cart_btn { line-height:24px; width:87px; display:inline-block; margin:1px 0 1px 0; background:#333; color:#fff; font-size:18px; text-align:center; } 
a.dj_cart_btn_w { line-height:22px;  width:85px; display:inline-block; margin:1px 0 1px 0; background:#fff; border:1px solid #aaa; color:#222; font-size:18px; text-align:center; } 
a.dj_cart_btn_w2 { line-height:26px; padding:0 20px; display:inline-block; margin:1px 0 1px 0; background:#fff; border:1px solid #bbb; color:#222; font-size:14px; text-align:center; } 

/* 장바구니 구매버튼 */
a.dj_cart_buy { line-height:50px; width:159px; display:inline-block; background:#333; color:#fff; font-weight:500; font-size:18px; text-align:center; } 
a.dj_cart_buy_s { line-height:50px; width:159px; display:inline-block; background:#aaa; color:#fff; font-weight:500; font-size:18px; text-align:center; } 
a.dj_cart_etc { line-height:48px; width:157px;display:inline-block; border:1px solid #bbb; color:#111; font-size:18px; text-align:center; } 


/* 게시판 버튼 */
a.bddj_cart_buy { line-height:46px; width:159px; display:inline-block; background:#333; color:#fff; font-weight:500; font-size:18px; text-align:center; } 
a.bddj_cart_buy_s { line-height:46px; width:159px; display:inline-block; background:#aaa; color:#fff; font-weight:500; font-size:18px; text-align:center; } 
a.bddj_cart_etc { line-height:44px; width:157px;display:inline-block; border:1px solid #bbb; color:#111; font-size:18px; text-align:center; } 



/* 작은버튼 */
a.dj_btn_small { line-height:20px; padding:0 6px; display:inline-block; background:#fff; margin:2px 0 0 0;  border:1px solid #bbb; color:#222; font-weight:bold; font-size:11px; text-align:center; } 

/* 로그인 */
a.dj_login_btn { background:#333; line-height:44px; width:345px;  margin:17px 0 0 0; display:inline-block; color:#fff; font-weight:bold; font-size:16px; text-align:center; }
a.dj_join_btn { line-height:26px; padding:0 20px; display:inline-block; margin:1px 0 1px 0; background:#fff; border:1px solid #ddd; color:#222; font-size:12px; text-align:center; } 

/* C/S CENTER */
a.dj_search_btn { line-height:26px; padding:0 20px 3px 20px;  display:inline-block; margin:0 0 0 3px; background:#fff; border:1px solid #aaa; color:#222; font-size:12px; text-align:center; } 
a.dj_search_btn_2 { line-height:32px; padding:0 28px 3px 28px;  display:inline-block; background:#fff; border:1px solid #aaa; color:#222; font-size:14px; font-weight:bold; text-align:center; } 

/* 게시판 */
a.bbs_write_btn { float:right; line-height:40px; width:109px; display:inline-block; border:1px solid #d1d1d1; background:#fff; color:#222; font-weight:bold; font-size:16px; text-align:center; }


/*****************************************************************************************************************************************/
/* 버튼사이즈별 */
span.ju_btn_s1 span { display:inline-block; line-height:40px; padding:0 25px; font-size:13px; font-weight:bold; letter-spacing:-1px; }
span.ju_btn_s2 span { display:inline-block; line-height:33px; padding:0 20px; font-size:12px; font-weight:bold; letter-spacing:-1px; }
span.ju_btn_s3 span { display:inline-block; line-height:22px; padding:0 15px; font-size:12px; }
span.ju_btn_s4 span { display:inline-block; line-height:21px; padding:0 7px; font-size:11px; }
span.ju_btn_s5 span { display:inline-block; line-height:70px; padding:0 20px; font-size:13px; font-weight:bold; letter-spacing:-1px; }


span.ju_btn_c1 span { color:#fff !important; background:#434b50; border:1px solid #434b50; }
span.ju_btn_c2 span { color:#fff !important; background:#999; border:1px solid #999; }
span.ju_btn_c3 span { color:#2e2e2e !important; background:#fff; border:1px solid #aaa; }
span.ju_btn_c4 span { color:#2e2e2e !important; background:#ededed; border:1px solid #b3b3b3; }

.search_btn { display:inline-block; line-height:22px; padding:0 15px; font-size:12px; color:#2e2e2e; border:1px solid #aaa; }



.join {background:#194672; letter-spacing:-1px;  font-size:18px; padding:15px 50px; margin:0 15px 0 0; border-radius:10px;}
.join span {color:#fff;}
.join span a {color:#fff; display:block;}


.cancel {background:#f8f8f8; letter-spacing:-1px;  font-size:18px; padding:15px 30px; border-radius:10px; border:1px solid #e1e1e1;}
.join span a {color:#fff; display:block;}



.loginb {width:100% !important; margin:0 auto; margin-top:25px; box-sizing:border-box; background:#1b66c9; font-size:18px; padding:15px 50px; border-radius:5px; text-align:center; }
.loginb a {color:#fff; display:block;}



.btnBasic {padding:15px 30px; border-radius:5px; border:1px solid #e1e1e1;}

.joinb {width:100%; border-top:1px solid #eee; margin-top:50px; padding:30px 0 0 0; }
.joinb h1 {font-size:16px; font-weight:500;}
.joinb h1 span {color:#ff8d13;}
.joinb h2 {width:100% !important; box-sizing:border-box; background:#fff; letter-spacing:-1px;  font-size:18px;  margin:20px 15px 0 0; border-radius:0; text-align:center; border:1px solid; transition: all ease 0.3s 0s;}
.joinb h2 a {color:#000; display:block; padding:20px 50px; transition: all ease 0.3s 0s;}

.joinb h2:hover {background:#000; transition: all ease 0.3s 0s;}
.joinb h2:hover a {color:#fff; transition: all ease 0.3s 0s;}









font-face {
  font-family: 'ROKAFSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
          @font-face {
  font-family: 'ROKAFSansBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSansBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
        



          @font-face {
  font-family: 'KIMM_Light';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
          @font-face {
  font-family: 'KIMM_Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
        



@font-face {
  font-family: 'GangwonEduPowerExtraBoldA';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'JalnanGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'ROEHOE-CHAN';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/ROEHOE-CHAN.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}




#quickkk {position:fixed; right:1%; bottom:5%; width:175px; height:auto; z-index:9999;  }
#quickkk ul {max-width:100%; border:0px solid #eee;  overflow:hidden; }
#quickkk ul li {text-align:center; padding:0; border-left:1px solid #eee; border-right:1px solid #eee; background:#fff;}
#quickkk ul li:nth-child(1) {text-align:center; padding:10px 0; background:#0250ce; border:none; border-radius:15px 15px 0 0;}
#quickkk ul li:last-child {border-bottom:1px solid #eee; border-radius: 0 0 15px 15px;}
#quickkk ul li .txt {padding:15px 0;}
#quickkk ul li .txt h2 {font-size:16px; font-weight:650; color:#000; padding:0;}
#quickkk ul li .txt h3 {font-size:28px; font-weight:650; color:#004ca1; padding:0; font-family: 'Montserrat', sans-serif;}
#quickkk ul li .txt h4 {font-size:19px; font-weight:650; color:#004ca1; padding:0; font-family: 'Montserrat', sans-serif; padding:0 0 10px 0;}
#quickkk ul li .txt h5 {width:90%; margin:0 auto; padding:8px 0 0 0; font-size:13px; font-weight:450; color:#000; font-family: 'Montserrat', sans-serif; border-top:1px solid #eee;}
#quickkk ul li .qframe {width:90%; height:200px; margin:0 auto; padding:0 0 0 0; border-top:0px solid #eee;}
#quickkk ul li .qframe h2 {font-size:18px; font-weight:650; color:#000; padding:0 0 5px 0;}

#quickkk p {text-align:center; margin:8px 0 0 0;}




#pagetop {position:relative; width:100%; height:420px; margin:0 auto; text-align:left; background:#0d1936; z-index: -2;}
#pagetop::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url("//xn--hc0b248d.kr/upload/img/main_slide/m1.jpg") no-repeat 50% 30%; background-size:cover; filter:blur(0px); opacity:0.50; z-index: -1;}
#pagetop ul {width:1100px; height:100%; margin:0 auto; text-align:left; color:#000; display: flex; align-items: center;}
#pagetop ul li {width:auto; margin-right:auto; color:#fff;}
#pagetop ul li h2 {font-size:27px; font-weight:400; padding:70px 0 0 0; font-family: 'Montserrat';}
#pagetop ul li h3 {font-size:38px; font-weight:650; padding:0 0 0 0; color:#fff; font-family: 'S-CoreDream-4Regular'; letter-spacing:-1px;}
#pagetop ul li h3 span {color:#fff; font-family: 'S-CoreDream-6Bold';}
#pagetop ul li h4 {font-size:25px; font-weight:400; padding:20px 0 0 0; font-family: 'Montserrat', sans-serif; letter-spacing:2px;}


#pagetop01 {position:relative; width:100%; height:35vh; margin:0 auto; text-align:center; background:#000; z-index: -2;}
#pagetop01::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url("//xn--hc0b248d.kr/upload/img/main_slide/m4.jpg") no-repeat 50% 70%; background-size:cover; filter:blur(0px); opacity:0.5; z-index: -1;}
#pagetop01 ul {max-width:1200px; height:100%; margin:0 auto; text-align:center; color:#fff; }
#pagetop01 ul li {display: flex; flex-direction: column; justify-content: center;}
#pagetop01 ul li h1 {font-size:21px; font-weight:350; padding:120px 0 0 0; color:#fff; letter-spacing:0;}
#pagetop01 ul li h2 {font-size:36px; font-weight:550; padding:10px 0 0 0; color:#fff; font-family: 'Paybooc';}
#pagetop01 ul li h2 span {font-weight:750;}




.title {font-size:32px; font-weight:750; text-align:center; margin:0 auto; padding:120px 0 50px 0; color:#000; letter-spacing:0px;}
.titles {font-size:32px; font-weight:750;  text-align:left; margin:0 auto; padding:120px 0 17px 0; color:#000; letter-spacing:0px; border-bottom:1px solid #eee; margin-bottom:50px;}





#tap {width:100%; height:auto; margin:0 auto; color:#fff; font-size:18px; font-weight:500; text-align:center; border-bottom:0px solid #eee; background:rgba(0,67,154,0.90); margin-top:-50px; border-radius:0 0 0 0;}
#tap ul {width:1200px;; margin:0 auto; text-align:center;  }
#tap li {display:inline-block; font-weight:400; padding:15px 0;}
#tap li::before {
    content: "";
    display: inline-block;
  vertical-align:middle;
    width: 1px; /* 막대의 너비를 조절할 수 있습니다. */
    height: 10px; /* 막대의 높이를 조절할 수 있습니다. */
    background-color:rgba(255,255,255,0.40); /* 막대의 색을 파란색으로 지정합니다. */
  margin:0 35px;}

#tap li:nth-child(1)::before {width: 0px;}
#tap li a {color:#fff;}
#tap li:hover a {font-weight:700; color:#fff; border-bottom:0px solid #fff; padding:20px 0;}
#tap li.active a {font-weight:700; color:#fff; border-bottom:0px solid #fff; padding:20px 0;}






.office01 {position:relative; width:100%; height:auto; margin:0 auto; text-align:center; padding:0 0 70px 0;}
.office01 .img {width:1200px; height:470px; margin:0 auto; overflow:hidden; background:#000; border-radius:0; overflow:hidden;}
.office01 .img ul {width:100%; height:auto; margin:0 auto; position:relative; z-index:1; }
.office01 .img ul li {position: relative; width:100%; text-align:center; color:#000; }
.office01 .img ul li:last-child {display:none;}
.office01 .img ul li img { width: 100%; height: auto; position: absolute; transform: translate(-50%, 0%); }

.office01 .img ul.x li img {width:100%; height: auto; position:absolute; transform: translate(-50%, 0%);}
.office01 .img ul.a li img {width: 100%; height: auto; position: absolute; transform: translate(-50%, -10%);}
.office01 .img ul.m li img {width:100%; height: auto; position:absolute; transform: translate(-50%, -20%);}
.office01 .img ul.h li img {width: 100%; height: auto; position: absolute; transform: translate(-50%, -30%);}
.office01 .img ul.hh li img {width: 100%; height: auto; position: absolute; transform: translate(-50%, -40%);}

.office01 ul {display:table; width:auto; height:auto; margin:0 auto; position:relative; z-index:1; background:#fff; padding:15px 0 0 0; text-align:center;}
.office01 ul h2 {width:100%; font-size: 26px; font-weight: 750; padding:40px 0 50px 0; height:0; letter-spacing:0;}
.office01 ul li {  text-align:center; color:#000; font-size:21px; font-weight:350; line-height:1.5; white-space : pre-line;}



/* 가로 나열 */

.office02 {width: 100%; height: auto; margin: 0 auto; text-align: center; padding: 60px 0; border-top:1px solid #eee;}
.office02 h2 {width:100%; font-size: 26px; font-weight: 750; padding:10px 0 0 0; margin:0; letter-spacing:0;}
.office02 > ul {max-width: 1200px; margin: 0 auto; text-align: center; padding: 40px 0 0 0; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between;}
.office02 > ul > li {position: relative; width: 49%; height:100%; background: #fff; color: #000; display: flex; flex-direction: column; align-items: flex-start; padding:0 0 8% 0; box-sizing: border-box; }
.office02 > ul > li .img {position: relative; width: 100%; height:350px; border-radius:0; overflow:hidden; border-radius:10px;}
.office02 > ul > li .img img {width: 100%; height:100%; object-fit: cover; position:absolute; top:0%; left: 50%; transform: translate(-50%, 0%); }

.office02 > ul > li.h .img img {width: 100%; height: 100%; object-fit: cover; position:absolute; top:0%; left: 50%; transform: translate(-50%, -15%);}
.office02 > ul > li.d .img img {width: 100%; height: auto; object-fit: cover; position:absolute; top:0%; left:0%; transform: translate(0%, -10%);}


.office02 > ul > li > ul {width:auto; margin:0 auto; text-align:center; padding:5% 0 0 0;  }
.office02 > ul > li > ul h2 {width:auto; font-size: 23px; font-weight: 650; padding:5px 15px; letter-spacing:0; }
.office02 > ul > li > ul h2::before {
content:'';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:1%;
}
.office02 > ul > li > ul > li {font-size: 21px; font-weight: 400; line-height:1.8; background:url("") no-repeat 0 50%; background-size:3%; padding:0 0 0 0; vertical-align:top; text-align:left; white-space: nowrap;}
.office02 > ul > li > ul > li::before {
content:'\f058';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:1%;
}



/* 세로 나열 */

.office022 {width: 100%; height: auto; margin: 0 auto; text-align: center; padding: 60px 0; border-top:1px solid #eee;}
.office022 > h2 {width:100%; font-size: 26px; font-weight: 750; padding:10px 0 0 0; margin:0; letter-spacing:0;}
.office022 > ul {max-width: 1200px; margin: 0 auto; text-align: center; padding: 50px 0 0 0; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between;}
.office022 > ul > li { width: 95%; height:320px; margin:0 auto; background: #fff; color: #000; display:flex; flex-wrap: wrap;  justify-content: space-between; align-items: center; padding:0 0 3% 0; box-sizing: border-box; }

.office022 > ul > li .img {position: relative; width: 48%; height:100%; border-radius:15px; overflow:hidden; }
.office022 > ul > li .img img {width: 100%;  position:absolute; left:0; right:0; margin:auto; top:-10%; }

.office022 > ul > li.mus .img img {width: 100%;  position:absolute; left:0; right:0; margin:auto; top:0%; }
.office022 > ul > li.m .img img {width: 100%;  position:absolute; left:0; right:0; margin:auto; top:-20%; }
.office022 > ul > li.h .img img {width: 100%;  position:absolute; left:0; right:0; margin:auto; top:-30%; }

.office022 > ul > li > ul {width:48%; text-align:left; padding:0 0 0 0; }
.office022 > ul > li > ul h2 { width:auto; font-size: 23px; font-weight: 650; letter-spacing:0; padding:0 0 15px 0;}
.office022 > ul > li > ul h2::before {
content:'';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:1%;
}
.office022 > ul > li > ul > li {font-size: 21px; font-weight: 400; line-height:1.8; background:url("") no-repeat 0 50%; background-size:3%;  vertical-align:top; white-space : pre-line;}
.office022 > ul > li > ul > li::before {
content:'\f058';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:1%;
}


.office022 > ul.in > li > ul > li {background:none; padding:0;}
.office022 > ul.in > li > ul > li::before {
content:'';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:0;
}

.office022 > ul.in > li > ul > h2 {display:inline-block; width:100%; font-size: 23px; font-weight: 650; }
.office022 > ul.in > li > ul > h2::before {
content:'\f058';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:1%;
}




/* 가로 나열 + 이미지와 문구 분리 */
.office0222 {width: 100%; height: auto; margin: 0 auto; text-align: center; padding: 80px 0; border-top:1px solid #eee;}
.office0222 > h2 {width:100%; font-size: 26px; font-weight: 650; padding:10px 0 45px 0; margin:0; letter-spacing:0;}
.office0222 .img {width:1200px; height:340px; margin:0 auto; overflow:hidden; }
.office0222 .img > ul {display:flex; flex-wrap: wrap;  justify-content: space-between; width:100%; height:100%; margin:0 auto; position:relative; z-index:1; }
.office0222 .img > ul > li {position: relative; width:49%; height:310px; text-align:center; color:#000; border-radius:0; overflow:hidden;}
.office0222 .img > ul > li img {width:100%; position:absolute; left:0; right:0; margin:auto; top:-5%; border-radius:15px;}

.office0222 > ul {display:flex; flex-wrap: wrap;  justify-content: space-between; width:auto; margin: 0 auto; text-align: center; padding:30px 0 0 0; box-sizing: border-box; text-align:center; }
.office0222 > ul > li {min-width:45%; font-size: 21px; font-weight: 400; line-height:1.4; padding:0 0 2% 2%; vertical-align:top; text-align:left; }

.office0222 > ul > li h2 {width:100%; font-size: 23px; font-weight: 650; padding:0 0 0 0; letter-spacing:0;}
.office0222 > ul > li h2::before {
content:'\f058';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:1%;
}




.office0222 > ul.fill {display:flex; flex-wrap: wrap;  justify-content: space-between; width:85%; margin: 0 auto; text-align: center; padding:30px 0 0 0; box-sizing: border-box; text-align:center; }
.office0222 > ul.fill > li h2 {width:100%; font-size: 23px; font-weight: 650; padding:0 0 0 0; letter-spacing:0;}
.office0222 > ul.fill > li h2::before {
content:'';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:1%;
}
.office0222 > ul.fill > li {width:100%; font-size: 21px; font-weight: 400; line-height:1.4; padding:0 0 2% 2%; vertical-align:top; text-align:left; }

.office0222 > ul.log {display:flex; flex-wrap: wrap;  justify-content: space-between; width:auto; margin: 0 auto; text-align: center; padding:30px 0 0 0; box-sizing: border-box; text-align:center; }
.office0222 > ul.log  > li {width:35%; margin:0 auto; padding:0 0 3% 0;}
.office0222 > ul.log  > li > ul > h2 {width:100%; font-size: 23px; font-weight: 650; padding:0 0 0 0; letter-spacing:0;}
.office0222 > ul.log  > li > ul > li {width:100%; font-size: 21px; font-weight: 400; line-height:1.7; text-align:left; }





/* 가로 나열 + 이미지와 문구 분리 + 문구 li로 정렬 */
.office02222 {width: 100%; height: auto; margin: 0 auto; text-align: center; padding: 80px 0; border-top:1px solid #eee; }
.office02222 > h2 {width:100%; font-size: 26px; font-weight: 650; padding:10px 0 45px 0; margin:0; letter-spacing:0;}
.office02222 .img {width:1200px; height:340px; margin:0 auto; overflow:hidden; }
.office02222 .img > ul {display:flex; flex-wrap: wrap;  justify-content: space-between; width:100%; height:100%; margin:0 auto; position:relative; z-index:1; }
.office02222 .img > ul > li {position: relative; width:49%; height:310px; text-align:center; color:#000; border-radius:0; overflow:hidden;}
.office02222 .img > ul > li img {width:100%; position:absolute; left:0; right:0; margin:auto; top:-5%; border-radius:15px;}

.office02222 > ul {display:flex; flex-wrap: wrap; justify-content:center; width:auto; height:auto; margin:0 auto; z-index:1;  padding:30px 0 0 0;}
.office02222 > ul > li {display:table; width:48%; margin-bottom:4%; }
.office02222 > ul > li > ul {width:70%; margin:0 auto; text-align:left;}
.office02222 > ul > li > ul > h2 {font-size: 23px; font-weight: 650; padding:0 0 5px 0; letter-spacing:0;}
.office02222 > ul > li > ul > li { font-size: 21px; font-weight: 400; line-height:1.7;  }
.office02222 > ul > li > ul > li::before {
content:'\f058';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:1%;
}



/* 가로 나열 + 이미지와 문구 분리 */
.office03 {width: 100%; height: auto; margin: 0 auto; text-align: center; padding: 80px 0; border-top:1px solid #eee; border-bottom:1px solid #eee;}
.office03 > h2 {width:100%; font-size: 26px; font-weight: 750; padding:10px 0 45px 0; margin:0; letter-spacing:0;}
.office03 .img {width:1200px; height:310px; margin:0 auto; overflow:hidden; }
.office03 .img > ul {display:flex; flex-wrap: wrap;  justify-content: space-between; width:100%; height:100%; margin:0 auto; position:relative; z-index:1; }
.office03 .img > ul > li {position: relative; width:49%; height:auto; text-align:center; color:#000; box-sizing: border-box; border-radius:15px; overflow:hidden;}
.office03 .img > ul > li img {width:100%; height:auto; position:absolute; left:0; right:0; margin:auto; top:-8%;  }

.office03 > ul {display:flex; flex-wrap: wrap;  justify-content: space-between; width:auto; margin: 0 auto; padding:30px 0 0 0; box-sizing: border-box; text-align:center; }
.office03 > ul > li h2 {width:100%; font-size: 23px; font-weight: 650; padding:0 0 10px 0; }
.office03 > ul > li h2::before {
content:'\f058';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:1%;
}

.office03 > ul > li {width:48%; font-size: 21px; font-weight: 400; line-height:1.4; padding:0 0 2% 2%; vertical-align:top; text-align:left; }




/* 이미지 왼쪽 텍스트 오른쪽 */

.office033 {width: 100%; height: auto; margin: 0 auto; text-align: center; padding: 80px 0; border-top:1px solid #eee; border-bottom:1px solid #eee;}
.office033 > h2 {width:100%; font-size: 26px; font-weight: 750; padding:10px 0 45px 0; margin:0; letter-spacing:0;}
.office033 .img {width:1200px; height:310px; margin:0 auto; overflow:hidden; }
.office033 .img > ul {display:flex; flex-wrap: wrap;  justify-content: space-between; width:100%; height:100%; margin:0 auto; position:relative; z-index:1; }
.office033 .img > ul > li {position: relative; width:49%; height:auto; text-align:center; color:#000; box-sizing: border-box; border-radius:15px; overflow:hidden;}
.office033 .img > ul > li img {width:100%; height:auto; position:absolute; left:0; right:0; margin:auto; top:-8%;  }

.office033 > ul {display:flex; flex-wrap: wrap;  justify-content: space-between; width:auto; margin: 0 auto; text-align: center; padding:30px 0 0 0; box-sizing: border-box; text-align:center; }
.office033 > ul > li h2 {width:100%; font-size: 23px; font-weight: 650; padding:0 0 10px 0; }
.office033 > ul > li h2::before {
content:'\f058';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
color:#002b5b; /*폰트 어썸 색상*/
font-size:16px; /*폰트 어썸 크기*/  
  vertical-align:middle;
  margin-right:1%;
}
.office033 > ul > li {width:48%; font-size: 21px; font-weight: 400; line-height:1.4; padding:0 0 2% 2%; vertical-align:top; text-align:left; }



.pest01 {position:relative; width:100%; height:auto; margin:0 auto; text-align:center; background:#000; z-index: -2; padding:80px 0;}
.pest01::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url("//xn--hc0b248d.kr/upload/img/page/pest_bg.jpg") no-repeat 50% 70%; background-size:cover; filter:blur(0px); opacity:0.4; z-index: -1;}
.pest01 > h2 { font-size:24px; font-weight:650; padding:0 0 35px 0; white-space: pre-line; line-height:1.4; color:#fff;}
.pest01 ul { width:85%; height:auto; margin:0 auto; text-align:center; padding:0; box-sizing:border-box; color:#fff; display:flex; flex-wrap: wrap; justify-content: space-between;}
.pest01 ul li { width:49%; height:auto; font-size:18px; font-weight:350; line-height:1.4; white-space:pre-line; padding:25px 0; margin-bottom:40px; border:1px solid #fff; }
.pest01 ul li span { display:inline-block; font-size:21px; font-weight:750; padding:0 0 10px 0;}

.pest01 ul li:nth-child(odd) { float:left; }
.pest01 ul li:nth-child(even) { float:right; }












.ceo01 {position:relative; width:100%; height:auto; margin:0 auto; text-align:center; padding:0; border-bottom:0px solid #eee;  }
.ceo01 .img {width:100%; height:auto; margin:0 auto; background:url("//xn--hc0b248d.kr/upload/img/page/company_01.png") no-repeat 50% 0; overflow:hidden; box-sizing:border-box; padding:0;}
.ceo01 .img > ul {width:1400px; height:760px; margin:0 auto; display:flex; justify-content: space-between; align-items: flex-start;}
.ceo01 .img > ul > li {color:#fff; }
.ceo01 .img > ul > li h2 {font-size:28px; font-weight:400; padding:0 0 0 0; }
.ceo01 .img > ul > li h3 {font-size:36px; font-weight:550; padding:0 0 0; }
.ceo01 .img > ul > li h4 {font-size:16px; font-weight:450; padding:15px 0 0; font-family: 'Montserrat';}

.ceo01 .img > ul > li:nth-child(2) {display:flex; flex-wrap: wrap; width:auto; align-items: flex-end;}



.ceo01 > ul {max-width:1200px; height:auto; margin:0 auto; position:relative; z-index:1; padding:0; background:#fff; margin-top:50px; border-radius:35px;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;}
.ceo01 > ul > li {position:relative; width:auto; margin:0 auto; color:#000; text-align:left; }
.ceo01 > ul > li::before {
  content:'';
  position: absolute;
  background:#82daf6;
  width:30px;
  height:30px;
  display:block;
  left:-35px;
  top:-15px;
 }

.ceo01 > ul > li > h2 {font-size:34px; font-weight:600; line-height:1.4; white-space : pre-line;}
.ceo01 > ul > li > h2 span {color:#0a6fcd;}

.ceo01 > ul > li > h3 {font-size:24px; font-weight:350; line-height:1.5; padding:25px 0 0; white-space : pre-line;}

.ceo01 > ul > li > h4 {font-size:26px; font-weight:650; line-height:1.6; padding:45px 0 0; }
.ceo01 > ul > li > h4 span {font-size:44px; font-weight:450;margin-left:15px; font-family: 'ROEHOE-CHAN';}

.ceo01 > ul > li > h5 { font-size:30px; font-weight:550; line-height:1.4; padding:15px 0 0; }
.ceo01 > ul > li > h5 span {font-size:46px; font-weight:450; margin-left:0px; font-family: 'ROEHOE-CHAN';}
.ceo01 > ul > li img {width:100%;}



.ceo02 {width: 100%; height: auto; margin: 0 auto; text-align: center; padding:0 0; border-top:1px solid #eee; }
.ceo02 > h2 {font-size:36px; font-weight:650; color:#000; padding:0 0 40px 0;}
.ceo02 > ul {max-width: 1200px; margin: 0 auto; text-align: center; padding:0 0 0 0; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between;}
.ceo02 > ul > li {position: relative; width: 32%; height:auto; margin:0 auto; background: #fff; color: #000; box-sizing: border-box; }

.ceo02 > ul > li .img { width: 100%; height:auto; overflow:hidden; border-radius:0; }
.ceo02 > ul > li .img img {width: 100%;   }

.ceo02 > ul > li .txt {position:absolute; text-align:center;
  top:75%; left:50%;
transform: translate(-50%, -50%); box-sizing:border-box; color:#fff; z-index:9; text-shadow: 0px 0px 8px rgba(0,0,0,0.6);}
.ceo02 > ul > li .txt h2 {font-size: 32px; font-weight: 700; padding:0 0 5px 0;}
.ceo02 > ul > li .txt h3 {font-size: 24px; font-weight: 450; font-family: 'Montserrat', sans-serif;}





.ceo03 {width: 100%; height: auto; margin: 0 auto; text-align: center; padding:80px 0; border-top:0px solid #eee; }
.ceo03 > h2 {font-size:36px; font-weight:550; color:#000; padding:0 0 0 0;  letter-spacing:-2px;}
.ceo03 > h2 span {color:#0a6fcd;}
.ceo03 > h3 {font-size:22px; font-weight:350; padding:15px 0 0; white-space : pre-line; line-height:1.4; color:#555555;}
.ceo03 > ul {max-width: 1200px; margin: 0 auto; text-align: center; padding:0px 0 0 0; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.ceo03 > ul > li {position: relative; width:31%; height:365px; margin:0 auto; background: #fff; color: #000; box-sizing: border-box; border-radius:100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}


.ceo03 > ul > li:nth-child(1) {border:10px solid #05b5ed;}
.ceo03 > ul > li:nth-child(1) h2 {color:#05b5ed;}

.ceo03 > ul > li:nth-child(2) {border:10px solid #51bcac;}
.ceo03 > ul > li:nth-child(2) h2 {color:#51bcac;}

.ceo03 > ul > li:nth-child(3) {border:10px solid #5b8bb1;}
.ceo03 > ul > li:nth-child(3) h2 {color:#5b8bb1;}

.ceo03 > ul > li .img { width:25%; height:auto; overflow:hidden; }
.ceo03 > ul > li .img img {width: 100%;  border-radius:0px; }

.ceo03 > ul > li .txt {width:100%; text-align:center; box-sizing:border-box; color:#000; padding:10px 0 0 0; }
.ceo03 > ul > li .txt h2 {font-size: 30px; font-weight: 550;  }
.ceo03 > ul > li .txt h3 {font-size: 32px; font-weight: 650; padding:0 0 5px 0; font-family: 'Montserrat';}
.ceo03 > ul > li .txt h4 {font-size: 20px; font-weight: 400;  line-height:1.3; white-space : pre-line;}





.ceo04 {position:relative; width:100%; height:auto; margin:0 auto; text-align:left; background:#000; z-index: -2; padding:160px 0;}
.ceo04::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url("//xn--hc0b248d.kr/upload/img/page/company_05.png") no-repeat 50% 70%; background-size:cover; filter:blur(0px); opacity:1.0; z-index: -1;}
.ceo04 > ul {width:1200px; height:auto; margin:0 auto; display:flex; justify-content: space-between; align-items: flex-start;}
.ceo04 > ul > li {color:#fff; }
.ceo04 > ul > li h2 {font-size:54px; font-weight:400; padding:0 0 0 0; white-space : pre-line; line-height:1.3;}
.ceo04 > ul > li h2 span {font-weight:650;}
.ceo04 > ul > li h3 {font-size:28px; font-weight:400; padding:15px 0 0; line-height:1.4; white-space : pre-line;}






.papers {width:1200px; height: auto; margin: 0 auto; text-align: center; padding: 60px 0; border-top:0px solid #eee;}
.papers > ul {display:flex; flex-wrap: wrap;  justify-content: center; width:1200px; margin: 0 auto; text-align: center; padding:0px 0 0 0; box-sizing: border-box; text-align:center; }
.papers > ul > li {width:31%;  font-size: 24px; font-weight: 450; padding:0 1% 5% 1%; vertical-align:top; text-align:center; }
.papers > ul > li .img {border:1px solid #eee; padding:5px; width:100%; height:550px; overflow:hidden; display:flex; flex-wrap: wrap; align-items: center;}
.papers > ul > li .img img {width:95%; margin:0 auto;}
.papers > ul > li span {display:inline-block; background:#fff; padding:15px 0 0 0; border-radius:100px; color:#000; margin:3% 0 0 0;}





.map01 {width:1200px; height:auto; margin:0 auto;  color:#000; padding:0px 0 200px 0; border-top:0px solid #eee;}
.map01 .wrap {width:100%; height:auto; margin:0 auto;}
.map01 .wrap h1 {font-size:21px; font-weight:650; padding:50px 0 20px 0; text-align:left;}
.map01 ul {width:100%; border-top:1px solid #000; margin-top:0px;}
.map01 ul li {display:block; width:100%; height:80px; line-height:80px; font-size:21px; font-weight:300; border-bottom:1px solid #eee; padding-left:30px; }
.map01 ul li i {font-size:18px;  margin-right:10px; color:#002b5b; box-sizing:border-box; text-align:center;}
.map01 ul li span {display:inline-block; font-weight:700; margin-right:30px; width:180px; color:#000;}

@font-face {
    font-family: 'SEBANG_Gothic_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'tmonmonsori.ttfregular';
    src: url("//xn--hc0b248d.kr/upload/images/font/tmonmonsori.woff2") format('woff2'),
         url("//xn--hc0b248d.kr/upload/images/font/tmonmonsori.woff") format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




            @font-face {
    font-family: 'ROKAFSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
            @font-face {
    font-family: 'ROKAFSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
          



            @font-face {
    font-family: 'KIMM_Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
            @font-face {
    font-family: 'KIMM_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
          



@font-face {
    font-family: 'GangwonEduPowerExtraBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'JalnanGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'ROEHOE-CHAN';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/ROEHOE-CHAN.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'TTHakgyoansimUndongjangL';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimUndongjangL.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}





            @font-face {
     font-family: 'S-CoreDream-1Thin';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
            @font-face {
     font-family: 'S-CoreDream-2ExtraLight';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
            @font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
            @font-face {
     font-family: 'S-CoreDream-4Regular';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
            @font-face {
     font-family: 'S-CoreDream-5Medium';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
            @font-face {
     font-family: 'S-CoreDream-6Bold';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
            @font-face {
     font-family: 'S-CoreDream-7ExtraBold';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
            @font-face {
     font-family: 'S-CoreDream-8Heavy';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
            @font-face {
     font-family: 'S-CoreDream-9Black';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
          



@font-face {
    font-family: 'JNE-Yuna-TTF-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-1@1.0/JNE-Yuna-TTF-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
/* 메뉴 스타일 */
.menu {
  width:auto;
}

.menu > li {
  display: inline-block;
  height: auto;
  letter-spacing: 0;
  text-align: center;
  z-index: 9;
  padding: 0 15px;
  position: relative;
    letter-spacing:-0.5px;
   text-shadow: 0px 0px 8px rgba(255,255,255,0.0);   
}

/* 링크 스타일 */
.menu > li a {
  display: block;
  line-height: 27px;
  text-decoration: none;
  font-weight: 500;
  font-size: 22px;
  color: #fff;
  transition: color 0.1s ease-in-out;
}

.menu li:hover > a {
  opacity: 1;
}

/* 서브 메뉴 스타일 */
.menu li:hover > ul {
  opacity: 1;
}

.menu li:hover > ul li {
  height: 34px;
  overflow: visible;
  padding: 0;
}

.menu li ul {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  opacity: 0;
  background: rgba(22, 40, 89, 0.95);
  padding: 22px 20px 0 20px;
  border-radius: 7px;
  transition: all ease 1s 0s;
  display: inline-block;
  white-space: nowrap;
}

.menu li ul li {
  width: auto;
  margin: 0 auto;
  height: 0;
  overflow: hidden;
  padding: 0;
  border-bottom: 0;
  transition: height 0.35s ease 0.01s;
  text-shadow: 0px 0px 0 rgba(255,255,255,0);  
}

.menu li ul li a {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  line-height: 10px;
  color: #fff;
}

.menu li ul li:hover > a {
  border-bottom: none;
}

/* 서브 메뉴 조정 */
.menu li ul.sub1,
.menu li ul.sub2,
.menu li ul.sub3,
.menu li ul.sub4,
.menu li ul.sub5,
.menu li ul.sub6,
.menu li ul.sub7,
.menu li ul.sub8 {
  display: inline-block;
  width: auto;
  z-index: 9999;
  font-weight: 400;
  padding: 25px 30px 0 30px;
  margin-left: -55px;
}

.menu li ul.sub1 li,
.menu li ul.sub2 li,
.menu li ul.sub3 li,
.menu li ul.sub4 li,
.menu li ul.sub5 li,
.menu li ul.sub6 li,
.menu li ul.sub7 li,
.menu li ul.sub8 li {
  width: 100%;
}

.slider {
  width: 100vw;
  height: 100vh;
  max-height: 870px;  
  padding-bottom: 0%; /* 16:9 비율을 위한 값 (825px / 1466px) */
  position: relative;
  overflow: hidden;
    background:#000;
    
}

.slide {
  width: 100%;
  height:100%; 
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide .img {
  width: 100%;
  height: 100%;
   object-fit: cover;  
}

#slide1 .img {
  transform: translate(0%, 0%);  
}

#slide2 .img {
  transform: translate(0%, 0%);  
}


#slide3 .img {
  transform: translate(0%, 0%);  
}


#slide4 .img {
  transform: translate(0%, 0%);  
}

.slide .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.slide-content {
  position: absolute;
    width:1200px;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: slideUp 0.8s ease; /* slideUp 애니메이션을 1초 동안 적용하며, 이징 함수는 ease로 설정합니다. */

}

.slide-content .txt01 {width:auto;  color:#fff;  text-align: left; text-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
.slide-content .txt01 h2 {display:table; font-family: 'Montserrat'; padding:2px 20px; font-size:32px; font-weight:550; text-shadow: 0px 0px 5px rgba(0,0,0,0.0); letter-spacing:1px; background:rgba(19,57,100,0.80);}
.slide-content .txt01 h3 {display:table; width:auto; padding:10px 0 5px 0; font-size:52px; font-weight:450; border-bottom:1px solid rgba(255,255,255,0.40); letter-spacing:-1.5px;}
.slide-content .txt01 h3 span {font-weight:650;}
.slide-content .txt01 h4 {font-size:24px; font-weight:400; white-space : pre-line; line-height:1.4; padding:15px 0 0 0;}



.link {width:auto; height:auto; margin:0 auto; padding:40px 0 0 0; }
.link ul {width:100%; margin:0 auto; display:flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;}
.link ul li {width:auto;}
.link ul li i {font-size:18px; }
.link ul li a {width:48%; font-size:20px; font-weight:450; padding:5px 25px; border-radius:100px; border:1px solid #fff; color:#fff; background:none; transition: all ease 0.3s 0s; vertical-align:middle; box-sizing:border-box; margin:0 10px;}
.link ul li a:hover {transition: all ease 0.3s 0s; color:#000; background:#fff; border:1px solid #fff; text-shadow: 0px 0px 5px rgba(0,0,0,0.0);}



/* 슬라이드 하단 텍스트 */

.slide-info-container {
    
    display:none;
  position: absolute;
  bottom: 10px; /* 조정 가능한 여백 */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  list-style: none; /* 기본 목록 스타일 제거 */
  padding: 0; /* 기본 패딩 제거 */
}

.slide-info {
    list-style: none;
    padding:15px 0;
    margin: 0;
    text-align: center;
}

.slide-info li {
    position: relative;
    display: inline-block;
    margin: 0 30px;
}

/* 기본 링크 텍스트 색상 */
.slide-info li a {
    font-size:16px; font-weight:550;
    color:#fff; /* 기본 색상 설정 */
    transition: all ease 0.3s;
}

.slide-info li a:hover {opacity:0.80; transition: all ease 0.3s;}

/* 활성화된 슬라이드의 링크 텍스트 색상 */
.slide-info li a.active {
    font-weight:550;
    color:#1386bf; /* 활성화된 슬라이드의 텍스트 색상을 흰색으로 변경 */
}

 .slide-bar {
     opacity:0.60;
    position: absolute;
     top:25px;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color:#d9d9d9;
    transition: width 0.5s ease;
    width: 0; /* 초기 가로바 너비를 0으로 설정하여 시작할 때 보이지 않게 함 */
  }





/* 컨텐츠 위로 올리기 */


@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, -35%); /* 시작 위치 */
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%); /* 최종 위치 */
  }
}


.custom-container { display:inline-block; width:100%; height:auto; box-sizing:border-box; text-align:center; }

.custom-container ul { width:100%; min-width:756px; margin:0px 0 0; font-size:0; line-height:0; }
.custom-container ul li { display:inline-block; *display:inline; *zoom:1; width:385px; margin:0 17px 0 0; font-size:18px; line-height:50px; vertical-align:top; text-align:center; border:1px solid #e5e5e5;}
.custom-container ul li:last-child {margin:0;}
.custom-container ul li img { display:block; width:385px; height:290px; margin:0 auto;  object-fit: cover;}
.custom-container ul li span {width:385px;  background:#fff; display:block; border-top:1px solid #e5e5e5; padding:15px 0;}