@charset "utf-8";
/* CSS Document */
@media screen and (max-width:1280px){
#header .gnb_wrap .gnb > li .dp1{ min-width: auto;}
}

@media screen and (max-width:1024px){
body{}
.PC{ display:none !important}
.PHONE{ display:block !important}	
.box1{width:1200px; max-width:95%; margin:0 auto; position:relative;}
.PC1024{ display:none !important}
.PHONE1024{ display:block !important}	

#header .gnb_wrap .gnb > li .dp1{margin:0; min-width:5em;}

#header .etc_wrap .sns_list ul li{margin-right:2px;}

html.l-nav-open .l-nav{width:30%;}

.mainVisual .img.flex-active-slide .slogan .line.line4{width:30%;}
.mainVisual .img .slogan .line.line5{left:30%;}

.main_nav{height:160px; margin-top:50%;}

.maincon_1 .main_ctt_box ul li{flex-basis:30%;}
.maincon_1 .main_ctt_box ul li .txt_box .txt_ctt{min-height:2rem;}

.maincon_3_1 .main_ctt_box .PT_wrap{width:880px; margin:0 auto;}

.maincon_4 .main_ctt_box ul li{width:240px;}

.dp1_1.dp2_1 .grt_box .img_box{display:flex; align-items:center;}

.dp1_1.dp2_2 .his_box .history_wrap .his_line{left:30px;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li{flex-wrap:wrap; flex-direction:column; width:100%; margin:0; padding-left:40px; padding-right:40px;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li > *{width:100%;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n-1) .his_years{text-align:left; padding-left:3em; padding-right:0;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n-1) .his_years:after{right:0; left:-8px;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_years:after{left:-8px;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_ctt_wrap dl{flex-direction:row;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_ctt_wrap dl .his_date{margin-left:0; margin-right:30px;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_ctt_wrap dl .his_date:after{right:-24px; left:auto;}

.root_daum_roughmap{width:100% !important;}

.sub2_1_v2 .prod_wrap > li .in .txt_box{background:#f5f5f5;}
}

@media screen and (max-width:768px){
.PC768{ display:none !important}
.PHONE768{ display:block !important}	

.gnb_wrap{display:none;}

.main_nav{height:160px; margin-top:80%;}

.maincon_3_1 .main_ctt_box .PT_wrap .slides li{box-shadow:none;}
.maincon_3_1 .main_ctt_box .PT_wrap .slides li:first-of-type{margin-left:0;}
.maincon_3_1 .main_ctt_box .PT_wrap{width:600px; margin:0 auto;}
.maincon_3_1 .main_ctt_box .PT_wrap .slides li{width:285px !important;}

.maincon_3_2 .ctt_box{padding:48px;}

.maincon_4 .main_ctt_box ul{flex-wrap:wrap; width:600px; margin:0 auto;}
.maincon_4 .main_ctt_box ul li{width:290px; margin-bottom:20px;}

.dp1_1.dp2_1 .grt_box{flex-direction:column-reverse;}
.dp1_1.dp2_1 .grt_box > div{width:100%;}
.dp1_1.dp2_1 .grt_box > .txt_box{margin-top:2em;}

.dp1_1.dp2_2 .his_box .his_top .his_ctt ul{flex-wrap:wrap;}
.dp1_1.dp2_2 .his_box .his_top .his_ctt ul li{width:33.33%; flex:1 1 33.33%;}
.dp1_1.dp2_2 .his_box .his_top .his_ctt ul li:nth-of-type(n+3){margin-bottom:3em;}

.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(2){width:50%;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(3){width:50%;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(4){width:100%;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(5){display:block;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(5) ul{flex-wrap:wrap;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(5) ul li:first-of-type{margin-left:0;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(5) ul li{margin-top:10px;}

.board_photo_wrap > li{width:33% !important;}

.sub2_1_v2 .prod_wrap > li .in .txt_box{padding:.5em 1em 1em 1em;}
.sub2_1_v2 .prod_wrap > li .in .tit{font-size:1em;}

.dp1_2 .prod_ctt_box .prod_top{flex-direction:column; max-height:none;}
.dp1_2 .prod_ctt_box .prod_top .img_box{width:100%;}
.dp1_2 .prod_ctt_box .prod_top .sum_box{width:100%;}
}

@media screen and (max-width:500px){
.PC500{ display:none !important}
.PHONE500{ display:block !important}	

.l-nav{z-index:10000;}

#header .etc_wrap .sns_list{display:none;}

html.l-nav-open .l-nav{width:100%;}
#LeftNavigation .sns_list{width:100%; margin-top:.5em;}
#LeftNavigation .sns_list ul{display:flex; flex-wrap:nowrap; justify-content:space-around;}
#LeftNavigation .sns_list ul li{width:50px; height:50px; text-align:center; line-height:50px;}
#LeftNavigation .sns_list ul li a{display:block; width:100%; height:100%;}

.mainVisual .img .slogan{padding:50px;}
.mainVisual .img .slogan .t1{font-size:2em;}
.mainVisual .img.flex-active-slide .slogan .line{display:none;}


.main_nav{height:100%; margin-top:inherit; transform:none;}
.main_nav .nav{position:relative; right:-50%; bottom:-30%; opacity:.1; transition:.3s;}
.main_nav .nav.op1{opacity:1;}
.fl_wrap .link li:last-of-type{display:none;}
#footer .link_wrap .link > li > a:first-child{margin-right:1.5em;}
#footer .info_wrap{display:flex; flex-wrap:wrap; flex-direction:column;}
#footer .info_wrap .f_logo{width:100%;}
#footer .info_wrap .info{width:100%; margin-top:1em;}

#contents .subNav_wrap .nav div.depth_2 p.tt{padding:0 0 0 10px; min-width:140px;}
#contents .subNav_wrap .nav div.depth_2 p.tt:after{right:10px;}

#contents .subNav_wrap .nav .home .tt{width:55px;}
#contents .subNav_wrap .nav div[class^="depth"] .tt{padding:0 15px; min-width:100px;}

.maincon_1 .main_ctt_box ul{flex-direction:column;}
.maincon_1 .main_ctt_box ul li{display:flex; flex-wrap:nowrap; flex-basis:auto;}
.maincon_1 .main_ctt_box ul li .img_box{display:none;}
.maincon_1 .main_ctt_box ul li .txt_box{width:100%; padding:1.25em;}
.maincon_1 .main_ctt_box ul li .txt_box .txt_ctt{margin-bottom:.75rem;}
.maincon_1 .main_ctt_box ul li .txt_box .more_btn_1{float:right;}

.maincon_3_1 .main_ctt_box .PT_wrap{width:300px; margin:0 auto;}
.maincon_3_1 .main_ctt_box .PT_wrap .slides li{width:300px !important;}

.maincon_3_2 .ctt_box ul{flex-direction:column;}
.maincon_3_2 .ctt_box ul li:first-of-type{margin-bottom:2em;}
.maincon_3_2 .ctt_box ul li:last-of-type .more_btn_3{float:right;}

.maincon_4 .notice_wrap .notice_slide .flex-direction-nav{display:none;}
.maincon_4 .notice_wrap .notice_slide .slides li .notice_date{right:0;}
.maincon_4 .main_ctt_box ul{width:390px;}
.maincon_4 .main_ctt_box ul li{width:48%;}
.maincon_4 .main_ctt_box ul li .img_box{display:none;}
.maincon_4 .main_ctt_box ul li .txt_box .txt_ctt{min-height:80px;}

.dp1_1.dp2_2 .his_bg{height:160px; padding-top:25px;}
.dp1_1.dp2_2 .his_box .his_top .his_ctt ul li .li_icon{margin-bottom:40px;}
.dp1_1.dp2_2 .his_box .his_top .his_ctt ul li .li_icon:after{height:30px; bottom:-50px;}
.dp1_1.dp2_2 .his_box .his_top .his_ctt ul li .li_tit{font-size:1em; min-height:38px;}

.dp1_1.dp2_2 .his_box .history_wrap .his_lists li{box-sizing:border-box;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li .his_ctt_wrap dl{flex-wrap:wrap; margin-bottom:1.5rem;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n-1) .his_ctt_wrap dl .his_date{display:block; width:100%; margin-bottom:.5em; font-size:1.25em;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n-1) .his_ctt_wrap dl .his_date:after{display:none;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_ctt_wrap dl .his_date{display:block; width:100%; margin-bottom:.5em; font-size:1.25em;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_ctt_wrap dl .his_date:after{display:none;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li .his_ctt_wrap dl:not(:first-of-type) .his_date .his_year{opacity:1;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li .his_ctt_wrap dl .his_ctt{}

.root_daum_roughmap{height:300px !important;}

.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(2){width:100%;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(3){width:100%;}

.board_photo_wrap > li{width:50% !important;}
.certification .board_photo_wrap dd{height:231px !important;}

.sub2_1_v2 .prod_wrap > li{width:50% !important;}

.dp1_4.dp2_2 .online .board_st .input_st.w1{width:48%;}
.dp1_4.dp2_2 .online .board_st .input_st.w2{width:30%;}
}

@media screen and (max-width:360px){
.PC360{ display:none !important}
.PHONE360{ display:block !important}	

.mainVisual .flex-control-paging{bottom:20%;}

.maincon_3_1 .main_ctt_box .PT_wrap{width:260px; margin:0 auto;}
.maincon_3_1 .main_ctt_box .PT_wrap .slides li{width:260px !important;}

.maincon_4 .notice_wrap .notice_slide .tt span{padding:10px;}
.maincon_4 .notice_wrap .notice_slide .slides li .notice_tit{margin-left:78px;}
.maincon_4 .main_ctt_box ul{width:340px;}
.maincon_4 .main_ctt_box ul li{width:100%;}
.maincon_4 .main_ctt_box ul li .txt_box .txt_ctt{min-height:40px;}
}

@media all and (orientation:landscape){
}