@charset "UTF-8";
@import url('/css/board-inter.css');
@import url(contents.css);

/*퀵*/
#quickWrap > * {display:none !important}
#quickWrap > .btn.top {display:block !important}

/*서브비주얼*/
#visual {position:relative; width:100%; height:15rem; margin-top:12rem}
#visual::before { position: absolute; content: ''; width: 50%; height: 100%; left:-80rem; top:0; background-color: #3C3C3C; z-index: 1; }
#visual::after { position: absolute; content: ''; width: 50%; height: 100%; right:-80rem; top:0; background-color: #0D4777; z-index: 1; }
#visual > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 2; text-transform: uppercase; }
#visual .bg { position: absolute; top: 0px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; z-index: 2; background-image: url('/international/img/content/sub-visual-default.jpg'); background-size: cover; }

/*좌측메뉴*/
#snb {display:none}

/*콘텐츠*/
#contents {position:relative; width:calc(100% - 4.44%); max-width:1192px; margin:0 auto}

/*로케이션*/
.location {display:flex; justify-content:space-between; overflow: hidden; position: relative; margin:1.5rem 0 6.4rem}
.location .path li {color: #6D6D6D; float: left; font-size:1.4rem; letter-spacing: 0; position:relative}
.location .path li.icon:before {content:'Home'; display:inline-block; padding-left:2.2rem; background:url('/international/img/layout/icon_home.svg') no-repeat left top 0.6rem}
.location .path li.icon i {display:none}
.location .path li + li {background:url('/international/img/layout/icon_breadcrumb_arrow.svg') no-repeat left 0.4rem center; padding-left:2.4rem}
.location .path li ul {display:none}

/*util*/
.util .share{position:relative;}
.util .share.on .share_list{display:block;}
.util .share_list{position:absolute;top:-0.4rem;right:4rem;width:21.2rem;display:none;}
.util .share_list li{display:inline-block;vertical-align: middle;}
.util .share_list li + li{padding-left:1.8rem;}

.location .util > li{float:left;}
.location .util > li + li{padding-left:2.3rem;}
.location .util > li > a{font-size:1.7rem;}
.util .share_list li > a:hover img{display:none;}
.util .share_list li > a{position:relative;width:2.4rem;height:2.4rem;display:block;}
.util .share_list li > a:before{position:absolute;top:0;left:0;background-image: url(/main/img/content/xi-facebook-hover.png);width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center;content:'';opacity:0;visibility:hidden;}
.util .share_list li > a:hover:before,
.util .share_list li > a:focus:before{opacity:1;visibility:visible;}
.util .share_list li.twitter > a:before{background-image:url(/main/img/content/xi-twitter-hover.png);}
.util .share_list li.band > a:before{background-image:url(/main/img/content/naver-hover.png);}
.util .share_list li.kakaotalk > a:before{background-image:url(/main/img/content/xi-kakaotalk-hover.png);}
.util .share_list li.urlShare > a:before{background-image:url(/main/img/content/xi-link-hover.png);}
.util .share_list li > a img{width:100%;height:100%;}
.util .share_list li.band > a{width:1.9rem;height: 1.8rem;}


/*콘텐츠 타이틀*/
#cont_title {color:#121212; font-size:4rem; font-weight:900; line-height:1.2; margin-bottom:8rem; text-align:center}

/*4뎁스*/
#depth4_menu_div { position:relative; overflow: hidden; width:100%; text-align: center;margin-bottom:8rem}
#depth4_menu_div::after { position: absolute; content: ''; width: 100%; height:0.4rem; left:0; bottom:0; background-color: #E8E8E8; z-index: 1; }
#depth4_menu_div ul { position: relative; text-align:center; overflow: hidden; margin: auto; z-index: 2; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:4rem;}
#depth4_menu_div li { position:relative; min-width: 64px;}
#depth4_menu_div li > a { display:flex; flex-direction:row; align-items:center; justify-content:center; position:relative; height:6.4rem; line-height:1; font-size:2.2rem; font-weight:900; color:#6D6D6D; font-family:"Lato", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif; text-align:center; }
#depth4_menu_div li a::after { position:absolute; content:""; height:0.4rem; width:0; left: 0; bottom: 0px; transition:0.3s;}
#depth4_menu_div li.active a { color:#29758B; }
#depth4_menu_div li.active a::after { background-color:#29758B; width:100%}

/*5뎁스*/
#depth5_menu_div { overflow: hidden; margin-bottom:8rem}
#depth5_menu_div ul {display:flex; flex-wrap:wrap; width: 100%; text-align: center; }
#depth5_menu_div li {flex:1 1 25%; width:25%; border-right: 1px solid #D5DADC; box-sizing: border-box; }
#depth5_menu_div li:last-child,
#depth5_menu_div li:nth-child(4n) {border-right: 0; }
#depth5_menu_div li:nth-child(n+5) {border-top:1px solid #D5DADC}
#depth5_menu_div li a { padding:1.4rem 1rem; display:flex; flex-direction:column; justify-content:center; height:100%; background-color: #F6F7F7; color: #353535; font-size:2.2rem; font-weight:900; line-height:2.8rem}
#depth5_menu_div li:hover a, #depth5_menu_div li.active a { background-color: #03366C; color: #FFFFFF; }

/*콘텐츠 탭*/
.con-tab { overflow: hidden; margin-bottom:4rem}
.con-tab ul {background-color: #F6F7F7; border-bottom:1px solid #626F7B; display:flex; flex-wrap:wrap; width: 100%; text-align: center; }
.con-tab li {flex:1 1; width:25%; border-right: 1px solid #fff; box-sizing: border-box; }
.con-tab li:last-child {border-right: 0; }
.con-tab li a { padding:0 1rem; display: block; color: #6D6D6D; font-size:1.6rem; font-weight:900; height:4rem; line-height:4rem !important}
.con-tab li:hover a, .con-tab li.active a { background-color: #626F7B; color: #FFFFFF; }

/*팝업창 탭*/
.tab-wrap { overflow: hidden; }
.tab-wrap ul {background-color:#F6F7F7; display:flex; flex-wrap:wrap; width:100%}
.tab-wrap ul li {border-right:1px solid #D5DADC; box-sizing:border-box; flex: 1 1}
.tab-wrap ul li:last-child {border-right:0}
.tab-wrap li a,
.tab-wrap li button {color:#6D6D6D; display:block; padding:1.4rem 0; text-align:center; width:100%}
.tab-wrap li.active a, .tab-wrap li.active button {background-color:#03366C; color:#fff !important}
.tab-wrap .select-wrap { float: left; width: 22.3rem; background-color: #F6F7F7; }
.tab-wrap .select-wrap select { width: calc(100% - 4.8rem); float: left; font-family: 'lato'; display: block; color: #353535; text-align: center; padding:1.4rem 2.4rem 1.4rem 5rem; background: transparent url('../../images/page/icon_select_arrow.svg')no-repeat; background-position:11rem}
.tab-wrap .select-wrap:hover, .tab-wrap .select-wrap.active { background-color: #03366C; color: #FFFFFF; }
.tab-wrap .select-wrap:hover select, .tab-wrap .select-wrap.active select { color: #FFFFFF; background: transparent url('../../images/page/icon_select_arrow_w.svg')no-repeat; background-position: 11rem}
.tab-contents { position: relative; display: none; }
.tab-contents.active { display: block; }

.tab-wrap.type2 {position:relative; overflow:hidden; width:100%; text-align:center; max-height:3.6rem; border-bottom:1px solid #626F7B; margin-bottom:0}
.tab-wrap.type2 li {border-right:0}
.tab-wrap.type2 li a,
.tab-wrap.type2 li button {padding:0 1.6rem; line-height:3.6rem !important}
.tab-wrap.type2 li.active a { background-color: #626F7B; }
.tab-wrap.type2 li:hover a, .tab-wrap.type2 li:hover button {background-color:inherit; color:#6D6D6D !important}

/* 카드뉴스 상세페이지 썸네일 */
.board_view .gallery_view .thumb li a img{margin:0 auto}
.board_view .gallery_view .thumb .bx-controls{position:static}
.board_view .gallery_view .thumb .bx-controls a{top:50%;transform:translateY(-50%)}
.board_view .gallery_view .list .bx-controls{top:50%}

@media (min-width:768px) {
	.tab-wrap li:hover a, .tab-wrap li:hover button {background-color:#03366C; color:#fff !important}
}

@media (max-width:1193px) {
	#visual {height:7.6rem; margin-top:4.8rem}

	.location {margin:0; overflow:inherit}
	.location .path {display:none}
	.location .util {position:absolute; right:0; top:4rem}
	.location .util > li {display:none}
	.location .util .share {display:block}
	.util .share_list {top:4rem; right:-0.5rem}

	#cont_title {text-align:left; margin-top:3rem; margin-bottom:5.5rem; padding-right:4rem}

	#depth4_menu_div {max-height:inherit; margin-bottom:5rem}
	#depth4_menu_div::after {display:none}
	#depth4_menu_div ul {justify-content:flex-start; flex-wrap:wrap; position:relative; gap:1rem;}
	#depth4_menu_div li {flex:1 1 30%; max-width:inherit; height:100%;}
	#depth4_menu_div li > a {background-color:#e8e8e8; font-size:1.7rem;}
	#depth4_menu_div li a::after {display:none}
	#depth4_menu_div li.active a {background-color:#29758B; color:#fff}

	#depth5_menu_div {margin-bottom:5.5rem}
	#depth5_menu_div li a {font-size:1.8rem}

	.con-tab {margin-bottom:3rem}

	.tab-wrap {margin-bottom:5.5rem}
}

@media (max-width:768px) {
	#cont_title {font-size:3.4rem; font-weight:700; letter-spacing:0}

	#depth5_menu_div {margin-bottom:5.5rem}
	#depth5_menu_div li a {font-size:1.6rem; line-height:2.2rem}

	.con-tab li {width:50%; flex:0 1 50%}
	.con-tab li:nth-child(n+3) {border-top:1px solid #fff}

	.tab-wrap {margin-bottom:3rem}
	.tab-wrap ul li {width:50%}

	.tab-wrap.type2 {max-height:auto}
	.tab-wrap.type2 ul li > a {padding:0 5px}
}

@media (max-width:640px) {
	#depth4_menu_div li {flex:1 1 calc(50% - 5px); width:calc(50% - 5px)}
	#depth4_menu_div li:nth-child(n+3) {flex:0 1 calc(50% - 5px)}
	#depth4_menu_div li > a {font-size:1.6rem; padding:0 1rem;}
}

/* 만족도 조사 */
* + .contents_info {margin:10rem 0 0}
.contents_info > * + * { margin-top: -1px; }

.contents_info .duty { overflow: hidden; position: relative; padding: 1.5rem 2rem; border: 1px solid #ddd; line-height: 3rem; }
.contents_info .duty .title { font-size: 2rem; float: left; overflow: hidden; width: 3rem; height: 3rem; border-radius: 100%; background-color: #3c4165; font-weight: 400; color: #fff; text-align: center; }
.contents_info .duty .title::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; content: ''; }
.contents_info .duty .label { font-weight: 500; color: #3c4165; }
.contents_info .duty .label::after { display: inline-block; position: relative; top: -2px; width: 1px; height: 1.2rem; margin: 0 0.5rem 0 0.75rem; background-color: #ddd; content: ''; vertical-align: middle; }
.contents_info .duty .part {color:#666}
.contents_info .duty .part strong {color:#000; font-weight:normal; position:relative}
.contents_info .duty .part strong:before {content:''; color:#666; font-family:'xeicon'; font-size:1.2rem; display:inline-block; vertical-align:1px}
.contents_info .duty .list { float: left; width: calc(100% - 25rem); padding-left: 1rem; }
.contents_info .duty .list li {font-size:1.4rem; float: left; margin-right: 2rem; }
.contents_info .duty .list li:last-child { margin-right: 0; }
.contents_info .duty .date { position: absolute; right: 2rem; top: 1.5rem; }

.contents_info .group { display: table; width: calc(100% + 0px); table-layout: fixed; }
.contents_info .group > * { display: table-cell; padding-right: 0px; vertical-align: middle; }
.contents_info .group .item + .item { border-left: 0 none; }
.contents_info .group > .qr:first-child { float: right; }
.contents_info .group .qr { width: 15rem; border: 1px solid #ddd; }

.contents_info #satisfy { position: relative; padding:2rem 2.5rem; border: 1px solid #ddd; background-color: #f6f7f9; }
.contents_info #satisfy .title { font-size: 1.6rem; position: relative; margin-bottom: 1rem; font-weight: 300; }
.contents_info #satisfy .title > strong { font-size: 1.6rem; font-weight: 600; color: #333; display:block; line-height:1.2; margin-top:0.5rem}
.contents_info #satisfy .title > span { display: none; font-size:1.4rem; color: #484c58; line-height: 1.5; }

.contents_info #satisfy .select {display:none}
.contents_info #satisfy .list {display:inline-block; padding: 1rem 0; }
.contents_info #satisfy .list .form_radio {display:inline-block; margin-right:2rem; line-height:1; position:relative; vertical-align:top}
.contents_info #satisfy .form { position: absolute; right: 2.5rem; bottom: 3rem; width:50%; max-width:50rem; height: 4rem; padding: 0 10rem 0 0; line-height: 4rem; }
.contents_info #satisfy .form .length {font-size:1.4rem; position: absolute; right:11rem; top: 0; width: 9rem; text-align: right}
.contents_info #satisfy .form .form_textbox {background-color:#fff; color:#6d6d6d; width:100%; height:4rem; padding-right:6rem}
.contents_info #satisfy .form .btn { position: absolute; right: 0; bottom: 0; width: 10rem; height:4rem; line-height:4rem; border: 0 none; background-color: #484c58; color: #fff; font-weight:normal; text-align: center; }
.contents_info #satisfy .cont .txt {font-size:1.4rem; position: absolute; right: 2.5rem; top: 1.5rem; }
.contents_info #satisfy .cont .txt::before { content: '['; }
.contents_info #satisfy .cont .txt::after { content: ']'; }
.contents_info #satisfy .cont .txt span + span::before { content: ' / '; }
.contents_info #satisfy .cont .txt strong { font-weight: 400; }
.contents_info #satisfy .cont .end + .txt {top:3rem}

.kogl { display: table; width:100%; table-layout: fixed; border: 1px solid #ddd; }
.kogl > * { display: table-cell; padding-right:0; vertical-align: middle; }
.kogl .img { width: 17rem; padding: 1rem; border-right: 1px solid #ddd; text-align: center; }
.kogl .txt { padding: 3rem; }

@media (max-width:1193px)
{
    .contents_info #satisfy .form {width:100%; max-width:100%; position:relative; right:inherit; bottom:inherit}
    .contents_info #satisfy .cont .end + .txt {position:static}
}

@media (max-width:768px)
{
	.contents_info .duty .title {display:none}
	.contents_info .duty .list {width:100%; padding-left:0}
	.contents_info .duty .list li {float:none; font-size:1.4rem; margin-right:0}
	.contents_info .duty .label {display:inline-block; position:relative; width:8rem; margin-right:1rem; vertical-align:middle}
	.contents_info .duty .label::after {position:absolute; top:50%; left:auto; right:0; transform:translateY(-50%); margin:0}
}