@import url(common.css);

#wrap {font-size:13px; min-width:1200px; font-family:"Noto Sans KR"}

header {position: relative; display: flex; align-items: center; justify-content: center; width:1200px; height:80px; margin: 0 auto; background-color:#fff; border-color:#ccc; border-style:solid; border-width:0; z-index:100; transition:all 0.5s ease .1s;}
header > ul {width:100%; height:80px; border-bottom:1px solid #ddd} 
header > ul > li {position:relative; width:1200px; margin:0 auto}
header .logo {position:absolute; top:10px; left: 10px; width:160px; height:60px; background-image:url(../images/logo2.png); cursor:pointer; background-repeat:no-repeat; z-index:10}
header .lnb {display:flex; width: 50%; height:30px; gap: 40px; justify-content: center; align-items: center; }
header .lnb a {display:block; font-size:18px; font-weight: 500; white-space:nowrap;}
header .lnb a:hover {color:#c42}

header .top_call {position:absolute; top:15px; right:150px; width:10%; font-size:18px; font-weight:600; padding-top:25px; text-align:center; background:url(../images/top_call.png) no-repeat 10px top; display:none;}
header .top_remote a {display:block; position:absolute; top:13px; right:0; width:10%; font-family:"Noto Sans KR"; font-size:15px; font-weight:600; padding-top:30px; text-align:center; letter-spacing:-.05em; background:url(../images/top_remote.png) no-repeat center top}
header .top_login a {display:block; position:absolute; top:22px; right:140px; padding:0 22px; line-height:36px; border-radius:18px; font-size:15px; font-weight:600; color:#fff; background:#1d4ed8; transition:background .2s}
header .top_login a:hover {background:#0b1f4b}
header .top_login.on span {position:absolute; top:22px; right:250px; line-height:36px; font-size:15px; white-space:nowrap; color:#374151}
header .top_login.on span b {font-weight:700; color:#1d4ed8}
header .top_login.on span a {position:static; display:inline; padding:0; border-radius:0; font-size:inherit; font-weight:400; line-height:inherit; color:inherit; background:none}
header .top_login.on span a:hover {color:#1d4ed8; background:none; text-decoration:underline}
header .top_login.on a {color:#374151; background:#f3f4f6}
header .top_login.on a:hover {color:#fff; background:#0b1f4b}

.gnbWrap {position:relative; background:#f1f1f0; width:100%; height:40px}
.gnbWrap > div {width:1200px; margin:0 auto; padding-top:10px}
.gnbWrap ul li {position:relative; float:left; line-height:20px; padding:0 20px}
.gnbWrap ul li::after {content:''; display:block; position:absolute; right:1px; top:5px; width:1px; height:10px; background:#777}
.gnbWrap ul li:last-child::after {display:none}
.gnbWrap img {vertical-align:middle}
.gnbWrap .fr {padding-right:10px;}
.gnbWrap .fr input {width:70px; height:20px; border:none; border-radius:10px; text-align:center; color:#fff; vertical-align:top; background:#999}
.gnbWrap .fr div {display:inline}
#h_login, #h_join {cursor:pointer }
.lnb img{padding-left:5px;}

.container {position:relative; width:1200px; margin:0 auto; clear:both}

.login_layer {display:none; position:absolute; top:40px; right:0; width:200px; height:100px; border:1px solid #ccc; background:#fff; z-index:10}

/* main */
.left_bn {position:absolute; top:10px; left:-110px; z-index:10}
.left_bn li {margin-bottom:10px}
#quick_menu {position:absolute;  text-align:center; right:0; top:100px; z-index:10}
#quick_menu ul {margin-bottom:10px;}
#quick_menu ul:last-child img {text-align:center;}
#quick_menu img {vertical-align:top}

.m_video {width:830px; height:175px; margin-bottom:15px;}
.m_video ul {float:left;}
.m_video .vod { width:300px; height:175px;}


.wf {width:830px; height:110px; padding-top:10px; border:1px solid #ccc; margin-bottom:15px}
.wf ul>li {float:left; margin-right:5px}
.wf .code {width:261px}
.wf .code input[type=text] {width:261px; height:38px; margin-bottom:5px; background:#eee}

.hevt {width:830px; height:262px; border:1px solid #ccc; margin-bottom:15px}
.hevt ul {float:left; margin-top:5px;}
.hevt_t {width:317px; height:38px; margin-left:9px; background:url(../images/hevt_hit.jpg) no-repeat;}
.hevt_h {width:317px; height:38px; margin-left:9px; background:url(../images/hevt_tm.jpg) no-repeat;}
.hevt img {padding-left:5px;}
.hevt li {line-height:42px; border-bottom:1px solid #ccc;}
.hevt li span {float:right; margin-right:10px;}
.hevt_t li:first-child {margin-top:40px;}
.hevt_h li:first-child {margin-top:40px;}
.hevt_t li:nth-child(1) {border:none;}
.hevt_h li:nth-child(1) {border:none;}
.hevt_t li:nth-child(6) {border:none;}
.hevt_h li:nth-child(6) {border:none;}

.hevt_t li {clear:both; padding-left:5px;}
.hevt_h li {clear:both; padding-left:5px;}
.hevt_t li a{max-width:70%; color:#222; text-overflow:ellipsis; word-wrap:normal; white-space:nowrap; overflow:hidden; display:block; float:left;}
.hevt_h li a{max-width:70%; color:#222; text-overflow:ellipsis; word-wrap:normal; white-space:nowrap; overflow:hidden; display:block; float:left;}
.hevt_t li span.new {float:left; line-height:30px; position:static; top:auto; right:auto; padding-left:4px; padding-top:10px;}
.hevt_h li span.new {float:left; line-height:30px; position:static; top:auto; right:auto; padding-left:4px; padding-top:10px;}

.mid_bn {float:left; width:170px; overflow:hidden; margin-right:15px}
.mid_bn li {margin-bottom:4px}

.long_bn {margin-bottom:30px}

.news {height:200px; border:1px solid #ccc;  margin-bottom:30px; padding-top:2px;}
.news .main_news {position:relative; float:left; width:615px; height:197px; border-right:1px solid #ddd; padding-left:2px;}
.news .main_news h2 {font-size:15px; width:610px; color:#ffffff; margin-bottom:20px; background:#a65d54; height:25px; line-height:25px; padding-left:10px;}
.news .main_news p {position:absolute; top:45px; left:20px; width:175px; height:125px; background-size:cover; z-index:1}
.news .main_news dt {font-size:18px; font-weight:bold; margin-left:200px; margin-bottom:15px; padding-left:10px;}
.news .main_news dd {font-size:14px; color:#444; margin-left:210px; line-height:1.5; padding-right:10px;}
.news .main_news dd span {display:inline-block; margin-right:5px; color:#888; padding-top:10px; padding-left:10px;}

.news .news_all {float:left; width:577px; padding-left:2px }
.news .news_all h2 {font-size:15px; width:577px; color:#ffffff; margin-bottom:20px; background:#a65d54;  height:25px; padding-left:15px; line-height:25px;}
.news .news_all dt {font-size:18px; font-weight:bold; margin-bottom:10px; padding-left:15px; width:570px;}
.news .news_all dd a {font-size:14px; line-height:25px; color:#444; padding-left:15px;}
.news .news_all dd span {position:absolute; right:15px; line-height:25px; color:#888; padding-left:10px;}
.news .news_all dd span.new {display:inline-block; top:auto; right:auto; padding-left:4px}

.vip_review {height:310px; margin-bottom:30px; display:block}
.vip_review h2 {text-align:center; background:#4c4c4c; margin-bottom:20px}
.vip_review ul {float:left; width:615px; height:250px;}
.vip_review dl {float:left; width:570px; height:250px; margin-left:15px; border:1px solid #999}
.vip_review dl dt {line-height:40px; padding-left:15px; font-size:16px; margin-bottom:10px; color:#fff; background:#999}
.vip_review dl dd {position:relative; height:25px; padding-left:20px; margin-bottom:5px}
.vip_review dl dd a {font-size:14px; line-height:25px; color:#444}
.vip_review dl dd span {position:absolute; right:15px; line-height:25px; color:#888}
.vip_review dl dd span.new {display:inline-block; position:static; top:auto; right:auto; padding-left:4px}

.pro_review {clear:both; margin-bottom:30px; display:block}
.pro_review h2 {text-align:center; background:#4c4c4c; margin-bottom:20px}
.pro_review ul { height:300px; margin-bottom:20px}
.pro_review ul>li {float:left}
.pro_review dl {float:left; width:50%;}
.pro_review .best {padding-right:15px}
.pro_review .new {padding-left:15px}
.pro_review dl dt {line-height:40px; font-size:18px; border-bottom:1px solid #a00}
.pro_review dl dd {position:relative; height:30px; clear:both}
.pro_review dl dd a {font-size:16px; line-height:25px; color:#444}
.pro_review dl dd span {position:absolute; right:15px; line-height:25px; color:#888}
.pro_review dl dd span.new {display:inline-block; position:static; top:auto; right:auto; padding-left:4px}

.bot_bn { text-align:center; margin-bottom:30px; padding:50px 0; background:url(http://www.etudehouse.com/kr/ko/web_resource/front../images/beautylife/bg_find_yourLook.jpg) no-repeat center top #f2e7e1}
.bot_bn li {display:inline-block; margin:0 5px}
.bot_bn img {width:270px; height:320px; border:solid #CCC 1px;}

.phone_box { position:fixed; bottom:0; left:0; width:100%; height:120px; background:url(../images/phone_bg.png) repeat-x; z-index:100}
.phone_box > ul {width:1200px; margin:0 auto}
.phone_box > ul > li {float:left; font-weight:bold; color:#fff}
.phone_box label  {display:inline-block; width:16%; font-size:14px; line-height:24px}
.phone_box input[type=text] {height:24px; margin-bottom:5px; color:#444}
.phone_box .phone_input {width:505px; padding-top:10px; padding-left:30px;}
.phone_box .phone_input a {display:inline-block; border:1px solid #69f; padding:0 5px; font-size:12px; line-height:18px; border-radius:5px; background-color:#183965}
.phone_box .phone_input a.deg {background:linear-gradient(180deg, #4485dd, #1c4170)}

#footer {width:1200px; margin:0 auto; padding-top:30px; font-size:13px; line-height:1.5; clear:both}
.f-top {height:50px; display: flex; align-items: center; justify-content: center; border-bottom:1px solid #ddd; border-top:1px solid #aaa; color:#777}
.f-top a {line-height:32px; padding:0 10px; }
.copy {width:1200px; height:110px; margin:0 auto}
.copy>li {float:left}
.copy .cp1 {padding-right:10px; border-right:1px solid #ddd}
.copy .cp2 {padding-left:10px; padding-top:10px;}
.copy .cp3 {float:right; display:none}

.s-visual > ul {width:100%; height:150px; margin-bottom:20px; text-align:center; overflow:hidden; background-repeat:no-repeat; background-position:center; background-size:cover}
.sv10 {background-image:url('../images/sv10.jpg'); bacgkround-color:#003988;}



.content {width:950px; float:right; font-size:13px}
.content .view {line-height:1.6}
.content .view p {margin:1% 0}
/*.content .view p > img {width:100% !important; height:auto !important}*/
.title {position:relative; width:100%; height:50px; border-bottom:1px solid #ddd; margin-bottom:20px}
.title h1 {position:absolute; bottom:5px; left:5px; font-weight:700; font-size:30px; color:#005b79}
.title>ul {position:absolute; bottom:5px; right:5px}
.lc, .lc { font-size:12px}

.side {float:left; width:200px; }
.side .s-top {width:200px; height:100px; text-align:center; padding-top:15px; letter-spacing:-0.1em; font-size:28px; font-weight:700; color:#fff; background:url(../images/left_top_bg.jpg) no-repeat}
.side .s-top span {display:block; font-size:14px; padding-top:3px; letter-spacing:0.1em}
.side .s-menu {border:1px solid #ddd}
.side .s-menu li {height:40px; font-size:16px; color:#555; padding-left:20px; border-top:1px solid #ddd}
.side .s-menu li.on {color:#fe3e24; background:url(../images/bl_left_on.png) no-repeat 90% center}
.side .s-menu li:first-child {border-top:none}
.side .s-menu li a {font-weight:400; line-height:40px;}

.tab_top {height:40px; border-bottom:1px solid #2ab4d8;}
.tab_top a{ display:block; float:left; width:150px; height:40px; font:normal 15px/40px Nanumgothic; text-align:center; margin-right:-1px; border:1px solid #ccc; background:#fff; text-decoration:none}
.tab_top a.on {color:#fff; font:700 15px/42px Nanum Gothic; background:#2ab4d8; border-bottom:1px solid #2ab4d8;}

.paragraph {width:100%; margin-bottom:30px; padding:0 10px; clear:both; font-weight:normal; font-size:13px; line-height:1.5; font-family:Nanum Gothic}
.paragraph h3 {font:700 20px/1.5 Nanum Gothic; margin-bottom:10px; padding-left:10px; background:url(../images/bl_h3.gif) no-repeat}
.paragraph p {margin-bottom:10px}
.paragraph img {width:100%;; vertical-align:top}

.paragraph.guide dl {display: flex; margin-bottom: 50px}
.paragraph.guide dl dt {width: 320px}
.paragraph.guide dl dd {width: calc(100% - 320px); padding: 10px}
.paragraph.guide p {display: flex; align-items: center; font-size: 18px}
.paragraph.guide p label {display: block; width: 24px; line-height: 24px; margin-right: 10px; text-align: center; color: #fff; font-size: .75em; border-radius: 10px; background: #fb3601}
.paragraph.guide ul {margin-bottom: 50px}
.paragraph.guide ul li {padding: 10px}
.paragraph.guide ul figure {width: 75%; border: 1px solid #ccc}
.paragraph.guide ul .go {display: inline-block; line-height: 40px; padding: 0 40px 0 20px; border-radius: 10px; font-size: 18px; color: #fff; background-color: #fb3601; background-image: url(../images/gggo.png); background-position: center right 5px}


.history {width:100%; border-top:1px solid #ccc}
.history dl {border-bottom:1px solid #ddd; padding:10px 0; background:url(../images/history.gif) no-repeat 20px top}
.history dl:first-child {background:url(../images/history1.gif) no-repeat 20px top}
.history dl:last-child {border-bottom:none}
.history dt {float:left; color:#034ea2; width:180px; font-weight:bold; font-size:18px; padding-left:50px}
.history dd {float:right; width:70%}
.history dd span {padding-right:30px; font-weight:bold; color:#8ecad7}

.table_sch {height:38px; padding:0 10px; margin-bottom:10px; border:1px solid #ccc; background:url(../images/boxbg.gif) repeat-x}
.table_sch table {width:100%; height:38px; line-height:38px}

.table_red {width:100%; border-top:2px solid #333}
.table_red thead td {height:40px; text-align:center; border-bottom:1px solid #ddd}
.table_red tbody td { text-align:center; height:35px; border-bottom:1px solid #ddd}
.table_red tbody td.tl {text-align:left}
.table_red tbody td.tl a {padding-left:8px}

.tab01 {width:100%; height:40px; border-left:1px solid #999; box-sizing:border-box} 
.tab01 ul {width:474px; height:40px; float:left; border-top:1px solid #999; border-right:1px solid #999; border-bottom:1px solid #999; text-align:center; font-size:16px; line-height:40px; background:#eee; font-family:Nanum Gothic; box-sizing:border-box} 
.tab01 ul.on {width:474px; height:40px; border-right:1px solid #999; border-bottom:1px solid #fff; text-align:center; color:#F60; font-weight:bold; background:#fff; box-sizing:border-box}

.tab02 {width:100%; height:45px; margin:0 auto 20px}
.tab02 ul {height:45px; border-bottom:1px solid #114285}
.tab02 ul li {float:left; width:200px; height:45px; text-align:center; line-height:44px; font-size:14px; border-color:#bfd1e7; border-width:1px; cursor:pointer; border-style:solid; border-bottom:1px solid #114285}
.tab02 ul li.on {border-color:#114285; border-bottom:1px solid #fff; color:#114285; font-weight:600; cursor:default}

.btn_area { text-align:right; padding:10px 10px 0 0}
.paginate {height:50px}
.paginate strong {font-family:Nanum Gothic; font-weight:700; color:#39F}

.list01 {width:100%; border-top:1px solid #999; text-align:center}
.list01 table {width:100%; border-left:1px solid #ccc}
.list01 th { height:30px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; background:#f1f1f1}
.list01 td { height:50px; border-right:1px solid #ccc; border-bottom:1px solid #ddd}
.list01 td.t1 {text-align:left; padding-left:10px}
.list01 td.noline {border-bottom:0px}

.textbox {border:1px solid #ccc; height:540px; overflow-y:scroll; overflow-x:hidden; padding:10px; margin-bottom:10px}
.textbox table  {width:810px; margin-bottom:10px; border-top:1px solid #ccc; border-left:1px solid #ddd}
.textbox table th {font-weight:normal; font-size:11px; height:30px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; background:#f1f1f1}
.textbox table td {height:40px; font-size:12px; border-right:1px solid #ccc; border-bottom:1px solid #ddd; text-align:center}

.read img {max-width:800px}

.ex_tit4 {font-size:24px; line-height:1.2}
.ex_tit4 .fc-1 {font-size:inherit; font-family:Nanum Gothic; font-weight:700; color:#2d5dad}
.ex_tit5 {font-size:30px; line-height:1.2;}
.ex_tit5 .fc-1 {font-size:inherit; color:#2d5dad}
.tit3 {font-family:'Malgun Gothic'; font-weight:bold; font-size:22px; color:#222; margin:0px; padding:30px 0 0 0; line-height:1.2;}
.subTxt {font-size:14px}

.outline_list p { font-size:13px}
.outline_list {margin-top:40px;}
.outline_list img{width:460px; height:192px;}
.outline_list dl{padding-top:20px;;}
.outline_list dl dd p:first-child {margin-top:10px;}
.outline_list dl dd p {margin-top:5px;}
.outline_list dl dd p strong {display:block; font-family:'Malgun Gothic'; font-size:16px; font-weight:600; color:#2d5dad; line-height:1.4;}
.outline_list p.img {margin-top:20px;}

.outline_list {overflow:hidden;}
.outline_list .ml-20 {margin-left:20px;}
.outline_list dl {float:left; width:450px;}
.outline_list dl dt {padding-top:0;}
.outline_list > p {float:left;}
.down {display:block; float:left; width:180px; height:40px; border-radius:5px; font:700 20px/40px Nanum Gothic; text-align:center; margin-left:10px; color:#fff; background:#3b73c3}
.home {display:block; float:left; width:180px; height:40px; border-radius:5px; font:700 20px/40px Nanum Gothic; text-align:center; margin-left:10px; color:#fff; background:#3fa9bf}

.id_link #step1 {margin-bottom:30px}
.id_link dt {font-size:18px; margin-bottom:20px; padding-left:5%}
.id_link dd {font-size:18px; margin-bottom:40px; padding-left:5%}
.id_link dd span {font-size:14px; line-height:2; color:#777}
.id_link .link_box {border:1px solid #ccc; margin:0 5%; padding:20px 0; font-size:15px; margin-bottom:20px}
.id_link .link_box li {margin-bottom:10px}
.id_link .link_box label {display:inline-block; width:15%; padding-left:1%}
.id_link .link_box label:first-child {padding-left:5%}
.id_link #step2 {margin-bottom:30px}
.id_link #step_end>ul {font-size:18px; text-align:center; margin-bottom:30px; padding-top:50px}
.id_link .btn_area {text-align:center}
.id_link .btn_area input {color:#fff; font-size:18px; min-width:20%; padding:10px 20px; border:none; background:#999}
.id_link .btn_area input:first-child { font-weight:bold; background:#e21}

.up {color:#df1914}
.dn {color:#0862e0}

.apply{position: absolute; top:50%; left: 50%; width: 540px; height:250px; display: none; overflow:hidden; margin-top:-160px; margin-left:-200px; box-shadow:1px 3px 10px #444; background-color:#fff; z-index:1000;}
.apply h2 {color:#e44a00; font-family:Noto Sans KR; font-size:18px; line-height:40px; font-weight:400; border-bottom:1px solid #ddd; margin:0 5%}
.apply ul {padding-top:20px; margin:0 5%; margin-bottom:10px}
.apply ul li {margin-bottom:4px}
.apply ul li input[type=text], .apply ul li input[type=tel] {width:100%; height:30px; border:1px solid #ddd; margin-bottom:4px}
.apply ul li textarea {width:100%; height:80px; border:1px solid #ddd}
.apply ul .btn_area {text-align:center; padding-top:20px}
.apply ul .btn_area input[type=button] {border:none; width:40%; height:40px; line-height:40px; font-size:18px; color:#fff; background-color:#999}
.apply ul .btn_area input[type=button]:last-child {background-color:#f36331}
.apply .agree_down a {padding:2px; display:inline-block; background-color:#eee; }
#mask_down {position:absolute; background-color:#000; display:none; left:0; top:0; z-index:900;}

.freeRecom th { height:30px; background:#f4f4f4}
.freeRecom td { padding:10px}

/* ===== 반응형 (태블릿 / 모바일) ===== */
@media (max-width:1240px) {
	#wrap {min-width:0}
	header, .container, #footer, .copy {width:100%}
	header .logo {left:16px}
	header .top_remote a {right:16px; width:auto}
}

@media (max-width:768px) {
	header {height:60px; border-bottom:1px solid #eee}
	header .logo {top:8px; width:118px; height:44px; background-size:contain}
	header .lnb {display:none}
	header .top_remote a {top:10px; right:12px; padding-top:22px; font-size:11px; letter-spacing:-.08em; background-size:auto 20px}
	header .top_login a {top:13px; right:90px; padding:0 14px; line-height:34px; font-size:14px}
	header .top_login.on span {display:none}

	#footer {padding:20px 16px 0}
	.f-top {height:auto; flex-wrap:wrap; padding:8px 0; font-size:12px}
	.f-top a {padding:0 6px}
	.copy {height:auto; padding-bottom:24px}
	.copy > li {float:none}
	.copy .cp1 {padding:12px 0 0; border-right:none}
	.copy .cp2 {padding:8px 0 0; font-size:12px; word-break:keep-all}
}