@charset "UTF-8";
/*-------------------------------------------------
title       :레이아웃 반응형
Create date :2022-07-06
-------------------------------------------------*/

@media all and (max-width:1400px) {  
    #quickWrap {left:auto; margin-left:0; right:1.5rem}
}

@media all and (max-width:1280px) {
	#gnb > ul > li > a {padding:0 1.5rem}
}

@media all and (max-width:1193px) {
	.mo-hidden { display: block; }
	.pc-hidden { display: none; }
	
	/*header*/
	#header {height:4.8rem}
	#header .header_wrap {height:4.8rem}
	
	/*패밀리사이트*/
	.topbar {display:none}
	#header.active .topbar {display:block; position:fixed; top:4.8rem; right:0; width:80%; z-index:10; height:5.4rem} 
	.topbar .listwrap,
	.topbar .list {width:100%}
	.topbar .list li {width:50%}
	.topbar .list li a {padding:2rem 1.5rem; text-align:center; line-height:1}
	.topbar .list li.active a {color:#00E1CA}
	
	/*로고*/
	#logo {height:4.4rem}
	#logo a {background-size:15.7rem auto}
	
	/*상단메뉴*/
	#gnb {display:none}
	
	/*검색*/
	.header_wrap .search_open {top:0.8rem}
	
	.header_wrap .search {left:auto; right:0; top:4.8rem; width:80%}
	.header_wrap .search .search_group {height:100%}
	.header_wrap .search .schbox {position:absolute; left:2.4rem; top:4rem; width:calc(100% - 4.8rem); max-width:100%; padding:0}
	.header_wrap .search .schbox .sbtn {top:2rem}
	.header_wrap .search .toplist {width:100%; padding:15.4rem 2.4rem 0}
	.header_wrap .search .toplist ul > li {width:100% !important; margin-left:0 !important}
	.header_wrap .search .toplist ul > li:nth-child(n+2) {margin-top:1.2rem}
	
	.header_wrap .search_open.active + .search {height:calc(100vh - 4.8rem)}
	.header_wrap .search_open.active + .search:before {height:calc(100% - 4.8rem); top:4.8rem}
	
	/*전체메뉴*/
	.header_wrap .all_menu_btn {top:0.8rem}
	
	#gnb2 {left:auto; right:0; top:4.8rem; width:80%}
	#gnb2:before {position:fixed; content:''; width:100%; height:0; left:0px; top:0px; background-color:rgba(0, 0, 0, 0.5)}
	#gnb2 .lang {display:none}
	#gnb2 .topmenu_all {height:100%; padding-top:11rem; overflow-y:scroll; flex-direction:column}
	#gnb2 .topmenu_all > li {width:100% !important; margin-top:0 !important}
	#gnb2 .topmenu_all > li > a {position:relative}
	#gnb2 .topmenu_all > li > a:before { position: absolute; display: block; content: ''; width: 2rem; height: 2px; right: 0px; top: 1.2rem; border-radius: 2px; background-color: #fff; }
    #gnb2 .topmenu_all > li > a:after { position: absolute; display: block; content: ''; width: 2rem; height: 2px; right: 0px; top: 1.2rem; border-radius: 2px; background-color: #fff; transform: rotate(90deg); transition: all .2s; }
	#gnb2 .topmenu_all .submenu {width:100%; height:0; opacity:0; visibility:hidden}
	
	.header_wrap .all_menu_btn.active + #gnb2 {height:calc(100vh - 4.8rem)}
	.header_wrap .all_menu_btn.active + #gnb2:before {height:calc(100% - 4.8rem); top:4.8rem}
	
	#gnb2 .topmenu_all > li.active > a:after { transform: rotate(0); transition: all .2s; }
	#gnb2 .topmenu_all > li.active .submenu {height:100%; opacity:1; visibility:visible}
	
	/*footer*/
	.footer-wrap .default-wrap .address {float:none}
	.footer-wrap .default-wrap .accessibility {float:none}
	
	
	/*퀵*/
	#quickWrap {width:48px}
	#quickWrap .btn {width:48px; height:48px; background-size:24px}
	
	#quickWrap .issue { position: relative; text-align: left; }
	#quickWrap .issue-wrap.active {display:block; height: auto; }
	#quickWrap .issue-wrap { display: none; position: absolute; overflow: hidden; height: 0; right: 0px; bottom: calc( 100% + 7px); width: 288px; }
	#quickWrap .issue-wrap .issue-slider-w { background-color: #F6F7F7; border: 1px solid #D5DADC; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.12); padding: 16px 16px 32px; margin-bottom: 10px; }
	#quickWrap .issue-wrap .issue-slider-w::after { content: ''; width: 16px; height: 11px; position: absolute; bottom: -11px; right: 27px; background: url('/international/img/layout/icon_quick_deco.svg')no-repeat center; }
	#quickWrap .issue-wrap .issue-slider-w p { color: #353535 !important; font-weight: 900; }
	#quickWrap .issue-wrap .issue-slider-w img { width: 100%; }
	#quickWrap .issue-wrap .issue-slider-w a { display: block; width: 44px; background: #29758B; border-radius: 12px; color: #FFFFFF; letter-spacing: 0; line-height: 23px; padding: 0 12px; font-size: 16px; }
	#quickWrap .issue-wrap .custom-controls-wrap { position: absolute; overflow: hidden; right: 16px; bottom: 27px; }
	#quickWrap .issue-wrap .issue-slider-w .item { display: block !important; }
	
	
	/*newsletter*/
	#quickWrap .btn.newsletter::before {width:25px; height:18px}
	#quickWrap .btn.newsletter::after {width:14px; height:16px}
	
	#mailing_div {overflow-x:hidden; overflow-y:auto; background:rgba(0, 0, 0, 0.7); position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:99999 }
	#mailing_div .form {top:20px; transform:translate(0)}
	#mailing_div form > div {width:100%}
	#mailing_div .left {max-height:550px; overflow:hidden}
	#mailing_div .left .txt-box {width:100%; padding:32px}
	#mailing_div .left .txt-box p { font-size: 12px; word-break: keep-all; }
	#mailing_div .right {padding:24px}
}

@media all and (max-width:768px) {
	#footer .footer-wrap {padding:3rem 0}
	#mailing_div .left {max-height:430px}
}

@media all and (max-width:480px) {
	#mailing_div .left {max-height:300px}
}