@charset "UTF-8";
body {
    opacity: 0;
    transition-duration: 0.7s;
    transition-property: opacity;
  }
body.fade {opacity: 1;}

/* 메인공통 */
.inner{position: relative; width: 100%; max-width: 1500px; min-width: 1420px; margin: 0 auto;}
.section .tit{margin-bottom: 5px; font-size: 36px; color: #000; font-weight: 700;}
.section .tit span{color: #0998bc;}

/* 메인비주얼 */
.main-visual{position: relative; display: flex; justify-content: center; align-items: end; width: 100%; height: 100vh; min-height: 800px; max-height: 950px; overflow: hidden;}
.main-visual:before{position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background: url(../images/main/CK_cm08167283.jpg) no-repeat center; background-size: cover; transition: all 5s;}
.main-visual.on:before{transform: scale(1.1);}
.main-visual .main-txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; color: #fff;}
.main-visual .main-txt .t1{opacity: 0; transform: translateY(30px); transition: all 0.7s; font-family:'GmarketSans'; font-size: 58px;}
.main-visual .main-txt .t2{opacity: 0; transform: translateY(30px); transition: all 0.7s; font-family:'GmarketSans'; font-weight: 700; font-size: 89px;}
.main-visual .main-txt .t2 span{font-size: 72px;}
.main-visual .main-txt .t3{opacity: 0; transform: translateY(30px); transition: all 0.7s; font-size: 25px;}

.main-visual .main-txt.on .t1{opacity: 1; transform: translateY(0);transition-delay:0.2s;}
.main-visual .main-txt.on .t2{opacity: 1; transform: translateY(0);transition-delay:0.4s;}
.main-visual .main-txt.on .t3{opacity: 1; transform: translateY(0);transition-delay:0.6s;}

.m-item-list{display: flex; gap: 30px; padding-bottom: 40px;}
.m-item-list li{flex: 1;}
.m-item-list li a{position: relative; display: block; text-align: center; padding-bottom: 25px;}
.m-item-list li a:before{content: ""; display: block; width: 100%; height: 3px; position: absolute; bottom: 0; left: 0; background-color: #fff; opacity: 50%; transition: all 0.3s;}
.m-item-list li a:hover:before{opacity: 1;}
.m-item-list li a img{margin-bottom: 20px; transition: all 0.3s;}
.m-item-list li a:hover img{transform: translateY(-10px);}
.m-item-list li a p{font-size: 20px; color: #fff;}

/* KOREA.net News */
.News{margin: 85px 0 70px 0;}
.btn-plus{position: absolute; top: 0; right: 0; width: 45px; height: 45px; background-image: url(../images/main/i_plus_02.png); background-size: 19px; background-repeat: no-repeat; background-position: center; background-color: #efefef; border-radius: 50%;}
.btn-plus:hover{background-color: #e3e3e3;}
.btn-plus.type2{background-color: #1e335e; background-image: url(../images/main/i_plus_03.png);}
.btn-plus.type2:hover{background-color: #122243;}

/* Today's Oil Price */
.today-oil-wrap{padding: 50px 0; background-color: #e4f9f8;}
.today-oil{display: flex; background-color: #fff; border-radius: 30px; box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.1);}
.today-oil .info{width: 34%; padding-top: 45px; padding-left: 35px; color: #fff; background-color: #1e335e; background-image: url(../images/main/todayoil_bg.png); background-repeat: no-repeat; background-position: right bottom; border-radius: 30px;}
.today-oil .info h3{margin-bottom: 25px; font-size: 27px;}
.today-oil .info p{font-size: 21px;}
.today-oil .cont{display: flex; width: 66%; padding: 65px 40px;}
.today-oil .cont li{flex: 1; padding: 0 20px; text-align: center; border-right: 1px solid #ddd;}
.today-oil .cont li:last-child{border-right: 0;}
.today-oil .cont li h4{height: 50px; margin-bottom: 35px; line-height: 50px; border-radius: 50px; font-weight: 400; font-size: 22px; color: #fff; background-color: #242a30;}
.today-oil .cont li .price{display: flex; align-items: flex-end; justify-content: center;}
.today-oil .cont li strong{line-height: 1em; color: #000; font-size: 35px;}
.today-oil .cont li .unit{margin-left: 5px; font-size: 20px; color: #000;}
.today-oil .cont li span{position: relative; padding-left: 20px; margin-left: 15px; line-height: 1.3em; font-size: 20px;}
.today-oil .cont li span.up{color: #de2c35;}
.today-oil .cont li span.down{color: #0d63e4;}
.today-oil .cont li span:before{position: absolute; top: 50%; transform: translateY(-50%); left: 0; display: block; content: ""; width: 16px; height: 10px; }
.today-oil .cont li span.up:before{background: url(../images/main/i_up.png) no-repeat;}
.today-oil .cont li span.down:before{background: url(../images/main/i_down.png) no-repeat;}

/* 퀵메뉴 */
.quick ul{display: flex; gap: 30px; justify-content: space-between; margin: 70px 0;}
.quick li{flex: 1; height: 185px; transition: all 0.3s;}
.quick li:nth-child(1){background-color: #29c965;}
.quick li:nth-child(2){background-color: #1e335e;}
.quick li:nth-child(3){background-color: #29c7c9;}
.quick li:nth-child(4){background-color: #3e3e3e;}
.quick li:hover{transform: translate(-10px, -10px); box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.2);}
.quick li a{position: relative; display: block; width: 100%; height: 100%; padding: 35px 30px; box-sizing: border-box;}
.quick li a h3{font-size: 28px; color: #fff;}
.quick li a .img-wrap{position: absolute; bottom: 25px; right: 30px;}
.quick li a:before{position: absolute; bottom: 25px; left: 30px; content: ""; display: block; width: 45px; height: 45px; background: url(../images/main/i_go_03.png) no-repeat; background-size: contain;}