@charset "utf-8";

.fc{color:#0072ff;}
.fcw{color:#fff !important}
.sfc{color:#555}
.fwt{font-weight: 100}
.bc{background-color:#0072ff;}
.bcw{background-color:#fff;}
*{margin:0; padding:0;
  box-sizing: border-box ;_letter-spacing: -1px; word-break: keep-all;_font-size: 13px;}
.wrap_in{width: 1200px;margin: 0 auto;position: relative;_height: 100%}
.wrap_in3{width: 1300px;margin: 0 auto;position: relative;_height: 100%}
.mw-1300 {min-width : 1300px; margin : auto; width : 100%}

.line_h{width: 40px; height: 4px; background: rgba(255,255,255,0.8);margin:20px 0;background-color: rgba(00,00,00,0.8)}
.line_v{height: 40px; width: 4px; background: rgba(255,255,255,0.8);margin:20px 0}

.op90{opacity:0.9}
.op80{opacity:0.8}
.op70{opacity:0.7}
.op60{opacity:0.6}
.op50{opacity:0.5}
.op40{opacity:0.4}
.op30{opacity:0.3}
.op20{opacity:0.2}
.op10{opacity:0.1}
.idfont{font-family: 'EB Garamond', serif;}


@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;
}
body{
    margin: 0;
    font-family: 'Noto Sans KR', sans-serif, '돋움';
    font-size: 16px;
    line-height: normal;
    color: #151515;
}
h1, h2, h3, h4, h5, h6, p, dl, dt, dd{
    margin: 0;
}
ul, ol, li{
    list-style: none;
    margin: 0;
    padding: 0;
}
img{
    vertical-align: top;
}
a{
    text-decoration: none;
}
input, button{
    padding: 0;
    vertical-align: top;
    font-family: 'Noto Sans KR', sans-serif, '돋움';
}

/*  clearfix  */
.cf:after{
    content: "";
    display: block;
    clear: both;
}
.fl{float: left}
ul,ol,li{list-style: none;}
a{color:black;text-decoration: none;vertical-align: top;}
input{vertical-align: top;}
button{vertical-align:top; cursor:pointer;}
select{vertical-align:top;}
.cf:after{display: block;content: "";clear: both;}
.fwb{font-weight: bold}
img{_display: block}


.op80{opacity: 80%;}
.op70{opacity: 70%}
.op60{opacity: 60%}
.op50{opacity: 50%}
.op40{opacity: 40%}
.op30{opacity: 30%}
.op20{opacity: 20%}
.op10{opacity: 10%}

.col_10{width:10%;}
.col_20{width:20%;}
.col_30{width:30%;}
.col_40{width:40%;}
.col_50{width:50%;}
.col_60{width:60%;}
.col_70{width:70%;}
.col_80{width:80%;}
.col_90{width:90%;}
.col_100{width:100%;}
.col_25{width:25%;}
.col_50{width:50%;}
.col_75{width:75%;}
.col_85{width:85%;}
.col_15{width:15%;}
.col_45{width:45%;}

.mb05{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px !important}
.mb50{margin-bottom:50px}
.mb60{margin-bottom:60px}
.mb70{margin-bottom:70px}
.mb80{margin-bottom:80px}
.mb90{margin-bottom:90px}
.mb100{margin-bottom:100px}
.mb150{margin-bottom:150px}

.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}
.mt60{margin-top:60px}
.mt70{margin-top:70px}
.mt80{margin-top:80px}
.mt90{margin-top:90px}
.mt100{margin-top:100px !important}
.mt130{margin-top:130px !important}

.ml30{margin-left: 30px}

.pt10{padding-top:10px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt40{padding-top:40px}
.pt50{padding-top:50px}
.pt60{padding-top:60px}
.pt70{padding-top:70px}
.pt80{padding-top:80px}
.pt90{padding-top:90px}
.pt100{padding-top:100px}

.pb10{padding-bottom:10px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb40{padding-bottom:40px}
.pb50{padding-bottom:50px}
.pb60{padding-bottom:60px}
.pb70{padding-bottom:70px}
.pb80{padding-bottom:80px}
.pb90{padding-bottom:90px}
.pb100{padding-bottom:100px}

.ht10{height:10px}
.ht20{height:20px}
.ht30{height:30px}
.ht40{height:40px}
.ht50{height:50px}
.ht60{height:60px}
.ht70{height:70px}
.ht80{height:80px}
.ht90{height:90px}
.ht100{height:100px}


.fs50{font-size:50px !important}
.fs45{font-size:45px !important}
.fs42{font-size:42px !important}
.fs36{font-size:36px !important}
.fs30{font-size:30px !important}
.fs32{font-size:32px !important}
.fs28{font-size:28px !important}
.fs26{font-size:26px !important}
.fs24{font-size:24px !important}
.fs20{font-size:20px !important}
.fs18{font-size:18px !important}
.fs16{font-size:16px !important}
.fs13{font-size:13px !important}

.ts{text-shadow: 1px 1px 1px #373737}
.line{position: relative; }
.line:before{content: "";width: 100%; height: 10px;background-color:#ffbc3a;display: inline-block;position:absolute;left: 0;bottom: 7px;z-index:-1}

.ju_button{  _background-color:white; color: #373737;padding: 12px 16px !important;border:1px solid #0072ff !important;border-radius: 5px; cursor: pointer;_width:100%;margin: 8px 0 !important; ;height: auto;line-height: normal; font-family: 'GmarketSansMedium';font-size: 16px;display: inline-block;background-color:transparent}
.ju_button:hover{transition: all 0.3s;background-color:#0072ff;color: white}

/*position 클래쓰*/
.pr{position:relative} /*부모에다가 pr를 넣어주고*/

.txy{position:absolute; left:50%;top:50%; transform:translate(-50%,-50%)} /*자식에게 미리 정의된 txy, tx, ty를 넣어주면, 매번 긴 css를 적어줄 필요가 없게죠?*/
.tx{position:absolute; left:50%; transform:translateX(-50%)}
.ty{position:absolute; top:50%; transform:translateY(-50%)}

/*  clearfix  */
.cf:after{display: block;content: "";clear: both;}
ul.cf li{float:left}
div.cf>div{float:left}

.fwb{font-weight: bold}
.fc{color:#0072ff;}             /*font-color*/
.bc{background-color:#0072ff;}  /*background-color 홈페이지별로 포인트 컬러(자주쓰는 컬러)를 미리 클래쓰화 시켜 놓습니다. 김대리의 최애 컬러는 봙은 블루인 #0072ff입니다.(자신이 좋아하는 컬러의 rgb를 외우는 것도 좋아요.)*/ 
.bcw{background-color:#fff;}    /*background-color:white 화이트는 정말 자주쓰는 색이라 클래쓰화 시켜 놓는것도 좋죠 */

.scale img {
 -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1); 
    -o-transform:scale(1);  
    transform:scale(1);
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s;
}
.scale:hover img {
  -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);   
    -o-transform:scale(1.2);
    transform:scale(1.2);
}




@media screen and (max-width: 768px) {
        /*클래쓰화 만들어 놓으면 반응형도 클래쓰를 집어 놓는다면 반응형 작업을 할때 다시 잡아 줄 필요가 없습니다.*/
        .fs36{font-size:30px !important}
		.fs28{font-size:24px !important}
        .fs24{font-size:20px !important}
        .fs18{font-size:16px !important}
        .fs16{font-size:14px !important}
}



















