@charset "utf-8";
/* CSS Document */


/* CSS Information ----------------------------------------

Site Name : 반응형 디자인 A5
Part : 
Last edit : 2021.01.01
Author : Gautech

관련폰트 :
font-family: 'Noto Sans KR', sans-serif; (100,300,400,500,700,900)
font-family: 'Noto Serif KR', serif; (200,300,400,500,600,700,900)
font-family: 'Roboto', sans-serif; (100,300,400,500,700,900)
font-family: 'NanumSquareRound', sans-serif; (300,400,700,800)
font-family: 'NanumBarunGothic', sans-serif; (200,300,400,700)
font-family: 'Play', sans-serif; (200,300,400,700)

--------------------------------------------------------- */



/* 메인 메뉴 */

.top_nav {}
.top_nav_m { display:none;}

#header_top { position:fixed; left:0; top:0; z-index:100; width:100%; height:100px; background: #fff; border-bottom:1px solid #ddd;}
.header_wrap { position:relative; width:100%; max-width:1500px; z-index:100;margin: 0 auto;}
.top_logo { position:absolute;width: 229px;height:100px; left:0; top:0; padding-left:3%;}
.top_logo>a { display:block; width:100%; height:100px; background-size: 150px;background-image:url(../images/common/logo2.svg); background-position: left; background-repeat:no-repeat; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.top_menu { width:56%; height:100px;float:right; margin:0;padding-right: 1.5%;}
.top_menu>ul { font-size:0; text-align:right;}
.top_menu>ul>li { display:inline-block; width:15%;}
.top_menu>ul>li>a {}
.top_menu_a { display:block; width:100%; height:100px; line-height:100px; text-align:center; color:rgba(0,0,0,0.9); font-family: 'Noto Sans KR', sans-serif;  font-size:0.85rem; letter-spacing: 0.3px; font-weight:400; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.top_menu01 {}
.top_menu02 {}
.top_menu03 {}
.top_menu04 {}
.top_menu05 {}
.top_menu06 {}
.top_menu_bar { border-bottom:6px solid #202020;}
.top_menu_sub { position:absolute; top:100px; left:0; opacity:0; z-index:-1; width:100%; height:1px; overflow:hidden; border-top:1px solid #ddd;}
.top_menu_sub_active { opacity:1; z-index:100; height:199px; background-color:#F0F0F0;}
.top_menu_sub1 {}
.top_menu_sub2 {}
.top_menu_sub3 {}
.top_menu_sub4 {}
.top_menu_sub5 {}
.top_menu_sub6 {}
.top_menu_sub_in_wrap { width:100%; max-width:1400px; margin:0 auto; font-size:0; -webkit-transition: all 0.5s 0.2s; -moz-transition: all 0.2s 0.2s; -ms-transition: all 0.5s 0.2s; -o-transition: all 0.5s 0.2s; transition: all 0.5s 0.2s;}
.top_menu_sub_in { display:inline-block; border-left:1px solid #ddd; height:198px; background-color:#fff; vertical-align:top; font-size:14px; text-align:left; background-repeat:no-repeat; padding:25px; -webkit-transition: all 0.2s 0.2s; -moz-transition: all 0.2s 0.2s; -ms-transition: all 0.2s 0.2s; -o-transition: all 0.2s 0.2s; transition: all 0.2s 0.2s;}
.top_menu_sub_in1_1 { width:25%;}
.top_menu_sub_in1_2 { width:25%; background-image:url(../images/common/menu01_02_bg.png); background-position:100% 50%;}
.top_menu_sub_in1_3 { width:25%;}
.top_menu_sub_in1_4 { width:25%; border-right:1px solid #ddd;}
.top_menu_sub_in2_1 { width:14.285714%; background-image:url(../images/common/menu02_01_bg.png); background-position:100% 50%;}
.top_menu_sub_in2_2 { width:14.285714%;}
.top_menu_sub_in2_3 { width:14.285714%; background-image:url(../images/common/menu02_03_bg.png); background-position:100% 50%;}
.top_menu_sub_in2_4 { width:14.285714%;}
.top_menu_sub_in2_5 { width:14.285714%; background-image:url(../images/common/menu02_05_bg.png); background-position:100% 50%;}
.top_menu_sub_in2_6 { width:14.285714%; border-right:1px solid #ddd;}
.top_menu_sub_in2_7 { width:14.285714%;}
.top_menu_sub_in3_1 { width:33.333333%; background-image:url(../images/common/menu03_01_bg.png); background-position:100% 50%;}
.top_menu_sub_in3_2 { width:33.333333%; background-image:url(../images/common/menu03_02_bg.png); background-position:100% 50%;}
.top_menu_sub_in3_3 { width:33.333333%; background-image:url(../images/common/menu03_03_bg.png); background-position:100% 50%; border-right:1px solid #ddd;}
.top_menu_sub_in4_1 { width:33.333333%; background-image:url(../images/common/menu04_01_bg.png); background-position:100% 50%;}
.top_menu_sub_in4_2 { width:33.333333%;}
.top_menu_sub_in4_3 { width:33.333333%; background-image:url(../images/common/menu04_03_bg.png); background-position:100% 50%; border-right:1px solid #ddd;}
.top_menu_sub_in5_1 { width:50%; background-image:url(../images/common/menu05_01_bg.png); background-position:100% 50%;}
.top_menu_sub_in5_2 { width:50%; background-image:url(../images/common/menu05_02_bg.png); background-position:100% 50%; border-right:1px solid #ddd;}
.top_menu_sub_in6_1 { width:50%; background-image:url(../images/common/menu06_02_bg.png); background-position:100% 50%;}
.top_menu_sub_in6_2 { width:50%; background-image:url(../images/common/menu06_01_bg.png); background-position:100% 50%; border-right:1px solid #ddd;}

.top_menu_sub_in_title { font-family: 'Noto Sans KR', sans-serif; font-size:20px; font-weight:500; margin-bottom:10px; letter-spacing:-0.06em; -webkit-transition: all 0.2s 0.2s; -moz-transition: all 0.2s 0.2s; -ms-transition: all 0.2s 0.2s; -o-transition: all 0.2s 0.2s; transition: all 0.2s 0.2s;}
.top_menu_sub_in_txt { font-family: 'Noto Sans KR', sans-serif; font-size:12px; color:#999;}
.top_menu_sub_in_icon { opacity:0.3; margin-top:20px; -webkit-transition: all 0.2s 0.2s; -moz-transition: all 0.2s 0.2s; -ms-transition: all 0.2s 0.2s; -o-transition: all 0.2s 0.2s; transition: all 0.2s 0.2s;}
.top_menu_sub_in_icon2 { opacity:0.3; vertical-align: baseline; margin-left:20px; -webkit-transition: all 0.2s 0.2s; -moz-transition: all 0.2s 0.2s; -ms-transition: all 0.2s 0.2s; -o-transition: all 0.2s 0.2s; transition: all 0.2s 0.2s;}
.top_menu_sub_in:hover { background-color:#fff;}
.top_menu_sub_in:hover>.top_menu_sub_in_title, .top_menu_sub_in:focus>.top_menu_sub_in_title { color:#000;}
.top_menu_sub_in:hover>.top_menu_sub_in_icon, .top_menu_sub_in:focus>.top_menu_sub_in_icon { opacity:1;}
.top_menu_sub_in>a:hover>.top_menu_sub_in_title, .top_menu_sub_in>a:focus>.top_menu_sub_in_title { color:#000;}
.top_menu_sub_in>a:hover>p>.top_menu_sub_in_icon2, .top_menu_sub_in>a:focus>p>.top_menu_sub_in_icon2 { opacity:1;}

.top_smenu { 
	align-items: center;
    font-family: 'Roboto', sans-serif;
    position: absolute;
    width: 10%;
    display: flex;
    height: 100px;
    right: 0;
    top: 0;
    font-size: 0;
    text-align: center;
    justify-content: flex-end;
}
.top_smenu01 { display:inline-block; vertical-align:middle; padding:0 10px; margin-right:6px; height:22px; line-height:22px; border:1px solid #000; font-size:11px; color:#000; font-weight:500; letter-spacing:0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.top_smenu02 { position:relative; width:100px; text-align:left; display:inline-block; margin-right:10px; vertical-align:middle; border:1px solid #fff; padding:0 10px; height:22px; line-height:22px; font-size:11px; color:#FFF; font-weight:500; letter-spacing:0; background-image:url(../images/icon/ar_down_w.png); background-repeat:no-repeat; background-position:90% 50%; cursor:pointer; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.smenu02_in { display:none; position:absolute; top:20px; left:-1px; background-color:#fff; padding:10px; border:1px solid #CCC; border-top:none; width:100px; z-index:101;}
.language { display:block;}
.top_smenu03 { display:inline-block; vertical-align:middle; height:20px; width:30px; cursor:pointer;}
.top_smenu03>p { height:3px; width:100%; margin-bottom:5px; background-color:#000; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.top_smenu03>p:nth-child(2) { width:80%;}
.top_smenu03>p:nth-child(3) { margin-bottom:0;}
.top_smenu03_p_ov { background-color:#444 !important;}
.top_smenu03_p_ov2 { background-color:#444 !important;}

.top_smenu03:hover>p:nth-child(1), .top_smenu03:hover>p:nth-child(3), .top_smenu03:focus>p:nth-child(1), .top_smenu03:focus>p:nth-child(3) { width:80%;}
.top_smenu03:hover>p:nth-child(2), .top_smenu03:focus>p:nth-child(2) { width:100%;}

.top_smenu04 { display:inline-block; vertical-align:middle; padding:0 10px; margin-right:6px; height:22px; line-height:22px; border:1px solid #fff; font-size:11px; color:#FFF; font-weight:500; letter-spacing:0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}

.header_top_bg { position: absolute; left:0; top:0; z-index:99; width:100%; height:100px; /*-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;*/}

.top_logo_ov { background-image:url(../images/common/logo2.svg) !important;}
.top_menu_ov { color:rgba(0,0,0,0.9) !important;}
.top_smenu_ov { color:#444; border:1px solid #ccc;}
.top_smenu02_ov { background-image:url(../images/icon/ar_down.png);}

.top_logo_ov2 { background-image:url(../images/common/logo2.svg) !important;}
.top_menu_ov2 { color:rgba(0,0,0,0.9) !important;}
.top_smenu_ov2 { color:#444; border:1px solid #ccc;}
.top_smenu02_ov2 { background-image:url(../images/icon/ar_down.png);}
.top_smenu02_ov3 { background-image:url(../images/icon/ar_up.png); background-color:#FFF; color:#444; border:1px solid #CCC;}
.top_smenu02_ov4 { background-image:url(../images/icon/ar_down.png);}

.header_top_bg_ov { background-color:#FFF; border-bottom:1px solid #ddd; }
.header_top_bg_ov_sub { background-color:#FFF; border-bottom:1px solid #ddd; height:0px;}

.all_menu_pc { position:fixed; opacity:0; z-index:-1; top:0; right:0; width:50%; height:100vh; background-image: url(../images/common/all_menu_bg.jpg); background-size:cover; background-position:0% 0%; background-repeat:no-repeat; padding:100px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; font-size:0;}
.all_menu_pc_ov { opacity:1; z-index:200; width:100%;}
.all_menu_pc_btn { position:absolute; top:130px; right:100px; background-image:url(../images/icon/nav_btn3.png); background-size:cover; width:60px; height:60px; cursor:pointer;}
.all_menu_pc_title { font-family: 'Roboto', sans-serif; font-size:50px; line-height:60px; font-weight:700; padding-bottom:30px; border-bottom:1px solid #CCC;}
.all_menu_pc_in_wrap { background-color:#FFF; padding:30px 30px 50px 30px; border-left:1px solid #CCC;}
.all_menu_pc_in { display:inline-block; width:14%; vertical-align:top; padding:20px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.all_menu_pc_in_title { font-family: 'Noto Sans KR', sans-serif; font-size:20px; font-weight:700; padding-left:10px; padding-bottom:20px; border-bottom:1px solid #CCC; margin-bottom:20px;}
.all_menu_pc_in_sub { display:block; font-family: 'Noto Sans KR', sans-serif; font-size:16px; padding:5px 10px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.all_menu_pc_in_sub:hover, .all_menu_pc_in_sub:focus { background-color:#dc2d3c; color:#fff;}
.all_menu_pc_in2 { width:100%; font-size:14px; padding:50px 0 0 0; border-top:1px solid #CCC;}

#all_bg { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.5; z-index:56; display:none;}

/* 1500 ~ 1025까지 설정 */

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


}



/* 1024 ~ 768까지 태블릿 설정 */

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


#header_top { display:none;}
.top_nav { }
.top_menu_sub_bg { display:none;}
.top_nav_m { position:fixed; top:0; left:0; display:block; background-color:rgba(255,255,255,1); height:80px; width:100%; z-index:55; border-bottom:1px solid rgba(0,0,0,0.1);}
.m_logo { float:left; width:50%; height:100%; padding-left:3%;}
.m_logo>a { display:block; text-indent:-9999px; background-image: url(../images/common/logo2.svg); background-repeat:no-repeat; background-position:0% 50%; height:100%; background-size:100% auto; /*로고크기 설정*/ width:180px;}
.m_menu_btn { float:left; position:relative; width:50%; height:100%; }
.m_menu_btn>p { position:absolute; top:0; right:0; text-indent:-9999px; background-image: url(../images/icon/nav_btn1.png); background-repeat:no-repeat; background-size:34% auto; background-position:50% 50%; width:85px; height:100%; cursor:pointer;}
.m_menu_all { position:fixed; top:0; right:-3000px; background-color:#eee; height:100%; width:100%; z-index:99; text-align:left; overflow-y: auto; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.m_menu_bg_sliding { right:0 !important;}
.m_menu_all_top { position:fixed; top:0; right:-3000px; height:80px; width:100%; background-color:#444; z-index:200; border-bottom:1px solid #eee; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; padding-left:20px;}
.m_menu_all_top>a { display:block; text-indent:-9999px; background-image: url(../images/common/logo.svg); background-repeat:no-repeat; background-position:0% 50%; height:100%; background-size:100% auto; /*로고크기 설정*/ width:180px;}
.m_menu_all_top>p {position:absolute; top:0; right:0; text-indent:-9999px; background-image: url(../images/icon/nav_btn2_w.png); background-repeat:no-repeat; background-size:25% auto; background-position:50% 50%; width:85px; height:100%; cursor:pointer;}
.m_menu_all_name { background-color:#FFF; padding-top:80px;}

.mlogin_box { background-color:#eee; padding:20px 30px;}
.mlogin_box >a { display:inline-block; font-family: 'Roboto', sans-serif; font-size:14px; padding:5px 15px; border:1px solid #ccc; background-color:#F7F7F7; margin:0 5px 5px 0;}

.m_menu_all_name>ul { padding:10px 30px 30px 30px;}
.m_menu_all_name>ul>.main { padding:10px; line-height:40px; font-size:16px;  border-bottom:1px solid #F6F6F6; font-weight:500;}
.m_menu_all_name>ul>.main>p { display:inline-block; width:7px; height:40px; margin-left:20px; background-image:url(../images/icon/ar_right.png); background-repeat:no-repeat; background-position:50% 50%; vertical-align:top;}
.m_menu_all_name>ul>.sub { background-color:#F6F6F6 !important; padding:15px 30px 15px 20px; font-size:13px; }
.m_submenu_active { display:block !important;}
.m_subname_active { background-image: url(../images/icon/ar_up.png) !important;}
.m_menu_all_name>ul>.sub>a { display:inline-block; padding:0 10px; background-image:url(../images/icon/menu_bar.png); background-repeat:no-repeat; background-position:100% 50%;}
.m_menu_all_name>ul>.sub>a:last-child { background-image:none;}
.m_menu_all_tel { background-image:url(../images/icon/icon_tel.svg); background-repeat:no-repeat; background-position:40px 50%; padding:20px 0 20px 70px; font-family: 'Roboto', sans-serif; font-size:20px; font-weight:700; background-color:#FFF; border-top:1px solid #ddd;}
.m_menu_all_bottom { border-top: 1px solid #ddd; padding:20px 30px;}
.m_menu_all_bottom>a { display:block; width:100%; height:auto; padding:15px 0; background-color:#FFF; border-radius:8px;}

#all_bg2 { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.8; z-index:56; display:none;}
.m_menu_all_name>ul>.main a {
    color: #444;
}
.m_menu_all_tel a {
    color: #444;
}

}



/* 767 ~ 320까지 모바일 설정 */

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


.top_nav_m { position:fixed; top:0; left:0; display:block; background-color:rgba(255,255,255,1); height:60px; width:100%; z-index:55; border-bottom:1px solid rgba(0,0,0,0.1);}
.m_logo { float:left; width:50%; height:100%; padding-left:10px;}
.m_logo>a { display:block; text-indent:-9999px; background-image: url(../images/common/logo2.svg); background-repeat:no-repeat; background-position:0% 50%; height:100%; background-size:100% auto; /*로고크기 설정*/ width:130px;}
.m_menu_btn { float:left; position:relative; width:50%; height:100%; }
.m_menu_btn>p { position:absolute; top:0; right:0; text-indent:-9999px; background-image: url(../images/icon/nav_btn1.png); background-repeat:no-repeat; background-size:30% auto; background-position:50% 50%; width:65px; height:100%; cursor:pointer;}
.m_menu_all { position:fixed; top:0; right:-3000px; background-color:#eee; height:100%; width:100%; z-index:99; text-align:left; overflow-y: auto; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.m_menu_bg_sliding { right:0 !important;}
.m_menu_all_top { position:fixed; top:0; right:-3000px; height:60px; width:100%; background-color:#444; z-index:200; border-bottom:1px solid #eee; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; padding-left:15px; padding-top:0;}
.m_menu_all_top>a { display:block; text-indent:-9999px; background-image: url(../images/common/logo.svg); background-repeat:no-repeat; background-position:0% 50%; height:100%; background-size:100% auto; /*로고크기 설정*/ width:130px;}
.m_menu_all_top>p { position:absolute; top:0; right:0; text-indent:-9999px; background-image: url(../images/icon/nav_btn2_w.png); background-repeat:no-repeat; background-size:25% auto; background-position:50% 50%; width:85px; height:100%; cursor:pointer;}
.m_menu_all_name { background-color:#FFF; padding-top:60px;}

.mlogin_box { background-color:#eee; padding:20px 20px;}
.mlogin_box >a { display:inline-block; font-family: 'Roboto', sans-serif; font-size:13px; padding:3px 10px; border:1px solid #ccc; background-color:#F7F7F7; margin:0 4px 4px 0;}

.m_menu_all_name>ul { padding:10px 20px 20px 20px;}
.m_menu_all_name>ul>.main { padding:10px; line-height:25px; font-size:15px;  border-bottom:1px solid #F6F6F6; font-weight:500;}
.m_menu_all_name>ul>.main a { color:#444;}
.m_menu_all_name>ul>.main>p { display:inline-block; width:7px; height:25px; margin-left:20px; background-image: url(../images/icon/ar_right.png); background-repeat:no-repeat; background-position:50% 50%; vertical-align:top;}
.m_menu_all_name>ul>.sub { background-color:#F6F6F6 !important; padding:15px 15px 15px 10px; font-size:13px; }
.m_submenu_active { display:block !important;}
.m_subname_active { background-image: url(../images/icon/ar_up.png) !important;}
.m_menu_all_name>ul>.sub>a { display:inline-block; padding:0 10px; background-image:url(../images/icon/menu_bar.png); background-repeat:no-repeat; background-position:100% 50%;}
.m_menu_all_name>ul>.sub>a:last-child { background-image:none;}
.m_menu_all_tel { background-image:url(../images/icon/icon_tel.svg); background-repeat:no-repeat; background-position:30px 50%; padding:20px 0 20px 60px; font-family: 'Roboto', sans-serif; font-size:20px; font-weight:700; background-color:#FFF; border-top:1px solid #ddd;}
.m_menu_all_tel a { color:#444; }
.m_menu_all_bottom { border-top: 1px solid #ddd; padding:20px 30px;}
.m_menu_all_bottom>a { display:block; width:100%; height:auto; padding:15px 0; background-color:#FFF; border-radius:8px;}

#all_bg2 { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.8; z-index:56; display:none;}



}