@import url('http://fonts.googleapis.com/earlyaccess/kopubbatang.css'); /*font-family: 'KoPub Batang', serif;*/
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css'); /*font-family: 'Noto Sans KR', sans-serif;*/
@import url('http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css'); /*font-family: 'Jeju Myeongjo', serif;*/
@import url('http://fonts.googleapis.com/earlyaccess/jejugothic.css');  /*font-family: 'Jeju Gothic', serif;*/



* { box-sizing: border-box; }


body {font-family: 'Noto Sans KR', sans-serif;}


/* ---- button---- */
.button-group {width:1400px;margin:60px auto 0;text-align:center;display:none;}
.button-group .button {font-family: 'Noto Sans KR', sans-serif;margin-right:10px;text-align:center;font-size:20px;width:130px;padding:10px;cursor: pointer;border:2px solid rgba(0,0,0,.1);}
.button-group .button:active, .button.is-checked, .button-group .button:hover {background:#009cff;color:#fff;box-shadow:5px 5px rgba(0,0,0,.1);}




/* ---- isotope ---- */

.PMgrid {width:1380px;margin:0 auto 100px;}
.PMgrid:after {content: '';display: block;clear: both;}

/* ---- .element-item ---- */
.element-item {position: relative;float: left;width:440px;height:350px;margin:50px 10px 0;background:#fff;color: #262524;}

/* .element-item .name {position: absolute;left: 10px;top: 60px;text-transform: none;letter-spacing: 0;font-size: 12px;font-weight: normal;}
.element-item .symbol {position: absolute;left: 10px;top: 0px;font-size: 42px;font-weight: bold;color: white;
.element-item .number {position: absolute;right: 8px;top: 5px;}

.element-item .weight {position: absolute;left: 10px;top: 76px;font-size: 12px;}

.element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element-item.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
.element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); } */


.main_post{position:relative;}

/*이미지*/
.T_top3_img {position:relative;width:100%;height:350px;overflow:hidden;}
.T_top3_img img {min-width:440px;max-width:700px !important;height:auto;}
/*.T_top3_img img {position:absolute;min-width:460px;max-width:700px !important;height:auto;} */



/*롤오버*/
.snip1273 {position:relative;color:#fff;background:#000;}
.snip1273 * {-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.4s ease-in;transition:all 0.4s ease-in;}
.snip1273 figcaption {position:absolute; top:0;right:0;width:100%;height:100%;z-index:1;opacity:0;text-align:center;}
.snip1273 figcaption:before,.snip1273 figcaption:after {width:1px;height:0;}
.snip1273 figcaption:before {right:0;top:0;}
.snip1273 figcaption:after {left:0;bottom:0;}

/*롤오버시 나타나는 텍스트 css*/
.snip1273 figcaption h3 {font-weight:700;font-size:20px;}
.snip1273 figcaption p {font-size:14px;font-weight:500;width:70%;margin:15px auto 0;word-break:break-all;border-top:1px solid #fff;padding-top:10px;}
.snip1273 figcaption a {position:absolute;top:0;bottom:0;right:0;left:0;}
.snip1273 figcaption .btn_branch {width:100px;padding:5px 0;border:1px solid #fff;margin:60px auto 20px;}
.snip1273 figcaption span {display:inline-block;color:#13bbf0;font-size:20px;margin-top:20px;}
.snip1273 figcaption span img {opacity:1 !important;margin-left:8px;}

/*나타나는 선*/
.snip1273:before,.snip1273:after,.snip1273 figcaption:before,.snip1273 figcaption:after {position:absolute;content:'';background:#223357;z-index:1;-webkit-transition:all 0.4s ease-in;transition:all 0.4s ease-in;opacity:1;}
.snip1273:before,.snip1273:after {height:50px;width:0%;}
.snip1273:before {top:0;left:0;}
.snip1273:after {bottom:0;right:0;}

.snip1273:hover img,.snip1273.hover img {opacity:0.4;}
.snip1273:hover div.base_txt,.snip1273.hover div.base_txt {opacity:0;}
.base_txt {position:absolute;top:240px;z-index:8;left:50px;width:390px;}
.base_txt .btn_branch {position:relative;color:#fff;text-align:center;background:#222;width:100px;padding:5px 0;margin-bottom:10px;}
.base_txt h3 {text-align:left;font-size:20px;text-shadow:0px 0px 8px rgba(0,0,0,.8);}
.base_bg {position:absolute;top:0;bottom:0;right:0;left:0;background:rgba(51,56,65,.1);z-index:1}

.snip1273:hover figcaption,.snip1273.hover figcaption {opacity:1;}
.snip1273:hover figcaption:before,.snip1273.hover figcaption:before,.snip1273:hover figcaption:after,.snip1273.hover figcaption:after {height:100%;}
.snip1273:hover:before,.snip1273.hover:before,.snip1273:hover:after,.snip1273.hover:after {width:100%;}
.snip1273:hover:before,.snip1273.hover:before,.snip1273:hover:after,.snip1273.hover:after,.snip1273:hover figcaption:before,.snip1273.hover figcaption:before,.snip1273:hover figcaption:after,.snip1273.hover figcaption:after {opacity:0.1;}