@charset "utf-8";

/* DOM (idom2015@naver.com) CSS V2.35*/  

a:hover {text-decoration:none;}

body {color:#444;font-size:1em;font-family:'Noto Sans KR', dotum, sans-serif;background:#fff;line-height:1.4em;}

*, *::after, *::before {-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;transition: all 0.3s;border-box:box-sizing:}

.cmt {font-size:1.3em;;font-weight:700;}
.cmst {font-size:1.1em;margin:.2vh 0 1vh 0; font-weight:500;}



/* navi & basic-wrap */
nav {position:absolute;top:0;left:0;}

@media  screen and (max-width:1024px) {
nav {position:fixed;top:0;left:0;}
.basic-wrap {padding:0 10px;}
}

.basic-wrap {max-width:1300px;}


/*button*/
.btn {position:relative;padding:1em 10px;line-height:0;border:1px solid #000;text-align:center;display:inline-block;color:#444;background:#fff;/*color*/}
.btn-st {position:relative;padding:1em 30px 1em 10px;line-height:0;border:1px solid #000;text-align:center;display:inline-block;color:#444;background:#fff;/*color*/}

.btn-s {font-size:11px;}
.btn-b {font-size:1.2em;}

.btn-c-b:hover {background:#000 !important;color:#fff;}
.btn-c-bl:hover {background:#000 !important;color:#fff;}
.btn-c-g:hover {background:#000 !important;color:#fff;}
.btn-sc-o:hover {background:#000 !important;color:#fff;}
.btn-sc-y:hover {background:#000 !important;color:#fff;}

.bst01 {}
.bst01::after {content:'+';position:absolute;right:10px;top:48%;}
.bst01:hover {background:black;color:#fff;border-color:black;}/*color*/
.bst01:hover::after {content:'-';}

.bst02 {background:yellow !important;}
.bst02::after {content:'›';position:absolute;right:10px;top:48%;}
.bst02:hover {background:#fff !important;border-color:black;color:#000;}/*color*/
.bst02:hover::after {content:'››';}

.bst03{}
.bst03::after {content:'→';position:absolute;right:10px;top:49%;}
.bst03:hover {background:black;color:#fff;border-color:black;
box-shadow: 3px 3px 6px #666;}/*color*/
.bst03:hover::after {color:#fff !important;}

.bst04 {}
.bst05 {}
.bst06 {}
.bst07 {}
.bst08 {}
.bst09 {}
.bst010 {}


/*hover*/
.heff-01:hover {}
.heff-01:hover img {transform: scale(1.02);box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}

.heff-02:hover {box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);}
.heff-02:hover img {box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.5);transform: scale(.95);}

.heff-03 {border:3px solid #fff !important;}
.heff-03:hover   {transition: all 1s; box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);position:relative;}


.heff-03::before   {content:'';position:absolute;top:0;left:0;width:0%;height:1px;border-width:3px 0 0 3px;border-style:solid;border-color:rgba(0,0,0,0);}
.heff-03::after   {content:'';position:absolute;bottom:0;right:0;width:0%;height:1px;border-width:0 3px 3px 0;border-style:solid;border-color:rgba(0,0,0,0);}

.heff-03:hover::before   {content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-color:rgba(54,105,207,1);}
.heff-03:hover::after   {content:'';position:absolute;bottom:0;right:0;width:100%;height:100%;border-color:rgba(54,105,207,1);}




.heff-04 {z-index:9999 !important;}
.heff-04:hover {position:relative;}
.heff-04:hover::after {content:'';position:absolute;width:100%;height:100%;left:-5px;top:-5px;border:1px solid #ccc;}
.heff-04:hover::before {content:'';position:absolute;width:100%;height:100%;right:-5px;bottom:-5px;border:1px solid #ccc;}
.heff-04:hover img {}


.heff-05 {position:relative;z-index:9999 !important;}
.heff-05::before, .heff-05::after { content: ""; display: block; position: absolute;  width: 100%;  height: 100%; background: rgba(0,0,0,.9); left: 0; top: 0;
    opacity: 0;  transition: .5s;}
.heff-05:hover::after,.heff-05:hover::before { width: 100%; height: 100%; border-radius: 5px;opacity:.1;}
.heff-05:hover::after {border-style: solid none;border-color:red;}
.heff-05:hover::before {   border-style: none solid;border-color:red;}

.heff-06:hover img { transform: rotate(360deg);;  transition: .5s;}


.heff-07 {position:relative;}
.heff-07:hover .cbox{transform: translate(30px,30px);}

.heff-08 {position:relative;}
.heff-08:hover .cbox {transform: rotateY( 360deg );background:#f5f5f5;}


.heff-09 {position:relative;}
.heff-09 .cbox1 {position:absolute;top:0;left:0;background:#fff;}
.heff-09 .cbox2 {position:absolute;top:0;left:0;z-index:-1;}
.heff-09:hover .cbox1 {transform: rotateY( 180deg ) ;opacity:0;}
.heff-09:hover .cbox2 {transform: rotateY( -360deg )}



/*animation
p {  
  animation-name: slidein;
  animation-duration: 3s;
  animation-iteration-count: 3;
  animation-direction: alternate;}

@keyframes slidein {
  from {
    margin-left: 100%; width: 300%
  }

  to {
    margin-left: 0%; width: 100%;
  }
}

  0%   {}
  25%  {}

  */