@charset "utf-8";

/* ============================================================
* 파일명    :  new_main.css  
* 최종수정  :  2024.02
* ============================================================ */

/* ============================================================
*  Common	
* ============================================================ */
html, body {scroll-behavior: smooth;}

[id^="sec"] {transition: height .25s;}
[id^="sec"] .inner {max-width: calc(143.4rem + 4rem); padding: 0 2rem; margin: 0 auto; box-sizing: border-box;}
[id^="sec"] .title_box strong span {font-size: 4.2rem; color: #222; font-weight: 700; line-height: 1.2;}
[id^="sec"] .title_box[data-color="w"] strong span {color: #fff;}


@media screen and (max-width:640px) {
	[id^="sec"] .title_box strong span {font-size: 3.2rem;}	
}

#content {overflow-x:hidden;}
html {
	font-size: 10px;
	scroll-behavior: smooth;
}

body {
	font-size: 1rem;
	position:relative;
}


/* ============================================================
*  Main_side_navi
* ============================================================ */
#main_side_navi {position: fixed; top: 43vh; left: 2rem; z-index: 20;}
#main_side_navi > ul {display: flex; flex-direction: column; gap: 1.3rem;}
#main_side_navi > ul > li {position: relative;}
#main_side_navi > ul > li > a {position: relative; display: flex; align-items: center; gap: 1rem; font-size: 14px; color: #fff; font-weight: 400;}
#main_side_navi > ul > li > a::before {content: ""; width: 5px; height: 5px; border-radius: 50%; background-color: rgba(255,255,255,0.6); transition: .25s;}
#main_side_navi > ul > li.on > a::before {width: 7px; height: 7px; background-color: #fff;}
#main_side_navi > ul > li.on > a::after {content: ""; position: absolute; top: 0; bottom: 0; right: calc(100% - 12px); width: 15px; height: 15px; margin: auto 0; border: 1px solid #fff; border-radius: 50%;}


#main_side_navi > ul > li.on > a {font-size: 16px; font-weight: 700;}
#main_side_navi.type-a > ul > li:not(.on) a {color:#959798;}
#main_side_navi.type-a > ul > li.on > a {color:#114B93 !important;}
#main_side_navi.type-a > ul > li.on > a::before { background-color: #114B93; opacity:0.6;}
#main_side_navi.type-a > ul > li:not(.on) a::before {background-color:#959798;}
#main_side_navi.type-a > ul > li.on > a::before {opacity:1;}
#main_side_navi.type-a > ul > li.on> a::after {border: 1px solid #114B93;}


@media screen and (max-width:1500px) {
	#main_side_navi {display: none;}	
}
/* @media screen and (max-width:1200px) { */
/* 	#main_side_navi {display: none;}	 */
/* } */


/* ============================================================
*  Section_01
*  Visual	
* ============================================================ */
#sec01 {position: relative; height: 83.3rem;}
#sec01::before {content: ""; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 200px; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.4) 100%);}
#sec01 .main_slide {position: relative; width: 100%; height: 100%; padding: 0 !important; box-sizing: border-box;}
#sec01 .main_slide .in {
    position: absolute;
    max-width: 1460px;
    text-align: left;
    z-index: 99;
    position: absolute;
    top: 40%;
    left: calc(50% - 72rem);
    transition : .25s;
}


#sec01 .main_slide li.on .in>.text p,
#sec01 .main_slide li.on .in>.text strong{
    opacity: 0;
    animation-name: text-ani;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-timing-function: linear
}

#sec01 .main_slide .in>.text p {display: block; line-height: normal; font-size: 2.6rem; color: #fff; letter-spacing:2px;}
#sec01 .main_slide .in>.text strong {display: block; line-height: normal; font-size: 7.8rem; padding-top: 1rem; color: #fff; }

#sec01 .main_slide .in>.text strong{
	-webkit-animation-delay: 1.3s;
    animation-delay: 1.3s
}
#sec01 .main_slide .in>.text p{
	-webkit-animation-delay: 0.6s;
    animation-delay:0.6s
}
@-webkit-keyframes text-ani {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}


#sec01 .main_slide .control {
    position: absolute;
    bottom: 22rem;
    left: calc(50% - 72rem);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 25px;
    z-index: 10;
}
#sec01 .main_slide .control .progress {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap:1rem;
    position: relative;
    max-width: 23rem;
    width: 100%;
    height: 3px;
    margin-right: 1rem;
    background-color: transparent;
}

 #sec01 .main_slide .control .progress .progress-slider {
    width: calc(100% / 3);
    height: 6px;
}
 #sec01 .main_slide .control .progress .progress-slider > a {display:block; position: relative; width:100%; height:100%; background-color: rgba(255,255,255,0.5);}

 #sec01 .main_slide .control .progress .progress-slider a.on::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #fff;
    animation: progress-slider 5.5s ease-out forwards;
    -webkit-animation: progress-slider 5.5s ease-out forwards;
}




/*progress-slider animation*/
@keyframes progress-slider {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

#sec01 .main_slide .control:after {
    content: "";
    display: block;
    clear: both;
}

 #sec01 .main_slide .control .count {
    position: relative;
    display: inline-flex;
    margin: 0 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #222;
    font-weight: 600;
}

#sec01 .main_slide .control .count i {
    padding-left: 3px;
    font-weight: 500;
}

 #sec01 .main_slide .control .count span {
    padding: 0 5px;
    color: #666;
    font-weight: 500;
}

 #sec01 .main_slide .control a[class*="btn_"] {
    overflow: hidden;
    display: inline-block;
    background-color: rgba(0,0,0,.3) !important;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    margin: 0 5px;
    text-indent: -1000px;
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

#sec01 .main_slide .control .btn_stop {background-image: url(/resources/images/main/btn_stop.svg);}
#sec01 .main_slide .control .btn_play {background-image: url(/resources/images/main/btn_play.svg);}

#sec01 .main_slide .control a.btn_right,
#sec01 .main_slide .control a.btn_left {display: none;} 


 #sec01 .main_slide .move ul {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

 #sec01 .main_slide .move {position:relative;}

 #sec01 .main_slide .move::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg, #000, #fff); opacity:0.1;}

 #sec01 .main_slide.type_03 .move {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

 #sec01 .main_slide.type_03 .move ul {
    width: 100%;
}

 #sec01 .main_slide.type_03>.move>ul>li {
    float: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}

 #sec01 .main_slide.type_03>.move>ul>li:first-child {
    left: 0;
}

 #sec01 .main_slide.type_03>.move>ul>li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#sec01 .main_slide>.move>ul>li.on {
    opacity: 1;
    z-index: 10;
    -webkit-transition: opacity 1s linear 0s;
    transition: opacity 1s linear 0s;
}

/* ============================================================
*  @media
* ============================================================ */
@media screen and (max-width:1700px) {
	#sec01 .main_slide .in,
	#sec01 .main_slide .control{left: 15rem;}	
}

@media screen and (max-width:1500px) {
	#sec01 .main_slide .in,
	#sec01 .main_slide .control{left: 2rem;}	
}

@media screen and (max-width:1024px) {
	#sec01 {height: 63.3rem}
	#sec01 .main_slide .in>.text p {font-size: 1.8rem;}	
	#sec01 .main_slide .in>.text strong {font-size: 5rem;}
}

@media screen and (max-width:600px) {
	#sec01 .main_slide .in,
	#sec01 .main_slide .control{bottom: 24rem;}	
	#sec01 .main_slide .in>.text p {font-size:15px;}
	#sec01 .main_slide .in>.text strong {font-size:38px;}
}
@media screen and (max-width:380px) {
	#sec01 .main_slide .in>.text p {font-size:14px;}
	#sec01 .main_slide .in>.text strong {font-size:30px;}
}



/* POPUP */
.popup_wrap {display: flex; position: absolute; bottom: 0; left: calc(100% - 6rem); z-index: 30; height: 36.6rem; box-shadow: 10px 5px 20px -10px rgba(0,0,0,.3); transition: left .3s;}
.popup_wrap.open {left: calc(100% - 66.5rem);}
.popup_wrap .popup_btn {display:flex; position: relative; top: 0; left: 0; width: 6rem; height: 100%; padding: 3.5rem 0; border:none; border-radius: 8px 0 0 8px; background-color: #fff; cursor: pointer; box-sizing: border-box; align-items: flex-start; justify-content: center;}
.popup_wrap .popup_btn::before {content: ""; position: absolute; bottom: 3rem; right: 0; left: 0;  z-index: 10; width: 17px; height: 17px; margin: 0 auto; background-image: url(/resources/images/main/btn_arrow_right.png); background-repeat: no-repeat; background-position: center; transform: rotate(180deg); transition: transform .25s;}
.popup_wrap.open .popup_btn::before {transform: translate(0);}
.popup_wrap .popup_btn .btn-wrap {display:flex; margin-top:50px; font-size: 2rem; color: #222; font-weight: 700; line-height: 6rem; transform: rotate(90deg);}
.popup_wrap .popup_btn .btn-wrap span {font-size:2rem;}
.popup_wrap .popup_btn .btn-wrap .strong {margin-right:6px; font-size: 2rem; color: #114b93; font-weight: 700;}

.popup_wrap .js_slide{position:relative; z-index: 30; width:60.5rem; height:36.6rem; padding:0; box-sizing:border-box;}
.popup_wrap .js_slide .control{position:absolute; right:0; bottom:0; z-index:1; width:17rem; height: 4.7rem; padding:0; border-radius: 8px 0 0 0 ; background-color: rgba(0,0,0,0.5); text-align:center;}
.popup_wrap .js_slide .control a[class*="btn_"]{overflow:hidden; display:inline-block; width:2rem; height:100%; text-indent:-1000px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.popup_wrap .js_slide .control a.btn_play{display:none;}

.popup_wrap .js_slide .control a.btn_stop {background-image: url(/resources/images/main/btn_stop.svg); background-size: 2rem;}
.popup_wrap .js_slide .control a.btn_play {background-image: url(/resources/images/main/btn_play.svg); background-size: 2rem;}
.popup_wrap .js_slide .control a.btn_right, 
.popup_wrap .js_slide .control a.btn_left {background-image: url(/resources/images/main/btn_arrow_right_w.png); background-size: 8px;}
.popup_wrap .js_slide .control a.btn_left {transform: rotate(180deg);}


.popup_wrap .js_slide .control .count{display:inline-block; margin-left: 5px; font-size: 16px; letter-spacing:2px; vertical-align:middle; color: #fff; font-weight: 700;}
.popup_wrap .js_slide .control .count span{font-size: 14px; font-weight:400;}
.popup_wrap .js_slide .control .count i {display: inline-block; margin: 0 4px 0 2px;font-weight: 400;}
.popup_wrap .js_slide .control a[class*="btn_"]{border:none; vertical-align:middle;}

.popup_wrap .js_slide .move{overflow:hidden; position:absolute; z-index:0; left: 0; top: 0; width:100%; height:100%;}
.popup_wrap .js_slide .move ul{overflow:hidden; position:absolute; left:0; top:0; width:100%; height:100%;}
.popup_wrap .js_slide .move ul li{float:none;  position:absolute; left: 100%; top: 0; width:100%; height:100%; padding:0;}
.popup_wrap .js_slide .move ul li:first-child{left:0;}
.popup_wrap .js_slide .move ul li a{overflow:hidden; display:block; position:relative; height:100%; text-align:center; background-color:#eee; box-sizing:border-box; transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}
.popup_wrap .js_slide .move ul li a span{display:block; position:absolute; left:50%; top:0; width:2000px; height:100%; margin-left:-1000px; text-align:center;}
.popup_wrap .js_slide .move ul li img{display:block; margin:0 auto; height:100%;}

/* ============================================================
*  @media
* ============================================================ */

@media screen and (max-width:1024px) {
	.popup_wrap.open {height: 30.6rem;}
	.popup_wrap.open {left:calc(100% - 58.5rem)}	
	.popup_wrap .js_slide {height:30.6rem; width:52.5rem;}
}
@media screen and (max-width:600px) {
	.popup_wrap {height: 23rem;}
	.popup_wrap.open {height: 23rem;}
	.popup_wrap.open {left:calc(100% - 43rem);}
	.popup_wrap .js_slide {width:37rem; height:23rem;}
	.popup_wrap .popup_btn .btn-wrap {margin-top:40px;}
}
@media screen and (max-width:420px) {
	.popup_wrap {height: 20.5rem; left:calc(100% - 3.4rem);}
	.popup_wrap .popup_btn {width:3.4rem; }
	.popup_wrap.open{left: calc(100% - 36rem); height: 20.5rem;}
	.popup_wrap .js_slide {height: 20.5rem; width: 33.6rem;}
/* 	.popup_wrap .popup_btn .btn-wrap {margin-right:10px;} */
	.popup_wrap .popup_btn .btn-wrap { margin-top: 20px;}
	.popup_wrap .popup_btn .btn-wrap span {line-height:3.4rem;}
	.popup_wrap .popup_btn .btn-wrap span,
	.popup_wrap .popup_btn .btn-wrap .strong {font-size:14px;}
	
	.popup_wrap .js_slide .control .count {font-size: 14px;}
}
@media screen and (max-width:380px) {
	.popup_wrap {height: 17.9rem;}
	.popup_wrap.open{left: calc(100% - 33rem); height: 17.9rem;}
	.popup_wrap .js_slide {height: 17.9rem; width: 30rem;}
}


/* ============================================================
*  Section_02	
*  QUICK SERVICE
* ============================================================ */
#sec02 {}
#sec02 .sec_top{position: relative; height: 29.2rem; transition: height .25s;}
#sec02 .sec_top::before {content: "KOMEC"; position: absolute; bottom: 0; height: 13.5rem; left: calc(50% + 30rem); font-size: 14.3rem; color: rgba(17,75,147,0.1); font-weight: 900;}
#sec02 .sec_top .inner {display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%;}
#sec02 .sec_top .inner strong { position: relative; font-size:3.6rem; color: #222; font-weight: 700; line-height: 1.3;}
#sec02 .sec_top .inner strong p {display: block; font-size:inherit; color: #222; font-weight: inherit;}
#sec02 .sec_top .inner strong span {display: inline; font-size:inherit; color: #114b93; font-weight: inherit;}
#sec02 .sec_top .inner strong::before {content: ""; position: absolute; top: calc(100% - 5.5rem); right: 0; z-index: -1; width: 9rem; height: 9rem; background: url(/resources/images/main/img_w_drop.png); background-size: contain; background-repeat: no-repeat;}

#sec02 .sec_bot{height: 55.3rem; background-image: url(/resources/images/main/bg_section_02.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
#sec02 .sec_bot .inner {display: flex; gap: 3rem; height: 100%;}
#sec02 .sec_bot .inner .title_box {display: flex; flex-direction: column; justify-content: center; width: 33.6rem; height: 100%;}
#sec02 .sec_bot .inner .title_box span {display: block;}
#sec02 .sec_bot .inner .title_box p {display: block; margin-top: 3.8rem; font-size: 1.8rem; color: #fff; font-weight: 600;}

#sec02 .sec_bot .inner .service_box {flex-grow: 1; height: 100%;} 
#sec02 .sec_bot .inner .service_box ul {display: flex; height: 100%;}
#sec02 .sec_bot .inner .service_box ul li {width: calc(100% / 3); border-left: 1px solid rgba(187,187,187,0.3);}
#sec02 .sec_bot .inner .service_box ul li:last-child {border-right: 1px solid rgba(187,187,187,0.3);}
#sec02 .sec_bot .inner .service_box ul li a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap:4rem; width: 100%; height: 100%; background-image: none; transition: all .25s;} 
#sec02 .sec_bot .inner .service_box ul li a:hover {background-image: url(/resources/images/main/bg_service_hover.png);}
#sec02 .sec_bot .inner .service_box ul li a .txt_box {font-size: 2.2rem; color: #fff; font-weight: 500;}
#sec02 .sec_bot .inner .service_box ul li a .btn_img {display: block; width: 0; height: 0; border-radius: 50%; background-color: #fff; background-image: url(/resources/images/main/icon_arrow_r.png); background-repeat: no-repeat; background-position: center; opacity: 0; 
    transition: width .3s 0.1s,
                height .3s 0.1s,
                opacity .5s 0s;         
}
#sec02 .sec_bot .inner .service_box ul li a:hover .btn_img {width: 7.4rem; height: 7.4rem; opacity: 1; flex-shrink:0;}
@media screen and (max-width:1650px) {
	#sec02 .sec_top::before {left:auto; right:10px;}
}
@media screen and (max-width:1024px) {
	#sec02 .sec_top {height: 18.2rem;}
	#sec02 .sec_top::before {display: none;}
	#sec02 .sec_top .inner strong {font-size: 2.8rem;}
	
	#sec02 .sec_bot .inner .service_box ul {flex-direction: column; width: 100%;}	
	#sec02 .sec_bot .inner .service_box ul li {width: 100%; height: calc(100% / 3); border-right: 1px solid rgba(187,187,187,0.3); border-bottom: 1px solid rgba(187,187,187,0.3);}
	#sec02 .sec_bot .inner .service_box ul li a {flex-direction: row; justify-content: flex-start; padding: 0 3rem;}
	#sec02 .sec_bot .inner .service_box ul li a .img_box {width: 7rem;}
	#sec02 .sec_bot .inner .service_box ul li a .btn_img {margin-left: auto;}
	#sec02 .sec_bot .inner .service_box ul li a:hover .btn_img {width: 5rem; height: 5rem; background-size:2rem; opacity: 1;}
}

@media screen and (max-width:750px) {
	#sec02 .sec_top {height: 23.2rem}
	#sec02 .sec_bot {height: auto; padding: 5rem 0;}
	#sec02 .sec_bot .inner {flex-wrap: wrap;}
	#sec02 .sec_bot .inner .title_box {width: 100%;}
	#sec02 .sec_bot .inner .title_box span {display: inline-block;}
	#sec02 .sec_bot .inner .title_box span ~ span {margin-left: 1rem;}
	#sec02 .sec_bot .inner .title_box p {margin-top: 1rem;}
	
	#sec02 .sec_bot .inner .service_box {margin-top: 2rem;}
	#sec02 .sec_bot .inner .service_box ul li,
	#sec02 .sec_bot .inner .service_box ul li:last-child {border-left: none; border-right:none;}
	#sec02 .sec_bot .inner .service_box ul li a .img_box {width: 6rem;}
	#sec02 .sec_bot .inner .service_box ul li a {padding: 2rem 3rem; gap:1.5rem;}
	#sec02 .sec_bot .inner .service_box ul li a:hover .btn_img {width:4rem; height:4rem;}
	#sec02 .sec_bot .inner .service_box ul li a:hover {background-image: none;}
	
	#sec02 .sec_top .inner strong::before {width:6rem; height:6rem; right: 4rem;}
}

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

	#sec02 .sec_top .inner strong,
	#sec02 .sec_top .inner strong span {font-size: 2.2rem;}
	#sec02 .sec_top .inner strong p {font-size:2.2rem;}
	[id^="sec"] .title_box strong span {font-size:2.3rem;}
	#sec02 .sec_bot .inner .service_box ul li a .txt_box {font-size:1.7rem;}
}





 

/* ============================================================
*  Section_03
*  KOMEC NEWS	
* ============================================================ */
#sec03 {height: 59.5rem; background-image: url(/resources/images/main/bg_section_03.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
#sec03 .inner {display: flex; flex-direction: column; justify-content: center; height: 100%;}
#sec03 .title_box {text-align: center;}
#sec03 .news_wrap {display: flex; gap: 4rem; margin-top: 6.5rem;}
#sec03 .news_wrap .news_box {width: calc(100% / 2);}
#sec03 .news_wrap .news_box .top {display: flex; align-items: center; justify-content: space-between;}
#sec03 .news_wrap .news_box .top > p {font-size: 2.5rem; color: #222; font-weight: 700;}
#sec03 .news_wrap .news_box .top .more_btn {position: relative; width: 2rem; height: 2rem; transform: rotate(0); transition: transform .25s;}
#sec03 .news_wrap .news_box .top .more_btn:hover {transform: rotate(180deg);}
#sec03 .news_wrap .news_box .top .more_btn::before,
#sec03 .news_wrap .news_box .top .more_btn::after {content: ""; position: absolute; top: 50%; left: 50%; background-color: #222; transform: translate(-50%, -50%);}
#sec03 .news_wrap .news_box .top .more_btn::before {width: 100%; height: 2px;}
#sec03 .news_wrap .news_box .top .more_btn::after {width: 2px; height: 100%;}

#sec03 .news_wrap .news_box .bot {display: flex; flex-direction: column; gap: 2.5rem; width: 100%; margin-top: 2rem;}
#sec03 .news_wrap .news_box .bot li {}
#sec03 .news_wrap .news_box .bot li a {display: flex; align-items: center; width: 100%; height: 9.2rem; padding: 0 4rem; border: 2px solid transparent; border-radius: 8px; background-color: #fff; transition: .25s; box-sizing: border-box; box-shadow: 6px 8px 22px -4px rgba(0,0,0,0.2);}
#sec03 .news_wrap .news_box .bot li a .day_box {display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; position: relative; padding-right: 4rem;}
#sec03 .news_wrap .news_box .bot li a .day_box::before {content: ""; position: absolute;  top: 0; bottom: 0; right: 0; width: 1px; height: 28px; margin: auto 0; background-color: #c2d2d6; }
#sec03 .news_wrap .news_box .bot li a .day_box .day {font-size: 3rem; color: #222; font-weight: 700;}
#sec03 .news_wrap .news_box .bot li a .day_box .year {font-size: 1.5rem; color: #666; font-weight: 600;} 
#sec03 .news_wrap .news_box .bot li a .t_box {overflow: hidden; position: relative; max-width: 100%; padding-left: 4rem; padding-right: 1rem; font-weight:500; font-size:1.7rem; white-space: nowrap; text-overflow: ellipsis;}
#sec03 .news_wrap .news_box .bot li a.new .t_box {padding-right: 4rem; margin-right: 1rem;}
#sec03 .news_wrap .news_box .bot li a.new .t_box::after {content: "NEW"; position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0; font-size: 1.5rem; color: #3e86c1; font-weight: 700;}
#sec03 .news_wrap .news_box .bot li a .more_box {flex-shrink: 0; width: 4.5rem; height: 4.5rem; margin-left: auto; border: 1px solid #eaeaea; border-radius: 50%; background-color: #fff; background-image: url(/resources/images/main/icon_arrows_news.png); background-repeat: no-repeat; background-position: 13px center; transition: .25s;} 

#sec03 .news_wrap .news_box .bot li a:hover {border-color: #114b93;}
#sec03 .news_wrap .news_box .bot li a:hover .more_box {background-color: #114b93; border-color: #114b93; background-position: -18px center;}


@media screen and (max-width:1024px) {
	#sec03 {height: auto; padding: 5rem 0 7rem;}
	#sec03 .news_wrap {flex-wrap: wrap; flex-direction: column;}
	#sec03 .news_wrap .news_box {width: 100%;}	
}

@media screen and (max-width:640px) {
		#sec03 .news_wrap .news_box .bot {gap:1.5rem;}
	#sec03 .news_wrap .news_box .bot li a {flex-direction: column; justify-content: center; align-items: flex-start; gap:5px; padding: 0 3rem;}
	#sec03 .news_wrap .news_box .bot li a .day_box {order:2; padding: 0;}
	#sec03 .news_wrap .news_box .bot li a .day_box::before {display: none;}
	#sec03 .news_wrap .news_box .bot li a .day_box .day {display: none;}
	#sec03 .news_wrap .news_box .bot li a .day_box .year {font-size: 14px; font-weight:500;}
	#sec03 .news_wrap .news_box .bot li a .t_box {padding: 0; font-size: 16px;}
	
	#sec03 .news_wrap .news_box .bot li a .more_box {display: none;}
	#sec03 .news_wrap .news_box .top > p {font-size:1.9rem;}
	#sec03 .news_wrap .news_box .top .more_btn {width:1.6rem; height:1.6rem;}

}




/* ============================================================
*  Section_04
*  KOMEC PROMOTION
* ============================================================ */
#sec04 {}
#sec04 .sec_top {padding-top: 12.6rem; padding-bottom: 11.1rem; background-image: url(/resources/images/main/bg_section_04.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; box-sizing: border-box;}
#sec04 .sec_top .title_box {text-align: center;}
#sec04 .sec_top .midd_box {margin-top: 4.2%;}
#sec04 .sec_top .midd_box > ul {display: flex; gap: 4rem;}
#sec04 .sec_top .midd_box > ul > li {width: calc((100% - 4rem) / 2);}
#sec04 .sec_top .midd_box > ul > li > p {font-size: 2.5rem; color: #fff; font-weight: 700;}
#sec04 .sec_top .midd_box > ul > li .inner_box {position: relative; margin-top: 2rem;}
#sec04 .sec_top .midd_box > ul > li .inner_box::after {content: ""; display: block; padding-top: 55.69%;}
#sec04 .sec_top .midd_box > ul > li .inner_box a {position: relative; overflow: hidden; display: block; width: 100%; height: 100%; border-radius: 8px;}

#sec04 .sec_top .midd_box > ul > .youtube_box .inner_box::after {position: absolute;}
#sec04 .sec_top .midd_box > ul > .youtube_box .inner_box a::before {content: ""; position: absolute; top: 50%; left: 50%; z-index: 1; width: 8rem; height: 5.5rem; background-image: url(/resources/images/main/icon_youtube.png); background-repeat: no-repeat; background-position: center; background-size: contain; transform: translate(-50%, -50%);}
#sec04 .sec_top .midd_box > ul > .youtube_box .inner_box a img {display: block; max-width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform .3s;}
#sec04 .sec_top .midd_box > ul > .youtube_box .inner_box a:hover img {transform: scale(1.1);}

#sec04 .sec_top .midd_box > ul > .youtube_box .iframe_box {overflow:hidden; position: relative; margin-top:2rem; border-radius: 8px;}
#sec04 .sec_top .midd_box > ul > .youtube_box .iframe_box:before {content: ""; display: block; padding-top: 55.69%;}
#sec04 .sec_top .midd_box > ul > .youtube_box .iframe_box iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box {overflow: hidden; position: relative; border-radius: 8px;}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box::after {background-color: #e4edf7; background-image: url(/resources/images/main/bg_symbol.png); background-repeat: no-repeat; background-position: calc(100% + 4rem) calc(100% + 6rem);}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box {display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; padding: 5.8% 11.5%; box-sizing: border-box;}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .img_box {position: relative; flex-shrink: 0; height: 100%; margin-right: 60px;}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .img_box img {display: block; max-width: 100%; height: 100%; box-shadow:2px 4px 12px 0 rgba(0,0,0,0.1);}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box {flex-grow:1;}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box p {font-size: 2.5rem; color: #222; font-weight: 700; word-break: keep-all; line-height: 1.2;}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box .btn_download {display: flex; align-items: center; justify-content: space-between; position: relative; max-width: 25rem; width: 100%; min-height: 6rem; padding: 5% 11%; margin-top: 13%; background-color: #fff; border-radius: 8px; border: 1px solid #114b93; font-weight:500; font-size:1.7rem;color: #20538d; box-shadow:2px 4px 12px 0 rgba(0,0,0,0.1); word-break: keep-all;}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box .btn_download::after {content: "";  width: 15px; height: 19px; background-image: url(/resources/images/main/icon_download.png); background-size:cover; background-repeat: no-repeat; background-position: center;}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box .btn_download span { font-size: 1.7rem; color: #20538d; font-weight: 600;}

#sec04 .sec_top .bot_box {display: flex; align-items: center; gap: 5rem; height: 10.5rem; padding: 0 3rem; margin-top: 3.3%; border-radius: 50.5px; background-color: #113663; box-sizing: border-box;}
#sec04 .sec_top .bot_box > strong {position: relative; padding-left: 10rem; font-size: 2.5rem; color: #fff; font-weight: 700; line-height: 1.2;}
#sec04 .sec_top .bot_box > strong::before {content: ""; position: absolute; top: 50%; left: 2.2rem; width: 5.2rem; height: 4.1rem; background-image: url(/resources/images/main/icon_sns_tit.png); background-repeat: no-repeat; background-size: contain; transform: translateY(-50%);}
#sec04 .sec_top .bot_box > strong::after {content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% + 2.5rem); width: 1px; height: 14px; margin: auto 0; background-color: rgba(255,255,255,.3);}
#sec04 .sec_top .bot_box > p {font-size: 1.5rem; color: rgba(255,255,255,0.7); font-weight: 400;font-size:1.7rem;}
#sec04 .sec_top .bot_box .sns_box {display: flex; gap: 1.6rem; max-width: 62rem; width: 100%; margin-left: auto;}
#sec04 .sec_top .bot_box .sns_box li {width: calc((100% - 3.2rem) / 3);}
#sec04 .sec_top .bot_box .sns_box li a {display: flex; align-items: center; justify-content: center; gap: 1.5rem; width: 100%; min-height: 6rem; border: 1px solid rgba(255,255,255,0.5); border-radius: 30px; transition: .25s;}
#sec04 .sec_top .bot_box .sns_box li a .img_box {}
#sec04 .sec_top .bot_box .sns_box li a .img_box img {display: block; max-width: 100%; width:100%; height: 100%;}
#sec04 .sec_top .bot_box .sns_box li a .txt_box {font-size: 1.8rem; color: #fff; font-weight: 600; transition: .25s;}

#sec04 .sec_top .bot_box .sns_box li a:hover {background-color: #fff;}
#sec04 .sec_top .bot_box .sns_box li a:hover .txt_box {color: #222;}

/* interaction */
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box .btn_download {transition:background 0.3s, color 0.3s;}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box .btn_download::after {transition:background 0.3s;}

#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box .btn_download:hover {background-color:#114b93; color:#fff;}
#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box .btn_download:hover::after {background-image:url(/resources/images/main/icon_download_on.png);}


/* sec04 bottom */
#sec04 .sec_bot { padding-top: 8rem; padding-bottom: 8rem; box-sizing: border-box; background-image: url(/resources/images/main/img_sec04_bot.png); background-repeat: no-repeat; background-position: calc(50% + 75rem) bottom;}
#sec04 .sec_bot .inner {display: flex; align-items: center; justify-content: space-between; gap: 6rem;}
#sec04 .sec_bot .title_box {flex-shrink: 0;}
#sec04 .sec_bot .title_box p {font-size: 1.8rem; color: #666; font-weight: 600; margin-top: 2.5rem; word-break:break-word;}
#sec04 .sec_bot .partner_box {flex-grow: 1;}
#sec04 .sec_bot .partner_box > ul {display: flex; gap: 1.6rem 1.6rem; flex-wrap: wrap;}
#sec04 .sec_bot .partner_box > ul > li {width: calc((100% - (1.6rem * 4)) / 5);}
#sec04 .sec_bot .partner_box > ul > li > a {display: flex; align-items: center; justify-content: center; width: 100%; height: 7.2rem; border: 1px solid #d9e5e9; border-radius: 8px; background-color: #fff; transition: .25s; box-shadow: 0px 0px 17px -6px rgba(0,0,0,0.2);}
#sec04 .sec_bot .partner_box > ul > li > a:hover {border-color: #114b93; box-shadow: 0px 0px 20px -4px rgba(17,75,147,0.4);}


@media screen and (max-width:1750px) {
	#sec04 .sec_bot {background-position: 97% bottom;}
}

@media screen and (max-width:1024px) {
	#sec04 .sec_top {padding-top: 5rem; padding-bottom: 7rem;}
	#sec04 .sec_top .midd_box > ul {flex-wrap: wrap; flex-direction: column;}
	#sec04 .sec_top .midd_box > ul > li {width: 100%;}
	#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box::after {background-size: 24rem;}
	
	#sec04 .sec_top .bot_box {flex-wrap: wrap; gap:3rem; height: auto; padding: 3rem; border-radius: 8px}
	#sec04 .sec_top .bot_box > p {padding-left: 2rem;}
	#sec04 .sec_top .bot_box .sns_box {width: 100%; max-width: 100%; margin: 0 auto;}
	
	#sec04 .sec_bot {padding-top: 5rem; padding-bottom: 5rem;}
	#sec04 .sec_bot .inner {flex-wrap: wrap;}
	#sec04 .sec_bot .title_box p {margin-top: 1rem;}
}

@media screen and (max-width:640px) {
	
	#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box {padding: 10px 15px;}
	#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .img_box {margin-right:15px; flex-shrink:0;}
	#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box {flex-grow:1;}
	#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .img_box img {max-width:unset; width:auto;}
	#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box p {font-size: 2.2rem; line-height: 1.4;}
	
	#sec04 .sec_top .bot_box {justify-content: center;}
	#sec04 .sec_top .bot_box > strong {text-align: center;}
	#sec04 .sec_top .bot_box > strong::after {display: none;}
	#sec04 .sec_top .bot_box > p {width: 100%; font-size: 14px;text-align: center; line-height: 1.4;}
	#sec04 .sec_top .bot_box .sns_box {max-width: 27rem;}
	#sec04 .sec_top .bot_box .sns_box li {display:flex; justify-content:center;}
	#sec04 .sec_top .bot_box .sns_box li a {width: 6rem;}
	#sec04 .sec_top .bot_box .sns_box li a:hover {background-color: transparent; border-color: #fff}
	#sec04 .sec_top .bot_box .sns_box li a .txt_box {display: none;}
	
	
	#sec04 .sec_bot .partner_box > ul > li {width:calc((100% - (1.6rem * 2)) / 3);}
	
	#sec04 .sec_bot .partner_box > ul {gap:1.3rem;}
	#sec04 .sec_bot .partner_box > ul > li > a {overflow:hidden; height:5rem;}
		 
	#sec04 .sec_top .midd_box > ul > li > p {font-size:1.9rem;}
	#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box p {font-size:1.4rem; line-height:1.2;}
	#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box .btn_download {margin-top:9%; min-height:3.8rem; padding-right:15px;}
	#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box::after {background-size:18rem;}
	#sec04 .sec_top .midd_box > ul > .brochure_box .inner_box .in_box .txt_box .btn_download {font-size:1.5rem;}
	#sec04 .sec_top .bot_box > p {padding-left:0; font-size:1.4rem;}
	#sec04 .sec_bot .title_box {flex-shrink: 1;}

}
@media screen and (max-width:370px) {
	#sec04 .sec_bot .partner_box > ul > li > a img {width:100%;}
}