@charset "utf-8";
@import url('reset.css');
/*skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:99; width:100%; height:1px; margin-top:-1px; display:block; font-size:0.7rem; 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:0.5rem 0}
/*common */
.auto {margin:0 auto}
.img-responsive {display:block; max-width:100%; height:auto}

.displaynone{display:none}
.display{display:block}
.mobilebr{display:none}
.mobilebr570{display:none}
.mobilebr650{display:none}
.mobilebr375{display:none}

#wrap{margin:0 auto;width:100%;background:#fff;position:relative; }
#container{margin:0 auto 10% auto; }
.deco { width:100%; position:absolute; bottom:25%; left:0; z-index:1; }
.deco .insta_right { float:right; margin-right:4%; margin-top:15%}
.deco .insta_left { float:left;  margin-left:5% }
#top { width:50px; height:50px;background:#000; opacity:0.8; border:1px solid #000;border-radius: 50px; position:fixed; color:#fff;z-index:99; right:4%; bottom:8%; text-align: center;
line-height:50px; font-size:16px; font-family:'Work Sans', sans-serif;transform:uppercase;}


header{position:absolute; width:100%; max-width:1920px; overflow: hidden; top:0%; z-index:999; margin:0 auto; padding-top:1.5%; }
/*로고*/
.logo{ width:12%; margin-left:3.1%; float:left; z-index:999;}
.logo a{ display:inline-block; }
.logo a img { width:100% }

/*메뉴*/
.vol{ display:inline-block; float:right;font-size:20px;font-family:'Work Sans', sans-serif;color:#fff;text-transform:uppercase; margin-right:9.5%;margin-top:1.3%}
.btn_side{float:right; margin-right:3%; margin-top:0.7%; position:fixed; right:0; background:rgba(0,0,0,0.4); line-height:100%; border-radius:100px
; padding:0.5% 0.8%}
.menu_bar {display: inline-block;cursor: pointer; }
.mn { color:#fff; font-size:16px; font-weight:300; float:left; line-height:1.8em; } 
.bar1 { width: 25px;height: 2px;background-color: #fff;margin: 6px 0 0 5px;transition: 0.4s;}
.bar2 { width: 22px;height: 2px;background-color: #fff;margin: 6px 0 0 8px;transition: 0.4s;}
.bar3 {width: 30px;height: 2px;background-color: #fff; margin: 6px 0;transition: 0.4s;}

/*메뉴 펼침*/
.sidenav {height: 100%; width: 0; position: fixed; z-index: 99999;top: 0;right: 0;background-color:#111; overflow-x: hidden; transition: 0.5s;padding-top:5%;overflow:hidden; }
.sidenav .page_tit {/*padding: 20px 8px 20px 80px;*/padding:5% 0 5% 20%;text-decoration: none;font-size: 28px;font-weight:600;color: #fff;display: block;transition: 0.3s;font-family:'Work Sans', sans-serif;text-transform:uppercase; }
.sidenav a:hover { color: #0091ff }
.sidenav .closebtn { position: absolute;top: 3%;right: 10%;font-size: 36px;margin-left: 50px;color: #fff; }
.sidenav .prev { padding:5% 0 5% 19%;text-decoration: none;font-size: 18px;color: #fff;display: block;transition: 0.3s;}
.sidenav .prev i.xi-search { margin:0 10px 0 0}
.sidenav .lang { padding:5% 0 5% 25%;text-decoration: none;font-size: 20px; color: #fff;display: block;}
.sidenav .lang li { list-style-type:square; color:#fff; }
.sidenav .lang.ev li { list-style-type:disc ; color:#fff; }
.sidenav .lang li a { font-size:20px; color:#fff;font-family:'Work Sans', sans-serif;text-transform:uppercase;font-weight:300;}
.sidenav .lang li:hover { color:#0091ff}
.sidenav .lang li:hover a { color:#0091ff}

/*container*/
.container{margin:0}
.visual { padding:0;margin:0;width:100%; height:980px; position:relative;overflow: hidden;background-color:#000;}
.visual_wrap { cursor:default; background:#000;  }
#visual_video{ width:100%; height:auto; position:absolute;top:0%; left:0%;opacity:0.7} 
.visual .title_area { position:absolute; width:100%;height:100%;overflow:hidden;top:35%;left:0;z-index:99;text-align: center;}
.title_area h2{ color:#fff; font-weight:black;font-size:75px}
.title_area span { color:#fff; font-weight:300;font-size:28px; line-height: 150%;letter-spacing: -0.3px; font-family:'Work Sans', sans-serif;}
.content { width:100%; height:100%;  max-width:1309px; margin:3% auto 0 auto; background:#fff; z-index:2; position:relative}

/* undermenu */
.undermenu { width:100%; margin:6% 0 3% 0}
.undermenu ul { width:100%; overflow:hidden; margin:0 auto; }
.undermenu ul li {dislplay:block; float:left;text-align:center; font-family:'Work Sans', sans-serif; font-size:24px; font-weight:600;text-transform:uppercase; color:#131313;  overflow:hidden; text-align:center;
padding:0 2% 8px 2% ; }
.undermenu ul li a { color:#000; transition:0.2s; padding:0 0 7px 0 ;  }
.undermenu ul li a:hover { background-image:url('../images/h3_bg.jpg')}
/*.undermenu ul li:nth-of-type(1){ width:23%} 
.undermenu ul li:nth-of-type(2){width:15%}
.undermenu ul li:nth-of-type(3){width:10%}
.undermenu ul li:nth-of-type(4){width:17%}
.undermenu ul li:nth-of-type(5){width:19%}
.undermenu ul li:nth-of-type(6){width:15%}
.undermenu ul li:nth-of-type(7){width:7%}
.undermenu ul li a { color:#000; transition:0.2s; padding:0 0 8px 0 ;  }
.undermenu ul li a:hover {  background-image:url('../images/h3_bg.jpg')}
.undermenu ul li span {  margin:0% 10% 0 20%} */
.undermenu ul li.fir {padding:0 2% 8px 0}
.undermenu ul li.las {padding:0 0 8px 2%}
.mobile_tab { display:none; }

/*main contents*/
.con_wrap{overflow:hidden;width:100%;margin:0 auto;max-width:1310px;}
.con_box_wrap{width:100%;display:block;float:left;margin-top:-32.1%}
.con_box_wrap_trans{width:100%;display:block;float:left;margin-top:-32.1%;margin-left:33.5%}
.con_thum{background:#000;padding:0; margin:0}
.con_thum img {width:100%; height:100%;transform:scale(1.0);transition: transform .5s;}
.con_thum:hover img {transform:scale(1.1);transition: transform .5s;}
.con_box01{width:65.5%;display:block;float:left; margin:2% 1.5% 0 0;max-width:865px;}
.con_box02{width:32.15%;display:block;float:left; margin:2% 0 0 0;max-width:423px;}
.con_box03{width:32%;display:block;float:left; margin:0 1.5% 0 0;max-width:423px;overflow:hidden}
.sub03_mov{width:423px; height:423px; overflow:hidden}



.con_box04{width:32%;display:block;float:left; margin:0 0 0 0;max-width:423px;}
.con_box05{width:32%;display:block;float:left; margin:1.8% 1.5% 0 0;max-width:423px;}
.con_box06{width:32%;display:block;float:left; margin:1.8% 0 0 0;max-width:423px;}
.con_box07{width:65.5%;display:block;float:left; margin:2% 1.5% 0 0;max-width:865px;}
.con_box08{width:99%;display:block;float:left; margin:1.8% 0 0 0;max-width:1300px;}

.con_box01_trans{width:32%;display:block;float:left; margin:2% 0 0 0;max-width:423px;}
.con_box02_trans{width:65.5%;display:block;float:left; margin:1.9% 0 0 1.5%;max-width:865px;}

.con_txt  { width:84%; margin:8%; position:absolute; z-index:10; bottom:0%; left:0%; } 
.con_txt h5 { display:block; font-size:14px; padding:1% 0;  line-height:180%;   }
.con_txt h5 span { padding:1.5% 4% 1.8% 4%; background:#fff; text-transform:uppercase; color:#000;}
.con_txt p {  font-size:20px;  color:#fff; margin:5% 0 0 0; font-weight:500; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;}

.con_txt2  { width:90%; margin:4%; position:absolute; z-index:10; bottom:0%; left:0%; } 
.con_txt2 h5 { display:block; font-size:14px; padding:0 0 0% 0;  line-height:180%;   }
.con_txt2 h5 span { padding:1% 2%; background:#fff; text-transform:uppercase; color:#000;}
.con_txt2 p { font-size:20px; color:#fff; margin:3.5% 0 0 0; font-weight:500; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;}

.con_txt3  { width:95%; margin:2.5%; position:absolute; z-index:10; bottom:0%; left:0%; } 
.con_txt3 h5 { display:block; font-size:14px; padding:0 0 0% 0;  line-height:150%;   }
.con_txt3 h5 span { padding:0.5% 1.8%; background:#fff; text-transform:uppercase; color:#000;}
.con_txt3 p { font-size:20px; color:#fff; margin:2.5% 0 0 0; font-weight:500; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;}

.con_txt4  { width:90%; margin:4%; position:absolute; z-index:10; bottom:0%; left:0%;} 
.con_txt4 h5 { display:block; font-size:14px; padding:0 0 0% 0;  line-height:180%;   }
.con_txt4 h5 span { padding:0.7% 2%; background:#fff; text-transform:uppercase; color:#000;}
.con_txt4 p { font-size:20px; color:#fff; margin:3% 0 0 0; font-weight:500; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;}


/*main_grid_system*/
/*
.two_trans .con_txt2 { width:92%; margin:4%; position:absolute; z-index:10; bottom:0%; left:0%;}
.two_trans .con_txt2 h5 { display:block; font-size:14px; padding:0.5% 0  }
.two_trans .con_txt2 h5 span { padding:0.7% 3%; background:#fff; text-transform:uppercase; color:#000}
.two_trnas .con_txt2 p { margin:2% 0 0 0;   }


.grid_box { width:100%; padding-bottom:3%;margin:0 auto;overflow:hidden;display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.5%; */ /*grid-auto-rows: minmax(100px, auto);*//*}
.grid_box .grid_con{ display:block; width:100%; height:auto;  }
.grid_box .grid_con .noscale { width:100%; height:auto; }
.grid_box .grid_con a { width:100%; }
.grid_box .grid_con a img { height:100%; width:100%;  transform:scale(1.0);transition: transform .5s; }
.grid_box .grid_con a img:hover { transform:scale(1.1);transition: transform .5s;}
.con_txt  { width:84%; margin:8%; position:absolute; z-index:10; bottom:0%; left:0%; } 
.con_txt h5 { display:block; font-size:14px; padding:1% 0;  line-height:180%;   }
.con_txt h5 span { padding:1.5% 4%; background:#fff; text-transform:uppercase; color:#000;}
.con_txt p {  font-size:20px;  color:#fff; margin:5% 0 0 0; font-weight:500; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;}
*/
/* 2개 묶음 Col 부분 여백,텍스트 위치 조절 */
.one .con_txt { width:92%; margin:4%; position:absolute; z-index:10; bottom:0%; left:0%;}
.one .con_txt h5 { display:block; font-size:14px; padding:0.5% 0  }
.one .con_txt h5 span { padding:0.7% 2% 0.9% 2%; background:#fff; text-transform:uppercase; color:#000}
.one .con_txt p { margin:2.5% 0 0 0;  }

.one .con_txt02 { width:92%; margin:4%; position:absolute; z-index:10; bottom:0%; left:0%;}
.one .con_txt02 h5 { display:block; font-size:14px; padding:0.5% 0 }
.one .con_txt02 h5 span { padding:0.5% 3%; background:#fff; text-transform:uppercase; color:#000}
.one .con_txt02 p { margin:2.5% 0 0 0;  }

/* 방향 바뀐 박스 */
.one_trans .con_txt {width:84%; margin:8%; position:absolute; z-index:10; bottom:0%; left:0%; }
.one_trans .con_txt h5 {  display:block; font-size:14px; padding:0.9% 0;  line-height:180%;  }
.one_trans .con_txt h5 span {  padding:1.5% 4%; background:#fff; text-transform:uppercase; color:#000;}
.one_trans .con_txt p { font-size:20px;  color:#fff; margin:5% 0 0 0; font-weight:500; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden; }



.one { position: relative; overflow: hidden; grid-column: 1 / 3; grid-row: 1; background: black }
.one_trans { position: relative; overflow: hidden; grid-column: 1 / 3; grid-row: 1; background: black }
.two { position: relative; overflow: hidden;  grid-column: 3 / 4; grid-row: 1 / 3; background: black}
.two_trans { position: relative; overflow: hidden;  grid-column: 3 / 4; grid-row: 1 / 3; background: black}
.mobileimg { display:none; }
.pcimg { display:block; }
.three{ position: relative; overflow: hidden;grid-column: 1;  grid-row: 2 / 3; background: black}
.four{ position: relative; overflow: hidden;grid-column: 2/3;  grid-row: 2/3; background: black }
.five{ position: relative; overflow: hidden;  grid-column: 1; grid-row: 3/4; background: black}
.six { position: relative; overflow: hidden;grid-column: 2/3;  grid-row: 3/4; background: transparent}
.seven{ position: relative; overflow: hidden;grid-column: 3/4;  grid-row: 3/4; background: black}
.eight{ position: relative; overflow: hidden; grid-column: 1 / 3; grid-row: 1; background: black }


/*풋터 css */
footer { bottom:0; width:90%;  margin:5% auto 0 auto;padding:3% 0; overflow:hidden;background:#fff;border-top:1px solid #131313; position:relative; z-index:1 }
.ft_center { position:absolute; width:100%; top:0; left:0; text-align:center; z-index:-1}
.ft_center p img { margin:0 auto; text-align:center; margin-top:3.5%;  }
footer .ft_left { float:left; margin:0 5%; width:auto  }
footer .ft_left .subscription { color:#000; }
footer .ft_left  h4 { padding-bottom:11%;font-family:'Work Sans', sans-serif; font-size:30px;font-weight:500;color:#000}
footer .ft_left  h4:hover { opacity:0.7; }
footer .ft_left a { font-size:14px; color: #868686; }
footer .ft_left a:hover { opacity:0.7; }
footer .ft_left p { color: #868686; }
footer .ft_right { float:right;  width:auto; margin:0 -4% 0 0; }
footer .ft_right .icon_box a { margin-right:8%;}
footer .ft_right .icon_box a:hover { opacity:0.6 }
footer .ft_right .webaward { display:none; margin:4% 0 2% 0;  }
footer .ft_right .copyright { font-size:14px; color:#868686; margin-left:2% }
footer .ft_right .copyright p { display:inline-block; margin:6.5% 0 }
footer .ft_right .copyright p:nth-of-type(2) { font-size:12px}

@media screen and (max-width:1680px) {   
.visual { height:900px; }
.deco { display:none; }
.vol{ display:inline-block; float:right;font-size:20px;font-family:'Work Sans', sans-serif;color:#fff;text-transform:uppercase; margin-right:11%;margin-top:1.3%}
.btn_side{padding:0.5% 1% }
}
@media screen and (max-width:1600px) {
.visual { height:830px; }

}
@media screen and (max-width:1440px) {
header{ padding-top:1%; }
.visual {  height:650px; }
.logo{ width:15%; margin:0% 0 0 4.5%;}
.btn_side{float:right; margin-right:3.5%;}
.vol{margin-right:12%;margin-top:1.5%}
.visual {  height:750px; }
.visual .title_area { top:40%;}
.content { width:80%; }
.undermenu {  margin:5% 0}
.undermenu ul li {  font-size:18px; padding:0 1.2% 8px 1.2%  }
.title_area h2{font-size:65px}
.title_area span {font-size:28px;}
}
@media screen and (max-width:1366px) {	
.vol{margin-right:12.8%;margin-top:1.5%}
.sidenav .page_tit{padding:4% 0 4% 18%;font-size: 26px;}
.sidenav .lang{padding:5% 0 4% 25%;}
.title_area h2{font-size:62px}
.title_area span {font-size:24px;}
.undermenu ul {margin-left:1.5%}
.undermenu ul li {  font-size:18px;padding:0 1% 8px 1%}
.visual {  height:700px; }
}
@media screen and (max-width:1280px) {
.visual {  height:650px; }
.undermenu ul li { font-size:16px;padding:0 1.1% 8px 1.1% }
.title_area h2{font-size:58px}
.title_area span {font-size:22px;}
}
@media screen and (max-width:1147px) {
.vol{margin-right:13.1%;margin-top:1.5%}
.visual {  height:600px; }
.undermenu ul li {  font-size:15px;  }
}
@media screen and (max-width:1024px) {	
header{ padding-top:1.5%; }
.logo{ width:20%; margin:0% 0 0 5%;}
.btn_side{float:right; margin-right:4%;}
.vol{margin-right:15%;margin-top:1.5%}
.visual { height:550px; }
.visual .title_area {top:40%;left:0;}
.title_area h2{ font-size:50px}
.title_area span {font-size:20px;}
.undermenu ul li {  font-size:13px;  }
footer .ft_right { margin:0 -15% 0 0; }
footer .ft_right .webaward { display:block; margin:4% 0 2% 0;  }
footer .ft_right .copyright p { display:inline-block; margin:2% 0 }
footer .ft_right .icon_box a { margin-right:5%;}
.ft_center p img { display:none  }
}
@media screen and (max-width:960px) {
.visual { height:500px; }
.vol{margin-right:16%}
.undermenu ul{display:none}
.mobile_tab {display:block;font-family:'Work Sans', sans-serif; text-align:center; color:#363636;font-size:18px}
footer .ft_right .copyright .copy{font-size:12px}
footer .ft_left  h4{font-size:24px}
footer .ft_left a{font-size:12px;}
/* 추가해서 넣은 부분 */
footer .ft_right { margin:0 -14% 0 0; }
footer .ft_right .icon_box a { margin-right:6%;}
footer .ft_right .webaward { margin:2% 0 1% 0;  }
footer .ft_right .copyright p { margin:1% 0 }
.con_txt p{font-size:18px;}
.con_txt h5{font-size:12px;}
.one .con_txt h5{font-size:12px;}
}
@media screen and (max-width:768px) {
.logo{ width:23%; margin:-0.2% 0 0 5%;}
.btn_side{float:right; margin-right:3.5%;margin-top:1%;padding:1% 1.8%}
.vol{display:none; }
.bar1 { width: 30px;height: 3px;margin: 6px 0 0 5px;}
.bar2 { width: 25px;height: 3px;margin: 6px 0 0 10px;}
.bar3 {width: 35px;height: 3px;margin: 6px 0;}
#visual_video { width:auto;height:110%;left:0% }
.visual .title_area {top:39%;left:0;}
.title_area h2{ font-size:45px}
.title_area span {font-size:18px; letter-spacing:-0.5px}
.con_txt p{font-size:16px;}
.con_txt h5{font-size:11px;}
.one .con_txt h5{font-size:11px;}
.con_txt3 p{font-size:16px;}
.con_txt3 h5{font-size:11px;}
/* 추가해서 넣은 부분 */
footer .ft_right { margin:0 -20% 0 0; }
footer .ft_right .icon_box a { margin-right:6%;}
footer .ft_right .webaward { margin:2% 0 1% 0;  }
footer .ft_right .copyright p { margin:1% 0 }
}

@media screen and (max-width:570px) {
header{ padding-top:1%; }
.vol{display:none;}
.btn_side{margin-right:3.5%;margin-top:2%;padding:1% 2%}
.logo{ width:30%; margin:-1% 0 0 5%;}
.content { width:90%; }
#visual_video { left:-35% }
.visual .title_area {top:35%;}
.title_area h2{ font-size:40px; display:block}
.title_area span {font-size:18px; letter-spacing:1px}
.mobilebr570{display:block}
.grid_box { width:100%; padding-bottom:5%;margin:6% auto;overflow:hidden;display: grid; grid-template-columns: repeat(2, 5fr); grid-gap: 15px; }
#cont1, #cont2 { margin:8%;  } 
#cont1 h5, #cont2 h5  { font-size:14px; padding:0 0 ;  }
#cont1 h5 span, #cont2 h5 span { padding:2% 6%;}
#cont1 p, #cont2 p {font-size:18px;  color:#fff; margin:5% 0 0 0;}
.con_txt h5  { font-size:14px; padding:0 0 ;  }
.con_txt h5 span { padding:2% 6%;}
.con_txt p { font-size:18px;  color:#fff; }
.con_txt3 { margin:8%;} 

/* one,two,seven 타이틀 여백 따로 조절 */
.two .con_txt,.seven .con_txt { width:92%; margin:4%; }
.two .con_txt h5,.seven .con_txt h5 { display:block; font-size:14px; padding:0 0  }
.two .con_txt h5 span, .seven .con_txt h5 span { padding:0.7% 3%; }
.two .con_txt p, .seven .con_txt p { font-size:18px; margin:2.5% 0 0 0;  }
.one { grid-column: 1/3; grid-row: 1;  }
.two { grid-column: 1 / 3; grid-row: 2; }
.pcimg { display:none; }
.mobileimg { display:block; }
.three { grid-column: 1/2; grid-row: 3; }
.four { grid-column: 2/3; grid-row: 3; }
.five { grid-column: 1/2; grid-row: 4; }
.six { grid-column: 2/3; grid-row: 4; }
.seven { grid-column: 1/3; grid-row: 5;  }
.sns_bt{ display:none;}
footer { width:80%; padding:15% 0 15% 0; }
footer .ft_left { float:left; margin:0 1%; width:90% }
footer .ft_left  h4 { padding-bottom:5%;}
footer .ft_right { width:90%; float:left; margin:5% 0% 1% 0%;}
footer .ft_right .copyright p { margin:5% 1%;  }
.ft_right .icon_box a { margin-right:0%; }
/* 추가해서 넣은 부분 */
footer .ft_right .icon_box a { margin-right:6%;}
footer .ft_right .webaward { margin:3% 0 2% 0; }
footer .ft_right .copyright p { margin:2% 0 0 0; }
.sidenav{padding-top:10%}
.mobilebr570{display:block}
.con_wrap{width:80%;margin:0 auto;}
.con_box01, .con_box02, .con_box03, .con_box04, .con_box05, .con_box06, .con_box07 {width:100%;margin:3% 0;}
.con_box01_trans, .con_box02_trans {width:100%;margin:3% 0;}
.con_box_wrap{margin:0;}
.con_box_wrap_trans{margin:0;}
}
@media screen and (max-width:425px) {
header{ padding-top:1%; }
.logo{ width:40%; margin:-2% 0 0 6%;}
.btn_side{margin-right:4%;margin-top:2%;padding:1% 3%}
.mn{line-height:2em}
.visual { height:500px; }
#visual_video{ left:-65%; top:0} 
.visual .title_area { top:40%;left:0;z-index:2;text-align: center;}
.title_area h2{ font-size:32px; display:block}
.title_area span {font-size:18px; letter-spacing:-0.2px}
.clear { display:block }
.content { width:100%; height:100%; margin:0 auto; background:#fff}
.grid_box { width:85%; padding-bottom:7%;margin:5% auto;overflow:hidden;display: grid; grid-template-columns: repeat(1, 7fr); grid-gap: 20px; }
.con_txt { width:84%; margin:7%;  }
.con_txt h5 { font-size:14px; padding:0% 0; }
.con_txt h5 span { padding:1% 5% 1.5% 5%; }
.con_txt p {  font-size:18px; margin:5% 0 0 0; }
/*변형되는 그리드 css*/
.one .con_txt, 
.two .con_txt, 
.seven .con_txt  {width:84%;  margin:7%;} 
.one .con_txt h5, 
.two .con_txt h5, 
.seven .con_txt h5 { font-size:14px; padding:0% 0;  }
.one .con_txt h5 span,
.two .con_txt h5 span,
.seven .con_txt h5 span{ padding:1% 5% 1.5% 5% ; background:#fff;}
.one .con_txt p,
.two .con_txt p,
.seven.con_txt p{  font-size:18px;  color:#fff; margin:3% 0 0 0; }
.one { grid-column: 1/2; grid-row: 1;  }
.two { grid-column: 1 /2; grid-row: 2; }
.two a .pcimg { display:none; }
.two a .mobileimg { display:block; }
.three { grid-column: 1/2; grid-row: 3; }
.four { grid-column: 1/2; grid-row: 4; }
.five { grid-column: 1/2; grid-row: 5; }
.six { grid-column: 1/2; grid-row: 6; }
.seven { grid-column: 1/2; grid-row: 7;  }
 .btn_side{float:right; margin-right:3.5%;}
 .sidenav .page_tit{padding:3.5% 0 3.5% 20%;font-size: 24px;}
 .sidenav .lang{padding:5% 0 4% 27%;}
 .sidenav .closebtn { position: absolute;top: 0.5%;right: 5%;font-size: 36px;margin-left: 50px;color: #fff; }
}

/* 아이폰7s */
@media screen and (max-width:414px) {
 .btn_side {float:right; margin-right:3.5%;}
}
/*갤럭시 노트1*/
@media screen and (max-width:400px) {
   .visual_txt{top:29%/*24%*/}
}
/* 아이폰X */
@media screen and (max-width:375px) {  
header{ padding-top:1%; }
.logo{ width:40%; margin:-3% 0 0 6%;}
.btn_side{margin-right:4%;margin-top:2%;padding:1% 3%}
.mn{line-height:2em}
.bar1 { width: 25px;height: 2px;margin: 6px 0 0 5px;}
.bar2 { width: 22px;height: 2px;margin: 6px 0 0 8px;}
.bar3 {width: 30px;height: 2px;margin: 6px 0;}
#visual_video{ left:-80%;} 
.visual .title_area { top:30% }
.title_area h2{ font-size:33px; }
.title_area p{ font-size:16px; }
.clear { display:block; }
.mobilebr375{display:block}
}

@media screen and (max-width:360px) {
#visual_video{ left:-70%;} 
}