* { box-sizing: border-box; }

/* font-family: 'Adamina', serif;
font-family: 'Noto Serif KR', serif; */

/* force scrollbar */
html { overflow-y: scroll; }
a,span{display: block}

header{width: 100%;height: 120px;border-bottom: 1px solid #ccc;font-family: 'Adamina', serif;position: relative;}
.header_wrap{width: 1100px;height: 100%;margin: auto;position: relative;z-index: 100;background: #fff}
.header_logo{position: absolute;transform: translateY(-50%);left: 0;top: 50%;width: 225px;height: 40px;background: url(../04_08/img/logo_tngt.png)}
.header_logo a{width: 100%;height: 100%;}

.header_nav{position: absolute;transform: translateY(-50%);right: 0;top: 50%;}
.header_nav li{float: left;margin-left: 24px;font-size: 16px;padding: 0 8px;padding-bottom: 8px;height: 33px}
.header_hover:hover{border-bottom: 4px solid #000;text-align: center}

.header_login{float: right;padding-top: 16px}
.header_login li{float: left;color: #aaa;font-size: 12px}

.header_open_nav{width: 100%;height: 180px;padding: 16px;position: absolute;left: 0;top: 100%;z-index: 10;background: #fff;display: none}
.header_in_wrap{width: 1100px;margin: auto;position: relative;}

.header_top_nav{position: absolute;width: 100%;left: 0;top:0;display: none}
.header_top_nav.on{display: block}

.header_in_tit{float: left;}
.header_in_tit li{padding-bottom: 12px;font-size: 16px;font-weight: bold}

.header_in_img{float: right;}
.header_in_img li{float: left;}
.header_in_img li:nth-child(2){padding-left: 24px}
/* ---- header ---- */

.slide_banner{width: 100%;}
.slide_container{width: 100%;overflow: hidden;position: relative;}
.slide_wrap{display: flex}
.slide{width: 100%;overflow: hidden;}
.slide img{width: 100%}

.slide_arrow{position: absolute;transform: translateY(-50%);top: 50%;background-image: url(../04_08/img/icon_visual_arrows.png);background-repeat: no-repeat;width: 30px;height: 59px;cursor: pointer;}
.slide_prev_arrow{background-position: 0 0;left: 10%}
.slide_next_arrow{background-position: -30px 0;right: 10%}
/* ---- isotope ---- */

.grid_nav,.grid {max-width: 1200px;margin: auto;overflow: hidden;}
.grid{height: 1200px}
.grid_nav li{width: 25%;font-size: .8vw;float: left;padding: 20px 0;text-align: center;cursor: pointer}
.grid_nav li:hover{color: orange}
/* clear fix */
.grid:after {content: '';display: block;clear: both;}

/* ---- .grid-item ---- */

.grid .grid-sizer,
.grid .grid-item {width: 25%;overflow: hidden;float: left;position: relative;}

.grid .grid-item span{position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.5);left: 0;top: 100%;color: #fff;text-align: center;transition: all .5s ease;font-family:'Adamina', serif;font-family: 'Noto Serif KR', serif;font-size: 24px}
.grid .grid-item:hover span{top: 0}
.grid .grid-item--width2{width: 50%;}
.grid .grid-item img{display: block;max-width: 100%;}

.sns_wrap{width: 1000px;margin: auto;margin-top: 80px}
.sns_tit{text-align: center;}
.sns_link{overflow: hidden;margin: 30px 0;text-align: center}
.sns_icon{width: 76px;height: 76px;background-image: url(../04_08/img/icon_sns.png);display:inline-block;margin:0 16px;cursor: pointer;}
.sns_link .all{background-position: -76px 0}
.sns_link .face{background-position: 0px 0}
.sns_link .instar{background-position: -152px 0}

.grid_2 .grid-sizer,.grid_2 .grid-item{width: 18%;overflow: hidden;float: left;position: relative;}
.grid_2 .grid-item {margin-bottom: 14px;}
.grid_2 .grid-item::after{content: '';z-index: 100;position: absolute;left: 10px;top: 10px;width: 50px;height: 50px;background: url(../04_08/img/icon_main_sns_small.png)}
.grid_2 .grid-item img{display: block;max-width: 100%;}

.grid_2 .face::after{background-position: 0 0}
.grid_2 .instar::after{background-position: -100px 0}

footer{border-top: 1px solid #aaa;padding-top: 40px;height: 300px;margin-top: 40px}
.footer_wrap{width: 1200px;margin: auto;text-align: center}
ul.footer_login li{margin: 0 16px;padding: 10px;border: 1px solid #666;width: 180px;display: inline-block;color: #777}
ul.footer_login li:hover{background: #000;color: #ccc}
.copyright{padding: 40px 0;font-weight: bold}

.footer_nav{margin: auto;display: block;width: 220px;cursor: pointer;position: relative;}
.footer_nav li{padding: 10px}
.footer_nav> li{background: #000;color: #fff;text-align: center}
.footer_nav> li::after{content: '';background: url(../04_08/img/icon_arrow_open_whtie_xsmall.png);width: 10px;height: 5px;position: absolute;left: 90%;top: 45%;transition: all .3s ease}
.footer_nav li ul{display: none;position: absolute;background: #333;width: 100%;left: 0;bottom: 100%;transition: all .5s ease;text-indent: 10px;text-align: left}
.footer_nav> li:hover ul{display: block}
.footer_nav> li:hover::after{transform: rotate(180deg)}

@media only screen and (max-width:500px){
.grid-sizer,.grid-item {width: 100%;}
.grid-item img {display: block;margin: auto;max-width: 100%;}
}