@charset "utf-8";
@import "../css/content.css";

/*****************************************************************
                              layout
*****************************************************************/
#wrap{position: relative; width: 100%; height: 100%; box-sizing: border-box;}

/* header */
#header{width: 100%; height: 85px; position: fixed; left: 0; top: 0; background: #fff; border-bottom: 1px solid #e7e7e7; z-index: 999;}
#header.on{border-bottom: 1px solid #d2d2d2 !important;}
.gnb_bg{display: none; margin-top: 1px; width:100%; height: 185px; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); z-index: 100;}
.gnb_bg.on{display: block;}

#header .in_header{position: relative; display: flex; align-items: center; width: 1280px; height: 100%; margin: 0 auto; padding: 0 40px;}
#header .logo_wrap{flex: 3; width: 150px;}
#header .logo_n{width: 150px;height: 43px;background: url(../images/common/kyobo_logo_n.svg) center center no-repeat;background-size: cover;text-indent: -9999px;}
#header .logo_n a{display: block; width: 100%; height: 100%;}
#header .gnb_wrap{flex: 6; /*margin: 0 0 0 153px;*/ width: 680px; height: 85px; line-height: 85px;}
#header .gnb_wrap > ul{display: flex; justify-content: center; align-items: center; height: 100%;}
#header .gnb_wrap > ul > li{position: relative; padding-top: 8px; width: 25%; height: 100%; box-sizing: border-box; text-align: center; vertical-align: middle; cursor: pointer;}
#header .gnb_wrap > ul > li > a{color: #000; font-size: 17px; font-weight: 500; letter-spacing: -0.05em;}
#header .gnb_wrap > ul > li::after{content: '';display: block; border-bottom: 2px solid #0159b0; position: relative; top: -10px; transform: scaleX(0); transition: transform 300ms ease-in-out;}
#header .gnb_wrap > ul > li.active::after{transform: scaleX(1);}
#header .gnb_wrap > ul > li.active a{color: #0159b0; font-weight: 700;}

#header .gnb_wrap > ul > li .gnb_sub{display: none; padding: 25px 0 35px; background: #fff; position: absolute; top: 86px; width: 100%; height: 185px; z-index: 100;}
#header .gnb_wrap > ul > li .gnb_sub > li{line-height: 30px;}
#header .gnb_wrap > ul > li .gnb_sub > li > a{color: #000 !important; font-size: 16px;}
#header .gnb_wrap > ul > li.active .gnb_sub > li > a:hover{color: #0159b0 !important; font-weight: 400;}
#header .gnb_wrap > ul > li.active .gnb_sub > li > a{font-weight: 300;}

.allmenu_wrap{flex: 1;}
.allmenu_wrap .allmenu{width: 23px;height: 15px;position: absolute;top: 40px;right: 40px;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;z-index: 5100;}
.allmenu_wrap .allmenu span{display: block;position: absolute;height: 1.5px;width: 100%;background: #000;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
.allmenu_wrap .allmenu span:nth-child(1){top: 0px;}
.allmenu_wrap .allmenu span:nth-child(2),.allmenu span:nth-child(3){top: 7px;}
.allmenu_wrap .allmenu span:nth-child(4){top: 14px;}
.allmenu_wrap .allmenu.on span:nth-child(1){top: 18px;width: 0%;left: 50%;}
.allmenu_wrap .allmenu.on span:nth-child(2){-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
.allmenu_wrap .allmenu.on span:nth-child(3){-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
.allmenu_wrap .allmenu.on span:nth-child(4){top: 18px;width: 0%;left: 50%;}

.sitemap{display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: #fff;}
.sitemap.on{display: block; z-index: 5000;}
.sitemap .in_sitemap{position: absolute; top: 100px; left: 50%; transform: translate(-50%); min-width: 650px;}
.sitemap .in_sitemap p{font-size: 36px; font-weight: 500; text-align: center;}
.sitemap .in_sitemap .m_gnb{margin-top: 80px;}
.sitemap .in_sitemap .m_gnb > li{display: block;}
.sitemap .in_sitemap .m_gnb > li + li{margin-top: 55px;}
.sitemap .in_sitemap .m_gnb > li > a{color: #000; font-size: 20px; font-weight: 500;}
.sitemap .in_sitemap .m_gnb_sub{margin-top: 25px; display: flex; flex-wrap: wrap;}
.sitemap .in_sitemap .m_gnb_sub > li{display: flex; width: 25%;}
.sitemap .in_sitemap .m_gnb_sub > li::before{content: '·'; padding-right: 3px;}
.sitemap .in_sitemap .m_gnb_sub > li > a{color: #000; font-size: 17px; font-weight: 300;}
.sitemap .in_sitemap .m_gnb_sub > li > a:hover{color: #005bac; font-weight: 400;}


@media (max-width: 1280px){
    
    #header .in_header{width: 100%;}

}

@media (max-width: 1024px){

    .gnb_wrap{display: none;}

}

@media (max-width: 768px){

    .sitemap .in_sitemap{min-width: 450px;}
    .sitemap .in_sitemap .m_gnb{text-align: center;}
    .sitemap .in_sitemap .m_gnb_sub > li{padding: 10px 10px 10px 10%; width: 50%;}

}

@media (max-width: 640px){


    #header{height: 65px;}
    #header .in_header{padding: 0 20px;}
    #header .logo_n{width: 120px; height: 34.6px;}
    .allmenu_wrap .allmenu{top: 28px; right: 20px;}
    .sitemap .in_sitemap .m_gnb{margin-top: 0;}
    .sitemap .in_sitemap{top: 50%; transform: translate(-50%, -50%);}
    .sitemap .in_sitemap p{display: none;}
    .sitemap .in_sitemap .m_gnb{text-align: center;}
    .sitemap .in_sitemap .m_gnb_sub{flex-direction: column; align-items: center; align-items: center;}
    .sitemap .in_sitemap .m_gnb_sub > li{padding: 10px; width: auto;}
    .sitemap .in_sitemap .m_gnb > li + li{margin-top: 35px;}

}

@media (max-width: 480px){

    .sitemap .in_sitemap .m_gnb > li > a{font-size: 18px;}
    .sitemap .in_sitemap .m_gnb_sub > li > a{font-size: 15px;}
}


/* container */
#container{margin: 0 auto; padding: 85px 0 0 0; min-height: calc(100% - 140px - 85px);} 

@media (max-width: 640px){

    #container{padding: 65px 0 0 0; min-height: calc(100% - 140px - 65px);}

}

/* contact */
.contact{width: 100%; height: 240px; background: url(../images/common/bg_contact.png) center center no-repeat; background-size: cover; background-attachment: fixed;}
.contact .wrap_contact {text-align: center;}
.contact .wrap_contact .in_contact {position: relative; margin: 0 auto; padding: 55px 60px 0px 60px; display: inline-block; vertical-align: top; height: 100%; color: #fff; }
.contact .wrap_contact .in_contact .txt_01{font-size: 24px; font-weight: 400;}
.contact .wrap_contact .in_contact .txt_02{padding: 12px 0 0 0;font-size: 18px;}
.contact .wrap_contact .in_contact .btn_link{display: block; margin: 24px auto 0; width: 180px; height: 50px; line-height: 50px; color: #fff; font-size: 18px; font-weight: 400; border: 1px solid #fff; transition: all 0.3s;}
.contact .wrap_contact .in_contact .btn_link:hover{color: #000; background: #fff; opacity: 0.75;}

@media (max-width: 1024px){

    .contact .wrap_contact .in_contact{padding: 55px 30px 0px 30px;}
    .contact .wrap_contact .in_contact .txt_01{font-size: 22px;}
    .contact .wrap_contact .in_contact .txt_02{font-size: 16px;}
    .contact .wrap_contact .in_contact .btn_link{width: 170px; height: 45px; line-height: 45px;font-size: 16px;}
}

@media (max-width: 768px){

    .contact .wrap_contact .in_contact .txt_01{font-size: 20px;}

}

@media (max-width: 640px){

    .contact .wrap_contact .in_contact{padding: 40px 10px 0px 10px;}
    .contact .wrap_contact .in_contact .txt_01{font-size: 16px;}
    .contact .wrap_contact .in_contact .txt_02{padding: 8px 0 0 0; font-size: 14px;}
    .contact .wrap_contact .in_contact .btn_link{width: 160px; height: 40px; line-height: 40px;font-size: 14px;}

}

@media (max-width: 480px){

    .contact .wrap_contact .in_contact .txt_01{font-size: 14px;}
    .contact .wrap_contact .in_contact .txt_02{font-size: 13px;}

}

/* footer */
#footer_wrap{width: 100%;}
.footer{width: 100%; height: 225px; background: #dfdfdf;}
.footer .in_footer{display: flex; align-items: center; position: relative; margin: 0 auto; padding: 45px 40px 90px; width: 1280px; height: 100%;}
.footer .in_footer .logo_g{width: 130px; height: 38px;background: url(../images/common/kyobo_logo_g.png) center center no-repeat; background-size: contain; text-indent: -9999px;}
.footer .in_footer .copyright_wrap{padding: 0 0 0 40px;}
.footer .in_footer .foot_util{display: flex;}
.footer .in_footer .foot_util li{display: flex; justify-content: center; align-items: center;}
.footer .in_footer .foot_util li::after{content: ''; display: inline-block; margin: 0 16px; width: 1px; height: 12px; background: #939393;}
.footer .in_footer .foot_util li:last-child:after{display: none;}
.footer .in_footer .foot_util li a{color: #000; font-size: 15px; font-weight: 400;}
.footer .in_footer .foot_util li a:hover{font-weight: 500;}
.footer .in_footer .foot_address{margin: 24px 0 0;}
.footer .in_footer .foot_address span{color: #424242;}
.footer .in_footer .foot_address span + span{margin: 0 0 0 8px;}
.footer .in_footer .foot_address .copyright{margin: 10px 0 0;color: #646464;}
.footer .in_footer .link_wrap{position: absolute; right: 40px; top: 40px; height: 40px; line-height: 40px;}
.footer .in_footer .link_wrap a{display: inline-block; height: 100%; color: #424242; font-weight: 400;}
.footer .in_footer .link_wrap a.link_blog{position: relative; margin: 0 0 0 55px;}
.footer .in_footer .link_wrap a.link_blog::before{content: '';display: inline-block;width:12px;height: 17px;background: url(../images/common/ico_blog.png) no-repeat;position: absolute;top: 10px;left: -18px;}

/* footer - 이메일무단수집거부 */
/* Popup container */
.footer .in_footer .copyright_wrap .popup {position:relative; display:inline-block; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.footer .in_footer .copyright_wrap .popup .pop_txt {
	visibility:hidden; width:420px; background-color:#FFF; font-size:16px; font-weight:bold; color:#000; text-align:center; border-radius:6px;
	padding:20px; position:absolute; z-index:1; bottom:150%; left:50%; margin-left:-210px; border:1px solid #000; line-height: 1.5;}
.footer .in_footer .copyright_wrap .popup .pop_txt::after {content:""; position:absolute; top:100%; left:50%; margin-left:-5px; border-width:5px; border-style:solid; border-color:#FFF transparent transparent transparent;}
.footer .in_footer .copyright_wrap .popup .show {visibility:visible; -webkit-animation:opacity .5s; animation:opacity .5s;}
/* .footer .in_footer .copyright_wrap .popup .pop_txt {width:300px; margin-left:-90px; font-size:.8rem;}
.footer .popup .pop_txt{width:300px; margin-left: -150px;} */

.notice_page {min-height:480px;  line-height:1.5;}
.notice_sub_tit {font-size:22px; text-align: center !important;} 
.notice_section {background-color: #f3f3f3;} 
.notice_section h1 {background-color:#fff; padding: 5rem 0;}
.notice_section .notice_container {text-align: left;}
.box.type2 {padding: 40px 0;}
.box .inner {position: relative;}
.fot_tit1 {font-size:18px; font-weight:bold; line-height:20px; color:#444; margin: 2rem 0 0 0;}
.fot_tit2 {font-size:2rem; line-height:36px; color:#000;}
.fot_txt2 {font-size:16px; color:#333; word-break: keep-all; line-height:1.5;}
.fot_dl {margin:1rem 0;}
.fot_dl dt {font-size:15px; color:#000; font-weight:bold; padding-left:1rem; line-height:1.5;}
.fot_dl dd {font-size:15px; color:#000; padding-left:1rem; word-break: keep-all; line-height:1.5;}


@media (max-width: 1280px){

    .footer .in_footer{width: 100%;}

}

@media (max-width: 1024px){

    .footer{height: auto;}
    .footer .in_footer{flex-wrap: wrap; justify-content: center; padding: 45px 40px; width: 100%;}
    .footer .in_footer .link_wrap{position: static; top: unset; bottom: unset; margin: 40px auto 0;}

}

@media (max-width: 768px){

    .footer{text-align: center;}
    .footer .in_footer{flex-direction: column; text-align: center;}
    .footer .in_footer .logo_g{margin-bottom: 40px;}
    .footer .in_footer .link_wrap{margin: 25px auto 0;}
    .footer .in_footer .foot_util{justify-content: center;}
    .footer .in_footer .foot_address{line-height: 1.3;}
    .footer .in_footer .copyright_wrap{padding: 0;}

}

@media (max-width: 480px){

    .footer .in_footer{padding: 40px 10px;}
    .footer .in_footer .foot_util li a{font-size: 13px;}
    .footer .in_footer .foot_util li::after{margin: 0 10px;}
    .footer .in_footer .foot_address{font-size: 12px;}
    .footer .in_footer .foot_address .copyright{font-size: 12px;}

}


/*****************************************************************
                              notice 
*****************************************************************/
.notice_container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 480px){

    .notice_container {max-width: 480px;}
}

@media (min-width: 768px){

    .notice_container {max-width: 720px;}
}

@media (min-width: 1024px){

    .notice_container {max-width: 900px;}
}

@media (min-width: 1280px){

    .notice_container {max-width: 1200px;}
}

/*****************************************************************
                              main 
*****************************************************************/
.main_container{margin: 0 auto; padding: 0 40px; max-width: 1280px;}

/* main */
.main_visual{position: relative; height: 535px; overflow: hidden; border-radius: 18px 0 18px 0;}
.main_visual .visual_bg{width: 100%; height: 100%;}
.main_visual .visual_bg.visual_01{background: url(../images/main/main_visual_01.png) no-repeat;}
.main_visual .visual_bg.visual_02{background: url(../images/main/main_visual_02.png) no-repeat;}
.main_visual .caption{position: absolute; top: 50%; left: 52px; transform: translateY(-50%); color: #fff;}
.main_visual .caption > h2{font-size: 48px; letter-spacing: -0.05em; font-family: 's-core_dream2_extralight';}
.main_visual .caption > h3{margin: 10px 0 0; font-size: 48px; font-weight: 400; letter-spacing: -0.05em; font-family: 's-core-dream-regular';}
.main_visual .caption > p{margin: 27px 0 0; font-size: 18px; line-height: 25px; font-family: 's-core_dream2_extralight';}

/* slide */
.swiper-container{height: 100%;}
.swiper-pagination{top: 50%; right: 72px; transform: translateY(-50%);}
.swiper-pagination .swiper-pagination-bullet{width: 1px; height: 35px; background: #fff; border-radius: 0; opacity: inherit;}
.swiper-pagination .swiper-pagination-bullet-active{width: 4px;}
.swiper-pagination .swiper-pagination-bullet{position:absolute; top: -35px; right: 3px;}
.swiper-pagination .swiper-pagination-bullet:last-child{position:absolute; top: 1px;}

@media (max-width: 1024px){

    .main_visual{height: 450px;}
    .main_visual .caption{left: 32px;}
    .main_visual .caption > h2{font-size: 40px;}
    .main_visual .caption > h3{margin: 8px 0 0; font-size: 40px;}
    .main_visual .caption > p{margin: 25px 0 0; font-size: 16px; line-height: 22px;}

    .swiper-pagination{right: 32px;}
    
}


@media (max-width: 768px){
    .main_visual{height: 420px;}
    .main_visual .caption > h2{font-size: 36px;}
    .main_visual .caption > h3{margin: 5px 0 0; font-size: 36px;}
    .main_visual .caption > p{margin: 20px 0 0; font-size: 15px; line-height: 20px;}
    
    .swiper-pagination .swiper-pagination-bullet{height: 28px;}
    .swiper-pagination .swiper-pagination-bullet{position:absolute; top: -28px;}
    
}

@media (max-width: 640px){

    .main_visual{height: 480px;}
    .main_visual .caption > h2{font-size: 32px;}
    .main_visual .caption > h3{font-size: 32px;}

    .swiper-pagination{top: unset; right: unset; bottom: 10%; left: 50%; transform: translateX(-50%);}
    .swiper-pagination .swiper-pagination-bullet{width: 25px; height: 1px}
    .swiper-pagination .swiper-pagination-bullet-active{height: 4px;}
    .swiper-pagination .swiper-pagination-bullet{position:absolute; top: 0; right: -25px;}
    .swiper-pagination .swiper-pagination-bullet:last-child{position:absolute; top: 0; left: -25px;}
    
}

@media (max-width: 480px){

    .main_visual .caption{right: 32px;}
    .main_visual .caption > p br{display: none;}

}


/* main contents */
.main_leap{margin: 100px auto 0; width: 100%; height: 415px;}
.main_leap.service{position: relative;}
.main_leap.service .leap_img{width: 600px; height: 410px; background: url(../images/main/bg_service.png) no-repeat; position: absolute; top: 5px; right: 5px;}
.main_leap.service .leap_img::after{content: ''; display: block; width: 280px; height: 335px; background: #005bac; position: absolute; top: -5px; right: -5px; z-index: -1;}
.main_leap.vision{position: relative; margin: 45px 0 0 0;}
.main_leap.vision .leap_img{width: 600px; height: 395px; background: url(../images/main/bg_vision.png) no-repeat; position: absolute; top: 0; left: 5px;}
.main_leap.vision .leap_img::after{content: '' ;display: block; width: 520px; height: 230px; background: #005bac; position: absolute; bottom: -5px; left: -5px; z-index: -1;}

.main_leap .leap_caption{position: absolute; text-align: center; width: 55%; height: 300px; z-index: 3; background: #fff;}
.main_leap .leap_caption .in_caption{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.main_leap .leap_caption .in_caption h4{color: #005bac; font-size: 18px; font-family: 's-core-dream-bold';}
.main_leap .leap_caption .in_caption .caption_01{margin: 10px 0 0;color: #000; font-size: 26px; font-family: 's-core-dream-bold';}
.main_leap .leap_caption .in_caption .caption_02{margin: 30px 0 0;color: #000; font-size: 17px; font-weight: 400; letter-spacing: -0.05em; line-height: 1.5;}
.main_leap.service .leap_caption{top: 0; left: 0;}
.main_leap.vision .leap_caption{top: 0; right: 0;}

.main_performance{margin: 100px 0 0; padding: 100px 0; background: #f6fafd;}
.main_performance  h4{color: #005bac; font-size: 18px; font-weight: 700; text-align: center;}
.main_performance .caption{margin: 20px 0 0 0; font-size: 17px; font-weight: 400; letter-spacing: -0.05em; text-align: center;}
.main_performance .in_performance{display: flex; justify-content: center; align-items: center; margin: 40px 0 0;}

.performance_box{padding: 0 50px;}
.performance_box .icon_area{position: relative; width: 150px; height: 150px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); text-align: center;}
.performance_box .icon_area::before{content: ''; display: block; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);}
.performance_box .icon_area.icon_01::before{width: 48px; height: 48px; background: url(../images/main/ico_perporm1.png) no-repeat;}
.performance_box .icon_area.icon_02::before{width: 50px; height: 46px; background: url(../images/main/ico_perporm2.png) no-repeat;}
.performance_box .icon_area.icon_03::before{width: 48px; height: 41px; background: url(../images/main/ico_perporm3.png) no-repeat;}
.performance_box .icon_area > span{display: block; width: 150px; color: #000; font-size: 16px; font-weight: 400; position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);}
.performance_box .txt_area{margin: 25px 0 0; text-align: center;}
.performance_box .txt_area > span{color: #000; font-size: 18px; font-weight: 400; vertical-align: middle; line-height: 1.5; letter-spacing: -0.05em;}
.performance_box .txt_area > span.num{padding: 0 0 0 5px; color: #005bac; font-size: 30px; line-height: 1.1; font-weight: 700;}


@media (max-width: 1280px){
    
    .main_leap .leap_caption{width: 52%;}
    .main_leap .leap_caption{width: 52%;}
    .main_leap .leap_caption .in_caption .caption_01{font-size: 24px;}
    .main_leap .leap_caption .in_caption .caption_02{margin: 20px 0 0; font-size: 16px;}
    
}

@media (max-width: 1024px){

    .main_leap{margin: 0 auto; height: auto;}
    .main_leap .leap_caption{width: 100%; position: relative;}
    .main_leap.service .leap_img{position: static; top: 300px; left: 0; right: 0; width: 100%; height: 385px; background-size: cover; overflow: hidden;}
    .main_leap.service .leap_img::after{display: none;}
    .main_leap.vision{margin: 0;}
    .main_leap.vision .leap_img{position: static; top: 300px; left: 0; right: 0; width: 100%; height: 385px; background-size: cover; overflow: hidden;}
    .main_leap.vision .leap_img::after{display: none;}
    
}

@media (max-width: 768px){

    .main_container{padding: 0 20px;}
    .main_performance{margin: 50px 0 0;}
    .main_performance .in_performance{flex-wrap: wrap;}
    .performance_box{padding: 0 30px 50px;}
    
}

@media (max-width: 640px){
    .main_leap .leap_caption .in_caption .caption_01{font-size: 20px;}
    .main_leap .leap_caption .in_caption .caption_02{font-size: 15px;}
    .main_leap .leap_caption .in_caption .caption_02 br{display: none;}
    
}

@media (max-width: 480px){
    .main_leap.service .leap_img{height: 280px;}
    .main_leap.vision .leap_img{height: 280px;}
}