@charset "euc-kr";

@media (min-width:1200px) {

  /* ÃÖ¼Ò 1200 ~ ÃÖ´ë */

  #myModal {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
  }

  #myModal .modal {
    position: absolute;
    width: 100%;
	text-align:center;
  }

  #myModal .modal_content {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    opacity: 1;
    line-height: normal;
    
    top: 0px;
  }

  #myModal .close {
    position: absolute;
    left: 0px;
    top: -50px;
    font-size: 36px;
    line-height: 36px;
    padding-left: 15px;
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    vertical-align: middle;
  }

  #myModal .close img {
    position: relative;
    vertical-align: middle;
    transition: all 0.3s;
    left: 0px;
  }

  #myModal .close:hover img {
    left: -10px;

  }

  .modal_inner {
    display: none;
  }
	
 /*modal_box*/
  .modal_box {
	width:1200px;
  }


  /*modal_box2*/
  .modal_box2 {
	background: #fff;
    padding: 30px 50px;
    box-sizing: border-box;    
	width: 1440px;
	box-sizing:border-box;
  }

  .modal_box2 .top {
	padding:30px; 
    background: rgb(255, 255, 255);
	border-bottom:1px solid #ccc;
  }
  .modal_box2 .top p:nth-child(1){
	font-size:28px;
    text-align: center;
	margin-bottom:20px;
  }
  .modal_box2 .top p:nth-child(1) img{
	height:60px;
	vertical-align:middle;
	display:inline-block; margin-right:15px;
  }
  .modal_box2 .top p:nth-child(2){
	font-size:14px;
    text-align: center;
  }

  .modal_box2 .bottom {
    box-sizing: border-box;
    padding:30px;
  }

  .modal_box2 .bottom ul {
    height: 100%;
    overflow-y: scroll;
	overflow-x:visible;
	box-sizing:border-box;
  }

   .modal_box2 .bottom ul li {
    display:inline-block;
	font-size:20px;
	margin:10px 30px;
  }
  .modal_box2 .bottom ul li a{
    color:#979797;
	display:inline-block;
  }
  .modal_box2 .bottom ul li a:before{
    content:"#";
	display:inline-block;
	margin-right:5px;
	font-size:20px;
  }

  .modal_box2 .bottom ul li a:hover{
	transform:scale(1.1);
	color:#000;
	transition:0.3s;
  }


}


@media (max-width:1199px) {

#myModal {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
  }

  #myModal .modal {
    position: absolute;
    width: 100%;
  }

  #myModal .modal_content {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    opacity: 1;
    line-height: normal;
    top: 0px;
	width:100%;
  }

  #myModal .close {
    position: absolute;
    left: 10%;
    top: -40px;
    font-size: 28px;
    line-height: 28px;
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    vertical-align: middle;
  }

  #myModal .close img {
    position: relative;
    vertical-align: middle;
	height:20px;
    transition: all 0.3s;
    left: 0px;
  }

  #myModal .close:hover img {
    left: -10px;

  }

  .modal_inner {
    display: none;
  }

  /*modal_box*/
  .modal_box {
    width:80%;
	left:10%;
    position: relative;
  }


  /*modal_box2*/
  .modal_box2 {
	background: #fff;
    padding: 15px 15px;
    box-sizing: border-box;
    width: 80%;
	left:10%;
    position: relative;
  }

  .modal_box2 .top {
	padding:15px; 
    background: rgb(255, 255, 255);
	border-bottom:1px solid #ccc;
  }
  .modal_box2 .top p:nth-child(1){
	font-size:20px;
    text-align: center;
	margin-bottom:20px;
  }
  .modal_box2 .top p:nth-child(1) img{
	height:20px;
	vertical-align:middle;
	display:inline-block; margin-right:10px;
  }
  .modal_box2 .top p:nth-child(2){
	font-size:12px;
    text-align: center;
  }

  .modal_box2 .bottom {
    box-sizing: border-box;
    padding:10px;
  }

  .modal_box2 .bottom ul {
    height: 100%;
    overflow-y: scroll;
	overflow-x:visible;
	box-sizing:border-box;
  }

   .modal_box2 .bottom ul li {
    display:inline-block;
	font-size:13px;
	margin:6px 10px;
  }
  .modal_box2 .bottom ul li a{
    color:#979797;
	display:inline-block;
  }
  .modal_box2 .bottom ul li a:before{
    content:"#";
	display:inline-block;
	margin-right:5px;
	font-size:14px;
  }

  .modal_box2 .bottom ul li a:hover{
	transform:scale(1.1);
	color:#000;
	transition:0.3s;
  }


}
