@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: 18px;}
.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; */
}
.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;
}