@charset "utf-8";

@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;
}

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;500;600;700&display=swap');


.notosanskr * {
 font-family: 'Noto Sans KR', sans-serif;
}


* {
  margin: 0;
  padding: 0;
    font-family: 'GmarketSansMedium',sans-serif;
}

body {
  width: 100%;
  height: 100%;
  background: #4d4d4d;
  font-family:'GmarketSansMedium', 'Noto Sans KR' ,'Roboto Mono', '맑은고딕', Malgun Gothic, dotum, gulim, , monospace, sans-serif;
  overflow-x: hidden
}

ul,li{list-style:none;}
a, a:link, a:visited {
  text-decoration: none !important;
}


input[type="text"]::placeholder,
input[type="password"]::placeholder{color:#c6c6c6;}


input[type="text"]:focus,
input[type="password"]:focus{color:#ffffff; border-bottom:1px solid #fff!important; outline:none;}

input[type="text"],
input[type="password"]{color:#ffffff; border-bottom:1px solid #5f5f5f !important}


a{color:#fff}
a:linke{}
a:visited{}

fieldset input::-webkit-input-placeholder{ font-size:15px;color: #b8b8b8; font-weight:500}
fieldset input:-moz-placeholder{ font-size:15px;color: #b8b8b8; font-weight:500}
fieldset input:-moz-placeholder{ font-size:15px;color: #b8b8b8;font-weight:500 }
fieldset input:-ms-input-placeholder{ font-size:15px;color: #b8b8b8;font-weight:500 }

.wrap {
  width: 100%;
  height: 100%;
  /* background: url('../images/bg01.png')no-repeat center 0; */
  /* background-size: cover; */
  position: fixed;
}

.inwrap {
  width: 1280px;
  margin: 0 auto;
  position: relative;
  /* padding: 20px; */
}


/*common*/

/*header*/
.header{
    height: 130px;
    position: absolute;
    width: 100%;
    z-index: 110;
    display: flex;
}
.header .h_logo{
    position: absolute;
    top: 25px;
}
.header .h_logo>img{}



.header .smenu{ position: absolute; right: 0; top: 30px; }
.header .smenu>ul{ display: flex; align-items: center; }
.header .smenu>ul>li{ height: 100%; display: block; }
.header .smenu>ul>li>a{ font-size: 12px; position:relative; display: flex; align-items: center; }
.header .smenu>ul>li:first-child>a:before{display:none;}
.header .smenu>ul>li>a:before { display: inline-flex; content: ''; width: 1px; height: 13px; background: #ffffff6b; margin-right: 10px; align-items: center; margin-left: 10px; }

.header .h_tel{ position: absolute; right: 0; top: 30px;}
.header .h_tel>ul{ display: flex; align-items: center; }
.header .h_tel>ul>li{color:#fff;letter-spacing:1px;margin-left:10px;display: flex;align-items: center;font-size: 14px;}
.header .h_tel>ul>li:first-child:before{display:none;}
.header .h_tel>ul>li:before {/* display: inline-flex; */content: '';width: 1px;height: 15px;background: #ffffff3d;margin-right: 20px;margin-left: 10px;/* align-items: center; */}
.header .h_tel>ul>li>span{color: #ff7946;display:inline-block;margin-right: 10px;}


/*common*/
.container{
    position: relative;
    top: 0;
    height: calc(100% - 190px);
    width: 100%;
}

.container .content{
    width: 1280px;
    margin: 0 auto;
    position: relative;
}
.container .content .login_area{
    width: 320px;
    height: auto;
    background: #00000047;
    border-radius: 5px;
    padding: 30px;
    border: 1px solid #00000047;
    box-sizing: border-box;
    color: #fff;
    position: absolute;
    right: 0;
    z-index: 100;
    margin-top: 20vh;
}

.container .content .login_area .id_box{
    padding-bottom: 0;
    margin-bottom: 10px;
}
.container .content .login_area .id_box>input[type="text"]{
    background: none;
    border: none;
    color: #fff;
    font-family: 'GmarketSansMedium',sans-serif;
    height: 35px;
    width: 100%;
}
.container .content .login_area .pw_box{
    padding-bottom: 0;
}
.container .content .login_area .pw_box>input[type="password"]{
    background: none;
    color: #fff;
    border: 0px;
    height: 35px;
    width: 100%;
}
.container .content .login_area .id_save{
    padding: 10px 0;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.container .content .login_area .id_save>input[type="checkbox"]{margin-right:5px}
.container .content .login_area .btn_login{
    width: 100%;
    background: #616b83;
    color: #fff;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.container .content .login_area .btn_login:hover{background:#e94f16}
.container .content .login_area .action{
    display: flex;
    margin-top: 15px;
    justify-content: center;
    align-items: center;
}
.container .content .login_area .action>a{color:#fff;font-size: 13px;margin: 0 5px;height: 30px;display: inline-flex;align-items: center;position: relative;/* margin-top: -3px; */}
.container .content .login_area .action>a:hover{color:#ff936b}
.container .content .login_area .action .btn_join{}
.container .content .login_area .action .btn_idpw{
    margin-top: -3px;
}
.container .content .login_area .action .btn_idpw:before{display: inline-flex;content:'';width:1px;height: 13px;background: #ffffff6b;margin-right:10px;align-items: center;/* position: absolute; *//* top: 0; */}

.container .visual{width: 100%;height: 788px;}
.container .visual>ul{ width: 100%; }
.container .visual>ul>li{ width: 100%; }

.container .visual .slideing_box{position:relative;width: 100%;margin: 0 auto;}
.container .visual .slideing_box{height: 640px;width: 100%;}
.container .visual .slideing_box ul{display:flex;  width:100%; min-height:700px}
.container .visual .slideing_box ul li{height:100%;}
.container .visual .slideing_box ul>li div{width:100%; height:100%;}
.container .visual .slideing_box ul li div.visual01{background: #675145 url(../images/bg01.png) no-repeat center 0; background-size:cover }
.container .visual .slideing_box ul li div.visual01{background: #675145 url(../images/bg01.png) no-repeat center 0; background-size:cover }
.container .visual .slideing_box ul li div.visual02{background: #5a5e6b url(../images/bg02.png) no-repeat center 0; background-size:cover}
.container .visual .slideing_box ul li div.photo03{background: url('../images/visual_03.png') no-repeat center bottom; width:auto; height:474px;}



.container .visual .txt_area{
    color: #fff;
    width: 552px;
    height: 300px;
    position: absolute;
    z-index: 100;
    margin-top: 25vh;
}
.container .visual .txt_area>h3{
    font-size: 47px;
    font-family: 'roboto mono';
    line-height: 50px;
    text-shadow: 0 0 5px black;
}
.container .visual .txt_area>span{
    display: block;
    margin-top: 15px;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #e8e8e8;
    text-shadow: 0 0 5px black;
    /* font-family: 'noto sans kr'; */
}


.container .box{
    background: #ff612f;
    height: 150px;
    width: 100%;
    position: absolute;
    bottom: 0;
}
.container .box ul{
    display: flex;
    align-items: center;
    height: 100%;
    padding: 35px 0;
    box-sizing: border-box;
}
.container .box ul>li{
    width: calc(100%/3);
    display: flex;
    align-items: center;
    /* padding: 20px 0; */
    justify-content: center;
}
.container .box ul>li:nth-child(2){border-left:1px solid #a5381066;border-right:1px solid #a5381066;}
.container .box ul>li .icon02{background: #0000004a url(../images/icon02.png) no-repeat center center; }
.container .box ul>li .icon03{background: #0000004a url(../images/icon03.png) no-repeat center center; }
.container .box ul>li .icon01{ background: #0000004a url(../images/icon01.png) no-repeat center center; }
.container .box ul>li .icon01,
.container .box ul>li .icon02,
.container .box ul>li .icon03{
  width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    padding: 0px;
    box-sizing: border-box;
    background-size: 35px auto;}


.container .box ul>li .icon_ex{
    color: #ffe1d5;
    margin-left: 20px;
    font-size: 17px;
    letter-spacing: 0.5px;
    /* color: #fff; */
}
.container .box ul>li .icon_ex>span{
    font-style: normal;
    display: block;
    /* font-weight: 800; */
    color: #fff;
}
.container .box ul>li .icon_ex>span>em{
    font-style: normal;
    font-weight: 800;
    font-size: 23px;
    letter-spacing: 0;
}

.footer{
    height: 190px;
    background: #1c1f26;
    position: relative;
    /* display: flex; */
    padding-top: 20px;
    /* bottom: 0; */
    box-sizing: border-box;
}
.footer .f_info{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}
.footer .f_info .logo{
    display: flex;
    align-items: flex-start;
    padding-top: 20px;
}
.footer .f_info .logo > img{}
.footer .f_info .copy_box{
    display: flex;
    flex-direction: column;
    width: 600px;
    margin-left: 25px;
    margin-right: 45px;
}
.footer .f_info .copy_box .smenu{
    display: flex;
    margin-bottom: 2px;
    margin-top: 5px;
    align-items: center;
}
.footer .f_info .copy_box .smenu>ul{
    display: flex;
    align-items: center;
}
.footer .f_info .copy_box .smenu>ul>li{
    display: flex;
    align-items: center;
}
.footer .f_info .copy_box .smenu>ul>li:after{
    display: inline-block;
    content: '';
    width: 1px;
    height: 10px;
    background: #ffffff45;
    margin-left: 10px;
    margin-right:10px;
    /* height: 100%; */
    margin-top: 2px;
    }
.footer .f_info .copy_box .smenu>ul>li:last-child:after{display:none;}
.footer .f_info .copy_box .smenu>ul>li>a{
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}

.footer .f_info .copy_box .address{
    color: #fff;
    font-size: 11px;
    margin-top: 10px;
}
.footer .f_info .copy_box .address ul{}
.footer .f_info .copy_box .address>ul>li{
    font-size: 11px;
    color: #999;
}
.footer .f_info .copy_box .address>ul>li .bar{}
.footer .f_info .copy_box .address .copyright{
    padding-top: 10px;
    display: block;
    color: #999;
}
.footer .f_info .mark{
    /* padding-top: 50px; */
    position: absolute;
    right: 0;
}
.footer .f_info .mark .mark{}
.footer .f_info .mark .mark>img{}
.footer .f_info .mark .kisa{
    display: flex;
    width: 300px;
    align-items: center;
}
.footer .f_info .mark .kisa_mark{}
.footer .f_info .mark .kisa_mark>img{}
.footer .f_info .mark .kisa_right{
    width: 200px;
}
.footer .f_info .mark .kisa_right ul{}
.footer .f_info .mark .kisa_right>ul>li{
    color: #999;
    font-size: 11px;
}

.footer .site{
    right: 0;
    width: 150px;
    position: absolute;
    top: 10px;
    border: 1px solid #4a4a4a;
    color: #4a4a4a;
}
.footer .site  > select{
    border: 0px solid #999;
    padding: 10px;
    font-size: 12px;
    background: none;
    color: #a5a5a5;
    width: 95%;
}
.footer .site  > select >option{
    color: #000;
    background: #999;
    padding: 10px;
    height: 25px;
}



@media only screen and (max-width:450px) {

  .wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-y: auto;
  }

  .inwrap {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  /*header*/
  .header{
      height: 65px;
      position: absolute;
      width: 100%;
      z-index: 110;
      display: flex;
      background: #0000005e;
  }
  .header .h_logo{
      position: absolute;
      top: 5px;
      text-align:center;
      width: 100%;
      padding: 10px 0;
  }
  .header .h_logo> a >img{height: 35px;}



  .header .smenu{ position: absolute; right: 0; top: 30px; }
  .header .smenu>ul{ display: flex; align-items: center; }
  .header .smenu>ul>li{ height: 100%; display: block; }
  .header .smenu>ul>li>a{ font-size: 12px; position:relative; display: flex; align-items: center; }
  .header .smenu>ul>li:first-child>a:before{display:none;}
  .header .smenu>ul>li>a:before { display: inline-flex; content: ''; width: 1px; height: 13px; background: #ffffff6b; margin-right: 10px; align-items: center; margin-left: 10px; }

  .header .h_tel{position: absolute;left: 0;top: 65px;width: 100%;display: flex;align-items: center;justify-content: center;display: none;}
  .header .h_tel>ul{ display: flex; align-items: center; }
  .header .h_tel>ul>li{color:#fff;letter-spacing:1px;margin-left:10px;display: flex;align-items: center;font-size: 14px;}
  .header .h_tel>ul>li:first-child:before{display:none;}
  .header .h_tel>ul>li:before {/* display: inline-flex; */content: '';width: 1px;height: 15px;background: #ffffff3d;margin-right: 20px;margin-left: 10px;/* align-items: center; */}
  .header .h_tel>ul>li>span{color: #ff7946;display:inline-block;margin-right: 10px;}


  /*common*/
  .container{
      position: relative;
      top: 0;
      height: 780px;
      min-height: 670px;
      width: 100%;
      background: #545863;
  }
  .container > form{positon:relative;height:650px}

  .container .content{
      width: 100%;
      margin: 0 auto;
      position: absolute;
      height: 340px;
      background: linear-gradient(180deg, #53535300 0%, #595d69 5%, #545863 20%);
      /* background: #000; */
      z-index: 100;
      top: 330px;
      z-index: 12;
  }
  .container .content .login_area{
      top: 0;
      width: calc(100% - 30px);
      height: auto;
      background: #00000047;
      border-radius: 5px;
      padding: 30px;
      border: 1px solid #00000047;
      box-sizing: border-box;
      color: #fff;
      position: absolute;
      right: 0;
      z-index: 100;
      margin-top: 20vh;
      margin: 28px 15px 15px;
      box-sizing: border-box;
  }

  .container .content .login_area .id_box{
      padding-bottom: 0;
      margin-bottom: 10px;
  }
  .container .content .login_area .id_box>input[type="text"]{
      background: none;
      border: none;
      color: #fff;
      font-family: 'GmarketSansMedium',sans-serif;
      height: 35px;
      width: 100%;
      border-radius: 0px;
      font-size: 15px;
  }
  .container .content .login_area .pw_box{
      padding-bottom: 0;
  }
  .container .content .login_area .pw_box>input[type="password"]{
      background: none;
      color: #fff;
      border: 0px;
      height: 35px;
      width: 100%;
      border-radius: 0px;
      font-size: 15px;
  }
  .container .content .login_area .id_save{
      padding: 10px 0;
      font-size: 12px;
      display: flex;
      align-items: center;
  }
  .container .content .login_area .id_save>input[type="checkbox"]{margin-right:5px}
  .container .content .login_area .btn_login{
      width: 100%;
      background: #616b83;
      color: #fff;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
  }
  .container .content .login_area .btn_login:hover{background:#e94f16}
  .container .content .login_area .action{
      display: flex;
      margin-top: 15px;
      justify-content: center;
      align-items: center;
  }
  .container .content .login_area .action>a{color:#fff;font-size: 13px;margin: 0 5px;height: 30px;display: inline-flex;align-items: center;position: relative;font-size: 14px;/* margin-top: -3px; */}
  .container .content .login_area .action>a:hover{color:#ff936b}
  .container .content .login_area .action .btn_join{}
  .container .content .login_area .action .btn_idpw{
      margin-top: -3px;
  }
  .container .content .login_area .action .btn_idpw:before{display: inline-flex;content:'';width:1px;height: 13px;background: #ffffff6b;margin-right:10px;align-items: center;/* position: absolute; *//* top: 0; */}

  .container .visual{z-index: 10;width: 100%;height: 350px;position: absolute;top: 0;}
  .container .visual>ul{ width: 100%; }
  .container .visual>ul>li{ width: 100%; }

  .container .visual .slideing_box{position:relative;width: 100%;margin: 0 auto;}
  .container .visual .slideing_box{height: 100%;width: 100%;}
  .container .visual .slideing_box ul{display:flex;width:100%;min-height: 350px;}
  .container .visual .slideing_box ul li{height:100%;}
  .container .visual .slideing_box ul>li div{width:100%; height:100%;}
  .container .visual .slideing_box ul li div.visual01{background: #000000 url(../images/bg01.png) no-repeat center 0;background-size: 100% auto;}
  .container .visual .slideing_box ul li div.visual01{background: url(../images/bg01.png) no-repeat center 0;background-size: 150% auto;}
  .container .visual .slideing_box ul li div.visual02{background: url(../images/bg02.png) no-repeat center 0;background-size: 150% auto;}
  .container .visual .slideing_box ul li div.photo03{background: url('../images/visual_03.png') no-repeat center bottom; width:auto; height:474px;}



  .container .visual .txt_area{
      color: #fff;
      width: 100%;
      height: 350px;
      position: absolute;
      z-index: 100;
      /* padding-top: 100px; */
      top: -100px;
  }
  .container .visual .txt_area>h3{
      font-size: 30px;
      font-family: 'roboto mono';
      line-height: 33px;
      text-shadow: 0 0 5px black;
      padding: 15px 15px 0;
      text-align: center;
      letter-spacing: -1px;
  }
  .container .visual .txt_area>span{
      display: block;
      margin-top: 0;
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.5px;
      color: #e8e8e8;
      text-shadow: 0 0 5px black;
      /* font-family: 'noto sans kr'; */
      padding: 15px;
  }


  .container .box{
      background: #ff612f;
      height: 130px;
      width: 100%;
      position: relative;
      /* bottom: 0; */
      z-index: 10000;
      /* top: 30px; */
  }
  .container .box ul{
      display: flex;
      align-items: center;
      height: 100%;
      padding: 15px 0;
      box-sizing: border-box;
  }
  .container .box ul>li{
      width: 100%;
      display: flex;
      align-items: center;
      /* padding: 20px 0; */
      justify-content: center;
      flex-direction: column;
  }
  .container .box ul>li:nth-child(2){border-left: 1px solid #a5381066;border-right: 1px solid #a5381066;}
  .container .box ul>li .icon02{background: #0000004a url(../images/icon02.png) no-repeat center center; background-size: 25px 25px !important;}
  .container .box ul>li .icon03{background: #0000004a url(../images/icon03.png) no-repeat center center; background-size: 25px 25px !important;}
  .container .box ul>li .icon01{background: #0000004a url(../images/icon01.png) no-repeat center center; background-size: 30px 30px !important;}
  .container .box ul>li .icon01,
  .container .box ul>li .icon02,
  .container .box ul>li .icon03{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    padding: 0px;
    box-sizing: border-box;
    background-size: 35px auto;
    margin-bottom: 10px;

    }


  .container .box ul>li .icon_ex{
      color: #ffe1d5;
      margin-left: 0;
      font-size: 12px;
      letter-spacing: 0.5px;
      /* color: #fff; */
      text-align: center;
  }
  .container .box ul>li .icon_ex>span{
      font-style: normal;
      display: block;
      /* font-weight: 800; */
      color: #fff;
      margin-top: 1px;
  }
  .container .box ul>li .icon_ex>span>em{
      font-style: normal;
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 0;
      margin-right: 3px;
  }

  .footer{
      height: 230px;
      background: #1c1f26;
      position: relative;
      /* display: flex; */
      padding-top: 20px;
      /* bottom: 0; */
      box-sizing: border-box;
      padding-bottom: 20px;
  }
  .footer .f_info{
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
  }
  .footer .f_info .logo{
      display: flex;
      align-items: flex-start;
      padding-top: 0;
      margin-left: 15px;
  }
  .footer .f_info .logo > img{
      height: 35px;
  }
  .footer .f_info .copy_box{
      display: flex;
      flex-direction: column;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 0;
      position: relative;
      border-top: 1px solid #555454;
      margin-top: 10px;
  }
  .footer .f_info .copy_box .smenu{
      display: flex;
      margin-bottom: 2px;
      margin-top: 5px;
      align-items: center;
      position: absolute;
      top: -40px;
      left: 70px;
  }
  .footer .f_info .copy_box .smenu>ul{
      display: flex;
      align-items: center;
  }
  .footer .f_info .copy_box .smenu>ul>li{
      display: flex;
      align-items: center;
  }
  .footer .f_info .copy_box .smenu>ul>li:after{
      display: inline-block;
      content: '';
      width: 1px;
      height: 10px;
      background: #ffffff45;
      margin-left: 10px;
      margin-right:10px;
      /* height: 100%; */
      margin-top: 2px;
      }
  .footer .f_info .copy_box .smenu>ul>li:last-child:after{display:none;}
  .footer .f_info .copy_box .smenu>ul>li>a{
      font-size: 12px;
      display: inline-flex;
      align-items: center;
  }

  .footer .f_info .copy_box .address{
      color: #fff;
      font-size: 11px;
      margin-top: 10px;
  }
  .footer .f_info .copy_box .address ul{}
  .footer .f_info .copy_box .address>ul>li{
      font-size: 11px;
      color: #999;
  }
  .footer .f_info .copy_box .address>ul>li .bar{}
  .footer .f_info .copy_box .address .copyright{
      padding-top: 10px;
      display: block;
      color: #999;
  }
  .footer .f_info .mark{
      /* padding-top: 50px; */
  }
  .footer .f_info .mark .mark{}
  .footer .f_info .mark .mark>img{}
  .footer .f_info .mark .kisa{
      display: flex;
      width: 300px;
      align-items: center;
      display: none;
  }
  .footer .f_info .mark .kisa_mark{}
  .footer .f_info .mark .kisa_mark>img{}
  .footer .f_info .mark .kisa_right{
      width: 200px;
  }
  .footer .f_info .mark .kisa_right ul{}
  .footer .f_info .mark .kisa_right>ul>li{
      color: #999;
      font-size: 11px;
  }

  .footer .site{
      right: 0;
      width: 150px;
      position: absolute;
      top: 10px;
      border: 1px solid #4a4a4a;
      color: #4a4a4a;
      display: none;
  }
  .footer .site  > select{
      border: 0px solid #999;
      padding: 10px;
      font-size: 12px;
      background: none;
      color: #a5a5a5;
      width: 95%;
  }
  .footer .site  > select >option{
      color: #000;
      background: #999;
      padding: 10px;
      height: 25px;
  }


  .bx-wrapper .bx-controls-direction{display:none;}
  .bx-wrapper .bx-pager{
      margin-left: -22px !important;
      bottom: 30px !important;
  }

}