@charset "utf-8";
@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;
}

/* reset css*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video, input, button {margin:0; padding:0; border:0; font-size:100%; font-family:'Noto Sans KR', sans-serif; vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
body {line-height:1; word-break:keep-all; letter-spacing:-0.75px}
ol, ul, li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none}
table {border-collapse:collapse; border-spacing:0; /*table-layout:fixed*/}
caption, legend {overflow:hidden; text-indent:-9999px; height:1px; padding:0 !important}
html {font-family:sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
a {background-color:transparent; color:inherit; text-decoration:none}
a:active, a:hover {outline:0; text-underline-position:under;}
p {outline:none}
img {border:0}
button {cursor:pointer; background:none}
select {font:inherit}
select:hover {cursor:pointer}
textarea {padding:0}
input, select {vertical-align:top; margin-top:0 !important}

/* common */
.width100 {width:100%}      
.auto {margin:0 auto}
.img-responsive {max-width:100%; height:auto}
.conFlex {display:flex}
.maxWidth1060 {max-width:1060px}
.maxWidth1243 {max-width:1243px}
.maxWidth1320 {max-width:1320px}
.maxWidth1580 {max-width:1580px}
.maxWidth1678 {max-width:1678px}
.maxWidth1800 {max-width:1800px}
.show500 {display:none}
.show768 {display:none}
.mt20 {margin-top:20px}
.mt30 {margin-top:30px}
.mt50 {margin-top:50px}
.mt60 {margin-top:60px}
.mt70 {margin-top:70px}
.mt85 {margin-top:85px}
.mt90 {margin-top:90px}
.mt100 {margin-top:100px}
.mt130 {margin-top:130px}
.mt180 {margin-top:180px}
.clear{clear:both;}
.mobile{display:none}
.web{display:block}

/* header */
header {position:absolute; top:40px; width:100%; z-index:9999;}
header > section {width:95%; margin:0 auto}
.headerFlex {display:flex; justify-content:space-between;align-items:top;}
.headerFlex_text1 {font-size:15px; font-weight:400; color:#fff; line-height:22px; margin-top:0px;letter-spacing:0em;}
.headerFlex .logo{margin-right:5%;text-align:center;}
.headerFlex .logo a{font-size:15px; font-weight:400; color:#fff; line-height:200%;letter-spacing:-0.065em;text-align:center;}
.headerFlex .logo a:hover{text-decoration:none}
.headerFlex .logo02{margin-right:5%;text-align:center;}
.headerFlex .logo02 a{font-size:15px; font-weight:400; color:#000; line-height:200%;letter-spacing:-0.065em;text-align:center;}
.headerFlex .logo02 a:hover{text-decoration:none}
.menuBar {font-family:'IBM Plex Sans KR', sans-serif; font-size:20px; color:#fff; float:right}
.menuBar:hover, .menuBar:focus {color:#fff; text-decoration:none}
.menuBar > img {margin-right:10px}
/*
header.fixed {top:0; background:rgba(255,255,255,1); padding:20px 0}
header.fixed .headerFlex_text1 {color:#000}
header.fixed .logo img, header.fixed .menuBar > img {filter:invert(1)}
header.fixed .menuBar {color:#000}
header.fixed .menuBar:hover, header.fixed .menuBar:focus {color:#000}
*/
header.fixed .menuBar {position:fixed; top:60px; right:2.5%}
header.fixed .subMenuBar.active .menuBar {color:#000}
header.fixed .subMenuBar.active .menuBar > img {filter:invert(1)}
header.fixed .subMenuBar.active .menuBar:hover, header.fixed .subMenuBar.active .menuBar:focus {color:#000}

.headerFlex02 {display:flex; justify-content:space-between;align-items:top;}
.headerFlex02_text1 {font-size:15px; font-weight:400; color:#000; line-height:22px; margin-top:0px;letter-spacing:0em;}

/*영상*/
.video{margin:0 0 5% 0}
.vimeoWrap03{position:relative;padding-bottom:54.2%; /* 16/9 ratio */padding-top:32.5px;/* IE6 workaround*/height:0;overflow:hidden;margin:0}
.vimeoWrap03 iframe, .vimeoWrap03 object, .vimeoWrap03 embed {position: absolute;top: 0;left: 0;width: 100%; height:100%;border:0px}
.mov{clear:both;padding:7% 10% 0 10%;text-align:center;text-align:center;font-family:'Open Sans', sans-serif;font-size:12px; color:#7d7d7d;line-height:160%}
.mov.small {padding:5% 15% 0 15%;}
.concaption{clear:both;padding:10px 0;text-align:center;text-align:center;font-family:'Open Sans', sans-serif;font-size:12px; color:#7d7d7d;line-height:160%}

/*ESG*/
.ESG_E{color:#03ff73;}
.ESG_all{color:#009944;}

/*공유하기*/
.sns_total{display:block; position:fixed; top:40%; right:2%; z-index:200;}
.sns_total li{list-style:none; margin-bottom:10px}


/* gnbWrap */
#gnbWrap {display:none; position:fixed; top:0; left:0; width:100%; z-index:99999; background:#251711; padding:50px 0 80px; overflow-y:auto; height:100vh}
#gnbWrap > .inner {max-width:1580px; margin:0 auto}
.gnbTitle {font-size:34px; font-weight:500; color:#fff; text-align:center; position:relative}
.gnbClose {position:absolute; top:0; right:20px}
.gnbList {display:flex; flex-wrap:wrap; text-align:center}
.gnbList > div {flex:1 1 20%; margin-top:60px}
.gnbList > div > a {display:block; text-align:center; text-decoration:none}
.gnbList > div > a > img {transition:.3s}
.gnbList > div > a > img:hover, .gnbList > div > a > img:focus {transform:scale(1.1,1.1)}
.gnbList_tit {font-size:14px; font-weight:400; color:#d4c7ba; margin:38px 0 16px 0}
.gnbList_txt1 {font-size:18px; font-weight:400; color:#fff; line-height:25px}
.gnbList_txt2 {font-size:14px; font-weight:300; color:#fff; line-height:18px; margin-top:7px}
.gnbList_tit sup{font-size:11px;}
/*다른기사보기*/
/* gnbWrap02 */
#gnbWrap02 {width:100%; z-index:99999; background:#251711; overflow-y:auto;padding:6% 0 4% 0;}
#gnbWrap02 > .inner {max-width:1580px; margin:0 auto}
.gnbTitle {font-size:34px; font-weight:500; color:#fff; text-align:center; position:relative}
.gnbClose {position:absolute; top:0; right:20px}
.gnbList {display:flex; flex-wrap:wrap; text-align:center}
.gnbList > div {flex:1 1 20%; margin-top:60px}
.gnbList > div > a {display:block; text-align:center; text-decoration:none}
.gnbList > div > a > img {transition:.3s}
.gnbList > div > a > img:hover, .gnbList > div > a > img:focus {transform:scale(1.1,1.1)}
.gnbList_tit {font-size:14px; font-weight:400; color:#d4c7ba; margin:38px 0 16px 0}
.gnbList_txt1 {font-size:18px; font-weight:400; color:#fff; line-height:25px}
.gnbList_txt2 {font-size:14px; font-weight:300; color:#fff; line-height:18px; margin-top:7px}

.sns{margin:8% auto 0 auto;width:290px;}
.sns a {display:inline-block;font-size: 0;text-indent: -9999px;overflow: hidden;width:45px;height: 40px;margin-top: 3px;opacity: .85;}
.sns a:hover {opacity: 1;}
.sns a.KTL {background: url(../images/ktl.png) no-repeat 50%;}
.sns a.youtube {background: url(../images/youtube.png) no-repeat 50%;}
.sns a.facebook {background: url(../images/facebook.png) no-repeat 50%;}
.sns a.blog {background: url(../images/blog.png) no-repeat 50%;}
.sns a.kakao {background: url(../images/kakao.png) no-repeat 50%;}
.sns a.instagram {background: url(../images/insta.png) no-repeat 50%;}

/* mainVideoWrap */
#mainVideoWrap {display:table; table-layout:fixed; width:100%;background-color:#271812;}
#mainVideoWrap > article {display:table-cell; vertical-align:middle; width:100%; height:937px;background-color:#000;}
#mainVideoWrap > article > .inner {width:100%; height:100%; position:relative; z-index:1}
.mainVideo {position:absolute; top:0; left:0; z-index:9; width:100%; height:100%; -o-object-fit: cover; object-fit: cover; background-color:#271812;opacity:0.65;}
.mainTitle {width:100%; height:100%; position:absolute; display:flex; justify-content:center; align-items:center; z-index:99}
.mainTitle > h2 {font-size:82px; font-weight:700; color:#fff}
.volText {font-family:'Poppins', sans-serif; font-size:16px; color:#fff; position:absolute; z-index:99; transform:rotate(90deg); bottom:250px; right:-50px;letter-spacing:0.1em;}
.volText:before {content:''; display:inline-block; width:183px; height:1px; background:#fff; margin-right:10px}
.esgLogo {position:absolute; z-index:99; bottom:50px; right:60px}

/* mainCon1 */
.mainCon1 {background:#271812; padding:40px 20px 140px 20px}
.mainCon1 > div > a {text-decoration:none}
.mainCon1_tit sup{font-size:16px;}
.mainCon1_tit {display:inline-block; font-size:20px; font-weight:300; color:#fff; padding-bottom:10px; border-bottom:1px solid #fff}
.mainCon1_txt1 {font-size:38px; font-weight:500; color:#d9d9d9; line-height:52px; margin-top:35px}
.mainCon1_txt2 {font-size:22px; font-weight:400; color:#d9d9d9; margin-top:25px;line-height:160%;}
.con1-1 .conTxtWrap {margin-top:90px; margin-left:80px}
.con1-2 {margin-top:-155px; align-items:flex-end; justify-content:flex-end}
.con1-2 .conTxtWrap {margin-right:100px}
.con1-3 {margin-top:125px}
.con1-3 > img {margin-left:190px}
.con1-3 .conTxtWrap {margin-top:140px; margin-left:68px}

/* mainCon2 */
.mainCon2 {background:#d4c7ba; padding:60px 20px 135px 20px}
.mainCon2_tit {display:inline-block; font-size:18px; font-weight:400; color:#383838; padding-bottom:10px; border-bottom:1px solid #383838}
.mainCon2_txt1 {font-size:38px; font-weight:500; line-height:45px; color:#252525; margin-top:20px}
.con2_list {display:flex; justify-content:space-between; align-items:center; text-decoration:none; padding:0 140px 0 110px}
.con2_list:hover, .con2_list:focus {text-decoration:none}
.con2_list .thumImg {max-width:228px}
.mainCon2 hr {content:''; display:block; width:100%; height:2px; background:#c1af9d; border:none; margin:20px 0}

/* mainCon3 */
.mainCon3 {background:#325160; padding:140px 20px 100px 20px}
.mainCon3_tit {display:inline-block; font-size:18px; font-weight:300; color:#fff; padding-bottom:10px; border-bottom:1px solid #fff; margin-top:40px}
.mainCon3_tit sup{font-size:16px;}
.mainCon3_txt1 {font-size:30px; font-weight:500; color:#d9d9d9; margin-top:20px}
.mainCon3_txt2 {font-size:18px; font-weight:400; color:#d9d9d9; margin-top:20px;line-height:160%;}
.con3_list {overflow:hidden; margin-bottom:5%}
.con3_list > li {margin:0 20px; float:left; width:calc(33% - 40px)}
.con3_list > li a {display:block; text-decoration:none}

/* footer */
footer {width:95%; margin:2% auto}
footer div {display:flex;}
.edit_copy {line-height:45px}
.logobox a {display:block}
.logobox a.edit_copy {font-size:16px; font-weight:bold;color:#4b4b4b}
.copyright p {display:block;font-size:14px;color:#777;line-height:2}
.copyright p span {margin-right:3%}
.copyright p span a {display:inline}
.award {margin:1% 0 0 0;display:flex}
.footer_right {display:block;float:right; width:40%; margin-top:-5.5%}

.link{width:25%; margin:2% auto 0 auto;}
.link a {display: inline-block;position: relative;width:45%;font-size: 14px;padding: 4% 2%;margin:0% 2%;background-color:#fff;border-radius:30px; color:#252525; text-align:center}
.link a:hover {opacity: 1;}

/* subVisualWrap */
#subVisualWrap {height:937px; background-position:center center; background-size:cover}
#subVisualWrap > .inner {display:flex; align-items:flex-end; justify-content:center; flex-wrap:wrap; height:100%}
.subTitle {text-align:center; margin-bottom:90px}
.subTitle h1 {width:100%; font-size:40px; font-weight:500; color:#fff; margin-bottom:10px}
.subTitle h2 {width:100%; font-size:60px; font-weight:700; color:#fff; margin-bottom:40px}
.subTitle h3 {width:100%; font-size:24px; font-weight:700; color:#fff}

/* subCon */
.subCon {padding:90px 20px 120px 20px; box-sizing:border-box; overflow:hidden}
.pTit1 {font-size:20px; font-weight:500; line-height:35px; color:#006391}
.pTit2 {font-size:20px; font-weight:500; line-height:35px; color:#000}

.h3Tit {font-size:24px; font-weight:700; line-height:36px; color:#000}
.pTxt1 {font-size:18px; font-weight:400; line-height:30px; color:#434343}
.pTxt2 {font-size:18px; font-weight:400; line-height:30px; color:#707070}
.sTxt {font-size:14px; font-weight:400; line-height:22px; color:#c1a58a}
.h3Tit2 {font-size:36px; font-weight:700; line-height:180%; color:#000; text-decoration:underline;text-align:center;text-underline-position : under;}
.h3Tit3 {font-size:30px; font-weight:500; line-height:160%; color:#000; text-align:center;}
.h3Tit3 span{font-size:36px; font-weight:700; color:#00c063;}
.h3Tit4{font-size:48px; font-weight:700; line-height:160%; color:#000; text-align:center;}
.h3Tit5{font-size:24px; font-weight:500;line-height:160%; color:#000}
.h3Tit6{font-size:18px; font-weight:500; line-height:36px; color:#000; margin-left:-20px;}
.h3Tit7{font-size:18px; font-weight:500; line-height:36px; color:#1a79ba;}
.h3Tit5 span{background-color:#ff9cb8;padding:0.2% 1% 0.4% 1%;margin-right:1%;color:#fff;font-size:16px}

/*캡션*/
.caption{font-size:14px; font-weight:400; line-height:180%; color:#0d5b91}

/*출처*/
.reference {width:100%; border:2px solid #000;padding:2% 5%;}
.reference li{list-style:disc;font-size:14px; font-weight:400; color:#828282; margin:2% 0}

/*일상을 소통하다*/
.sub06_name01{color:#ba741e;font-weight:bold;}
.sub06_name02{color:#6392ce;font-weight:bold;}
.sub06_name03{color:#21b140;font-weight:bold;}
.sub06_name04{color:#d15483;font-weight:bold;}
.sub06_name05{color:#2da9ae;font-weight:bold;}
.sub06_box{width:100%; border:3px solid #d9d9d9; padding:2% 3%; text-align:left; color:#828282; line-height:160%;font-size:16px;margin:5% 0;letter-spacing:-0.01em}

/*탭메뉴*/
.sub08_tab {max-width:1320px;margin:3% auto 0 auto;text-align:center;overflow:hidden}
.sub08_tab li {width:25%;float:left;letter-spacing:0;border-radius:50px;border:1px solid #000;padding:2% 0}
.sub08_tab li.active {background:#000;}
.sub08_tab li.active a{color:#fff}
.sub08_tab li:hover {background:#000;color:#fff}
.sub08_tab li a {padding:5% 0}
.sub08_tab li a:hover {text-decoration:none;color:#fff}

/*테이블*/
.normal {width:100%;font-size:16px;border-top:1px solid #434343;margin: 5% auto;}
.normal tr th{color:#1a79ba;text-align:center;padding:1% 0;line-height:180%; font-weight:700;border-right:1px solid #434343;border-bottom:1px solid #434343}
.normal tr td {text-align:left;padding:1% 1%;line-height:200%;  vertical-align:middle;color:#707070;border-right:1px solid #434343; border-bottom:1px solid #434343}
.normal  tr td.left  {text-align:center;padding-left:2%;}
.normal tr th.last, .normal tr td.last{border-right:0px}
.normal tr td span{font-weight:500;color:#252525}
.normal  tr td.center{text-align:center;}
.normal td:last-child {border-right:0px;}

.t_list{width:100%;padding-left:30px}
.t_list li{list-style:disc;font-size:14px; font-weight:400; color:#828282; margin:1% 0; text-align:left;line-height:160%;}

/*시험인증4*/
.article_con {margin:3% auto 0 auto;text-align:left;/*border-top:1px solid #ccc;*/padding:2% 0;overflow:hidden}
.article_con h4 {font-size:18px; line-height:200%;}
.article_con h4 span {background-color:#7fd5da;padding:0.5% 1% 0.7% 1%;margin-right:1%;color:#fff;font-size:16px;border-radius:20px;}
.article_con p {width:100%;margin:3% auto;}
.article_con a {float:left;width:100%;padding:1%;border-radius:30px;border:2px solid #7fd5da;text-align:center;transition:0.2s }
.article_con a:hover {background:#7fd5da;border:2px solid #7fd5da;color:#fff}

/* goalBox */
.goalBox {background:url('../images/subImg01-1.jpg') no-repeat; background-size:cover; height:611px; color:#fff; padding:65px; box-sizing:border-box; margin-top:50px}
.goalBox > h5 {font-family:'Noto Serif KR', serif; font-weight:500;display:block; font-size:23px}
.goalBox > h4 {font-family:'Noto Serif KR', serif; font-weight:500;font-size:32px; line-height:48px; color:#fff21f}
.goalBox > h4 > span {font-family:'Noto Serif KR', serif; font-weight:500;font-size:23px; color:#fff}
.goalBox > ol {margin:50px 0 0 25px}
.goalBox > ol > li {font-family:'Noto Serif KR', serif; font-weight:500; list-style:decimal; margin-bottom:20px}

/* photoSt */
.photoSt1 {display:flex; align-items:flex-end; justify-content:space-between; text-align:center;}
.photoSt1 > li:nth-child(2) {margin-bottom:-110px}
.photoSt2 {display:flex; align-items:flex-start; justify-content:space-between}
.photoSt3 {display:flex; align-items:flex-end; justify-content:space-between}

/*문의*/
.contact {width:100%;border:3px solid #d9d9d9;margin:4% auto 2% auto;padding:2% 2%;font-size:16px; color:#828282;letter-spacing:-0.01em;line-height:200%; text-align:center;}
.contact span{font-size:18px; color:#252525;font-weight:700;}

/* GNUbox */
.GNUboxWrap {display:flex; flex-wrap:wrap}
.GNUbox {flex:1 1 30%}
.GNUbox > .inner {border:3px solid #65472a; min-height:245px; background:url('../images/GNUbox_bg.jpg') bottom right no-repeat; position:relative; padding:55px 50px; box-sizing:border-box; font-size:18px; font-weight:500; color:#353535; line-height:29px}
.GNUbox > .inner:before {content:''; display:block; background:url('../images/GNUbox_logo.jpg') no-repeat; width:102px; height:22px; position:absolute; top:-4px; left:10px}
.GNUbox:nth-child(2) {margin:0 40px}

/* purposeBox */
.purposeBox {display:flex}
.pb1 {display:flex; align-items:center; flex-shrink:0; width:220px; font-size:24px; font-weight:400; line-height:36px; color:#fff; background:url('../images/pb1_logo.jpg') left 10px top #1f2a68 no-repeat; margin-right:30px; padding-left:20px; box-sizing:border-box}
.pb2 {width:100%}
.pb2-sub {display:flex; align-items:center; height:82px; margin-bottom:32px; font-size:20px; font-weight:500; line-height:36px; color:#fff; background:url('../images/pb2_logo.jpg') left 10px top #0098d8 no-repeat; padding-left:145px; box-sizing:border-box}
.pb2-sub:last-child {margin-bottom:0}

/*이벤트 참여하기*/
.eventcon {position:relative;overflow:hidden;}
.quiz_box {background-color:#fff;text-align:center;margin:0 20%;padding:3%;border-radius:50px}
.quiz_box .quiz_txt {font-size:50px;color:#3e3e3e;font-family:'GmarketSansMedium', sans-serif; }
.quiz_box .quiz_txt2 {font-size:24px;color:#3e3e3e;margin:5%;font-weight:500;font-family:'GmarketSansMedium', sans-serif; }
.quiz_box .quiz_txt2 span {color:#d3004f;}
.ev_bt {background-color:#02aee6;width:30%;margin:0 auto;border-radius:50px}
.ev_bt a {display:block;padding:5% 0;text-align:center;text-decoration:none;color:#fff;font-size:30px;font-weight:500;font-family:'GmarketSansMedium', sans-serif;}
.event_noti {margin:5% 20% 5% 20%}
.event_noti h4 {font-size:20px;}
.event_noti ul {margin:2% 0%;}
.event_noti ul li {font-size:16px; text-align:left; line-height:180%}

.event_gift {width:100%;background:#f9dce1;overflow:hidden;padding:5% 5%;}
.event_gift h3 {font-size:42px;font-family: 'GmarketSansMedium', sans-serif; text-align:center;color:#252525;font-weight:700;margin:0 0 2% 0}
.event_gift img {margin:0 auto;display:flex;}
.date {margin:5% auto;}
.date p {font-size:26px;margin-top:2%; color:#252525;text-align:center;line-height:180%;font-weight:500;font-family: 'GmarketSansMedium', sans-serif; }
.date span {font-size:28px;background:#bdfe71;margin-right:2%; color:#252525;font-family: 'GmarketSansMedium', sans-serif; }

.eventop{position:relative;overflow:hidden;width:100%; background:url('../images/sub10_bg.jpg') 0 0 no-repeat; background-size:cover;padding:8% 5%;}
.event_text h2{font-family: 'GmarketSansMedium', sans-serif;font-size:52px;font-weight:700;color:#fff;text-align:center;margin:5% 0 3% 0;letter-spacing:-0.03em;}
.event_text h3{font-family: 'GmarketSansMedium', sans-serif;font-size:92px;font-weight:700;color:#bdfe71;text-align:center;margin:0 0 3% 0;}
.event_text p{font-size:24px;font-weight:500;color:#fff;text-align:center;line-height:160%;}

/* 추가 38호 */
.tb_tit01 {display:inline-block; padding:5px 5%; border:1px solid #b7c5c6; margin-right:20px;}
.txt_right {text-align:right !important;}
.sub02_box{width:100%; border:3px solid #539ba0; padding:2% 3%; text-align:left; color:#539ba0; line-height:160%;font-size:16px;margin:5% 0;letter-spacing:-0.01em}

@media screen and (max-width:1440px) {
	.mainCon1 img {max-width:500px}
	.con1-2 {margin-top:60px}
	.con1-3 > img {margin-left:0}
	.con2_list {padding:0}
	.event_text h2{font-size:42px;}
	.event_text h3{font-size:82px;}
	.event_text p{font-size:20px;}
	.volText{right:-80px;bottom:300px}
	.mainCon2{padding:5% 5%;}
	.subCon {padding:5% 10% 8% 10%;}
	.mainCon2_txt1 {font-size:34px;}
}
/*아이패드 가로*/
@media screen and (max-width:1280px) {
	.event_text h2{font-size:30px;margin:8% 0 3% 0;}
	.event_text h3{font-size:72px;}
	.event_text p{font-size:18px;}
	.ev_bt a {padding:5% 0 3% 0 }
	.date p {font-size:18px;}
	.date span {font-size:20px;}
	.volText{right:-100px;bottom:350px;font-size:14px;}
	.headerFlex_text1{font-size:12px;}
}
@media screen and (max-width:1024px) {
	.mainTitle > h1 {font-size:30px}
	.mainTitle > h2 {font-size:60px}
	.mainCon1 img {max-width:400px}
	.con1-2, .con1-3 {margin-top:60px}
	.con1-3 > img {margin-left:0}
	.con1-1 > a, .con1-3 > a {margin-left:30px}
	.con1-2 > a {margin-right:30px}
	footer div {justify-content:center; text-align:center}
	.footer_right {float:none; width:50%; margin:20px auto 0 auto}
	#subVisualWrap {height:60vh}
	.subTitle {margin-bottom:30px}
	.subTitle h1 {font-size:32px; margin-bottom:10px}
	.subTitle h2 {font-size:42px; margin-bottom:15px}
	.subTitle h3 {font-size:18px}
	.GNUbox {flex:1 1 100%}
	.GNUbox:nth-child(2) {margin:30px 0}
	.event_noti {margin:5% 13% 5% 13%}
	.event_noti h4 {font-size:18px}
	.event_noti ul li {font-size:14px}
	.event_gift h3 {font-size:36px}
	.date {margin:5% 13%}
	.date span, .date p {font-size:18px}
	.ev_bt {width:25%}
	.ev_bt a {font-size:24px;padding:6% 0 5% 0}
	.mainCon1_txt1 {font-size:32px;}
	.mainCon1_txt2 {font-size:16px}
	.mainCon1_txt1, .mainCon2_txt1, .mainCon3_txt1 {line-height:160%; font-size:28px; margin-top:10px}
	.mainCon1_txt2, .mainCon2_txt2, .mainCon3_txt2 {line-height:160%; font-size:16px; margin-top:5px}
	.headerFlex .logo a, .headerFlex .logo02 a {font-size:12px;}
	.link{width:50%;}
}
@media screen and (max-width:976px) {
	.event_text h2{font-size:24px;}
	.event_text h3{font-size:58px;}
	.ev_bt {width:35%}
	.ev_bt a {padding:6% 0 5% 0}
	.gnbTitle {font-size:28px;}
	.headerFlex .logo img, .headerFlex .logo02 img{width:80%;}
}
/*아이패드 세로*/
@media screen and (max-width:887px) {
	.mobile02{display:none;}
}
@media screen and (max-width:768px) {
	.show768 {display:block}
	header {top:30px}
	.headerFlex_text1{display:none;}
	.headerFlex02_text1{display:none;}
	.headerFlex_text1 > span {display:none}
	.headerFlex .logo, .headerFlex .logo02{text-align:left;}
	.headerFlex .logo a, .headerFlex .logo02 a {font-size:11px;}
	.menuBar {display:block; text-align:center}
	.menuBar > img {margin-right:0px}
	.menuBar > span {display:block}
	#mainVideoWrap > article {height:100vh}
	.logo, .logo02 {max-width:220px}
	.volText {bottom:200px; right:-100px;font-size:12px}
	.esgLogo {bottom:30px; right:30px}
	.conFlex {flex-wrap:wrap}
	.mainCon1 {padding:40px 20px 60px 20px}
	.mainCon1 img {max-width:100%; width:100%}
	.mainCon1_txt1 {line-height:44px; margin-top:15px}
	.mainCon1_txt2 {margin-top:15px}
	.mainCon1_txt1 br {display:none}
	.con1-1 .conTxtWrap, .con1-2 .conTxtWrap, .con1-3 .conTxtWrap {margin:30px 0 0 0}
	.con1-2, .con1-3 {justify-content:flex-start; margin-top:80px}
	.con1-2 .conTxtWrap {order:2}
	.con1-2 > img {order:1}
	.mainCon2 {padding:40px 20px 60px 20px}
	.con2_list .thumImg {max-width:180px}
	.mainCon3 {padding:40px 0px 50px 0px}
	.con3_list > li {width:calc(100% - 40px); margin-bottom:50px}
	.con3_list > li a {display:flex}
	.con3_list > li a > img {max-width:300px; margin-right:20px}
	.footer_right {width:100%}
	.subTitle h1 {font-size:24px; margin-bottom:10px}
	.subTitle h2 {font-size:34px; margin-bottom:10px}
	.subTitle h3 {font-size:16px}
	.photoSt1, .photoSt2 {flex-wrap:wrap}
	.photoSt1 > li:nth-child(2), .photoSt2 > li:nth-child(2) {margin-bottom:0; margin-top:30px}
	.photoSt1 > li, .photoSt2 > li {width:100%}
	.photoSt1 > li > img, .photoSt2 > li > img {width:100%}
	.purposeBox {flex-wrap:wrap}
	.pb1 {justify-content:center; width:100%; height:90px; margin-right:0; margin-bottom:20px; padding-left:0px; text-align:center}
	.pb1 br {display:none}
	.pb2-sub {justify-content:center; font-size:18px; min-height:82px; margin-bottom:10px; text-align:center; height:auto; line-height:22px; padding:30px 15px 15px 15px}
	.event_text h2{margin-top:10%;}
	.event_text h3{font-size:42px;}
	.event_text p{font-size:16px;}
	.event_text p br{display:none}
	.sns_total{display:none;}
	.event_gift{padding:5% 2%;}
	.copyright p{font-size:12px;}
	.mt180, .mt100{margin-top:8%;}
	.mt50{margin-top:3%;}
}
@media screen and (max-width:600px) {
	.con1-2, .con1-3 {margin-top:50px}
	.mainCon1_tit, .mainCon2_tit, .mainCon3_tit {font-size:18px}
	.mainCon1_txt1, .mainCon2_txt1, .mainCon3_txt1 {font-size:24px; margin-top:10px}
	.mainCon1_txt2, .mainCon2_txt2, .mainCon3_txt2 {font-size:14px; margin-top:5px}
	.con2_list .thumImg {max-width:140px}
	.con3_list > li a > img {max-width:230px}
	.pTit1 {font-size:18px; line-height:30px}
	.h3Tit {font-size:22px; line-height:32px}
	.pTxt1, .pTxt2 {font-size:16px; line-height:26px}
	.sTxt {font-size:13px; line-height:20px}
	.goalBox {padding:25px; height:370px}
	.goalBox > h5 {font-size:18px}
	.goalBox > h4 {font-size:22px; line-height:30px}
	.goalBox > h4 > span {font-size:18px}
	.goalBox > ol {margin-top:30px}
	.goalBox > ol > li {font-size:16px; ; line-height:26px; margin-bottom:10px}
	.conMargin.mt20 {margin-top:10px}
	.conMargin.mt50 {margin-top:20px}
	.conMargin.mt60 {margin-top:30px}
	.conMargin.mt70 {margin-top:40px}
	.conMargin.mt85 {margin-top:50px}
	.conMargin.mt90 {margin-top:55px}
	.conMargin.mt130 {margin-top:80px}
	.pb1 {font-size:20px}
	.pb2-sub {font-size:16px}
	.event_text h2{font-size:18px; margin-top:15%;}
	.event_text h3{font-size:36px;}
	.mt100 {margin-top:60px}
	.ev_bt {width:50%;margin:10% auto}
	.ev_bt a {padding:6% 0 5% 0}
	.event_gift h3 {font-size:28px}
	.h3Tit2, .h3Tit3 span {font-size:30px;}
	.h3Tit3 {font-size:24px;}
	.h3Tit4{font-size:32px;}
	.pTit2 {font-size:18px;}
	.h3Tit5{font-size:20px; } 
	.reference {padding:2% 8%;}
	.reference li{font-size:12px;line-height:160%;}
	.h3Tit6, .h3Tit7, .contact span{font-size:16px;}
	.h3Tit5 span, .contact {font-size:14px;}
	.normal tr th, .normal tr td{font-size:12px;}
	.t_list{padding-left:15px;}
	.t_list li{font-size:12px;}
	.article_con h4{font-size:16px;}
	.article_con h4span{font-size:14px;}
	.link{width:70%;}
}
@media screen and (max-width:500px) {
	.show500 {display:block}
	.headerFlex_text1 {line-height:15px}
	.menuBar {font-size:16px}
	.mainTitle > h1 {font-size:20px}
	.mainTitle > h2 {font-size:42px}
	.esgLogo {max-width:100px}
	.mainCon2_txt1 {line-height:28px; font-size:18px}
	.con3_list > li a {flex-wrap:wrap}
	.con3_list > li a > img {max-width:100%; width:100%}
	.mainCon3_tit {margin-top:25px}
	.pTit1 {font-size:16px; line-height:26px}
	.h3Tit {font-size:20px; line-height:28px}
	.pTxt1, .pTxt2 {font-size:14px; line-height:24px}
	.sTxt {line-height:18px}
	.goalBox {padding:20px; min-height:350px; height:auto}
	.goalBox > h5 {font-size:16px}
	.goalBox > h4 {font-size:20px; line-height:28px}
	.goalBox > h4 > span {font-size:16px}
	.goalBox > ol {margin-top:20px; margin-bottom:40px}
	.goalBox > ol > li {font-size:15px; ; line-height:24px; margin-bottom:7px}
	.conMargin.mt20 {margin-top:5px}
	.conMargin.mt50 {margin-top:15px}
	.conMargin.mt60 {margin-top:20px}
	.conMargin.mt70 {margin-top:30px}
	.conMargin.mt85 {margin-top:40px}
	.conMargin.mt90 {margin-top:50px}
	.conMargin.mt100 {margin-top:60px}
	.conMargin.mt130 {margin-top:70px}
	.conMargin.mt180 {margin-top:80px}
	.GNUbox > .inner {min-height:160px; background:url('../images/GNUbox_bg.jpg') bottom -3px right no-repeat; padding:35px 30px; font-size:15px; line-height:24px; background-size:250px; text-align:center}
	.GNUbox > .inner br {display:none}
	.mobile{display:block}
	.web{display:none}
	.event_noti {margin:0 10% 5% 10%}
	.event_noti h4 {font-size:16px}
	.event_gift h3 {margin:5% 0}
	.event_gift img {width:80%;}
	.date {margin:5% 10%;}
	.date p {font-size:16px}
	.ev_bt {width:60%}
	.sub08_tab li{width:50%;padding:4% 0;}
	.mainCon1_tit, .mainCon2_tit, .mainCon3_tit {font-size:14px}
	.subTitle h2 {width:94%;padding:0 3%;margin:0 auto 3% auto;}
	.caption{font-size:12px; line-height:160%}
	.con2_list .thumImg {width:80px;}
}
@media screen and (max-width:425px) {
	.logo, .logo02 {max-width:190px}
	.GNUbox > .inner {background-size:200px}
	.event_noti {margin:10% 8%}
	.event_text h3{font-size:30px;}
	.event_gift h3 {font-size:24px;}
	.copyright p{font-size:11px;}
	.mainCon1_txt1, .mainCon2_txt1, .mainCon3_txt1 {font-size:20px; }
	.mainCon1_txt2, .mainCon2_txt2, .mainCon3_txt2 {font-size:12px;}
	.mainCon1_txt1 {line-height:30px;}
	.mainCon1_txt2 {margin-top:12px}
	.h3Tit2, .h3Tit3 span {font-size:24px;}
	.article_con h4{font-size:14px;}
	.article_con h4 span{font-size:12px;}
	.sub06_box{font-size:12px;}
	.sub02_box{font-size:12px;}
	.con2_list .thumImg {max-width:65px;}
}
/*아이폰 6,7,8 Plus,갤럭시 S20 울트라,*/
@media screen and (max-width: 414px) {
}
/*아이폰 12,13 Pro*/
@media screen and (max-width:390px) {
	.con2_list .thumImg {max-width:60px;}
}
/*아이폰6,7,8,X, 갤럭시 S20, S21*/
@media screen and (max-width:327px) {
	.con2_list .thumImg {max-width:40px;}
}