@charset "utf-8";

html,
body { width:100%; height:100%; }
body { background:#fff; overflow-x:hidden; position:relative; }
.layout_fix { width:1200px; margin:0 auto; }
#wrap { position:relative; }

/* 주요 색상 */
.purple { color:#7354ed; }
.blue { color:#188afd; }
.red { color:#e4585a; }
/*::selection {background:rgba(106, 17, 174, 0.3);}*/

/* 공용 스타일 */
.fw800 { font-weight:800; }

/* HIDDEN TEXT */
.comment{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}

/* header */
/* 최상단 */
.tnb { height: 40px; position: relative; z-index: 1; background:#f1f1f1; }
.tnb .layout_fix { display:flex; justify-content: space-between; }
.tnb_text { font-size: 15px;color: #5f5f5f; line-height: 40px; }
.tnb_text i { padding-right:3px; }
.tnb_link { display: flex; justify-content: space-between; align-items: center; height: 40px; position:relative; }
.tnb_menu { display:inline-block; height:100%; }
.tnb_menu li { border-left:1px solid #e3e3e3; float:left; height:100%; line-height: 40px; } 
.tnb_menu li a { display:block; font-size:15px; padding:0 20px; height:100%;}
/* 웹접근성 수정 s */
.tnb_menu li a:hover span, .tnb_menu li a:focus span{text-decoration:underline;}
/* 웹접근성 수정 e */
.tnb_menu li i { padding-right:5px; }
.tnb_menu .mypage { position:relative; }
.tnb_menu .btn_open.active { background:#7354ed; }
.tnb_menu .btn_open.active { color:#fff; }
.tnb_menu .btn_open.active i { color:#fff; }
.tnb_sns { display:inline-block; height:100%; border-right:1px solid #e3e3e3 }
.tnb_sns li { border-left:1px solid #e3e3e3; float:left; height:100%; line-height: 40px; font-size:0; }
.tnb_sns li a { display:block; padding:0 15px; height:100%; }
.tnb_sns li i { font-size:15px; color:#555; }
.tnb_sns li:last-child i { font-size:16px; }

/* 마이페이지 팝업 */
.pop_wrap{position:absolute; top:60px; left:32%; z-index:200; transition: opacity 0.5s ease-in-out; }
.pop_wrap:after{display:inline-block; height:100%; vertical-align:middle; content:'';}
.pop_wrap .pop_inner{display:inline-block; background:#fff; width:290px; vertical-align:middle; font-size:15px; font-size:16px; color:#5e5e5e; letter-spacing:-1px; border-radius:10px; box-shadow: 1px 1px 8px rgba(0,0,0,0.5); position:relative; }
.btn_close { font-size:0; position:absolute; top:7px; right:12px; }
.btn_close i { font-size:30px; color:#282828; }
.pop_inner .top { padding:20px 20px 0; }
.pop_inner .mypage { display:inline-block; text-align:left; width:100%; font-weight:600; }
.pop_inner .mypage i { color:#4c4c4c; padding-right:5px; font-size:18px; }
.pop_inner .point { font-size:36px; font-weight:600; line-height:1; padding:10px 0; color:#5e5e5e; text-align:center; letter-spacing:-1px; }
.pop_inner .more { display: flex; justify-content: space-around; align-items: center; border-top:1px solid #e1e1e1; margin-top:15px; }
.pop_inner .more li { position:relative; padding-left:23px; }
.pop_inner .more li::after { content:""; position:absolute; top:0; left:-10px; width:1px; height:100%; background:#e1e1e1; }
.pop_inner .more li:first-child::after { display:none; }
.pop_inner .more li a { font-size:14px; display:block; padding:10px 0; }
.pop_inner .more li i { position:absolute; left:0; top:50%; margin-top:-9px; }
.pop_inner .more .modify i { width:18px; height:18px; color:#fff; background:#188afd; border-radius:50%; font-size:13px; position:absolute; text-align:center; line-height:19px; }
.pop_inner .more .check::before { content:"P"; width:18px; height:18px; color:#fff; background:#e4585a; border-radius:50%; font-size:13px; position:absolute; text-align:center; line-height:19px; left:0; top:50%; margin-top:-9px; }
.pop_inner .more .view i { width:18px; height:18px; color:#fff; background:#ffce33; border-radius:50%; font-size:13px; text-align:center; line-height:19px; }

.main_cont { border-bottom:1px solid #efefef; }
.main_cont .layout_fix { display:flex; justify-content: space-between; align-items: center; }
.main_cont .hd_logo a { display:block; }
.main_cont .menu-box { position: relative; min-width:970px; padding:28px 0 0 30px; height: 98px; } 
.main_cont .depth1 { display: flex; justify-content: space-evenly; height:100%; }
.main_cont .depth1 > li { position: relative; display: inline-block; vertical-align: top; text-align: center; height:100%; }
.main_cont .depth1 > li a { display: block; height: 100%; }
.main_cont .depth1 > li span { font-size:20px; color:#262626; display:block; padding:10px; }
.main_cont .depth1 > li:hover span { color:#e4585a; }
.main_cont .depth1 > .active span { color:#e4585a; font-weight:600; }
.main_cont .depth1 > .active::before { content: "+"; position: absolute; top: 0px; right:43px; color: #e4585a; font-size: 19px; font-weight: 900; }

.main_cont .depth2 { display:none; position:absolute; top:71px; left:0; right:0; height:173px; /*border-left:1px solid #efefef;*/ z-index:150; }
.main_cont .depth2>li>a { font-size:16px; font-weight:400; color:#262626; height:40px; display:inline-block; padding:20px 0; position:relative; }
.main_cont .depth2>li>a::before { content:""; position:absolute; bottom:-5px; left:0; width:100%; height:2px; background:#262626; display:none; }
.main_cont .depth2>li>a:hover,
.main_cont .depth2>li>a:focus { color: #262626; font-weight: 600; }
.main_cont .depth2>li>a:hover::before,
.main_cont .depth2>li>a:focus::before { display:block; }
.main_cont .depth1>li:hover .depth2 { background:#fafafa; display:block; }
.main_cont .depth1>li:hover .topMenu-bg { display:block; }

.main_cont .hd_right { display:flex; align-items:center; gap:20px; }
.main_cont .hd_right .search { font-size:0; width:30px; display:block; }
.main_cont .hd_right .search i { font-size:20px; }
.main_cont .hd_right .sch_close i { font-size:31px; }
.main_cont .hd_right .sitemap { font-size:0; }
.main_cont .hd_right .sitemap i { font-size:25px; }
.main_cont .hd_right .sitemap.allmenu { display:none; }

.topMenu-bg { position: absolute; top:140px; left: 0; right: 0; background:#fff; z-index: -1; /* box-shadow: 1px 3px 6px rgb(0 0 0 / 5%); */ border-bottom: 1px solid #efefef; display:none; z-index:130; }
.topMenu-bg p { height: 173px;}

/* 검색열림  */
.open_search { position:absolute; top:139px; left:0; width:100%; background:#f5f6fa; padding:55px 0; display:none; z-index:200;}
.main_sch { color:#000; position:relative; width:570px; margin: 0 auto; }
.main_sch form { width:100%; }
.open_search .sfsearch { position:relative; display:inline-block; vertical-align:top; width:100%; }
.main_sch .sfsearch>input{ background:#fff; font-size:15px; color:#000; border:2px solid #188afd; border-radius:30px; width:100%; height:55px; padding:0 15px; }
.main_sch .sfsearch>input::placeholder { color: #000; opacity: 1; }
.open_search .sfsearch .sfbtn{ position: absolute; right: 40px; top: 50%; margin-top: -14px; }
.main_sch .sfsearch .sfbtn .sfbtn_wr{ font-size: 0; }
.main_sch .sfsearch .sfbtn .sfbtn_wr i{ font-size:22px; color:#188afd; }
.main_sch .schText { font-size:15px; color:#7d7d7d; padding: 6px 0 0 25px; display: inline-block; }
.main_sch .schText i { font-size: 17px; padding-right: 5px; }

/*모바일메뉴*/
#gnbAll_m { background:#fff; position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%;}
#gnbAll_m .gnbWrap { position:relative; }
#gnbAll_m .gnbBody { display:inline-block; width:100%; }
#gnbAll_m .gnbBody .title { width:100%; display:inline-block; padding: 20px 20px 30px; }
#gnbAll_m .gnbBody .title span { display:inline-block; }

#gnbAll_m .close { display:block; position:fixed; background:none; right:20px; z-index:3; width:35px; height:35px; top:30px; }
#gnbAll_m .close button { position:relative;display:block;width:100%;height:100%;right:auto;top:auto;overflow:hidden;text-indent:-9999px; }
#gnbAll_m .close > button::before,
#gnbAll_m .close > button::after { content:'';position:absolute;left:0;width:26px;height:4px;background-color:#2e2e2e;-webkit-transition:all 0.3s;transition:all 0.3s; }
#gnbAll_m .close > button::before { left:-4px; top:16px; width:40px; transform: translateY(0px) rotate(45deg); }
#gnbAll_m .close > button::after { left:-4px; bottom:44px; width:39px; transform:translateX(0px)translateY(29px) rotate(-45deg); }
#gnbAll_m .close > button i {display:none;}

#gnbAll_m .utill { display:block; }
#gnbAll_m .utill ul { display: flex; align-items: center;  gap: 30px; padding:20px 0 20px 20px; }
#gnbAll_m .utill ul li a { color:#000; font-size:17px; }

#gnbAll_m .allmenu_sch { width:100%; }
#gnbAll_m .allmenu_sch .sfsearch { position:relative; }
#gnbAll_m .allmenu_sch .sfsearch input { height:55px; line-height:55px; background:#f8f8f8; width:100%; border:none; font-size:18px;  color:#262626; padding: 0 45px; }
#gnbAll_m .allmenu_sch .sfsearch input::placeholder { font-size:18px; color:#262626; }
#gnbAll_m .allmenu_sch .sfsearch .sfbtn .sfbtn_wr { font-size:0; }
#gnbAll_m .allmenu_sch .sfsearch .sfbtn .sfbtn_wr i { font-size:25px; color:#262626; }
#gnbAll_m .sfsearch .sfbtn { position: absolute; left:20px; top: 50%; margin-top: -16px; }

#gnbAll_m .menuList { width:100%; border-top:5px solid #f8f8f8; border-bottom:1px solid #f8f8f8;     padding-bottom: 20px; }
#gnbAll_m .menuList .list { height:100%; position:relative; }
#gnbAll_m .menuList .list li { padding:15px 30px; width:100%; position:relative; text-align:left; }
#gnbAll_m .menuList .list li a { font-size:19px; display:block; position:relative; }
#gnbAll_m .menuList .list li a i { font-size: 25px; color: #bebebe; font-weight: 400; position: absolute;  right: 0; top: -2px; }
#gnbAll_m .menuList .list .active a { color:#e4585a; font-weight:600; }
#gnbAll_m .menuList .list .active li a { color:#000;  }
#gnbAll_m .menuList .list .active .active a { color:#e4585a; }

#gnbAll_m .menuList .subMenu { width:100%; display:none; background:#f5f5f5; margin-top: 20px;padding: 10px 0;  }
#gnbAll_m .menuList .subMenu li { padding:10px; }
#gnbAll_m .menuList .subMenu li a { font-size:16px; }
#gnbAll_m .menuList .subMenu .active a { color:#e4585a; }
#gnbAll_m .menuList .list > li.active .subMenu { display: block; }

#gnbAll_m .tnb_sns { border-right:0; padding: 15px 0 0 15px; }
#gnbAll_m .tnb_sns li { border-left:0; }
#gnbAll_m .tnb_sns li a { padding: 0 10px; }
#gnbAll_m .tnb_sns li i { font-size:22px; }

#gnbAll_m .more { display: flex; justify-content: space-around; align-items: center; border-top:1px solid #e1e1e1; margin-top:15px; }
#gnbAll_m .more li { position:relative; padding-left:23px; }
#gnbAll_m .more li:first-child::after { display:none; }
#gnbAll_m .more li a { font-size:14px; display:block; padding:10px 0; }
#gnbAll_m .more li i { position:absolute; left:0; top:50%; margin-top:-9px; }
#gnbAll_m .more .modify i { width:18px; height:18px; color:#fff; background:#188afd; border-radius:50%; font-size:13px; position:absolute; text-align:center; line-height:19px; }
#gnbAll_m .more .check::before { content:"P"; width:18px; height:18px; color:#fff; background:#e4585a; border-radius:50%; font-size:13px; position:absolute; text-align:center; line-height:19px; left:0; top:50%; margin-top:-9px; }
#gnbAll_m .more .view i { width:18px; height:18px; color:#fff; background:#ffce33; border-radius:50%; font-size:13px; text-align:center; line-height:19px; }




/* 서브 로케이션 */
.location { height:60px; background:#f6f6f6; border-bottom:1px solid #efefef; }
.location .layout_fix { position:relative; }
.location .location_box {position:relative;z-index:100;}
.location .location_box .home {position:absolute;left:0;top:0;width:53px;height:60px;}
.location .location_box .home a { font-size:0; display:block;width:100%;height:100%;}
.location .location_box .home i { font-size:20px; color:#707070; line-height:60px; }
.location .page_depth { padding-left:40px; }
.location .location_box > ul > li {position:relative;float:left;min-width:260px;}
.location .location_box > ul > li::before { content:""; position:absolute; top:20px; right:0; width:1px; height:20px; background:#cdcdcd; }
.location .location_box > ul > li:first-child::after { content:""; position:absolute; top:20px; left:0; width:1px; height:20px; background:#cdcdcd; }
.location .location_box > ul > li button {display:block;position:relative;width:100%;height:60px;line-height:60px;outline:0 none;padding:0 30px;color:#707070;text-align:left;overflow:hidden;}
.location .location_box > ul > li button:focus{outline: 2px solid #000;} /* 웹접근성 수정 */
.location .location_box > ul > li button::before { content:"\ea4e"; font-family:remixicon; position:absolute; top:0; right:20px; color:#161616; font-size:23px; }
.location .location_box > ul li.open .depth {display:block !important; border:1px solid #c6c6c6;}
.location .location_box > ul li.open button::before { content:"\ea78"; }
.location .location_box > ul li .depth {display:none;position:absolute;top:60px;left:0;width:100%;background-color:#f6f6f6;}
.location .location_box .list a {display:block;position:relative;padding:16px 15px 13px;font-size:14px;outline:0 none;}
.location .location_box .depth li.active a, 
.location .location_box .depth li a:hover, 
.location .location_box .depth li a:focus, 
.location .location_box .depth li a:active {font-weight:500;background-color:#4a4a4a;color:#fff;}
.location .location_box .depth li.active span { position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0 none;overflow:hidden;clip:rect(0, 0, 0, 0); }

/* 푸터 */
#footer { background:#eee; padding:50px 0; }
#footer .ft_info .link { display:flex; justify-content:flex-start; align-items:center; gap:45px; }
#footer .ft_info .link li { position:relative; }
#footer .ft_info .link li::before { content:""; position:absolute; top:4px; left:-21px; width:1px; height:9px; background:#c9c9c9; }
#footer .ft_info .link li:first-child::before { display:none; }
#footer .ft_info .link a { font-size:16px; color:#565656; padding:5px; }
#footer .ft_info .link li:first-child a { color:#f3413d; font-weight:600; padding-left:0; }
#footer .ft_info .address { padding-top:25px; }
#footer .ft_info .address+.address { padding-top:10px; }
#footer .ft_info .address span { padding-right:30px;  position:relative; font-size:15px; color:#5c5c5c; }
#footer .ft_info .address span::before { content:""; position:absolute; top:4px; left:-16px; width:1px; height:9px; background:#c9c9c9; }
#footer .ft_info .address span:first-child::before { display:none; }
#footer .ft_info .copy { font-size:14px; color:#777; font-weight:300; padding-top:10px; } /* 웹접근성 수정*/
#footer .ft_logo { display: flex; justify-content: space-between; align-items: end; } 
#footer .ft_logo dl { display: flex; justify-content: flex-start; align-items: center; gap:10px; }
#footer .ft_logo dd { font-size:14px; color:#777; font-weight:300; } /* 웹접근성 수정*/
#footer .ft_logo ul {display:flex; justify-content:flex-start; align-items:center; gap:20px; }

/* 퀵메뉴 */
.quick-menu { position:fixed; bottom: 26%; right: 13%;z-index: 10; box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2); border-radius: 5px; width:90px; padding-top:10px; background:#fff; }
.quick-menu ul { padding:0 15px; }
.quick-menu li { text-align:center; padding:14px 0 12px 0; }
.quick-menu li span { display:block; }
.quick-menu li span+span { padding-top:5px; }
.quick-menu .faq,
.quick-menu .inquiry { border-bottom:1px solid #eee; }
.quick-menu .chatbot img { width:37px; }
.quick-menu li a { font-size:14px; color:#5b5b5b; letter-spacing:0; }
.quick-menu .mobile_chat { display:none; }
.btn_top {width:100%; height:36px;background:#7354ed;color:#fff; border-radius:0 0 5px 5px; }
.btn_top span {font-size:14px; letter-spacing:0; font-weight:600; }


/* 컨테이너 */
.container { min-height:500px; padding:100px 0; }

/* 컨텐츠없음 */
.noContent { text-align:center; padding:100px 0 50px; background:url(/images/homepage/www/kr/common/no_content.png) center top no-repeat; display:inline-block; width:100%; margin-top: 20px; }
.noContent span { font-size:15px; color:#888888; }

/* 레이어팝업  */
.mainpopup {position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;box-sizing:border-box; z-index:9000; box-sizing:border-box; padding:24px 48px; background-color:rgba(0,0,0,0.5); }
.mainpopup .mainpopup_wrap {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex; align-items:center;justify-content:center;-webkit-align-items:center;-webkit-justify-content:center; -webkit-box-pack:center;-webkit-box-align:center;-moz-box-pack:center;-moz-box-align:center;-ms-box-pack:center;-ms-box-align:center;height:100%;}
.mainpopup .swiper-wrapper {width:auto;}
.mainpopup .mainpopup_area {position:relative; overflow:hidden}
.mainpopup .mainpopup_area + .mainpopup_area { margin-left:10px; }
.mainpopup .cont {width:500px;}
.mainpopup .cont a {display:block}
.mainpopup .pop_close{/*padding-top:5px;*/}
.mainpopup .close {height:30px; background:#d6d6d6; line-height:30px; padding-left:10px; font-size:13px; margin-top:-1px}
.mainpopup .close input {vertical-align: -1px;}
.mainpopup .close label {margin-left:3px; line-height: 34px; }
.mainpopup .close .closebtn {float:right; margin-right:10px; cursor:pointer; line-height: 34px;}

.mainpopup .pagination {position:absolute; bottom:35px; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); z-index:1;}
.mainpopup .pagination .swiper-pagination-bullet {width:12px; height:12px; margin-left:4px; background:#000; font-size:0; vertical-align:bottom; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;}
.mainpopup .pagination .swiper-pagination-bullet:first-child{margin-left:0;}
.mainpopup .pagination .swiper-pagination-bullet-active {background:#0056b8;}

/* 반응형 - media qurey 시작 */

/* 넓이가 1440px 이하일 때*/
@media all and (max-width:1440px){	
	.toparea .layout_fix { max-width:1280px; }
	.quick-menu { right:20px; }
}
/* 넓이가 1300px 이하일 때*/
@media all and (max-width:1300px){
	.tnb .layout_fix,
	.main_cont .layout_fix { width: 100%; padding: 0 15px; }
	.main_cont .menu-box { min-width: 900px; padding: 28px 0 0 0; }
	#footer .layout_fix { width:100%; padding:0 20px; }
	.btn_top { bottom:3%; right:2%; }
}

/* 넓이가 1200px 이하일 때*/
@media all and (max-width:1200px){
	.layout_fix { width:100%; padding:0 20px; }	
	.main_cont .hd_right .sitemap { display:none; }
	.main_cont .hd_right .sitemap.allmenu { display:block; }	
	.main_cont {     padding: 15px 0; }
	.main_cont .menu-box { display:none; }
}

/* 넓이가 920px 이하일 때*/
@media all and (max-width:920px){
	.tnb_link { display:none; }
	.quick-menu { width:70px; bottom:2%; }
	.quick-menu li span img { width:30px; }
	.quick-menu li:last-child span img { height: 24px; width: auto; }
	#footer { padding:30px 0; }
	#footer .ft_info .address span { display:block; padding-right:0;     word-break: auto-phrase; }
	#footer .ft_info .address span::before { display:none; }
}

/* 넓이가 767px 이하일 때*/
@media all and (max-width:767px){
	.location .location_box .home { width: 35px }
	.location .location_box > ul > .list01,
	.location .location_box > ul > .list03 { display:none; }
	.location .location_box > ul > li { float: none; min-width: 100%; }
	.location .location_box > ul > li::before { display:none; }
	.location .location_box > ul > li button { padding:0; }
	
	#footer .ft_logo { display:inline-block; width:100%;     margin-top: 2vh; }
    #footer .ft_logo dl { display: inline-block;  width: 100%; }
    #footer .ft_logo dd { font-size: 13px;     padding-top: 5px; }
    #footer .ft_logo ul { justify-content: flex-start;  margin-top: 2vh; }
    #footer .ft_logo ul li img { width: 60px; }
}
	
/* 넓이가 580px 이하일 때*/
@media all and (max-width: 580px){
	.hd_logo img { width:120px; }
	
	.quick-menu { padding-top:0; width: 50px; background:none; box-shadow:none; }
	.quick-menu ul { display:none;}	
	.quick-menu .mobile_chat { display:block; background:#fff; padding:8px; border-radius:50%; margin-bottom:10px; box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2); }	
	.btn_top { border-radius: 5px; height: 30px; line-height: 30px; }
		
	#footer .ft_info .link { gap: 10px; }
	#footer .ft_info .link li::before {     left: -6px; }
}	
	
/* 넓이가 500px 이하일 때*/
@media all and (max-width: 500px){
	.tnb_text { display: -webkit-box;  -webkit-box-orient: vertical;  overflow: hidden;  -webkit-line-clamp: 1; }
	
	.mainpopup { display:block; width:100%; height:auto; padding:10px; top:0; left:0; }
	.mainpopup .swiper-wrapper { width:100%;}
	.mainpopup .cont { width:100%; height:auto; }
	.mainpopup .cont img { max-width:100%; }
	.mainpopup .close { width:100%; height:30px; line-height:30px; box-sizing:border-box;}
	
    #footer { padding: 20px 0; }
    #footer .ft_info .address { padding-top: 15px; }	
	#footer .ft_info .link a,
	#footer .ft_info .address span { font-size: 14px; }
}
/* 넓이가 400px 이하일 때*/
@media all and (max-width: 400px){
    #footer .ft_info .link { gap: 3px; flex-wrap: wrap; }
    #footer .ft_info .link li::before { left: -2px; top: 5px; }
    #footer .ft_info .link a, 
    #footer .ft_info .address span { font-size: 13px; }    
}