*{box-sizing: border-box;}
html,body	{padding: 0; margin: 0; scroll-behavior: smooth; font-family: 'Noto Sans KR', 'malgun gothic', sans-serif; line-height: 1.8; letter-spacing: -0.05em;}
ul,li,.h1, h1,.h2, h2,.h3, h3,.h4, h4,.h5, h5   {list-style: none; padding: 0; margin: 0;}
p			{padding: 0; margin: 0;}
a:hover     {text-decoration:underline; cursor: pointer;}
a           {text-decoration: none!important; color: #000; cursor: pointer;}

.blind {position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden;}

/**************** header ****************/
.header {float: left; width: 100%; border-bottom: 1px #ddd solid; padding: 20px 0;}
.header .gnb-inner  {display: flex; width: 1100px; margin: 0 auto; align-items: center; justify-content: space-between;}
.header h1  {float: left; position: relative; z-index: 9999999;}
.header h1 .header-logo {float: left; background: url(/img/common/logo_new2.png) no-repeat; width: 220px; height: 70px;}
.header .bn-archive {display: flex;}

/**************** main ****************/
#wrap {float: left; width: 100%;}
.section        {float: left; width: 100%;}
.section .title {float: left; width: 100%; font-size: 26px; font-weight: 600;}
.container      {display: table; width: 1100px; margin: 30px auto; overflow: hidden;}

/* section1 */
.section1 .container  {border-bottom: 1px #ddd solid; padding-bottom: 50px;}
.section1 .main-top             {display: flex; flex-direction:column; gap: 35px;}
.section1 .main-top .title-bg   {display: flex; width: 100%; height: 350px; background: url(../img/daesan-intro-bg.jpg) no-repeat 100% -41px; background-size: cover; position: relative;}
.section1 .main-top .title {font-size: 44px; font-weight: 600; color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.section1 .main-top .title span    {display: block; font-size: 20px; font-weight: 500;}
.section1 .main-top .content   {display: flex; gap: 90px; text-align: justify; font-size: 18px; color: #444;}
.section1 .main-top .content .cont-le  {white-space: nowrap; font-weight: 700; font-size: 34px; line-height: 1.4; color: #000;}

/* section2*/
.section2 .container    {border-bottom: 1px #ddd solid; padding-bottom: 50px;}
.section2 .main-history {display: flex; flex-direction:column; gap: 10px;}
.section2 .main-history ul  {display: flex; flex-wrap: wrap; gap: 15px;}
.section2 .main-history li  {flex: 1 542px; height: 200px}
.section2 .main-history li.history-2020 {background: url(../img/intro2-bg-2020.jpg) no-repeat 100%; background-size: cover;}
.section2 .main-history li.history-2010 {background: url(../img/intro2-bg-2010.jpg) no-repeat 100%; background-size: cover;}
.section2 .main-history li.history-2000 {background: url(../img/intro2-bg-2000.jpg) no-repeat 100%; background-size: cover;}
.section2 .main-history li.history-1900 {background: url(../img/intro2-bg-1990.jpg) no-repeat 100%; background-size: cover;}
.section2 .main-history li a  {display: block; width: 100%; height: 100%; padding: 20px 25px; box-sizing: border-box; text-align: left;font-weight: 600;font-size: 26px;color: #fff;}
.section2 .main-history li a p {font-size: 17px; font-weight: 400;}

/* section3*/
.section3 .container    {padding-bottom: 80px;}
.section3 .main-video {display: flex; flex-direction:column; gap: 10px;}
.section3 .main-video ul  {display: flex; gap: 15px;}
.section3 .main-video li    {width: 50%;  position: relative;}
.section3 .main-video li p  {font-weight: 500; font-size: 20px; text-align: center; margin-top: 20px;}
.section3 .main-video li .video {width: 100%; height: 306px;  display: flex; justify-content: center; align-items: center; overflow: hidden;}

/* section4*/
.section4 .container    {border-bottom: 1px #ddd solid; padding-bottom: 50px;}
.section4 .main-history {display: flex; flex-direction:column; gap: 10px;}
.section4 .main-history ul  {display: flex; flex-wrap: wrap; gap: 15px;}
.section4 .main-history li  {flex: 1; height: 200px; position: relative;}
.section4 .main-history li:nth-of-type(1) {background: url(../img/img_30th.jpg) no-repeat 100%; background-size: cover;}
.section4 .main-history li:nth-of-type(2) {background: url(../img/img_20th.jpg) no-repeat 100%; background-size: cover;}
.section4 .main-history li:nth-of-type(3) {background: url(../img/img_10th.jpg) no-repeat 100%; background-size: cover;}
.section4 .main-history li a  {display: flex; flex-direction: column; justify-content:space-between; width: 100%; height: 100%; padding: 20px 25px; box-sizing: border-box; text-align: left; font-weight: 600;font-size: 26px;color: #fff;}
.section4 .main-history li a p  {font-size: 16px; font-weight: 400; line-height: 1.5; word-break: keep-all;}

/**************** footer ****************/
#footer {float: left; width: 100%; padding: 50px 0; background: #f0f0f0;}
.footer-info .copyright {text-align: center; font-size: 15px; letter-spacing: 0; color: #666; font-weight: 500; line-height: 2;}
.footer-info .copyright span    {font-weight: 600;}
.footer-info .copyright p {font-size: 13px;}

/**************** sub ****************/
.sub-content .container {margin: 0 auto;}
.sub-top             {float: left; width: 100%;}
.sub-top .title-bg   {float: left; width: 100%; height: 250px; position: relative;}
.sub-top .title-bg.bg-30th {background: url(../img/daesan-intro-bg.jpg) no-repeat 100% -155px; background-size: cover;}
.sub-top .title {font-size: 44px; font-weight: 600; color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sub-tab  {display: flex; justify-content: center; width: 100%; margin: 0 auto;}
.sub-tab ul {display: flex; width: 100%; gap: 2px; text-align: center; margin: 30px 0 10px;}
.sub-tab li {flex: 1 1 auto; background: #f4f4f4; }
.sub-tab li.on  {background: #4dab25;}
.sub-tab li a   {display: block; padding: 12px 0;}
.sub-tab li,.sub-tab li a {font-size: 18px; font-weight: 500; color: #222;}
.sub-tab li.on,.sub-tab li.on a   {color: #fff;}

.sub-tab2   {float: left; margin-bottom: 50px;}
.sub-tab2 ul    {display: flex; flex-wrap: wrap;}
.sub-tab2 li    {display: flex; width: calc(100% / 3); box-sizing: border-box; position: relative;} 
.sub-tab2 li.on a {background:#333; color: #fff;}
.sub-tab2 li a  {display: flex; flex-direction: column; justify-content: center; padding: 20px; margin: 5px; font-size: 15px; line-height: 26px; width: 100%; height: auto; border: 1px #ccc solid;}
.sub-tab2 li a p{font-size: 18px; font-weight: 500;}
.sub-tab2 li a:hover    {background:#333; color: #fff; transition: all 0.2s;}

.sub-list .list {display: flex; justify-content: center; gap: 50px; margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px #ddd solid;}
.sub-list .list:last-child  {border-bottom: none;}
.sub-list .list .title   {width: 150px; display: flex; flex-direction: column; align-items: center; gap: 20px;}
.sub-list .list .title span  {font-size: 40px; font-weight: 500; line-height: 1;}
.sub-list .list .title p {background: #4dab25 url(../img/ico_arrow.png) no-repeat center; border-radius: 50%; text-indent: -999999px; width: 40px; height: 40px;}
.sub-list .list .title p a   {display: block; width: 100%; height: 100%;}
.sub-list .list ul  {width: 900px; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px;}
.sub-list .list li          {display: flex; gap: 20px; font-size: 17px; text-align: justify;}
.sub-list .list li .month   {font-weight: 600;}
.sub-cont       {float: left; width: 100%; padding-bottom: 50px;}
.sub-cont ul  {display: grid; grid-template: repeat(2, 340px) / repeat(2, 542px); gap: 15px; margin: 40px 0;}
.sub-cont ul.three  {grid-template: repeat(1, 250px) / repeat(3, 356px);}
.sub-cont li img    {width: 100%; height: 100%; object-fit: cover;}

.read-top   {float: left; width: 100%;  border-bottom: 1px #ccc solid; box-sizing: border-box; margin-bottom: 30px; word-break: keep-all;}
.read-top .stitle   {float: left; width: 100%; font-size: 18px; color: #000; font-weight: 500; margin-bottom: 10px;}
.read-top .title    {float: left; width: 100%; font-size: 32px; font-weight: 600; color: #000; text-align: center; line-height: 1.6; border-top: 2px #000 solid; padding: 30px 0 10px;}
.read-top .title p  {font-size: 24px;}
.read-top .writer   {float: left; width: 100%; font-size: 18px; color: #000; text-align: center; padding-bottom: 30px;}
.read-content  {float: left; width: 100%; font-size: 18px; line-height: 1.8; color: #333; text-align: justify;}
/*.read-top .content p    {text-indent: 20px;}*/
.read-content .stt  {float: left; width: 100%; font-weight: 600; color: #000; margin-bottom: 10px;}
.read-content .stt p{font-size: 24px; line-height: 1.4;}
.read-content .stt span:first-child {font-size: 16px;}

.sub-title  {display: flex; justify-content: space-between; align-items: center; margin: 50px 0 30px;}
.sub-title .title   {font-size: 40px; font-weight: 600; line-height: 1;}

dropdown label, dropdown ul li{display: flex; width: 200px; height: 60px; background: #fff; box-sizing: border-box; border: 1px #000 solid; align-items: center; text-indent: 20px;}
dropdown ul li a        {display: block; line-height: 60px; width: 100%;} 
dropdown ul li:hover    {background: #f4f4f4;}
dropdown ul li:first-child    {border-bottom: none; border-top: none;}
dropdown ul li:last-child     {border-top: none;}
dropdown label:hover, dropdown ul li:hover{box-sizing: border-box; cursor: pointer;}
dropdown label{position: relative; z-index: 2;}
dropdown label::before  {content: ""; background: url(../img/ico_arrow_bt.png)no-repeat; width: 14px; height: 8px; position: absolute; right: 20px;}
dropdown input{display: none;}
dropdown input ~ ul{position: relative;visibility: hidden;opacity: 0;top: -20px;height: 0;z-index: 1;}
dropdown input:checked + label::before  {transform:rotate(180deg); transition: all .1s;}
dropdown input:checked ~ ul{visibility: visible;opacity: 1;top: 0;}

.animate{
  -webkit-transition: all .1s;
  -moz-transition: all .1s;
  -ms-transition: all .1s;
  -ms-transition: all .1s;
  transition: all .1s;  
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
  -moz-backface-visibility:hidden; /* Firefox */
  -ms-backface-visibility:hidden; /* Internet Explorer */
}


/**************** history ****************/
.history-top             {float: left; width: 100%;}
.history-top .title-bg   {float: left; width: 100%; height: 250px; position: relative;}
.history-top .title-bg.bg-2020 {background: url(../img/intro2-bg-2020.jpg) no-repeat 100%; background-size: cover;}
.history-top .title-bg.bg-2010 {background: url(../img/intro2-bg-2010.jpg) no-repeat 100%; background-size: cover;}
.history-top .title-bg.bg-2000 {background: url(../img/intro2-bg-2000.jpg) no-repeat 100%; background-size: cover;}
.history-top .title-bg.bg-1990 {background: url(../img/intro2-bg-1990.jpg) no-repeat 100%; background-size: cover;}
.history-top .title {font-size: 44px; font-weight: 600; color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.history-tab  {display: flex; justify-content: center; width: 100%; margin: 0 auto;}
.history-tab ul {display: flex; width: 100%; gap: 2px; text-align: center; margin: 30px 0 10px;}
.history-tab li {flex: 1 1 auto; background: #f4f4f4; }
.history-tab li.on  {background: #4dab25;}
.history-tab li a   {display: block; padding: 12px 0;}
.history-tab li,.history-tab li a {font-size: 18px; font-weight: 500; color: #222;}
.history-tab li.on,.history-tab li.on a   {color: #fff;}
.history-list .list {display: flex; justify-content: center; gap: 50px; margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px #ddd solid;}
.history-list .list:last-child  {border-bottom: none;}
.history-list .list .year   {width: 150px; display: flex; flex-direction: column; align-items: center; gap: 20px;}
.history-list .list .year span  {font-size: 40px; font-weight: 500; line-height: 1;}
.history-list .list .year p {background: #4dab25 url(../img/ico_arrow.png) no-repeat center; border-radius: 50%; text-indent: -999999px; width: 40px; height: 40px;}
.history-list .list .year p a   {display: block; width: 100%; height: 100%;}
.history-list .list ul  {width: 900px; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px;}
.history-list .list li          {display: flex; gap: 20px; font-size: 17px; text-align: justify;}
.history-list .list li .month   {font-weight: 600;}
.history-cont       {float: left; width: 100%; padding-bottom: 50px;}
.history-cont ul  {display: grid; grid-template: repeat(2, 340px) / repeat(2, 542px); gap: 15px; margin: 40px 0;}
.history-cont ul.three  {grid-template: repeat(1, 250px) / repeat(3, 356px);}
.history-cont li img    {width: 100%; height: 100%; object-fit: cover;}
.history-cont .year {float: left; width: 100%; font-size: 36px; font-weight: 600; color: #000; text-align: center;}
.history-cont .stitle   {float: left; width: 100%; font-weight: 600; font-size: 20px; line-height: 1.6; color: #000; margin: 40px 0; text-align: center;}
.history-cont .content  {float: left; width: 100%; font-size: 18px; text-align: justify;}
 
/* 768px 이하의 화면에 대한 스타일 */
@media screen and (max-width: 1024px) {
    html,body	{line-height: 1.6; letter-spacing: -0.05em;}
    .header {padding: 10px 0;}
    .header .gnb-inner  {width: 90%;}
    .header h1 .header-logo {background-size: 100%; width: 150px; height: 50px;}
    .header .bn-archive img {width: 130px;}
    #footer {padding: 30px 0;}
    .footer .footer-wrap{width: 90%; margin: 0 auto;}
    .footer-info .copyright,.footer-info .copyright p {font-size: 11px; line-height: 1.5; word-break: keep-all;}
    

    .container  {width: 90%; display: block; margin: 20px auto;}
    .section .title {font-size: 20px;}
    .section1 .container {padding-bottom: 30px;}
    .section1 .main-top {gap: 15px;}
    .section1 .main-top .title-bg   {height: 150px;}
    .section1 .main-top .title  {font-size: 26px; white-space: nowrap;}
    .section1 .main-top .title br   {display: none;}
    .section1 .main-top .title span {font-size: 14px;}
    .section1 .main-top .content    {flex-direction: column; gap: 10px; font-size: 16px;}
    .section1 .main-top .content .cont-le   {font-size: 25px;}
    .section2 .main-history ul  {grid-template:repeat(2, 49%) / repeat(2, 49%); gap: 8px;}
    .section2 .main-history li      {flex: 1 1 auto; height: 120px;}
    .section2 .main-history li a    {font-size: 20px;}
    .section2 .main-history li a p  {font-size: 13px; line-height: 1.2;}
    .section3 .container    {padding-bottom: 40px;}
    .section3 .main-video ul    {flex-direction: column; gap: 30px;}
    .section3 .main-video li    {width: 100%;}
    .section3 .main-video li .video {height: auto; max-height: 225px;}
    .section3 .main-video li p  {font-size: 16px; margin-top: 8px;}
    .section4 .main-history ul  {grid-template:repeat(2, 49%) / repeat(2, 49%); gap: 8px;}
    .section4 .main-history li      {width: 100%; flex: auto;}
    .section4 .main-history li a    {font-size: 20px;}
    .section4 .main-history li a p  {font-size: 13px;}

    .history-top .title-bg  {height: 100px;}
    .history-top .title {font-size: 26px; white-space: nowrap;}
    .history-tab .container {width: 100%; margin: 0;}
    .history-tab ul     {margin: 0 auto 20px;}
    .history-tab li, .history-tab li a  {font-size: 14px;}
    .history-list .container    {margin: 10px auto;}
    .history-list .list {flex-direction: column; gap: 15px; margin-bottom: 30px; padding-bottom: 30px;}
    .history-list .list .year   {width: 100%; flex-direction: row; justify-content: space-between; gap: 15px;}
    .history-list .list .year span  {font-size:25px;}
    .history-list .list .year p {width: 25px; height: 25px; background-size: 50%;}
    .history-list .list ul  {width: 100%; gap: 3px;}
    .history-list .list li  {gap: 15px; font-size: 14px;}
    .history-list .list li .month   {min-width: 15px;}
    .history-cont ul    {grid-template: repeat(2, 49%) / repeat(2, 49%); margin: 20px 0; gap: 8px;}
    .history-cont ul.three  {grid-template: repeat(1, 100%) / repeat(3, 32%);}
    .history-cont .year {font-size: 30px;}
    .history-cont .stitle   {margin: 20px 0; font-size: 18px;}
    .history-cont .content  {font-size: 16px;}

    .sub-top .title-bg  {height: 100px;}
    .sub-top .title {font-size: 26px; white-space: nowrap;}
    .sub-tab .container {width: 100%; margin: 0;}
    .sub-title  {margin: 20px 0; flex-direction: column; gap: 20px;}
    .sub-title .title {font-size: 25px;}
    dropdown label, dropdown ul li{height: 40px;}
    dropdown ul li a        {line-height: 40px;} 
    .sub-tab2 li  {width: 50%;}
    .sub-tab2 li a  {font-size: 14px; line-height: 20px; padding: 10px;}
    .read-top .title  {font-size: 30px; line-height: 1.4;}
    .read-top .writer {font-size: 18px;}
    .read-content {font-size: 16px;}
    .read-content .stt p  {font-size: 20px;}
}