@charset "utf-8";

.multiPopup {position:relative; width:100%;  max-width:500px; overflow:hidden; z-index:9999}
.multiPopup .inner {position:relative; overflow:hidden}
.multiPopup ul.bannerList {position:relative; width:1800px; overflow:hidden}
.multiPopup ul.bannerList:after {clear:both; display:block; content:''}
.multiPopup ul.bannerList > li {float:left; width:100%; max-width:500px; }
.multiPopup ul.bannerList > li img {display:block}
.multiPopup ul.thumbList {position:relative; border-top:1px solid #dedede; overflow:hidden}
.multiPopup ul.thumbList:before {position:absolute; top:0; left:0; width:1px; height:100%; content:''; background:#dedede; z-index:1}
/*1개일때 타이틀없을때 총 높이 781px*/.multiPopup ul.thumbList > li{display:none;}
/*3개.multiPopup ul.thumbList > li {position:relative; display:table; float:left; width:33.3%; height:80px;  text-align:center; background:#f0f0f0; cursor:pointer; transition:all .3s ease}*/
/*5개.multiPopup ul.thumbList > li {position:relative; display:table; float:left; width:120px; height:80px;  text-align:center; background:#f0f0f0; cursor:pointer; transition:all .3s ease}*/
/*6개.multiPopup ul.thumbList > li {position:relative; display:table; float:left; width:100px; height:80px;  text-align:center; background:#f0f0f0; cursor:pointer; transition:all .3s ease}*/
.multiPopup ul.thumbList > li:before {position:absolute; top:0; right:0; width:1px; height:100%; content:''; background:#dedede}
.multiPopup ul.thumbList > li:after {position:absolute; bottom:0; left:0; width:100%; height:1px; content:''; background:#dedede}
.multiPopup ul.thumbList > li:hover {color:#666; background:#f9f9f9}
.multiPopup ul.thumbList > li p {display:table-cell; color:#888; padding:0 10px; vertical-align:middle; }
.multiPopup ul.thumbList > li.on {background:#fff}
.multiPopup ul.thumbList > li.on p {color:#555}

.multiPopup .closeArea {padding-left:10px; background:#777; overflow:hidden}
.multiPopup .closeArea input[type=checkbox] {margin-left:5px; vertical-align:middle; cursor:pointer}
.multiPopup .closeArea > div {text-align:left !important; font-family:inherit !important; padding:0 !important; width:inherit !important; background:none !important}
.multiPopup .closeArea > div span {color:#ccc; line-height:30px; vertical-align:middle; cursor:pointer}

.multiPopup2 {position:relative;  width:100%;  max-width:500px; overflow:hidden; z-index:9999}
.multiPopup2 .inner {position:relative; overflow:hidden}
.multiPopup2 ul.bannerList {position:relative; width:1800px; overflow:hidden}
.multiPopup2 ul.bannerList:after {clear:both; display:block; content:''}
.multiPopup2 ul.bannerList > li {float:left;  width:100%;  max-width:500px;}
.multiPopup2 ul.bannerList > li img {display:block}
.multiPopup2 ul.thumbList {position:relative; border-top:1px solid #dedede; overflow:hidden}
.multiPopup2 ul.thumbList:before {position:absolute; top:0; left:0; width:1px; height:100%; content:''; background:#dedede; z-index:1}
/*1개일때 타이틀없을때*/.multiPopup2 ul.thumbList > li{display:none;}
/*3개.multiPopup2 ul.thumbList > li {position:relative; display:table; float:left; width:33.3%; height:80px;  text-align:center; background:#f0f0f0; cursor:pointer; transition:all .3s ease}*/
/*5개.multiPopup2 ul.thumbList > li {position:relative; display:table; float:left; width:120px; height:80px;  text-align:center; background:#f0f0f0; cursor:pointer; transition:all .3s ease}*/
/*6개.multiPopup2 ul.thumbList > li {position:relative; display:table; float:left; width:100px; height:80px;  text-align:center; background:#f0f0f0; cursor:pointer; transition:all .3s ease}*/
.multiPopup2 ul.thumbList > li:before {position:absolute; top:0; right:0; width:1px; height:100%; content:''; background:#dedede}
.multiPopup2 ul.thumbList > li:after {position:absolute; bottom:0; left:0; width:100%; height:1px; content:''; background:#dedede}
.multiPopup2 ul.thumbList > li:hover {color:#666; background:#f9f9f9}
.multiPopup2 ul.thumbList > li p {display:table-cell; color:#888; padding:0 10px; vertical-align:middle}
.multiPopup2 ul.thumbList > li.on {background:#fff}
.multiPopup2 ul.thumbList > li.on p {color:#555}

.multiPopup2 .closeArea {padding-left:10px; background:#777; overflow:hidden}
.multiPopup2 .closeArea input[type=checkbox] {margin-left:5px; vertical-align:middle; cursor:pointer}
.multiPopup2 .closeArea > div {text-align:left !important; font-family:inherit !important; padding:0 !important; width:inherit !important; background:none !important}
.multiPopup2 .closeArea > div span {color:#ccc; line-height:30px; vertical-align:middle; cursor:pointer}

#popup_close_btn {float:right; display:block; width:60px; height:30px; color:#bbb; text-align:center; line-height:30px; background:#555; vertical-align:middle}
#popup_close_btn:hover {background:#444}


.videopop{display: block; width: 100%;}
.videopop img{position: relative;   max-height: 621px; overflow: hidden; width: 100%;  max-width: 500px;}
.videopop iframe{    position: absolute;  top: 24%; width: 100%;  max-width: 400px;  left: 19.5%;   height: 230px; overflow: hidden;}




#overlay-background {top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#0e0e0e;opacity:0.5;}
.isystk-overlay {position: absolute;top: 10%;left: 10%;width: 80%;max-width: 500px;z-index: 1100;background: #fff;opacity: 0;visibility: hidden;transition: .1s linear;}
.isystk-overlay .wrap {background-color: #fff;}
.isystk-overlay.open {opacity: 1;visibility: visible;animation: open-animation .5s ease 0s 1 forwards;margin-top:20px;}

.isystk-overlay2 {position: absolute;top: 10%;left: 10%;width: 80%;max-width: 1100px;z-index: 1100;background: #fff;opacity: 0;visibility: hidden;transition: .1s linear;}
.isystk-overlay2.open {opacity: 1;visibility: visible;animation: open-animation .5s ease 0s 1 forwards;margin-top:20px;}


iframe{width:100%;}

@keyframes open-animation {
  0% {
    transform: scaleY(.1) scaleX(.1);
  }
  50% {
    transform: scaleY(1) scaleX(.1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
.isystk-overlay .title{margin-bottom: 5px;padding: 5px;border-bottom: solid 1px #ccc;font-size: 20px;}
.isystk-overlay td {padding: 10px;}
.isystk-overlay .close {position: absolute;right: 0;margin: 10px;zoom: 100%;color: #333;top: 0px;z-index: 9999;}

.isystk-overlay2 .title{margin-bottom: 5px;padding: 5px;border-bottom: solid 1px #ccc;font-size: 20px;}
.isystk-overlay2 td {padding: 10px;}
.isystk-overlay2 .close {position: absolute;right: 0;margin: 10px;zoom: 100%;color: #333;top: 0px;z-index: 9999;}

  @media screen and (max-width: 1100px) {
	  .hd_pops{left: 50% !important;  transform: translate(-50%, 0); width:100%; max-width:500px;}  
	  .isystk-overlay{ width:100%; max-width:500px;}  
	  .multiPopup ul.bannerList > li img{width: 100%;}
	  .multiPopup2 ul.bannerList > li img{width: 100%;}
	  
  }
  
  @media screen and (max-width: 768px) {
	  .hd_pops{    top: 80px !important;}  
	  
  }

  @media screen and (max-width: 550px) {
	.hd_pops{ left: 50% !important;  transform: translate(-50%, 0);   width:100%;}  
	.multiPopup ul.bannerList > li img{width: 100%;}
/*3개*/	.multiPopup ul.thumbList > li{width: 33.3%; height: 70px;}	
/*5개	.multiPopup ul.thumbList > li{width: 20%; height: 70px;}*/
/*6개	.multiPopup ul.thumbList > li{width: 16.7%; height: 70px;}*/
	.multiPopup2 ul.bannerList > li img{width: 100%;}
/*3개*/	.multiPopup2 ul.thumbList > li{width:33.3%; height: 70px;}	
/*5개	.multiPopup2 ul.thumbList > li{width:20%; height: 70px;}*/
/*6개	.multiPopup2 ul.thumbList > li{width:16.7%; height: 70px;}*/	
	.multiPopup ul.thumbList > li p{word-break: break-word;}
	.multiPopup2 ul.thumbList > li p{word-break: break-word;}
	
	.videopop iframe{top: 23%;     max-width: 350px; left: 19%;  height: 200px;}
	
   }
   
  @media screen and (max-width: 450px) {
	.hd_pops{ width:90%;}
	.isystk-overlay{ width:90%;}
	.multiPopup ul.bannerList > li img{width: 81%;}
	
	.multiPopup2 ul.bannerList > li img{width: 81%;}
/*5개	.multiPopup ul.thumbList > li{width: 20%;}*/
/*6개*/.multiPopup ul.thumbList > li{width: 33.3%;}
/*5개	.multiPopup2 ul.thumbList > li{width: 20%;}*/
/*6개*/.multiPopup2 ul.thumbList > li{width: 33.3%;}

   .videopop iframe{top: 24%; max-width: 280px;  left: 18.3%; height: 150px;}
	
   }   
   
   
     @media screen and (max-width: 420px) {
	.multiPopup ul.bannerList > li img{width: 76%;}
	.multiPopup2 ul.bannerList > li img{width: 76%;}
   .videopop iframe{left:18.2%;}
	
   } 
   
   
     @media screen and (max-width: 411px) {
	.multiPopup ul.bannerList > li img{width: 74%;}
	.multiPopup2 ul.bannerList > li img{width: 74%;}
	
   }   
   
   
   
     @media screen and (max-width: 385px) {
	.multiPopup ul.bannerList > li img{width: 69.5%;}
	.multiPopup2 ul.bannerList > li img{width: 69.5%;}
   .videopop iframe{left:17.8%;}
	
   }   
   
  
  @media screen and (max-width: 376px) {
	.hd_pops{top: 130px !important;}   
	.multiPopup ul.bannerList > li img{width: 68%;}
	
	.multiPopup2 ul.bannerList > li img{width: 68%;}
	
/*짝수*/	.multiPopup ul.thumbList > li{width: 50%; height: 70px;}
/*짝수*/	.multiPopup2 ul.thumbList > li{width: 50%; height: 70px;}
	
/*맨마지막100%*/	.multiPopup ul.thumbList > li:last-child{width: 100%; height: 70px;}
/*맨마지막100%*/	.multiPopup2 ul.thumbList > li:last-child{width: 100%; height: 70px;}


   .videopop iframe{top: 21.5%; left: 17.7%;}

	
   }   
   
   
    @media screen and (max-width: 360px) {
	.multiPopup ul.bannerList > li img{width: 65%;}
	.multiPopup2 ul.bannerList > li img{width: 65%;}
   .videopop iframe{left:17.5%;}
	
   } 
   
   
   
    @media screen and (max-width: 320px) {
	.multiPopup ul.bannerList > li img{width: 57.5%;}
	.multiPopup2 ul.bannerList > li img{width: 57.5%;}
   .videopop iframe{ top: 21.5%;    left: 17.6%;  max-width: 230px;  height: 130px;}
	
   }   
   
   
   @media screen and (max-width: 281px) {  
	.multiPopup ul.bannerList > li img{width: 51%;}
	
	.multiPopup2 ul.bannerList > li img{width: 51%;}
	.hd_pops{left: 57% !important;}
	.isystk-overlay{left: 12% !important;}
	
	.videopop iframe{    top: 21.5%; left: 17.5%; max-width: 200px; height: 110px;}
	
   }