@charset "utf-8";

/******** Common ********/

#issue .tt {width:1192px; margin:0 auto; max-width:100%; position:relative;}
#issue .control.open {right:18rem; top:0.3rem; z-index:10;}
#issue .control.open strong {top:0.2rem !important;}


#wrap { width:100%; min-width:320px; margin:0 auto; overflow:hidden; background-color:  #fff; color: #4B5053; position:relative}
#skipnavi li a {  display:block; font-size:1.6rem; width:100%; position:absolute; top:-10000px; left:0; text-align:center; z-index:999999; line-height:1; letter-spacing:0; }
#skipnavi li a:focus { position:absolute; top:0; left:0; font-weight:bold; color:#fff; background:#272727; padding:2rem 0; line-height:1; }
.mo-hidden { display: block; }
.pc-hidden { display: none; }

/*로딩바*/
#mw_temp {position:fixed; width:100%; height:100%; z-index:100}
#mw_temp .bg {background-color:rgba(0,0,0,0.5); width:100%; height:100%}
#mw_temp .fg {color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center}

/*header*/
#header {position:fixed; width:100%; top:0; left:0; height:12rem; background-color:#fff; z-index:3}
#header::after {content:''; position:absolute; left:0px; bottom:-4px; width:100%; height:4px; background-image:linear-gradient(180deg, #000000 0%, rgba(0,0,0,0.5) 100%); opacity:.1}
#header .header_wrap {position:relative; width:calc(100% - 4.44%); max-width:1192px; margin:0 auto; height:8rem; background-color:#fff}

/*패밀리사이트*/
.topbar {position:relative; width:100%; height:4rem; background-color:#4B5053}
.topbar .container {position: relative; width:100%; max-width:1192px; margin:0 auto; clear:both; overflow:hidden}
.topbar .listwrap {float:right}
.topbar .list {display:flex}
.topbar .list li {background-color:rgba(0, 0, 0, 0.3)}
.topbar .list li:first-child {background-color:transparent}
.topbar .list li a {display:block; line-height:4rem; font-size:1.4rem; color:#D5DADC; font-weight:700; padding:0px 1.2rem}
.topbar .list li.active a {color:#00E1CA}

/*로고*/
#logo {float:left; height:8rem}
#logo a {position:relative; display:block; width:25rem; height:100%; background:url('/international/img/layout/logo.png') no-repeat left center; background-size:25rem auto}
#logo a img {display:none}

/*상단메뉴*/
#gnb {position:relative; float:right; margin-right:11rem}
#gnb > ul {overflow:hidden}
#gnb > ul > li {float:left}
#gnb > ul > li > a {display:block; height:8rem; line-height:8rem; padding:0px 2rem; font-size:1.8rem; font-weight:900; color:#353535; font-family:"Lato", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif; text-transform:uppercase}
#gnb > ul > li > a:hover,
#gnb > ul > li > a:focus,
#gnb > ul > li.active > a,
#gnb > ul > li > a.active {color:#29758B}

#gnb .submenu {overflow:hidden; display:none; position:absolute; background-color:#F6F7F7; min-width:36rem; padding:3rem; border-bottom:1px solid #6D6D6D; z-index:2; margin-top:-1rem}
#gnb > ul > li.active .submenu {display:block}
#gnb .submenu li + li {margin-top:1rem}
#gnb .submenu li > a {font-size:1.6rem; color:#6D6D6D; font-family:"Lato", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight:400}
#gnb .submenu li > a.active,
#gnb .submenu li > a:hover,
#gnb .submenu li > a:focus {color:#353535; font-weight:900}
#gnb .submenu div {display:none}

/*검색*/
.header_wrap .search_open {position:absolute; top:2.4rem; right:4.8rem; width:3.2rem; height:3.2rem}
.header_wrap .search_open:before {content:''; background-image:url('/international/img/layout/icon_search_b.svg'); display:block; width:100%; height:100%}
.header_wrap .search_open.active:before {content:''; width:100%; height:2px; background-color:#353535; background-image:inherit; transform:translateY(0.9rem) rotate(45deg); position:absolute; left:0; top:0.6rem}
.header_wrap .search_open.active:after {content:''; width:100%; height:2px; background-color:#353535; transform:translateY(-0.9rem) rotate(-45deg); position:absolute; left:0; bottom:0.6rem}

.header_wrap .search {display:none; overflow:hidden; position:fixed; left:0; top:12rem; width:100%; height:0vh; transition:all .2s; z-index:3}
.header_wrap .search:before {position:fixed; content:''; width:100%; height:0; left:0px; top:0px; background-color:rgba(0, 0, 0, 0.5)}
.header_wrap .search .inner {background-color:#4B5053; position:absolute; overflow:hidden; width:100%; height:100%}
.header_wrap .search .search_group {position:relative; width:100%; max-width:1192px; margin:0 auto; overflow:hidden}
.header_wrap .search .schbox {position:relative; width:50%; max-width:44rem; float:right; padding:4rem 0px 5.6rem}
.header_wrap .search .schbox input {width:100%; padding-right:7rem; padding-left:2.4rem; height:7.2rem; line-height:6rem; background-color:#F2F2F2; border:6px solid #9CA3A6; font-size:2.2rem; font-weight:900; color:#6D6D6D; letter-spacing:1px}
.header_wrap .search .schbox input:focus{color:#4B5053; border:2px solid #115999}
.header_wrap .search .schbox input::placeholder {color:#4B5053; font-weight:900}
.header_wrap .search .schbox input:disabled,.input-item input:read-only{color:#9CA3A6}
.header_wrap .search .schbox .sbtn {position:absolute; top:6rem; right:2.4rem; width:3.2rem; height:3.2rem}
.header_wrap .search .schbox .sbtn:before {content:''; background:url('/international/img/layout/icon_search_b.svg'); display:block; width:100%; height:100%}
.header_wrap .search .toplist {overflow:hidden; padding:5rem 6rem 5.6rem; width:50%; float:left}
.header_wrap .search .toplist strong {padding-top:1.3rem; position:relative; width:13rem; font-size:2.2rem; font-weight:900; color:#fff; margin-right:6rem; font-family:"Lato", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif; text-transform:uppercase}
.header_wrap .search .toplist strong::before {position:absolute; content:''; left:0px; top:0px; width:4rem; height:0.4rem; background-color:#29758B}
.header_wrap .search .toplist ul {overflow:hidden; margin-top:1.6rem}
.header_wrap .search .toplist ul > li {float:left}
.header_wrap .search .toplist ul > li:nth-child(2n+1) {width:25.7rem}
.header_wrap .search .toplist ul > li:nth-child(2n) {margin-left:4rem}
.header_wrap .search .toplist ul > li:nth-child(n+3) {margin-top:1.2rem}
.header_wrap .search .toplist ul > li > a {font-size:16px; color:#fff; line-height:1}

.header_wrap .search_open.active + .search {display:block; height:22.8rem; transition:all .2s}
.header_wrap .search_open.active + .search:before {height:calc(100% - 12rem); top:12rem}


/*전체메뉴*/
.header_wrap .all_menu_btn {position:absolute; right:0px; top:2.3rem; width:3.3rem; height:3.2rem}
.header_wrap .all_menu_btn:before {content:''; border-top:2px solid #353535; border-bottom:2px solid #353535; width:100%; height:1.8rem; position:absolute; left:0; top:0.5rem}
.header_wrap .all_menu_btn:after {content:''; background-color:#353535; width:100%; height:2px; position:absolute; left:0; top:1.5rem}
.header_wrap .all_menu_btn.active:before {content:''; border:0; height:2px; background-color:#353535; transform:translateY(0.9rem) rotate(45deg); top:0.6rem}
.header_wrap .all_menu_btn.active:after {content:''; transform:translateY(-0.9rem) rotate(-45deg); top:auto; bottom:0.6rem}

#gnb2 {display:none; position:fixed; left:0; top:12rem; width:100%; height:0vh; transition:all .2s; z-index:3}
#gnb2:before {position:fixed; content:''; width:100%; height:0; left:0px; top:0px; background-color:rgba(0, 0, 0, 0.5)}
#gnb2 .inner {background-color:#4B5053; position:absolute; overflow:hidden; width:100%; height:100%}
#gnb2 .lang {display:none}
#gnb2 .topmenu_all {display:flex; flex-wrap:wrap; position:relative; width:100%; max-width:1192px; margin:0 auto; padding:4rem 0 5.6rem; overflow:hidden}
#gnb2 .topmenu_all > li {overflow:hidden; position:relative; padding:1rem 4rem 0; margin-bottom:6rem; width:33.333%}
#gnb2 .topmenu_all > li::before {position:absolute; content: ''; left:4rem; top:0px; width:4rem; height:4px; background-color:#29758B}
#gnb2 .topmenu_all > li > a {position:relative; display:block; font-size:2.2rem; font-weight:700; color:#fff; font-family:"Lato", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif; text-transform:uppercase}
#gnb2 .topmenu_all .submenu {overflow:hidden; margin-top:1.6rem}
#gnb2 .topmenu_all .submenu li {line-height:1}
#gnb2 .topmenu_all .submenu li + li {margin-top:1rem}
#gnb2 .topmenu_all .submenu li > a {font-size:1.6rem; color:#fff; line-height:1}
#gnb2 .topmenu_all .submenu div {display:none}

.header_wrap .all_menu_btn.active + #gnb2 {display:block; height:59rem; transition:all .2s}
.header_wrap .all_menu_btn.active + #gnb2:before {height:calc(100% - 12rem); top:12rem}


/*footer*/
#footer {background-color:#1F1F20}
#footer .footer-wrap {color: #C9C9C9; font-size: 13px; padding:7rem 0 ; position:relative; width:calc(100% - 4.44%); max-width:1192px; margin:0 auto}
#footer .footer-wrap p + p { margin-top:1rem}
#footer .footer-wrap a { color: #C9C9C9; font-size: 13px; }


/*퀵*/
#quickWrap .btn.top { background-color: #9CA3A6; background-image: url(/international/img/layout/icon_top.svg); margin-top:0.8rem}
.go_top {display:none}

#quickWrap { position: fixed; width: 72px; height: auto; left: 50%; margin-left: 627px; bottom: 0px; z-index: 4; transition: all .2s; }
#quickWrap .btn { float: left; width: 72px; height: 72px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12); border: 0px; border-radius: 100%; background-repeat: no-repeat; background-position: center; overflow: inherit; }
#quickWrap .btn.new::after { content: ''; position: absolute; right: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #FF266A; border: 3px solid #FFFFFF; box-sizing: border-box; }
#quickWrap .btn.issue {background-color: #27B4CA; background-image: url(/international/img/layout/icon_issue.svg); }
#quickWrap .btn.issue:hover { background-color: #139AAF; }

#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 {background-color: #00C2AE; position: relative; margin-top:8px; }
#quickWrap .btn.newsletter::before { content: ''; position: absolute; left: 50%; top: 38%; transform: translateX(-50%); width: 36px; height: 26px; background: url('/international/img/layout/icon_newsletter.svg')no-repeat center; background-size: cover; }
#quickWrap .btn.newsletter::after { content: ''; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 20px; height: 22px; background: url('/international/img/layout/icon_newsletter02.svg')no-repeat center; background-size: cover; -webkit-transition:background-image 0.2s cubic-bezier(0.75,0.1,0.25,1);
    transition:background-image 0.2s cubic-bezier(0.75,0.1,0.25,1);
animation-name:flyingStart;
animation-duration:1.2s;
animation-iteration-count:infinite;
animation-timing-function:ease-out; }
#quickWrap .btn.newsletter:hover { background-color: #00A8A2; }

#mailing_div {display:block; 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 {position:relative; overflow: hidden; width:calc(100% - 30px); max-width: 900px; margin:20px auto; top:50%; transform: translateY(-50%); }
#mailing_div form {background-color:#fff; border: 8px solid #00C2AE; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20); height:100%; clear:both; overflow:hidden; margin-bottom:16px}
#mailing_div form > div { position: relative; float: left; width: 50%; }
#mailing_div form > div img { display: block; width: 100%; }
#mailing_div .left .txt-box { position: absolute; left: 0; top: 0; padding: 40px; }
#mailing_div .left .txt-box p { font-size: 12px; word-break: keep-all; }
#mailing_div .left hr { width: 40px; height: 1px; background: #fff; }
#mailing_div .right { padding: 40px 40px 0; }
#mailing_div .right .txt-box { padding: 16px; border: 1px solid #D5DADC; height: 112px; overflow: hidden; overflow-y: auto; }
#mailing_div .right .radio-wrap { text-align: center; }
#mailing_div .right .radio-wrap > span { display: inline-block; }
#mailing_div .right .radio-wrap > span + span { margin-left: 24px; }
#mailing_div .right .radio-item input[type="radio"] + label { padding-top: 4px; }
#mailing_div .right hr { height: 1px; background: #D5DADC; }
#mailing_div .right .btn-wrap { overflow: hidden; text-align: center; }
#mailing_div .right .btn-wrap button { display: inline-block; float: none; width: auto; height: auto; border-radius: 0px; box-shadow: none; color: #fff; background-color: #6D6D6D; border: 1px solid #6D6D6D; }
#mailing_div .right .btn-wrap button:hover { background: #03366C; border: 1px solid #03366C; }
#mailing_div .right .btn-wrap .tooltip-close { margin: 0; background-color: #fff; border: 1px solid #6D6D6D; color: #6D6D6D; margin-left: 4px; }
#mailing_div .right .btn-wrap .tooltip-close:hover { border: 1px solid #03366C; background: #fff; color: #03366C; }
#mailing_div .layer-footer p a { text-decoration: underline; }

@keyframes flyingStart{
	0% {top:10px}
	50%{top:14px}
	100%{top:10px}
}