@charset "utf-8";
@import url('http://fonts.googleapis.com/earlyaccess/notosanssc.css');
@import url('https://fonts.googleapis.com/css?family=Rajdhani');
@import url('http://fonts.googleapis.com/earlyaccess/nanumpenscript.css');
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent}
body {font-size:14px; font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif; color:#363636;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
caption, legend {visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content:none}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none}
a:hover{text-decoration:none}

ins {background-color:#ff9; color: #000; text-decoration:none}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold}
del {text-decoration:line-through}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help}
table {border-collapse:collapse; border-spacing:0}
hr {display:block; height:1px; border:0; border-top: 1px solid #cccccc; margin:1em 0; padding:0}
input, select {vertical-align:middle}

/* skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:9999; width:100%; height:1px; margin-top:-1px; display:block; background-color:#3875c1; font-size:14px; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden}
#skipToContent a:focus, #skipToContent a:active {margin-top:0; height:auto; padding:10px 0px}

/* common */
#wrap {}
.auto {margin:0 auto}
.width100 {width:100% !important}
.overflow {overflow:hidden}
.float-left {float:left}
.float-right {float:right}
.mt10 {margin-top:10px !important}
.mt20 {margin-top:20px !important}
.mt30 {margin-top:30px !important}
.mt40 {margin-top:40px !important}
.mt50 {margin-top:50px !important}
.mt60 {margin-top:60px !important}
.mt70 {margin-top:70px !important}
.mt80 {margin-top:80px !important}
.mt90 {margin-top:90px !important}
.mt100 {margin-top:100px !important}
.mt110 {margin-top:110px !important}
.text-center{text-align:center}

/* header */
header {width:100%; position:relative}
header.header2 {background:#000}
header.header1 section {max-width:1920px; box-sizing:border-box; margin:0 auto; position:relative; padding:35px 60px 0 60px; overflow:hidden; height:100px}
header.header2 section {max-width:1920px; box-sizing:border-box; margin:0 auto; position:relative; padding:20px 60px; overflow:hidden; height:60px}
header section .btnMenu {z-index:99; color:#a1a1a1; font-size:26px; position:absolute; top:40px; left:60px;}
header.header2 section .btnMenu {top:20px}
header section .ico_side {vertical-align:top;font-size:16px;color:#a1a1a1; font-weight:400; margin-left:15px; font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif;line-height:25px}
header section .logo {margin:0 auto}
header section .sns {position:absolute; top:35px; right:35px}
header.header2 section .sns {top:15px}
header section .sns li {float:left; margin-left:10px}

/* allWrap */
.allWrap{position:fixed;left:-250px;top:0;width:100%;height:100%;overflow:hidden;display:none;z-index:99}
.all-menu .close {position:absolute; top:40px; left:60px; font-size:16px; line-height:28px; opacity:0.4; font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic',sans-serif;font-weight:400;}
.all-menu .close:hover, .all-menu .close:focus {opacity:0.7}
.all-menu .close:before {content:""; display:block; width:30px; height:30px; background-image:url('../images/btn_close.png'); background-position:0 0; background-size:30px 30px; float:left; margin-right:10px}
.all-menu {font-size:14px; width:380px; height:100%; background-color:#fff; position:relative; z-index:3; overflow:auto; padding:0 40px}
.all-menu a.link-h {display:block; position:absolute; top:11px; right:15px}
.all-menu a.link-h,div.all-menu a.link-h img {height:28px}
.all-menu ul.gnb {margin-top:150px}
.all-menu ul.gnb > li {background-color:#fff}
.all-menu ul.gnb > li > a {height:40px; line-height:40px; display:block; color:#959595; text-indent:15px; background-size:12px; padding-left:10px; font-size:18px}
.all-menu ul.gnb > li > a:hover {color:#0c93f9; text-decoration:none}
.all-menu ul.gnb > li.on > a {background:url('../images/ico_d2on.png') no-repeat 0% 50%; color:#0c93f9; font-weight:500}
.all-menu .emblem {margin-top:150px; padding-left:25px}
#mask {position:absolute; z-index:1; background:url("../images/opa_bg.png") repeat 0 0; display:none; left:0; top:0; width:100%; height:100%; overflow:hidden}

/* mainTxt */
#mainTxt {width:100%; position:relative}
#mainTxt section {max-width:1920px; box-sizing:border-box; margin:0 auto; position:relative; overflow:hidden; text-align:center; padding:10px 0}
#mainTxt section h2 {font-size:21px; font-weight:700; margin-top:60px}
#mainTxt section h3 {font-size:20px; font-weight:300; margin-top:15px; color:#949393}

/* mainVisual */
#mainVisual {width:100%; position:relative; margin-top:60px}
#mainVisual section {max-width:1920px; box-sizing:border-box; margin:0 auto; position:relative; overflow:hidden; text-align:center}
#mainVisual section > a .conTxt {position:absolute; width:100%; height:100%; z-index:999; top:0; left:0; font-size:24px;}
#mainVisual section > a .conTxt td {vertical-align:middle; padding:0 1%; font-weight:700; color:#fff}
.gallery-item {width:20%; position:relative; overflow:hidden; display:block; float:left; z-index:10}
.gallery-item img {position:relative; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); -webkit-transition:0.9s; -o-transition:0.9s; transition:0.9s}
.gallery-item .overlay {position:absolute; right:0; left:0; bottom:0; top:0; z-index:11; vertical-align:middle;-webkit-transition:0.5s; -o-transition:0.5s; transition:0.5s; text-align:center; overflow:hidden}
.gallery-item .overlay:hover:before {content:''; position:absolute; z-index:1; top:0; left:0; bottom:0; right:0; background:rgba(0, 0, 0, 0.5)}
/*.gallery-item .overlay:hover h4 {opacity:1 !important}*/
.gallery-item:hover img {-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1)}
.gallery-item:hover .overlay {visibility:visible; opacity:1}
.fh5co-gallery .gallery-item:hover .overlay:before {content:''; position:absolute; z-index:1; top:0; left:0; bottom:0; right:0; background: rgba(0, 0, 0, 0.5)}

/* footer */
footer {width:100%; position:relative}
footer section {max-width:1920px; box-sizing:border-box; margin:0 auto; position:relative; overflow:hidden; text-align:center; padding:35px 0; letter-spacing:0; font-family:'Arial', 'Helvetica Neue', 'Helvetica', sans-serif; font-weight:normal; color:#c7c7c7}

/* subTxt */
#subTxt {width:100%; position:relative}
#subTxt section {max-width:1920px; box-sizing:border-box; margin:0 auto; position:relative; overflow:hidden; text-align:center; padding:100px 10px 100px 10px}
#subTxt section h2 {font-size:48px; font-weight:600}
#subTxt section h3 {font-size:18px; font-weight:300; margin-top:20px; color:#949393;letter-spacing:-0.002em;line-height:28px}

/* container */
#container {width:100%; position:relative}
#container.con01{width:80%;max-width:1440px;box-sizing:border-box; margin:0 auto; position:relative;}
#container.con01 h4{font-size:24px; line-height:30px; font-weight:400;text-align:left;margin:100px 0 60px 0}
#container.con01 h5{font-size:16px; line-height:28px; font-weight:400;text-align:left;margin:0px 0 13% 15%}
#container.con02 {background:#ececec}
#container section {max-width:1920px; box-sizing:border-box; margin:0 auto; position:relative; text-align:center; overflow:hidden}
#container.con02 section {overflow:inherit; padding:90px 0}
#container.con03 {background:#363636;padding:0 margin:0}
#container.con04 {max-width:1920px;box-sizing:border-box;width:90%;margin:0 auto; position:relative; text-align:center; overflow:hidden;}
#container.con05 {max-width:1680px;margin:0 auto; padding:0 }
#container.con04_sub section {max-width:1920px;box-sizing:border-box; width:100%; margin:0 auto; position:relative; text-align:center; overflow:hidden;}
#container section h4 {font-size:24px; line-height:30px; font-weight:400}
#container section h5 {font-size:18px; line-height:26px; font-weight:400; color:#636363}
#container section h6 {font-size:14px; line-height:24px; font-weight:300; color:#707070}
.btn01 {border:2px solid #0d0d0d; padding:10px; display:inline-block; font-size:18px; color:#0d0d0d; font-weight:400; width:100%; max-width:210px; text-align:center}
.btn01:hover {background:#0d0d0d; color:#fff}
.book {position:absolute; top:-16px; left:55%}
.book-hidden {display:none}
#container.con04_sub section .kidbtn01{z-index:100;position: absolute;top:-100;right:0}
#container.con05bg {background:#4482c3}

.emblem{width:55%}
.emblemtxt{width:45%}
.emblemtxt img{padding:0px 0 15% 15%}

.emblem_con{width:50%;margin:0 auto;}
.emblem_contxt{width:100%;text-align:center;margin:0 auto;padding:50px 0 80px 0;font-size:18px;line-height:30px}

.ict{width:50%; padding-right:20px;text-align:right}
.ictbook{width:50%; padding:20px}

/* project-item */
.project-year{width:25%; position:relative; overflow:hidden; display:block; float:left; z-index:10}
.project-item {width:12.5%; position:relative; overflow:hidden; display:block; float:left; z-index:10;}
.project-item img {position:relative; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); -webkit-transition:0.9s; -o-transition:0.9s; transition:0.9s}
.project-item .overlay {position:absolute; right:0; left:0; bottom:0; top:0; z-index:11; vertical-align:middle;-webkit-transition:0.5s; -o-transition:0.5s; transition:0.5s; text-align:center; overflow:hidden; color:#fff;}
.project-item .overlay:hover:before {content:''; position:absolute; z-index:1; top:0; left:0; bottom:0; right:0; background:rgba(0, 0, 0, 0.5)}
.project-item:hover img {-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);}
.project-item:hover .overlay {visibility:visible; opacity:1}
.project-item:hover .overlay:before {content:''; position:absolute; z-index:1; top:0; left:0; bottom:0; right:0; background: rgba(4, 12, 22, 0.5)}
.project-item .conTxt{position:absolute; width:100%;  z-index:999; top:45%; left:0; font-size:14px;}
.project-item .conTxt td {vertical-align:middle; padding:0 10px; font-weight:400;}
.project-item .conTxt td > span {display:block;}
.project-item .trans{opacity:0; trasition:all 0.3s ease;}
.project-item .trans:hover{opacity:1}

.project-item .conTxt02 {position:absolute; width:100%;  z-index:999; top:40%; left:0; font-size:14px}
.project-item .conTxt02 td {vertical-align:middle; padding:0 10px; font-weight:400;}
.project-item02{width:12.5%; position:relative; overflow:hidden; display:block; float:left; z-index:10}
.vimeoWrap{
     position: relative;
    padding-bottom: 54.00%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    margin: 0;
  }
.vimeoWrap iframe,
.vimeoWrap object,
.vimeoWrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.pjc01{color:#33ffff}
.pjc02{color:#ff9fef}
.pjc03{color:#cdf72e}
.pjc04{color:#ff7d18}

.btn04{border:2px solid #000; padding:10px; display:inline-block; font-size:18px; color:#000; font-weight:400; width:313px; text-align:center;line-height:40px}
.btn04:hover {background:#000; color:#fff}

#section--timeline {padding:0 !important;background:#363636}
.slider--timeline .slick-next {right:-5% !important; display:none !important}
.slider--timeline .slick-prev {left:-5% !important; display:none !important}
.slider--timeline .slick-prev, .slider--timeline .slick-next {top:50% !important;}
.slick-prev {background:url("../images/hisArr_left.png") no-repeat !important; width:34px !important; height:56px !important}
.slick-next {background:url("../images/hisArr_right.png") no-repeat !important; width:34px !important; height:56px !important}
.timeline-years__year:first-child {font-size:24px !important}
.timeline-years__year:last-child {font-size:24px !important}
.max-width-4 {max-width:1140px !important}
.slide__year h2 {display:none; margin-bottom:30px; color:#ff6005}
.timeline-years__year:hover, .timeline-years__year.active {color: #ff6005 !important;}
.timeline-years__year {font-weight:500;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important}
.bx-wrapper .bx-prev {background:url("../images/hisArr_left.png") no-repeat !important; width:34px !important; height:56px !important; left:-8% !important;}
.bx-wrapper .bx-next {background:url("../images/hisArr_right.png") no-repeat !important; width:34px !important; height:56px !important; right:-8% !important;}
.slick-list {overflow:inherit !important}
.bx-wrapper .bx-pager {position:relative !important; bottom:0 !important;background:#363636}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {background:#fff !important}
.bxslider {background:#363636}
.bxslider li{background:#363636}

.modal-header .close {margin-top:0px; margin-bottom:10px}
.modal-footer {border-top:none}
.modal-dialog  {width:900px}

/* 40개의 연구성과 */
.mContentvisual {padding:0;margin:0}
.mContentWrap {padding:40px 20px}
.con04_sub h2 {font-size:34px; font-weight:500; text-align:center;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important;margin:0 0 30px 0}
.con04_sub h3 {font-size:30px; font-weight:400; text-align:center;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important}
.con04_sub h4 {font-size:18px; font-weight:400; text-align:center;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important;margin:30px 0 20px 0}
.con04_sub h4 span{font-weight:600; text-align:center}
.mHistory {text-align:left; margin:5% 0 10% 0}
.mHistory dt {font-weight:600;font-size:1.1em}
.mHistory dd {font-weight:400; margin-bottom:10px}
.childBtn {display:inline-block; text-align:center; padding:10px 20px; color:#fff; background:#0c93f9; border-radius:8px; margin-top:20px; font-weight:600; font-size:14px}
.childBtn:hover {color:#fff; opacity:0.8}


/* 숫자로보는 20년*/
.sub05Map {position:relative}
.layerhide {display:none}
.layerhide > div {position:relative}
.on1 {position:absolute; top:150px; left:70px}
.on1 > div .layerClose {position:absolute; bottom:80px; right:40px}
.on2 {position:absolute; top:80px; right:170px}
.on2 > div .layerClose {position:absolute; bottom:60px; left:10px}
.on3 {position:absolute; top:320px; right:120px}
.on3 > div .layerClose {position:absolute; bottom:30px; right:25px}
.on4 {position:absolute; top:590px; right:120px}
.on4 > div .layerClose {position:absolute; bottom:80px; right:40px}
.on5 {position:absolute; top:530px; right:360px}
.on5 > div .layerClose {position:absolute; bottom:60px; left:10px}
.on6 {position:absolute; top:600px; left:370px}
.on6 > div .layerClose {position:absolute; bottom:50px; left:0px}
.on7 {position:absolute; top:600px; left:90px}
.on7 > div .layerClose {position:absolute; bottom:40px; left:0px}

/*.mcon05{background:#4482c3}*/
.mcon05{width:100%;float:left;background:url("../images/05_m_bg.jpg") no-repeat center top;background-size:cover;padding:10% 8%;position:relative; overflow:hidden;}
.mcon05 h2{clear:both;font-size:22px; font-weight:500; color:#fff;text-align:left;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important;margin:5% 0 8% 0}
.mcon05 h3{font-size:18px; font-weight:400; color:#fff;text-align:left;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important;}
.mcon05 h4{font-size:14px; font-weight:400; color:#fff;text-align:left;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important;margin:0 0 30px 0}
.mdata01{font-size:3.8em; font-weight:bold; color:#fff;text-align:left;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important;margin:0 0 5% 0}
.mdata01 span{font-size:16px;font-weight:normal;}

/*.mnum_list{float:left; margin:5% 0 5% 0;text-align:left;border:1px solid red;}
.mnum_list li{list-style:none;float:left; display:block;}*/
.mdata_box{float:left; width:100%;margin:0 0 15% 0; display:block;}
.mdata_box02{float:left; width:100%;margin:0 0 5% 0; display:block;}

.mdata02 {float:left; margin:5% 0 5% 0;display:block;}
.mdata02 li{width:100%;list-style:none;float:left; display:block;font-size:14px; font-weight:400; color:#fff;text-align:left;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important;margin:0 10% 0 10%;}
.mdata02 li span{font-size:2.5em;font-weight:bold;}
.mdata03 li{width:100%;list-style:none;float:left; display:block;font-size:14px; font-weight:400; color:#fff;text-align:left;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important;margin:2% 0 0 4%;}
.mdata03 li span{font-size:2.5em;font-weight:bold;}

.mcon05_icon01{clear:both;width:100%;margin:5% 0 8% 0;}
.mcon05_icon02{clear:both;width:100%;margin:10% 0 8% 0;}
.mcon_ps{width:100%;margin:0 0 15% 0;font-size:14px;font-weight:400; color:#fff;text-align:left;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important;}
.mdata_box03{width:100%;float:left; margin:5% 0 5% 0;display:block;}
.mdata_box04{width:20%;list-style:none;float:left; display:block;font-size:14px; font-weight:400; color:#fff;text-align:left;font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', 'AppleGothic', sans-serif !important;margin:5% 10% 0 5%;}
.mdata_box04 span{font-size:3.8em;font-weight:bold;}
/* 사진으로 보는 ETRI 40년 */
#container.con03New {padding:0; background:#363636}
#container.con03New section {max-width:1280px; margin:0 auto; background:#363636}
.historyTab {overflow:hidden; margin-bottom:70px}
.historyTab li a {display:block; float:left; width:16.66%; text-align:center; color:#c2c2c2; font-size:14px; position:relative; padding-top:10px}
.historyTab li a:hover {color:#e15912;background:url("../images/hisBg_on.gif") center 7px repeat-x !important}
.historyTab li.on a {color:#e15912; font-size:18px}
.historyTab li:first-child a:before {border-left:1px solid #c2c2c2}
.historyTab li a:before {content:""; width:100%; height:15px; border-right:1px solid #c2c2c2; position:absolute; top:0; left:0; background:url("../images/hisBg.gif") center center repeat-x}
.historyTab li.on a:before {border-color:#e15912; background:url("../images/hisBg_on.gif") center center repeat-x !important}
.bx-wrapper .bx-controls-direction a.bx-prev {background:url("../images/hisArr_left.png") no-repeat !important; width:34px !important; height:56px !important; left:0% !important;}
.bx-wrapper .bx-controls-direction a.bx-next {background:url("../images/hisArr_right.png") no-repeat !important; width:34px !important; height:56px !important; right:0% !important;}
.con03New .bx-viewport {background:#363636 !important}
.con03New .bxslider p {color:#a8a8a8; font-size:14px; padding:10px 0}

@media screen and (max-width:1024px) {
	.bx-wrapper .bx-prev, .bx-wrapper .bx-next {top:40% !important}
}

@media screen and (max-width:540px) {
	.historyTab {margin-bottom:10px}
	.historyTab li a {width:100%;border-bottom:1px solid #989898;padding-bottom:10px}
	.historyTab li a:hover {color:#e15912;border-bottom:1px solid #e15912;background-image:none}
	.historyTab li:first-child a:before {border-left:none}
	.historyTab li a:before {display:none}
	.historyTab li.on a:before {border-color:#e15912; }
	.con03New .bxslider p {color:#a8a8a8; font-size:14px; padding:20px 0;width:80%;text-align:center;margin:0 auto}

}

@media screen and (max-width:1920px) {
	.modal-dialog {width:900px}
}


@media screen and (max-width:1760px) {
	.modal-dialog {width:900px}
}


@media screen and (max-width:900px) {
	.modal-dialog {width:auto}
}


.vimeoWrap{
     position: relative;
    padding-bottom: 54.20%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    margin: 0;
  }
.vimeoWrap iframe,
.vimeoWrap object,
.vimeoWrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



@media screen and (max-width:1760px) {
}

@media screen and (max-width:1660px) {
}

@media screen and (max-width:1440px) {
	.project-item .conTxt {}
	.project-item {width:16.6%;}
	.project-item02 {width:16.6%;}

		/* 숫자로보는 20년*/
	.on1 {position:absolute; top:150px; left:70px}
	.on1 > div .layerClose {position:absolute; bottom:80px; right:40px}
	.on2 {position:absolute; top:80px; right:170px}
	.on2 > div .layerClose {position:absolute; bottom:60px; left:10px}
	.on3 {position:absolute; top:320px; right:120px}
	.on3 > div .layerClose {position:absolute; bottom:30px; right:25px}
	.on4 {position:absolute; top:400px; right:120px}
	.on4 > div .layerClose {position:absolute; bottom:60px; left:10px}
	.on5 {position:absolute; top:400px; right:360px}
	.on5 > div .layerClose {position:absolute; bottom:60px; left:10px}
	.on6 {position:absolute; top:400px; left:370px}
	.on6 > div .layerClose {position:absolute; bottom:50px; left:0px}
	.on7 {position:absolute; top:400px; left:90px}
	.on7 > div .layerClose {position:absolute; bottom:40px; left:0px}
}

@media screen and (max-width:1024px) {
	#mainVisual section > a .conTxt {height:414px}
	.project-item .project-item02 {width:25%}
	.project-item .conTxt {}
	#container.con03 section {padding:0 10px}
	.bx-wrapper .bx-next {right:0% !important}
	.bx-wrapper .bx-prev {left:0% !important}
	.bx-wrapper .bx-prev, .bx-wrapper .bx-next {top:35% !important}
}

@media screen and (max-width:900px) {
#subTxt section h2 {font-size:36px;}
#subTxt section h3 {font-size:16px;}
.emblem{width:100%;margin-bottom:5%}
.emblemtxt{width:100%;}
.emblemtxt img{padding:0px 0 15% 0}
#container.con01 h5{font-size:16px; line-height:28px; font-weight:400;text-align:left;margin:0px 0 13% 0}
.ict{width:80%;padding-left:20px;text-align:left}
.ictbook{width:80%; padding:20px}
.book {position:absolute; top:-16px; right:5%;width:35%}
#container section h5 {font-size:16px; line-height:26px; font-weight:400; color:#636363}
#container section h6 {font-size:12px; line-height:24px; font-weight:600; color:#707070}
#mainVisual section > a .conTxt {font-size:18px;}

}

@media screen and (max-width:800px) {
.project-item {width:33.333%}
.project-item02 {width:33.333%}
#subTxt section h2 {font-size:32px;}
#subTxt section h3 {font-size:14px; line-height:20px}
.emblem{width:100%;margin-bottom:5%}
.emblemtxt{width:100%;}
#container.con01 h5{font-size:16px; line-height:28px; font-weight:400;text-align:left;margin:0px 0 13% 0}
.project-item .trans{opacity:1; trasition:all 0.3s ease;}
	.project-item .trans:hover{opacity:1}


}

@media screen and (max-width:768px) {
	header.header1 section {max-width:100%; padding:35px 10px 20px 10px}
	header.header2 section {max-width:100%; padding:20px 10px}
	header section .btnMenu {left:10px}
	header section .sns {right:10px}
	#mainTxt section {max-width:100%; padding:35px 10px 20px 10px}
	#subTxt section {max-width:100%; padding:35px 10px}
	#mainVisual section > a .conTxt {height:310px; font-size:18px}
	.project-item .project-item02 {width:50%}
	.project-item .trans{opacity:1; trasition:all 0.3s ease;}
	.project-item .trans:hover{opacity:1}

	
	.timeline-years {display:block}
	.timeline-years__year:first-child, .timeline-years__year:last-child {font-size:14px !important;}
	.timeline-years__year {font-size:12px !important}

}
@media screen and (max-width:540px) {
	header.header2 section {height:auto}
	header section .logo {margin-top:50px}
	#subTxt section h2 {font-size:32px}
	#subTxt section h3 {font-size:14px;line-height:20px}
	.slide__year h2 {display:block}
	#mainVisual section > a .conTxt {font-size:14px;}
	.project-item .trans{opacity:1; trasition:all 0.3s ease;}
	.project-item .trans:hover{opacity:1}


	
}

@media screen and (max-width:425px) {
	.gallery-item {width:100%}
	#mainVisual section > a .conTxt {height:860px; font-size:24px}
	.grid > div {width:100% !important; margin-bottom:30px}
	.book {display:none}
	.book-hidden {display:block}
	.project-item {width:50%}
	.project-item02 {display:none}
	.project-item .trans{opacity:1; trasition:all 0.3s ease;}
	.project-item .trans:hover{opacity:1}
	.bx-wrapper .bx-prev, .bx-wrapper .bx-next {top:30% !important}
}

@media screen and (max-width:375px) {
	#mainVisual section > a .conTxt {height:758px}

}

@media screen and (max-width:320px) {
	#mainVisual section > a .conTxt {height:647px}
	#subTxt section h2 {font-size:32px}
	#subTxt section h3 {font-size:12px;line-height:18px}
	.bx-wrapper .bx-prev, .bx-wrapper .bx-next {top:25% !important}
}